@skyhook-io/k8s-ui 1.3.0 → 1.3.2

package/src/components/ui/Toast.tsx

@@ -11,13 +11,22 @@ interface Toast {
   type?: 'success' | 'info' | 'warning' | 'error'
   position?: { x: number; y: number }
   dismissing?: boolean
+  action?: { label: string; icon?: ReactNode; onClick: () => void }
+  onDetailClick?: () => void
 }
 
 interface ToastContextType {
-  showToast: (message: string, options?: { detail?: string; command?: string; type?: Toast['type']; position?: { x: number; y: number } }) => void
+  showToast: (message: string, options?: {
+    detail?: string
+    command?: string
+    type?: Toast['type']
+    position?: { x: number; y: number }
+    action?: Toast['action']
+    onDetailClick?: () => void
+  }) => void
   showCopied: (command: string, label?: string, event?: React.MouseEvent) => void
   showError: (message: string, detail?: string) => void
-  showSuccess: (message: string, detail?: string) => void
+  showSuccess: (message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) => void
 }
 
 const ToastContext = createContext<ToastContextType | null>(null)
@@ -26,7 +35,7 @@ const ToastContext = createContext<ToastContextType | null>(null)
 class ToastManager {
   private static instance: ToastManager
   private showErrorFn: ((message: string, detail?: string) => void) | null = null
-  private showSuccessFn: ((message: string, detail?: string) => void) | null = null
+  private showSuccessFn: ((message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) => void) | null = null
 
   static getInstance(): ToastManager {
     if (!ToastManager.instance) {
@@ -49,8 +58,8 @@ class ToastManager {
     this.showErrorFn ? this.showErrorFn(message, detail) : console.error('[Toast]', message, detail)
   }
 
-  showSuccess(message: string, detail?: string) {
-    this.showSuccessFn ? this.showSuccessFn(message, detail) : console.log('[Toast]', message, detail)
+  showSuccess(message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) {
+    this.showSuccessFn ? this.showSuccessFn(message, detail, action, onDetailClick) : console.log('[Toast]', message, detail)
   }
 }
 
@@ -60,8 +69,8 @@ export function showApiError(message: string, detail?: string) {
   toastManager.showError(message, detail)
 }
 
-export function showApiSuccess(message: string, detail?: string) {
-  toastManager.showSuccess(message, detail)
+export function showApiSuccess(message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) {
+  toastManager.showSuccess(message, detail, action, onDetailClick)
 }
 
 export function useToast() {
@@ -82,14 +91,21 @@ export function ToastProvider({ children }: { children: ReactNode }) {
     }, DURATION_TOAST_EXIT)
   }, [])
 
-  const showToast = useCallback((message: string, options?: { detail?: string; command?: string; type?: Toast['type']; position?: { x: number; y: number } }) => {
+  const showToast = useCallback((message: string, options?: {
+    detail?: string
+    command?: string
+    type?: Toast['type']
+    position?: { x: number; y: number }
+    action?: Toast['action']
+    onDetailClick?: () => void
+  }) => {
     const id = Math.random().toString(36).slice(2)
     const toast: Toast = { id, message, ...options }
 
     setToasts(prev => [...prev, toast])
 
-    // Auto-dismiss: errors stay longer (8s), others 5s
-    const dismissTime = options?.type === 'error' ? 8000 : 5000
+    // Auto-dismiss: errors stay longer (10s), others 7s
+    const dismissTime = options?.type === 'error' ? 10000 : 7000
     setTimeout(() => {
       animateDismiss(id)
     }, dismissTime)
@@ -112,8 +128,8 @@ export function ToastProvider({ children }: { children: ReactNode }) {
     showToast(message, { detail, type: 'error' })
   }, [showToast])
 
-  const showSuccess = useCallback((message: string, detail?: string) => {
-    showToast(message, { detail, type: 'success' })
+  const showSuccess = useCallback((message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) => {
+    showToast(message, { detail, type: 'success', action, onDetailClick })
   }, [showToast])
 
   const dismissToast = useCallback((id: string) => {
@@ -143,7 +159,7 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
   const style: React.CSSProperties = toast.position
     ? {
         position: 'fixed',
-        left: Math.min(toast.position.x, window.innerWidth - 420),
+        left: Math.min(toast.position.x, window.innerWidth - 520),
         top: toast.position.y,
         zIndex: 50,
       }
@@ -160,13 +176,13 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
   return (
     <div
       className={clsx(
-        'flex items-start gap-3 p-3 rounded-lg shadow-2xl border',
-        'w-[400px] max-w-[calc(100vw-32px)]',
+        'flex items-start gap-3 p-4 rounded-lg shadow-2xl border backdrop-blur-sm',
+        'w-[480px] max-w-[calc(100vw-32px)]',
         toast.dismissing ? 'animate-out' : 'animate-in',
         isError
-          ? 'bg-red-950/90 border-red-800/50'
+          ? 'bg-red-950 border-red-800/60'
           : isSuccess
-            ? 'bg-green-950/90 border-green-700/50'
+            ? 'bg-emerald-950 border-emerald-800/50'
             : 'bg-theme-surface border-theme-border'
       )}
       style={style}
@@ -175,46 +191,77 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
       <div className={clsx(
         'w-8 h-8 rounded-full flex items-center justify-center shrink-0',
         isError ? 'bg-red-500/20' :
-        isSuccess ? 'bg-green-500/20' : 'bg-blue-500/20'
+        isSuccess ? 'bg-emerald-500/20' : 'bg-blue-500/20'
       )}>
         {isError ? (
           <AlertTriangle className="w-4 h-4 text-red-400" />
         ) : toast.command ? (
-          <Terminal className={clsx('w-4 h-4', isSuccess ? 'text-green-400' : 'text-blue-400')} />
+          <Terminal className={clsx('w-4 h-4', isSuccess ? 'text-emerald-400' : 'text-blue-400')} />
         ) : (
-          <Check className="w-4 h-4 text-green-400" />
+          <Check className="w-4 h-4 text-emerald-400" />
         )}
       </div>
 
       {/* 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-green-100' : 'text-theme-text-primary')}>
+          <span className={clsx('text-sm font-medium', isError ? 'text-red-200' : isSuccess ? 'text-emerald-50' : 'text-theme-text-primary')}>
             {toast.message}
           </span>
-          {!isError && <Check className={clsx('w-3.5 h-3.5 shrink-0', isSuccess ? 'text-green-300' : 'text-green-400')} />}
+          {!isError && !toast.action && <Check className={clsx('w-3.5 h-3.5 shrink-0', isSuccess ? 'text-emerald-400' : 'text-green-400')} />}
         </div>
         {toast.detail && (
-          <p className={clsx('mt-1 text-xs', isError ? 'text-red-300/80' : isSuccess ? 'text-green-300/80' : 'text-theme-text-secondary')}>
-            {toast.detail}
-          </p>
+          toast.onDetailClick ? (
+            <button
+              onClick={toast.onDetailClick}
+              className={clsx(
+                'mt-1.5 block text-xs font-mono break-all text-left rounded px-1.5 py-1 -ml-1.5 transition-colors',
+                isError
+                  ? 'text-red-300 hover:bg-red-900/50'
+                  : isSuccess
+                    ? 'text-emerald-300/90 hover:text-emerald-200 hover:bg-emerald-900/50'
+                    : 'text-theme-text-secondary hover:bg-theme-elevated'
+              )}
+              title="Click to open file"
+            >
+              {toast.detail}
+            </button>
+          ) : (
+            <p className={clsx('mt-1 text-xs break-all', isError ? 'text-red-300/80' : isSuccess ? 'text-emerald-300/80' : 'text-theme-text-secondary')}>
+              {toast.detail}
+            </p>
+          )
         )}
         {toast.command && (
           <code className="block mt-1.5 text-xs text-theme-text-secondary font-mono bg-theme-base rounded px-2 py-1.5 whitespace-pre-wrap break-all">
             {toast.command}
           </code>
         )}
+        {toast.action && (
+          <button
+            onClick={toast.action.onClick}
+            className={clsx(
+              'mt-2.5 inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded transition-colors',
+              isSuccess
+                ? 'text-emerald-100 bg-emerald-800/50 hover:bg-emerald-700/50 border border-emerald-700/40'
+                : 'text-theme-text-secondary bg-theme-elevated hover:bg-theme-surface border border-theme-border'
+            )}
+          >
+            {toast.action.icon}
+            {toast.action.label}
+          </button>
+        )}
       </div>
 
       {/* Dismiss button */}
       <button
         onClick={onDismiss}
         className={clsx(
-          'p-1 rounded shrink-0',
+          'p-1 rounded shrink-0 transition-colors',
           isError
             ? 'text-red-400 hover:text-red-300 hover:bg-red-900/50'
             : isSuccess
-              ? 'text-green-400 hover:text-green-300 hover:bg-green-900/50'
+              ? 'text-emerald-500 hover:text-emerald-300 hover:bg-emerald-900/50'
               : 'text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated'
         )}
       >

package/src/theme/variables.css

@@ -11,7 +11,7 @@
  */
 
 :root {
-  color-scheme: light dark;
+  color-scheme: light;
 
   /* ── Brand (refined blue — more life than slate, less generic than tech blue) ── */
   --color-brand: light-dark(#4A7CC9, #6A9FE0);
@@ -128,8 +128,13 @@
   --scrollbar-thumb-hover: light-dark(#AABACF, #484C55);
 }
 
-/* Dark overrides for comma-separated values that can't use light-dark() */
+/* Dark overrides — color-scheme drives light-dark() resolution.
+   We declare it in CSS (not just via JS inline style) because Lightning CSS
+   may compile light-dark() into a @media (prefers-color-scheme) polyfill
+   (e.g. on Node <22), which only responds to CSS color-scheme declarations.
+   Also guards against WKWebView quirks in the desktop app. */
 .dark {
+  color-scheme: dark;
   --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);

package/src/types/core.ts

@@ -710,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
@@ -717,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
@@ -728,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

package/src/utils/download.ts

@@ -1,5 +1,20 @@
-/** Triggers a file download in the browser or desktop webview. */
-export function triggerDownload(content: string, mime: string, filename: string): void {
+/**
+ * Triggers a file download in the browser.
+ * When `overrideFn` is provided (e.g. for native desktop save dialogs),
+ * it delegates to that instead of the default blob URL approach.
+ * The override must handle its own errors (e.g. via toast notifications).
+ */
+export function triggerDownload(
+  content: string,
+  mime: string,
+  filename: string,
+  overrideFn?: (content: string, mime: string, filename: string) => void,
+): void {
+  if (overrideFn) {
+    overrideFn(content, mime, filename)
+    return
+  }
+
   const blob = new Blob([content], { type: mime })
   const url = URL.createObjectURL(blob)
   const a = document.createElement('a')
@@ -11,7 +26,7 @@ export function triggerDownload(content: string, mime: string, filename: string)
   document.body.appendChild(a)
   a.click()
 
-  // Delay cleanup so embedded webviews still have time to consume the blob URL.
+  // Delay cleanup so the browser has time to initiate the download before the blob URL is revoked.
   window.setTimeout(() => {
     URL.revokeObjectURL(url)
     a.remove()

package/tsconfig.json

@@ -14,7 +14,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "skipLibCheck": true,
-    "baseUrl": ".",
     "paths": {
       "@skyhook/k8s-ui": ["./src/index.ts"],
       "@skyhook/k8s-ui/*": ["./src/*"]