@skyhook-io/k8s-ui 1.11.0 → 1.13.0

package/src/components/resources/renderers/CNPGObjectStoreRenderer.tsx

@@ -0,0 +1,235 @@
+import { Archive, Clock, HardDrive } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { HEALTH_BADGE_COLORS } from '../../../utils/badge-colors'
+import { RecoveryTime } from './CNPGShared'
+import {
+  getCNPGObjectStoreProvider,
+  getCNPGObjectStoreCredentialSecret,
+  getCNPGObjectStoreRecoveryWindows,
+  getCNPGObjectStoreDestination,
+  getCNPGObjectStoreRetention,
+  type CNPGObjectStoreRecoveryWindow,
+} from '../resource-utils-cnpg'
+
+/**
+ * ObjectStore (barmancloud.cnpg.io/v1) — where a plugin-backed CNPG Cluster's
+ * backups actually live.
+ *
+ * The Cluster page already tells operators the recovery window is tracked here,
+ * because a plugin-backed Cluster stops publishing recovery-point fields of its
+ * own. Until this renderer existed that sentence pointed at a page showing raw
+ * fields, so the restorable range was effectively unreachable in the product.
+ */
+
+export function CNPGObjectStoreRenderer({
+  data,
+  clusterForServer,
+  archivingFailing,
+  onNavigate,
+}: {
+  data: any
+  /** Server key -> the Cluster archiving under it, so a key is only linked when
+   *  something is behind it. See RecoveryWindowRow. */
+  clusterForServer?: Map<string, string>
+  /** Servers whose Cluster reports WAL archiving stopped. The window keeps its
+   *  last successful backup and reads as recoverable, while the recovery point
+   *  has stopped advancing — a claim this status alone cannot correct. */
+  archivingFailing?: Set<string>
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}) {
+  const windows = getCNPGObjectStoreRecoveryWindows(data)
+  const provider = getCNPGObjectStoreProvider(data)
+  const retention = getCNPGObjectStoreRetention(data)
+  const credentialSecret = getCNPGObjectStoreCredentialSecret(data)
+  const cfg = data?.spec?.configuration ?? {}
+  const failing = windows.filter((w) => w.failingSinceLastSuccess)
+
+  return (
+    <>
+      {failing.length > 0 && (
+        <AlertBanner
+          variant="error"
+          title={`Backups failing for ${failing.length === 1 ? failing[0].server : `${failing.length} servers`}`}
+          message="The most recent backup attempt failed after the last success, so the recoverable range has stopped moving forward."
+        />
+      )}
+
+      <Section title="Recovery Window" icon={Clock} defaultExpanded>
+        {windows.length === 0 ? (
+          // Configured but empty is NOT the same as healthy. Saying nothing here
+          // would read as "backups are fine" on a store holding nothing.
+          <div className="text-sm text-theme-text-secondary">
+            No server has reported a backup yet, so there is nothing to restore from this store.
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {windows.map((w) => (
+              <RecoveryWindowRow
+                archivingFailing={archivingFailing}
+                clusterForServer={clusterForServer}
+                key={w.server}
+                window={w}
+                retention={retention}
+                namespace={data?.metadata?.namespace ?? ''}
+                onNavigate={onNavigate}
+              />
+            ))}
+          </div>
+        )}
+      </Section>
+
+      <Section title="Destination" icon={Archive} defaultExpanded>
+        <PropertyList>
+          <Property label="Path" value={getCNPGObjectStoreDestination(data)} />
+          {cfg.endpointURL && <Property label="Endpoint" value={cfg.endpointURL} />}
+          {/* Only when set — a custom CA is the difference between "cannot reach
+              the bucket" and "does not trust it", and it is otherwise invisible. */}
+          {(cfg.endpointCA?.name || cfg.endpointCA?.key) && (
+            <Property
+              label="Endpoint CA"
+              value={cfg.endpointCA?.name ? `${cfg.endpointCA.name}${cfg.endpointCA.key ? ` · ${cfg.endpointCA.key}` : ''}` : cfg.endpointCA.key}
+            />
+          )}
+          {provider && <Property label="Provider" value={provider} />}
+          {credentialSecret && (
+            <Property
+              label="Credentials"
+              value={
+                <ResourceLink
+                  name={credentialSecret}
+                  kind="secrets"
+                  namespace={data?.metadata?.namespace ?? ''}
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+          )}
+          {cfg.serverName && <Property label="Server Name" value={cfg.serverName} />}
+          {retention && <Property label="Retention" value={retention} />}
+        </PropertyList>
+      </Section>
+
+      {(cfg.wal || cfg.data) && (
+        <Section title="Backup Settings" icon={HardDrive} defaultExpanded={false}>
+          <PropertyList>
+            {cfg.wal?.compression && <Property label="WAL Compression" value={cfg.wal.compression} />}
+            {cfg.wal?.encryption && <Property label="WAL Encryption" value={cfg.wal.encryption} />}
+            {cfg.wal?.maxParallel != null && (
+              <Property label="WAL Max Parallel" value={String(cfg.wal.maxParallel)} />
+            )}
+            {cfg.data?.compression && <Property label="Data Compression" value={cfg.data.compression} />}
+            {cfg.data?.encryption && <Property label="Data Encryption" value={cfg.data.encryption} />}
+            {cfg.data?.jobs != null && <Property label="Data Jobs" value={String(cfg.data.jobs)} />}
+            {cfg.data?.immediateCheckpoint != null && (
+              <Property label="Immediate Checkpoint" value={cfg.data.immediateCheckpoint ? 'Yes' : 'No'} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+    </>
+  )
+}
+
+/**
+ * One server's restorable range. The two timestamps are the answer to "how far
+ * back can I go, and how current is it" — the question the whole plugin path
+ * moved out of the Cluster.
+ */
+function RecoveryWindowRow({
+  window: w,
+  retention,
+  namespace,
+  clusterForServer,
+  archivingFailing,
+  onNavigate,
+}: {
+  window: CNPGObjectStoreRecoveryWindow
+  retention?: string
+  namespace: string
+  /** Server key -> the Cluster archiving under it. The key defaults to the
+   *  cluster's name but the plugin's `serverName` parameter overrides it, so the
+   *  two are not interchangeable and the mapping has to come from the plugin
+   *  parameters rather than from string equality.
+   *
+   *  Absent means unresolved, not "assume it resolves": the lookup may still be
+   *  loading, it may have failed, or the host may not be able to ask. All three
+   *  render the key as text, which is the part that is always true. */
+  clusterForServer?: Map<string, string>
+  /** Servers whose Cluster reports WAL archiving stopped. */
+  archivingFailing?: Set<string>
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}) {
+  const stalled = archivingFailing?.has(w.server)
+  const tone = w.failingSinceLastSuccess || stalled
+    ? 'degraded'
+    : w.lastSuccessfulBackupTime
+      ? 'healthy'
+      : 'unknown'
+  return (
+    <div className="card-inner">
+      <div className="flex items-center gap-2 mb-1">
+        {/* The server key is usually the Cluster this window belongs to, and
+            naming it without a route leaves the reader knowing a cluster is in
+            trouble and unable to open it. Only usually, though — see
+            `clusterNames`. */}
+        <span className="text-sm font-medium text-theme-text-primary">
+          {clusterForServer?.get(w.server) ? (
+            <ResourceLink
+              name={clusterForServer.get(w.server) as string}
+              label={w.server}
+              kind="clusters"
+              namespace={namespace}
+              group="postgresql.cnpg.io"
+              onNavigate={onNavigate}
+            />
+          ) : (
+            w.server
+          )}
+        </span>
+        <span className={clsx('badge', HEALTH_BADGE_COLORS[tone as keyof typeof HEALTH_BADGE_COLORS])}>
+          {w.failingSinceLastSuccess
+            ? 'Backups failing'
+            : stalled
+              ? 'Not advancing'
+              : w.lastSuccessfulBackupTime
+                ? 'Recoverable'
+                : 'No backups yet'}
+        </span>
+      </div>
+      {stalled && !w.failingSinceLastSuccess && (
+        <div className="text-xs text-warning-text mb-1">
+          {/* The timestamps below are real and still describe the last backup that
+              worked. What they no longer describe is a window still growing, and
+              "Recoverable" alone invites exactly that reading on the screen
+              someone checks before a restore. */}
+          WAL archiving has stopped on the cluster behind this server, so the times below are the
+          last ones recorded rather than a window still advancing.
+        </div>
+      )}
+      <PropertyList>
+        {w.firstRecoverabilityPoint && (
+          <Property
+            label="Restorable From"
+            value={<RecoveryTime at={w.firstRecoverabilityPoint} />}
+          />
+        )}
+        {w.lastSuccessfulBackupTime ? (
+          <Property label="Last Successful Backup" value={<RecoveryTime at={w.lastSuccessfulBackupTime} />} />
+        ) : (
+          <Property label="Last Successful Backup" value="never" />
+        )}
+        {w.lastFailedBackupTime && (
+          <Property label="Last Failed Attempt" value={<RecoveryTime at={w.lastFailedBackupTime} />} />
+        )}
+        {retention && <Property label="Retention" value={retention} />}
+      </PropertyList>
+      {w.failingSinceLastSuccess && (
+        <div className="mt-2 pt-2 border-t border-theme-border text-xs text-theme-text-secondary">
+          Every backup since the last success has failed. The oldest restorable point will still age
+          out under the retention policy, so the window is shrinking from both ends.
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/resources/renderers/CNPGPoolerRenderer.tsx

@@ -8,6 +8,7 @@ import {
   getCNPGPoolerParameters,
   getCNPGPoolerAuthQuery,
   getCNPGPoolerAuthQuerySecret,
+  isCNPGPoolerPaused,
 } from '../resource-utils-cnpg'
 
 interface CNPGPoolerRendererProps {
@@ -23,6 +24,7 @@ export function CNPGPoolerRenderer({ data, onNavigate }: CNPGPoolerRendererProps
   // CR never establishes.
   const scheduled = data.status?.instances ?? 0
   const isDegraded = desired > 0 && scheduled < desired
+  const isPaused = isCNPGPoolerPaused(data)
   const clusterName = getCNPGPoolerCluster(data)
   const parameters = getCNPGPoolerParameters(data)
   const authQuery = getCNPGPoolerAuthQuery(data)
@@ -39,12 +41,21 @@ export function CNPGPoolerRenderer({ data, onNavigate }: CNPGPoolerRendererProps
         />
       )}
 
+      {isPaused && (
+        <AlertBanner
+          variant="warning"
+          title="Pooler Paused"
+          message="PgBouncer is paused, so client connections are held rather than served. The pods stay scheduled and Ready throughout, so nothing else about this Pooler will look wrong."
+        />
+      )}
+
       {/* Pooler Configuration */}
       <Section title="Pooler Configuration" icon={Users} defaultExpanded>
         <PropertyList>
           <Property label="Type" value={getCNPGPoolerType(data)} />
           <Property label="Pool Mode" value={getCNPGPoolerMode(data)} />
           <Property label="Instances Scheduled" value={getCNPGPoolerInstances(data)} />
+          {isPaused && <Property label="PgBouncer" value="Paused" />}
         </PropertyList>
       </Section>
 

package/src/components/resources/renderers/CNPGScheduledBackupRenderer.tsx

@@ -1,5 +1,6 @@
 import { Clock, Database } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { CronValue } from '../../ui/ScheduleValue'
 import {
   getCNPGScheduledBackupCluster,
   getCNPGScheduleCron,
@@ -8,7 +9,9 @@ import {
   getCNPGScheduledBackupNextSchedule,
   getCNPGScheduledBackupIsSuspended,
   getCNPGScheduledBackupIsImmediate,
+  getCNPGBackupPlugin,
   getCNPGScheduledBackupOwnerRef,
+  CNPG_BARMAN_OBJECTSTORE_GROUP,
 } from '../resource-utils-cnpg'
 
 interface CNPGScheduledBackupRendererProps {
@@ -19,6 +22,7 @@ interface CNPGScheduledBackupRendererProps {
 export function CNPGScheduledBackupRenderer({ data, onNavigate }: CNPGScheduledBackupRendererProps) {
   const isSuspended = getCNPGScheduledBackupIsSuspended(data)
   const clusterName = getCNPGScheduledBackupCluster(data)
+  const schedulePlugin = getCNPGBackupPlugin(data)
 
   return (
     <>
@@ -34,7 +38,7 @@ export function CNPGScheduledBackupRenderer({ data, onNavigate }: CNPGScheduledB
       {/* Schedule */}
       <Section title="Schedule" icon={Clock} defaultExpanded>
         <PropertyList>
-          <Property label="Cron Expression" value={getCNPGScheduleCron(data)} />
+          <Property label="Cron Expression" value={<CronValue cron={getCNPGScheduleCron(data)} dialect="seconds" />} />
           <Property label="Last Schedule" value={getCNPGScheduledBackupLastSchedule(data)} />
           <Property label="Next Schedule" value={getCNPGScheduledBackupNextSchedule(data)} />
           <Property label="Suspended" value={isSuspended ? 'Yes' : 'No'} />
@@ -60,6 +64,24 @@ export function CNPGScheduledBackupRenderer({ data, onNavigate }: CNPGScheduledB
             return clusterName
           })()} />
           <Property label="Method" value={getCNPGScheduledBackupMethod(data)} />
+          {/* Under the plugin method the destination lives on an ObjectStore in
+              another API group, so naming it is the only route from here to
+              where these backups will actually land. */}
+          {schedulePlugin && <Property label="Plugin" value={schedulePlugin.name} />}
+          {schedulePlugin?.parameters?.barmanObjectName && (
+            <Property
+              label="Object Store"
+              value={
+                <ResourceLink
+                  name={schedulePlugin.parameters.barmanObjectName}
+                  kind="objectstores"
+                  group={CNPG_BARMAN_OBJECTSTORE_GROUP}
+                  namespace={data.metadata?.namespace || ''}
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+          )}
           <Property label="Owner Reference" value={getCNPGScheduledBackupOwnerRef(data)} />
         </PropertyList>
       </Section>

package/src/components/resources/renderers/CNPGShared.tsx

@@ -0,0 +1,27 @@
+import { formatAge } from '../resource-utils'
+
+/**
+ * A recovery point, stated absolutely with the interval beside it.
+ *
+ * "1d ago" is the wrong unit for this question on its own. An RPO conversation
+ * needs a timestamp — and "Last Successful Backup 1d ago" next to "Last Failed
+ * Attempt 1d ago" is the same string for events a week apart in the failure
+ * history, which is precisely when you are reading this screen. Same treatment
+ * the certificate rows already use.
+ *
+ * Shared by the Cluster and ObjectStore pages: the same recovery point is
+ * reachable from both depending on whether backups run through the plugin, and
+ * the two must not describe it differently.
+ */
+export function RecoveryTime({ at }: { at: string }) {
+  const d = new Date(at)
+  if (Number.isNaN(d.getTime())) return <>{at}</>
+  return (
+    <span className="inline-flex items-baseline gap-2 min-w-0">
+      <span>{d.toISOString().replace('T', ' ').replace(/\.\d+Z$/, ' UTC')}</span>
+      {/* One interpolation, so the age and its unit stay a single text node
+          rather than being split by a renderer comment marker. */}
+      <span className="text-xs text-theme-text-tertiary shrink-0">{`${formatAge(at)} ago`}</span>
+    </span>
+  )
+}

package/src/components/resources/renderers/CalicoHostEndpointRenderer.tsx

@@ -0,0 +1,71 @@
+import { Network } from 'lucide-react'
+import { Badge } from '../../ui/Badge'
+import { ResourceLink, Section } from '../../ui/drawer-components'
+
+interface CalicoHostEndpointRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function CalicoHostEndpointRenderer({ data, onNavigate }: CalicoHostEndpointRendererProps) {
+  const spec = data?.spec ?? {}
+  const expectedIPs: string[] = spec.expectedIPs ?? []
+  const profiles: string[] = spec.profiles ?? []
+  const ports: Array<{ name?: string; port?: number; protocol?: string }> = spec.ports ?? []
+
+  return (
+    <Section title="Host Endpoint" icon={Network}>
+      <div className="card-inner text-sm space-y-3">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <div className="text-xs text-theme-text-tertiary mb-0.5">Node</div>
+            <div className="font-medium text-theme-text-primary break-all">
+              {spec.node ? <ResourceLink name={spec.node} kind="nodes" namespace="" onNavigate={onNavigate} /> : 'Not specified'}
+            </div>
+          </div>
+          {spec.interfaceName && (
+            <div className="shrink-0 text-right">
+              <div className="text-xs text-theme-text-tertiary mb-0.5">Interface Name</div>
+              <Badge tone="structural" size="sm" className="font-mono">{spec.interfaceName}</Badge>
+            </div>
+          )}
+        </div>
+
+        {expectedIPs.length > 0 && (
+          <div className="border-t border-theme-border-subtle pt-3">
+            <div className="text-xs text-theme-text-tertiary mb-1.5">Expected IPs</div>
+            <div className="flex flex-wrap gap-1">
+              {expectedIPs.map((ip) => (
+                <Badge key={ip} tone="structural" size="sm" className="font-mono">{ip}</Badge>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {profiles.length > 0 && (
+          <div className="border-t border-theme-border-subtle pt-3">
+            <div className="text-xs text-theme-text-tertiary mb-1.5">Profiles</div>
+            <div className="flex flex-wrap gap-1">
+              {profiles.map((profile) => (
+                <Badge key={profile} tone="structural" size="sm">{profile}</Badge>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {ports.length > 0 && (
+          <div className="border-t border-theme-border-subtle pt-3">
+            <div className="text-xs text-theme-text-tertiary mb-1.5">Named Ports</div>
+            <div className="flex flex-wrap gap-1">
+              {ports.map((port, index) => (
+                <Badge key={`${port.name}-${port.protocol}-${port.port}-${index}`} tone="structural" size="sm" className="font-mono">
+                  {`${port.name ? `${port.name}: ` : ''}${port.protocol}/${port.port}`}
+                </Badge>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </Section>
+  )
+}

package/src/components/resources/renderers/CalicoIPPoolRenderer.tsx

@@ -0,0 +1,32 @@
+import { Network } from 'lucide-react'
+import { Property, PropertyList, Section } from '../../ui/drawer-components'
+import {
+  getCalicoIPPoolAllowedUses,
+  getCalicoIPPoolBlockSize,
+} from '../resource-utils-calico'
+
+interface CalicoIPPoolRendererProps {
+  data: any
+}
+
+export function CalicoIPPoolRenderer({ data }: CalicoIPPoolRendererProps) {
+  const spec = data?.spec ?? {}
+
+  return (
+    <Section title="IP Pool" icon={Network}>
+      <PropertyList>
+        <Property label="Allowed Uses" value={getCalicoIPPoolAllowedUses(data)} />
+        <Property label="Assignment Mode" value={spec.assignmentMode ?? 'Automatic'} />
+        <Property label="Block Size" value={getCalicoIPPoolBlockSize(data)} />
+        <Property label="CIDR" value={spec.cidr} />
+        <Property label="IP-in-IP Mode" value={spec.ipipMode ?? 'Never'} />
+        <Property label="VXLAN Mode" value={spec.vxlanMode ?? 'Never'} />
+        <Property label="NAT Outgoing" value={spec.natOutgoing ? 'Yes' : 'No'} />
+        <Property label="Disabled" value={spec.disabled ? 'Yes' : 'No'} />
+        <Property label="BGP Export Disabled" value={spec.disableBGPExport ? 'Yes' : 'No'} />
+        <Property label="Node Selector" value={spec.nodeSelector ?? 'all()'} />
+        <Property label="Namespace Selector" value={spec.namespaceSelector} />
+      </PropertyList>
+    </Section>
+  )
+}

package/src/components/resources/renderers/CalicoNetworkPolicyDiagram.test.tsx

@@ -0,0 +1,205 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { CalicoNetworkPolicyDiagram } from './CalicoNetworkPolicyDiagram'
+
+describe('CalicoNetworkPolicyDiagram', () => {
+  it('shows ordered actions and Calico match fields in both directions', () => {
+    const html = renderToString(
+      <CalicoNetworkPolicyDiagram
+        spec={{
+          selector: "app == 'api'",
+          namespaceSelector: "project == 'prod'",
+          serviceAccountSelector: "role == 'api'",
+          types: ['Ingress', 'Egress'],
+          ingress: [
+            {
+              action: 'Allow',
+              protocol: 'TCP',
+              source: {
+                selector: "role == 'frontend'",
+                nets: ['10.0.0.0/8'],
+                serviceAccounts: { names: ['frontend'] },
+              },
+              destination: { ports: [80] },
+            },
+            { action: 'Deny', source: { notSelector: "app == 'debug'" } },
+          ],
+          egress: [
+            {
+              action: 'Log',
+              protocol: 'UDP',
+              source: { serviceAccounts: { selector: "role == 'api'" } },
+              destination: {
+                selector: "app == 'db'",
+                nets: ['192.168.0.0/16'],
+                ports: [{ port: 5432, endPort: 5433 }],
+              },
+            },
+            { action: 'Pass', destination: { notNets: ['0.0.0.0/0'] } },
+          ],
+        }}
+      />,
+    )
+
+    for (const value of [
+      'app == &#x27;api&#x27;',
+      'role == &#x27;api&#x27;',
+      'Ingress',
+      'Egress',
+      'Deny',
+      'Log',
+      'Pass',
+      'TCP',
+      'UDP',
+      'role == &#x27;frontend&#x27;',
+      '10.0.0.0/8',
+      'frontend',
+      'TCP/80',
+      'app == &#x27;db&#x27;',
+      '192.168.0.0/16',
+      'UDP/5432-5433',
+      'Not Nets',
+      '0.0.0.0/0',
+    ]) {
+      expect(html).toContain(value)
+    }
+
+    expect(html).not.toContain('Policy target')
+    expect(html).not.toContain('Source')
+    expect(html).not.toContain('Destination')
+    expect(html).not.toContain('Rule 1')
+    expect(html).toContain('Allow')
+    expect(html).not.toMatch(/badge-sm[^>]*>TCP<\/span>/)
+    expect(html).not.toMatch(/badge-sm[^>]*>UDP<\/span>/)
+    expect(html).toContain('text-warning-text')
+    expect(html).toContain('line-through')
+  })
+
+  it('keeps port constraints readable and distinguishes source exclusions', () => {
+    const html = renderToString(
+      <CalicoNetworkPolicyDiagram
+        spec={{
+          types: ['Egress'],
+          egress: [
+            {
+              protocol: 'UDP',
+              source: {
+                ports: [8080],
+                notPorts: [{ protocol: 'UDP', port: 5353 }],
+              },
+              destination: {
+                ports: [
+                  { protocol: 'TCP', port: 8080 },
+                  { protocol: 'TCP', port: 8443 },
+                ],
+                notPorts: [443],
+              },
+            },
+          ],
+        }}
+      />,
+    )
+
+    for (const value of [
+      'src:UDP/8080',
+      'src:!UDP/5353',
+      'TCP/8080',
+      'TCP/8443',
+      '!UDP/443',
+    ]) {
+      expect(html).toContain(value)
+    }
+    expect(html).not.toContain('dst:')
+    expect(html).not.toContain('max-w-14')
+    expect(html).not.toContain('truncate font-mono text-[8px]')
+    expect(html).not.toMatch(/badge-sm[^>]*>UDP<\/span>/)
+  })
+
+  it('renders protocol-only rules as wildcard arrow labels', () => {
+    const html = renderToString(
+      <CalicoNetworkPolicyDiagram
+        spec={{
+          types: ['Ingress'],
+          ingress: [
+            {
+              action: 'Deny',
+              protocol: 'TCP',
+              notProtocol: 'UDP',
+              source: { selector: "app == 'client'" },
+            },
+          ],
+        }}
+      />,
+    )
+
+    expect(html).toContain('TCP/*')
+    expect(html).not.toMatch(/badge-sm[^>]*>TCP<\/span>/)
+    expect(html).toContain('not')
+    expect(html).toContain('UDP')
+  })
+
+  it('uses native peer colors with stable match priority', () => {
+    const renderDestination = (destination: any) =>
+      renderToString(
+        <CalicoNetworkPolicyDiagram
+          spec={{
+            selector: "app == 'target'",
+            types: ['Egress'],
+            egress: [{ destination }],
+          }}
+        />,
+      )
+
+    const combined = renderDestination({
+      selector: "app == 'workload'",
+      namespaceSelector: "team == 'prod'",
+      nets: ['10.0.0.0/8'],
+    })
+    const namespace = renderDestination({
+      namespaceSelector: "team == 'prod'",
+    })
+    const network = renderDestination({ nets: ['10.0.0.0/8'] })
+    const serviceAccount = renderDestination({
+      serviceAccountSelector: "role == 'api'",
+    })
+    const unknown = renderDestination({ unsupportedMatch: 'value' })
+
+    expect(combined).toContain('border-emerald-500/30 bg-emerald-500/8')
+    expect(combined).not.toContain('border-sky-500/30 bg-sky-500/8')
+    expect(combined).not.toContain('border-amber-500/30 bg-amber-500/8')
+    expect(namespace).toContain('border-sky-500/30 bg-sky-500/8')
+    expect(network).toContain('border-amber-500/30 bg-amber-500/8')
+    expect(serviceAccount).toContain('border-emerald-500/30 bg-emerald-500/8')
+    expect(unknown).toContain('border-theme-border bg-theme-elevated/50')
+    expect(combined).toContain('border-indigo-500/30 bg-indigo-500/8')
+  })
+
+  it('does not imply deny-all when a policy has no explicit rules', () => {
+    const html = renderToString(
+      <CalicoNetworkPolicyDiagram spec={{ types: ['Ingress'], ingress: [] }} />,
+    )
+
+    expect(html).toContain('No explicit')
+    expect(html).toContain('ingress')
+    expect(html).not.toContain('Deny all')
+  })
+
+  it('renders staged rules as non-enforced dashed paths', () => {
+    const html = renderToString(
+      <CalicoNetworkPolicyDiagram
+        staged
+        spec={{
+          selector: "app == 'api'",
+          types: ['Ingress'],
+          ingress: [{ action: 'Allow', source: {} }],
+        }}
+      />,
+    )
+
+    expect(html).toContain('Staged preview')
+    expect(html).toContain('not enforced')
+    expect(html).toContain('stroke-dasharray="4 3"')
+    expect(html).toContain('Allow')
+    expect(html).not.toContain('Rule 1')
+  })
+})