@skyhook-io/k8s-ui 1.1.1 → 1.2.0

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'
@@ -125,10 +125,10 @@ interface WorkloadViewProps {
   // ── ResourceActionsBar props (passed through) ────────────────────────────
   /** All props for the actions bar (forwarded as-is) */
   actionsBarProps?: Record<string, any>
-
-  // ── Renderer overrides ──────────────────────────────────────────────────
   /** 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({
@@ -170,6 +170,8 @@ export function WorkloadView({
   actionsBarProps,
   // Renderer overrides
   rendererOverrides,
+  // Pod env expansion
+  resolvedEnvFrom,
 }: WorkloadViewProps) {
   // Normalize kind: URL has plural lowercase, internal logic uses singular PascalCase
   const kind = pluralToKind(kindProp)
@@ -441,6 +443,8 @@ export function WorkloadView({
               onSaveSecretValue={canUpdateSecrets ? handleSaveSecretValue : undefined}
               isSavingSecret={isUpdatingResource}
               rendererOverrides={rendererOverrides}
+              resolvedEnvFrom={resolvedEnvFrom}
+              renderMetrics={renderMetricsTab}
             />
           )}
         </div>
@@ -580,6 +584,7 @@ export function WorkloadView({
             onOpenLogs={handleOpenLogs}
             onSwitchToTimeline={() => handleSetTab('timeline')}
             rendererOverrides={rendererOverrides}
+            resolvedEnvFrom={resolvedEnvFrom}
           />
         )}
         {activeTab === 'timeline' && (
@@ -1062,6 +1067,7 @@ function InfoTab({
   onOpenLogs,
   onSwitchToTimeline,
   rendererOverrides,
+  resolvedEnvFrom,
 }: {
   resource: any
   selectedResource: SelectedResource
@@ -1075,6 +1081,7 @@ function InfoTab({
   onOpenLogs?: (podName: string, containerName: string) => void
   onSwitchToTimeline?: () => void
   rendererOverrides?: RendererOverrides
+  resolvedEnvFrom?: ResolvedEnvFrom
 }) {
   if (isLoading) {
     return (
@@ -1108,6 +1115,7 @@ function InfoTab({
         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 & {})
@@ -328,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
@@ -744,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