@skyhook-io/k8s-ui 1.5.9 → 1.5.11

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

@@ -190,7 +190,7 @@ function FlowRow({
   const isIngress = direction === 'ingress'
 
   const sourceNodes = (
-    <div className="flex-1 min-w-0 space-y-1">
+    <div className="min-w-0 max-w-full shrink space-y-1">
       {sources.map((peer, i) => (
         <div key={i}>
           {i > 0 && (
@@ -199,13 +199,13 @@ function FlowRow({
           <Tooltip content={peer.sublabel ? `${peer.label}\n${peer.sublabel}` : peer.label} position="top">
             <div
               className={clsx(
-                'rounded-md border px-2 py-1.5',
+                'rounded-md border px-2 py-1.5 min-w-0 overflow-hidden',
                 PEER_STYLES[peer.type],
               )}
             >
-              <div className="flex items-center gap-1.5">
+              <div className="flex items-center gap-1.5 min-w-0">
                 <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', PEER_DOT[peer.type])} />
-                <span className={clsx('text-[11px] font-medium truncate', denied && 'line-through text-red-400')}>
+                <span className={clsx('text-[11px] font-medium truncate min-w-0', denied && 'line-through text-red-400')}>
                   {peer.label}
                 </span>
               </div>
@@ -220,14 +220,16 @@ function FlowRow({
   )
 
   const targetNode = (
-    <Tooltip content={target} position="top">
-      <div className="rounded-md border border-indigo-500/30 bg-indigo-500/8 px-2 py-1.5 flex-1 min-w-0">
-        <div className="flex items-center gap-1.5">
-          <span className="w-1.5 h-1.5 rounded-full shrink-0 bg-indigo-500" />
-          <span className="text-[11px] font-medium truncate">{target}</span>
+    <div className="min-w-0 max-w-full shrink-[1000]">
+      <Tooltip content={target} position="top">
+        <div className="rounded-md border border-indigo-500/30 bg-indigo-500/8 px-2 py-1.5 min-w-0 max-w-full overflow-hidden">
+          <div className="flex items-center gap-1.5 min-w-0">
+            <span className="w-1.5 h-1.5 rounded-full shrink-0 bg-indigo-500" />
+            <span className="text-[11px] font-medium truncate min-w-0">{target}</span>
+          </div>
         </div>
-      </div>
-    </Tooltip>
+      </Tooltip>
+    </div>
   )
 
   const arrow = (

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

@@ -1,6 +1,7 @@
 import { ShoppingCart, AlertTriangle, Globe, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 function getOrderStateBadge(state: string): { color: string; text: string } {
   switch (state?.toLowerCase()) {
@@ -17,7 +18,7 @@ function getOrderStateBadge(state: string): { color: string; text: string } {
     case 'errored':
       return { text: 'Errored', color: 'bg-red-500/20 text-red-400' }
     default:
-      return { text: state || 'Unknown', color: 'bg-gray-500/20 text-gray-400' }
+      return { text: state || 'Unknown', color: BADGE_INACTIVE }
   }
 }
 

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

@@ -2,7 +2,7 @@ import { useState, type ReactNode, type JSX } from 'react'
 import { Server, HardDrive, Terminal as TerminalIcon, FileText, Activity, CirclePlay, FolderOpen, List, Eye, EyeOff } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, CopyHandler, AlertBanner, ResourceLink } from '../../ui/drawer-components'
-import { formatResources, formatDuration, getPodProblems, SEVERITY_DOT_COLOR } from '../resource-utils'
+import { formatResources, formatDuration, getPodProblems, getPodPhaseDisplay, healthColors, SEVERITY_DOT_COLOR } from '../resource-utils'
 import { getResourceStatusColor, SEVERITY_BADGE_BORDERED } from '../../../utils/badge-colors'
 import type { ResolvedEnvFrom } from '../../../types'
 import { Tooltip } from '../../ui/Tooltip'
@@ -333,7 +333,28 @@ export function PodRenderer({
       {/* Status section */}
       <Section title="Status" icon={Server}>
         <PropertyList>
-          <Property label="Phase" value={data.status?.phase} />
+          {(() => {
+            const phaseDisplay = getPodPhaseDisplay(data)
+            const node = (
+              <span className={clsx(healthColors[phaseDisplay.level])}>
+                {phaseDisplay.text}
+              </span>
+            )
+            return (
+              <Property
+                label="Phase"
+                value={
+                  phaseDisplay.hint ? (
+                    <Tooltip content={phaseDisplay.hint} position="right">
+                      {node}
+                    </Tooltip>
+                  ) : (
+                    node
+                  )
+                }
+              />
+            )
+          })()}
           <Property label="Node" value={
             data.spec?.nodeName ? <ResourceLink name={data.spec.nodeName} kind="nodes" onNavigate={onNavigate} /> : undefined
           } copyable onCopy={onCopy} copied={copied} />

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

@@ -1,6 +1,7 @@
 import { Shield, Users } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ResourceLink, AlertBanner } from '../../ui/drawer-components'
+import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 interface RoleBindingRendererProps {
   data: any
@@ -16,7 +17,7 @@ function getSubjectKindBadgeClass(kind: string): string {
     case 'Group':
       return 'bg-purple-500/20 text-purple-400'
     default:
-      return 'bg-gray-500/20 text-gray-400'
+      return BADGE_INACTIVE
   }
 }
 
@@ -27,7 +28,7 @@ function getRoleRefKindBadgeClass(kind: string): string {
     case 'ClusterRole':
       return 'bg-purple-500/20 text-purple-400'
     default:
-      return 'bg-gray-500/20 text-gray-400'
+      return BADGE_INACTIVE
   }
 }
 

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

@@ -2,6 +2,7 @@ import { Server, GitBranch, AlertTriangle, Network } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
+import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 interface RolloutRendererProps {
   data: any
@@ -292,7 +293,7 @@ export function RolloutRenderer({ data }: RolloutRendererProps) {
                       'w-5 h-5 rounded-full flex items-center justify-center text-xs shrink-0',
                       isCompleted && 'bg-green-500/20 text-green-400',
                       isCurrent && 'bg-blue-500/20 text-blue-400',
-                      isPending && 'bg-gray-500/20 text-gray-400'
+                      isPending && BADGE_INACTIVE
                     )}
                   >
                     {isCompleted ? '\u2713' : isCurrent ? '\u25CF' : '\u25CB'}

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

@@ -34,7 +34,11 @@ export function SecretRenderer({ data, certificateInfo, resourceData, onSaveSecr
   function toggleReveal(key: string) {
     setRevealed(prev => {
       const next = new Set(prev)
-      next.has(key) ? next.delete(key) : next.add(key)
+      if (next.has(key)) {
+        next.delete(key)
+      } else {
+        next.add(key)
+      }
       return next
     })
   }
@@ -153,6 +157,16 @@ export function SecretRenderer({ data, certificateInfo, resourceData, onSaveSecr
         </>
       )}
 
+      {dataKeys.length > 0 && (
+        <div className="flex items-center gap-2 p-3 bg-amber-500/10 border border-amber-500/30 rounded text-amber-400 text-sm">
+          <AlertTriangle className="w-4 h-4 flex-shrink-0" />
+          <span>
+            Secret values are sensitive. Reveal carefully — anyone who can see your
+            screen will see the plaintext.
+          </span>
+        </div>
+      )}
+
       <Section title="Data" defaultExpanded>
         <div className="space-y-2">
           {dataKeys.map((key) => {
@@ -250,11 +264,6 @@ export function SecretRenderer({ data, certificateInfo, resourceData, onSaveSecr
         </div>
       </Section>
 
-      <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/30 rounded text-red-400 text-sm">
-        <AlertTriangle className="w-4 h-4" />
-        Secret values are sensitive. Be careful when revealing.
-      </div>
-
       {editingKey && (
         <ConfirmDialog
           open={showSaveConfirm}

package/src/components/resources/renderers/aws-capi-cells.tsx

@@ -2,6 +2,7 @@
 
 import { clsx } from 'clsx'
 import { Tooltip } from '../../ui/Tooltip'
+import { CAPACITY_TYPE_BADGE } from '../../../utils/badge-colors'
 import {
   getAWSMCPStatus, getAWSMCPEKSClusterName, getAWSMCPRegion, getAWSMCPVersion,
   getAWSMMPStatus, getAWSMMPInstanceType, getAWSMMPReplicas, getAWSMMPCapacityType,
@@ -57,10 +58,7 @@ export function AWSManagedMachinePoolCell({ resource, column }: { resource: any;
     case 'capacityType': {
       const ct = getAWSMMPCapacityType(resource)
       return (
-        <span className={clsx('badge badge-sm', ct === 'spot'
-          ? 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-700/40'
-          : 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40'
-        )}>{ct === 'onDemand' ? 'On-Demand' : ct}</span>
+        <span className={clsx('badge badge-sm', ct === 'spot' ? CAPACITY_TYPE_BADGE.spot : CAPACITY_TYPE_BADGE.onDemand)}>{ct === 'onDemand' ? 'On-Demand' : ct}</span>
       )
     }
     default:

package/src/components/resources/renderers/azure-capi-cells.tsx

@@ -2,6 +2,7 @@
 
 import { Tooltip } from '../../ui/Tooltip'
 import { clsx } from 'clsx'
+import { CAPACITY_TYPE_BADGE, NODEPOOL_MODE_BADGE } from '../../../utils/badge-colors'
 import {
   getAzureMCPStatus, getAzureMCPLocation, getAzureMCPVersion, getAzureMCPResourceGroup,
   getAzureMMPStatus, getAzureMMPSKU, getAzureMMPMode, getAzureMMPReplicas, getAzureMMPScaleSetPriority,
@@ -40,20 +41,14 @@ export function AzureManagedMachinePoolCell({ resource, column }: { resource: an
     case 'mode': {
       const mode = getAzureMMPMode(resource)
       return (
-        <span className={clsx('badge badge-sm', mode === 'System'
-          ? 'bg-purple-100 text-purple-800 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40'
-          : 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40'
-        )}>{mode}</span>
+        <span className={clsx('badge badge-sm', NODEPOOL_MODE_BADGE[mode] || NODEPOOL_MODE_BADGE.User)}>{mode}</span>
       )
     }
     case 'replicas': return <TextCell value={getAzureMMPReplicas(resource)} />
     case 'priority': {
       const p = getAzureMMPScaleSetPriority(resource)
       return (
-        <span className={clsx('badge badge-sm', p === 'Spot'
-          ? 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-700/40'
-          : 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40'
-        )}>{p}</span>
+        <span className={clsx('badge badge-sm', p === 'Spot' ? CAPACITY_TYPE_BADGE.spot : CAPACITY_TYPE_BADGE.regular)}>{p}</span>
       )
     }
     default: return <span className="text-sm text-theme-text-tertiary">-</span>

package/src/components/resources/renderers/istio-cells.tsx

@@ -1,6 +1,7 @@
 // Istio cell components for ResourcesView table
 
 import { clsx } from 'clsx'
+import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 import {
   getVirtualServiceStatus,
   getVirtualServiceHosts,
@@ -164,7 +165,7 @@ export function PeerAuthenticationCell({ resource, column }: { resource: any; co
       return (
         <span className={clsx(
           'badge',
-          modeColors[mode] || 'bg-gray-500/20 text-gray-400'
+          modeColors[mode] || BADGE_INACTIVE
         )}>
           {mode}
         </span>
@@ -194,7 +195,7 @@ export function AuthorizationPolicyCell({ resource, column }: { resource: any; c
       return (
         <span className={clsx(
           'badge',
-          actionColors[action] || 'bg-gray-500/20 text-gray-400'
+          actionColors[action] || BADGE_INACTIVE
         )}>
           {action}
         </span>

package/src/components/resources/renderers/karpenter-cells.tsx

@@ -2,8 +2,8 @@
 
 import { clsx } from 'clsx'
 import { Tooltip } from '../../ui/Tooltip'
+import { CAPACITY_TYPE_BADGE } from '../../../utils/badge-colors'
 import {
-  CAPACITY_TYPE_BADGE,
   getNodePoolStatus,
   getNodePoolNodeClassRef,
   getNodePoolLimits,

package/src/components/resources/resource-utils-karpenter.ts

@@ -3,12 +3,6 @@
 import type { StatusBadge } from './resource-utils'
 import { healthColors } from './resource-utils'
 
-// Shared capacity type badge colors for NodeClaim renderer and table cells
-export const CAPACITY_TYPE_BADGE: Record<string, string> = {
-  spot: 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-700/40',
-  'on-demand': 'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
-}
-
 // ============================================================================
 // KARPENTER NODEPOOL UTILITIES
 // ============================================================================

package/src/components/resources/resource-utils.ts

@@ -130,6 +130,114 @@ export function getPodStatus(pod: any): StatusBadge {
   }
 }
 
+/**
+ * Pod phase enriched with readiness/restart/crash signals so the Phase
+ * row doesn't show a bare "Running" on a 0/1 or crash-looping pod.
+ */
+export interface PodPhaseDisplay {
+  /** Verbatim `pod.status.phase` (or "Unknown") — never lost. */
+  phase: string
+  /** Phase + derived qualifier, e.g. "Running — Not Ready (0/1)". */
+  text: string
+  /** Severity tier for tinting / icon choice, mirrors getPodStatus. */
+  level: HealthLevel
+  /** Optional one-line explanation surfaced as a tooltip / muted suffix. */
+  hint?: string
+}
+
+const RESTART_CYCLING_THRESHOLD = 5
+
+export function getPodPhaseDisplay(pod: any): PodPhaseDisplay {
+  const phase: string = pod?.status?.phase || 'Unknown'
+  const containerStatuses: any[] = pod?.status?.containerStatuses || []
+  const totalContainers = containerStatuses.length
+  const readyContainers = containerStatuses.filter((c) => c?.ready).length
+  const restartTotal = containerStatuses.reduce(
+    (sum, c) => sum + (c?.restartCount || 0),
+    0
+  )
+
+  if (pod?.metadata?.deletionTimestamp) {
+    return {
+      phase,
+      text: `${phase} — Terminating`,
+      level: 'degraded',
+      hint: 'Pod has a deletionTimestamp set; awaiting graceful termination.',
+    }
+  }
+
+  // Container-state failures take precedence over phase: a CrashLoopBackOff
+  // pod can still report phase: Running. Skip for Succeeded — a Job pod whose
+  // sidecar was OOMKilled before the main container completed should not be
+  // shown as unhealthy after the pod has reached terminal success.
+  if (phase !== 'Succeeded') {
+    for (const cs of containerStatuses) {
+      const waitingReason = cs?.state?.waiting?.reason
+      if (
+        waitingReason === 'CrashLoopBackOff' ||
+        waitingReason === 'ImagePullBackOff' ||
+        waitingReason === 'ErrImagePull' ||
+        waitingReason === 'CreateContainerConfigError'
+      ) {
+        return {
+          phase,
+          text: `${phase} — ${waitingReason}`,
+          level: 'unhealthy',
+          hint: `Container "${cs.name}" is stuck in ${waitingReason}.`,
+        }
+      }
+      if (cs?.state?.terminated?.reason === 'OOMKilled') {
+        return {
+          phase,
+          text: `${phase} — OOMKilled`,
+          level: 'unhealthy',
+          hint: `Container "${cs.name}" was OOMKilled.`,
+        }
+      }
+    }
+  }
+
+  switch (phase) {
+    case 'Running': {
+      const notReady = totalContainers > 0 && readyContainers < totalContainers
+      const cycling = restartTotal > RESTART_CYCLING_THRESHOLD
+      if (notReady && cycling) {
+        return {
+          phase,
+          text: `Running — Not Ready (${readyContainers}/${totalContainers}), ${restartTotal} restarts`,
+          level: 'unhealthy',
+          hint: 'Containers report not-ready and have restarted many times — likely crash-looping.',
+        }
+      }
+      if (notReady) {
+        return {
+          phase,
+          text: `Running — Not Ready (${readyContainers}/${totalContainers})`,
+          level: 'degraded',
+          hint: 'Pod is in the Running phase but at least one container is not ready (probes failing or still starting).',
+        }
+      }
+      if (cycling) {
+        return {
+          phase,
+          text: `Running — Restarting (${restartTotal} restarts)`,
+          level: 'degraded',
+          hint: 'Containers are ready right now but have restarted many times — investigate stability.',
+        }
+      }
+      return { phase, text: 'Running', level: 'healthy' }
+    }
+    case 'Succeeded':
+      return { phase, text: 'Completed', level: 'neutral' }
+    case 'Pending':
+      return { phase, text: 'Pending', level: 'degraded' }
+    case 'Failed':
+      return { phase, text: 'Failed', level: 'unhealthy' }
+    default:
+      return { phase, text: phase, level: 'unknown' }
+  }
+}
+
 export function getPodProblems(pod: any): PodProblem[] {
   const problems: PodProblem[] = []
   const containerStatuses = pod.status?.containerStatuses || []

package/src/components/timeline/shared.tsx

@@ -244,21 +244,20 @@ export function EventMarker({ event, x, selected, onClick, dimmed, small }: Even
       return 'bg-theme-hover/30 border-2 border-dashed border-theme-border-light'
     }
 
-    const opacity = dimmed ? '/50' : ''
     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 getOperationLabel = () => {

package/src/components/topology/K8sResourceNode.tsx

@@ -374,72 +374,59 @@ export const K8sResourceNode = memo(function K8sResourceNode({
           'pl-3 pr-3',
           isSmallNode ? 'py-2' : 'py-2.5'
         )}>
-          {/* Header row: icon + kind label + expand/collapse + status dot */}
+          {/* Header row: icon + kind label + (right-aligned) policy badge + expand/collapse + status dot */}
           <div className="flex items-center gap-1.5 mb-0.5">
             <span className={iconClass} />
             <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary font-medium">
               {isPodGroup ? 'Pod Group' : displayKind(kind)}
             </span>
-            {/* Expand/Collapse button for PodGroup */}
-            {canExpand && (
-              <button
-                onClick={(e) => {
-                  e.stopPropagation()
-                  onExpand(id)
-                }}
-                className="ml-auto p-0.5 hover:bg-theme-elevated rounded transition-colors"
-                title="Expand to show individual pods"
-              >
-                <ChevronDown className="w-3.5 h-3.5 text-theme-text-secondary" />
-              </button>
-            )}
-            {canCollapse && (
-              <button
-                onClick={(e) => {
-                  e.stopPropagation()
-                  onCollapse(id)
-                }}
-                className="ml-auto p-0.5 hover:bg-theme-elevated rounded transition-colors"
-                title="Collapse back to group"
-              >
-                <ChevronUp className="w-3.5 h-3.5 text-theme-text-secondary" />
-              </button>
-            )}
-            {issueTooltip ? (
-              <Tooltip content={issueTooltip} position="right">
-                <span
-                  className={clsx(
-                    canExpand || canCollapse ? '' : 'ml-auto',
-                    'w-1.5 h-1.5 rounded-full cursor-help',
-                    getStatusDotColor(status)
-                  )}
-                />
-              </Tooltip>
-            ) : (
-              <span
-                className={clsx(
-                  canExpand || canCollapse ? '' : 'ml-auto',
-                  'w-1.5 h-1.5 rounded-full',
-                  getStatusDotColor(status)
-                )}
-              />
-            )}
+            <div className="ml-auto flex items-center gap-1.5">
+              {policyStatus && (
+                <Tooltip content={policyStatus === 'protected' ? 'Protected by NetworkPolicy' : 'No NetworkPolicy coverage'} position="right">
+                  <span className={clsx(
+                    'inline-flex items-center justify-center w-3 h-3 rounded-sm text-[8px] font-bold cursor-help leading-none',
+                    policyStatus === 'protected'
+                      ? 'bg-green-500/20 text-green-500 border border-green-500/30'
+                      : 'bg-yellow-500/20 text-yellow-500 border border-yellow-500/30',
+                  )}>
+                    {policyStatus === 'protected' ? '✓' : '!'}
+                  </span>
+                </Tooltip>
+              )}
+              {canExpand && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onExpand(id)
+                  }}
+                  className="p-0.5 hover:bg-theme-elevated rounded transition-colors"
+                  title="Expand to show individual pods"
+                >
+                  <ChevronDown className="w-3.5 h-3.5 text-theme-text-secondary" />
+                </button>
+              )}
+              {canCollapse && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onCollapse(id)
+                  }}
+                  className="p-0.5 hover:bg-theme-elevated rounded transition-colors"
+                  title="Collapse back to group"
+                >
+                  <ChevronUp className="w-3.5 h-3.5 text-theme-text-secondary" />
+                </button>
+              )}
+              {issueTooltip ? (
+                <Tooltip content={issueTooltip} position="right">
+                  <span className={clsx('w-1.5 h-1.5 rounded-full cursor-help', getStatusDotColor(status))} />
+                </Tooltip>
+              ) : (
+                <span className={clsx('w-1.5 h-1.5 rounded-full', getStatusDotColor(status))} />
+              )}
+            </div>
           </div>
 
-          {/* Network Policy coverage indicator */}
-          {policyStatus && (
-            <Tooltip content={policyStatus === 'protected' ? 'Protected by NetworkPolicy' : 'No NetworkPolicy coverage'} position="right">
-              <span className={clsx(
-                'inline-flex items-center justify-center w-3.5 h-3.5 rounded-sm text-[8px] font-bold cursor-help',
-                policyStatus === 'protected'
-                  ? 'bg-green-500/20 text-green-500 border border-green-500/30'
-                  : 'bg-yellow-500/20 text-yellow-500 border border-yellow-500/30',
-              )}>
-                {policyStatus === 'protected' ? '✓' : '!'}
-              </span>
-            </Tooltip>
-          )}
-
           {/* Name */}
           <div className="text-sm font-medium text-theme-text-primary truncate pr-1">
             {name}

package/src/components/topology/TopologyGraph.tsx

@@ -654,12 +654,12 @@ export function TopologyGraph({
   }, [selectedNodeId, setNodes])
 
   if (!topology) {
-    return <PaneLoader label="Loading topology…" className="flex-1" />
+    return <PaneLoader label="Loading topology…" className="absolute inset-0" />
   }
 
   if (topology.nodes.length === 0) {
     return (
-      <div className="flex-1 flex items-center justify-center text-theme-text-secondary">
+      <div className="absolute inset-0 flex items-center justify-center text-theme-text-secondary">
         <div className="text-center">
           <p className="text-lg">No resources found</p>
           <p className="text-sm mt-2">
@@ -673,7 +673,7 @@ export function TopologyGraph({
   // Show layout error if we have topology data but layout failed
   if (layoutError && nodes.length === 0) {
     return (
-      <div className="flex-1 flex items-center justify-center text-theme-text-secondary">
+      <div className="absolute inset-0 flex items-center justify-center text-theme-text-secondary">
         <div className="text-center max-w-md">
           <p className="text-lg text-amber-400">Layout Error</p>
           <p className="text-sm mt-2">