@skyhook-io/k8s-ui 1.1.0 → 1.2.0

package/src/components/resources/ResourcesView.tsx

@@ -32,9 +32,9 @@ import type { NavigateToResource } from '../../utils/navigation'
 import { categorizeResources, CORE_RESOURCES } from '../../utils/api-resources'
 import {
   getPodStatus,
-  getPodReadiness,
   getPodRestarts,
   getPodProblems,
+  getContainerSquareStates,
   getWorkloadImages,
   getWorkloadConditions,
   getReplicaSetOwner,
@@ -114,6 +114,7 @@ import {
   getServiceAccountSecretCount,
   getRoleRuleCount,
   formatAge,
+  formatDuration,
   truncate,
   getCellFilterValue,
   parseColumnFilters,
@@ -136,6 +137,7 @@ import { CNPGClusterCell, CNPGBackupCell, CNPGScheduledBackupCell, CNPGPoolerCel
 import { VirtualServiceCell, DestinationRuleCell, IstioGatewayCell, ServiceEntryCell, PeerAuthenticationCell, AuthorizationPolicyCell } from './renderers/istio-cells'
 import { KnativeServiceCell, ConfigurationCell as KnativeConfigurationCell, RevisionCell as KnativeRevisionCell, RouteCell as KnativeRouteCell, BrokerCell, TriggerCell, EventTypeCell, PingSourceCell, ApiServerSourceCell, ContainerSourceCell, SinkBindingCell, ChannelCell, InMemoryChannelCell, SubscriptionCell, SequenceCell, ParallelCell, DomainMappingCell, ServerlessServiceCell, KnativeIngressCell, KnativeCertificateCell } from './renderers/knative-cells'
 import { IngressRouteCell, MiddlewareCell, TraefikServiceCell, ServersTransportCell, TLSOptionCell } from './renderers/traefik-cells'
+import { HTTPProxyCell } from './renderers/contour-cells'
 import { useRegisterShortcut, useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 
 // Pod problem filter options (special multi-select, not a single column value)
@@ -242,7 +244,7 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
   pods: [
     { key: 'name', label: 'Name' },
     { key: 'namespace', label: 'Namespace', width: 'w-48' },
-    { key: 'ready', label: 'Ready', width: 'w-16' },
+    { key: 'containers', label: 'Containers', width: 'w-28' },
     { key: 'status', label: 'Status', width: 'w-40' },
     { key: 'cpu', label: 'CPU', width: 'w-40', tooltip: 'CPU usage / limit (marker = request)' },
     { key: 'memory', label: 'Memory', width: 'w-40', tooltip: 'Memory usage / limit (marker = request)' },
@@ -1318,6 +1320,17 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
     { key: 'namespace', label: 'Namespace', width: 'w-36 shrink-0' },
     { key: 'age', label: 'Age', width: 'w-16 shrink-0' },
   ],
+  // Contour
+  httpproxies: [
+    { key: 'name', label: 'Name', width: 'min-w-40' },
+    { key: 'namespace', label: 'Namespace', width: 'w-36 shrink-0' },
+    { key: 'fqdn', label: 'FQDN', width: 'min-w-44' },
+    { key: 'routes', label: 'Routes', width: 'w-20 shrink-0' },
+    { key: 'includes', label: 'Includes', width: 'w-24 shrink-0' },
+    { key: 'tls', label: 'TLS', width: 'w-14 shrink-0' },
+    { key: 'status', label: 'Status', width: 'w-24 shrink-0' },
+    { key: 'age', label: 'Age', width: 'w-16 shrink-0' },
+  ],
 }
 
 // Map (plural, group) → KNOWN_COLUMNS key for kinds that collide with core K8s
@@ -1344,6 +1357,8 @@ function normalizeKindToPlural(kind: string, group?: string): string {
   if (!lower.endsWith('s') && KNOWN_COLUMNS[lower + 's']) return lower + 's'
   // Try 'es' for kinds ending in s/sh/ch/x/z (e.g., "ingress" → "ingresses")
   if (KNOWN_COLUMNS[lower + 'es']) return lower + 'es'
+  // Try 'ies' for kinds ending in y (e.g., "httpproxy" → "httpproxies")
+  if (lower.endsWith('y') && KNOWN_COLUMNS[lower.slice(0, -1) + 'ies']) return lower.slice(0, -1) + 'ies'
   return lower
 }
 
@@ -1598,8 +1613,6 @@ export function ResourcesView({
   // Pinned kinds (favorites) — provided via props
   const [favoritesExpanded, setFavoritesExpanded] = useState(() => pinned.length > 0)
 
-  console.debug('[filters] ResourcesView render:', { kind: selectedKind.name, columnFilters, searchTerm, url: location.search })
-
   useEffect(() => { persistedExpandedCategories = expandedCategories }, [expandedCategories])
   // Track if this is the initial mount to avoid re-syncing on first render
   const isInitialMount = useRef(true)
@@ -2198,6 +2211,14 @@ export function ResourcesView({
     }
     // Signal that initial resource param has been processed — URL update effect can now run
     hasProcessedInitialResource.current = true
+
+    // If the URL has no kind segment (e.g., /resources), update to include the default kind
+    const base = basePath.replace(/\/$/, '')
+    const path = window.location.pathname
+    if (path === base || path === base + '/') {
+      const search = window.location.search
+      window.history.replaceState({}, '', `${base}/${selectedKind.name}${search}`)
+    }
   }, []) // Only on mount
 
   // API resources for dynamic sidebar — provided via props
@@ -2435,13 +2456,15 @@ export function ResourcesView({
         return meta.creationTimestamp ? new Date(meta.creationTimestamp).getTime() : 0
       case 'status':
         return status.phase || ''
-      case 'ready':
-        // For pods, use ready/total ratio
+      case 'containers':
+        // Pod containers column — sort by readiness ratio
         if (status.containerStatuses) {
           const ready = status.containerStatuses.filter((c: any) => c.ready).length
           const total = status.containerStatuses.length
           return total > 0 ? ready / total : 0
         }
+        return 0
+      case 'ready':
         // For DaemonSets, use numberReady/desiredNumberScheduled
         if (kindLower === 'daemonsets') {
           const desired = status.desiredNumberScheduled ?? 0
@@ -2623,13 +2646,13 @@ export function ResourcesView({
       const kindLower = normalizeKindToPlural(selectedKind.name, selectedKind.group)
 
       if (kindLower === 'pods') {
-        // Completed pods at bottom
+        // Completed pods at bottom, then sort by name for stability across refreshes
         result = [...result].sort((a: any, b: any) => {
           const aCompleted = a.status?.phase === 'Succeeded'
           const bCompleted = b.status?.phase === 'Succeeded'
           if (aCompleted && !bCompleted) return 1
           if (!aCompleted && bCompleted) return -1
-          return 0
+          return (a.metadata?.name || '').localeCompare(b.metadata?.name || '')
         })
       } else if (kindLower === 'daemonsets') {
         // DaemonSets with 0 desired (empty/inactive) at bottom, then sort by ready desc
@@ -2653,11 +2676,12 @@ export function ResourcesView({
           return (a.metadata?.name || '').localeCompare(b.metadata?.name || '')
         })
       } else if (kindLower === 'events') {
-        // Events: most recently seen first
+        // Events: most recently seen first, name tiebreaker for same-timestamp stability
         result = [...result].sort((a: any, b: any) => {
           const aTime = new Date(a.lastTimestamp || a.metadata?.creationTimestamp || 0).getTime()
           const bTime = new Date(b.lastTimestamp || b.metadata?.creationTimestamp || 0).getTime()
-          return bTime - aTime
+          if (bTime !== aTime) return bTime - aTime
+          return (a.metadata?.name || '').localeCompare(b.metadata?.name || '')
         })
       } else if (['deployments', 'statefulsets', 'replicasets'].includes(kindLower)) {
         // Workloads: unhealthy first, scaled-to-zero at bottom
@@ -2680,6 +2704,11 @@ export function ResourcesView({
           // Finally sort by name
           return (a.metadata?.name || '').localeCompare(b.metadata?.name || '')
         })
+      } else {
+        // All other kinds: sort by name for stability across refreshes
+        result = [...result].sort((a: any, b: any) =>
+          (a.metadata?.name || '').localeCompare(b.metadata?.name || '')
+        )
       }
     }
 
@@ -3041,18 +3070,16 @@ export function ResourcesView({
     <ResourcesViewDataContext.Provider value={resourcesViewDataContextValue}>
     <div className="flex h-full w-full">
       {/* Sidebar - Resource Types */}
-      <div className="w-72 bg-theme-surface border-r border-theme-border overflow-y-auto overflow-x-hidden shrink-0">
-        <div className="flex items-center gap-2 px-3 py-3 border-b border-theme-border">
-          <h2 className="text-sm font-medium text-theme-text-secondary uppercase tracking-wide shrink-0">
-            Resources
-          </h2>
-          <div className="flex-1 relative">
+      <div className="w-56 2xl:w-72 bg-theme-surface border-r border-theme-border overflow-y-auto overflow-x-hidden shrink-0">
+        <div className="px-2 py-2 border-b border-theme-border">
+          <div className="relative">
             <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-theme-text-tertiary" />
             <input
               type="text"
-              placeholder="Filter kinds..."
+              placeholder="Filter resources..."
               value={kindFilter}
               onChange={(e) => setKindFilter(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Escape') { setKindFilter(''); (e.target as HTMLInputElement).blur() } }}
               className="w-full pl-7 pr-7 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-blue-500"
             />
             {kindFilter && (
@@ -3079,7 +3106,7 @@ export function ResourcesView({
               )}
               <span className="flex-1 text-left">Favorites</span>
               {!favoritesExpanded && pinned.length > 0 && (
-                <span className="text-xs px-1.5 py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case">
+                <span className={clsx('text-xs py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case text-center', pinned.length < 1000 ? 'w-8' : 'w-9')}>
                   {pinned.length}
                 </span>
               )}
@@ -3125,7 +3152,7 @@ export function ResourcesView({
                 <div key={category.name} className="mb-2">
                   <button
                     onClick={() => toggleCategory(category.name)}
-                    className="w-full flex items-center gap-2 px-2 py-1.5 text-xs font-medium text-theme-text-tertiary hover:text-theme-text-secondary uppercase tracking-wide"
+                    className="w-full flex items-center gap-2 px-2 py-1.5 text-xs font-semibold text-theme-text-tertiary hover:text-theme-text-secondary uppercase tracking-wide"
                   >
                     {isExpanded ? (
                       <ChevronDown className="w-3 h-3" />
@@ -3134,7 +3161,7 @@ export function ResourcesView({
                     )}
                     <span className="flex-1 text-left">{category.name}</span>
                     {!isExpanded && (
-                      <span className="text-xs px-1.5 py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case">
+                      <span className={clsx('text-xs py-0.5 rounded bg-theme-elevated text-theme-text-secondary font-normal normal-case text-center', category.total < 1000 ? 'w-8' : 'w-9')}>
                         {category.total}
                       </span>
                     )}
@@ -3781,7 +3808,7 @@ const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps
         ref={ref}
         onClick={onClick}
         className={clsx(
-          'w-full flex items-center gap-3 px-3 py-1.5 rounded-lg text-sm transition-colors group/kind min-w-0',
+          'w-full flex items-center gap-2 px-2 xl:px-3 py-1.5 rounded-lg text-sm transition-colors group/kind min-w-0',
           isSelected
             ? 'bg-blue-500/20 text-blue-700 dark:text-blue-300'
             : forbidden
@@ -3795,36 +3822,39 @@ const ResourceTypeButton = forwardRef<HTMLButtonElement, ResourceTypeButtonProps
             {resource.kind}
           </span>
         </Tooltip>
-        {forbidden ? (
-          <Tooltip content="Insufficient permissions" position="left">
-            <Shield className="w-3.5 h-3.5 text-amber-400/60" />
-          </Tooltip>
-        ) : (
-          <span className={clsx(
-            'text-xs px-1.5 py-0.5 rounded min-w-[1.5rem] text-center',
-            isSelected ? 'bg-blue-500/30 text-blue-700 dark:text-blue-300' : 'bg-theme-elevated'
-          )}>
-            {count}
-          </span>
-        )}
-        {onTogglePin && (
-          <span
-            role="button"
-            onClick={(e) => {
-              e.stopPropagation()
-              onTogglePin()
-            }}
-            className={clsx(
-              'ml-auto p-0.5 rounded transition-all shrink-0 hover:bg-theme-hover',
-              isPinned
-                ? 'text-theme-text-secondary'
-                : 'opacity-0 group-hover/kind:opacity-100 text-theme-text-disabled'
-            )}
-            title={isPinned ? 'Unpin from favorites' : 'Pin to favorites'}
-          >
-            <Pin className={clsx('w-3.5 h-3.5', isPinned && 'fill-current')} />
-          </span>
-        )}
+        <div className="ml-auto flex items-center gap-1 shrink-0">
+          {onTogglePin && (
+            <span
+              role="button"
+              onClick={(e) => {
+                e.stopPropagation()
+                onTogglePin()
+              }}
+              className={clsx(
+                'p-0.5 rounded transition-all hover:bg-theme-hover',
+                isPinned
+                  ? 'text-theme-text-secondary'
+                  : 'opacity-0 group-hover/kind:opacity-100 text-theme-text-disabled'
+              )}
+              title={isPinned ? 'Unpin from favorites' : 'Pin to favorites'}
+            >
+              <Pin className={clsx('w-3 h-3', isPinned && 'fill-current')} />
+            </span>
+          )}
+          {forbidden ? (
+            <Tooltip content="Insufficient permissions" position="left">
+              <Shield className="w-3.5 h-3.5 text-amber-400/60" />
+            </Tooltip>
+          ) : (
+            <span className={clsx(
+              'text-xs py-0.5 rounded text-center',
+              isSelected ? 'bg-blue-500/30 text-blue-700 dark:text-blue-300' : 'bg-theme-elevated',
+              count < 1000 ? 'w-8' : 'w-9'
+            )}>
+              {count}
+            </span>
+          )}
+        </div>
       </button>
     )
   }
@@ -4202,6 +4232,9 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion }
       return <ServersTransportCell resource={resource} column={column} />
     case 'tlsoptions':
       return <TLSOptionCell resource={resource} column={column} />
+    // Contour
+    case 'httpproxies':
+      return <HTTPProxyCell resource={resource} column={column} />
     default:
       // Generic cell for CRDs and unknown resources
       return <GenericCell resource={resource} column={column} />
@@ -4270,27 +4303,113 @@ function GenericCell({ resource, column }: { resource: any; column: string }) {
 // ============================================================================
 
 function PodCell({ resource, column }: { resource: any; column: string }) {
-  const phase = resource.status?.phase
-  const isCompleted = phase === 'Succeeded'
   const metrics = useContext(MetricsContext)
   const { onNavigate: navigate } = useContext(ResourcesViewDataContext)
 
   switch (column) {
-    case 'ready': {
-      const { ready, total } = getPodReadiness(resource)
-      const allReady = ready === total && total > 0
-      // Completed pods (Succeeded) show neutral color, not red
-      const color = isCompleted
-        ? 'text-theme-text-secondary'
-        : allReady
-          ? 'text-green-400'
-          : ready > 0
-            ? 'text-yellow-400'
-            : 'text-red-400'
+    case 'containers': {
+      const squares = getContainerSquareStates(resource)
+      const hasInit = squares.some(s => s.isInit)
       return (
-        <span className={clsx('text-sm font-medium', color)}>
-          {ready}/{total}
-        </span>
+        <div className="flex items-center gap-1">
+          {squares.map((sq, i) => {
+            const showSeparator = hasInit && i > 0 && sq.isInit !== squares[i - 1].isInit
+            const bgClass =
+              sq.status === 'ready' ? 'bg-green-500' :
+              sq.status === 'completed' ? 'bg-theme-text-tertiary/30 border border-theme-text-tertiary' :
+              sq.status === 'running' ? 'bg-yellow-500' :
+              sq.status === 'waiting' ? 'bg-red-500' :
+              sq.status === 'terminated' ? 'bg-red-500' :
+              'bg-theme-text-tertiary/30 border border-dashed border-theme-text-tertiary'
+            const ringClass = sq.restarts > 0 ? 'ring-2 ring-orange-400' : ''
+            const dotColor =
+              sq.status === 'ready' ? 'bg-green-500' :
+              sq.status === 'completed' ? 'bg-theme-text-tertiary' :
+              sq.status === 'running' ? 'bg-yellow-500' :
+              sq.status === 'waiting' || sq.status === 'terminated' ? 'bg-red-500' :
+              'bg-theme-text-tertiary'
+            // Relative time helper
+            const timeAgo = (dateStr?: string) => {
+              if (!dateStr) return null
+              const ms = Date.now() - new Date(dateStr).getTime()
+              if (isNaN(ms) || ms < 0) return null
+              if (ms < 60000) return 'just now'
+              return formatDuration(ms) + ' ago'
+            }
+            const runDuration = (start?: string, end?: string) => {
+              if (!start || !end) return null
+              const ms = new Date(end).getTime() - new Date(start).getTime()
+              return ms > 0 ? formatDuration(ms, true) : null
+            }
+            const stateLabel =
+              sq.status === 'ready' ? 'Running' :
+              sq.status === 'completed' ? 'Completed' :
+              sq.status === 'running' ? 'Running (not ready)' :
+              sq.status === 'waiting' ? 'Waiting' :
+              sq.status === 'terminated' ? 'Terminated' : 'Unknown'
+            const uptime = sq.status === 'ready' || sq.status === 'running' ? timeAgo(sq.startedAt) : null
+            const duration = (sq.status === 'completed' || sq.status === 'terminated') ? runDuration(sq.startedAt, sq.finishedAt) : null
+            const lt = sq.lastTermination
+            const restartRecencyMs = lt?.finishedAt ? Date.now() - new Date(lt.finishedAt).getTime() : null
+            const restartColor = restartRecencyMs !== null && restartRecencyMs < 600000 ? 'text-red-400' : restartRecencyMs !== null && restartRecencyMs < 3600000 ? 'text-yellow-400' : 'text-orange-400'
+            const tooltipContent = (
+              <div className="whitespace-normal space-y-1">
+                {/* Header: dot + name + state */}
+                <div className="flex items-center gap-1.5">
+                  <div className={clsx('w-2 h-2 rounded-full shrink-0', dotColor)} />
+                  <span className="font-medium">{sq.isInit ? <span className="text-theme-text-tertiary font-normal">init · </span> : ''}{sq.name}</span>
+                  <span className="text-theme-text-tertiary">·</span>
+                  <span className="text-theme-text-secondary">{stateLabel}</span>
+                </div>
+                {/* Reason (when different from state label) */}
+                {sq.reason && sq.reason !== stateLabel && (
+                  <div className={clsx(
+                    'font-medium',
+                    (sq.status === 'waiting' || sq.status === 'terminated') ? 'text-red-400' : 'text-theme-text-secondary'
+                  )}>{sq.reason}</div>
+                )}
+                {/* Message — truncated for tooltip */}
+                {sq.message && (
+                  <div className="text-theme-text-secondary text-[11px] leading-tight">
+                    {sq.message.length > 120 ? sq.message.slice(0, 120) + '...' : sq.message}
+                  </div>
+                )}
+                {/* Exit code + uptime/duration on same line */}
+                {(sq.exitCode !== undefined && sq.status !== 'ready' && sq.status !== 'running') || uptime || duration ? (
+                  <div className="text-theme-text-tertiary flex items-center gap-1.5">
+                    {sq.exitCode !== undefined && sq.status !== 'ready' && sq.status !== 'running' && (
+                      <span className={sq.exitCode !== 0 ? 'text-red-400' : ''}>exit {sq.exitCode}</span>
+                    )}
+                    {uptime && <span>up {uptime.replace(' ago', '')}</span>}
+                    {duration && <span>ran {duration}</span>}
+                  </div>
+                ) : null}
+                {/* Restarts + last crash info */}
+                {sq.restarts > 0 && (
+                  <div className={clsx('border-t border-theme-border/50 pt-1 space-y-0.5', restartColor)}>
+                    <div className="flex items-center gap-1.5">
+                      <span>{sq.restarts} restart{sq.restarts !== 1 ? 's' : ''}</span>
+                      {lt?.finishedAt && <span className="text-theme-text-tertiary">· last {timeAgo(lt.finishedAt)}</span>}
+                    </div>
+                    {lt?.reason && (
+                      <div className="text-theme-text-tertiary">
+                        {lt.reason}{lt.exitCode !== undefined && lt.exitCode !== 0 ? ` (exit ${lt.exitCode})` : ''}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )
+            return (
+              <React.Fragment key={i}>
+                {showSeparator && <div className="w-px h-3 bg-theme-text-tertiary/40 mx-0.5" />}
+                <Tooltip content={tooltipContent} className="whitespace-normal max-w-xs">
+                  <div className={clsx('w-2.5 h-2.5 rounded-sm', bgClass, ringClass)} />
+                </Tooltip>
+              </React.Fragment>
+            )
+          })}
+        </div>
       )
     }
     case 'status': {

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

@@ -0,0 +1,207 @@
+import { Globe, Route, Layers, Lock } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner, ConditionsSection, ResourceLink } from '../../ui/drawer-components'
+import {
+  getHTTPProxyFQDN,
+  getHTTPProxyRouteCount,
+  getHTTPProxyServiceCount,
+  getHTTPProxyStatus,
+  hasHTTPProxyTLS,
+} from '../resource-utils-contour'
+
+interface ContourHTTPProxyRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; name: string; namespace: string }) => void
+}
+
+export function ContourHTTPProxyRenderer({ data, onNavigate }: ContourHTTPProxyRendererProps) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const routes = spec.routes || []
+  const includes = spec.includes || []
+  const tls = spec.virtualhost?.tls
+  const tcpproxy = spec.tcpproxy
+  const ns = data.metadata?.namespace || ''
+  const conditions = status.conditions
+
+  const { label: statusLabel } = getHTTPProxyStatus(data)
+  const currentStatus = status.currentStatus?.toLowerCase()
+
+  return (
+    <>
+      {currentStatus === 'invalid' && (
+        <AlertBanner
+          variant="error"
+          title="Invalid HTTPProxy"
+          message={status.description || 'This HTTPProxy has an invalid configuration.'}
+        />
+      )}
+
+      {currentStatus === 'orphaned' && (
+        <AlertBanner
+          variant="warning"
+          title="Orphaned HTTPProxy"
+          message={status.description || 'This HTTPProxy is orphaned — it is not part of any valid delegation chain.'}
+        />
+      )}
+
+      <Section title="HTTPProxy" icon={Globe} defaultExpanded>
+        <PropertyList>
+          <Property label="FQDN" value={getHTTPProxyFQDN(data)} />
+          <Property label="TLS" value={hasHTTPProxyTLS(data) ? 'Enabled' : 'None'} />
+          <Property label="Status" value={statusLabel} />
+          <Property label="Routes" value={`${getHTTPProxyRouteCount(data)}`} />
+          <Property label="Services" value={`${getHTTPProxyServiceCount(data)}`} />
+        </PropertyList>
+      </Section>
+
+      <Section title={`Routes (${routes.length})`} icon={Route} defaultExpanded>
+        <div className="space-y-3">
+          {routes.map((route: any, i: number) => {
+            const services = route.services || []
+            const routeConditions = route.conditions || []
+
+            return (
+              <div key={i} className="bg-theme-elevated/30 rounded p-3">
+                {/* Conditions (prefix match, header match, etc.) */}
+                {routeConditions.length > 0 && (
+                  <div className="flex items-start gap-2 mb-2">
+                    <span className="text-sm font-medium text-theme-text-primary break-all">
+                      {routeConditions.map((c: any) => {
+                        if (c.prefix) return `prefix: ${c.prefix}`
+                        if (c.header) return `header: ${c.header.name} ${c.header.contains || c.header.exact || c.header.present ? 'match' : ''}`
+                        return JSON.stringify(c)
+                      }).join(', ')}
+                    </span>
+                  </div>
+                )}
+
+                {routeConditions.length === 0 && (
+                  <div className="flex items-start gap-2 mb-2">
+                    <span className="text-sm font-medium text-theme-text-primary">
+                      (no conditions)
+                    </span>
+                  </div>
+                )}
+
+                {/* Services */}
+                {services.length > 0 && (
+                  <div>
+                    <div className="text-[10px] font-medium text-theme-text-tertiary uppercase tracking-wider mb-1">Services</div>
+                    <div className="space-y-1">
+                      {services.map((svc: any, si: number) => {
+                        const svcNs = svc.namespace || ns
+                        const port = svc.port ? `:${svc.port}` : ''
+                        const weight = svc.weight !== undefined ? ` (${svc.weight}%)` : ''
+
+                        return (
+                          <div key={si} className="flex items-center gap-2 text-xs">
+                            <ResourceLink
+                              name={svc.name}
+                              kind="services"
+                              namespace={svcNs}
+                              label={<span className="text-blue-400">{svc.name}{port}{weight}</span>}
+                              onNavigate={onNavigate}
+                            />
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )
+          })}
+
+          {routes.length === 0 && (
+            <div className="text-sm text-theme-text-tertiary">No routes configured</div>
+          )}
+        </div>
+      </Section>
+
+      {includes.length > 0 && (
+        <Section title={`Includes (${includes.length})`} icon={Layers} defaultExpanded>
+          <div className="space-y-2">
+            {includes.map((inc: any, i: number) => {
+              const incNs = inc.namespace || ns
+              const incConditions = inc.conditions || []
+
+              return (
+                <div key={i} className="flex items-center gap-2 text-xs">
+                  <ResourceLink
+                    name={inc.name}
+                    kind="httpproxies"
+                    namespace={incNs}
+                    label={
+                      <span className="text-blue-400">
+                        {incNs !== ns ? `${incNs}/` : ''}{inc.name}
+                      </span>
+                    }
+                    onNavigate={onNavigate}
+                  />
+                  {incConditions.length > 0 && (
+                    <span className="text-theme-text-tertiary">
+                      ({incConditions.map((c: any) => c.prefix ? `prefix: ${c.prefix}` : JSON.stringify(c)).join(', ')})
+                    </span>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      {tcpproxy && (
+        <Section title="TCP Proxy" icon={Route} defaultExpanded>
+          <div className="space-y-1">
+            {(tcpproxy.services || []).map((svc: any, i: number) => {
+              const port = svc.port ? `:${svc.port}` : ''
+              return (
+                <div key={i} className="flex items-center gap-2 text-xs">
+                  <ResourceLink
+                    name={svc.name}
+                    kind="services"
+                    namespace={svc.namespace || ns}
+                    label={<span className="text-blue-400">{svc.name}{port}</span>}
+                    onNavigate={onNavigate}
+                  />
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      {tls && (
+        <Section title="TLS" icon={Lock} defaultExpanded>
+          <PropertyList>
+            {tls.secretName && (
+              <Property label="Secret" value={
+                <ResourceLink
+                  name={tls.secretName}
+                  kind="secrets"
+                  namespace={ns}
+                  onNavigate={onNavigate}
+                />
+              } />
+            )}
+            {tls.minimumProtocolVersion && (
+              <Property label="Min Protocol" value={tls.minimumProtocolVersion} />
+            )}
+            {tls.passthrough !== undefined && (
+              <Property label="Passthrough" value={tls.passthrough ? 'Yes' : 'No'} />
+            )}
+            {!tls.secretName && !tls.passthrough && (
+              <Property label="Mode" value="TLS termination (no explicit secret)" />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {conditions && conditions.length > 0 && (
+        <Section title="Status" defaultExpanded>
+          <ConditionsSection conditions={conditions} />
+        </Section>
+      )}
+    </>
+  )
+}

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

@@ -1,6 +1,7 @@
 import { Cpu, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 import { formatAge } from '../resource-utils'
 
 interface HPARendererProps {
@@ -113,7 +114,7 @@ export function HPARenderer({ data, onNavigate }: HPARendererProps) {
             spec.scaleTargetRef?.name ? (
               <ResourceLink
                 name={spec.scaleTargetRef.name}
-                kind={(spec.scaleTargetRef.kind || 'Deployment').toLowerCase() + 's'}
+                kind={kindToPlural(spec.scaleTargetRef.kind || 'Deployment')}
                 namespace={data.metadata?.namespace || ''}
                 label={`${spec.scaleTargetRef.kind}/${spec.scaleTargetRef.name}`}
                 onNavigate={onNavigate}

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

@@ -1,6 +1,7 @@
 import { Server, Cpu, Settings } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 import {
   getNodeClaimStatus,
   getNodeClaimInstanceType,
@@ -73,7 +74,7 @@ export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeCl
               value={nodeClassRef.name ? (
                 <ResourceLink
                   name={nodeClassRef.name}
-                  kind={(nodeClassRef.kind || 'EC2NodeClass').toLowerCase() + 's'}
+                  kind={kindToPlural(nodeClassRef.kind || 'EC2NodeClass')}
                   namespace=""
                   group={nodeClassRef.group}
                   label={`${nodeClassRef.kind || 'EC2NodeClass'}/${nodeClassRef.name}`}