@skyhook-io/radar-app 0.2.2 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "0.2.2",
+  "version": "1.0.0",
   "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",

package/src/App.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import { flushSync } from 'react-dom'
 import { useRefreshAnimation } from './hooks/useRefreshAnimation'
+import { startViewTransitionSafe } from '@skyhook-io/k8s-ui/utils/view-transition'
 import { useQueryClient } from '@tanstack/react-query'
 import { useNavigate, useLocation, useSearchParams } from 'react-router-dom'
 import { HomeView } from './components/home/HomeView'
@@ -345,8 +346,13 @@ function AppInner() {
   // Navigate to a resource — uses View Transitions cross-fade when drawer is already open
   const navigateToResource = useCallback((res: SelectedResource, tab: 'detail' | 'yaml' = 'detail') => {
     const update = () => { setDrawerInitialTab(tab); setSelectedResource(res) }
-    if (selectedResource && document.startViewTransition) {
-      document.startViewTransition(() => flushSync(update))
+    // Skip the cross-fade animation entirely on first open (no
+    // `selectedResource`); otherwise route through
+    // startViewTransitionSafe to swallow the InvalidStateError that
+    // the API rejects with on rapid back-to-back navigations.
+    // (SKY-833 bug 49)
+    if (selectedResource) {
+      startViewTransitionSafe(() => flushSync(update))
     } else {
       update()
     }

package/src/api/client.ts

@@ -272,7 +272,7 @@ export interface DashboardResponse {
   audit: DashboardAudit | null
   nodeVersionSkew: { versions: Record<string, string[]>; minVersion: string; maxVersion: string } | null
   deferredLoading?: boolean // True while deferred informers (secrets, events, etc.) are still syncing
-  partialData?: string[] // Resource kinds still loading after first paint (slow-cluster fallback)
+  partialData?: string[] // Critical kinds promoted at first paint that haven't yet finished syncing (live-filtered)
   accessRestricted?: boolean // True when user has no namespace access (RBAC)
 }
 
@@ -2603,6 +2603,31 @@ export interface DiagErrorEntry {
   level: string
 }
 
+export type DiagSyncPhase = 'not_started' | 'syncing_critical' | 'syncing_deferred' | 'complete'
+
+export interface DiagInformerSyncStatus {
+  kind: string
+  key: string
+  deferred: boolean
+  synced: boolean
+  syncedAt?: string
+  items: number
+}
+
+export interface DiagCacheSyncStatus {
+  phase: DiagSyncPhase
+  syncStarted?: string
+  elapsedSec: number
+  criticalTotal: number
+  criticalSynced: number
+  deferredTotal: number
+  deferredSynced: number
+  informers: DiagInformerSyncStatus[]
+  pendingCritical?: string[]
+  pendingDeferred?: string[]
+  promotedKinds?: string[]
+}
+
 export interface DiagnosticsSnapshot {
   timestamp: string
   radarVersion: string
@@ -2666,6 +2691,7 @@ export interface DiagnosticsSnapshot {
     typedCount: number
     dynamicCount: number
     watchedCRDs: string[]
+    syncStatus?: DiagCacheSyncStatus
   }
   prometheus?: {
     connected: boolean

package/src/components/audit/AuditSettingsDialog.tsx

@@ -1,7 +1,9 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { X, Plus, Trash2 } from 'lucide-react'
+import { clsx } from 'clsx'
 import { useAuditSettings, useUpdateAuditSettings, useAudit } from '../../api/client'
 import type { CheckMeta } from '@skyhook-io/k8s-ui'
+import { validateRFC1123Label, type ValidationResult } from '@skyhook-io/k8s-ui/utils/validators'
 
 interface AuditSettingsDialogProps {
   namespaces: string[]
@@ -28,12 +30,23 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
     ? Object.values(auditData.checks).sort((a, b) => a.title.localeCompare(b.title))
     : []
 
+  // Validate the staged namespace input against RFC 1123. Saving a bogus
+  // entry would silently never match anything in the audit pipeline,
+  // leaving the user thinking the ignore filter doesn't work.
+  const newNsTrimmed = newNs.trim()
+  const newNsValidation = useMemo<ValidationResult>(
+    () => (newNsTrimmed === '' ? { valid: true } : validateRFC1123Label(newNsTrimmed)),
+    [newNsTrimmed],
+  )
+  const newNsError = newNsValidation.valid ? null : newNsValidation.error
+  const newNsDuplicate = newNsTrimmed !== '' && ignoredNs.includes(newNsTrimmed)
+  const canAddNamespace =
+    newNsTrimmed !== '' && newNsValidation.valid && !newNsDuplicate
+
   const addNamespace = () => {
-    const ns = newNs.trim()
-    if (ns && !ignoredNs.includes(ns)) {
-      setIgnoredNs([...ignoredNs, ns])
-      setNewNs('')
-    }
+    if (!canAddNamespace) return
+    setIgnoredNs([...ignoredNs, newNsTrimmed])
+    setNewNs('')
   }
 
   const toggleCheck = (checkID: string) => {
@@ -95,16 +108,30 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
                 onChange={e => setNewNs(e.target.value)}
                 onKeyDown={e => { if (e.key === 'Enter') addNamespace() }}
                 placeholder="Add namespace..."
-                className="flex-1 px-3 py-1.5 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-skyhook-500"
+                aria-invalid={newNsError ? true : undefined}
+                aria-describedby="new-ns-help"
+                className={clsx(
+                  'flex-1 px-3 py-1.5 bg-theme-elevated border rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2',
+                  newNsError || newNsDuplicate
+                    ? 'border-red-500/60 focus:ring-red-500'
+                    : 'border-theme-border-light focus:ring-skyhook-500',
+                )}
               />
               <button
                 onClick={addNamespace}
-                disabled={!newNs.trim()}
+                disabled={!canAddNamespace}
                 className="px-3 py-1.5 text-sm btn-brand rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 <Plus className="w-4 h-4" />
               </button>
             </div>
+            {(newNsError || newNsDuplicate) && (
+              <p id="new-ns-help" className="mt-1.5 text-xs text-red-400">
+                {newNsDuplicate
+                  ? `"${newNsTrimmed}" is already in the list.`
+                  : `Namespace ${newNsError}.`}
+              </p>
+            )}
           </div>
 
           {/* Disabled Checks */}
@@ -150,8 +177,20 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
           </button>
           <button
             onClick={handleSave}
-            disabled={updateSettings.isPending}
-            className="px-4 py-1.5 text-sm btn-brand rounded-lg disabled:opacity-50"
+            // Block save while the namespace input has unfixed pending
+            // text — otherwise the user clicks Save expecting their
+            // entry to be included and it's silently dropped.
+            disabled={
+              updateSettings.isPending || newNsError !== null || newNsDuplicate
+            }
+            title={
+              newNsError
+                ? 'Fix or clear the pending namespace input before saving'
+                : newNsDuplicate
+                  ? 'Clear the duplicate pending input before saving'
+                  : undefined
+            }
+            className="px-4 py-1.5 text-sm btn-brand rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {updateSettings.isPending ? 'Saving...' : 'Save'}
           </button>

package/src/components/helm/ChartBrowser.tsx

@@ -148,7 +148,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                   onClick={() => { setSelectedRepo('all'); setRepoDropdownOpen(false) }}
                   className={clsx(
                     'w-full px-3 py-2 text-left text-sm hover:bg-theme-hover flex items-center justify-between',
-                    selectedRepo === 'all' ? 'text-blue-400' : 'text-theme-text-primary'
+                    selectedRepo === 'all' ? 'text-accent' : 'text-theme-text-primary'
                   )}
                 >
                   <span>All Repositories</span>
@@ -186,9 +186,9 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                 type="checkbox"
                 checked={showOfficialOnly}
                 onChange={(e) => setShowOfficialOnly(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"
               />
-              <BadgeCheck className="w-3.5 h-3.5 text-blue-400" />
+              <BadgeCheck className="w-3.5 h-3.5 text-accent" />
               Official
             </label>
             <label className="flex items-center gap-1.5 text-sm text-theme-text-secondary">
@@ -196,7 +196,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                 type="checkbox"
                 checked={showVerifiedOnly}
                 onChange={(e) => setShowVerifiedOnly(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"
               />
               <Shield className="w-3.5 h-3.5 text-green-400" />
               Verified
@@ -207,7 +207,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
               <select
                 value={artifactHubSort}
                 onChange={(e) => setArtifactHubSort(e.target.value as ArtifactHubSortOption)}
-                className="bg-theme-elevated border border-theme-border-light rounded px-2 py-1 text-sm text-theme-text-primary focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="bg-theme-elevated border border-theme-border-light rounded px-2 py-1 text-sm text-theme-text-primary focus:outline-none focus:ring-2 focus:ring-accent"
               >
                 <option value="relevance">Relevance</option>
                 <option value="stars">Stars</option>
@@ -225,7 +225,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
             placeholder={chartSource === 'local' ? "Search charts..." : "Search ArtifactHub..."}
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full max-w-md pl-10 pr-4 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"
+            className="w-full max-w-md pl-10 pr-4 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-accent"
           />
         </div>
 
@@ -237,7 +237,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                 type="checkbox"
                 checked={showAllVersions}
                 onChange={(e) => setShowAllVersions(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"
               />
               All versions
             </label>
@@ -276,7 +276,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                       Add repositories using <code className="bg-theme-elevated px-1 rounded">helm repo add</code>
                     </p>
                     <p className="mt-2">
-                      Or try searching on <button onClick={() => setChartSource('artifacthub')} className="text-blue-400 hover:underline">ArtifactHub</button>
+                      Or try searching on <button onClick={() => setChartSource('artifacthub')} className="text-accent-text hover:underline">ArtifactHub</button>
                     </p>
                   </div>
                 ) : (
@@ -375,7 +375,7 @@ function RepoDropdownItem({ repo, isSelected, onSelect, onUpdate, isUpdating, ca
         onClick={onSelect}
         className={clsx(
           'flex-1 text-left text-sm truncate',
-          isSelected ? 'text-blue-400' : 'text-theme-text-primary'
+          isSelected ? 'text-accent' : 'text-theme-text-primary'
         )}
       >
         {repo.name}
@@ -413,7 +413,7 @@ function LocalChartCard({ chart, onSelect }: LocalChartCardProps) {
           <img
             src={chart.icon}
             alt=""
-            className="w-10 h-10 rounded object-contain bg-white/10 p-1"
+            className="w-10 h-10 rounded object-contain bg-theme-elevated p-1"
             onError={(e) => {
               (e.target as HTMLImageElement).style.display = 'none'
             }}
@@ -476,7 +476,7 @@ function ArtifactHubChartCard({ chart, onSelect }: ArtifactHubChartCardProps) {
           <img
             src={chart.logoUrl}
             alt=""
-            className="w-12 h-12 rounded object-contain bg-white/10 p-1 shrink-0"
+            className="w-12 h-12 rounded object-contain bg-theme-elevated p-1 shrink-0"
             onError={(e) => {
               (e.target as HTMLImageElement).style.display = 'none'
             }}

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'
@@ -148,12 +149,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) => {

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">

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -457,7 +457,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
                 placeholder="Search... (press /)"
-                className="w-80 pl-9 pr-8 py-1.5 text-sm bg-theme-elevated border border-theme-border-light rounded-lg text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="w-80 pl-9 pr-8 py-1.5 text-sm bg-theme-elevated border border-theme-border-light rounded-lg text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
               />
               {searchTerm && (
                 <button
@@ -490,7 +490,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
               {panOffset > 0 && (
                 <button
                   onClick={() => setPanOffset(0)}
-                  className="px-2 py-1 text-xs text-blue-600 dark:text-blue-300 hover:text-blue-700 dark:hover:text-blue-200 hover:bg-theme-elevated rounded"
+                  className="px-2 py-1 text-xs text-accent-text hover:underline hover:bg-theme-elevated rounded"
                   title="Jump to current time"
                 >
                   → Now
@@ -519,7 +519,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                   type="checkbox"
                   checked={groupByApp}
                   onChange={(e) => setGroupByApp(e.target.checked)}
-                  className="w-3.5 h-3.5 rounded border-theme-border-light bg-theme-elevated text-blue-500 focus:ring-blue-500 focus:ring-offset-0"
+                  className="w-3.5 h-3.5 rounded border-theme-border-light bg-theme-elevated text-accent focus:ring-accent focus:ring-offset-0"
                 />
                 <span className="border-b border-dotted border-theme-text-tertiary">Group by app</span>
               </label>
@@ -687,7 +687,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                           <div className="flex items-center gap-1">
                             <span className={clsx(
                               'text-xs px-1 py-0.5 rounded',
-                              lane.isWorkload ? 'bg-blue-500/15 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300' : 'bg-theme-elevated text-theme-text-secondary'
+                              lane.isWorkload ? 'bg-accent-muted text-accent-text' : 'bg-theme-elevated text-theme-text-secondary'
                             )}>
                               {displayKind(lane.kind)}
                             </span>
@@ -711,7 +711,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                               )
                             })()}
                           </div>
-                          <div className="text-sm text-theme-text-primary break-words group-hover:text-blue-600 dark:group-hover:text-blue-300 group-hover:underline cursor-pointer">
+                          <div className="text-sm text-theme-text-primary break-words group-hover:text-accent-text group-hover:underline cursor-pointer">
                             {lane.name}
                           </div>
                           <div className="text-xs text-theme-text-tertiary">{lane.namespace}</div>
@@ -751,7 +751,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                   {/* Child lanes (when expanded) - includes parent as first row */}
                   {isExpanded && hasChildren && (
                     <div
-                      className="border-l-2 border-blue-500/40 ml-3 bg-theme-surface/30"
+                      className="border-l-2 border-accent/40 ml-3 bg-theme-surface/30"
                       style={{ animation: 'swimlane-expand 250ms ease-out both' }}
                     >
                       {/* Parent's own events as first row (only if it has events) */}
@@ -764,11 +764,11 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                             >
                               <div className="flex-1 min-w-0">
                                 <div className="flex items-center gap-1">
-                                  <span className="text-xs px-1 py-0.5 rounded bg-blue-500/15 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300">
+                                  <span className="text-xs px-1 py-0.5 rounded bg-accent-muted text-accent-text">
                                     {displayKind(lane.kind)}
                                   </span>
                                 </div>
-                                <div className="text-sm text-theme-text-secondary break-words group-hover:text-blue-600 dark:group-hover:text-blue-300 group-hover:underline cursor-pointer">
+                                <div className="text-sm text-theme-text-secondary break-words group-hover:text-accent-text group-hover:underline cursor-pointer">
                                   {lane.name}
                                 </div>
                               </div>
@@ -820,7 +820,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
                                     {displayKind(child.kind)}
                                   </span>
                                 </div>
-                                <div className="text-sm text-theme-text-secondary break-words group-hover:text-blue-600 dark:group-hover:text-blue-300 group-hover:underline cursor-pointer">
+                                <div className="text-sm text-theme-text-secondary break-words group-hover:text-accent-text group-hover:underline cursor-pointer">
                                   {child.name}
                                 </div>
                               </div>
@@ -1093,23 +1093,22 @@ function EventMarker({ event, x, selected, onClick, dimmed, small }: EventMarker
       return 'bg-red-500'
     }
 
-    // Solid fill for real-time events
-    const opacity = dimmed ? '/50' : ''
-    // Problematic events (warnings, BackOff, etc.) are always amber/orange
+    // Solid fill for real-time events.
+    // Problematic events (warnings, BackOff, etc.) are always amber/orange.
     if (isProblematic) {
-      return `bg-amber-500${opacity}`
+      return dimmed ? 'bg-amber-500/50' : 'bg-amber-500'
     }
     if (isChange) {
       switch (event.eventType) {
         case 'add':
-          return `bg-green-500${opacity}`
+          return dimmed ? 'bg-green-500/50' : 'bg-green-500'
         case 'delete':
-          return `bg-red-500${opacity}`
+          return dimmed ? 'bg-red-500/50' : 'bg-red-500'
         case 'update':
-          return `bg-blue-500${opacity}`
+          return dimmed ? 'bg-blue-500/50' : 'bg-blue-500'
       }
     }
-    return `bg-theme-text-tertiary${opacity}`
+    return dimmed ? 'bg-theme-text-tertiary/50' : 'bg-theme-text-tertiary'
   }
 
   const markerClasses = getMarkerStyle()
@@ -1236,7 +1235,7 @@ function EventDetailPanel({ event, onClose, onResourceClick }: EventDetailPanelP
             </span>
             <button
               onClick={() => onResourceClick?.({ kind: kindToPlural(event.kind), namespace: event.namespace, name: event.name })}
-              className="text-theme-text-primary font-medium hover:text-blue-600 dark:hover:text-blue-300"
+              className="text-theme-text-primary font-medium hover:text-accent-text"
             >
               {event.name}
             </button>

package/src/components/ui/DiagnosticsOverlay.tsx

@@ -4,7 +4,7 @@ import { clsx } from 'clsx'
 import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
 import { openExternal } from '../../utils/navigation'
 import { useDiagnostics } from '../../api/client'
-import type { DiagnosticsSnapshot, DiagMetricsSourceHealth, DiagDropRecord, DiagErrorEntry } from '../../api/client'
+import type { DiagnosticsSnapshot, DiagMetricsSourceHealth, DiagDropRecord, DiagErrorEntry, DiagCacheSyncStatus, DiagInformerSyncStatus, DiagSyncPhase } from '../../api/client'
 
 interface DiagnosticsOverlayProps {
   onClose: () => void
@@ -315,10 +315,41 @@ function EventPipelineSection({ data }: { data: DiagnosticsSnapshot }) {
 function InformersSection({ data }: { data: DiagnosticsSnapshot }) {
   if (!data.informers) return null
   const inf = data.informers
+  const sync = inf.syncStatus
+  const phaseWarn = sync ? sync.phase !== 'complete' : false
+  const criticalWarn = sync ? sync.criticalSynced < sync.criticalTotal : false
+  const promoted = sync?.promotedKinds ?? []
+  const pendingCritical = sync?.pendingCritical ?? []
+  const pendingDeferred = sync?.pendingDeferred ?? []
+  const sectionWarn = phaseWarn || criticalWarn || promoted.length > 0
   return (
-    <Section title="Informers">
+    <Section title="Informers" warn={sectionWarn}>
       <Row label="Typed" value={inf.typedCount} />
       <Row label="Dynamic (CRDs)" value={inf.dynamicCount} />
+      {sync && (
+        <>
+          <Row
+            label="Sync Phase"
+            value={`${formatSyncPhase(sync.phase)} (${formatElapsed(sync.elapsedSec)})`}
+            warn={phaseWarn}
+          />
+          <Row
+            label="Critical Synced"
+            value={`${sync.criticalSynced} / ${sync.criticalTotal}`}
+            warn={criticalWarn}
+          />
+          <Row
+            label="Deferred Synced"
+            value={`${sync.deferredSynced} / ${sync.deferredTotal}`}
+          />
+          {promoted.length > 0 && (
+            <Row label="Promoted to Deferred" value={promoted.join(', ')} warn />
+          )}
+          {(pendingCritical.length > 0 || pendingDeferred.length > 0) && (
+            <PendingInformers sync={sync} />
+          )}
+        </>
+      )}
       {inf.watchedCRDs && inf.watchedCRDs.length > 0 && (
         <Row label="Watched CRDs" value={inf.watchedCRDs.join(', ')} />
       )}
@@ -326,6 +357,53 @@ function InformersSection({ data }: { data: DiagnosticsSnapshot }) {
   )
 }
 
+function PendingInformers({ sync }: { sync: DiagCacheSyncStatus }) {
+  const pending = getPendingInformers(sync)
+  if (pending.length === 0) return null
+  return (
+    <div className="mt-1.5 pt-1.5 border-t border-theme-border-light">
+      <span className="text-[10px] text-theme-text-tertiary uppercase">Pending Informers ({pending.length})</span>
+      {pending.map((i: DiagInformerSyncStatus) => (
+        <Row
+          key={i.kind}
+          label={`${i.kind} (${i.deferred ? 'deferred' : 'critical'})`}
+          value={`${i.items.toLocaleString()} items so far`}
+          warn={!i.deferred}
+        />
+      ))}
+    </div>
+  )
+}
+
+function getPendingInformers(sync: DiagCacheSyncStatus): DiagInformerSyncStatus[] {
+  const pendingNames = new Set([
+    ...(sync.pendingCritical ?? []),
+    ...(sync.pendingDeferred ?? []),
+  ])
+  return sync.informers
+    .filter((i) => pendingNames.has(i.kind))
+    .sort((a, b) => Number(a.deferred) - Number(b.deferred) || a.kind.localeCompare(b.kind))
+}
+
+function formatSyncPhase(phase: DiagSyncPhase): string {
+  switch (phase) {
+    case 'not_started': return 'not started'
+    case 'syncing_critical': return 'syncing critical'
+    case 'syncing_deferred': return 'syncing deferred'
+    case 'complete': return 'complete'
+  }
+}
+
+function formatElapsed(sec: number): string {
+  const s = Math.max(0, sec)
+  if (s < 1) return `${Math.round(s * 1000)}ms`
+  if (s < 60) return `${s.toFixed(1)}s`
+  const total = Math.round(s)
+  const m = Math.floor(total / 60)
+  const rem = total - m * 60
+  return `${m}m ${rem}s`
+}
+
 function PrometheusSection({ data }: { data: DiagnosticsSnapshot }) {
   if (!data.prometheus) return null
   const p = data.prometheus
@@ -512,6 +590,19 @@ function formatForGitHub(data: DiagnosticsSnapshot, includeRawJson = true): stri
     const inf = data.informers
     lines.push(`### Informers`)
     lines.push(`- Typed: ${inf.typedCount} | Dynamic: ${inf.dynamicCount}`)
+    if (inf.syncStatus) {
+      const sync = inf.syncStatus
+      lines.push(`- Sync Phase: \`${sync.phase}\` (${formatElapsed(sync.elapsedSec)})`)
+      lines.push(`- Critical: ${sync.criticalSynced}/${sync.criticalTotal} synced | Deferred: ${sync.deferredSynced}/${sync.deferredTotal} synced`)
+      if (sync.promotedKinds && sync.promotedKinds.length > 0) {
+        lines.push(`- **Promoted to Deferred:** ${sync.promotedKinds.join(', ')}`)
+      }
+      const pending = getPendingInformers(sync)
+      if (pending.length > 0) {
+        const parts = pending.map((i) => `${i.kind}(${i.deferred ? 'deferred' : 'critical'},${i.items.toLocaleString()} items)`)
+        lines.push(`- **Pending:** ${parts.join(', ')}`)
+      }
+    }
     if (inf.watchedCRDs && inf.watchedCRDs.length > 0) {
       lines.push(`- CRDs: ${inf.watchedCRDs.join(', ')}`)
     }

package/src/components/ui/UpdateNotification.tsx

@@ -111,9 +111,9 @@ export function UpdateNotification() {
   const effectiveState: DesktopUpdateState = updateStatus?.state ?? 'idle'
 
   return (
-    <div className="fixed bottom-4 right-4 z-50 max-w-sm bg-theme-surface border border-blue-500/50 rounded-lg shadow-xl p-4 animate-in slide-in-from-right">
+    <div className="fixed bottom-4 right-4 z-50 max-w-sm bg-theme-surface border border-accent/50 rounded-lg shadow-xl p-4 animate-in slide-in-from-right">
       <div className="flex items-start gap-3">
-        <div className="flex items-center justify-center w-8 h-8 bg-blue-500/20 rounded-full shrink-0">
+        <div className="flex items-center justify-center w-8 h-8 bg-accent-muted rounded-full shrink-0">
           <UpdateIcon state={effectiveState} />
         </div>
         <div className="flex-1 min-w-0">
@@ -154,7 +154,7 @@ export function UpdateNotification() {
                 href={versionInfo.releaseUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-1 mt-2 text-xs font-medium text-blue-400 hover:text-blue-300"
+                className="inline-flex items-center gap-1 mt-2 text-xs font-medium text-accent-text hover:underline"
               >
                 Download from GitHub →
               </a>
@@ -186,11 +186,11 @@ function UpdateIcon({ state }: { state: DesktopUpdateState }) {
   switch (state) {
     case 'downloading':
     case 'applying':
-      return <Loader2 className="w-4 h-4 text-blue-400 animate-spin" />
+      return <Loader2 className="w-4 h-4 text-accent animate-spin" />
     case 'ready':
       return <ArrowDownToLine className="w-4 h-4 text-green-400" />
     default:
-      return <Download className="w-4 h-4 text-blue-400" />
+      return <Download className="w-4 h-4 text-accent" />
   }
 }
 
@@ -247,7 +247,7 @@ function DesktopUpdateControls({
         <div className="mt-2 space-y-1">
           <div className="w-full bg-theme-elevated rounded-full h-1.5 overflow-hidden">
             <div
-              className="bg-blue-500 h-full rounded-full transition-all duration-300"
+              className="bg-accent h-full rounded-full transition-all duration-300"
               style={{ width: `${Math.round((progress ?? 0) * 100)}%` }}
             />
           </div>
@@ -272,7 +272,7 @@ function DesktopUpdateControls({
     case 'applying':
       return (
         <div className="mt-2 flex items-center gap-2">
-          <Loader2 className="w-3.5 h-3.5 text-blue-400 animate-spin" />
+          <Loader2 className="w-3.5 h-3.5 text-accent animate-spin" />
           <p className="text-xs text-theme-text-secondary">Applying update...</p>
         </div>
       )