@skyhook-io/k8s-ui 1.12.0 → 1.13.3

package/src/components/topology/TopologyFilterSidebar.test.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { renderToString } from "react-dom/server";
+import { TopologyFilterSidebar } from "./TopologyFilterSidebar";
+
+describe("TopologyFilterSidebar Calico policy category", () => {
+  it.each([
+    "CalicoNetworkPolicy",
+    "CalicoGlobalNetworkPolicy",
+    "CalicoStagedNetworkPolicy",
+    "CalicoStagedGlobalNetworkPolicy",
+    "CalicoStagedKubernetesNetworkPolicy",
+  ])("places %s under Custom Resources with its kind color", (kind) => {
+    const html = renderToString(
+      <TopologyFilterSidebar
+        nodes={[
+          { id: "policy", kind, name: "policy", status: "healthy", data: {} },
+        ]}
+        visibleKinds={new Set([kind])}
+        onToggleKind={() => {}}
+        onShowAll={() => {}}
+        onHideAll={() => {}}
+      />,
+    );
+
+    expect(html).toContain("Custom Resources");
+    expect(html).not.toContain(">Networking<");
+    expect(html).toContain(
+      kind.includes("Staged") ? "text-amber-400" : "text-teal-400",
+    );
+  });
+});

package/src/components/topology/TopologyFilterSidebar.tsx

@@ -34,6 +34,11 @@ const RESOURCE_KINDS: {
   { kind: 'TCPRoute', label: 'TCPRoute', icon: getTopologyIcon('TCPRoute'), color: 'text-purple-300', category: 'networking' },
   { kind: 'TLSRoute', label: 'TLSRoute', icon: getTopologyIcon('TLSRoute'), color: 'text-purple-300', category: 'networking' },
   { kind: 'Service', label: 'Service', icon: getTopologyIcon('Service'), color: 'text-blue-400', category: 'networking' },
+  { kind: 'CalicoNetworkPolicy', label: 'Calico NetworkPolicy', icon: getTopologyIcon('CalicoNetworkPolicy'), color: 'text-teal-400', category: 'custom' },
+  { kind: 'CalicoGlobalNetworkPolicy', label: 'Calico GlobalNetworkPolicy', icon: getTopologyIcon('CalicoGlobalNetworkPolicy'), color: 'text-teal-400', category: 'custom' },
+  { kind: 'CalicoStagedNetworkPolicy', label: 'Calico StagedNetworkPolicy', icon: getTopologyIcon('CalicoStagedNetworkPolicy'), color: 'text-amber-400', category: 'custom' },
+  { kind: 'CalicoStagedGlobalNetworkPolicy', label: 'Calico StagedGlobalNetworkPolicy', icon: getTopologyIcon('CalicoStagedGlobalNetworkPolicy'), color: 'text-amber-400', category: 'custom' },
+  { kind: 'CalicoStagedKubernetesNetworkPolicy', label: 'Calico StagedKubernetesNetworkPolicy', icon: getTopologyIcon('CalicoStagedKubernetesNetworkPolicy'), color: 'text-amber-400', category: 'custom' },
 
   // Workloads
   { kind: 'Deployment', label: 'Deployment', icon: getTopologyIcon('Deployment'), color: 'text-emerald-400', category: 'workloads' },

package/src/components/topology/TopologyGraph.tsx

@@ -68,15 +68,15 @@ const EDGE_LEGEND: { label: string; color: string }[] = [
 // Memoized edge style cache to avoid creating new objects on every render
 const edgeStyleCache = new Map<string, React.CSSProperties>()
 
-function getEdgeStyle(type: string, isTrafficView: boolean, isTrafficEdge: boolean, animated: boolean): React.CSSProperties {
-  const cacheKey = `${type}-${isTrafficView}-${isTrafficEdge}-${animated}`
+function getEdgeStyle(type: string, isTrafficView: boolean, isTrafficEdge: boolean, animated: boolean, partial: boolean): React.CSSProperties {
+  const cacheKey = `${type}-${isTrafficView}-${isTrafficEdge}-${animated}-${partial}`
   let style = edgeStyleCache.get(cacheKey)
   if (!style) {
     const edgeColor = getEdgeColor(type, isTrafficView)
     style = {
       stroke: edgeColor,
       strokeWidth: isTrafficView ? 2 : 1.5,
-      strokeDasharray: isTrafficView && isTrafficEdge && animated ? '5 5' : undefined,
+      strokeDasharray: partial ? '6 3' : isTrafficView && isTrafficEdge && animated ? '5 5' : undefined,
     }
     edgeStyleCache.set(cacheKey, style)
   }
@@ -168,7 +168,7 @@ function buildEdges(
     // label in the key: two route edges between the same source/target/type but
     // with different outcomes (one verified, one unreachable) are DISTINCT routes -
     // collapsing them would drop the failing route from the diagram.
-    const edgeId = `${source}-${target}-${edge.type}${edge.reachOutcome ? `-${edge.reachOutcome}` : ''}${edge.label ? `-${edge.label}` : ''}`
+    const edgeId = `${source}-${target}-${edge.type}${edge.partial ? '-partial' : ''}${edge.reachOutcome ? `-${edge.reachOutcome}` : ''}${edge.label ? `-${edge.label}` : ''}`
     if (seenEdgeIds.has(edgeId)) continue
     seenEdgeIds.add(edgeId)
 
@@ -176,7 +176,7 @@ function buildEdges(
     const edgeColor = reach ? (REACH_COLORS[reach] || '#94a3b8') : getEdgeColor(edge.type, isTrafficView)
     const isTrafficEdge = edge.type === 'routes-to' || edge.type === 'exposes'
     // A reachability edge never animates (a dashed "blocked" must not look like flow).
-    const animated = enableAnimations && isTrafficView && isTrafficEdge && !reach
+    const animated = enableAnimations && isTrafficView && isTrafficEdge && !reach && !edge.partial
 
     edges.push({
       id: edgeId,
@@ -196,7 +196,7 @@ function buildEdges(
         width: 12,
         height: 12,
       },
-      style: reach ? reachEdgeStyle(reach) : getEdgeStyle(edge.type, isTrafficView, isTrafficEdge, animated),
+      style: reach ? reachEdgeStyle(reach) : getEdgeStyle(edge.type, isTrafficView, isTrafficEdge, animated, edge.partial === true),
     })
   }
 

package/src/components/topology/TopologySearch.tsx

@@ -51,6 +51,13 @@ function getKindColor(kind: string): string {
       return 'text-purple-300'
     case 'Service':
       return 'text-blue-400'
+    case 'CalicoNetworkPolicy':
+    case 'CalicoGlobalNetworkPolicy':
+      return 'text-teal-400'
+    case 'CalicoStagedNetworkPolicy':
+    case 'CalicoStagedGlobalNetworkPolicy':
+    case 'CalicoStagedKubernetesNetworkPolicy':
+      return 'text-amber-400'
     case 'Deployment':
     case 'Rollout':
       return 'text-emerald-400'

package/src/components/topology/layout.ts

@@ -865,6 +865,9 @@ const KIND_PRIORITY: Record<string, number> = {
   'Deployment': 1, 'Rollout': 1, 'StatefulSet': 2, 'DaemonSet': 3,
   'CronJob': 4, 'CronWorkflow': 4, 'Job': 5, 'Workflow': 5, 'Service': 6, 'Gateway': 7,
   'HTTPRoute': 6, 'GRPCRoute': 6, 'TCPRoute': 6, 'TLSRoute': 6, 'Ingress': 7,
+  'CalicoNetworkPolicy': 10, 'CalicoGlobalNetworkPolicy': 10,
+  'CalicoStagedNetworkPolicy': 10, 'CalicoStagedGlobalNetworkPolicy': 10,
+  'CalicoStagedKubernetesNetworkPolicy': 10,
   'ReplicaSet': 8, 'Pod': 9, 'PodGroup': 9,
   'ConfigMap': 10, 'Secret': 10, 'ServiceAccount': 10, 'SealedSecret': 10, 'ServiceMonitor': 10, 'PodMonitor': 10, 'WorkflowTemplate': 10, 'ClusterWorkflowTemplate': 10, 'PersistentVolumeClaim': 10, 'HorizontalPodAutoscaler': 10,
   'KnativeService': 1, 'KnativeConfiguration': 3, 'KnativeRevision': 4, 'KnativeRoute': 2,

package/src/components/trace/ReachabilityView.tsx

@@ -270,6 +270,7 @@ function ReachabilityBoard(props: BoardProps) {
         actions={
           <ReachActions
             {...props}
+            runVantage={trace.runVantage}
             inClusterRunnable={traceInClusterRunnable(trace)}
             inClusterTested={origins.some((o) => o.id === 'incluster' && o.mark !== 'untested')}
             supportsHTTPPath={(trace.routes ?? []).some((r) => {

package/src/components/trace/TracePanel.tsx

@@ -87,6 +87,7 @@ export interface InClusterCapability {
   allowed: boolean
   reason?: string
   cluster?: string
+  clusterKey?: string
   namespace: string
   /** Per-call ceiling on probe Pods. Routes past it never run - ordering is
    *  deterministic, so re-running starts from the same first maxProbes. */
@@ -384,7 +385,7 @@ function ProbeOptionsMenu({ probePath, onApplyProbePath }: { probePath?: string;
 // test" (proxy/laptop vantage) plus, once allowed, the secondary "Test inside the
 // cluster" (real pod-to-pod) - one grouped control instead of two split corners.
 // Uses the design-system button classes (.btn-brand / .btn-brand-muted).
-export function ReachActions({ onRunProbes, probeRequested, probed, onRunInCluster, inClusterRunning, inClusterAllowed, inClusterRunnable, inClusterTested, probePath, onApplyProbePath, supportsHTTPPath = true }: {
+export function ReachActions({ onRunProbes, probeRequested, probed, onRunInCluster, inClusterRunning, inClusterAllowed, inClusterRunnable, inClusterTested, probePath, onApplyProbePath, supportsHTTPPath = true, runVantage }: {
   onRunProbes?: () => void
   probeRequested?: boolean
   // probed/inClusterTested: each test has already produced a result, so its
@@ -403,6 +404,10 @@ export function ReachActions({ onRunProbes, probeRequested, probed, onRunInClust
   probePath?: string
   onApplyProbePath?: (p: string) => void
   supportsHTTPPath?: boolean
+  /** Where Radar itself runs. The primary test is sent by the Radar PROCESS, so
+   *  "from your machine" is only true when Radar is on one - a hosted or
+   *  in-cluster Radar dials from its own Pod. */
+  runVantage?: 'in-cluster' | 'local'
 }) {
   // The in-cluster test stays available whenever the cluster allows it - NEVER
   // gated on the verdict. Hiding it after it succeeds (when the verdict turns
@@ -437,7 +442,13 @@ export function ReachActions({ onRunProbes, probeRequested, probed, onRunInClust
       {/* Primary: the reachability test. The refresh icon signals it's
           re-runnable (it auto-ran on load), so re-running reads as a refresh. */}
       {onRunProbes && (
-        <Tooltip content="Tests reachability from your machine and through the API server. Covers EVERY path on this resource, not only the one selected above.">
+        <Tooltip
+          content={
+            runVantage === 'in-cluster'
+              ? 'Tests reachability from Radar’s own Pod and through the API server. Covers EVERY path on this resource, not only the one selected above.'
+              : 'Tests reachability from your machine and through the API server. Covers EVERY path on this resource, not only the one selected above.'
+          }
+        >
           <button
             type="button"
             onClick={onRunProbes}

package/src/components/trace/reachFixtures.ts

@@ -12,7 +12,7 @@ import type { Trace, PodStatus, ProbeResult } from './types'
  * so two disagreeing origins cannot both be retained. Faking it here would
  * imply a capability the model does not have.
  */
-export type DevState = 'mixed' | 'break' | 'front' | 'synth' | 'scale' | 'fanout' | 'none' | 'running' | 'stale' | 'rbac'
+export type DevState = 'mixed' | 'break' | 'front' | 'synth' | 'scale' | 'fanout' | 'none' | 'running' | 'stale' | 'rbac' | 'hosted'
 
 export const DEV_STATES: { id: DevState; label: string }[] = [
   { id: 'mixed', label: '1 · Mixed vantages' },
@@ -25,6 +25,7 @@ export const DEV_STATES: { id: DevState; label: string }[] = [
   { id: 'running', label: 'Probe running' },
   { id: 'stale', label: 'Stale + changed' },
   { id: 'rbac', label: 'Probe not permitted' },
+  { id: 'hosted', label: 'Radar runs in-cluster' },
 ]
 
 const NS = 'payments'
@@ -233,6 +234,30 @@ export function devTrace(state: DevState): Trace {
     }
   }
 
+  // Radar deployed as a Pod - the hosted and self-hosted-in-cluster shape. The
+  // only way to see the vantage rail as those users see it without running a
+  // cluster-side Radar: no workstation vantage exists there, and Radar's own
+  // process is a first-class origin rather than the throwaway Job.
+  if (state === 'hosted') {
+    return {
+      ...t,
+      runVantage: 'in-cluster',
+      headline: 'Reachable in-cluster on :80 — the front door is still unproven',
+      coverage: { tested: 3, passed: 3, failed: 0, skipped: 1 },
+      downstream: [
+        serviceHop(),
+        podsHop(PODS, [
+          ...okProbes.map((p) => ({ ...p, source: 'radar' as const })),
+          probe({ path: 'apiserver', target: 'checkout-api port 80', detail: 'HTTP 200 via proxy', latencyNs: 12_000_000 }),
+        ]),
+      ],
+      routes: [
+        { route: 'GET / · :80 → 8080', target: ':80 → 8080', outcome: 'verified', confidence: 'real', evidence: 'DNS 2 ms · TCP 1 ms · HTTP 200 · 11 ms' },
+      ],
+      notTested: [{ route: 'front door · primary-gateway', reason: 'no request has entered through the Gateway', reasonClass: 'coverage' }],
+    }
+  }
+
   if (state === 'synth') {
     return {
       ...t,

package/src/components/trace/reachGraphModel.test.ts

@@ -65,6 +65,26 @@ describe('buildGraph lanes', () => {
     }
   })
 
+  // The board must not offer a vantage the deployment cannot use: a Radar
+  // running as a Pod dials from that Pod, never from the operator's machine.
+  it('draws no workstation capsule when Radar runs in the cluster', () => {
+    const t = trace([pod('a', true, '10.0.0.1')], [p({ source: 'radar' })])
+    t.runVantage = 'in-cluster'
+    const os = originsFor(t)
+    const g = buildGraph({ trace: t, route: route(), origin: os.find((o) => o.id === 'radar-incluster')!, origins: os })
+    expect(g.nodes.find((n) => n.id === 'origin:local')).toBeUndefined()
+    expect(g.nodes.filter((n) => n.isOrigin).map((n) => n.id).sort()).toEqual(['origin:apiserver', 'origin:incluster', 'origin:radar-incluster'])
+  })
+
+  it('drops the two-mechanism control-lane note with it', () => {
+    const t = trace([pod('a', true, '10.0.0.1')], [p({ path: 'apiserver' })])
+    t.runVantage = 'in-cluster'
+    const os = originsFor(t)
+    const g = buildGraph({ trace: t, route: route(), origin: os.find((o) => o.id === 'apiserver')!, origins: os })
+    expect(g.laneControl!.help).not.toMatch(/your machine/)
+    expect(g.laneControl!.help).toMatch(/control plane/)
+  })
+
   it('the origin is drawn as a vantage capsule, never as a Kubernetes resource', () => {
     const t = trace([pod('a', true, '10.0.0.1')], [p({})])
     const g = buildGraph({ trace: t, route: route(), origin: pick(t, 'incluster') })

package/src/components/trace/reachGraphModel.ts

@@ -1425,10 +1425,17 @@ export function buildGraph({ trace, route, origin, origins, stale, running }: Bu
     const y1 = Math.max(...list.map((n) => n.y + n.h)) + LANE_PAD.bottom
     return { x: x0, y: y0, w: x1 - x0, h: y1 - y0, label, help, color, dashed }
   }
+  // The two-mechanism wording only holds while the workstation vantage is drawn.
+  // With Radar running as a Pod there is no dial from a machine outside, and
+  // contrasting it with the relay described a lane with one member as if it had
+  // two.
+  const laptopDrawn = nodes.some((n) => n.id === 'origin:local')
   const laneControl = boxFor(
     nodes.filter((n) => n.lane === 'control'),
     'NOT FROM INSIDE THE CLUSTER',
-    'Neither request originates inside the cluster’s dataplane, but they differ: a dial from your machine sends real traffic from outside - through a real entry it exercises the path from the entry inward (routing, NetworkPolicy, mesh included). A relayed request is carried by the Kubernetes control plane and bypasses the traffic path entirely.',
+    laptopDrawn
+      ? 'Neither request originates inside the cluster’s dataplane, but they differ: a dial from your machine sends real traffic from outside - through a real entry it exercises the path from the entry inward (routing, NetworkPolicy, mesh included). A relayed request is carried by the Kubernetes control plane and bypasses the traffic path entirely.'
+      : 'This request is carried by the Kubernetes control plane rather than sent along the traffic path: the API server relays it to the target, so routing, NetworkPolicy and the mesh are all bypassed.',
     'var(--color-info)',
     true,
   )

package/src/components/trace/reachOrigins.test.ts

@@ -218,6 +218,37 @@ describe('Radar-as-a-Pod is not the throwaway probe Job', () => {
     expect(radar?.unsupported).toBeFalsy()
   })
 
+  // The mirror rule. A Radar that runs as a Pod has no process on the operator's
+  // machine, so a workstation vantage there is not a test anyone can run - it is
+  // a control that would never do anything, standing where a real gap should be.
+  it('omits the workstation vantage entirely when Radar runs in the cluster', () => {
+    const t = traceWith([p({ vantage: 'in-cluster', path: 'data', source: 'radar', ok: true })])
+    t.runVantage = 'in-cluster'
+    const os = buildOrigins(t)
+    expect(os.find((o) => o.id === 'local')).toBeUndefined()
+    expect(os.map((o) => o.id)).toEqual(['caller', 'external', 'incluster', 'radar-incluster', 'apiserver'])
+  })
+
+  it('keeps the external gap declared there — it is what nothing can prove', () => {
+    const t = traceWith([p({ vantage: 'in-cluster', path: 'data', source: 'radar', ok: true })])
+    t.runVantage = 'in-cluster'
+    expect(buildOrigins(t).find((o) => o.id === 'external')?.unsupported).toBe(true)
+  })
+
+  // Hiding a vantage must never hide evidence. If a laptop-side result somehow
+  // arrives on an in-cluster trace, the row it belongs to has to stay.
+  it('keeps the workstation vantage when it actually produced a result', () => {
+    const t = traceWith([p({ vantage: 'local', path: 'data', ok: true })])
+    t.runVantage = 'in-cluster'
+    expect(buildOrigins(t).find((o) => o.id === 'local')).toBeDefined()
+  })
+
+  it('keeps it on a laptop trace that has not been probed yet', () => {
+    const t = traceWith([])
+    t.runVantage = 'local'
+    expect(buildOrigins(t).find((o) => o.id === 'local')).toBeDefined()
+  })
+
   it('describes Radar-in-cluster with Radar\'s own identity, not the Job\'s', () => {
     const t = traceWith([p({ vantage: 'in-cluster', path: 'data', source: 'radar', ok: true })])
     t.runVantage = 'in-cluster'

package/src/components/trace/reachOrigins.ts

@@ -357,7 +357,17 @@ export function buildOrigins(trace: Trace | undefined, ctx: OriginContext = {}):
   // same ground. Listing it as "never tested" would pad the coverage caveat with
   // a deployment detail, next to genuine holes like "as your application".
   const radarIsAbsent = radarProbes.length === 0 && trace?.runVantage !== 'in-cluster'
-  return ORIGIN_STRENGTH.filter((id) => !(id === 'radar-incluster' && radarIsAbsent)).map((id) => all[id])
+  // The mirror image, and the same reasoning. When Radar runs as a Pod - hosted,
+  // or self-hosted in-cluster - there is no Radar on the operator's machine to
+  // dial from, so this vantage is not one that can be run and then isn't. The
+  // browser being on a laptop is irrelevant: the request is sent by the Radar
+  // process. What a machine outside the cluster would see is still declared, by
+  // the external origin, which is a real gap and stays. Guarded on having no
+  // probes so a mislabelled result can never hide evidence that exists.
+  const laptopIsAbsent = localProbes.length === 0 && trace?.runVantage === 'in-cluster'
+  return ORIGIN_STRENGTH.filter(
+    (id) => !(id === 'radar-incluster' && radarIsAbsent) && !(id === 'local' && laptopIsAbsent),
+  ).map((id) => all[id])
 }
 
 /**

package/src/components/ui/Badge.tsx

@@ -102,6 +102,11 @@ const KIND: Record<string, string> = {
   PersistentVolumeClaim:   'bg-cyan-100 text-cyan-800 border-cyan-300 dark:bg-cyan-950/50 dark:text-cyan-400 dark:border-cyan-700/40',
   PodDisruptionBudget:     'bg-orange-100 text-orange-800 border-orange-300 dark:bg-orange-950/50 dark:text-orange-300 dark:border-orange-700/40',
   NetworkPolicy:                      'bg-indigo-100 text-indigo-800 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-300 dark:border-indigo-700/40',
+  CalicoNetworkPolicy:                'bg-teal-100 text-teal-800 border-teal-300 dark:bg-teal-950/50 dark:text-teal-300 dark:border-teal-700/40',
+  CalicoGlobalNetworkPolicy:          'bg-teal-100 text-teal-800 border-teal-300 dark:bg-teal-950/50 dark:text-teal-300 dark:border-teal-700/40',
+  CalicoStagedNetworkPolicy:          'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-300 dark:border-amber-700/40',
+  CalicoStagedGlobalNetworkPolicy:    'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-300 dark:border-amber-700/40',
+  CalicoStagedKubernetesNetworkPolicy: 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-300 dark:border-amber-700/40',
   CiliumNetworkPolicy:                'bg-indigo-100 text-indigo-800 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-300 dark:border-indigo-700/40',
   CiliumClusterwideNetworkPolicy:     'bg-indigo-100 text-indigo-800 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-300 dark:border-indigo-700/40',
   ClusterNetworkPolicy:               'bg-violet-100 text-violet-800 border-violet-300 dark:bg-violet-950/50 dark:text-violet-300 dark:border-violet-700/40',
@@ -263,6 +268,11 @@ export function getKindColorClass(kind: string): string {
     persistentvolumeclaims: 'PersistentVolumeClaim',
     poddisruptionbudgets: 'PodDisruptionBudget',
     networkpolicies: 'NetworkPolicy',
+    caliconetworkpolicies: 'CalicoNetworkPolicy',
+    calicoglobalnetworkpolicies: 'CalicoGlobalNetworkPolicy',
+    calicostagednetworkpolicies: 'CalicoStagedNetworkPolicy',
+    calicostagedglobalnetworkpolicies: 'CalicoStagedGlobalNetworkPolicy',
+    calicostagedkubernetesnetworkpolicies: 'CalicoStagedKubernetesNetworkPolicy',
     ciliumnetworkpolicies: 'CiliumNetworkPolicy',
     ciliumclusterwidenetworkpolicies: 'CiliumClusterwideNetworkPolicy',
     clusternetworkpolicies: 'ClusterNetworkPolicy',

package/src/components/ui/InClusterConsentDialog.tsx

@@ -13,6 +13,7 @@ export interface ConsentRequest {
 interface InClusterConsentDialogProps {
   open: boolean
   cluster?: string
+  clusterKey?: string
   namespace: string
   /** The requests this run will send, one per declared route. */
   requests?: ConsentRequest[]
@@ -85,7 +86,7 @@ function cluster(name?: string): string {
 // Confirms the mutating in-cluster reachability test before it spawns a Job/pod,
 // naming the cluster it lands in. Permission is enforced upstream (the button only
 // renders when the capability SSAR allows), so this is a safety confirm, not authz.
-export function InClusterConsentDialog({ open, cluster, namespace, requests, untestedCount, maxProbes, onClose, onConfirm }: InClusterConsentDialogProps) {
+export function InClusterConsentDialog({ open, cluster, clusterKey, namespace, requests, untestedCount, maxProbes, onClose, onConfirm }: InClusterConsentDialogProps) {
   const [dontAskAgain, setDontAskAgain] = useState(false)
 
   function handleClose() {
@@ -94,7 +95,7 @@ export function InClusterConsentDialog({ open, cluster, namespace, requests, unt
   }
 
   function handleConfirm() {
-    if (dontAskAgain && cluster) rememberInClusterConsent(cluster)
+    if (dontAskAgain && clusterKey) rememberInClusterConsent(clusterKey)
     setDontAskAgain(false)
     onConfirm()
   }
@@ -117,11 +118,11 @@ export function InClusterConsentDialog({ open, cluster, namespace, requests, unt
       cancelLabel="Cancel"
       variant="warning"
     >
-      {/* "Don't ask again" is stored per cluster. Without a cluster identity
+      {/* "Don't ask again" is stored per cluster source. Without a source identity
           there is nothing safe to key it on (one origin can front many
           clusters), so consent is never remembered - hide the checkbox rather
           than promise a persistence that doesn't stick. */}
-      {cluster ? (
+      {clusterKey ? (
         <label className="flex items-center gap-2 text-sm text-theme-text-secondary">
           <input
             type="checkbox"

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

@@ -0,0 +1,80 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { CronValue, TimeValue, cronHint } from './ScheduleValue'
+
+const render = (node: React.ReactElement) => renderToString(node)
+
+/**
+ * The expression stays on screen verbatim — it is the data operators copy and
+ * diff. What is under test is the annotation around it, and above all the cases
+ * where there must not be one.
+ */
+describe('CronValue', () => {
+  it('keeps the expression exactly as written', () => {
+    expect(render(<CronValue cron="0 2 * * *" />)).toContain('0 2 * * *')
+  })
+
+  // The tooltip renders into a portal on hover, so the markup carries the
+  // affordance rather than the wording. Without the affordance it is a secret.
+  it('marks a schedule it understands as worth hovering', () => {
+    const html = render(<CronValue cron="0 2 * * *" />)
+    expect(html).toContain('cursor-help')
+    expect(html).toContain('border-dotted')
+  })
+
+  it('reads the shapes these policies actually use', () => {
+    expect(cronHint('0 2 * * *')).toBe('Daily at 2:00')
+    expect(cronHint('0 */6 * * *')).toBe('Every 6 hours')
+    expect(cronHint('* * * * *')).toBe('Every minute')
+    expect(cronHint('30 3 * * 1-5')).toBe('Weekdays at 3:30')
+  })
+
+  it('offers no reading it cannot stand behind', () => {
+    expect(cronHint('0 2 1 * *')).toBeUndefined()
+    expect(cronHint('0 0 2 * * *', 'seconds')).toBeUndefined()
+    expect(cronHint('0 2 * * *', 'seconds')).toBeUndefined()
+    expect(cronHint('')).toBeUndefined()
+  })
+
+  // A tooltip that repeats the value teaches the reader that the underline is
+  // not worth hovering, which costs more than the one it would have explained.
+  it('stays a plain value when it cannot describe the schedule', () => {
+    const monthly = render(<CronValue cron="0 2 1 * *" />)
+    expect(monthly).toContain('0 2 1 * *')
+    expect(monthly).not.toContain('cursor-help')
+  })
+
+  // CloudNativePG counts seconds first. Read as five fields, `0 0 2 * * *`
+  // describes midnight rather than 2am — a backup window stated an hour wrong.
+  it('never reads a seconds-first expression as if it were five fields', () => {
+    const html = render(<CronValue cron="0 0 2 * * *" dialect="seconds" />)
+    expect(html).toContain('0 0 2 * * *')
+    expect(html).not.toContain('cursor-help')
+    expect(html).not.toContain('Daily at')
+  })
+
+  // The same guard from the other direction: even a five-field expression is
+  // left alone once the field is declared seconds-first, so a hand-written
+  // value cannot pick up the wrong dialect's meaning.
+  it('leaves a five-field expression alone in a seconds-first field', () => {
+    const html = render(<CronValue cron="0 2 * * *" dialect="seconds" />)
+    expect(html).not.toContain('Daily at 2:00')
+  })
+
+  it('renders nothing surprising for an empty schedule', () => {
+    expect(render(<CronValue cron="" />)).not.toContain('cursor-help')
+  })
+})
+
+describe('TimeValue', () => {
+  it('answers "is this recent" rather than printing a machine timestamp', () => {
+    const html = render(<TimeValue timestamp={new Date(Date.now() - 6 * 3600_000).toISOString()} />)
+    expect(html).toContain('cursor-help')
+    // The RFC3339 string is what the hover carries, not what the row shows.
+    expect(html).not.toMatch(/\dT\d\d:\d\d:\d\dZ/)
+  })
+
+  it('says so when the thing never happened', () => {
+    expect(render(<TimeValue timestamp={undefined} fallback="Never" />)).toContain('Never')
+  })
+})

package/src/components/ui/ScheduleValue.tsx

@@ -0,0 +1,85 @@
+import { Tooltip } from './Tooltip'
+import { cronToHuman, formatAge } from '../resources/resource-utils'
+
+/**
+ * Hover affordance used across the drawer: without it a tooltip is a secret.
+ * Matches the Created row in drawer-components and the QoS label in PodRenderer.
+ */
+const HOVERABLE = 'border-b border-dotted border-theme-text-tertiary cursor-help'
+
+/** Which cron dialect the operator that owns this field parses. */
+export type CronDialect =
+  /** Five fields, minute first. Kubernetes CronJob, Kyverno, Velero, Argo. */
+  | 'standard'
+  /** Six fields, seconds first. CloudNativePG. */
+  | 'seconds'
+
+interface CronValueProps {
+  cron: string
+  /**
+   * Defaults to the Kubernetes dialect. Pass 'seconds' for CloudNativePG: read
+   * as five fields, `0 0 2 * * *` describes midnight instead of 2am, and a
+   * backup window stated an hour wrong is worse than one left unexplained.
+   */
+  dialect?: CronDialect
+}
+
+/**
+ * A cron expression, verbatim, with its meaning on hover.
+ *
+ * The expression stays the value because it is the data — operators copy it,
+ * diff it against Git, and paste it into `kubectl`. The plain-English reading
+ * is the annotation, not the replacement.
+ */
+/**
+ * The plain-English reading to offer for an expression, or undefined when there
+ * is none worth offering.
+ *
+ * cronToHuman returns its input when it cannot describe an expression with
+ * confidence — a monthly schedule, an unusual step. A tooltip repeating the
+ * value teaches the reader that the underline is not worth hovering, which
+ * costs more than the one it would have explained.
+ *
+ * Separate from the component because the tooltip renders into a portal on
+ * hover, so the wording is not in the server-rendered markup and cannot be
+ * asserted there.
+ */
+export function cronHint(cron: string, dialect: CronDialect = 'standard'): string | undefined {
+  if (!cron || dialect !== 'standard') return undefined
+  const human = cronToHuman(cron)
+  return human === cron || human === '-' ? undefined : human
+}
+
+export function CronValue({ cron, dialect = 'standard' }: CronValueProps) {
+  const hint = cronHint(cron, dialect)
+  if (!hint) return <span className="font-mono">{cron}</span>
+
+  return (
+    <Tooltip content={hint} position="right">
+      <span className={`font-mono ${HOVERABLE}`}>{cron}</span>
+    </Tooltip>
+  )
+}
+
+interface TimeValueProps {
+  /** RFC3339 from the apiserver. */
+  timestamp?: string
+  /** Shown when there is no timestamp. "Never" reads better than a dash on a
+   *  field that records something having happened. */
+  fallback?: string
+}
+
+/**
+ * A moment in time as an age, with the exact local time on hover.
+ *
+ * "6h ago" answers the question actually being asked — is this recent? — and
+ * the raw RFC3339 answers it in UTC, which is nobody's wall clock.
+ */
+export function TimeValue({ timestamp, fallback = '-' }: TimeValueProps) {
+  if (!timestamp) return <>{fallback}</>
+  return (
+    <Tooltip content={new Date(timestamp).toLocaleString()} position="right">
+      <span className={HOVERABLE}>{formatAge(timestamp)}</span>
+    </Tooltip>
+  )
+}