@skyhook-io/k8s-ui 1.1.0 → 1.2.0

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)

package/src/components/ui/index.ts

@@ -1,4 +1,5 @@
 export { Tooltip } from './Tooltip'
+export { DialogPortal } from './DialogPortal'
 export { ConfirmDialog } from './ConfirmDialog'
 export { HealthRing } from './HealthRing'
 export { MetricsChart, MetricsSparkline } from './MetricsChart'

package/src/components/workload/WorkloadView.tsx

@@ -17,7 +17,7 @@ import {
   X,
   BarChart3,
 } from 'lucide-react'
-import type { TimelineEvent, ResourceRef, Relationships, SelectedResource } from '../../types'
+import type { TimelineEvent, ResourceRef, Relationships, SelectedResource, ResolvedEnvFrom } from '../../types'
 import type { NavigateToResource } from '../../utils/navigation'
 import { refToSelectedResource, pluralToKind } from '../../utils/navigation'
 import { isChangeEvent, isHistoricalEvent } from '../../types'
@@ -38,7 +38,7 @@ import {
 } from '../timeline/shared'
 import { ResourceActionsBar } from '../shared/ResourceActionsBar'
 import { EditableYamlView, SaveSuccessAnimation } from '../shared/EditableYamlView'
-import { ResourceRendererDispatch, getResourceStatus } from '../shared/ResourceRendererDispatch'
+import { ResourceRendererDispatch, getResourceStatus, type RendererOverrides } from '../shared/ResourceRendererDispatch'
 import { getKindColor, formatKindName } from '../ui/drawer-components'
 
 type TabType = 'overview' | 'timeline' | 'logs' | 'metrics' | 'yaml'
@@ -94,6 +94,8 @@ interface WorkloadViewProps {
   onUpdateResource?: (params: { kind: string; namespace: string; name: string; yaml: string }) => Promise<void>
   /** Whether the resource is being updated */
   isUpdatingResource?: boolean
+  /** Error message from the last update attempt */
+  updateResourceError?: string | null
 
   // ── Tab state (optional URL sync) ────────────────────────────────────────
   /** Controlled active tab. If not provided, managed internally. */
@@ -123,6 +125,10 @@ interface WorkloadViewProps {
   // ── ResourceActionsBar props (passed through) ────────────────────────────
   /** All props for the actions bar (forwarded as-is) */
   actionsBarProps?: Record<string, any>
+  /** Platform-specific renderer overrides (e.g. with hooks for metrics, exec, port-forward) */
+  rendererOverrides?: RendererOverrides
+  /** Resolved ConfigMap/Secret data for envFrom expansion in PodRenderer */
+  resolvedEnvFrom?: ResolvedEnvFrom
 }
 
 export function WorkloadView({
@@ -152,6 +158,7 @@ export function WorkloadView({
   // Mutations
   onUpdateResource,
   isUpdatingResource,
+  updateResourceError,
   // Tab state
   activeTab: controlledTab,
   onTabChange,
@@ -161,6 +168,10 @@ export function WorkloadView({
   isMetricsAvailable,
   // Actions bar
   actionsBarProps,
+  // Renderer overrides
+  rendererOverrides,
+  // Pod env expansion
+  resolvedEnvFrom,
 }: WorkloadViewProps) {
   // Normalize kind: URL has plural lowercase, internal logic uses singular PascalCase
   const kind = pluralToKind(kindProp)
@@ -416,6 +427,9 @@ export function WorkloadView({
               onCopy={(text) => copyToClipboard(text, 'yaml')}
               copied={copied === 'yaml'}
               onSaved={handleSaved}
+              onSave={onUpdateResource}
+              isSaving={isUpdatingResource}
+              saveError={updateResourceError}
             />
           ) : (
             <ResourceRendererDispatch
@@ -428,6 +442,9 @@ export function WorkloadView({
               onNavigate={onNavigateToResource ? (ref) => onNavigateToResource(refToSelectedResource(ref)) : undefined}
               onSaveSecretValue={canUpdateSecrets ? handleSaveSecretValue : undefined}
               isSavingSecret={isUpdatingResource}
+              rendererOverrides={rendererOverrides}
+              resolvedEnvFrom={resolvedEnvFrom}
+              renderMetrics={renderMetricsTab}
             />
           )}
         </div>
@@ -566,6 +583,8 @@ export function WorkloadView({
             isSavingSecret={isUpdatingResource}
             onOpenLogs={handleOpenLogs}
             onSwitchToTimeline={() => handleSetTab('timeline')}
+            rendererOverrides={rendererOverrides}
+            resolvedEnvFrom={resolvedEnvFrom}
           />
         )}
         {activeTab === 'timeline' && (
@@ -613,6 +632,9 @@ export function WorkloadView({
                 onCopy={(text) => copyToClipboard(text, 'yaml')}
                 copied={copied === 'yaml'}
                 onSaved={handleSaved}
+                onSave={onUpdateResource}
+                isSaving={isUpdatingResource}
+                saveError={updateResourceError}
               />
             )}
           </div>
@@ -1044,6 +1066,8 @@ function InfoTab({
   isSavingSecret,
   onOpenLogs,
   onSwitchToTimeline,
+  rendererOverrides,
+  resolvedEnvFrom,
 }: {
   resource: any
   selectedResource: SelectedResource
@@ -1056,6 +1080,8 @@ function InfoTab({
   isSavingSecret?: boolean
   onOpenLogs?: (podName: string, containerName: string) => void
   onSwitchToTimeline?: () => void
+  rendererOverrides?: RendererOverrides
+  resolvedEnvFrom?: ResolvedEnvFrom
 }) {
   if (isLoading) {
     return (
@@ -1088,6 +1114,8 @@ function InfoTab({
         showCommonSections={true}
         showMetrics={false}
         onOpenLogs={onOpenLogs}
+        rendererOverrides={rendererOverrides}
+        resolvedEnvFrom={resolvedEnvFrom}
         eventsHint={onSwitchToTimeline && (
           <button
             onClick={onSwitchToTimeline}

package/src/theme/index.ts

@@ -0,0 +1,3 @@
+// Theme barrel export
+// CSS files are imported directly: @import "@skyhook-io/k8s-ui/theme/variables.css"
+// This file exists for consumers that want a JS entry point for the theme module.

package/src/theme/tailwind-theme.css

@@ -0,0 +1,61 @@
+/*
+ * @skyhook-io/k8s-ui Tailwind Theme
+ *
+ * Maps CSS variables to Tailwind v4 @theme tokens.
+ * Enables utility classes: bg-theme-surface, text-theme-text-primary, border-accent, etc.
+ * Import after variables.css.
+ */
+
+@theme inline {
+  /* Backgrounds */
+  --color-theme-base: var(--bg-base);
+  --color-theme-surface: var(--bg-surface);
+  --color-theme-elevated: var(--bg-elevated);
+  --color-theme-hover: var(--bg-hover);
+  --color-theme-active: var(--bg-active);
+
+  /* Text */
+  --color-theme-text-primary: var(--text-primary);
+  --color-theme-text-secondary: var(--text-secondary);
+  --color-theme-text-tertiary: var(--text-tertiary);
+  --color-theme-text-disabled: var(--text-disabled);
+
+  /* Borders */
+  --color-theme-border: var(--border-default);
+  --color-theme-border-light: var(--border-light);
+  --color-theme-border-subtle: var(--border-subtle);
+
+  /* Accent */
+  --color-accent: var(--accent);
+  --color-accent-light: var(--accent-light);
+  --color-accent-muted: var(--accent-muted);
+  --color-accent-text: var(--accent-text);
+
+  /* Skyhook brand */
+  --color-skyhook: #2D7AFF;
+  --color-skyhook-50: #E6F0FF;
+  --color-skyhook-100: #CCE0FF;
+  --color-skyhook-200: #99C2FF;
+  --color-skyhook-300: #66A3FF;
+  --color-skyhook-400: #3385FF;
+  --color-skyhook-500: #2D7AFF;
+  --color-skyhook-600: #0052CC;
+  --color-skyhook-700: #003D99;
+  --color-skyhook-800: #002966;
+  --color-skyhook-900: #001433;
+
+  /* K8s resource type colors */
+  --color-k8s-internet: #2D7AFF;
+  --color-k8s-ingress: #8b5cf6;
+  --color-k8s-service: #3b82f6;
+  --color-k8s-deployment: #10b981;
+  --color-k8s-daemonset: #14b8a6;
+  --color-k8s-statefulset: #06b6d4;
+  --color-k8s-replicaset: #22c55e;
+  --color-k8s-pod: #84cc16;
+  --color-k8s-configmap: #f59e0b;
+  --color-k8s-secret: #ef4444;
+  --color-k8s-hpa: #ec4899;
+  --color-k8s-job: #a855f7;
+  --color-k8s-cronjob: #d946ef;
+}

package/src/theme/variables.css

@@ -0,0 +1,121 @@
+/*
+ * @skyhook-io/k8s-ui Theme Variables
+ *
+ * Single source of truth for the theme contract.
+ * Uses light-dark() for dual-value definitions.
+ * Consumers @import this file, then override any variables via CSS cascade.
+ *
+ * Toggle mechanism:
+ *   document.documentElement.classList.toggle('dark', isDark)
+ *   document.documentElement.style.colorScheme = isDark ? 'dark' : 'light'
+ */
+
+:root {
+  color-scheme: light dark;
+
+  /* ── Brand ── */
+  --color-brand: #2D7AFF;
+  --color-brand-light: light-dark(#1A5FCC, #5A9AFF);
+
+  /* ── Semantic status (theme-independent) ── */
+  --color-success: #22C55E;
+  --color-success-light: #4ADE80;
+  --color-success-dark: #16A34A;
+  --color-warning: #F59E0B;
+  --color-warning-light: #FBBF24;
+  --color-warning-dark: #D97706;
+  --color-error: #EF4444;
+  --color-error-light: #F87171;
+  --color-error-dark: #DC2626;
+  --color-info: #3B82F6;
+
+  /* ── Backgrounds ── */
+  --bg-base: light-dark(#f7f9fc, #0c1425);
+  --bg-surface: light-dark(#ffffff, #162033);
+  --bg-elevated: light-dark(#edf2f8, #1e2d45);
+  --bg-hover: light-dark(#e2e8f0, #2a3d58);
+  --bg-active: light-dark(#dbeafe, #1e3a5f);
+
+  /* ── Text ── */
+  --text-primary: light-dark(#0f172a, #f8fafc);
+  --text-secondary: light-dark(#475569, #cbd5e1);
+  --text-tertiary: light-dark(#64748b, #94a3b8);
+  --text-disabled: light-dark(#94a3b8, #64748b);
+
+  /* ── Borders ── */
+  --border-default: light-dark(#e2e8f0, #1e2d45);
+  --border-light: light-dark(#cbd5e1, #2a3d58);
+  --border-subtle: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.02));
+  --border-focus: var(--color-brand);
+
+  /* ── Accent ── */
+  --accent: var(--color-brand);
+  --accent-light: var(--color-brand-light);
+  --accent-muted: light-dark(rgba(45, 122, 255, 0.1), rgba(45, 122, 255, 0.2));
+  --accent-text: light-dark(#1d4ed8, #93c5fd);
+
+  /* ── Shadows (light defaults — can't use light-dark() for comma-separated values) ── */
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
+  --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.03);
+  --shadow-lg: 0 12px 32px -6px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
+
+  /* ── Topology ── */
+  --topology-node-border: light-dark(rgba(0, 0, 0, 0.10), rgba(255, 255, 255, 0.08));
+  --topology-node-shadow: 0 2px 6px rgba(0,0,0,0.05), 0 6px 16px rgba(0,0,0,0.04);
+  --topology-bg-dots: light-dark(rgba(148, 163, 184, 0.25), #1e2d45);
+
+  /* Topology edge colors (theme-independent identity colors) */
+  --edge-routes-to: #22c55e;
+  --edge-exposes: #3b82f6;
+  --edge-manages: #64748b;
+  --edge-configures: #f59e0b;
+  --edge-uses: #ec4899;
+
+  /* ── Group styling ── */
+  --group-border-namespace: light-dark(rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.4));
+  --group-border-app: light-dark(rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.4));
+  --group-border-label: light-dark(rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.4));
+
+  --group-header-namespace: light-dark(rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.2));
+  --group-header-app: light-dark(rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.2));
+  --group-header-label: light-dark(rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.2));
+
+  --group-label-namespace: light-dark(#1d4ed8, #93c5fd);
+  --group-label-app: light-dark(#047857, #6ee7b7);
+  --group-label-label: light-dark(#b45309, #fcd34d);
+
+  --group-icon-namespace: light-dark(#2563eb, #60a5fa);
+  --group-icon-app: light-dark(#059669, #34d399);
+  --group-icon-label: light-dark(#d97706, #fbbf24);
+
+  /* ── ANSI terminal colors (theme-aware for log viewer) ── */
+  --ansi-black:   light-dark(#3b3b3b, #4c4c4c);
+  --ansi-red:     light-dark(#cd3131, #cd3131);
+  --ansi-green:   light-dark(#00a854, #0dbc79);
+  --ansi-yellow:  light-dark(#b8860b, #e5e510);
+  --ansi-blue:    light-dark(#2472c8, #2472c8);
+  --ansi-magenta: light-dark(#bc3fbc, #bc3fbc);
+  --ansi-cyan:    light-dark(#11a8cd, #11a8cd);
+  --ansi-white:   light-dark(#e5e5e5, #e5e5e5);
+  --ansi-bright-black:   light-dark(#555555, #767676);
+  --ansi-bright-red:     light-dark(#f14c4c, #f14c4c);
+  --ansi-bright-green:   light-dark(#17b96a, #23d18b);
+  --ansi-bright-yellow:  light-dark(#c49700, #f5f543);
+  --ansi-bright-blue:    light-dark(#3b8eea, #3b8eea);
+  --ansi-bright-magenta: light-dark(#d670d6, #d670d6);
+  --ansi-bright-cyan:    light-dark(#29b8db, #29b8db);
+  --ansi-bright-white:   light-dark(#e5e5e5, #e5e5e5);
+
+  /* ── Scrollbar ── */
+  --scrollbar-track: light-dark(#f1f5f9, #162033);
+  --scrollbar-thumb: light-dark(#cbd5e1, #2a3d58);
+  --scrollbar-thumb-hover: light-dark(#94a3b8, #3d5474);
+}
+
+/* Dark overrides for comma-separated values that can't use light-dark() */
+.dark {
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1);
+  --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.1);
+  --shadow-lg: 0 12px 32px -6px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.1);
+  --topology-node-shadow: 0 2px 6px rgba(0,0,0,0.2), 0 6px 16px rgba(0,0,0,0.15);
+}

package/src/types/core.ts

@@ -25,11 +25,13 @@ export interface ResourcePermissions {
 // Feature capabilities based on RBAC permissions
 export interface Capabilities {
   exec: boolean           // Terminal feature (pods/exec)
+  localTerminal: boolean  // Local terminal available (not in-cluster, not disabled)
   logs: boolean           // Log viewer (pods/log)
   portForward: boolean    // Port forwarding (pods/portforward)
   secrets: boolean        // List secrets
   secretsUpdate: boolean  // Update secrets (inline editing)
   helmWrite: boolean      // Helm write operations (install, upgrade, rollback, uninstall, apply values)
+  nodeWrite: boolean      // Node write operations (cordon, uncordon, drain)
   mcpEnabled: boolean     // MCP server is running
   resources?: ResourcePermissions // Per-resource-type permissions
 }
@@ -95,6 +97,7 @@ export type CoreNodeKind =
   | 'ServersTransportTCP' // Traefik ServersTransportTCP
   | 'TLSOption'          // Traefik TLSOption
   | 'TLSStore'           // Traefik TLSStore
+  | 'HTTPProxy'          // Contour HTTPProxy
 
 // NodeKind can be a core kind or any arbitrary CRD kind string
 export type NodeKind = CoreNodeKind | (string & {})
@@ -146,10 +149,9 @@ export interface Topology {
   nodes: TopologyNode[]
   edges: TopologyEdge[]
   warnings?: string[] // Warnings about resources that failed to load
-  truncated?: boolean // True if topology was truncated due to size limit
-  totalNodes?: number // Total nodes before truncation (only set if truncated)
   largeCluster?: boolean // True if cluster exceeds large cluster threshold
   hiddenKinds?: string[] // Resource kinds auto-hidden for performance
+  requiresNamespaceFilter?: boolean // True if cluster is too large for all-namespace topology
   crdDiscoveryStatus?: 'idle' | 'discovering' | 'ready' // CRD discovery status
 }
 
@@ -329,6 +331,14 @@ export interface SelectedResource {
   group?: string  // API group for CRDs (e.g., 'metrics.k8s.io')
 }
 
+// Resolved envFrom ConfigMap/Secret data for pod env var expansion
+export interface ResolvedEnvFromEntry {
+  keys: string[]
+  values: Record<string, string>
+  isSecret: boolean
+}
+export type ResolvedEnvFrom = Record<string, ResolvedEnvFromEntry>
+
 // Resource reference (for relationships)
 export interface ResourceRef {
   kind: string
@@ -745,6 +755,7 @@ export interface TrafficHelmChartInfo {
   repoUrl: string
   chartName: string
   version?: string
+  defaultValues?: Record<string, unknown>
 }
 
 // Recommendation for installing a traffic source

package/src/utils/animation.ts

@@ -18,7 +18,7 @@ export const CSS_EASE = 'cubic-bezier(0.32, 0.72, 0, 1)'
 /** Standard UI transitions: overlays, panels, toasts */
 export const DURATION_NORMAL = 300
 /** Dock height, subtle layout shifts */
-export const DURATION_DOCK = 250
+export const DURATION_DOCK = 150
 /** Toast exit animation */
 export const DURATION_TOAST_EXIT = 200