@skyhook-io/k8s-ui 1.1.0 → 1.2.0

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

@@ -1,5 +1,6 @@
 import { Server, Settings, Shield, Cpu, Tag } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 import {
   getNodePoolStatus,
   getNodePoolNodeClassRef,
@@ -47,7 +48,7 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
             value={nodeClassRef?.name ? (
               <ResourceLink
                 name={nodeClassRef.name}
-                kind={(nodeClassRef.kind || 'EC2NodeClass').toLowerCase() + 's'}
+                kind={kindToPlural(nodeClassRef.kind || 'EC2NodeClass')}
                 namespace=""
                 group={nodeClassRef.group}
                 label={getNodePoolNodeClassRef(data)}

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

@@ -1,5 +1,6 @@
 import { Cpu } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 import {
   getScaledObjectStatus,
   getScaledObjectTarget,
@@ -66,7 +67,7 @@ export function KedaScaledObjectRenderer({ data, onNavigate }: KedaScaledObjectR
               return (
                 <ResourceLink
                   name={target.name}
-                  kind={(target.kind || 'Deployment').toLowerCase() + 's'}
+                  kind={kindToPlural(target.kind || 'Deployment')}
                   namespace={data.metadata?.namespace || ''}
                   label={getScaledObjectTarget(data)}
                   onNavigate={onNavigate}

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

@@ -1,6 +1,7 @@
 import { Radio, Filter, FileType, Inbox, ArrowRightLeft } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 import { getKnativeConditionStatus } from '../resource-utils-knative'
 
 interface RendererProps {
@@ -48,7 +49,7 @@ export function BrokerRenderer({ data, onNavigate }: RendererProps) {
               <Property label="Dead Letter" value={
                 <ResourceLink
                   name={delivery.deadLetterSink.ref.name}
-                  kind={delivery.deadLetterSink.ref.kind?.toLowerCase() + 's'}
+                  kind={kindToPlural(delivery.deadLetterSink.ref.kind || 'Service')}
                   namespace={delivery.deadLetterSink.ref.namespace || ns}
                   onNavigate={onNavigate}
                 />
@@ -106,7 +107,7 @@ export function TriggerRenderer({ data, onNavigate }: RendererProps) {
             subscriberRef ? (
               <ResourceLink
                 name={subscriberRef.name}
-                kind={(subscriberRef.kind?.toLowerCase() || 'services') + (subscriberRef.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+                kind={kindToPlural(subscriberRef.kind || 'Service')}
                 namespace={subscriberRef.namespace || ns}
                 onNavigate={onNavigate}
               />
@@ -248,7 +249,7 @@ export function SubscriptionRenderer({ data, onNavigate }: RendererProps) {
             <Property label="Channel" value={
               <ResourceLink
                 name={channelRef.name}
-                kind={(channelRef.kind?.toLowerCase() || 'channels') + (channelRef.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+                kind={kindToPlural(channelRef.kind || 'Channel')}
                 namespace={ns}
                 onNavigate={onNavigate}
               />
@@ -258,7 +259,7 @@ export function SubscriptionRenderer({ data, onNavigate }: RendererProps) {
             subscriberRef ? (
               <ResourceLink
                 name={subscriberRef.name}
-                kind={(subscriberRef.kind?.toLowerCase() || 'services') + (subscriberRef.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+                kind={kindToPlural(subscriberRef.kind || 'Service')}
                 namespace={subscriberRef.namespace || ns}
                 onNavigate={onNavigate}
               />
@@ -270,7 +271,7 @@ export function SubscriptionRenderer({ data, onNavigate }: RendererProps) {
             replyRef ? (
               <ResourceLink
                 name={replyRef.name}
-                kind={(replyRef.kind?.toLowerCase() || 'channels') + (replyRef.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+                kind={kindToPlural(replyRef.kind || 'Channel')}
                 namespace={replyRef.namespace || ns}
                 onNavigate={onNavigate}
               />
@@ -288,7 +289,7 @@ export function SubscriptionRenderer({ data, onNavigate }: RendererProps) {
               <Property label="Sink" value={
                 <ResourceLink
                   name={delivery.deadLetterSink.ref.name}
-                  kind={(delivery.deadLetterSink.ref.kind?.toLowerCase() || 'services') + 's'}
+                  kind={kindToPlural(delivery.deadLetterSink.ref.kind || 'Service')}
                   namespace={delivery.deadLetterSink.ref.namespace || ns}
                   onNavigate={onNavigate}
                 />

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

@@ -1,6 +1,7 @@
 import { ListOrdered, GitFork } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 import { getKnativeConditionStatus } from '../resource-utils-knative'
 
 interface RendererProps {
@@ -15,7 +16,7 @@ function RefDisplay({ ref: destRef, ns, onNavigate }: { ref: any; ns: string; on
     return (
       <ResourceLink
         name={destRef.ref.name}
-        kind={(destRef.ref.kind?.toLowerCase() || 'services') + (destRef.ref.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+        kind={kindToPlural(destRef.ref.kind || 'Service')}
         namespace={destRef.ref.namespace || ns}
         onNavigate={onNavigate}
       />

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

@@ -1,6 +1,7 @@
 import { Network, ShieldCheck, Server, Globe } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 import { getKnativeConditionStatus } from '../resource-utils-knative'
 
 interface RendererProps {
@@ -169,7 +170,7 @@ export function ServerlessServiceRenderer({ data, onNavigate }: RendererProps) {
             <Property label="Target" value={
               <ResourceLink
                 name={objectRef.name}
-                kind={(objectRef.kind?.toLowerCase() || 'deployments') + 's'}
+                kind={kindToPlural(objectRef.kind || 'Deployment')}
                 namespace={ns}
                 onNavigate={onNavigate}
               />
@@ -216,7 +217,7 @@ export function DomainMappingRenderer({ data, onNavigate }: RendererProps) {
             <Property label="Target" value={
               <ResourceLink
                 name={ref.name}
-                kind={(ref.kind?.toLowerCase() || 'services') + (ref.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+                kind={kindToPlural(ref.kind || 'Service')}
                 namespace={ns}
                 onNavigate={onNavigate}
               />

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

@@ -1,6 +1,7 @@
 import { Clock, Server, Container, Link2 } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, KnativeNotReadyBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 import { getKnativeConditionStatus } from '../resource-utils-knative'
 
 interface RendererProps {
@@ -16,7 +17,7 @@ function SinkProperty({ sink, ns, onNavigate }: { sink: any; ns: string; onNavig
       <Property label="Sink" value={
         <ResourceLink
           name={sink.ref.name}
-          kind={(sink.ref.kind?.toLowerCase() || 'services') + (sink.ref.kind?.toLowerCase().endsWith('s') ? '' : 's')}
+          kind={kindToPlural(sink.ref.kind || 'Service')}
           namespace={sink.ref.namespace || ns}
           onNavigate={onNavigate}
         />
@@ -195,7 +196,7 @@ export function SinkBindingRenderer({ data, onNavigate }: RendererProps) {
                 <Property label="Subject" value={
                   <ResourceLink
                     name={subjectRef.name}
-                    kind={(subjectRef.kind?.toLowerCase() || 'deployments') + 's'}
+                    kind={kindToPlural(subjectRef.kind || 'Deployment')}
                     namespace={subjectRef.namespace || ns}
                     onNavigate={onNavigate}
                   />

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

@@ -1,8 +1,10 @@
-import { useState, type ReactNode } from 'react'
-import { Server, HardDrive, Terminal as TerminalIcon, FileText, Activity, CirclePlay, FolderOpen } from 'lucide-react'
+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 } from '../resource-utils'
+import { getResourceStatusColor } from '../../../utils/badge-colors'
+import type { ResolvedEnvFrom } from '../../../types'
 import { Tooltip } from '../../ui/Tooltip'
 import { MetricsChart } from '../../ui/MetricsChart'
 
@@ -68,6 +70,11 @@ interface PodRendererProps {
   // Filesystem browser render props
   renderImageBrowser?: (props: { image: string; namespace: string; podName: string; pullSecrets: string[]; onClose: () => void; onSwitchToPodFiles?: () => void }) => ReactNode
   renderPodBrowser?: (props: { namespace: string; podName: string; containers: string[]; initialContainer: string; onClose: () => void; onSwitchToImageFiles: () => void }) => ReactNode
+  /**
+   * Resolved content for envFrom references.
+   * When provided, expands ConfigMap/Secret keys inline instead of showing "(all keys)".
+   */
+  resolvedEnvFrom?: ResolvedEnvFrom
 }
 
 // Extract problems from pod status and conditions
@@ -134,6 +141,148 @@ function getPodProblems(data: any): string[] {
   return problems
 }
 
+// ── Env vars section — extracted to use hooks (useState for reveal) ──────────
+
+function SecretValueCell({ value }: { value: string }) {
+  const [revealed, setRevealed] = useState(false)
+  return (
+    <span className="flex items-center gap-1 min-w-0">
+      <span className={clsx('break-all text-amber-700 dark:text-yellow-400/80', !revealed && 'blur-[3px] select-none')}>
+        {value || '•••'}
+      </span>
+      <button
+        onClick={() => setRevealed(r => !r)}
+        className="shrink-0 text-theme-text-tertiary hover:text-amber-700 dark:hover:text-yellow-400 transition-colors"
+        title={revealed ? 'Hide value' : 'Reveal value'}
+      >
+        {revealed ? <EyeOff className="w-3 h-3" /> : <Eye className="w-3 h-3" />}
+      </button>
+    </span>
+  )
+}
+
+function EnvRowShell({ name, children }: { name: string; children: ReactNode }) {
+  return (
+    <div className="flex items-start gap-1 text-xs font-mono py-0.5 border-b border-theme-border/30 last:border-0">
+      <span className="text-theme-text-secondary shrink-0 break-all">{name}</span>
+      <span className="text-theme-text-tertiary shrink-0">=</span>
+      {children}
+    </div>
+  )
+}
+
+function EnvRow({ name, value, isSecret }: { name: string; value: string; isSecret: boolean }) {
+  return (
+    <EnvRowShell name={name}>
+      {isSecret
+        ? <SecretValueCell value={value} />
+        : <span className="text-theme-text-primary break-all min-w-0">{value}</span>
+      }
+    </EnvRowShell>
+  )
+}
+
+function resolveEnvValueNode(env: any): JSX.Element {
+  if (env.valueFrom?.secretKeyRef) {
+    const { name, key } = env.valueFrom.secretKeyRef
+    return <span className="text-amber-700 dark:text-yellow-400/60 text-[10px] shrink-0 self-center px-1 py-0.5 bg-amber-500/10 dark:bg-yellow-500/10 rounded">secret:{name}[{key}]</span>
+  }
+  if (env.valueFrom?.configMapKeyRef) {
+    const { name, key } = env.valueFrom.configMapKeyRef
+    return <span className="text-blue-400/70 text-[10px] shrink-0 self-center px-1 py-0.5 bg-blue-500/10 rounded">configmap:{name}[{key}]</span>
+  }
+  if (env.valueFrom?.fieldRef) {
+    return <span className="text-purple-400/70 break-all">field:{env.valueFrom.fieldRef.fieldPath}</span>
+  }
+  if (env.valueFrom?.resourceFieldRef) {
+    return <span className="text-purple-400/70 break-all">resource:{env.valueFrom.resourceFieldRef.resource}</span>
+  }
+  return <span className="text-theme-text-primary break-all min-w-0">{env.value ?? ''}</span>
+}
+
+function EnvVarRow({ env }: { env: any }) {
+  return (
+    <EnvRowShell name={env.name}>
+      {resolveEnvValueNode(env)}
+    </EnvRowShell>
+  )
+}
+
+function EnvVarsSection({
+  initContainers,
+  containers,
+  resolvedEnvFrom,
+}: {
+  initContainers: any[]
+  containers: any[]
+  resolvedEnvFrom?: ResolvedEnvFrom
+}) {
+  const allContainers = [...initContainers, ...containers]
+  const multiContainer = allContainers.filter((c: any) => c.env?.length > 0 || c.envFrom?.length > 0).length > 1
+
+  return (
+    <Section title="Environment Variables" icon={List}>
+      <div className="space-y-4">
+        {allContainers.map((container: any) => {
+          const envVars: any[] = container.env || []
+          const envFrom: any[] = container.envFrom || []
+          if (!envVars.length && !envFrom.length) return null
+          return (
+            <div key={container.name}>
+              {/* Only show container name label when there are multiple containers with env vars */}
+              {multiContainer && (
+                <div className="text-xs font-medium text-theme-text-tertiary mb-2 uppercase tracking-wide">
+                  {container.name}
+                </div>
+              )}
+              <div className="space-y-1">
+                {/* envFrom — ConfigMap / Secret bulk injections */}
+                {envFrom.map((ef: any, i: number) => {
+                  const isSecret = !!ef.secretRef
+                  const sourceName = ef.configMapRef?.name ?? ef.secretRef?.name ?? 'unknown'
+                  const prefix = ef.configMapRef ? 'ConfigMap' : ef.secretRef ? 'Secret' : 'Source'
+                  const resolved = resolvedEnvFrom?.[sourceName]
+                  return (
+                    <div key={i} className="mb-1">
+                      <div className="flex items-center gap-1.5 text-xs font-mono py-0.5">
+                        <span className={clsx(
+                          'shrink-0 px-1 py-0.5 rounded text-[10px]',
+                          isSecret ? 'bg-amber-500/10 dark:bg-yellow-500/10 text-amber-700 dark:text-yellow-400' : 'bg-blue-500/10 text-blue-400'
+                        )}>
+                          {prefix}
+                        </span>
+                        <span className="text-theme-text-secondary">{sourceName}</span>
+                        {!resolved && <span className="text-theme-text-tertiary">(all keys)</span>}
+                      </div>
+                      {resolved && resolved.keys.length > 0 && (
+                        <div className="ml-2 mt-0.5">
+                          {resolved.keys.map((key) => (
+                            <EnvRow
+                              key={key}
+                              name={key}
+                              value={resolved.values[key] ?? ''}
+                              isSecret={isSecret}
+                            />
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  )
+                })}
+
+                {/* Individual env vars */}
+                {envVars.map((env: any) => (
+                  <EnvVarRow key={env.name} env={env} />
+                ))}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </Section>
+  )
+}
+
 export function PodRenderer({
   data,
   onCopy,
@@ -151,6 +300,7 @@ export function PodRenderer({
   hideMetricsServer,
   renderImageBrowser,
   renderPodBrowser,
+  resolvedEnvFrom,
 }: PodRendererProps) {
   const containerStatuses = data.status?.containerStatuses || []
   const containers = data.spec?.containers || []
@@ -283,23 +433,20 @@ export function PodRenderer({
 
               // Status label and color
               let statusLabel: string
-              let statusColor: string
               if (isCompleted) {
                 statusLabel = 'Completed'
-                statusColor = 'bg-green-500/20 text-green-400'
               } else if (isFailed) {
                 statusLabel = `Exit ${exitCode}`
-                statusColor = 'bg-red-500/20 text-red-400'
               } else if (isInitRunning) {
                 statusLabel = 'Running'
-                statusColor = 'bg-blue-500/20 text-blue-400'
               } else if (isWaiting) {
                 statusLabel = state?.waiting?.reason || 'Waiting'
-                statusColor = 'bg-yellow-500/20 text-yellow-400'
               } else {
                 statusLabel = 'Pending'
-                statusColor = 'bg-gray-500/20 text-gray-400'
               }
+              const statusColor = getResourceStatusColor(
+                isCompleted ? 'succeeded' : isFailed ? 'failed' : isInitRunning ? 'running' : isWaiting ? 'waiting' : 'pending'
+              )
 
               // Build command string
               const command = container.command || container.args
@@ -553,6 +700,15 @@ export function PodRenderer({
         </div>
       </Section>
 
+      {/* Environment Variables */}
+      {[...initContainers, ...containers].some((c: any) => c.env?.length > 0 || c.envFrom?.length > 0) && (
+        <EnvVarsSection
+          initContainers={initContainers}
+          containers={containers}
+          resolvedEnvFrom={resolvedEnvFrom}
+        />
+      )}
+
       {/* Resource Usage (from metrics-server) — hidden when Prometheus has CPU/memory data */}
       {!hideMetricsServer && !!(metrics?.containers?.length || metricsHistory?.containers?.length || metricsHistory?.collectionError) && (
         <Section title="Resource Usage" icon={Activity} defaultExpanded>

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

@@ -1,6 +1,7 @@
 import { Cpu } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { kindToPlural } from '../../../utils/navigation'
 
 interface VPARendererProps {
   data: any
@@ -65,7 +66,7 @@ export function VPARenderer({ data, onNavigate }: VPARendererProps) {
             targetRef.name ? (
               <ResourceLink
                 name={targetRef.name}
-                kind={(targetRef.kind || 'Deployment').toLowerCase() + 's'}
+                kind={kindToPlural(targetRef.kind || 'Deployment')}
                 namespace={data.metadata?.namespace || ''}
                 label={`${targetRef.kind}/${targetRef.name}`}
                 onNavigate={onNavigate}

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

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Server, ExternalLink, Scale, Minus, Plus, Loader2 } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { DialogPortal } from '../../ui/DialogPortal'
 
 interface WorkloadRendererProps {
   kind: string
@@ -213,67 +214,64 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
       </Section>
 
       {/* Scale Dialog */}
-      {showScaleDialog && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-          <div className="bg-theme-surface border border-theme-border rounded-lg shadow-xl w-80 p-4">
-            <h3 className="text-sm font-medium text-theme-text-primary mb-4">
-              Scale {metadata.name}
-            </h3>
+      <DialogPortal open={showScaleDialog} onClose={() => setShowScaleDialog(false)} className="w-80 p-4">
+        <h3 className="text-sm font-medium text-theme-text-primary mb-4">
+          Scale {metadata.name}
+        </h3>
 
-            <div className="flex items-center justify-center gap-4 mb-4">
-              <button
-                onClick={() => setTargetReplicas(Math.max(0, targetReplicas - 1))}
-                className="p-2 rounded-lg bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
-                disabled={targetReplicas <= 0}
-              >
-                <Minus className="w-5 h-5" />
-              </button>
+        <div className="flex items-center justify-center gap-4 mb-4">
+          <button
+            onClick={() => setTargetReplicas(Math.max(0, targetReplicas - 1))}
+            className="p-2 rounded-lg bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
+            disabled={targetReplicas <= 0}
+          >
+            <Minus className="w-5 h-5" />
+          </button>
 
-              <input
-                type="number"
-                min="0"
-                max="10000"
-                value={targetReplicas}
-                onChange={(e) => setTargetReplicas(Math.min(10000, Math.max(0, parseInt(e.target.value) || 0)))}
-                className="w-20 text-center text-2xl font-semibold bg-theme-elevated border border-theme-border rounded-lg py-2 text-theme-text-primary focus:outline-none focus:border-blue-500"
-              />
+          <input
+            type="number"
+            min="0"
+            max="10000"
+            value={targetReplicas}
+            onChange={(e) => setTargetReplicas(Math.min(10000, Math.max(0, parseInt(e.target.value) || 0)))}
+            className="w-20 text-center text-2xl font-semibold bg-theme-elevated border border-theme-border rounded-lg py-2 text-theme-text-primary focus:outline-none focus:border-blue-500"
+            autoFocus
+          />
 
-              <button
-                onClick={() => setTargetReplicas(Math.min(10000, targetReplicas + 1))}
-                disabled={targetReplicas >= 10000}
-                className="p-2 rounded-lg bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                <Plus className="w-5 h-5" />
-              </button>
-            </div>
+          <button
+            onClick={() => setTargetReplicas(Math.min(10000, targetReplicas + 1))}
+            disabled={targetReplicas >= 10000}
+            className="p-2 rounded-lg bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <Plus className="w-5 h-5" />
+          </button>
+        </div>
 
-            <div className="text-xs text-theme-text-tertiary text-center mb-4">
-              Current: {spec.replicas || 0} replicas
-              {targetReplicas !== (spec.replicas || 0) && (
-                <span className="text-theme-text-secondary">
-                  {' '}→ {targetReplicas}
-                </span>
-              )}
-            </div>
+        <div className="text-xs text-theme-text-tertiary text-center mb-4">
+          Current: {spec.replicas || 0} replicas
+          {targetReplicas !== (spec.replicas || 0) && (
+            <span className="text-theme-text-secondary">
+              {' '}→ {targetReplicas}
+            </span>
+          )}
+        </div>
 
-            <div className="flex gap-2">
-              <button
-                onClick={() => setShowScaleDialog(false)}
-                className="flex-1 px-3 py-2 text-sm text-theme-text-secondary hover:text-theme-text-primary bg-theme-elevated hover:bg-theme-hover border border-theme-border rounded-lg transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleScale}
-                disabled={isScalePending || targetReplicas === (spec.replicas || 0)}
-                className="flex-1 px-3 py-2 text-sm text-white bg-blue-600 hover:bg-blue-500 disabled:bg-blue-600/50 disabled:cursor-not-allowed rounded-lg transition-colors"
-              >
-                {isScalePending ? 'Scaling...' : 'Apply'}
-              </button>
-            </div>
-          </div>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setShowScaleDialog(false)}
+            className="flex-1 px-3 py-2 text-sm text-theme-text-secondary hover:text-theme-text-primary bg-theme-elevated hover:bg-theme-hover border border-theme-border rounded-lg transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleScale}
+            disabled={isScalePending || targetReplicas === (spec.replicas || 0)}
+            className="flex-1 px-3 py-2 text-sm text-white bg-blue-600 hover:bg-blue-500 disabled:bg-blue-600/50 disabled:cursor-not-allowed rounded-lg transition-colors"
+          >
+            {isScalePending ? 'Scaling...' : 'Apply'}
+          </button>
         </div>
-      )}
+      </DialogPortal>
 
       <Section title="Strategy">
         <PropertyList>

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

@@ -0,0 +1,48 @@
+// Contour cell components for ResourcesView table
+
+import { Shield } from 'lucide-react'
+import { Tooltip } from '../../ui/Tooltip'
+import {
+  getHTTPProxyFQDN,
+  getHTTPProxyRouteCount,
+  getHTTPProxyIncludeCount,
+  hasHTTPProxyTLS,
+  getHTTPProxyStatus,
+} from '../resource-utils-contour'
+
+export function HTTPProxyCell({ resource, column }: { resource: any; column: string }) {
+  switch (column) {
+    case 'fqdn': {
+      const fqdn = getHTTPProxyFQDN(resource)
+      return <span className="text-sm truncate" title={fqdn}>{fqdn}</span>
+    }
+    case 'routes':
+      return <span className="text-sm">{getHTTPProxyRouteCount(resource) || '-'}</span>
+    case 'includes': {
+      const count = getHTTPProxyIncludeCount(resource)
+      return <span className="text-sm">{count > 0 ? count : '-'}</span>
+    }
+    case 'tls': {
+      const hasTLS = hasHTTPProxyTLS(resource)
+      return hasTLS ? (
+        <Tooltip content="TLS Enabled">
+          <span>
+            <Shield className="w-4 h-4 text-green-400" />
+          </span>
+        </Tooltip>
+      ) : (
+        <span className="text-sm text-theme-text-tertiary">-</span>
+      )
+    }
+    case 'status': {
+      const { label } = getHTTPProxyStatus(resource)
+      const color = label === 'Valid' ? 'text-green-500'
+        : label === 'Invalid' ? 'text-red-500'
+        : label === 'Orphaned' ? 'text-yellow-500'
+        : 'text-theme-text-secondary'
+      return <span className={`text-sm ${color}`}>{label}</span>
+    }
+    default:
+      return <span className="text-sm text-theme-text-tertiary">-</span>
+  }
+}

package/src/components/resources/renderers/index.ts

@@ -103,3 +103,5 @@ export * from './WorkflowTemplateRenderer'
 export * from './WorkloadRenderer'
 export * from './TraefikIngressRouteRenderer'
 export * from './traefik-cells'
+export * from './ContourHTTPProxyRenderer'
+export * from './contour-cells'

package/src/components/resources/renderers/trivy-shared.tsx

@@ -1,30 +1,14 @@
 import { AlertBanner } from '../../ui/drawer-components'
+import {
+  VULN_SEVERITY_BADGE,
+  VULN_SEVERITY_BAR,
+  VULN_SEVERITY_TEXT,
+} from '../../../utils/badge-colors'
 
-// Shared severity color maps for all Trivy report renderers
-
-export const SEVERITY_BADGE_COLORS: Record<string, string> = {
-  CRITICAL: 'bg-red-500/20 text-red-400',
-  HIGH: 'bg-orange-500/20 text-orange-400',
-  MEDIUM: 'bg-yellow-500/20 text-yellow-400',
-  LOW: 'bg-blue-500/20 text-blue-400',
-  UNKNOWN: 'bg-gray-500/20 text-gray-400',
-}
-
-export const SEVERITY_BAR_COLORS: Record<string, string> = {
-  CRITICAL: 'bg-red-500',
-  HIGH: 'bg-orange-500',
-  MEDIUM: 'bg-yellow-500',
-  LOW: 'bg-blue-500',
-  UNKNOWN: 'bg-gray-500',
-}
-
-export const SEVERITY_TEXT_COLORS: Record<string, string> = {
-  CRITICAL: 'text-red-400',
-  HIGH: 'text-orange-400',
-  MEDIUM: 'text-yellow-400',
-  LOW: 'text-blue-400',
-  UNKNOWN: 'text-gray-400',
-}
+// Re-export from centralized badge-colors under the legacy names used by Trivy renderers
+export const SEVERITY_BADGE_COLORS = VULN_SEVERITY_BADGE
+export const SEVERITY_BAR_COLORS = VULN_SEVERITY_BAR
+export const SEVERITY_TEXT_COLORS = VULN_SEVERITY_TEXT
 
 export const SEVERITY_ORDER: Record<string, number> = {
   CRITICAL: 0,