@skyhook-io/radar-app 1.17.0 → 1.17.1

package/src/components/helm/ValuesViewer.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from 'react'
+import { useState, useCallback, useEffect, useMemo } from 'react'
 import { Copy, Check, Settings, Pencil, X, Eye, Play, Loader2 } from 'lucide-react'
 import { PaneLoader } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
@@ -6,7 +6,7 @@ import yaml from 'yaml'
 import type { HelmValues, ValuesPreviewResponse } from '../../types'
 import { CodeViewer } from '../ui/CodeViewer'
 import { YamlEditor } from '../ui/YamlEditor'
-import { useHelmPreviewValues, useHelmApplyValues } from '../../api/client'
+import { useHelmPreviewValues, useHelmApplyValues, useHelmValues } from '../../api/client'
 import { useCanHelmAct } from '../../api/client'
 import { ValuesDiffPreview } from './ValuesDiffPreview'
 import { Tooltip } from '../ui/Tooltip'
@@ -14,8 +14,9 @@ import { Tooltip } from '../ui/Tooltip'
 interface ValuesViewerProps {
   values?: HelmValues
   isLoading: boolean
-  showAllValues: boolean
-  onToggleAllValues: (show: boolean) => void
+  error?: unknown
+  showEffectiveValues: boolean
+  onToggleEffectiveValues: (show: boolean) => void
   onCopy: (text: string) => void
   copied: boolean
   // Required for editing
@@ -24,12 +25,14 @@ interface ValuesViewerProps {
   revision?: number
   currentRevision?: number
   onApplySuccess?: () => void
+  onRetry?: () => void
 }
 export function ValuesViewer({
   values,
   isLoading,
-  showAllValues,
-  onToggleAllValues,
+  error,
+  showEffectiveValues,
+  onToggleEffectiveValues,
   onCopy,
   copied,
   namespace,
@@ -37,6 +40,7 @@ export function ValuesViewer({
   revision,
   currentRevision,
   onApplySuccess,
+  onRetry,
 }: ValuesViewerProps) {
   const [isEditing, setIsEditing] = useState(false)
   const [editedYaml, setEditedYaml] = useState('')
@@ -49,23 +53,32 @@ export function ValuesViewer({
   const { allowed: canHelmWrite, reason: helmActReason } = useCanHelmAct(namespace)
   const isHistoricalRevision = typeof revision === 'number' && typeof currentRevision === 'number' && revision !== currentRevision
 
-  const canEdit = Boolean(namespace && name) && canHelmWrite && !isHistoricalRevision
+  // Edits replace every stored override on apply, so they start from, and wait for, a fresh
+  // overrides-only read. An older Radar's all=true response can carry empty overrides after a
+  // failed second read, and a cached copy can predate the last apply.
+  const overridesQuery = useHelmValues(namespace ?? '', name ?? '', false, Boolean(namespace && name), revision)
+  const overridesData = overridesQuery.data
+  const overridesBaseline = useMemo(() => (overridesData ? (overridesData.userSupplied ?? {}) : undefined), [overridesData])
+  const overridesReady = overridesBaseline !== undefined && !overridesQuery.error && !overridesQuery.isFetching
+  const canOfferEdit = Boolean(namespace && name) && canHelmWrite && !isHistoricalRevision
+  const canEdit = canOfferEdit && overridesReady
 
-  const displayValues = showAllValues && values?.computed ? values.computed : values?.userSupplied
+  const displayValues = showEffectiveValues ? values?.computed : overridesBaseline
   const isEmpty = !displayValues || Object.keys(displayValues).length === 0
 
   // Start editing mode
   const handleStartEdit = useCallback(() => {
+    if (!overridesReady) return
     // Allow editing even with no user-supplied values (start with empty YAML)
-    const yamlStr = values?.userSupplied ? jsonToYaml(values.userSupplied) : ''
+    const yamlStr = overridesBaseline && Object.keys(overridesBaseline).length > 0 ? jsonToYaml(overridesBaseline) : ''
     setEditedYaml(yamlStr)
     setYamlError(null)
     setIsEditing(true)
-    // Switch to user-supplied view when editing
-    if (showAllValues) {
-      onToggleAllValues(false)
+    // Only user overrides are editable.
+    if (showEffectiveValues) {
+      onToggleEffectiveValues(false)
     }
-  }, [values?.userSupplied, showAllValues, onToggleAllValues])
+  }, [overridesBaseline, overridesReady, showEffectiveValues, onToggleEffectiveValues])
 
   // Cancel editing
   const handleCancelEdit = useCallback(() => {
@@ -96,7 +109,7 @@ export function ValuesViewer({
 
   // Preview changes
   const handlePreview = useCallback(async () => {
-    if (!namespace || !name || isHistoricalRevision) return
+    if (!namespace || !name || isHistoricalRevision || !overridesReady) return
     const parsed = parseYaml(editedYaml)
     if (!parsed) return
 
@@ -111,11 +124,11 @@ export function ValuesViewer({
     } catch {
       // Error is handled by mutation
     }
-  }, [namespace, name, isHistoricalRevision, editedYaml, parseYaml, previewMutation])
+  }, [namespace, name, isHistoricalRevision, overridesReady, editedYaml, parseYaml, previewMutation])
 
   // Apply changes
   const handleApply = useCallback(async () => {
-    if (!namespace || !name || isHistoricalRevision) return
+    if (!namespace || !name || isHistoricalRevision || !overridesReady) return
     const parsed = parseYaml(editedYaml)
     if (!parsed) return
 
@@ -130,11 +143,11 @@ export function ValuesViewer({
     } catch {
       // Error is handled by mutation
     }
-  }, [namespace, name, isHistoricalRevision, editedYaml, parseYaml, applyMutation, handleCancelEdit, onApplySuccess])
+  }, [namespace, name, isHistoricalRevision, overridesReady, editedYaml, parseYaml, applyMutation, handleCancelEdit, onApplySuccess])
 
   // Apply from preview modal
   const handleApplyFromPreview = useCallback(async () => {
-    if (!previewData || !namespace || !name || isHistoricalRevision) return
+    if (!previewData || !namespace || !name || isHistoricalRevision || !overridesReady) return
     try {
       await applyMutation.mutateAsync({
         namespace,
@@ -147,48 +160,21 @@ export function ValuesViewer({
     } catch {
       // Error is handled by mutation
     }
-  }, [previewData, namespace, name, isHistoricalRevision, applyMutation, handleCancelEdit, onApplySuccess])
+  }, [previewData, namespace, name, isHistoricalRevision, overridesReady, applyMutation, handleCancelEdit, onApplySuccess])
 
-  if (isLoading) {
+  if (!isEditing && (showEffectiveValues ? isLoading : overridesQuery.isLoading)) {
     return <PaneLoader label="Loading values…" className="h-32" />
   }
 
-  if (isEmpty && !isEditing) {
-    return (
-      <div className="p-4">
-        <div className="flex items-center justify-between mb-3">
-          <div className="flex items-center gap-2">
-            <span className="text-sm font-medium text-theme-text-secondary">Values</span>
-            {isHistoricalRevision && (
-              <span className="badge-sm bg-theme-hover/50 text-theme-text-secondary">revision {revision}</span>
-            )}
-          </div>
-          <div className="flex items-center gap-2">
-            <ToggleButton showAll={showAllValues} onToggle={onToggleAllValues} disabled={isEditing} />
-            {canEdit && (
-              <button
-                onClick={handleStartEdit}
-                className="flex items-center gap-1 px-2 py-1 text-xs text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
-              >
-                <Pencil className="w-3.5 h-3.5" />
-                Edit
-              </button>
-            )}
-          </div>
-        </div>
-        {isHistoricalRevision && (
-          <div className="mb-3 rounded border border-theme-border bg-theme-elevated/40 px-3 py-2 text-xs text-theme-text-secondary">
-            Viewing historical values. Switch back to the latest revision before editing or applying changes.
-          </div>
-        )}
-        <div className="flex flex-col items-center justify-center h-32 text-theme-text-tertiary gap-2">
-          <Settings className="w-8 h-8 text-theme-text-disabled" />
-          <span>{showAllValues ? 'No computed values' : 'No user-supplied values'}</span>
-        </div>
-      </div>
-    )
-  }
-
+  const readProblems = valuesReadProblems({
+    showEffectiveValues,
+    effectiveLoaded: values !== undefined,
+    effectiveFailed: Boolean(error),
+    overridesLoaded: overridesBaseline !== undefined,
+    overridesFailed: Boolean(overridesQuery.error),
+    editingAffected: canOfferEdit,
+  })
+  const viewLoadFailed = showEffectiveValues ? Boolean(error) && !values : Boolean(overridesQuery.error) && !overridesBaseline
   const yamlContent = isEditing ? editedYaml : jsonToYaml(displayValues || {})
 
   return (
@@ -197,7 +183,7 @@ export function ValuesViewer({
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-2">
           <span className="text-sm font-medium text-theme-text-secondary">
-            {isEditing ? 'Editing Values' : showAllValues ? 'All Values (Computed)' : 'User-Supplied Values'}
+            {isEditing ? 'Editing User Overrides' : showEffectiveValues ? 'Effective Values' : 'User Overrides'}
           </span>
           {isHistoricalRevision && !isEditing && (
             <span className="badge-sm bg-theme-hover/50 text-theme-text-secondary">revision {revision}</span>
@@ -211,21 +197,24 @@ export function ValuesViewer({
         <div className="flex items-center gap-2">
           {!isEditing && (
             <>
-              <ToggleButton showAll={showAllValues} onToggle={onToggleAllValues} disabled={isEditing} />
-              <button
-                onClick={() => onCopy(yamlContent)}
-                className="flex items-center gap-1 px-2 py-1 text-xs text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
-              >
-                {copied ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
-                Copy
-              </button>
-              {canEdit && (
+              <ValuesViewToggle showEffective={showEffectiveValues} onToggle={onToggleEffectiveValues} disabled={isEditing} />
+              {!isEmpty && (
+                <button
+                  onClick={() => onCopy(yamlContent)}
+                  className="flex items-center gap-1 px-2 py-1 text-xs text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+                >
+                  {copied ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
+                  Copy
+                </button>
+              )}
+              {canOfferEdit && (
                 <button
                   onClick={handleStartEdit}
-                  className="flex items-center gap-1 px-2 py-1 text-xs text-blue-400 hover:text-blue-300 hover:bg-blue-500/10 rounded border border-blue-500/30"
+                  disabled={!canEdit}
+                  className="flex items-center gap-1 px-2 py-1 text-xs text-blue-400 hover:text-blue-300 hover:bg-blue-500/10 rounded border border-blue-500/30 disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   <Pencil className="w-3.5 h-3.5" />
-                  Edit
+                  Edit Overrides
                 </button>
               )}
             </>
@@ -241,7 +230,7 @@ export function ValuesViewer({
               </button>
               <button
                 onClick={handlePreview}
-                disabled={!!yamlError || previewMutation.isPending || isHistoricalRevision}
+                disabled={!!yamlError || previewMutation.isPending || isHistoricalRevision || !overridesReady}
                 className="flex items-center gap-1 px-2 py-1 text-xs text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded border border-theme-border disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 {previewMutation.isPending ? (
@@ -254,7 +243,7 @@ export function ValuesViewer({
               <Tooltip content={!canHelmWrite ? helmActReason : ''}>
               <button
                 onClick={handleApply}
-                disabled={!!yamlError || applyMutation.isPending || !canHelmWrite || isHistoricalRevision}
+                disabled={!!yamlError || applyMutation.isPending || !canHelmWrite || isHistoricalRevision || !overridesReady}
                 className="flex items-center gap-1 px-2.5 py-1 text-xs btn-brand rounded disabled:cursor-not-allowed disabled:pointer-events-none"
               >
                 {applyMutation.isPending ? (
@@ -276,6 +265,44 @@ export function ValuesViewer({
         </div>
       )}
 
+      {!isEditing && readProblems.map((problem) => (
+        <div key={problem.read} role="alert" className="mb-3 rounded border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-400">
+          {problem.message}{' '}
+          {(problem.read === 'overrides' || onRetry) && (
+            <button
+              type="button"
+              onClick={() => (problem.read === 'overrides' ? void overridesQuery.refetch() : onRetry?.())}
+              className="underline hover:text-red-300"
+            >
+              Try again
+            </button>
+          )}
+        </div>
+      ))}
+
+      {isEditing && !overridesReady && (
+        <div
+          role={overridesQuery.error ? 'alert' : undefined}
+          className={clsx(
+            'mb-3 rounded border px-3 py-2 text-xs',
+            overridesQuery.error
+              ? 'border-red-500/30 bg-red-500/10 text-red-400'
+              : 'border-theme-border bg-theme-elevated/40 text-theme-text-secondary',
+          )}
+        >
+          {overridesQuery.error ? (
+            <>
+              Couldn't reload user overrides, so Apply is off. Your edits are kept.{' '}
+              <button type="button" onClick={() => void overridesQuery.refetch()} className="underline hover:text-red-300">
+                Try again
+              </button>
+            </>
+          ) : (
+            'Reloading user overrides. Your edits are kept.'
+          )}
+        </div>
+      )}
+
       {/* Error message */}
       {yamlError && (
         <div className="mb-3 px-3 py-2 text-xs text-red-400 bg-red-500/10 border border-red-500/30 rounded">
@@ -292,7 +319,12 @@ export function ValuesViewer({
 
       {/* Editor / Viewer */}
       <div className="flex-1 min-h-0">
-        {isEditing ? (
+        {!isEditing && viewLoadFailed ? null : !isEditing && isEmpty ? (
+          <div className="flex flex-col items-center justify-center h-32 text-theme-text-tertiary gap-2">
+            <Settings className="w-8 h-8 text-theme-text-disabled" />
+            <span>{showEffectiveValues ? 'No effective values' : 'No user overrides'}</span>
+          </div>
+        ) : isEditing ? (
           <YamlEditor
             value={editedYaml}
             onChange={setEditedYaml}
@@ -325,28 +357,87 @@ export function ValuesViewer({
   )
 }
 
-function ToggleButton({ showAll, onToggle, disabled }: { showAll: boolean; onToggle: (show: boolean) => void; disabled?: boolean }) {
+export interface ValuesReadProblem {
+  read: 'effective' | 'overrides'
+  message: string
+}
+
+// The two reads fail independently, so each view only reports its own read,
+// plus the overrides read wherever it switches editing off. "Refresh" wording
+// is only used when the last loaded data for that view is still on screen.
+export function valuesReadProblems({
+  showEffectiveValues,
+  effectiveLoaded,
+  effectiveFailed,
+  overridesLoaded,
+  overridesFailed,
+  editingAffected,
+}: {
+  showEffectiveValues: boolean
+  effectiveLoaded: boolean
+  effectiveFailed: boolean
+  overridesLoaded: boolean
+  overridesFailed: boolean
+  editingAffected: boolean
+}): ValuesReadProblem[] {
+  const problems: ValuesReadProblem[] = []
+  if (showEffectiveValues && effectiveFailed) {
+    problems.push({
+      read: 'effective',
+      message: effectiveLoaded
+        ? "Couldn't refresh effective values. Showing the last ones that loaded."
+        : "Couldn't load effective values.",
+    })
+  }
+  if (overridesFailed && !showEffectiveValues) {
+    problems.push({
+      read: 'overrides',
+      message: overridesLoaded
+        ? "Couldn't refresh your overrides. Showing the last ones that loaded."
+          + (editingAffected ? ' Editing is off until they load again.' : '')
+        : "Couldn't load your overrides." + (editingAffected ? ' Editing is off until they load.' : ''),
+    })
+  } else if (overridesFailed && editingAffected) {
+    problems.push({
+      read: 'overrides',
+      message: overridesLoaded
+        ? "Couldn't refresh your overrides, so editing is off."
+        : "Couldn't load your overrides, so editing is off.",
+    })
+  }
+  return problems
+}
+
+function ValuesViewToggle({
+  showEffective,
+  onToggle,
+  disabled,
+}: {
+  showEffective: boolean
+  onToggle: (show: boolean) => void
+  disabled?: boolean
+}) {
   return (
     <div className={clsx('flex items-center bg-theme-elevated/50 rounded-md p-0.5 text-xs', disabled && 'opacity-50 pointer-events-none')}>
       <button
-        onClick={() => onToggle(false)}
+        onClick={() => onToggle(true)}
         disabled={disabled}
         className={clsx(
           'px-2 py-1 rounded transition-colors',
-          !showAll ? 'bg-theme-hover text-theme-text-primary' : 'text-theme-text-secondary hover:text-theme-text-primary'
+          showEffective ? 'bg-theme-hover text-theme-text-primary' : 'text-theme-text-secondary hover:text-theme-text-primary'
         )}
       >
-        User
+        Effective Values
       </button>
       <button
-        onClick={() => onToggle(true)}
+        onClick={() => onToggle(false)}
         disabled={disabled}
         className={clsx(
           'px-2 py-1 rounded transition-colors',
-          showAll ? 'bg-theme-hover text-theme-text-primary' : 'text-theme-text-secondary hover:text-theme-text-primary'
+          !showEffective ? 'bg-theme-hover text-theme-text-primary' : 'text-theme-text-secondary hover:text-theme-text-primary'
         )}
       >
-        All
+        User Overrides
       </button>
     </div>
   )

package/src/components/home/ActivitySummary.tsx

@@ -33,7 +33,7 @@ function scoreLane(lane: ResourceLane): number {
   const kindScores: Record<string, number> = {
     Deployment: 50, Rollout: 50, StatefulSet: 50, DaemonSet: 50,
     Service: 45, Ingress: 45, Gateway: 45,
-    HTTPRoute: 42, GRPCRoute: 42, TCPRoute: 42, TLSRoute: 42,
+    HTTPRoute: 42, GRPCRoute: 42, TCPRoute: 42, TLSRoute: 42, UDPRoute: 42,
     Job: 40, CronJob: 40,
     Pod: 30, ReplicaSet: 20,
   }
@@ -69,6 +69,7 @@ const KIND_SHORT: Record<string, string> = {
   HTTPRoute: 'HR',
   GRPCRoute: 'gRPC',
   TCPRoute: 'TCP',
+  UDPRoute: 'UDP',
   TLSRoute: 'TLS',
 }
 

package/src/components/home/HomeView.tsx

@@ -20,7 +20,7 @@ import {
   FreshnessControl,
   PaneLoader,
   StatusDot,
-  categoryLabel,
+  issueTitle,
   groupLabel,
   issueFirstSeenTitle,
   issueTimingForDisplay,
@@ -30,6 +30,7 @@ import {
 import { formatCompactAge } from '@skyhook-io/k8s-ui/utils/format'
 import { ClusterHealthCard } from './ClusterHealthCard'
 import { AlertTriangle, CheckCircle, Loader2, Shield } from 'lucide-react'
+import { uncheckedSourceLines } from '../issues/uncheckedSources'
 import { clsx } from 'clsx'
 import { getVersionUpdateStatus } from '../../utils/version'
 import { RadarVersionLine } from './RadarVersionLine'
@@ -271,6 +272,7 @@ export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNav
             issues={issues}
             issueCount={issueCount}
             visibility={issuesData?.visibility}
+            uncheckedLines={uncheckedSourceLines(issuesData?.unchecked_sources)}
             hasData={!!issuesData}
             isLoading={issuesLoading && !issuesData}
             isRefreshing={issuesFetching && !!issuesData}
@@ -300,6 +302,9 @@ interface ProblemsPanelProps {
   issues: Issue[]
   issueCount: number
   visibility?: IssuesResponse['visibility']
+  /** One line per issue source Radar couldn't check. Any line means an
+   *  empty list isn't an all-clear. */
+  uncheckedLines?: string[]
   hasData: boolean
   isLoading: boolean
   isRefreshing: boolean
@@ -309,11 +314,11 @@ interface ProblemsPanelProps {
   onResourceClick: (resource: SelectedResource) => void
 }
 
-
-function ProblemsPanel({
+export function ProblemsPanel({
   issues,
   issueCount,
   visibility,
+  uncheckedLines = [],
   hasData,
   isLoading,
   isRefreshing,
@@ -322,6 +327,7 @@ function ProblemsPanel({
   onNavigateToIssues,
   onResourceClick,
 }: ProblemsPanelProps) {
+  const unchecked = uncheckedLines.length > 0
   const hasCriticalIssues = issues.some((issue) => issue.severity === 'critical')
   const hasIssues = issueCount > 0
   const hasHardError = !!error && !hasData
@@ -329,14 +335,14 @@ function ProblemsPanel({
   const isTruncated = issueCount > totalReturned
   const titleClass = hasCriticalIssues
     ? 'text-red-500'
-    : hasIssues || hasHardError || hasLimitedVisibility
+    : hasIssues || hasHardError || hasLimitedVisibility || unchecked
       ? 'text-amber-500'
       : 'text-theme-text-secondary'
   const countClass = hasHardError
     ? 'status-unknown'
     : hasCriticalIssues
       ? 'status-unhealthy'
-      : hasIssues || hasLimitedVisibility
+      : hasIssues || hasLimitedVisibility || unchecked
         ? 'status-degraded'
         : 'status-healthy'
   const countLabel = isLoading ? '...' : hasHardError ? 'error' : String(issueCount)
@@ -387,6 +393,9 @@ function ProblemsPanel({
                 Limited visibility - {visibility.impact} Results may be incomplete.
               </ProblemsPanelNotice>
             )}
+            {(issues.length > 0 || hasLimitedVisibility) && uncheckedLines.map((line) => (
+              <ProblemsPanelNotice key={line} tone="warning">{line}</ProblemsPanelNotice>
+            ))}
             {isTruncated && (
               <ProblemsPanelNotice tone="neutral">
                 Showing {totalReturned} of {issueCount} issues. Narrow by namespace to see the rest.
@@ -396,15 +405,17 @@ function ProblemsPanel({
             {issues.length === 0 ? (
               <ProblemsPanelState
                 icon={
-                  hasLimitedVisibility
+                  hasLimitedVisibility || unchecked
                     ? <AlertTriangle className="h-5 w-5 text-amber-500" />
                     : <CheckCircle className="h-5 w-5 text-green-500" />
                 }
-                title={hasLimitedVisibility ? 'No visible active issues' : 'No active issues'}
+                title={hasLimitedVisibility ? 'No visible active issues' : unchecked ? 'No issues found' : 'No active issues'}
                 body={
                   hasLimitedVisibility
                     ? 'Radar could not read every workload source in this scope.'
-                    : 'No critical or warning issues across the selected scope.'
+                    : unchecked
+                      ? uncheckedLines.join(' ')
+                      : 'No critical or warning issues across the selected scope.'
                 }
               />
             ) : (
@@ -448,7 +459,7 @@ function ProblemsPanel({
                           )}
                         </div>
                         <div className="flex items-center gap-1.5 mt-0.5">
-                          <span className="text-[11px] text-theme-text-secondary truncate">{categoryLabel(issue.category)}</span>
+                          <span className="text-[11px] text-theme-text-secondary truncate">{issueTitle(issue)}</span>
                           <span className="text-[10px] text-theme-text-tertiary shrink-0">{groupLabel(issue.category_group)}</span>
                           {issue.namespace && <span className="text-[10px] text-theme-text-tertiary shrink-0">{issue.namespace}</span>}
                         </div>

package/src/components/home/ProblemsPanel.test.tsx

@@ -0,0 +1,81 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import type { Issue } from '@skyhook-io/k8s-ui'
+import { ProblemsPanel } from './HomeView'
+import { uncheckedSourceLines } from '../issues/uncheckedSources'
+import type { IssuesResponse } from '../../api/client'
+
+const line = "Helm releases couldn't be checked, so failed or stuck releases may be missing."
+const generic = "Some issue checks couldn't run, so issues may be missing."
+const helm = [{ source: 'helm', reason: 'read_failed' }]
+const issue: Issue = {
+  id: 'pod-failed', severity: 'critical' as const, source: 'problem', category: 'workload', category_group: 'workload', grouping_scope: 'resource',
+  kind: 'Pod', group: '', namespace: 'db', name: 'pg-1', reason: 'CrashLoopBackOff', message: 'The selected Pod keeps crashing',
+}
+
+function render(props: { issues?: Issue[]; unchecked?: IssuesResponse['unchecked_sources']; visibility?: { impact?: string } }) {
+  const issues = props.issues ?? []
+  return renderToString(
+    <ProblemsPanel
+      issues={issues}
+      issueCount={issues.length}
+      uncheckedLines={uncheckedSourceLines(props.unchecked)}
+      visibility={props.visibility}
+      hasData
+      isLoading={false}
+      isRefreshing={false}
+      error={null}
+      totalReturned={issues.length}
+      onNavigateToIssues={() => {}}
+      onResourceClick={() => {}}
+    />,
+  ).replaceAll('<!-- -->', '').replace(/&#x27;|&#39;/g, "'")
+}
+
+describe('Home Active Issues when Radar could not read Helm releases', () => {
+  it('gives no all-clear when nothing else was found', () => {
+    const html = render({ unchecked: helm })
+    expect(html).toContain('No issues found')
+    expect(html).toContain(line)
+    expect(html).not.toContain('No active issues')
+    expect(html).not.toContain('status-healthy')
+    expect(html).not.toContain('text-green-500')
+  })
+
+  it('keeps the line when limited visibility owns the empty state', () => {
+    const html = render({ unchecked: helm, visibility: { impact: 'Pods are not readable.' } })
+    expect(html).toContain('No visible active issues')
+    expect(html).toContain(line)
+  })
+
+  it('says so above the rows when there are other issues', () => {
+    const html = render({ issues: [issue], unchecked: helm })
+    expect(html).toContain(line)
+  })
+
+  it('keeps the all-clear when the field is absent', () => {
+    const html = render({})
+    expect(html).toContain('No active issues')
+    expect(html).toContain('status-healthy')
+    expect(html).not.toContain('couldn')
+  })
+
+  it('gives no all-clear for a source this version does not know, and says so generically', () => {
+    const html = render({ unchecked: [{ source: 'some-new-source', reason: 'read_failed' }] })
+    expect(html).toContain('No issues found')
+    expect(html).toContain(generic)
+    expect(html).not.toContain('some-new-source')
+    expect(html).not.toContain('No active issues')
+    expect(html).not.toContain('status-healthy')
+    expect(html).not.toContain('text-green-500')
+  })
+
+  it('shows one line per source above the rows, without repeats', () => {
+    const html = render({
+      issues: [issue],
+      unchecked: [...helm, { source: 'a', reason: 'x' }, { source: 'b', reason: 'y' }, ...helm],
+    })
+    expect(html.split(line).length - 1).toBe(1)
+    expect(html.split(generic).length - 1).toBe(1)
+  })
+})

package/src/components/home/TopologyPreview.tsx

@@ -108,7 +108,7 @@ function useTopologyStats(topology: Topology | null) {
     const kindPriority: Record<string, number> = {
       Deployment: 1, Rollout: 1, StatefulSet: 2, DaemonSet: 2,
       Service: 3, Ingress: 4, Gateway: 4,
-      HTTPRoute: 4, GRPCRoute: 4, TCPRoute: 4, TLSRoute: 4,
+      HTTPRoute: 4, GRPCRoute: 4, TCPRoute: 4, TLSRoute: 4, UDPRoute: 4,
       Pod: 5, PodGroup: 5,
       Job: 6, CronJob: 6, ConfigMap: 7, Secret: 7,
     }
@@ -125,7 +125,7 @@ const kindDotColors: Record<string, string> = {
   Deployment: 'bg-emerald-400', Rollout: 'bg-emerald-400',
   StatefulSet: 'bg-cyan-400', DaemonSet: 'bg-teal-400',
   Service: 'bg-blue-400', Ingress: 'bg-violet-400', Gateway: 'bg-violet-400',
-  HTTPRoute: 'bg-purple-400', GRPCRoute: 'bg-purple-400', TCPRoute: 'bg-purple-400', TLSRoute: 'bg-purple-400',
+  HTTPRoute: 'bg-purple-400', GRPCRoute: 'bg-purple-400', TCPRoute: 'bg-purple-400', TLSRoute: 'bg-purple-400', UDPRoute: 'bg-purple-400',
   Pod: 'bg-lime-500', PodGroup: 'bg-lime-500',
   Job: 'bg-purple-400', CronJob: 'bg-purple-400',
   ConfigMap: 'bg-amber-400', Secret: 'bg-red-400',