@skyhook-io/radar-app 0.2.2 → 1.0.1

package/src/components/helm/HelmReleaseDrawer.tsx

@@ -1,6 +1,7 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
 import { flushSync } from 'react-dom'
 import { PaneLoader } from '@skyhook-io/k8s-ui'
+import { startViewTransitionSafe } from '@skyhook-io/k8s-ui/utils/view-transition'
 import { TRANSITION_DRAWER } from '../../utils/animation'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { X, Copy, Check, RefreshCw, Package, Code, History, FileText, Settings, Link2, Anchor, GitFork, BookOpen, ArrowUpCircle, Trash2 } from 'lucide-react'
@@ -55,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,
@@ -72,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,
@@ -80,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,
@@ -88,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()
@@ -148,12 +151,10 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
   }, [])
 
   const switchTab = useCallback((tab: TabId) => {
-    const update = () => flushSync(() => setActiveTab(tab))
-    if (document.startViewTransition) {
-      document.startViewTransition(update)
-    } else {
-      setActiveTab(tab)
-    }
+    // Swallow the InvalidStateError the API rejects with on rapid
+    // tab clicks (SKY-833 bug 49); fall back synchronously when the
+    // API isn't available.
+    startViewTransitionSafe(() => flushSync(() => setActiveTab(tab)))
   }, [])
 
   const handleCompareRevisions = (rev1: number, rev2: number) => {
@@ -177,7 +178,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
     try {
       await rollbackWithProgress(
-        release.namespace,
+        helmNamespace,
         release.name,
         rollbackRevision,
         (event) => {
@@ -196,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)
@@ -216,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)
@@ -236,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, {
@@ -256,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(() => {
@@ -328,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)}
@@ -345,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">
@@ -451,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/helm/InstallWizard.tsx

@@ -12,6 +12,7 @@ import { YamlEditor } from '../ui/YamlEditor'
 import { Tooltip } from '../ui/Tooltip'
 import { Markdown } from '../ui/Markdown'
 import { SEVERITY_BADGE, SEVERITY_TEXT } from '../../utils/badge-colors'
+import { validateHelmReleaseName, validateRFC1123Label } from '@skyhook-io/k8s-ui/utils/validators'
 
 // Deep merge two objects — values from `overrides` take priority
 function deepMerge(base: Record<string, unknown>, overrides: Record<string, unknown>): Record<string, unknown> {
@@ -134,11 +135,20 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
     setInstallError(null)
     setProgressLogs([])
 
+    // Send the same trimmed values the validators ran on, not the
+    // raw input. Without this, a release name with trailing
+    // whitespace passes the client-side validator (which calls
+    // `.trim()`) but the server receives the untrimmed string and
+    // rejects it — exactly the surprise this validation layer
+    // exists to prevent.
+    const trimmedReleaseName = releaseName.trim()
+    const trimmedNamespace = namespace.trim()
+
     try {
       const release = await installChartWithProgress(
         {
-          releaseName,
-          namespace,
+          releaseName: trimmedReleaseName,
+          namespace: trimmedNamespace,
           chartName,
           version,
           repository,
@@ -169,7 +179,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
 
       // Wait a moment to show success, then close
       setTimeout(() => {
-        onSuccess(namespace, releaseName)
+        onSuccess(trimmedNamespace, trimmedReleaseName)
       }, 1500)
     } catch (err) {
       setInstallError(err instanceof Error ? err.message : 'Install failed')
@@ -183,7 +193,23 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
     }
   }, [releaseName, namespace, chartName, version, repo, valuesYaml, createNamespace, onSuccess, isLocal, artifactHubDetail, queryClient])
 
-  const canProceedFromInfo = releaseName.trim() !== '' && namespace.trim() !== ''
+  // Validate release name + namespace before letting the user
+  // advance. Without this, a name like "Invalid Name With Spaces!"
+  // was accepted through to step 2 and only failed server-side at
+  // install time — the server returned a 422 the user couldn't
+  // connect back to anything they typed. K8s / Helm rules are
+  // pinned in packages/k8s-ui/src/utils/validators.ts.
+  const releaseNameValidation = useMemo(
+    () => validateHelmReleaseName(releaseName.trim()),
+    [releaseName],
+  )
+  const namespaceValidation = useMemo(
+    () => validateRFC1123Label(namespace.trim()),
+    [namespace],
+  )
+  const releaseNameError = releaseNameValidation.valid ? null : releaseNameValidation.error
+  const namespaceError = namespaceValidation.valid ? null : namespaceValidation.error
+  const canProceedFromInfo = releaseNameValidation.valid && namespaceValidation.valid
   const canInstall = canProceedFromInfo && !yamlError
 
   const steps: { id: WizardStep; label: string }[] = [
@@ -206,7 +232,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
               <img
                 src={isLocal ? (chartDetail as ChartDetail)?.icon : (chartDetail as ArtifactHubChartDetail)?.logoUrl}
                 alt=""
-                className="w-8 h-8 rounded object-contain bg-white/10 p-1"
+                className="w-8 h-8 rounded object-contain bg-theme-elevated p-1"
               />
             ) : (
               <Package className="w-8 h-8 text-purple-400" />
@@ -216,7 +242,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
                 <h2 className="text-lg font-semibold text-theme-text-primary">Install {chartName}</h2>
                 {!isLocal && (
                   <Tooltip content="From ArtifactHub">
-                    <Globe className="w-4 h-4 text-blue-400" />
+                    <Globe className="w-4 h-4 text-accent" />
                   </Tooltip>
                 )}
               </div>
@@ -224,7 +250,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
                 <span>{repo} / {version}</span>
                 {!isLocal && (chartDetail as ArtifactHubChartDetail)?.repository?.official && (
                   <Tooltip content="Official">
-                    <BadgeCheck className="w-3.5 h-3.5 text-blue-400" />
+                    <BadgeCheck className="w-3.5 h-3.5 text-accent" />
                   </Tooltip>
                 )}
                 {!isLocal && (chartDetail as ArtifactHubChartDetail)?.repository?.verifiedPublisher && (
@@ -264,7 +290,7 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
                 >
                   <span className={clsx(
                     'w-5 h-5 rounded-full flex items-center justify-center text-xs font-medium',
-                    step === s.id ? 'bg-blue-500 text-white' : 'bg-theme-elevated text-theme-text-secondary'
+                    step === s.id ? 'bg-accent text-white' : 'bg-theme-elevated text-theme-text-secondary'
                   )}>
                     {i + 1}
                   </span>
@@ -287,8 +313,10 @@ export function InstallWizard({ repo, chartName, version, source, repoUrl, defau
                   source={source}
                   releaseName={releaseName}
                   setReleaseName={setReleaseName}
+                  releaseNameError={releaseNameError}
                   namespace={namespace}
                   setNamespace={setNamespace}
+                  namespaceError={namespaceError}
                   namespaces={namespaces || []}
                   createNamespace={createNamespace}
                   setCreateNamespace={setCreateNamespace}
@@ -420,8 +448,10 @@ interface InfoStepProps {
   source: ChartSource
   releaseName: string
   setReleaseName: (name: string) => void
+  releaseNameError: string | null
   namespace: string
   setNamespace: (ns: string) => void
+  namespaceError: string | null
   namespaces: { name: string }[]
   createNamespace: boolean
   setCreateNamespace: (create: boolean) => void
@@ -434,8 +464,10 @@ function InfoStep({
   source,
   releaseName,
   setReleaseName,
+  releaseNameError,
   namespace,
   setNamespace,
+  namespaceError,
   namespaces,
   createNamespace,
   setCreateNamespace,
@@ -506,7 +538,7 @@ function InfoStep({
                   href={home}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex items-center gap-1 text-xs text-blue-400 hover:text-blue-300"
+                  className="flex items-center gap-1 text-xs text-accent-text hover:underline"
                 >
                   <LinkIcon className="w-3.5 h-3.5" />
                   Homepage
@@ -533,11 +565,24 @@ function InfoStep({
           value={releaseName}
           onChange={(e) => setReleaseName(e.target.value)}
           placeholder="my-release"
-          className="w-full px-3 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-blue-500"
+          aria-invalid={releaseNameError ? true : undefined}
+          aria-describedby="release-name-help"
+          className={clsx(
+            'w-full px-3 py-2 bg-theme-elevated border rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2',
+            releaseNameError
+              ? 'border-red-500/60 focus:ring-red-500'
+              : 'border-theme-border-light focus:ring-accent',
+          )}
         />
-        <p className="mt-1 text-xs text-theme-text-tertiary">
-          A unique name for this release in the namespace
-        </p>
+        {releaseNameError ? (
+          <p id="release-name-help" className="mt-1 text-xs text-red-400">
+            Release name {releaseNameError}.
+          </p>
+        ) : (
+          <p id="release-name-help" className="mt-1 text-xs text-theme-text-tertiary">
+            A unique name for this release in the namespace
+          </p>
+        )}
       </div>
 
       {/* Namespace selection */}
@@ -551,8 +596,20 @@ function InfoStep({
           value={namespace}
           onChange={(e) => setNamespace(e.target.value)}
           placeholder="Enter namespace name"
-          className="w-full px-3 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-blue-500"
+          aria-invalid={namespaceError ? true : undefined}
+          aria-describedby="namespace-help"
+          className={clsx(
+            'w-full px-3 py-2 bg-theme-elevated border rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2',
+            namespaceError
+              ? 'border-red-500/60 focus:ring-red-500'
+              : 'border-theme-border-light focus:ring-accent',
+          )}
         />
+        {namespaceError && (
+          <p id="namespace-help" className="mt-1 text-xs text-red-400">
+            Namespace {namespaceError}.
+          </p>
+        )}
         <datalist id="namespace-suggestions">
           {namespaces.map(ns => (
             <option key={ns.name} value={ns.name} />
@@ -563,7 +620,7 @@ function InfoStep({
             type="checkbox"
             checked={createNamespace}
             onChange={(e) => setCreateNamespace(e.target.checked)}
-            className="rounded border-theme-border text-blue-500 focus:ring-blue-500"
+            className="rounded border-theme-border text-accent focus:ring-accent"
           />
           Create namespace if it doesn't exist
         </label>
@@ -574,7 +631,7 @@ function InfoStep({
         <div>
           <button
             onClick={() => setShowReadme(!showReadme)}
-            className="flex items-center gap-2 text-sm text-blue-400 hover:text-blue-300"
+            className="flex items-center gap-2 text-sm text-accent-text hover:underline"
           >
             <BookOpen className="w-4 h-4" />
             {showReadme ? 'Hide' : 'Show'} Chart README
@@ -619,8 +676,8 @@ function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartD
   return (
     <div className="space-y-4">
       {/* Info banner */}
-      <div className="flex items-start gap-3 p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg">
-        <CheckCircle className="w-5 h-5 text-blue-400 shrink-0 mt-0.5" />
+      <div className="flex items-start gap-3 p-4 bg-accent-muted border border-accent/30 rounded-lg">
+        <CheckCircle className="w-5 h-5 text-accent shrink-0 mt-0.5" />
         <div>
           <p className="text-sm font-medium text-theme-text-primary">Ready to install with defaults</p>
           <p className="text-xs text-theme-text-secondary mt-1">
@@ -633,7 +690,7 @@ function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartD
               href={homeUrl}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 text-xs text-blue-400 hover:text-blue-300 mt-2"
+              className="inline-flex items-center gap-1 text-xs text-accent-text hover:underline mt-2"
             >
               <LinkIcon className="w-3 h-3" />
               View chart documentation
@@ -819,8 +876,8 @@ function ReviewStep({
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center gap-3 p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg">
-        <CheckCircle className="w-6 h-6 text-blue-400 shrink-0" />
+      <div className="flex items-center gap-3 p-4 bg-accent-muted border border-accent/30 rounded-lg">
+        <CheckCircle className="w-6 h-6 text-accent shrink-0" />
         <div>
           <p className="text-sm font-medium text-theme-text-primary">Ready to install</p>
           <p className="text-xs text-theme-text-secondary mt-0.5">
@@ -873,7 +930,7 @@ function ReviewStep({
                 <>Local: {repo}</>
               ) : (
                 <>
-                  <Globe className="w-3.5 h-3.5 text-blue-400" />
+                  <Globe className="w-3.5 h-3.5 text-accent" />
                   ArtifactHub: {repo}
                 </>
               )}

package/src/components/home/HomeView.tsx

@@ -11,7 +11,7 @@ import { NetworkPolicyCoverageCard } from './NetworkPolicyCoverageCard'
 import { CostCard } from './CostCard'
 import { AuditCard, PaneLoader, StatusDot, mapHealthToTone } from '@skyhook-io/k8s-ui'
 import { ClusterHealthCard } from './ClusterHealthCard'
-import { AlertTriangle, Shield } from 'lucide-react'
+import { AlertTriangle, Loader2, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
 
 interface HomeViewProps {
@@ -58,9 +58,21 @@ export function HomeView({ namespaces, topology, onNavigateToView, onNavigateToR
 
   const hasProblems = data.problems && data.problems.length > 0
 
+  const stillLoading = data.deferredLoading || (data.partialData && data.partialData.length > 0)
+
   return (
     <div className="flex-1 overflow-y-auto">
       <div className="max-w-[1600px] mx-auto px-6 py-6 space-y-6">
+        {stillLoading && (
+          <div className="flex items-center gap-2 text-xs text-theme-text-tertiary">
+            <Loader2 className="w-3 h-3 animate-spin" />
+            <span>
+              {data.partialData && data.partialData.length > 0
+                ? `Still loading: ${data.partialData.join(', ')}`
+                : 'Loading remaining resources…'}
+            </span>
+          </div>
+        )}
         {/* Row 1: Cluster Health Card (combined health + resource counts) */}
         <ClusterHealthCard
           health={data.health}

package/src/components/portforward/PortForwardButton.tsx

@@ -3,6 +3,7 @@ import { Plug, ChevronDown, Loader2, Globe, Monitor, Copy, Check, X, Terminal }
 import { clsx } from 'clsx'
 import { useAvailablePorts, useClusterInfo, AvailablePort } from '../../api/client'
 import { useStartPortForward } from './PortForwardManager'
+import { validatePort } from '@skyhook-io/k8s-ui/utils/validators'
 
 interface PortForwardButtonProps {
   type: 'pod' | 'service'
@@ -35,7 +36,13 @@ function KubectlCommandDialog({
 }) {
   const [copied, setCopied] = useState(false)
   const [copyFallback, setCopyFallback] = useState(false)
-  const [localPort, setLocalPort] = useState(info.port)
+  // Track raw input separately from the validated port so the user
+  // always sees the characters they typed; the validated port (used to
+  // build the command) only updates when the input parses cleanly.
+  const [portInput, setPortInput] = useState(String(info.port))
+  const portValidation = validatePort(portInput)
+  const localPort = portValidation.valid ? portValidation.value : info.port
+  const portError = portValidation.valid ? null : portValidation.error
   const commandRef = useRef<HTMLElement>(null)
   const dialogRef = useRef<HTMLDivElement>(null)
 
@@ -97,21 +104,35 @@ function KubectlCommandDialog({
           <p className="text-sm text-theme-text-secondary">
             Radar is running in-cluster, so port forwarding must be run from your local terminal.
           </p>
-          <div className="flex items-center gap-2 text-sm text-theme-text-secondary">
-            <label htmlFor="local-port">Local port:</label>
-            <input
-              id="local-port"
-              type="number"
-              min={1}
-              max={65535}
-              value={localPort}
-              onChange={(e) => {
-                const val = Number(e.target.value)
-                if (val >= 1 && val <= 65535) setLocalPort(val)
-                else if (e.target.value === '') setLocalPort(info.port)
-              }}
-              className="w-20 bg-theme-base border border-theme-border rounded px-2 py-1 text-sm text-theme-text-primary font-mono text-center"
-            />
+          <div className="flex flex-col gap-1">
+            <div className="flex items-center gap-2 text-sm text-theme-text-secondary">
+              <label htmlFor="local-port">Local port:</label>
+              <input
+                id="local-port"
+                type="text"
+                inputMode="numeric"
+                value={portInput}
+                onChange={(e) => setPortInput(e.target.value)}
+                aria-invalid={portError ? true : undefined}
+                aria-describedby="local-port-help"
+                className={clsx(
+                  'w-24 bg-theme-base border rounded px-2 py-1 text-sm text-theme-text-primary font-mono text-center',
+                  portError
+                    ? 'border-red-500/60 focus:outline-none focus:ring-2 focus:ring-red-500'
+                    : 'border-theme-border',
+                )}
+              />
+              {portError && (
+                <span className="text-xs text-red-400">
+                  using {info.port}
+                </span>
+              )}
+            </div>
+            {portError && (
+              <p id="local-port-help" className="text-xs text-red-400">
+                {portError.charAt(0).toUpperCase() + portError.slice(1)}.
+              </p>
+            )}
           </div>
           <div className="flex items-center gap-2">
             <code ref={commandRef} className="flex-1 text-sm bg-theme-base rounded px-3 py-2 text-blue-400 font-mono select-all">