@skyhook-io/k8s-ui 1.2.4 → 1.3.1

package/src/components/workload/ResourceDetailDrawer.tsx

@@ -115,12 +115,12 @@ export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab
   return (
     <div
       className={clsx(
-        'fixed right-0 bg-theme-surface border-l border-theme-border flex flex-col shadow-2xl z-40',
+        'fixed right-0 bg-theme-surface border-l border-theme-border flex flex-col shadow-drawer z-40',
         TRANSITION_DRAWER,
         isOpen
           ? 'translate-x-0 opacity-100'
           : 'translate-x-full opacity-0',
-        expanded && 'bg-theme-base !border-l-0',
+        expanded && '!border-l-0',
       )}
       style={{
         width: expanded ? `calc(100vw - ${leftOffset}px)` : drawerWidth,
@@ -136,9 +136,9 @@ export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab
         <div
           onMouseDown={handleResizeStart}
           className={clsx(
-            'absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize z-10 hover:bg-blue-500/50 transition-colors',
+            'absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize z-10 hover:bg-skyhook-500/50 transition-colors',
             'hidden sm:block',
-            isResizing && 'bg-blue-500/50'
+            isResizing && 'bg-skyhook-500/50'
           )}
         />
       )}

package/src/components/workload/WorkloadView.tsx

@@ -351,11 +351,11 @@ export function WorkloadView({
           {/* Top row: badges and controls */}
           <div className="flex items-center justify-between px-4 pt-3 pb-2">
             <div className="flex items-center gap-2 flex-wrap">
-              <span className={clsx('px-2 py-0.5 text-xs font-medium rounded border', getKindColor(apiKind))}>
+              <span className={clsx('badge', getKindColor(apiKind))}>
                 {formatKindName(apiKind)}
               </span>
               {status && (
-                <span className={clsx('px-2 py-0.5 text-xs font-medium rounded', status.color)}>
+                <span className={clsx('badge', status.color)}>
                   {status.text}
                 </span>
               )}
@@ -454,7 +454,7 @@ export function WorkloadView({
 
   // ── Expanded (full) mode ─────────────────────────────────────────────────
   return (
-    <div className="flex flex-col h-full w-full bg-theme-base">
+    <div className="flex flex-col h-full w-full bg-theme-surface">
       {/* Header */}
       <div className="shrink-0 border-b border-theme-border bg-theme-surface">
         <div className="px-6 py-3 flex items-start gap-4">
@@ -480,11 +480,11 @@ export function WorkloadView({
               </button>
             </div>
             <div className="flex items-center gap-3 text-sm text-theme-text-secondary">
-              <span className={clsx('px-2 py-0.5 text-xs font-medium rounded border', getKindColor(apiKind))}>
+              <span className={clsx('badge', getKindColor(apiKind))}>
                 {formatKindName(apiKind)}
               </span>
               {status && (
-                <span className={clsx('px-2 py-0.5 text-xs font-medium rounded', status.color)}>
+                <span className={clsx('badge', status.color)}>
                   {status.text}
                 </span>
               )}
@@ -539,7 +539,7 @@ export function WorkloadView({
               <Activity className="w-4 h-4" />
               Timeline
               {resourceEvents.length > 0 && (
-                <span className="ml-1 px-1.5 py-0.5 text-xs bg-theme-elevated rounded">{resourceEvents.length}</span>
+                <span className="ml-1 badge-sm bg-theme-elevated">{resourceEvents.length}</span>
               )}
             </TabButton>
             {allPods.length > 0 && renderLogsTab && (
@@ -692,7 +692,7 @@ function TabButton({ active, onClick, children }: { active: boolean; onClick: ()
       className={clsx(
         'flex items-center gap-1.5 px-3 py-2 text-sm font-medium border-b-2 transition-colors',
         active
-          ? 'text-theme-text-primary border-blue-500'
+          ? 'text-theme-text-primary border-skyhook-500'
           : 'text-theme-text-secondary border-transparent hover:text-theme-text-primary hover:border-theme-border-light'
       )}
     >
@@ -1016,15 +1016,15 @@ function EventsTab({
                       {new Date(evt.timestamp).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' })}
                     </td>
                     <td className="px-4 py-3">
-                      <span className={clsx('text-xs px-1.5 py-0.5 rounded', getKindBadgeColor(evt.kind))}>
+                      <span className={clsx('badge-sm', getKindBadgeColor(evt.kind))}>
                         {evt.kind}
                       </span>
                     </td>
                     <td className="px-4 py-3">
                       {isWarning ? (
-                        <span className="text-xs px-2 py-0.5 rounded bg-amber-500/20 text-amber-500">Active</span>
+                        <span className="badge status-degraded">Active</span>
                       ) : evt.healthState ? (
-                        <span className={clsx('text-xs px-2 py-0.5 rounded', getHealthBadgeColor(evt.healthState))}>{evt.healthState}</span>
+                        <span className={clsx('badge', getHealthBadgeColor(evt.healthState))}>{evt.healthState}</span>
                       ) : null}
                     </td>
                   </tr>

package/src/theme/components.css

@@ -0,0 +1,195 @@
+/* ============================================
+   SHARED COMPONENT CLASSES (@skyhook-io/k8s-ui)
+   All in @layer components so Tailwind utilities can override them.
+   Import: @skyhook-io/k8s-ui/theme/components.css
+   Requires: @skyhook-io/k8s-ui/theme/variables.css imported first.
+   ============================================ */
+
+@layer components {
+
+  /* ── BRAND BUTTONS ── */
+
+  .btn-brand {
+    background-color: var(--color-brand);
+    color: white;
+    border-radius: 0.625rem;
+    transition: background-color 0.15s ease;
+  }
+  .btn-brand:hover {
+    background-color: var(--color-brand-light);
+  }
+  .btn-brand:disabled {
+    opacity: 0.5;
+  }
+
+  .btn-brand-muted {
+    background-color: light-dark(var(--color-brand-light), color-mix(in srgb, var(--color-brand) 60%, black));
+    color: white;
+    border-radius: 0.625rem;
+    transition: background-color 0.15s ease;
+  }
+  .btn-brand-muted:hover {
+    background-color: var(--color-brand);
+  }
+  .btn-brand-muted:disabled {
+    opacity: 0.5;
+  }
+
+  .btn-brand-toggle {
+    background-color: color-mix(in srgb, var(--color-brand) 50%, transparent);
+    color: var(--text-primary);
+    border-radius: 0.375rem;
+  }
+
+  /* ── SELECTION / HIGHLIGHT ── */
+
+  .selection {
+    background-color: var(--selection-bg);
+  }
+  .selection-strong {
+    background-color: var(--selection-bg-strong);
+  }
+  .selection-ring {
+    box-shadow: inset 0 0 0 1px var(--selection-border);
+  }
+  .selection-text {
+    color: var(--selection-text);
+  }
+
+  /* ── DIALOG / MODAL ── */
+
+  .dialog {
+    background-color: var(--bg-surface);
+    border: 0.5px solid var(--border-default);
+    border-radius: 0.875rem;
+    box-shadow: var(--shadow-lg);
+  }
+
+  /* ── BADGES ── */
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.125rem 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    border-radius: 0.375rem;
+    border-width: 0.5px;
+    border-style: solid;
+    border-color: transparent;
+    line-height: 1.25rem;
+  }
+
+  .badge-sm {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.125rem 0.375rem;
+    font-size: 0.75rem;
+    border-radius: 0.375rem;
+    border-width: 0.5px;
+    border-style: solid;
+    border-color: transparent;
+    line-height: 1.25rem;
+  }
+
+  /* ── INNER CARDS ── */
+
+  .card-inner {
+    background: var(--bg-base);
+    border-radius: 0.375rem;
+    border: 1px solid var(--border-subtle);
+    padding: 0.5rem;
+  }
+
+  .card-inner-lg {
+    background: var(--bg-base);
+    border-radius: 0.625rem;
+    border: 1px solid var(--border-subtle);
+    padding: 0.75rem;
+  }
+
+  /* ── SUBTLE BORDERS ── */
+
+  .table-divide-subtle > * + * {
+    border-top-width: 0.5px;
+    border-top-style: solid;
+    border-top-color: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
+  }
+
+  .border-b-subtle {
+    border-bottom: 0.5px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
+  }
+
+  .border-r-subtle {
+    border-right: 0.5px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
+  }
+
+  .border-t-subtle {
+    border-top: 0.5px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
+  }
+
+  /* ── STATUS BADGE COLORS ── */
+
+  /* Healthy/Success - emerald */
+  .status-healthy {
+    background-color: light-dark(#d1fae5, rgba(6, 78, 59, 0.5));
+    color: light-dark(#047857, #6ee7b7);
+    border-color: light-dark(#6ee7b7, rgba(6, 78, 59, 0.4));
+  }
+
+  /* Degraded/Warning - amber */
+  .status-degraded {
+    background-color: light-dark(#fef3c7, rgba(120, 53, 15, 0.5));
+    color: light-dark(#92400e, #fcd34d);
+    border-color: light-dark(#fcd34d, rgba(120, 53, 15, 0.4));
+  }
+
+  /* Unhealthy/Error - red */
+  .status-unhealthy {
+    background-color: light-dark(#fee2e2, rgba(127, 29, 29, 0.5));
+    color: light-dark(#b91c1c, #fca5a5);
+    border-color: light-dark(#fca5a5, rgba(127, 29, 29, 0.4));
+  }
+
+  /* Neutral/Info - sky */
+  .status-neutral {
+    background-color: light-dark(#e0f2fe, rgba(12, 74, 110, 0.5));
+    color: light-dark(#0369a1, #7dd3fc);
+    border-color: light-dark(#7dd3fc, rgba(12, 74, 110, 0.4));
+  }
+
+  /* Unknown/Muted - gray */
+  .status-unknown {
+    background-color: var(--bg-elevated);
+    color: var(--text-secondary);
+    border-color: var(--border-default);
+  }
+
+  /* Special status colors — no border-color (renders borderless within .badge) */
+  .status-violet {
+    background-color: light-dark(rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.2));
+    color: light-dark(#7c3aed, #a78bfa);
+    border-color: transparent;
+  }
+
+  .status-purple {
+    background-color: light-dark(rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.2));
+    color: light-dark(#9333ea, #c084fc);
+    border-color: transparent;
+  }
+
+  .status-orange {
+    background-color: light-dark(rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.2));
+    color: light-dark(#ea580c, #fb923c);
+    border-color: transparent;
+  }
+
+  .status-cyan {
+    background-color: light-dark(rgba(6, 182, 212, 0.15), rgba(6, 182, 212, 0.2));
+    color: light-dark(#0891b2, #22d3ee);
+    border-color: transparent;
+  }
+
+} /* end @layer components */

package/src/theme/tailwind-theme.css

@@ -31,21 +31,21 @@
   --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;
+  /* Skyhook brand (refined blue palette — more saturated) */
+  --color-skyhook: #5088CC;
+  --color-skyhook-50: #EBF2FA;
+  --color-skyhook-100: #D2E2F4;
+  --color-skyhook-200: #A8C7E8;
+  --color-skyhook-300: #7EACDC;
+  --color-skyhook-400: #6A9FE0;
+  --color-skyhook-500: #5088CC;
+  --color-skyhook-600: #4A7CC9;
+  --color-skyhook-700: #3B66A8;
+  --color-skyhook-800: #2D4E82;
+  --color-skyhook-900: #1F365C;
 
   /* K8s resource type colors */
-  --color-k8s-internet: #2D7AFF;
+  --color-k8s-internet: #5088CC;
   --color-k8s-ingress: #8b5cf6;
   --color-k8s-service: #3b82f6;
   --color-k8s-deployment: #10b981;

package/src/theme/variables.css

@@ -13,9 +13,10 @@
 :root {
   color-scheme: light dark;
 
-  /* ── Brand ── */
-  --color-brand: #2D7AFF;
-  --color-brand-light: light-dark(#1A5FCC, #5A9AFF);
+  /* ── Brand (refined blue — more life than slate, less generic than tech blue) ── */
+  --color-brand: light-dark(#4A7CC9, #6A9FE0);
+  --color-brand-light: light-dark(#3B66A8, #8BB5EA);
+  --brand-rgb: light-dark(74 124 201, 106 159 224);
 
   /* ── Semantic status (theme-independent) ── */
   --color-success: #22C55E;
@@ -29,40 +30,55 @@
   --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));
+  /* ── Backgrounds ──
+     base     = page bg, header/toolbar chrome (barely-blue cool gray)
+     surface  = sidebars, content panels, cards (near-white)
+     elevated = inputs, count badges, dropdowns (very lightly blue-tinted) */
+  --bg-base: light-dark(#F0F3F9, #0B0F1E);
+  --bg-surface: light-dark(#F8FBFE, #14192A);
+  --bg-elevated: light-dark(#E6ECF5, #1E2338);
+  --bg-hover: light-dark(#DDE5F2, #282E48);
+  --bg-active: light-dark(#D3DCEC, #1C2840);
+
+  /* ── Text (cool neutral) ── */
+  --text-primary: light-dark(#1A1C20, #F5F6F8);
+  --text-secondary: light-dark(#555860, #D8DAE0);
+  --text-tertiary: light-dark(#7E828A, #B0B5C0);
+  --text-disabled: light-dark(#A0A4AC, #6A7080);
+
+  /* ── Borders (lightly blue-tinted in light mode) ── */
+  --border-default: light-dark(#D8E0EE, #222840);
+  --border-light: light-dark(#CDD6E8, #2C324A);
+  --border-subtle: light-dark(rgba(74, 100, 180, 0.07), rgba(255, 255, 255, 0.04));
   --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);
+  --accent-muted: light-dark(rgba(74, 124, 201, 0.12), rgba(106, 159, 224, 0.18));
+  --accent-text: light-dark(#3B66A8, #8BB5EA);
+
+  /* ── Selection / highlight (used for selected rows, items, filters) ── */
+  --selection-bg: light-dark(rgba(74, 124, 201, 0.10), rgba(106, 159, 224, 0.15));
+  --selection-bg-strong: light-dark(rgba(74, 124, 201, 0.20), rgba(106, 159, 224, 0.25));
+  --selection-text: light-dark(#3B66A8, #8BB5EA);
+  --selection-border: light-dark(rgba(74, 124, 201, 0.30), rgba(106, 159, 224, 0.30));
+
+  /* ── Glow ── */
+  --glow-brand: light-dark(rgba(74, 124, 201, 0.2), rgba(106, 159, 224, 0.25));
+  --glow-brand-sm: 0 0 8px var(--glow-brand);
+  --glow-brand-md: 0 0 16px var(--glow-brand);
 
   /* ── 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);
+  --shadow-drawer: -12px 0 40px rgba(0,0,0,0.15), -4px 0 12px rgba(0,0,0,0.08);
 
   /* ── Topology ── */
-  --topology-node-border: light-dark(rgba(0, 0, 0, 0.10), rgba(255, 255, 255, 0.08));
+  --topology-node-border: light-dark(rgba(0, 0, 0, 0.08), 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-bg-dots: light-dark(rgba(126, 130, 138, 0.2), #1E2338);
 
   /* Topology edge colors (theme-independent identity colors) */
   --edge-routes-to: #22c55e;
@@ -107,15 +123,16 @@
   --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);
+  --scrollbar-track: light-dark(#E6ECF5, #0F1322);
+  --scrollbar-thumb: light-dark(#CDD6E8, #2C324A);
+  --scrollbar-thumb-hover: light-dark(#AABACF, #484C55);
 }
 
 /* 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-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.06);
+  --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.06);
   --shadow-lg: 0 12px 32px -6px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.1);
+  --shadow-drawer: -16px 0 60px rgba(0,0,0,0.6), -6px 0 20px rgba(0,0,0,0.4);
   --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

@@ -34,6 +34,8 @@ export interface Capabilities {
   nodeWrite: boolean      // Node write operations (cordon, uncordon, drain)
   mcpEnabled: boolean     // MCP server is running
   resources?: ResourcePermissions // Per-resource-type permissions
+  authEnabled?: boolean   // Auth is enabled on the backend
+  username?: string       // Authenticated user's username (when auth enabled)
 }
 
 // Core node kinds that have specific UI handling
@@ -708,6 +710,19 @@ export interface TrafficFlow {
   httpMethod?: string
   httpPath?: string
   httpStatus?: number
+  latencyNs?: number
+  l7Type?: string // REQUEST, RESPONSE, SAMPLE
+  httpProtocol?: string // HTTP/1.1, HTTP/2
+  httpHeaders?: string[] // allowlisted headers as "key: value"
+  dnsQuery?: string
+  dnsIPs?: string[]
+  dnsTTL?: number
+  dnsRCode?: number
+  dnsQTypes?: string[]
+  trafficDirection?: string // ingress, egress
+  dropReasonDesc?: string
+  sourceService?: string
+  destService?: string
   bytesSent: number
   bytesRecv: number
   connections: number
@@ -715,6 +730,23 @@ export interface TrafficFlow {
   lastSeen: string // ISO date string
 }
 
+// HTTP path statistics for aggregated flows
+export interface HTTPPathStat {
+  method: string
+  path: string
+  count: number
+  avgMs?: number
+  errorPct?: number // 4xx+5xx percentage
+}
+
+// DNS query statistics for aggregated flows
+export interface DNSQueryStat {
+  query: string
+  count: number
+  nxCount?: number // NXDOMAIN responses
+  avgTTL?: number
+}
+
 // Aggregated flow by service pair
 export interface AggregatedFlow {
   source: TrafficEndpoint
@@ -726,9 +758,18 @@ export interface AggregatedFlow {
   bytesRecv: number
   connections: number
   lastSeen: string
+  l7Protocol?: string // HTTP, gRPC, DNS
   requestCount?: number
   errorCount?: number
   avgLatencyMs?: number
+  latencyP50Ms?: number
+  latencyP95Ms?: number
+  latencyP99Ms?: number
+  httpStatusCounts?: Record<string, number> // "2xx": 150, "5xx": 3
+  topHTTPPaths?: HTTPPathStat[]
+  topDNSQueries?: DNSQueryStat[]
+  verdictCounts?: Record<string, number> // "forwarded": 500, "dropped": 3
+  dropReasons?: Record<string, number>
 }
 
 // Cluster info for traffic detection