@skyhook-io/k8s-ui 1.3.0 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -64,7 +64,7 @@
     "lucide-react": "^0.575.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.2",
     "vitest": "^4.0.18",
     "yaml": "^2.8.3"
   }

package/src/components/dock/BottomDock.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useRef, useEffect, ReactNode } from 'react'
 import { DURATION_DOCK } from '../../utils/animation'
-import { X, ChevronDown, ChevronUp, Terminal, FileText, Trash2, Layers, Maximize2, Minimize2 } from 'lucide-react'
+import { X, ChevronDown, ChevronUp, Terminal, FileText, Trash2, Layers, Maximize2, Minimize2, Activity } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useDock, DockTab } from './DockContext'
 import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
@@ -12,13 +12,25 @@ const MAXIMIZED_TOP_OFFSET = 48
 
 interface BottomDockProps {
   renderTabContent: (tab: DockTab, isActive: boolean) => ReactNode
+  /** Optional extra content rendered in the dock header bar (between tabs and action buttons) */
+  renderTabHeaderExtra?: (tab: DockTab) => ReactNode
   /** Offset from the left edge in px — use to avoid overlapping a fixed sidebar */
   leftOffset?: number
+  /** Override the default dock height in px */
+  defaultHeight?: number
 }
 
-export function BottomDock({ renderTabContent, leftOffset = 0 }: BottomDockProps) {
-  const { tabs, activeTabId, isExpanded, removeTab, setActiveTab, toggleExpanded, closeAll } = useDock()
-  const [height, setHeight] = useState(DEFAULT_HEIGHT)
+export function BottomDock({ renderTabContent, renderTabHeaderExtra, leftOffset: leftOffsetProp, defaultHeight }: BottomDockProps) {
+  const { tabs, activeTabId, isExpanded, leftOffset: leftOffsetCtx, removeTab, setActiveTab, toggleExpanded, closeAll } = useDock()
+  const leftOffset = leftOffsetProp ?? leftOffsetCtx
+  const [height, setHeight] = useState(defaultHeight ?? DEFAULT_HEIGHT)
+  const prevDefaultHeight = useRef(defaultHeight)
+  useEffect(() => {
+    if (defaultHeight != null && defaultHeight !== prevDefaultHeight.current) {
+      setHeight(defaultHeight)
+    }
+    prevDefaultHeight.current = defaultHeight
+  }, [defaultHeight])
   const [isMaximized, setIsMaximized] = useState(false)
   const isDragging = useRef(false)
   const startY = useRef(0)
@@ -112,6 +124,12 @@ export function BottomDock({ renderTabContent, leftOffset = 0 }: BottomDockProps
           ))}
         </div>
 
+        {/* Per-tab extra header content */}
+        {renderTabHeaderExtra && activeTabId && (() => {
+          const activeTab = tabs.find(t => t.id === activeTabId)
+          return activeTab ? renderTabHeaderExtra(activeTab) : null
+        })()}
+
         <div className="flex items-center gap-1 ml-2">
           {tabs.length > 1 && (
             <button
@@ -175,7 +193,7 @@ function TabButton({
   onClose: () => void
 }) {
   const Icon = tab.type === 'terminal' || tab.type === 'node-terminal' || tab.type === 'local-terminal'
-    ? Terminal : tab.type === 'workload-logs' ? Layers : FileText
+    ? Terminal : tab.type === 'workload-logs' ? Layers : tab.type === 'traffic-flows' ? Activity : FileText
 
   return (
     <div

package/src/components/dock/DockContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useState, useCallback, useRef, useEffect, ReactNode } from 'react'
 
-export type DockTabType = 'terminal' | 'logs' | 'workload-logs' | 'node-terminal' | 'local-terminal'
+export type DockTabType = 'terminal' | 'logs' | 'workload-logs' | 'node-terminal' | 'local-terminal' | 'traffic-flows'
 
 export interface DockTab {
   id: string
@@ -26,11 +26,13 @@ export interface DockContextValue {
   tabs: DockTab[]
   activeTabId: string | null
   isExpanded: boolean
+  leftOffset: number
   addTab: (tab: Omit<DockTab, 'id'>) => string
   removeTab: (id: string) => void
   setActiveTab: (id: string) => void
   toggleExpanded: () => void
   setExpanded: (expanded: boolean) => void
+  setLeftOffset: (offset: number) => void
   closeAll: () => void
 }
 
@@ -42,6 +44,7 @@ export function DockProvider({ children }: { children: ReactNode }) {
   const [tabs, setTabs] = useState<DockTab[]>([])
   const [activeTabId, setActiveTabId] = useState<string | null>(null)
   const [isExpanded, setIsExpanded] = useState(false)
+  const [leftOffset, setLeftOffset] = useState(0)
   // Keep a ref to the latest tabs for deduplication without stale-closure issues
   const tabsRef = useRef<DockTab[]>(tabs)
   useEffect(() => { tabsRef.current = tabs }, [tabs])
@@ -62,6 +65,9 @@ export function DockProvider({ children }: { children: ReactNode }) {
       if (t.type === 'local-terminal') {
         return false // Allow multiple local terminals
       }
+      if (t.type === 'traffic-flows') {
+        return true // Singleton — always reuse existing tab
+      }
       return t.namespace === tabData.namespace &&
              t.podName === tabData.podName &&
              t.containerName === tabData.containerName
@@ -117,11 +123,13 @@ export function DockProvider({ children }: { children: ReactNode }) {
       tabs,
       activeTabId,
       isExpanded,
+      leftOffset,
       addTab,
       removeTab,
       setActiveTab,
       toggleExpanded,
       setExpanded: setIsExpanded,
+      setLeftOffset,
       closeAll,
     }}>
       {children}

package/src/components/logs/LogsViewer.tsx

@@ -25,6 +25,8 @@ export interface LogsViewerProps {
   fetchLogs: (params: LogsFetchParams) => Promise<{ [container: string]: string }>
   /** If provided, the stream button is enabled. Called to open an SSE connection. */
   createStream?: (params: Omit<LogsFetchParams, 'previous'>) => EventSource
+  /** Override the download mechanism (e.g. for desktop apps where blob URLs fail). */
+  overrideDownload?: (content: string, mime: string, filename: string) => void
   /** Force dark mode on the logs container (default: true) */
   forceDark?: boolean
 }
@@ -36,6 +38,7 @@ export function LogsViewer({
   initialContainer,
   fetchLogs,
   createStream,
+  overrideDownload,
   forceDark,
 }: LogsViewerProps) {
   const [selectedContainer, setSelectedContainer] = useState(initialContainer || containers[0] || '')
@@ -105,12 +108,14 @@ export function LogsViewer({
         mime = 'text/plain'
     }
     try {
-      triggerDownload(content, mime, filename)
-      showSuccess('Log download started', `Saving ${filename}. Check your browser or desktop Downloads location.`)
+      triggerDownload(content, mime, filename, overrideDownload)
+      if (!overrideDownload) {
+        showSuccess('Log download started', `Saving ${filename}. Check your browser Downloads.`)
+      }
     } catch (err) {
       showError('Failed to download logs', err instanceof Error ? err.message : 'Unknown download error')
     }
-  }, [entries, podName, selectedContainer, showError, showSuccess])
+  }, [entries, podName, selectedContainer, overrideDownload, showError, showSuccess])
 
   const toolbarExtra = (
     <>

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -42,6 +42,8 @@ export interface WorkloadLogsViewerProps {
    * Called to open an SSE connection for the whole workload.
    */
   createStream?: (params: WorkloadLogsFetchParams) => EventSource
+  /** Override the download mechanism (e.g. for desktop apps where blob URLs fail). */
+  overrideDownload?: (content: string, mime: string, filename: string) => void
   /** Force dark mode on the logs container (default: true) */
   forceDark?: boolean
 }
@@ -51,7 +53,7 @@ const POD_COLORS = [
   'text-pink-400', 'text-cyan-400', 'text-orange-400', 'text-lime-400',
 ]
 
-export function WorkloadLogsViewer({ name, fetchAll, createStream, forceDark }: WorkloadLogsViewerProps) {
+export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownload, forceDark }: WorkloadLogsViewerProps) {
   const [selectedContainer, setSelectedContainer] = useState<string>('')
   const [pods, setPods] = useState<WorkloadPodInfo[]>([])
   const [selectedPods, setSelectedPods] = useState<Set<string>>(new Set())
@@ -206,12 +208,14 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, forceDark }:
         mime = 'text/plain'
     }
     try {
-      triggerDownload(content, mime, filename)
-      showSuccess('Log download started', `Saving ${filename}. Check your browser or desktop Downloads location.`)
+      triggerDownload(content, mime, filename, overrideDownload)
+      if (!overrideDownload) {
+        showSuccess('Log download started', `Saving ${filename}. Check your browser Downloads.`)
+      }
     } catch (err) {
       showError('Failed to download logs', err instanceof Error ? err.message : 'Unknown download error')
     }
-  }, [filteredEntries, name, showError, showSuccess])
+  }, [filteredEntries, name, overrideDownload, showError, showSuccess])
 
   const toolbarExtra = (
     <>

package/src/components/timeline/DiffViewer.tsx

@@ -0,0 +1,131 @@
+import { memo } from 'react'
+import { clsx } from 'clsx'
+import { ArrowRight, Plus, Minus, RefreshCw } from 'lucide-react'
+import type { DiffInfo, FieldChange } from '../../types'
+
+interface DiffViewerProps {
+  diff: DiffInfo
+  compact?: boolean
+}
+
+export const DiffViewer = memo(function DiffViewer({ diff, compact = false }: DiffViewerProps) {
+  if (!diff || diff.fields.length === 0) {
+    return null
+  }
+
+  if (compact) {
+    return (
+      <div className="text-xs text-theme-text-secondary flex items-center gap-1">
+        <RefreshCw className="w-3 h-3" />
+        <span>{diff.summary || `${diff.fields.length} field(s) changed`}</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      {/* Summary */}
+      {diff.summary && (
+        <div className="text-sm font-medium text-theme-text-secondary flex items-center gap-2">
+          <RefreshCw className="w-4 h-4 text-blue-400" />
+          {diff.summary}
+        </div>
+      )}
+
+      {/* Field changes */}
+      <div className="space-y-1.5">
+        {diff.fields.map((field, idx) => (
+          <FieldChangeRow key={`${field.path}-${idx}`} field={field} />
+        ))}
+      </div>
+    </div>
+  )
+})
+
+interface FieldChangeRowProps {
+  field: FieldChange
+}
+
+function FieldChangeRow({ field }: FieldChangeRowProps) {
+  const isAdded = field.oldValue === null || field.oldValue === undefined
+  const isRemoved = field.newValue === null || field.newValue === undefined
+  const isModified = !isAdded && !isRemoved
+
+  return (
+    <div className="rounded bg-theme-surface/50 border border-theme-border px-3 py-2">
+      {/* Field path */}
+      <div className="text-xs font-mono text-theme-text-tertiary mb-1">{field.path}</div>
+
+      {/* Values */}
+      <div className="flex items-center gap-2 text-sm">
+        {isAdded ? (
+          <>
+            <Plus className="w-3.5 h-3.5 text-green-400 shrink-0" />
+            <span className="text-green-400">
+              {formatValue(field.newValue)}
+            </span>
+          </>
+        ) : isRemoved ? (
+          <>
+            <Minus className="w-3.5 h-3.5 text-red-400 shrink-0" />
+            <span className="text-red-400 line-through">
+              {formatValue(field.oldValue)}
+            </span>
+          </>
+        ) : isModified ? (
+          <>
+            <span className="text-red-400 line-through">
+              {formatValue(field.oldValue)}
+            </span>
+            <ArrowRight className="w-3.5 h-3.5 text-theme-text-tertiary shrink-0" />
+            <span className="text-green-400">
+              {formatValue(field.newValue)}
+            </span>
+          </>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+function formatValue(value: unknown): string {
+  if (value === null || value === undefined) {
+    return 'null'
+  }
+  if (typeof value === 'object') {
+    try {
+      const str = JSON.stringify(value)
+      // Truncate long values
+      if (str.length > 100) {
+        return str.slice(0, 97) + '...'
+      }
+      return str
+    } catch {
+      return String(value)
+    }
+  }
+  return String(value)
+}
+
+// Inline diff badge for use in event cards
+interface DiffBadgeProps {
+  diff: DiffInfo
+}
+
+export const DiffBadge = memo(function DiffBadge({ diff }: DiffBadgeProps) {
+  if (!diff || !diff.summary) {
+    return null
+  }
+
+  return (
+    <span
+      className={clsx(
+        'badge',
+        'bg-skyhook-500/10 text-skyhook-400 border border-skyhook-500/20'
+      )}
+    >
+      <RefreshCw className="w-3 h-3" />
+      {diff.summary}
+    </span>
+  )
+})