@skyhook-io/k8s-ui 1.0.0

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@skyhook-io/k8s-ui",
+  "version": "1.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/skyhook-io/radar",
+    "directory": "packages/k8s-ui"
+  },
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./types": "./src/types/index.ts",
+    "./utils": "./src/utils/index.ts",
+    "./components/resources/*": "./src/components/resources/*.ts",
+    "./components/ui/*": "./src/components/ui/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts",
+    "./resources": "./src/components/resources/index.ts",
+    "./logs": "./src/components/logs/index.ts",
+    "./timeline": "./src/components/timeline/index.ts",
+    "./topology": "./src/components/topology/index.ts"
+  },
+  "scripts": {
+    "tsc": "tsc --noEmit",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\""
+  },
+  "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
+    "react-virtuoso": "^4.18.1",
+    "shiki": "^4.0.0"
+  },
+  "peerDependencies": {
+    "@xterm/addon-fit": ">=0.10.0",
+    "@xterm/addon-web-links": ">=0.11.0",
+    "@xterm/xterm": ">=5.0.0",
+    "@xyflow/react": ">=12.0.0",
+    "clsx": ">=2.0.0",
+    "diff": ">=5.0.0",
+    "elkjs": ">=0.9.0",
+    "lucide-react": ">=0.400.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "yaml": ">=2.0.0"
+  },
+  "devDependencies": {
+    "@types/diff": "^7.0.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/xterm": "^6.0.0",
+    "@xyflow/react": "^12.10.1",
+    "clsx": "^2.1.1",
+    "diff": "^8.0.3",
+    "elkjs": "^0.11.1",
+    "lucide-react": "^0.575.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^5.9.3",
+    "yaml": "^2.7.1"
+  }
+}

package/src/components/dock/BottomDock.tsx

@@ -0,0 +1,204 @@
+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 { clsx } from 'clsx'
+import { useDock, DockTab } from './DockContext'
+import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
+
+const MIN_HEIGHT = 200
+const DEFAULT_HEIGHT = 400
+const MAX_HEIGHT_RATIO = 0.7
+const MAXIMIZED_TOP_OFFSET = 48
+
+interface BottomDockProps {
+  renderTabContent: (tab: DockTab, isActive: boolean) => ReactNode
+  /** Offset from the left edge in px — use to avoid overlapping a fixed sidebar */
+  leftOffset?: number
+}
+
+export function BottomDock({ renderTabContent, leftOffset = 0 }: BottomDockProps) {
+  const { tabs, activeTabId, isExpanded, removeTab, setActiveTab, toggleExpanded, closeAll } = useDock()
+  const [height, setHeight] = useState(DEFAULT_HEIGHT)
+  const [isMaximized, setIsMaximized] = useState(false)
+  const isDragging = useRef(false)
+  const startY = useRef(0)
+  const startHeight = useRef(0)
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    isDragging.current = true
+    startY.current = e.clientY
+    startHeight.current = height
+    document.body.style.cursor = 'ns-resize'
+    document.body.style.userSelect = 'none'
+  }, [height])
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging.current) return
+      const maxHeight = window.innerHeight * MAX_HEIGHT_RATIO
+      const newHeight = Math.min(maxHeight, Math.max(MIN_HEIGHT, startHeight.current - (e.clientY - startY.current)))
+      setHeight(newHeight)
+    }
+
+    const handleMouseUp = () => {
+      isDragging.current = false
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    }
+
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [])
+
+  const toggleMaximized = useCallback(() => {
+    setIsMaximized(prev => !prev)
+  }, [])
+
+  useEffect(() => {
+    if (!isMaximized) return
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsMaximized(false)
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isMaximized])
+
+  useRegisterShortcut({
+    id: 'dock-toggle',
+    keys: 'Ctrl+`',
+    description: 'Toggle dock',
+    category: 'Dock',
+    scope: 'global',
+    handler: () => toggleExpanded(),
+    enabled: tabs.length > 0,
+  })
+
+  if (tabs.length === 0) {
+    return null
+  }
+
+  const effectiveHeight = !isExpanded ? 36 : isMaximized ? `calc(100vh - ${MAXIMIZED_TOP_OFFSET}px)` : height
+
+  return (
+    <div
+      className="fixed bottom-0 right-0 bg-theme-base border-t border-theme-border flex flex-col z-40"
+      style={{ height: effectiveHeight, left: leftOffset, transition: `height ${DURATION_DOCK}ms ease-out, left ${DURATION_DOCK}ms ease-out` }}
+    >
+      {isExpanded && !isMaximized && (
+        <div
+          className="absolute top-0 left-0 right-0 h-1 cursor-ns-resize hover:bg-blue-500/50 transition-colors"
+          onMouseDown={handleMouseDown}
+        />
+      )}
+
+      <div className="flex items-center h-9 px-2 bg-theme-surface border-b border-theme-border">
+        <div className="flex items-center gap-1 flex-1 overflow-x-auto">
+          {tabs.map(tab => (
+            <TabButton
+              key={tab.id}
+              tab={tab}
+              isActive={tab.id === activeTabId}
+              onSelect={() => {
+                setActiveTab(tab.id)
+                if (!isExpanded) toggleExpanded()
+              }}
+              onClose={() => removeTab(tab.id)}
+            />
+          ))}
+        </div>
+
+        <div className="flex items-center gap-1 ml-2">
+          {tabs.length > 1 && (
+            <button
+              onClick={closeAll}
+              className="p-1 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+              title="Close all"
+            >
+              <Trash2 className="w-3.5 h-3.5" />
+            </button>
+          )}
+          {isExpanded && (
+            <button
+              onClick={toggleMaximized}
+              className="p-1 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+              title={isMaximized ? 'Restore (Esc)' : 'Maximize'}
+            >
+              {isMaximized ? (
+                <Minimize2 className="w-3.5 h-3.5" />
+              ) : (
+                <Maximize2 className="w-3.5 h-3.5" />
+              )}
+            </button>
+          )}
+          <button
+            onClick={() => { if (isMaximized) setIsMaximized(false); toggleExpanded() }}
+            className="p-1 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+            title={isExpanded ? 'Collapse' : 'Expand'}
+          >
+            {isExpanded ? (
+              <ChevronDown className="w-4 h-4" />
+            ) : (
+              <ChevronUp className="w-4 h-4" />
+            )}
+          </button>
+        </div>
+      </div>
+
+      {isExpanded && (
+        <div className="flex-1 overflow-hidden w-full relative">
+          {tabs.map(tab => (
+            <div
+              key={tab.id}
+              className={tab.id === activeTabId ? 'absolute inset-0' : 'absolute inset-0 invisible'}
+            >
+              {renderTabContent(tab, tab.id === activeTabId)}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function TabButton({
+  tab,
+  isActive,
+  onSelect,
+  onClose,
+}: {
+  tab: DockTab
+  isActive: boolean
+  onSelect: () => void
+  onClose: () => void
+}) {
+  const Icon = tab.type === 'terminal' ? Terminal : tab.type === 'workload-logs' ? Layers : FileText
+
+  return (
+    <div
+      className={clsx(
+        'flex items-center gap-1.5 px-2 py-1 rounded text-xs cursor-pointer group',
+        isActive
+          ? 'bg-theme-elevated text-theme-text-primary'
+          : 'text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated/50'
+      )}
+      onClick={onSelect}
+    >
+      <Icon className="w-3.5 h-3.5" />
+      <span className="truncate max-w-[120px]">{tab.title}</span>
+      <button
+        onClick={(e) => {
+          e.stopPropagation()
+          onClose()
+        }}
+        className="p-0.5 rounded opacity-0 group-hover:opacity-100 hover:bg-theme-hover"
+      >
+        <X className="w-3 h-3" />
+      </button>
+    </div>
+  )
+}

package/src/components/dock/DockContext.tsx

@@ -0,0 +1,212 @@
+import { createContext, useContext, useState, useCallback, useRef, useEffect, ReactNode } from 'react'
+
+export type DockTabType = 'terminal' | 'logs' | 'workload-logs'
+
+export interface DockTab {
+  id: string
+  type: DockTabType
+  title: string
+  // Common app context (optional — app-specific, used by tab content components)
+  orgId?: string
+  clusterId?: string
+  clusterName?: string
+  // Terminal / logs props
+  namespace?: string
+  podName?: string
+  containerName?: string
+  containers?: string[]
+  // Workload logs props
+  workloadKind?: string
+  workloadName?: string
+}
+
+export interface DockContextValue {
+  tabs: DockTab[]
+  activeTabId: string | null
+  isExpanded: boolean
+  addTab: (tab: Omit<DockTab, 'id'>) => string
+  removeTab: (id: string) => void
+  setActiveTab: (id: string) => void
+  toggleExpanded: () => void
+  setExpanded: (expanded: boolean) => void
+  closeAll: () => void
+}
+
+const DockContext = createContext<DockContextValue | null>(null)
+
+let tabIdCounter = 0
+
+export function DockProvider({ children }: { children: ReactNode }) {
+  const [tabs, setTabs] = useState<DockTab[]>([])
+  const [activeTabId, setActiveTabId] = useState<string | null>(null)
+  const [isExpanded, setIsExpanded] = useState(false)
+  // Keep a ref to the latest tabs for deduplication without stale-closure issues
+  const tabsRef = useRef<DockTab[]>(tabs)
+  useEffect(() => { tabsRef.current = tabs }, [tabs])
+
+  const addTab = useCallback((tabData: Omit<DockTab, 'id'>) => {
+    const existingTab = tabsRef.current.find(t => {
+      if (t.type !== tabData.type) return false
+      // Include orgId + clusterId so same-named pods/workloads on different clusters don't deduplicate
+      if (t.orgId !== tabData.orgId || t.clusterId !== tabData.clusterId) return false
+      if (t.type === 'workload-logs') {
+        return t.namespace === tabData.namespace &&
+               t.workloadKind === tabData.workloadKind &&
+               t.workloadName === tabData.workloadName
+      }
+      return t.namespace === tabData.namespace &&
+             t.podName === tabData.podName &&
+             t.containerName === tabData.containerName
+    })
+
+    if (existingTab) {
+      setActiveTabId(existingTab.id)
+      setIsExpanded(true)
+      return existingTab.id
+    }
+
+    const id = `dock-tab-${++tabIdCounter}`
+    const newTab: DockTab = { ...tabData, id }
+
+    setTabs(prev => [...prev, newTab])
+    setActiveTabId(id)
+    setIsExpanded(true)
+
+    return id
+  }, [])
+
+  const removeTab = useCallback((id: string) => {
+    setTabs(prev => {
+      const newTabs = prev.filter(t => t.id !== id)
+
+      if (activeTabId === id && newTabs.length > 0) {
+        setActiveTabId(newTabs[newTabs.length - 1].id)
+      } else if (newTabs.length === 0) {
+        setActiveTabId(null)
+        setIsExpanded(false)
+      }
+
+      return newTabs
+    })
+  }, [activeTabId])
+
+  const setActiveTab = useCallback((id: string) => {
+    setActiveTabId(id)
+  }, [])
+
+  const toggleExpanded = useCallback(() => {
+    setIsExpanded(prev => !prev)
+  }, [])
+
+  const closeAll = useCallback(() => {
+    setTabs([])
+    setActiveTabId(null)
+    setIsExpanded(false)
+  }, [])
+
+  return (
+    <DockContext.Provider value={{
+      tabs,
+      activeTabId,
+      isExpanded,
+      addTab,
+      removeTab,
+      setActiveTab,
+      toggleExpanded,
+      setExpanded: setIsExpanded,
+      closeAll,
+    }}>
+      {children}
+    </DockContext.Provider>
+  )
+}
+
+export function useDock() {
+  const context = useContext(DockContext)
+  if (!context) {
+    throw new Error('useDock must be used within a DockProvider')
+  }
+  return context
+}
+
+// Convenience hooks for adding specific tab types
+
+export function useOpenTerminal() {
+  const { addTab } = useDock()
+
+  return (opts: {
+    namespace: string
+    podName: string
+    containerName: string
+    containers: string[]
+    orgId?: string
+    clusterId?: string
+    clusterName?: string
+  }) => {
+    addTab({
+      type: 'terminal',
+      title: `${opts.podName}/${opts.containerName}`,
+      namespace: opts.namespace,
+      podName: opts.podName,
+      containerName: opts.containerName,
+      containers: opts.containers,
+      orgId: opts.orgId,
+      clusterId: opts.clusterId,
+      clusterName: opts.clusterName,
+    })
+  }
+}
+
+export function useOpenLogs() {
+  const { addTab } = useDock()
+
+  return (opts: {
+    namespace: string
+    podName: string
+    containers: string[]
+    containerName?: string
+    orgId?: string
+    clusterId?: string
+    clusterName?: string
+  }) => {
+    const title = opts.containerName
+      ? `${opts.podName}/${opts.containerName}`
+      : opts.podName
+
+    addTab({
+      type: 'logs',
+      title,
+      namespace: opts.namespace,
+      podName: opts.podName,
+      containerName: opts.containerName,
+      containers: opts.containers,
+      orgId: opts.orgId,
+      clusterId: opts.clusterId,
+      clusterName: opts.clusterName,
+    })
+  }
+}
+
+export function useOpenWorkloadLogs() {
+  const { addTab } = useDock()
+
+  return (opts: {
+    namespace: string
+    workloadKind: string
+    workloadName: string
+    orgId?: string
+    clusterId?: string
+    clusterName?: string
+  }) => {
+    addTab({
+      type: 'workload-logs',
+      title: `${opts.workloadName} logs`,
+      namespace: opts.namespace,
+      workloadKind: opts.workloadKind,
+      workloadName: opts.workloadName,
+      orgId: opts.orgId,
+      clusterId: opts.clusterId,
+      clusterName: opts.clusterName,
+    })
+  }
+}