@skyhook-io/k8s-ui 1.14.4 → 1.14.6

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -1,3 +1,4 @@
+import { hasReflectorDetails } from '../resources/renderers/ReflectorSection'
 import { clsx } from 'clsx'
 import { SEVERITY_BADGE, HEALTH_BADGE_COLORS } from '../../utils/badge-colors'
 import { isArgoRolloutResource } from '../../utils/workload-rollout'
@@ -120,6 +121,8 @@ import {
   PVCRenderer,
   RolloutRenderer,
   AnalysisRunRenderer,
+  AnalysisTemplateRenderer,
+  ExperimentRenderer,
   CertificateRenderer,
   WorkflowRenderer,
   PersistentVolumeRenderer,
@@ -231,6 +234,7 @@ import {
   PriorityClassRenderer,
   RuntimeClassRenderer,
   LeaseRenderer,
+  LimitRangeRenderer,
   TraefikIngressRouteRenderer,
   TraefikMiddlewareRenderer,
   TraefikServiceRenderer,
@@ -426,7 +430,7 @@ const KNOWN_KINDS = new Set([
   'pods', 'deployments', 'statefulsets', 'daemonsets', 'replicasets',
   'services', 'endpointslices', 'ingresses', 'configmaps', 'secrets', 'jobs', 'cronjobs', 'cronworkflows',
   'hpas', 'horizontalpodautoscalers', 'nodes', 'persistentvolumeclaims',
-  'rollouts', 'analysisruns', 'certificates', 'workflows', 'persistentvolumes',
+  'rollouts', 'analysisruns', 'analysistemplates', 'clusteranalysistemplates', 'experiments', 'certificates', 'workflows', 'persistentvolumes',
   'storageclasses', 'certificaterequests', 'clusterissuers', 'issuers',
   'orders', 'challenges',
   'gateways', 'gatewayclasses', 'httproutes', 'grpcroutes', 'tcproutes', 'tlsroutes', 'sealedsecrets', 'workflowtemplates', 'clusterworkflowtemplates',
@@ -473,7 +477,7 @@ const KNOWN_KINDS = new Set([
   'virtualservices', 'destinationrules', 'serviceentries',
   'peerauthentications', 'authorizationpolicies',
   'mutatingwebhookconfigurations', 'validatingwebhookconfigurations',
-  'ingressclasses', 'priorityclasses', 'runtimeclasses', 'leases',
+  'ingressclasses', 'priorityclasses', 'runtimeclasses', 'leases', 'limitranges',
   'knativeservices', 'knativeconfigurations', 'knativerevisions', 'knativeroutes',
   'brokers', 'triggers', 'eventtypes', 'pingsources', 'apiserversources', 'containersources', 'sinkbindings',
   'channels', 'inmemorychannels', 'subscriptions', 'sequences', 'parallels',
@@ -678,7 +682,8 @@ export function ResourceRendererDispatch({
     kind === 'clusters' || kind === 'backups' || kind === 'scheduledbackups' || kind === 'poolers'
     || kind === 'objectstores' || kind === 'databases' || kind === 'publications'
     || kind === 'subscriptions' || kind === 'imagecatalogs' || kind === 'clusterimagecatalogs'
-    || kind === 'policies' || kind === 'rollouts' || kind === 'machines' || kind === 'machinesets'
+    || kind === 'policies' || kind === 'rollouts' || kind === 'experiments'
+    || kind === 'machines' || kind === 'machinesets'
   const isCNPGApiVersion = isApiGroup(data?.apiVersion, CNPG_GROUP)
   const groupGatedMatched =
     (kind === 'clusters' && (isCNPGApiVersion || isApiGroup(data?.apiVersion, 'cluster.x-k8s.io')))
@@ -691,6 +696,11 @@ export function ResourceRendererDispatch({
       && (isCNPGApiVersion || isApiGroup(data?.apiVersion, 'messaging.knative.dev')))
     || (kind === 'policies' && isApiGroup(data?.apiVersion, 'kyverno.io'))
     || (kind === 'rollouts' && isArgoRolloutResource(data))
+    // Katib (kubeflow.org) ships its own, unrelated Experiment CRD sharing
+    // this plural — without this gate it got the Argo Rollouts Experiment
+    // renderer's mostly-empty status view instead of its actual resource
+    // details, the same collision shape as every other check in this block.
+    || (kind === 'experiments' && isApiGroup(data?.apiVersion, 'argoproj.io'))
     || ((kind === 'machines' || kind === 'machinesets')
       && isApiGroup(data?.apiVersion, 'cluster.x-k8s.io'))
   const groupGatedFallthrough = isGroupGatedKind && !groupGatedMatched
@@ -741,11 +751,15 @@ export function ResourceRendererDispatch({
   const HPAComp = rendererOverrides?.HPARenderer ?? HPARenderer
   const PVCComp = rendererOverrides?.PVCRenderer ?? PVCRenderer
   const RolloutComp = rendererOverrides?.RolloutRenderer ?? RolloutRenderer
+  const showsReflection = (kind === 'configmaps' || kind === 'secrets') && hasReflectorDetails(data, relationships?.reflection)
+  const reflectionRefs = showsReflection ? [relationships?.reflection?.source, ...(relationships?.reflection?.mirrors ?? [])].filter((ref): ref is ResourceRef => !!ref) : []
+  const withoutReflection = (refs: ResourceRef[] | undefined) => refs?.filter(ref => !reflectionRefs.some(mirror => mirror.kind === ref.kind && mirror.namespace === ref.namespace && mirror.name === ref.name && (mirror.group ?? '') === (ref.group ?? '')))
+  const sidebarRelationships = showsReflection && relationships ? { ...relationships, configRefs: withoutReflection(relationships.configRefs), consumers: withoutReflection(relationships.consumers) } : relationships
   const scaleBlockedBy = replicaScalers(relationships?.scalers)
 
   const sidebarContent = showCommonSections && (
     <>
-      <RelatedResourcesSection relationships={relationships} onNavigate={onNavigate} />
+      <RelatedResourcesSection relationships={sidebarRelationships} onNavigate={onNavigate} />
       {kind !== 'events' && <EventsSection events={events || []} updates={updates || []} isLoading={eventsLoading ?? false} eventsError={eventsError ?? null} updatesError={updatesError ?? null} hint={eventsHint} />}
       <LabelsSection data={data} />
       <AnnotationsSection data={data} />
@@ -773,8 +787,8 @@ export function ResourceRendererDispatch({
         {kind === 'services' && !data?.apiVersion?.includes('serving.knative.dev') && <ServiceComp data={data} onCopy={onCopy} copied={copied} onNavigate={onNavigate} />}
         {kind === 'endpointslices' && <EndpointSliceRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'ingresses' && !data?.apiVersion?.includes('networking.internal.knative.dev') && <IngressRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'configmaps' && <ConfigMapRenderer data={data} />}
-        {kind === 'secrets' && <SecretRenderer data={data} certificateInfo={certificateInfo} resourceData={data} onSaveSecretValue={onSaveSecretValue} isSaving={isSavingSecret} />}
+        {kind === 'configmaps' && <ConfigMapRenderer data={data} relationships={relationships} onNavigate={onNavigate} />}
+        {kind === 'secrets' && <SecretRenderer data={data} relationships={relationships} onNavigate={onNavigate} certificateInfo={certificateInfo} resourceData={data} onSaveSecretValue={onSaveSecretValue} isSaving={isSavingSecret} />}
         {kind === 'jobs' && !nonCoreJobFallthrough && <JobRenderer data={data} />}
         {kind === 'cronjobs' && <CronJobRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'cronworkflows' && <CronWorkflowRenderer data={data} onNavigate={onNavigate} />}
@@ -783,6 +797,8 @@ export function ResourceRendererDispatch({
         {kind === 'persistentvolumeclaims' && <PVCComp data={data} onNavigate={onNavigate} />}
         {kind === 'rollouts' && isArgoRolloutResource(data) && <RolloutComp data={data} onNavigate={onNavigate} />}
         {kind === 'analysisruns' && <AnalysisRunRenderer data={data} onNavigate={onNavigate} />}
+        {(kind === 'analysistemplates' || kind === 'clusteranalysistemplates') && <AnalysisTemplateRenderer data={data} />}
+        {kind === 'experiments' && isApiGroup(data?.apiVersion, 'argoproj.io') && <ExperimentRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'certificates' && !data?.apiVersion?.includes('networking.internal.knative.dev') && <CertificateRenderer data={data} />}
         {kind === 'workflows' && <WorkflowRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'persistentvolumes' && <PersistentVolumeRenderer data={data} onNavigate={onNavigate} />}
@@ -920,6 +936,7 @@ export function ResourceRendererDispatch({
         {kind === 'priorityclasses' && <PriorityClassRenderer data={data} />}
         {kind === 'runtimeclasses' && <RuntimeClassRenderer data={data} />}
         {kind === 'leases' && <LeaseRenderer data={data} />}
+        {kind === 'limitranges' && <LimitRangeRenderer data={data} />}
         {/* Knative Serving */}
         {(kind === 'services' && data?.apiVersion?.includes('serving.knative.dev')) && <KnativeServiceRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'knativeservices' && <KnativeServiceRenderer data={data} onNavigate={onNavigate} />}
@@ -1103,6 +1120,10 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   if (k === 'nodes') return getNodeStatus(data)
   if (k === 'persistentvolumeclaims') return getPVCStatus(data)
   if (k === 'analysisruns') return getAnalysisRunStatus(data)
+  // Same collision guard as the render branch above — Katib's unrelated
+  // Experiment CRD (kubeflow.org) shares this plural and doesn't report the
+  // AnalysisPhase vocabulary getAnalysisRunStatus expects.
+  if (k === 'experiments' && isApiGroup(data?.apiVersion, 'argoproj.io')) return getAnalysisRunStatus(data)
   if (k === 'workflows') return getWorkflowStatus(data)
   if (k === 'cronworkflows') return getCronWorkflowStatus(data)
   if (k === 'certificates') {

package/src/components/shared/index.ts

@@ -1,6 +1,10 @@
 export { ResourceRendererDispatch, getResourceStatus, type RendererOverrides } from './ResourceRendererDispatch'
 export { EditableYamlView, SaveSuccessAnimation } from './EditableYamlView'
 export { ResourceActionsBar, RevisionHistoryDialog, isRolloutKind } from './ResourceActionsBar'
+export {
+  DrainPlanDialog, DrainPlanContent, canConfirmDrain, planMatches, emptyDirPodsAtRisk, DEFAULT_DRAIN_DIALOG_OPTIONS,
+  type DrainPlan, type DrainPlanPod, type DrainOutcome, type DrainDialogOptions,
+} from './DrainPlanDialog'
 export { SetImageDialog, type ManagedImageSource, type SetImageDialogProps } from './SetImageDialog'
 export { CreateResourceDialog, type CreateResourceDialogProps, type ApplyResult } from './CreateResourceDialog'
 export { HelmManagedByChip, ManagedByChip, type HelmOwnerRef } from './ManagedByChip'

package/src/components/topology/K8sResourceNode.test.ts

@@ -9,6 +9,15 @@ describe('baseSubtitle', () => {
     expect(baseSubtitle('ServiceMonitor', { endpointCount: 1 })).toBe('1 scrape endpoint')
   })
 
+  it('describes a Service by its first port, capping additional ports to a count', () => {
+    expect(baseSubtitle('Service', { type: 'ClusterIP', ports: [] })).toBe('ClusterIP')
+    expect(baseSubtitle('Service', { type: 'ClusterIP', ports: [{ port: 80 }] })).toBe('ClusterIP :80')
+    expect(baseSubtitle('Service', {
+      type: 'ClusterIP',
+      ports: [{ port: 80 }, { port: 443 }, { port: 9153 }],
+    })).toBe('ClusterIP :80 +2 more')
+  })
+
   it('describes a Calico staged deletion as a removal, not as selecting everything', () => {
     // A staged deletion carries no selector, because the Calico API forbids one.
     // Falling through to the empty-selector default would label the broadest

package/src/components/topology/K8sResourceNode.tsx

@@ -168,6 +168,34 @@ function getIssueTooltip(issue: string | undefined): React.ReactNode {
   );
 }
 
+// Full port list for the Service subtitle's hover affordance — the subtitle
+// itself only ever shows the first port + a count, so this is the only place
+// a multi-port Service's other ports are visible without opening the detail
+// page. Formatting (hide targetPort when it matches port) mirrors
+// ServicePortCards in ServiceRenderer.tsx so a Service's ports read the same
+// whether glanced at in the graph or opened in the full resource view.
+function servicePortsTooltip(ports: ServicePortEntry[]): React.ReactNode | null {
+  if (ports.length < 2) return null;
+  return (
+    <div className="max-w-xs space-y-0.5">
+      {ports.map((p, i) => {
+        const target =
+          p.targetPort != null && p.targetPort !== String(p.port)
+            ? ` → ${p.targetPort}`
+            : "";
+        const proto = p.appProtocol || p.protocol;
+        return (
+          <div key={i} className="text-[11px]">
+            {p.name && <span className="text-theme-text-tertiary">{p.name} </span>}
+            <span className="font-medium">{p.port}{target}</span>
+            {proto && <span className="text-theme-text-tertiary"> ({proto})</span>}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
 // Default dimensions for unknown CRD kinds
 export const DEFAULT_NODE_DIMENSIONS = { width: 260, height: 84 };
 
@@ -322,6 +350,16 @@ const SUMMARY_POD_KINDS = new Set<NodeKind>([
   "Service",
 ]);
 
+// Shape of one entry in a Service node's nodeData.ports (pkg/topology/builder.go's
+// serviceTopologyPorts). name/appProtocol are omitted server-side when unset.
+export interface ServicePortEntry {
+  name?: string;
+  port: number;
+  targetPort?: string;
+  protocol?: string;
+  appProtocol?: string;
+}
+
 export function baseSubtitle(kind: NodeKind, nodeData: Record<string, unknown>): string {
   if (nodeData.deploymentMembership === 'source-only') {
     return `Declared by ${nodeData.deploymentSourceLabel ?? 'deployment source'}`
@@ -369,8 +407,10 @@ export function baseSubtitle(kind: NodeKind, nodeData: Record<string, unknown>):
       return (nodeData.phase as string) || "Unknown";
     case "Service": {
       const svcType = (nodeData.type as string) || "ClusterIP";
-      const port = nodeData.port;
-      return port ? `${svcType} :${port}` : svcType;
+      const ports = (nodeData.ports as ServicePortEntry[] | undefined) || [];
+      if (ports.length === 0) return svcType;
+      const more = ports.length > 1 ? ` +${ports.length - 1} more` : "";
+      return `${svcType} :${ports[0].port}${more}`;
     }
     case "CalicoNetworkPolicy":
     case "CalicoGlobalNetworkPolicy":
@@ -513,6 +553,9 @@ export const K8sResourceNode = memo(function K8sResourceNode({
   const { ownerColorIndex } = ownershipOf(nodeData)
   const hue = ownerColorIndex !== null ? workloadHue(ownerColorIndex) : undefined
   const subtitle = getSubtitle(kind, nodeData)
+  const portsTooltip = kind === 'Service'
+    ? servicePortsTooltip((nodeData.ports as ServicePortEntry[] | undefined) || [])
+    : null
   const isInternet = kind === 'Internet'
   const isPodGroup = kind === 'PodGroup'
   const isSmallNode = kind === 'ConfigMap' || kind === 'Secret' || kind === 'ServiceAccount' || kind === 'SealedSecret' || kind === 'ServiceMonitor' || kind === 'PodMonitor' || kind === 'HorizontalPodAutoscaler'
@@ -730,9 +773,17 @@ export const K8sResourceNode = memo(function K8sResourceNode({
 
           {/* Subtitle */}
           {subtitle && (
-            <div className="text-xs text-theme-text-secondary truncate mt-0.5">
-              {subtitle}
-            </div>
+            portsTooltip ? (
+              <Tooltip content={portsTooltip} position="bottom" wrapperClassName="max-w-full mt-0.5">
+                <div className="text-xs text-theme-text-secondary truncate cursor-help">
+                  {subtitle}
+                </div>
+              </Tooltip>
+            ) : (
+              <div className="text-xs text-theme-text-secondary truncate mt-0.5">
+                {subtitle}
+              </div>
+            )
           )}
         </div>
       </div>

package/src/components/ui/Badge.tsx

@@ -23,7 +23,10 @@ export type BadgeSize = 'sm' | 'default'
 //   "tell these sibling options apart". The only place sharing is intended.
 // - structural: ports/paths/hosts/weights/names — neutral data fragments, not a
 //   status. Its own name so it can diverge from severity-neutral later.
-export type BadgeTone = 'note' | 'accent1' | 'accent2' | 'accent3' | 'structural'
+// - agent:    words an AI agent attached to a Radar fact (evidence roles such
+//   as "Cause" / "Rules out"). Muted brand accent on purpose: never a severity
+//   hue, so an agent's framing can never be mistaken for a Radar finding.
+export type BadgeTone = 'note' | 'accent1' | 'accent2' | 'accent3' | 'structural' | 'agent'
 
 interface BadgeProps {
   /** Severity-based coloring (status badges) */
@@ -231,6 +234,7 @@ const TONE: Record<BadgeTone, string> = {
   accent3:    'bg-teal-100 text-teal-800 border-teal-300 dark:bg-teal-950/50 dark:text-teal-400 dark:border-teal-700/40',
   // neutral data fragment (ports/paths/hosts/names)
   structural: 'bg-theme-elevated text-theme-text-secondary border-theme-border',
+  agent:      'bg-accent-muted text-accent-text border-accent/30',
 }
 
 // Structure classes

package/src/components/ui/FetchResult.test.tsx

@@ -2,8 +2,8 @@ import { describe, expect, it } from 'vitest'
 import { renderToString } from 'react-dom/server'
 import { FetchResult } from './FetchResult'
 
-function shaped(message: string, status: number) {
-  return Object.assign(new Error(message), { status })
+function shaped(message: string, status: number, data?: Record<string, unknown>) {
+  return Object.assign(new Error(message), { status, data })
 }
 
 describe('FetchResult', () => {
@@ -54,6 +54,24 @@ describe('FetchResult', () => {
     expect(html).toContain('Resource cache not available')
   })
 
+  it('does not blame the cluster for a kind_sync_failed 503', () => {
+    const html = renderToString(
+      <FetchResult
+        loading={false}
+        error={shaped('pods failed to load within the sync deadline', 503, { error_code: 'kind_sync_failed' })}
+      />,
+    )
+    expect(html).not.toContain('Cluster unavailable')
+    expect(html).toContain('Couldn')
+    expect(html).toContain('pods failed to load within the sync deadline')
+  })
+
+  it('renders a Retry button only when onRetry is given', () => {
+    const err = shaped('internal server error', 500)
+    expect(renderToString(<FetchResult loading={false} error={err} onRetry={() => {}} />)).toContain('Retry')
+    expect(renderToString(<FetchResult loading={false} error={err} />)).not.toContain('Retry')
+  })
+
   it('renders "Sign-in required" on 401', () => {
     const html = renderToString(
       <FetchResult loading={false} error={shaped('Unauthorized', 401)} />,

package/src/components/ui/FetchResult.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { ShieldOff, AlertTriangle, ServerCrash, LogIn, Copy, Check, type LucideIcon } from 'lucide-react'
+import { ShieldOff, AlertTriangle, ServerCrash, LogIn, Copy, Check, RefreshCw, type LucideIcon } from 'lucide-react'
 import { clsx } from 'clsx'
 import { PaneLoader } from './PaneLoader'
 import { isFetchError } from '../../types/fetch-error'
@@ -14,6 +14,7 @@ import { isFetchError } from '../../types/fetch-error'
 //   loading                  → <PaneLoader/>
 //   error (403)              → "Access denied"            + error.message
 //   error (404)              → notFoundMessage            + error.message
+//   error (503 sync failed)  → "Couldn't load this view"  + error.message
 //   error (503)              → "Cluster unavailable"      + error.message
 //   error (401)              → "Sign-in required"         (apiFetch redirects; fallback)
 //   error (other / no shape) → "Couldn't load this view"  + error.message
@@ -34,6 +35,8 @@ interface FetchResultProps {
   notFoundMessage?: string
   /** Pin to parent height. Existing call sites use "h-32" or "h-full". */
   className?: string
+  /** Renders a Retry button on the error surface. */
+  onRetry?: () => void
 }
 
 export function FetchResult({
@@ -41,6 +44,7 @@ export function FetchResult({
   error,
   notFoundMessage = 'Resource not found',
   className = 'h-32',
+  onRetry,
 }: FetchResultProps) {
   if (loading) {
     return <PaneLoader className={className} />
@@ -55,16 +59,17 @@ export function FetchResult({
       </div>
     )
   }
-  return <ErrorSurface error={error} notFoundMessage={notFoundMessage} className={className} />
+  return <ErrorSurface error={error} notFoundMessage={notFoundMessage} className={className} onRetry={onRetry} />
 }
 
 interface ErrorSurfaceProps {
   error: unknown
   notFoundMessage: string
   className: string
+  onRetry?: () => void
 }
 
-function ErrorSurface({ error, notFoundMessage, className }: ErrorSurfaceProps) {
+function ErrorSurface({ error, notFoundMessage, className, onRetry }: ErrorSurfaceProps) {
   const classified = classify(error, notFoundMessage)
   const Icon = classified.icon
 
@@ -81,6 +86,16 @@ function ErrorSurface({ error, notFoundMessage, className }: ErrorSurfaceProps)
           <CopyErrorButton text={classified.detail} />
         </div>
       )}
+      {onRetry && (
+        <button
+          type="button"
+          onClick={onRetry}
+          className="mt-1 flex items-center gap-1.5 rounded-md border border-theme-border bg-theme-elevated px-3 py-1.5 text-xs text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary"
+        >
+          <RefreshCw className="h-3.5 w-3.5" aria-hidden />
+          Retry
+        </button>
+      )}
     </div>
   )
 }
@@ -101,6 +116,17 @@ function classify(error: unknown, notFoundMessage: string): Classified {
       case 401:
         return { headline: 'Sign-in required', detail: error.message, icon: LogIn }
       case 503:
+        // The cluster is connected; one kind's informer missed its sync
+        // deadline, so "Cluster unavailable" would send the reader the wrong way.
+        if (errorCodeOf(error) === 'kind_sync_failed') {
+          return { headline: "Couldn't load this view", detail: error.message, icon: AlertTriangle }
+        }
+        // The cluster is healthy and still loading — the retry policies keep
+        // these surfaces polling, but a caller without one must not tell the
+        // user a connecting cluster is down.
+        if (errorCodeOf(error) === 'cluster_connecting' || errorCodeOf(error) === 'kind_sync_pending') {
+          return { headline: 'Cluster is still loading', detail: error.message, icon: AlertTriangle }
+        }
         return { headline: 'Cluster unavailable', detail: error.message, icon: ServerCrash }
       default:
         return { headline: "Couldn't load this view", detail: error.message, icon: AlertTriangle }
@@ -110,6 +136,10 @@ function classify(error: unknown, notFoundMessage: string): Classified {
   return { headline: "Couldn't load this view", detail: errorMessageOf(error), icon: AlertTriangle }
 }
 
+function errorCodeOf(error: unknown): unknown {
+  return (error as { data?: { error_code?: unknown } }).data?.error_code
+}
+
 function errorMessageOf(error: unknown): string | null {
   if (error instanceof Error && error.message) return error.message
   if (typeof error === 'string') return error

package/src/components/ui/FreshnessControl.tsx

@@ -6,7 +6,10 @@ import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { formatUpdatedAgo, msToNextBucket } from '../../utils/format'
 
 export type FreshnessMode = 'auto' | 'snapshot'
-export type FreshnessConnection = 'connected' | 'disconnected' | 'connecting'
+// 'syncing' is the progressive first-load shell: the app has a live link to
+// the cluster and serves kinds as their initial sync completes — nothing was
+// ever connected before, so 'Reconnecting…' would be untrue there.
+export type FreshnessConnection = 'connected' | 'disconnected' | 'connecting' | 'syncing'
 
 interface FreshnessControlProps {
   // 'auto'     — the view keeps itself current (polls or streams). Reads
@@ -85,7 +88,10 @@ export function FreshnessControl({
   let label: string | null
   let tooltip: string | null
   let live = false
-  if (degraded) {
+  if (connectionState === 'syncing') {
+    label = 'Loading cluster data…'
+    tooltip = 'Initial sync in progress — rows shown are live for the kinds that have finished loading.'
+  } else if (degraded) {
     label = 'Reconnecting…'
     tooltip = 'Not connected to the cluster — data may be stale until the connection is restored.'
   } else if (mode === 'auto' && paused) {

package/src/components/ui/index.ts

@@ -33,6 +33,11 @@ export { InClusterConsentDialog } from './InClusterConsentDialog'
 export { ToastProvider, useToast, showApiError, showApiSuccess } from './Toast'
 export { CodeViewer } from './CodeViewer'
 export { YamlEditor, YamlDiffEditor } from './YamlEditor'
+// Boots the self-hosted Monaco runtime (bundled editor, local workers) without
+// pulling monaco-editor into the main bundle. Anything that mounts a bare
+// `Editor` must await this first, or @monaco-editor/react reaches for its CDN.
+export const ensureMonacoRuntime = () =>
+  import('./monacoRuntime').then(({ ensureMonaco }) => ensureMonaco())
 export type {
   YamlDiagnostic,
   YamlDocumentIdentity,

package/src/components/ui/monacoRuntime.ts

@@ -2,7 +2,21 @@
 
 import { loader } from '@monaco-editor/react'
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
+// Tokenizers only — the set the YAML editor and the pod file viewer hand to
+// Monaco. JSON deliberately absent: its language lives in vs/language/json and
+// spawns a validation worker this runtime does not ship; viewers highlight
+// JSON with the YAML tokenizer, which covers it.
 import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'
+import 'monaco-editor/esm/vs/basic-languages/xml/xml.contribution'
+import 'monaco-editor/esm/vs/basic-languages/html/html.contribution'
+import 'monaco-editor/esm/vs/basic-languages/css/css.contribution'
+import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
+import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'
+import 'monaco-editor/esm/vs/basic-languages/python/python.contribution'
+import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution'
+import 'monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution'
+import 'monaco-editor/esm/vs/basic-languages/ini/ini.contribution'
+import 'monaco-editor/esm/vs/basic-languages/dockerfile/dockerfile.contribution'
 import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController.js'
 import 'monaco-editor/esm/vs/editor/contrib/folding/browser/folding.js'
 import 'monaco-editor/esm/vs/editor/contrib/format/browser/formatActions.js'

package/src/components/workload/WorkloadView.tsx

@@ -36,7 +36,7 @@ import {
 import type { TimelineEvent, ResourceRef, Relationships, SelectedResource, ResolvedEnvFrom, Topology, TopologyNode, HPADiagnosis, WorkloadPodInfo } from '../../types'
 import type { GitOpsStatus } from '../../types/gitops'
 import type { NavigateToResource } from '../../utils/navigation'
-import { refToSelectedResource, pluralToKind, kindToPlural, kindToPluralWithGroup, apiVersionToGroup } from '../../utils/navigation'
+import { refToSelectedResource, pluralToKind, knownKindForPluralWithGroup, kindToPlural, kindToPluralWithGroup, apiVersionToGroup } from '../../utils/navigation'
 import { neighborhoodFor, seedNodeIds } from '../../utils/topology-neighborhood'
 import { TopologyGraph } from '../topology/TopologyGraph'
 import { gitOpsOwnerFromRelationships, type GitOpsOwnerRef } from '../../utils/gitops-owner'
@@ -731,7 +731,7 @@ export function WorkloadView({
     | ((ctx: { kind: string; group?: string; namespace: string; name: string; health?: DiagnoseHealthHint }) => ReactNode)
     | undefined
   const diagnoseAction = renderDiagnose?.({
-    kind: apiKind,
+    kind: resource?.kind ?? knownKindForPluralWithGroup(apiKind, group ?? '') ?? apiKind,
     group,
     namespace,
     name,

package/src/monaco-deep.d.ts

@@ -3,3 +3,13 @@ declare module 'monaco-editor/esm/vs/editor/editor.api' {
 }
 
 declare module 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'
+declare module 'monaco-editor/esm/vs/basic-languages/xml/xml.contribution'
+declare module 'monaco-editor/esm/vs/basic-languages/html/html.contribution'
+declare module 'monaco-editor/esm/vs/basic-languages/css/css.contribution'
+declare module 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
+declare module 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'
+declare module 'monaco-editor/esm/vs/basic-languages/python/python.contribution'
+declare module 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution'
+declare module 'monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution'
+declare module 'monaco-editor/esm/vs/basic-languages/ini/ini.contribution'
+declare module 'monaco-editor/esm/vs/basic-languages/dockerfile/dockerfile.contribution'

package/src/theme/components.css

@@ -95,6 +95,11 @@
     border-style: solid;
     border-color: transparent;
     line-height: 1.25rem;
+    /* A badge sits in table cells the reader can drag narrower than the label.
+       Without a ceiling it keeps its intrinsic width and draws straight over
+       the next column, so two cells become unreadable instead of one. */
+    max-width: 100%;
+    overflow: hidden;
   }
 
   .badge-sm {
@@ -108,6 +113,17 @@
     border-style: solid;
     border-color: transparent;
     line-height: 1.25rem;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  /* The icon is the one part of a badge that must never be traded for text:
+     a 12px glyph squeezed to 5px reads as a rendering fault, and a severity
+     icon that shrinks is worse than one that is cropped away cleanly. Flex
+     would otherwise shrink it first, because it is the item with slack. */
+  .badge > svg,
+  .badge-sm > svg {
+    flex-shrink: 0;
   }
 
   /* ── INNER CARDS ── */

package/src/types/core.ts

@@ -516,6 +516,9 @@ export interface ContextInfo {
   /** Source kubeconfig label (e.g. "kube-cluster-paris"). Set by the backend
    *  for contexts loaded through the isolated source registry. */
   source?: string
+  /** AWS profile extracted from the exec plugin's --profile arg or AWS_PROFILE
+   *  env var. Present only for EKS contexts that pin a profile. */
+  awsProfile?: string
 }
 
 // Namespace
@@ -628,6 +631,11 @@ export interface ResourceRef {
 
 // Computed relationships for a resource
 export interface Relationships {
+  reflection?: {
+    source?: ResourceRef
+    sourceResourceVersion?: string
+    mirrors?: ResourceRef[]
+  }
   owner?: ResourceRef
   deployment?: ResourceRef   // Grandparent Deployment (for Pods owned by ReplicaSets)
   managedBy?: ResourceRef[]  // Topmost meaningful manager(s): GitOps controller (ArgoCD Application / Flux Kustomization / Flux HelmRelease), Helm release, or the topmost K8s owner. Synthesized server-side; replaces client-side detectGitOpsOwner.
@@ -683,24 +691,34 @@ export type HPADiagnosisState =
   | 'stabilized'
   | 'unknown'
 
-export interface HPADiagnosis {
+export interface HPABounds {
+  min: number
+  max: number
+  current: number
+  desired: number
+  observedGeneration?: number
+  generation?: number
+}
+
+// The subset of an HPA diagnosis that HPADiagnosisSummary presents. Producers
+// that carry a richer or looser envelope (Radar's own HPADiagnosis, the
+// investigation evidence projection) extend this so the presentation rules —
+// state severity, state label, reason redundancy — cannot drift per surface.
+export interface HPADiagnosisView {
   state: HPADiagnosisState
   summary: string
+  bounds?: HPABounds
+  reasons?: HPAReasonSummary[]
+}
+
+export interface HPADiagnosis extends HPADiagnosisView {
   target: {
     apiVersion?: string
     kind?: string
     name?: string
   }
-  bounds: {
-    min: number
-    max: number
-    current: number
-    desired: number
-    observedGeneration?: number
-    generation?: number
-  }
+  bounds: HPABounds
   metrics?: HPAMetricSummary[]
-  reasons?: HPAReasonSummary[]
 }
 
 export interface HPAReasonSummary {
@@ -1238,7 +1256,7 @@ export interface MetricsDataPoint {
 export interface TrafficEndpoint {
   name: string
   namespace: string
-  kind: string // Pod, Service, External
+  kind: string // Pod, Service, External, Host, Unknown
   ip?: string
   labels?: Record<string, string>
   workload?: string
@@ -1279,6 +1297,15 @@ export interface TrafficFlow {
    *  status code for no single flow. */
   errorRate?: number
   verdict: string // forwarded, dropped, error
+  /** The network plugin's own account of which policies decided this flow
+   *  (Hubble reports it). Absent when the plugin said nothing. */
+  policyVerdict?: {
+    allowedBy?: { kind: string; namespace?: string; name: string }[]
+    deniedBy?: { kind: string; namespace?: string; name: string }[]
+    /** Denying references removed before delivery because the viewer may not
+     *  read policies of that kind there; the plugin still named a policy. */
+    withheld?: number
+  }
   lastSeen: string // ISO date string
 }