@skyhook-io/radar-app 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",
@@ -35,7 +35,7 @@
     "react-virtuoso": "^4.18.6",
     "remark-gfm": "^4.0.1",
     "shiki": "^4.0.1",
-    "yaml": "^2.8.3"
+    "yaml": "^2.8.4"
   },
   "peerDependencies": {
     "@skyhook-io/k8s-ui": ">=1.5.0",
@@ -54,7 +54,7 @@
     "@skyhook-io/k8s-ui": "*",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.2.4",
-    "@tanstack/react-query": "^5.100.6",
+    "@tanstack/react-query": "^5.100.9",
     "@types/diff": "^8.0.0",
     "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
@@ -64,11 +64,11 @@
     "clsx": "^2.1.1",
     "elkjs": "^0.11.1",
     "lucide-react": "^1.12.0",
-    "postcss": "^8.5.12",
+    "postcss": "^8.5.14",
     "prettier": "^3.8.1",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "react-router-dom": "^7.14.2",
+    "react-router-dom": "^7.15.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.4",
     "typescript": "^6.0.2",

package/src/App.tsx

@@ -28,7 +28,7 @@ import { ConnectionErrorView } from './components/ConnectionErrorView'
 import { CapabilitiesProvider, useCapabilitiesContext } from './contexts/CapabilitiesContext'
 import { UserMenu } from './components/UserMenu'
 import { ErrorBoundary } from './components/ui/ErrorBoundary'
-import { NamespaceSelector } from './components/ui/NamespaceSelector'
+import { NamespaceSelector, type NamespaceSelectorHandle } from './components/ui/NamespaceSelector'
 import { UpdateNotification } from './components/ui/UpdateNotification'
 import { ShortcutHelpOverlay } from './components/ui/ShortcutHelpOverlay'
 import { CommandPalette } from './components/ui/CommandPalette'
@@ -46,6 +46,7 @@ import { LargeClusterNamespacePicker } from './components/shared/LargeClusterNam
 import { SettingsDialog } from './components/settings/SettingsDialog'
 import type { TopologyNode, GroupingMode, MainView, SelectedResource, SelectedHelmRelease, NodeKind, TopologyMode, Topology, K8sEvent } from './types'
 import { kindToPlural, openExternal } from './utils/navigation'
+import type { ContextSwitcherHandle } from './components/ContextSwitcher'
 
 // All possible node kinds (core + GitOps)
 const ALL_NODE_KINDS: NodeKind[] = [
@@ -310,34 +311,51 @@ function AppInner() {
   // Suppress the mainView-change clear effect during controlled expand/collapse transitions.
   const suppressViewClearRef = useRef(false)
 
-  // Close resource drawer when switching workload kind in URL (/resources/pods → /resources/deployments).
-  // Keeps stale Pod drawer from masking the table after sidebar navigation (Radar Hub / app.radarhq.io).
-  const prevResourcesKindSlugRef = useRef<string | null>(null)
+  // Close resource drawer when the /resources route no longer matches the
+  // selected drawer resource. This covers both in-view kind switches and
+  // cross-kind navigations from expanded drawers (for example Node -> View Pods).
+  const prevResourcesKindKeyRef = useRef<string | null>(null)
+  const currentResourceKindSlug = normalizedResourcesKindSlug.toLowerCase()
+  const currentResourceGroup = searchParams.get('apiGroup') ?? ''
+  const selectedResourceKindSlug = selectedResource ? kindToPlural(selectedResource.kind).toLowerCase() : ''
+  const selectedResourceGroup = selectedResource?.group ?? ''
+  const selectedResourceRouteMismatch = mainView === 'resources' && !!selectedResource && (
+    selectedResourceKindSlug !== currentResourceKindSlug ||
+    selectedResourceGroup !== currentResourceGroup
+  )
+  const resourcesKindRouteChanged = mainView === 'resources' &&
+    prevResourcesKindKeyRef.current !== null &&
+    prevResourcesKindKeyRef.current !== `${currentResourceGroup}/${currentResourceKindSlug}`
+  const routeSelectedResource = resourcesKindRouteChanged && selectedResourceRouteMismatch
+    ? null
+    : selectedResource
+
   useEffect(() => {
     if (mainView !== 'resources') {
-      prevResourcesKindSlugRef.current = null
+      prevResourcesKindKeyRef.current = null
       return
     }
-    const slug = normalizedResourcesKindSlug
-    const prev = prevResourcesKindSlugRef.current
-    prevResourcesKindSlugRef.current = slug
-    if (prev !== null && prev !== slug) {
+    const key = `${currentResourceGroup}/${currentResourceKindSlug}`
+    const prev = prevResourcesKindKeyRef.current
+    prevResourcesKindKeyRef.current = key
+
+    if (prev !== null && prev !== key && selectedResourceRouteMismatch) {
       setSelectedResource(null)
       setDrawerExpanded(false)
     }
-  }, [mainView, normalizedResourcesKindSlug])
+  }, [mainView, currentResourceKindSlug, currentResourceGroup, selectedResourceRouteMismatch])
 
   // Animation hooks for smooth mount/unmount transitions
-  const resourceDrawer = useAnimatedUnmount(!!selectedResource, 300)
+  const resourceDrawer = useAnimatedUnmount(!!routeSelectedResource, 300)
   const helmDrawer = useAnimatedUnmount(!!(mainView === 'helm' && selectedHelmRelease), 300)
   const helpOverlay = useAnimatedUnmount(showHelp, 300)
   const commandPaletteAnim = useAnimatedUnmount(showCommandPalette, 300)
   const diagnosticsOverlay = useAnimatedUnmount(showDiagnostics, 300)
 
   // Hold last valid values so drawers can animate out before data disappears
-  const lastResourceRef = useRef(selectedResource)
-  if (selectedResource) lastResourceRef.current = selectedResource
-  const drawerResource = selectedResource || lastResourceRef.current
+  const lastResourceRef = useRef(routeSelectedResource)
+  if (routeSelectedResource) lastResourceRef.current = routeSelectedResource
+  const drawerResource = routeSelectedResource || lastResourceRef.current
 
   const lastHelmReleaseRef = useRef(selectedHelmRelease)
   if (selectedHelmRelease) lastHelmReleaseRef.current = selectedHelmRelease
@@ -371,6 +389,10 @@ function AppInner() {
   // Context switching for command palette
   const switchContext = useSwitchContext()
 
+  // Refs for dropdown components to trigger them via shortcuts
+  const namespaceSelectorRef = useRef<NamespaceSelectorHandle>(null)
+  const contextSwitcherRef = useRef<ContextSwitcherHandle>(null)
+
   // View switching keyboard shortcuts
   const views: ExtendedMainView[] = ['home', 'topology', 'resources', 'timeline', 'helm', 'traffic', 'cost', 'audit']
   useRegisterShortcuts([
@@ -382,6 +404,22 @@ function AppInner() {
       scope: 'global' as const,
       handler: () => setMainView(view),
     })),
+    {
+      id: 'switch-namespace',
+      keys: 'n',
+      description: 'Switch namespace',
+      category: 'Navigation' as const,
+      scope: 'global' as const,
+      handler: () => namespaceSelectorRef.current?.open(),
+    },
+    {
+      id: 'switch-context',
+      keys: 'c',
+      description: 'Switch context',
+      category: 'Navigation' as const,
+      scope: 'global' as const,
+      handler: () => contextSwitcherRef.current?.open(),
+    },
     {
       id: 'theme-toggle',
       keys: 't',
@@ -676,7 +714,7 @@ function AppInner() {
       if (slashIdx > 0) {
         const ns = releaseParam.slice(0, slashIdx)
         const name = releaseParam.slice(slashIdx + 1)
-        setSelectedHelmRelease({ namespace: ns, name })
+        setSelectedHelmRelease({ namespace: ns, name, storageNamespace: searchParams.get('releaseStorage') || undefined })
       }
     }
   }, [searchParams])
@@ -798,7 +836,7 @@ function AppInner() {
           {navCustomization.brandSlot ?? <Logo />}
 
           <div className="flex items-center gap-2">
-            {navCustomization.contextSlot ?? <ContextSwitcher />}
+            {navCustomization.contextSlot ?? <ContextSwitcher ref={contextSwitcherRef} />}
             {/* Connection status - next to cluster name */}
             <div className="flex items-center gap-1.5 ml-1">
               <Tooltip
@@ -893,6 +931,7 @@ function AppInner() {
         <div className="flex items-center gap-3 shrink-0">
           {/* Namespace selector with search */}
           <NamespaceSelector
+            ref={namespaceSelectorRef}
             value={namespaces}
             onChange={setNamespaces}
             namespaces={availableNamespaces}
@@ -1192,7 +1231,7 @@ function AppInner() {
         {mainView === 'resources' && (
           <ResourcesView
             namespaces={namespaces}
-            selectedResource={selectedResource}
+            selectedResource={routeSelectedResource}
             onResourceClick={(res) => res ? navigateToResource(res) : setSelectedResource(null)}
             onResourceClickYaml={(res) => navigateToResource(res, 'yaml')}
             onKindChange={() => setSelectedResource(null)}
@@ -1220,10 +1259,15 @@ function AppInner() {
           <HelmView
             namespace=""
             selectedRelease={selectedHelmRelease}
-            onReleaseClick={(ns, name) => {
-              setSelectedHelmRelease({ namespace: ns, name })
+            onReleaseClick={(ns, name, storageNamespace) => {
+              setSelectedHelmRelease({ namespace: ns, name, storageNamespace })
               const params = new URLSearchParams(window.location.search)
               params.set('release', `${ns}/${name}`)
+              if (storageNamespace) {
+                params.set('releaseStorage', storageNamespace)
+              } else {
+                params.delete('releaseStorage')
+              }
               setSearchParams(params, { replace: true })
             }}
           />
@@ -1305,6 +1349,7 @@ function AppInner() {
             setSelectedHelmRelease(null)
             const params = new URLSearchParams(window.location.search)
             params.delete('release')
+            params.delete('releaseStorage')
             setSearchParams(params, { replace: true })
           }}
           onNavigateToResource={(resource) => {

package/src/api/client.ts

@@ -298,6 +298,7 @@ export function useAudit(namespaces: string[] = []) {
     queryFn: () => fetchJSON(`/audit${params}`),
     staleTime: 30000,
     refetchInterval: 60000,
+    placeholderData: (prev) => prev,
   })
 }
 
@@ -1967,15 +1968,20 @@ function streamHelmProgress(
 
                 if (data.type === 'complete') {
                   resolve(data)
+                  return
                 } else if (data.type === 'error') {
                   reject(new Error(data.message || failureLabel))
+                  return
                 }
-              } catch {
-                // Ignore parse errors
+              } catch (err) {
+                reject(err instanceof Error ? err : new Error(`${failureLabel}: invalid progress event`))
+                return
               }
             }
           }
         }
+
+        reject(new Error(`${failureLabel}: stream ended before completion`))
       })
       .catch(reject)
   })
@@ -1986,10 +1992,13 @@ export function upgradeWithProgress(
   namespace: string,
   name: string,
   version: string,
+  repositoryName: string | undefined,
   onProgress: (event: InstallProgressEvent) => void
 ): Promise<void> {
+  const params = new URLSearchParams({ version })
+  if (repositoryName) params.set('repository', repositoryName)
   return streamHelmProgress(
-    `${getApiBase()}/helm/releases/${namespace}/${name}/upgrade-stream?version=${encodeURIComponent(version)}`,
+    `${getApiBase()}/helm/releases/${namespace}/${name}/upgrade-stream?${params.toString()}`,
     { method: 'POST' },
     onProgress,
     'Upgrade failed',

package/src/components/ContextSwitcher.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useMemo, useState, forwardRef } from 'react'
 import { AlertTriangle } from 'lucide-react'
 import {
   ClusterSwitcher,
@@ -16,11 +16,15 @@ interface ContextSwitcherProps {
   className?: string
 }
 
+export interface ContextSwitcherHandle {
+  open: () => void
+}
+
 interface ParsedContext extends ParsedContextName {
   context: ContextInfo
 }
 
-export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
+export const ContextSwitcher = forwardRef<ContextSwitcherHandle, ContextSwitcherProps>(({ className = '' }, ref) => {
   const [showConfirm, setShowConfirm] = useState(false)
   const [pendingSwitch, setPendingSwitch] = useState<ParsedContext | null>(null)
   const [sessionCounts, setSessionCounts] = useState<SessionCounts | null>(null)
@@ -33,13 +37,37 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
   const { tabs } = useDock()
 
   // Parse contexts and decide whether to render group headers (multi-account only).
-  const { parsedById, hasMultipleAccounts } = useMemo(() => {
-    if (!contexts) return { parsedById: new Map<string, ParsedContext>(), hasMultipleAccounts: false }
-    const parsed: ParsedContext[] = contexts.map(ctx => ({ context: ctx, ...parseContextName(ctx.name) }))
+  // hasMultipleSources gates the kubeconfig-source chip — only useful when 2+
+  // distinct kubeconfig files are in play. Single-source setups (the common
+  // case) skip the chip entirely so the dropdown stays clean.
+  const { parsedById, hasMultipleAccounts, hasMultipleSources } = useMemo(() => {
+    if (!contexts) return {
+      parsedById: new Map<string, ParsedContext>(),
+      hasMultipleAccounts: false,
+      hasMultipleSources: false,
+    }
+    // Strip the disambiguation suffix (" (<source>)" or " (<source> #N)")
+    // before parsing — qualified names won't match the GKE/EKS/AKS regexes
+    // otherwise, and the suffix is redundant with the source chip we
+    // render separately.
+    const stripSourceSuffix = (name: string, source?: string): string => {
+      if (!source) return name
+      const escaped = source.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+      return name.replace(new RegExp(`\\s+\\(${escaped}(?:\\s+#\\d+)?\\)$`), '')
+    }
+    const parsed: ParsedContext[] = contexts.map(ctx => ({
+      context: ctx,
+      ...parseContextName(stripSourceSuffix(ctx.name, ctx.source)),
+    }))
     const accounts = new Set(parsed.map(p => `${p.provider}:${p.account}`))
+    const sources = new Set(contexts.map(c => c.source).filter(Boolean))
     const byId = new Map<string, ParsedContext>()
     for (const p of parsed) byId.set(p.context.name, p)
-    return { parsedById: byId, hasMultipleAccounts: accounts.size > 1 }
+    return {
+      parsedById: byId,
+      hasMultipleAccounts: accounts.size > 1,
+      hasMultipleSources: sources.size > 1,
+    }
   }, [contexts])
 
   // Map parsed contexts → generic ClusterSwitcher items, sorted GKE/EKS/AKS/Other → account → name.
@@ -61,20 +89,16 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
         : hasMultipleAccounts
           ? 'Other'
           : undefined
-      // `name` is the raw context — ClusterSwitcher renders it through
-      // ClusterName, which collapses GKE/EKS/AKS shapes to the meaningful
-      // tail. `secondary` shows the original raw when we collapsed it,
-      // so users always see the full context at a glance (rather than
-      // having to hover to reveal it).
       return {
         id: p.context.name,
-        name: p.context.name,
+        name: p.raw,
         secondary: p.provider ? p.raw : undefined,
         badge: p.region || undefined,
+        sourceLabel: hasMultipleSources ? p.context.source : undefined,
         group: { key: groupKey, label: groupLabel },
       }
     })
-  }, [parsedById, hasMultipleAccounts])
+  }, [parsedById, hasMultipleAccounts, hasMultipleSources])
 
   const performSwitch = async (parsed: ParsedContext) => {
     startSwitch({
@@ -152,15 +176,24 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
     )
   }
 
-  const currentRaw = clusterInfo?.context || contexts?.find(c => c.isCurrent)?.name || 'Unknown'
-  const currentId = contexts?.find(c => c.isCurrent)?.name
+  const currentCtx = contexts?.find(c => c.isCurrent)
+  const currentId = currentCtx?.name
+  // Use parsed.raw (the source-stripped form) for the trigger so the
+  // disambiguation suffix doesn't double up with the source chip.
+  // Fall back to clusterInfo.context for the very-early window before
+  // /api/contexts has resolved.
+  const currentParsed = currentId ? parsedById.get(currentId) : undefined
+  const currentRaw = currentParsed?.raw || clusterInfo?.context || currentCtx?.name || 'Unknown'
+  const currentSourceLabel = hasMultipleSources ? currentCtx?.source || undefined : undefined
 
   return (
     <>
       <ClusterSwitcher
+        ref={ref}
         className={className}
         currentId={currentId}
         currentName={currentRaw}
+        currentSourceLabel={currentSourceLabel}
         items={items}
         onSelect={handleSelect}
         loading={switchContext.isPending}
@@ -222,4 +255,4 @@ export function ContextSwitcher({ className = '' }: ContextSwitcherProps) {
       )}
     </>
   )
-}
+})

package/src/components/helm/HelmReleaseDrawer.tsx

@@ -56,16 +56,17 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
   // transient error state under the role-gated panel.
   const { canAtLeast } = useCloudRole()
   const canViewSensitive = canAtLeast('member')
+  const helmNamespace = release.storageNamespace || release.namespace
 
   const { data: releaseDetail, isLoading, refetch: refetchRelease } = useHelmRelease(
-    release.namespace,
+    helmNamespace,
     release.name
   )
   const [refetch, isRefreshAnimating] = useRefreshAnimation(refetchRelease)
 
   // Fetch manifest for selected revision (or latest)
   const { data: manifest, isLoading: manifestLoading } = useHelmManifest(
-    release.namespace,
+    helmNamespace,
     release.name,
     selectedRevision,
     canViewSensitive,
@@ -73,7 +74,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
   // Fetch values
   const { data: values, isLoading: valuesLoading } = useHelmValues(
-    release.namespace,
+    helmNamespace,
     release.name,
     showAllValues,
     canViewSensitive,
@@ -81,7 +82,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
   // Fetch diff if comparing revisions
   const { data: diffData, isLoading: diffLoading } = useHelmManifestDiff(
-    release.namespace,
+    helmNamespace,
     release.name,
     diffRevisions?.rev1 || 0,
     diffRevisions?.rev2 || 0,
@@ -89,10 +90,11 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
   )
 
   // Lazy check for upgrade availability
-  const { data: upgradeInfo, isLoading: upgradeLoading } = useHelmUpgradeInfo(
-    release.namespace,
+  const { data: upgradeInfo, isLoading: upgradeLoading, error: upgradeError } = useHelmUpgradeInfo(
+    helmNamespace,
     release.name
   )
+  const upgradeErrorMessage = upgradeError instanceof Error ? upgradeError.message : 'Upgrade check failed'
 
   // Mutations for actions
   const uninstallMutation = useHelmUninstall()
@@ -176,7 +178,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
     try {
       await rollbackWithProgress(
-        release.namespace,
+        helmNamespace,
         release.name,
         rollbackRevision,
         (event) => {
@@ -195,7 +197,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
       }])
 
       queryClient.invalidateQueries({ queryKey: ['helm-releases'] })
-      queryClient.invalidateQueries({ queryKey: ['helm-release', release.namespace, release.name] })
+      queryClient.invalidateQueries({ queryKey: ['helm-release', helmNamespace, release.name] })
 
       setTimeout(() => {
         setRollbackRevision(null)
@@ -215,7 +217,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
   const handleUninstallConfirm = () => {
     uninstallMutation.mutate(
-      { namespace: release.namespace, name: release.name },
+      { namespace: helmNamespace, name: release.name },
       {
         onSuccess: () => {
           setShowUninstallConfirm(false)
@@ -235,9 +237,10 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
     try {
       await upgradeWithProgress(
-        release.namespace,
+        helmNamespace,
         release.name,
         upgradeInfo.latestVersion,
+        upgradeInfo.repositoryName,
         (event) => {
           if (event.type === 'progress' && event.message) {
             setUpgradeProgress(prev => [...prev, {
@@ -255,8 +258,8 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
       // Invalidate queries
       queryClient.invalidateQueries({ queryKey: ['helm-releases'] })
-      queryClient.invalidateQueries({ queryKey: ['helm-release', release.namespace, release.name] })
-      queryClient.invalidateQueries({ queryKey: ['helm-upgrade-info', release.namespace, release.name] })
+      queryClient.invalidateQueries({ queryKey: ['helm-release', helmNamespace, release.name] })
+      queryClient.invalidateQueries({ queryKey: ['helm-upgrade-info', helmNamespace, release.name] })
       queryClient.invalidateQueries({ queryKey: ['helm-batch-upgrade-info'] })
 
       setTimeout(() => {
@@ -327,6 +330,13 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
               <span className="badge bg-theme-hover/50 text-theme-text-secondary animate-pulse">
                 checking...
               </span>
+            ) : upgradeError ? (
+              <span
+                className="badge bg-theme-hover/50 text-theme-text-secondary"
+                title={upgradeErrorMessage}
+              >
+                upgrade check failed
+              </span>
             ) : upgradeInfo?.updateAvailable ? (
               <button
                 onClick={() => setShowUpgradeConfirm(true)}
@@ -344,6 +354,13 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
               <span className={clsx('badge', SEVERITY_BADGE.success)} title="Chart is up to date">
                 latest
               </span>
+            ) : upgradeInfo?.error ? (
+              <span
+                className="badge bg-theme-hover/50 text-theme-text-secondary"
+                title={upgradeInfo.error}
+              >
+                upstream unknown
+              </span>
             ) : null}
           </div>
           <div className="flex items-center gap-1">
@@ -450,7 +467,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
                   onToggleAllValues={setShowAllValues}
                   onCopy={(text) => copyToClipboard(text, 'values')}
                   copied={copied === 'values'}
-                  namespace={release.namespace}
+                  namespace={helmNamespace}
                   name={release.name}
                   onApplySuccess={() => refetch()}
                 />

package/src/components/helm/HelmView.tsx

@@ -17,7 +17,7 @@ type ViewTab = 'releases' | 'charts'
 interface HelmViewProps {
   namespace: string
   selectedRelease?: SelectedHelmRelease | null
-  onReleaseClick?: (namespace: string, name: string) => void
+  onReleaseClick?: (namespace: string, name: string, storageNamespace?: string) => void
 }
 
 export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmViewProps) {
@@ -27,12 +27,14 @@ export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmVie
 
   const { data: releases, isLoading, error: releasesError, refetch: refetchReleases } = useHelmReleases(namespace || undefined)
   const isForbidden = isForbiddenError(releasesError)
+  const releasesErrorMessage = releasesError instanceof Error ? releasesError.message : 'Failed to load Helm releases'
 
   // Lazy load upgrade info after releases are loaded
-  const { data: upgradeInfo, isLoading: upgradeLoading, refetch: refetchUpgradeInfo } = useHelmBatchUpgradeInfo(
+  const { data: upgradeInfo, isLoading: upgradeLoading, error: upgradeError, refetch: refetchUpgradeInfo } = useHelmBatchUpgradeInfo(
     namespace || undefined,
     Boolean(releases && releases.length > 0)
   )
+  const upgradeErrorMessage = upgradeError instanceof Error ? upgradeError.message : 'Upgrade checks failed'
 
   const [handleRefresh, isRefreshAnimating] = useRefreshAnimation(async () => {
     await Promise.all([refetchReleases(), refetchUpgradeInfo()])
@@ -132,7 +134,7 @@ export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmVie
       scope: 'helm',
       handler: () => {
         const release = getHighlightedRelease()
-        if (release) onReleaseClick?.(release.namespace, release.name)
+        if (release) onReleaseClick?.(release.namespace, release.name, release.storageNamespace)
       },
       enabled: highlightedIndex >= 0,
     },
@@ -232,6 +234,11 @@ export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmVie
 
             {/* Releases Table */}
             <div className="flex-1 overflow-auto">
+              {upgradeError && (
+                <div className="m-4 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-sm text-amber-300">
+                  Upgrade checks failed: {upgradeErrorMessage}
+                </div>
+              )}
               {isLoading ? (
                 <PaneLoader className="h-full" />
               ) : isForbidden ? (
@@ -240,6 +247,20 @@ export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmVie
                   <p className="text-theme-text-secondary font-medium">Access Restricted</p>
                   <p className="text-sm mt-1">Insufficient permissions to list Helm releases</p>
                 </div>
+              ) : releasesError ? (
+                <div className="flex flex-col items-center justify-center h-full text-theme-text-tertiary gap-3 px-6 text-center">
+                  <Package className="w-10 h-10 text-amber-400" />
+                  <div>
+                    <p className="text-theme-text-secondary font-medium">Failed to load Helm releases</p>
+                    <p className="text-sm mt-1 break-all">{releasesErrorMessage}</p>
+                  </div>
+                  <button
+                    onClick={() => refetchReleases()}
+                    className="px-3 py-1.5 text-sm text-theme-text-primary border border-theme-border rounded-lg hover:bg-theme-elevated transition-colors"
+                  >
+                    Retry
+                  </button>
+                </div>
               ) : filteredReleases.length === 0 ? (
                 <div className="flex flex-col items-center justify-center h-full text-theme-text-tertiary gap-2">
                   <Package className="w-12 h-12 text-theme-text-disabled" />
@@ -291,16 +312,17 @@ export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmVie
                   <tbody className="table-divide-subtle">
                     {filteredReleases.map((release, index) => (
                       <ReleaseRow
-                        key={`${release.namespace}-${release.name}`}
+                        key={releaseIdentityKey(release)}
                         ref={index === highlightedIndex ? highlightedRowRef : null}
                         release={release}
-                        upgradeInfo={upgradeInfo?.releases[`${release.namespace}/${release.name}`]}
+                        upgradeInfo={upgradeInfo?.releases[releaseIdentityKey(release)]}
                         isSelected={
                           selectedRelease?.namespace === release.namespace &&
-                          selectedRelease?.name === release.name
+                          selectedRelease?.name === release.name &&
+                          (selectedRelease?.storageNamespace || selectedRelease?.namespace) === (release.storageNamespace || release.namespace)
                         }
                         isHighlighted={index === highlightedIndex}
-                        onClick={() => onReleaseClick?.(release.namespace, release.name)}
+                        onClick={() => onReleaseClick?.(release.namespace, release.name, release.storageNamespace)}
                         onMouseEnter={() => setHighlightedIndex(-1)}
                       />
                     ))}
@@ -329,6 +351,10 @@ export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmVie
   )
 }
 
+function releaseIdentityKey(release: Pick<HelmRelease, 'namespace' | 'name' | 'storageNamespace'>): string {
+  return `${release.storageNamespace || release.namespace}/${release.name}`
+}
+
 interface ReleaseRowProps {
   release: HelmRelease
   upgradeInfo?: UpgradeInfo

package/src/components/portforward/PortForwardManager.tsx

@@ -139,10 +139,25 @@ export function PortForwardProvider({ children }: { children: ReactNode }) {
   const measureAnchor = useCallback(() => {
     if (!indicatorRef.current) return
     const rect = indicatorRef.current.getBoundingClientRect()
+    // Align panel right edge with indicator right edge, but clamp so the
+    // panel's left edge never runs off the viewport's left edge — happens on
+    // narrow windows / split-screens where the indicator is closer to the
+    // left edge than the panel is wide. PANEL_WIDTH must match the panel's
+    // Tailwind w-80 (20rem = 320px).
+    const PANEL_WIDTH = 320
+    const MARGIN = 8
+    const desiredRight = Math.max(MARGIN, window.innerWidth - rect.right)
+    const maxRight = Math.max(MARGIN, window.innerWidth - PANEL_WIDTH - MARGIN)
+    const right = Math.min(desiredRight, maxRight)
+    // Keep the caret pointing at the indicator's horizontal center even after
+    // the panel has been clamped away from the indicator.
+    const panelRightX = window.innerWidth - right
+    const indicatorCenterX = rect.right - rect.width / 2
+    const caretRight = panelRightX - indicatorCenterX - 6
     setAnchor({
       top: rect.bottom + 10,
-      right: Math.max(16, window.innerWidth - rect.right),
-      caretRight: rect.width / 2 - 6,
+      right,
+      caretRight,
     })
   }, [])
 

package/src/components/resources/ResourcesView.tsx

@@ -13,7 +13,7 @@ import {
 } from '@skyhook-io/k8s-ui'
 import type { ResourceQueryResult } from '@skyhook-io/k8s-ui'
 import type { SelectedResource } from '../../types'
-import type { NavigateToResource } from '../../utils/navigation'
+import { kindToPlural, type NavigateToResource } from '../../utils/navigation'
 import { CreateResourceDialog } from '../shared/CreateResourceDialog'
 import { getSkeletonYaml } from '../../utils/skeleton-yaml'
 
@@ -204,7 +204,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       initialYaml={createDialogYaml}
       title={createDialogTitle}
       onCreated={(result) => {
-        onResourceClick?.({ kind: result.kind, namespace: result.namespace, name: result.name, group: '' })
+        onResourceClick?.({ kind: kindToPlural(result.kind), namespace: result.namespace, name: result.name, group: '' })
       }}
     />
     </>

package/src/components/ui/NamespaceSelector.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
+import { useState, useRef, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle } from 'react'
 import { createPortal } from 'react-dom'
 import { clsx } from 'clsx'
 import { ChevronDown, Search, X, Check, Shield } from 'lucide-react'
@@ -9,6 +9,10 @@ interface Namespace {
   name: string
 }
 
+export interface NamespaceSelectorHandle {
+  open: () => void
+}
+
 interface NamespaceSelectorProps {
   value: string[]
   onChange: (value: string[]) => void
@@ -19,7 +23,7 @@ interface NamespaceSelectorProps {
   disabledTooltip?: string
 }
 
-export function NamespaceSelector({
+export const NamespaceSelector = forwardRef<NamespaceSelectorHandle, NamespaceSelectorProps>(({
   value,
   onChange,
   namespaces,
@@ -27,7 +31,7 @@ export function NamespaceSelector({
   className,
   disabled,
   disabledTooltip,
-}: NamespaceSelectorProps) {
+}, ref) => {
   const [isOpen, setIsOpen] = useState(false)
   const [search, setSearch] = useState('')
   const [manualInput, setManualInput] = useState('')
@@ -73,11 +77,17 @@ export function NamespaceSelector({
 
   // Open dropdown
   const openDropdown = useCallback(() => {
+    if (disabled) return
     setIsOpen(true)
     setSearch('')
     setHighlightedIndex(0)
     updatePosition()
-  }, [updatePosition])
+  }, [disabled, updatePosition])
+
+  // Expose open method via ref
+  useImperativeHandle(ref, () => ({
+    open: openDropdown
+  }), [openDropdown])
 
   // Close dropdown
   const closeDropdown = useCallback(() => {
@@ -433,4 +443,4 @@ export function NamespaceSelector({
         )}
     </>
   )
-}
+})

package/src/components/workload/WorkloadView.tsx

@@ -8,7 +8,7 @@ import {
   type RendererOverrides,
 } from '@skyhook-io/k8s-ui'
 import type { SelectedResource, ResourceRef, ResolvedEnvFrom } from '../../types'
-import type { NavigateToResource } from '../../utils/navigation'
+import { kindToPlural, type NavigateToResource } from '../../utils/navigation'
 import {
   useChanges, useResourceWithRelationships, usePodLogs, useTopology, useUpdateResource,
   useDeleteResource, useTriggerCronJob, useSuspendCronJob, useResumeCronJob,
@@ -383,7 +383,7 @@ export function WorkloadView({
       initialYaml={duplicateYaml}
       title="Duplicate Resource"
       onCreated={(result) => {
-        rest.onNavigateToResource?.({ kind: result.kind, namespace: result.namespace, name: result.name, group: '' })
+        rest.onNavigateToResource?.({ kind: kindToPlural(result.kind), namespace: result.namespace, name: result.name, group: '' })
       }}
     />
     </>