@skyhook-io/k8s-ui 1.1.1 → 1.2.0

package/src/components/shared/ResourceActionsBar.tsx

@@ -6,6 +6,8 @@ import {
   Trash2,
   Play,
   Pause,
+  Ban,
+  AlertTriangle,
   Box,
   ChevronDown,
   History,
@@ -16,7 +18,8 @@ import {
 } from 'lucide-react'
 import { createTwoFilesPatch } from 'diff'
 import { clsx } from 'clsx'
-import { ForceDeleteConfirmDialog } from '../ui/ForceDeleteConfirmDialog'
+import { ForceDeleteConfirmDialog, type CascadeDependent } from '../ui/ForceDeleteConfirmDialog'
+import { ConfirmDialog } from '../ui/ConfirmDialog'
 import { DialogPortal } from '../ui/DialogPortal'
 import type { SelectedResource, WorkloadRevision } from '../../types'
 import { formatKindName } from '../ui/drawer-components'
@@ -50,6 +53,8 @@ interface ResourceActionsBarProps {
   // Delete
   onDelete?: (params: { kind: string; namespace: string; name: string; force: boolean }, callbacks?: { onSuccess?: () => void; onError?: (err: unknown) => void }) => void
   isDeleting?: boolean
+  cascadeDependents?: CascadeDependent[]
+  cascadeLoading?: boolean
 
   // Workload restart
   onRestart?: (params: { kind: string; namespace: string; name: string }, callbacks?: { onSuccess?: () => void; onError?: (err: unknown) => void }) => void
@@ -89,6 +94,18 @@ interface ResourceActionsBarProps {
   isArgoSuspending?: boolean
   onArgoResume?: (params: { namespace: string; name: string }) => void
   isArgoResuming?: boolean
+
+  // Node debug shell
+  onOpenNodeTerminal?: (params: { nodeName: string }) => void
+
+  // Node operations (cordon/uncordon/drain)
+  canNodeWrite?: boolean
+  onCordonNode?: (params: { name: string }) => void
+  isCordoningNode?: boolean
+  onUncordonNode?: (params: { name: string }) => void
+  isUncordoningNode?: boolean
+  onDrainNode?: (params: { name: string; options?: { deleteEmptyDirData?: boolean; force?: boolean } }) => void
+  isDrainingNode?: boolean
 }
 
 export function ResourceActionsBar({
@@ -96,7 +113,7 @@ export function ResourceActionsBar({
   canExec, canViewLogs, canPortForward,
   onOpenTerminal, onOpenLogs: openLogs, onOpenWorkloadLogs: openWorkloadLogs, onCopyCommand,
   renderPortForward,
-  onDelete, isDeleting,
+  onDelete, isDeleting, cascadeDependents, cascadeLoading,
   onRestart, isRestarting,
   revisions: revisionsList, revisionsLoading, revisionsError, onRollback, isRollingBack,
   onTriggerCronJob, isTriggeringCronJob,
@@ -110,12 +127,22 @@ export function ResourceActionsBar({
   onArgoRefresh, isArgoRefreshing,
   onArgoSuspend, isArgoSuspending,
   onArgoResume, isArgoResuming,
+  onOpenNodeTerminal,
+  canNodeWrite,
+  onCordonNode, isCordoningNode,
+  onUncordonNode, isUncordoningNode,
+  onDrainNode, isDrainingNode,
 }: ResourceActionsBarProps) {
   const kind = resource.kind.toLowerCase()
 
   // Delete confirmation state
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
 
+  // Node operation confirmation state
+  const [showCordonConfirm, setShowCordonConfirm] = useState(false)
+  const [showDrainConfirm, setShowDrainConfirm] = useState(false)
+  const [drainForce, setDrainForce] = useState(false)
+
   // Rollback dialog state
   const [showRevisions, setShowRevisions] = useState(false)
   const isRollbackKind = ['deployments', 'statefulsets', 'daemonsets'].includes(kind)
@@ -227,6 +254,60 @@ export function ResourceActionsBar({
         </>
       )}
 
+      {/* Node actions */}
+      {kind === 'nodes' && (
+        <>
+          {canExec && onOpenNodeTerminal && (
+            <button
+              onClick={() => onOpenNodeTerminal({ nodeName: resource.name })}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+            >
+              <Terminal className="w-3.5 h-3.5" />
+              Debug Shell
+            </button>
+          )}
+
+          {canNodeWrite && (
+            <>
+              {data?.spec?.unschedulable ? (
+                onUncordonNode && (
+                  <button
+                    onClick={() => onUncordonNode({ name: resource.name })}
+                    disabled={isUncordoningNode}
+                    className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-emerald-600 hover:bg-emerald-700 rounded-lg transition-colors disabled:opacity-50"
+                  >
+                    <Play className={`w-3.5 h-3.5 ${isUncordoningNode ? 'animate-pulse' : ''}`} />
+                    {isUncordoningNode ? 'Uncordoning...' : 'Uncordon'}
+                  </button>
+                )
+              ) : (
+                onCordonNode && (
+                  <button
+                    onClick={() => setShowCordonConfirm(true)}
+                    disabled={isCordoningNode}
+                    className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-amber-600 hover:bg-amber-700 rounded-lg transition-colors disabled:opacity-50"
+                  >
+                    <Ban className={`w-3.5 h-3.5 ${isCordoningNode ? 'animate-pulse' : ''}`} />
+                    {isCordoningNode ? 'Cordoning...' : 'Cordon'}
+                  </button>
+                )
+              )}
+
+              {onDrainNode && (
+                <button
+                  onClick={() => setShowDrainConfirm(true)}
+                  disabled={isDrainingNode}
+                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors disabled:opacity-50"
+                >
+                  <AlertTriangle className={`w-3.5 h-3.5 ${isDrainingNode ? 'animate-pulse' : ''}`} />
+                  {isDrainingNode ? 'Draining...' : 'Drain'}
+                </button>
+              )}
+            </>
+          )}
+        </>
+      )}
+
       {/* Service actions */}
       {kind === 'services' && !data?.apiVersion?.includes('serving.knative.dev') && canPortForward && resource.namespace && resource.name && renderPortForward && (
         renderPortForward({
@@ -419,8 +500,60 @@ export function ResourceActionsBar({
         resourceKind={formatKindName(resource.kind)}
         namespaceName={resource.namespace}
         isLoading={isDeleting ?? false}
+        cascadeDependents={cascadeDependents}
+        cascadeLoading={cascadeLoading}
+      />
+
+      {/* Node cordon confirmation */}
+      <ConfirmDialog
+        open={showCordonConfirm}
+        onClose={() => setShowCordonConfirm(false)}
+        onConfirm={() => {
+          onCordonNode?.({ name: resource.name })
+          setShowCordonConfirm(false)
+        }}
+        title="Cordon Node"
+        message={`Mark node "${resource.name}" as unschedulable? No new pods will be scheduled on this node.`}
+        confirmLabel="Cordon"
+        variant="warning"
+        isLoading={isCordoningNode}
       />
 
+      {/* Node drain confirmation */}
+      <ConfirmDialog
+        open={showDrainConfirm}
+        onClose={() => {
+          setShowDrainConfirm(false)
+          setDrainForce(false)
+        }}
+        onConfirm={() => {
+          onDrainNode?.({
+            name: resource.name,
+            options: { deleteEmptyDirData: true, force: drainForce || undefined },
+          })
+          setShowDrainConfirm(false)
+          setDrainForce(false)
+        }}
+        title="Drain Node"
+        message={`Cordon and evict all pods from node "${resource.name}"? DaemonSet pods will be skipped.`}
+        confirmLabel={isDrainingNode ? 'Draining...' : 'Drain'}
+        variant="danger"
+        isLoading={isDrainingNode}
+        isClosable
+      >
+        <div className="flex flex-col gap-2 text-sm text-theme-text-secondary">
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={drainForce}
+              onChange={(e) => setDrainForce(e.target.checked)}
+              className="rounded border-theme-border"
+            />
+            Force (evict pods not managed by a controller)
+          </label>
+        </div>
+      </ConfirmDialog>
+
       {showRevisions && ['deployments', 'statefulsets', 'daemonsets'].includes(kind) && (
         <RevisionHistoryDialog
           kind={resource.kind}

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -64,6 +64,7 @@ import {
   getKnativeConditionStatus,
   getRevisionStatus,
 } from '../resources/resource-utils-knative'
+import { getHTTPProxyStatus } from '../resources/resource-utils-contour'
 import {
   PodRenderer,
   WorkloadRenderer,
@@ -169,8 +170,9 @@ import {
   RuntimeClassRenderer,
   LeaseRenderer,
   TraefikIngressRouteRenderer,
+  ContourHTTPProxyRenderer,
 } from '../resources/renderers'
-import type { SelectedResource, Relationships, ResourceRef, SecretCertificateInfo } from '../../types'
+import type { SelectedResource, Relationships, ResourceRef, SecretCertificateInfo, ResolvedEnvFrom } from '../../types'
 import type { CopyHandler } from '../ui/drawer-components'
 
 /**
@@ -186,6 +188,7 @@ export interface RendererOverrides {
     data: any; onCopy: CopyHandler; copied: string | null
     onNavigate?: (ref: ResourceRef) => void
     onOpenLogs?: (podName: string, containerName: string) => void
+    resolvedEnvFrom?: ResolvedEnvFrom
   }>
   NodeRenderer?: React.ComponentType<{
     data: any; relationships?: Relationships
@@ -233,6 +236,7 @@ const KNOWN_KINDS = new Set([
   'channels', 'inmemorychannels', 'subscriptions', 'sequences', 'parallels',
   'knativeingresses', 'knativecertificates', 'serverlessservices', 'domainmappings',
   'ingressroutes', 'ingressroutetcps', 'ingressrouteudps',
+  'httpproxies',
 ])
 
 // ============================================================================
@@ -255,6 +259,10 @@ interface ResourceRendererDispatchProps {
   showMetrics?: boolean
   /** When provided, container-level Logs buttons call this instead of opening the dock */
   onOpenLogs?: (podName: string, containerName: string) => void
+  /** Resolved ConfigMap/Secret data for envFrom expansion in PodRenderer */
+  resolvedEnvFrom?: ResolvedEnvFrom
+  /** Platform-specific renderer overrides (e.g. with hooks for metrics, exec, port-forward) */
+  rendererOverrides?: RendererOverrides
   /** Optional hint shown in the Events section (e.g. link to Timeline tab) */
   eventsHint?: React.ReactNode
   /** When provided, sidebar sections (related resources, events, labels, annotations, metadata) are passed to this render prop instead of being rendered inline */
@@ -265,8 +273,6 @@ interface ResourceRendererDispatchProps {
   eventsLoading?: boolean
   /** Render prop for Prometheus metrics charts — injected by the platform wrapper */
   renderMetrics?: (props: { kind: string; namespace: string; name: string }) => React.ReactNode
-  /** Platform-specific renderer overrides (e.g. with hooks for metrics, exec, port-forward) */
-  rendererOverrides?: RendererOverrides
 }
 
 export function ResourceRendererDispatch({
@@ -287,13 +293,13 @@ export function ResourceRendererDispatch({
   events,
   eventsLoading,
   renderMetrics,
+  resolvedEnvFrom,
   rendererOverrides,
 }: ResourceRendererDispatchProps) {
   const kind = resource.kind.toLowerCase()
 
   const isKnownKind = KNOWN_KINDS.has(kind)
 
-  // Resolve renderer components — use platform override when provided, otherwise base
   const PodComp = rendererOverrides?.PodRenderer ?? PodRenderer
   const WorkloadComp = rendererOverrides?.WorkloadRenderer ?? WorkloadRenderer
   const NodeComp = rendererOverrides?.NodeRenderer ?? NodeRenderer
@@ -313,7 +319,7 @@ export function ResourceRendererDispatch({
     <div className={renderSidebar ? 'lg:flex' : ''}>
       <div className={clsx('p-4 space-y-4', renderSidebar && 'lg:flex-1 lg:min-w-0')}>
         {/* Kind-specific content - delegates to modular renderers */}
-        {kind === 'pods' && <PodComp data={data} onCopy={onCopy} copied={copied} onNavigate={onNavigate} onOpenLogs={onOpenLogs} />}
+        {kind === 'pods' && <PodComp data={data} onCopy={onCopy} copied={copied} onNavigate={onNavigate} onOpenLogs={onOpenLogs} resolvedEnvFrom={resolvedEnvFrom} />}
         {['deployments', 'statefulsets', 'daemonsets'].includes(kind) && <WorkloadComp kind={kind} data={data} onNavigate={onNavigate} />}
         {kind === 'replicasets' && <ReplicaSetRenderer data={data} />}
         {kind === 'services' && !data?.apiVersion?.includes('serving.knative.dev') && <ServiceComp data={data} onCopy={onCopy} copied={copied} />}
@@ -426,6 +432,9 @@ export function ResourceRendererDispatch({
         {/* Traefik */}
         {(kind === 'ingressroutes' || kind === 'ingressroutetcps' || kind === 'ingressrouteudps') && <TraefikIngressRouteRenderer data={data} onNavigate={onNavigate} />}
 
+        {/* Contour */}
+        {kind === 'httpproxies' && <ContourHTTPProxyRenderer data={data} onNavigate={onNavigate} />}
+
         {/* Generic renderer for CRDs and unknown resource types */}
         {!isKnownKind && <GenericRenderer data={data} />}
 
@@ -538,6 +547,15 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   if (k === 'peerauthentications') return getPeerAuthenticationStatus(data)
   if (k === 'authorizationpolicies') return getAuthorizationPolicyStatus(data)
 
+  // Contour HTTPProxy
+  if (k === 'httpproxies') {
+    const s = getHTTPProxyStatus(data)
+    if (s.status === 'healthy') return { text: s.label, color: 'bg-green-500/20 text-green-400' }
+    if (s.status === 'unhealthy') return { text: s.label, color: 'bg-red-500/20 text-red-400' }
+    if (s.status === 'degraded') return { text: s.label, color: 'bg-yellow-500/20 text-yellow-400' }
+    return null
+  }
+
   // Knative Revisions have custom status logic (scaled-to-zero, activating)
   if (k === 'knativerevisions') {
     const status = getRevisionStatus(data)

package/src/components/timeline/shared.tsx

@@ -123,19 +123,19 @@ export function HealthSpanLegend() {
   return (
     <div className="flex items-center gap-4 text-xs text-theme-text-tertiary">
       <span className="flex items-center gap-1">
-        <span className="w-4 h-2 rounded-sm bg-green-500/60" />
+        <span className="w-4 h-2 rounded-sm bg-green-500/60 dark:bg-green-600/60" />
         <span>Healthy</span>
       </span>
       <span className="flex items-center gap-1">
-        <span className="w-4 h-2 rounded-sm bg-blue-500/60" />
+        <span className="w-4 h-2 rounded-sm bg-blue-500/60 dark:bg-blue-500/60" />
         <span>Rolling</span>
       </span>
       <span className="flex items-center gap-1">
-        <span className="w-4 h-2 rounded-sm bg-amber-500/60" />
+        <span className="w-4 h-2 rounded-sm bg-amber-500/60 dark:bg-[#b8861e]" />
         <span>Degraded</span>
       </span>
       <span className="flex items-center gap-1">
-        <span className="w-4 h-2 rounded-sm bg-red-500/60" />
+        <span className="w-4 h-2 rounded-sm bg-red-500/60 dark:bg-red-500/60" />
         <span>Unhealthy</span>
       </span>
     </div>
@@ -402,15 +402,13 @@ export function HealthSpan({ health, left, width, title, createdBefore }: Health
   const getHealthColor = () => {
     switch (health) {
       case 'healthy':
-        return 'bg-green-500/60'
+        return 'bg-green-500/60 dark:bg-green-600/60'
       case 'rolling':
-        // Blue/purple for expected degradation during rollout
-        return 'bg-blue-500/60'
+        return 'bg-blue-500/60 dark:bg-blue-500/60'
       case 'degraded':
-        // Amber for unexpected degradation
-        return 'bg-amber-500/60'
+        return 'bg-amber-500/60 dark:bg-[#b8861e]'
       case 'unhealthy':
-        return 'bg-red-500/60'
+        return 'bg-red-500/60 dark:bg-red-500/60'
       default:
         // Unknown or other states
         return 'bg-gray-400/40'

package/src/components/topology/K8sResourceNode.tsx

@@ -134,6 +134,7 @@ export const NODE_DIMENSIONS: Record<NodeKind, { width: number; height: number }
   ServersTransportTCP: { width: 300, height: 56 },
   TLSOption: { width: 280, height: 56 },
   TLSStore: { width: 280, height: 56 },
+  HTTPProxy: { width: 280, height: 56 }, // Contour
 }
 
 

package/src/components/topology/TopologyFilterSidebar.tsx

@@ -77,6 +77,9 @@ const RESOURCE_KINDS: {
   { kind: 'ServersTransportTCP', label: 'Transport TCP', icon: getTopologyIcon('ServersTransportTCP'), color: 'text-cyan-400', category: 'custom' },
   { kind: 'TLSOption', label: 'TLS Option', icon: getTopologyIcon('TLSOption'), color: 'text-cyan-400', category: 'custom' },
   { kind: 'TLSStore', label: 'TLS Store', icon: getTopologyIcon('TLSStore'), color: 'text-cyan-400', category: 'custom' },
+
+  // Contour
+  { kind: 'HTTPProxy', label: 'HTTPProxy', icon: getTopologyIcon('HTTPProxy'), color: 'text-violet-400', category: 'networking' },
 ]
 
 const CATEGORIES = [

package/src/components/topology/layout.ts

@@ -444,6 +444,7 @@ function pickGroupName(nodes: TopologyNode[]): string {
     'ServersTransportTCP': 4,
     'TLSOption': 4,
     'TLSStore': 4,
+    'HTTPProxy': 1, // Contour
   }
 
   // Sort by priority and pick the first

package/src/components/topology/topology.css

@@ -96,6 +96,7 @@
 .topology-icon-nodepool { background: #6366f1; }
 .topology-icon-nodeclaim { background: #6366f1; }
 .topology-icon-nodeclass { background: #6366f1; }
+.topology-icon-httpproxy { background: #7c3aed; }
 
 /* Background dots - uses CSS variable for theme awareness */
 .react-flow__background pattern circle {

package/src/components/ui/CodeViewer.tsx

@@ -401,8 +401,7 @@ export function CodeViewer({
       </div>
 
       <style>{`
-        :root[data-theme="light"] { --code-line-number: #8b949e; }
-        :root[data-theme="dark"] { --code-line-number: #484f58; }
+        :root { --code-line-number: light-dark(#8b949e, #484f58); }
         .shiki-viewer pre {
           margin: 0;
           padding: 12px;

package/src/components/ui/ForceDeleteConfirmDialog.tsx

@@ -1,5 +1,14 @@
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
+import { ChevronDown, ChevronRight, Loader2 } from 'lucide-react'
 import { ConfirmDialog } from './ConfirmDialog'
+import { formatKindName } from './drawer-components'
+
+export interface CascadeDependent {
+  kind: string
+  namespace: string
+  name: string
+  group?: string
+}
 
 interface ForceDeleteConfirmDialogProps {
   open: boolean
@@ -9,6 +18,8 @@ interface ForceDeleteConfirmDialogProps {
   resourceKind: string
   namespaceName: string
   isLoading: boolean
+  cascadeDependents?: CascadeDependent[]
+  cascadeLoading?: boolean
 }
 
 export function ForceDeleteConfirmDialog({
@@ -19,6 +30,8 @@ export function ForceDeleteConfirmDialog({
   resourceKind,
   namespaceName,
   isLoading,
+  cascadeDependents,
+  cascadeLoading,
 }: ForceDeleteConfirmDialogProps) {
   const [forceDelete, setForceDelete] = useState(false)
 
@@ -43,15 +56,76 @@ export function ForceDeleteConfirmDialog({
       variant="danger"
       isLoading={isLoading}
     >
-      <label className="flex items-center gap-2 text-sm text-theme-text-secondary">
-        <input
-          type="checkbox"
-          checked={forceDelete}
-          onChange={(e) => setForceDelete(e.target.checked)}
-          className="w-4 h-4 rounded border-theme-border bg-theme-base text-red-600 focus:ring-red-500 focus:ring-offset-0"
-        />
-        <span>Force delete (strips finalizers and bypasses grace period)</span>
-      </label>
+      <div className="flex flex-col gap-3 pb-1">
+        {cascadeLoading && (
+          <div className="flex items-center gap-2 text-xs text-theme-text-tertiary">
+            <Loader2 className="w-3.5 h-3.5 animate-spin" />
+            Checking for dependent resources...
+          </div>
+        )}
+
+        {!cascadeLoading && cascadeDependents && cascadeDependents.length > 0 && (
+          <CascadeDependentsList dependents={cascadeDependents} />
+        )}
+
+        <label className="flex items-center gap-2 text-sm text-theme-text-secondary">
+          <input
+            type="checkbox"
+            checked={forceDelete}
+            onChange={(e) => setForceDelete(e.target.checked)}
+            className="w-4 h-4 rounded border-theme-border bg-theme-base text-red-600 focus:ring-red-500 focus:ring-offset-0"
+          />
+          <span>Force delete (strips finalizers and bypasses grace period)</span>
+        </label>
+      </div>
     </ConfirmDialog>
   )
 }
+
+const MAX_NAMES_PER_KIND = 8
+
+function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[] }) {
+  const [expanded, setExpanded] = useState(false)
+
+  const grouped = useMemo(() => {
+    const map = new Map<string, string[]>()
+    for (const dep of dependents) {
+      const kind = dep.kind
+      if (!map.has(kind)) map.set(kind, [])
+      map.get(kind)!.push(dep.name)
+    }
+    return Array.from(map.entries()).sort((a, b) => a[0].localeCompare(b[0]))
+  }, [dependents])
+
+  return (
+    <div className="rounded border border-amber-500/30 bg-amber-500/5">
+      <button
+        type="button"
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-2 w-full px-3 py-2 text-left text-xs font-medium text-amber-400 hover:bg-amber-500/10 transition-colors"
+      >
+        {expanded ? <ChevronDown className="w-3.5 h-3.5 shrink-0" /> : <ChevronRight className="w-3.5 h-3.5 shrink-0" />}
+        <span>
+          Will also delete {dependents.length} dependent {dependents.length === 1 ? 'resource' : 'resources'}
+        </span>
+      </button>
+
+      {expanded && (
+        <div className="px-3 pb-2.5 space-y-1.5">
+          {grouped.map(([kind, names]) => (
+            <div key={kind} className="text-xs">
+              <span className="font-medium text-theme-text-primary">{formatKindName(kind)}</span>
+              <span className="text-theme-text-tertiary ml-1">({names.length})</span>
+              <div className="ml-3 mt-0.5 text-theme-text-secondary font-mono break-all">
+                {names.slice(0, MAX_NAMES_PER_KIND).join(', ')}
+                {names.length > MAX_NAMES_PER_KIND && (
+                  <span className="text-theme-text-tertiary"> +{names.length - MAX_NAMES_PER_KIND} more</span>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/ui/Toast.tsx

@@ -166,7 +166,7 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
         isError
           ? 'bg-red-950/90 border-red-800/50'
           : isSuccess
-            ? 'bg-emerald-950/90 border-emerald-700/50 dark:bg-emerald-950/90 dark:border-emerald-700/50'
+            ? 'bg-green-950/90 border-green-700/50'
             : 'bg-theme-surface border-theme-border'
       )}
       style={style}
@@ -189,13 +189,13 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
       {/* Content */}
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
-          <span className={clsx('text-sm font-medium', isError ? 'text-red-200' : isSuccess ? 'text-emerald-100' : 'text-theme-text-primary')}>
+          <span className={clsx('text-sm font-medium', isError ? 'text-red-200' : isSuccess ? 'text-green-100' : 'text-theme-text-primary')}>
             {toast.message}
           </span>
-          {!isError && <Check className={clsx('w-3.5 h-3.5 shrink-0', isSuccess ? 'text-emerald-300' : 'text-green-400')} />}
+          {!isError && <Check className={clsx('w-3.5 h-3.5 shrink-0', isSuccess ? 'text-green-300' : 'text-green-400')} />}
         </div>
         {toast.detail && (
-          <p className={clsx('mt-1 text-xs', isError ? 'text-red-300/80' : isSuccess ? 'text-emerald-300/80' : 'text-theme-text-secondary')}>
+          <p className={clsx('mt-1 text-xs', isError ? 'text-red-300/80' : isSuccess ? 'text-green-300/80' : 'text-theme-text-secondary')}>
             {toast.detail}
           </p>
         )}
@@ -214,7 +214,7 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
           isError
             ? 'text-red-400 hover:text-red-300 hover:bg-red-900/50'
             : isSuccess
-              ? 'text-emerald-400 hover:text-emerald-300 hover:bg-emerald-900/50'
+              ? 'text-green-400 hover:text-green-300 hover:bg-green-900/50'
               : 'text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated'
         )}
       >

package/src/components/ui/drawer-components.tsx

@@ -164,10 +164,10 @@ export function ConditionsSection({ conditions }: { conditions?: any[] }) {
 // ============================================================================
 
 const ALERT_COLORS = {
-  error:   { bg: 'bg-red-500/10', border: 'border-red-500/30', title: 'text-red-400', message: 'text-red-300/80', list: 'text-red-300', bullet: 'text-red-400/60' },
-  warning: { bg: 'bg-yellow-500/10', border: 'border-yellow-500/30', title: 'text-yellow-400', message: 'text-yellow-300/80', list: 'text-yellow-300', bullet: 'text-yellow-400/60' },
-  info:    { bg: 'bg-blue-500/10', border: 'border-blue-500/30', title: 'text-blue-400', message: 'text-blue-300/80', list: 'text-blue-300', bullet: 'text-blue-400/60' },
-  success: { bg: 'bg-green-500/10', border: 'border-green-500/30', title: 'text-green-400', message: 'text-green-300/80', list: 'text-green-300', bullet: 'text-green-400/60' },
+  error:   { bg: 'bg-red-500/10', border: 'border-red-500/30', title: 'text-red-700 dark:text-red-400', message: 'text-red-600/80 dark:text-red-400/80', list: 'text-red-600 dark:text-red-400', bullet: 'text-red-500/60 dark:text-red-400/60' },
+  warning: { bg: 'bg-yellow-500/10', border: 'border-yellow-500/30', title: 'text-yellow-700 dark:text-yellow-400', message: 'text-yellow-600/80 dark:text-yellow-400/80', list: 'text-yellow-600 dark:text-yellow-400', bullet: 'text-yellow-500/60 dark:text-yellow-400/60' },
+  info:    { bg: 'bg-blue-500/10', border: 'border-blue-500/30', title: 'text-blue-700 dark:text-blue-400', message: 'text-blue-600/80 dark:text-blue-400/80', list: 'text-blue-600 dark:text-blue-400', bullet: 'text-blue-500/60 dark:text-blue-400/60' },
+  success: { bg: 'bg-green-500/10', border: 'border-green-500/30', title: 'text-green-700 dark:text-green-400', message: 'text-green-600/80 dark:text-green-400/80', list: 'text-green-600 dark:text-green-400', bullet: 'text-green-500/60 dark:text-green-400/60' },
 } as const
 
 const DEFAULT_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -453,24 +453,24 @@ export function AppInfoSection({ data }: { data: any }) {
 export function getKindColor(kind: string): string {
   const k = kind.toLowerCase()
   // Use darker text for light mode contrast, brighter for dark mode
-  if (k.includes('pod')) return 'bg-lime-500/20 text-lime-700 dark:text-lime-300 border-lime-500/30'
-  if (k.includes('deployment')) return 'bg-emerald-500/20 text-emerald-700 dark:text-emerald-300 border-emerald-500/30'
-  if (k.includes('service')) return 'bg-blue-500/20 text-blue-700 dark:text-blue-300 border-blue-500/30'
-  if (k.includes('gateway')) return 'bg-violet-500/20 text-violet-700 dark:text-violet-300 border-violet-500/30'
-  if (k.includes('route')) return 'bg-purple-500/20 text-purple-700 dark:text-purple-300 border-purple-500/30'
-  if (k.includes('ingress')) return 'bg-violet-500/20 text-violet-700 dark:text-violet-300 border-violet-500/30'
-  if (k.includes('configmap')) return 'bg-amber-500/20 text-amber-700 dark:text-amber-300 border-amber-500/30'
-  if (k.endsWith('report')) return 'bg-rose-500/20 text-rose-700 dark:text-rose-300 border-rose-500/30'
-  if (k.includes('secret')) return 'bg-red-500/20 text-red-700 dark:text-red-300 border-red-500/30'
-  if (k.includes('daemonset')) return 'bg-teal-500/20 text-teal-700 dark:text-teal-300 border-teal-500/30'
-  if (k.includes('statefulset')) return 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border-cyan-500/30'
-  if (k.includes('replicaset')) return 'bg-green-500/20 text-green-700 dark:text-green-300 border-green-500/30'
-  if (k.includes('hpa') || k.includes('horizontalpodautoscaler')) return 'bg-pink-500/20 text-pink-700 dark:text-pink-300 border-pink-500/30'
-  if (k.includes('cronjob')) return 'bg-orange-500/20 text-orange-700 dark:text-orange-300 border-orange-500/30'
-  if (k.includes('job')) return 'bg-orange-500/20 text-orange-700 dark:text-orange-300 border-orange-500/30'
-  if (k.includes('node')) return 'bg-gray-500/20 text-gray-700 dark:text-gray-300 border-gray-500/30'
-  if (k.includes('namespace')) return 'bg-blue-500/20 text-blue-700 dark:text-blue-300 border-blue-500/30'
-  if (k.includes('persistentvolume')) return 'bg-purple-500/20 text-purple-700 dark:text-purple-300 border-purple-500/30'
+  if (k.includes('pod')) return 'bg-lime-500/20 text-lime-700 dark:text-lime-400 border-lime-500/30'
+  if (k.includes('deployment')) return 'bg-emerald-500/20 text-emerald-700 dark:text-emerald-400 border-emerald-500/30'
+  if (k.includes('service')) return 'bg-blue-500/20 text-blue-700 dark:text-blue-400 border-blue-500/30'
+  if (k.includes('gateway')) return 'bg-violet-500/20 text-violet-700 dark:text-violet-400 border-violet-500/30'
+  if (k.includes('route')) return 'bg-purple-500/20 text-purple-700 dark:text-purple-400 border-purple-500/30'
+  if (k.includes('ingress')) return 'bg-violet-500/20 text-violet-700 dark:text-violet-400 border-violet-500/30'
+  if (k.includes('configmap')) return 'bg-amber-500/20 text-amber-700 dark:text-amber-400 border-amber-500/30'
+  if (k.endsWith('report')) return 'bg-rose-500/20 text-rose-700 dark:text-rose-400 border-rose-500/30'
+  if (k.includes('secret')) return 'bg-red-500/20 text-red-700 dark:text-red-400 border-red-500/30'
+  if (k.includes('daemonset')) return 'bg-teal-500/20 text-teal-700 dark:text-teal-400 border-teal-500/30'
+  if (k.includes('statefulset')) return 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 border-cyan-500/30'
+  if (k.includes('replicaset')) return 'bg-green-500/20 text-green-700 dark:text-green-400 border-green-500/30'
+  if (k.includes('hpa') || k.includes('horizontalpodautoscaler')) return 'bg-pink-500/20 text-pink-700 dark:text-pink-400 border-pink-500/30'
+  if (k.includes('cronjob')) return 'bg-orange-500/20 text-orange-700 dark:text-orange-400 border-orange-500/30'
+  if (k.includes('job')) return 'bg-orange-500/20 text-orange-700 dark:text-orange-400 border-orange-500/30'
+  if (k.includes('node')) return 'bg-gray-500/20 text-gray-700 dark:text-gray-400 border-gray-500/30'
+  if (k.includes('namespace')) return 'bg-blue-500/20 text-blue-700 dark:text-blue-400 border-blue-500/30'
+  if (k.includes('persistentvolume')) return 'bg-purple-500/20 text-purple-700 dark:text-purple-400 border-purple-500/30'
   // Default color for CRDs
   return 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-300 border-fuchsia-500/30'
 }
@@ -485,11 +485,17 @@ export function formatKindName(kind: string): string {
     secrets: 'Secret', jobs: 'Job', cronjobs: 'CronJob', hpas: 'HPA',
     horizontalpodautoscalers: 'HPA', nodes: 'Node', namespaces: 'Namespace',
     persistentvolumeclaims: 'PVC', persistentvolumes: 'PV',
+    httpproxies: 'HTTPProxy',
   }
   if (names[k]) return names[k]
 
   // For unknown kinds (CRDs), use the original kind name
   // or format it nicely if it's a plural name
+  if (k.endsWith('ies')) {
+    // Handle -ies → -y (e.g., httpproxies → Httpproxy)
+    const singular = kind.slice(0, -3) + 'y'
+    return singular.charAt(0).toUpperCase() + singular.slice(1)
+  }
   if (kind.endsWith('s') && !kind.endsWith('ss')) {
     // Try to singularize simple plurals
     const singular = kind.slice(0, -1)