@skyhook-io/k8s-ui 1.0.0

package/src/components/ui/CodeViewer.tsx

@@ -0,0 +1,451 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { Copy, Check, ChevronUp, ChevronDown, X, Search } from 'lucide-react'
+import { codeToHtml } from 'shiki'
+
+interface CodeViewerProps {
+  code: string
+  language?: 'yaml' | 'json' | 'bash' | 'text'
+  /** Theme for syntax highlighting. Defaults to 'dark'. */
+  theme?: 'dark' | 'light'
+  showLineNumbers?: boolean
+  maxHeight?: string
+  showCopyButton?: boolean
+  onCopy?: (text: string) => void
+  copied?: boolean
+}
+
+export function CodeViewer({
+  code,
+  language = 'yaml',
+  theme = 'dark',
+  showLineNumbers = true,
+  maxHeight = 'calc(100vh - 300px)',
+  showCopyButton = false,
+  onCopy,
+  copied = false,
+}: CodeViewerProps) {
+  const [html, setHtml] = useState<string>('')
+  const [highlighting, setHighlighting] = useState(true)
+
+  // Search state
+  const [searchOpen, setSearchOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [searchDisplay, setSearchDisplay] = useState({ matchCount: 0, currentIndex: 0 })
+
+  // Use refs for match tracking to avoid re-renders that destroy DOM highlights
+  const matchCountRef = useRef(0)
+  const currentIndexRef = useRef(0)
+
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const searchInputRef = useRef<HTMLInputElement>(null)
+  const isMouseInsideRef = useRef(false)
+  const htmlRef = useRef<string>('')
+
+  useEffect(() => {
+    if (!code) {
+      setHtml('')
+      setHighlighting(false)
+      return
+    }
+
+    setHighlighting(true)
+
+    const shikiLang = language === 'text' ? 'text' : language
+
+    codeToHtml(code, {
+      lang: shikiLang,
+      theme: theme === 'light' ? 'github-light' : 'github-dark',
+    })
+      .then((highlighted) => {
+        setHtml(highlighted)
+        htmlRef.current = highlighted
+        setHighlighting(false)
+      })
+      .catch((error) => {
+        console.error('Shiki highlighting failed:', error)
+        const escaped = code.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+        const fallback = `<pre><code>${escaped}</code></pre>`
+        setHtml(fallback)
+        htmlRef.current = fallback
+        setHighlighting(false)
+      })
+  }, [code, language, theme])
+
+  // Set innerHTML via ref so React doesn't manage it (preserves our <mark> elements across re-renders)
+  useEffect(() => {
+    if (contentRef.current && !highlighting && html) {
+      contentRef.current.innerHTML = html
+    }
+  }, [html, highlighting])
+
+  // Update the search display state (triggers re-render only for the search bar UI)
+  const updateSearchDisplay = useCallback((count: number, index: number) => {
+    setSearchDisplay({ matchCount: count, currentIndex: index })
+  }, [])
+
+  // Clear all <mark> highlights from the content, restore original HTML
+  const clearHighlights = useCallback(() => {
+    if (contentRef.current && htmlRef.current) {
+      contentRef.current.innerHTML = htmlRef.current
+    }
+    matchCountRef.current = 0
+    currentIndexRef.current = 0
+    updateSearchDisplay(0, 0)
+  }, [updateSearchDisplay])
+
+  // Walk text nodes and wrap matches in <mark> elements
+  const applyHighlights = useCallback((query: string, activeIndex: number) => {
+    const container = contentRef.current
+    if (!container || !query) {
+      clearHighlights()
+      return
+    }
+
+    // Restore original HTML first (clean slate)
+    if (htmlRef.current) {
+      container.innerHTML = htmlRef.current
+    }
+
+    const lowerQuery = query.toLowerCase()
+    let totalMatches = 0
+
+    // Collect all text nodes
+    const textNodes: Text[] = []
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT)
+    let node: Text | null
+    while ((node = walker.nextNode() as Text | null)) {
+      if (node.textContent && node.textContent.length > 0) {
+        textNodes.push(node)
+      }
+    }
+
+    // Process each text node — find matches and wrap them
+    for (const textNode of textNodes) {
+      const text = textNode.textContent || ''
+      const lowerText = text.toLowerCase()
+
+      // Find all match positions in this text node
+      const positions: number[] = []
+      let searchFrom = 0
+      while (searchFrom < lowerText.length) {
+        const idx = lowerText.indexOf(lowerQuery, searchFrom)
+        if (idx === -1) break
+        positions.push(idx)
+        searchFrom = idx + 1
+      }
+
+      if (positions.length === 0) continue
+
+      const parent = textNode.parentNode
+      if (!parent) continue
+
+      const frag = document.createDocumentFragment()
+      let lastEnd = 0
+
+      for (const pos of positions) {
+        // Text before match
+        if (pos > lastEnd) {
+          frag.appendChild(document.createTextNode(text.slice(lastEnd, pos)))
+        }
+
+        // The match
+        const mark = document.createElement('mark')
+        mark.className = totalMatches === activeIndex
+          ? 'search-highlight active'
+          : 'search-highlight'
+        mark.textContent = text.slice(pos, pos + query.length)
+        mark.dataset.matchIndex = String(totalMatches)
+        frag.appendChild(mark)
+
+        totalMatches++
+        lastEnd = pos + query.length
+      }
+
+      // Remaining text
+      if (lastEnd < text.length) {
+        frag.appendChild(document.createTextNode(text.slice(lastEnd)))
+      }
+
+      parent.replaceChild(frag, textNode)
+    }
+
+    matchCountRef.current = totalMatches
+    const clampedIndex = totalMatches > 0 ? Math.min(activeIndex, totalMatches - 1) : 0
+    currentIndexRef.current = clampedIndex
+    updateSearchDisplay(totalMatches, clampedIndex)
+
+    // Scroll to active match
+    if (totalMatches > 0) {
+      requestAnimationFrame(() => {
+        const activeMark = container.querySelector(`mark.search-highlight[data-match-index="${clampedIndex}"]`)
+        if (activeMark) {
+          activeMark.scrollIntoView({ block: 'center', behavior: 'smooth' })
+        }
+      })
+    }
+  }, [clearHighlights, updateSearchDisplay])
+
+  // Update active match by swapping CSS classes (no DOM rebuild)
+  const setActiveMatch = useCallback((newIndex: number) => {
+    const container = contentRef.current
+    if (!container || matchCountRef.current === 0) return
+
+    // Remove active from current
+    const current = container.querySelector('mark.search-highlight.active')
+    if (current) {
+      current.className = 'search-highlight'
+    }
+
+    // Add active to new
+    const next = container.querySelector(`mark.search-highlight[data-match-index="${newIndex}"]`)
+    if (next) {
+      next.className = 'search-highlight active'
+      next.scrollIntoView({ block: 'center', behavior: 'smooth' })
+    }
+
+    currentIndexRef.current = newIndex
+    updateSearchDisplay(matchCountRef.current, newIndex)
+  }, [updateSearchDisplay])
+
+  // Apply highlights when query changes
+  useEffect(() => {
+    if (!searchOpen) return
+    if (!searchQuery) {
+      clearHighlights()
+      return
+    }
+
+    const timer = setTimeout(() => {
+      applyHighlights(searchQuery, 0)
+    }, 150)
+
+    return () => clearTimeout(timer)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery, searchOpen])
+
+  // Re-apply highlights when Shiki finishes while search is open
+  useEffect(() => {
+    if (searchOpen && searchQuery && !highlighting) {
+      const timer = setTimeout(() => {
+        applyHighlights(searchQuery, currentIndexRef.current)
+      }, 50)
+      return () => clearTimeout(timer)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [html, highlighting])
+
+  // Close search when code changes
+  useEffect(() => {
+    if (searchOpen) {
+      clearHighlights()
+      setSearchOpen(false)
+      setSearchQuery('')
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [code])
+
+  // Navigation
+  const goToNextMatch = useCallback(() => {
+    if (matchCountRef.current === 0) return
+    const newIndex = (currentIndexRef.current + 1) % matchCountRef.current
+    setActiveMatch(newIndex)
+  }, [setActiveMatch])
+
+  const goToPrevMatch = useCallback(() => {
+    if (matchCountRef.current === 0) return
+    const newIndex = (currentIndexRef.current - 1 + matchCountRef.current) % matchCountRef.current
+    setActiveMatch(newIndex)
+  }, [setActiveMatch])
+
+  // Open search
+  const openSearch = useCallback(() => {
+    setSearchOpen(true)
+    requestAnimationFrame(() => {
+      searchInputRef.current?.focus()
+      searchInputRef.current?.select()
+    })
+  }, [])
+
+  // Close search
+  const closeSearch = useCallback(() => {
+    setSearchOpen(false)
+    setSearchQuery('')
+    clearHighlights()
+  }, [clearHighlights])
+
+  // Keyboard: Ctrl+F on wrapper
+  const handleWrapperKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+      e.preventDefault()
+      e.stopPropagation()
+      openSearch()
+    }
+  }, [openSearch])
+
+  // Global Ctrl+F when mouse is inside
+  useEffect(() => {
+    const handleGlobalKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'f' && isMouseInsideRef.current) {
+        e.preventDefault()
+        e.stopPropagation()
+        openSearch()
+      }
+    }
+    document.addEventListener('keydown', handleGlobalKeyDown, true)
+    return () => document.removeEventListener('keydown', handleGlobalKeyDown, true)
+  }, [openSearch])
+
+  // Search input keyboard
+  const handleSearchKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      closeSearch()
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      if (e.shiftKey) {
+        goToPrevMatch()
+      } else {
+        goToNextMatch()
+      }
+    }
+  }, [closeSearch, goToNextMatch, goToPrevMatch])
+
+  const handleCopy = () => {
+    if (onCopy) {
+      onCopy(code)
+    } else {
+      navigator.clipboard.writeText(code)
+    }
+  }
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={`relative rounded-lg overflow-hidden ${theme === 'light' ? 'bg-[#ffffff]' : 'bg-[#0d1117]'}`}
+      tabIndex={0}
+      onKeyDown={handleWrapperKeyDown}
+      onMouseEnter={() => { isMouseInsideRef.current = true }}
+      onMouseLeave={() => { isMouseInsideRef.current = false }}
+      style={{ outline: 'none' }}
+    >
+      {showCopyButton && !searchOpen && (
+        <button
+          onClick={handleCopy}
+          className="absolute top-2 right-2 z-10 flex items-center gap-1 px-2 py-1 text-xs text-theme-text-secondary hover:text-theme-text-primary bg-theme-surface/80 hover:bg-theme-elevated rounded backdrop-blur-sm"
+        >
+          {copied ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
+          Copy
+        </button>
+      )}
+
+      {/* Search bar */}
+      {searchOpen && (
+        <div className="absolute top-2 right-2 z-20 flex items-center gap-1 px-2 py-1.5 bg-theme-surface border border-theme-border rounded-lg shadow-lg backdrop-blur-sm">
+          <Search className="w-3.5 h-3.5 text-theme-text-tertiary shrink-0" />
+          <input
+            ref={searchInputRef}
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            onKeyDown={handleSearchKeyDown}
+            placeholder="Search..."
+            className="w-40 bg-transparent text-xs text-theme-text-primary placeholder:text-theme-text-disabled outline-none"
+            autoFocus
+          />
+          {searchQuery && (
+            <span className="text-xs text-theme-text-tertiary whitespace-nowrap shrink-0">
+              {searchDisplay.matchCount > 0
+                ? `${searchDisplay.currentIndex + 1} of ${searchDisplay.matchCount}`
+                : 'No results'}
+            </span>
+          )}
+          <button
+            onClick={goToPrevMatch}
+            disabled={searchDisplay.matchCount === 0}
+            className="p-0.5 text-theme-text-tertiary hover:text-theme-text-primary disabled:opacity-30 rounded"
+            title="Previous (Shift+Enter)"
+          >
+            <ChevronUp className="w-3.5 h-3.5" />
+          </button>
+          <button
+            onClick={goToNextMatch}
+            disabled={searchDisplay.matchCount === 0}
+            className="p-0.5 text-theme-text-tertiary hover:text-theme-text-primary disabled:opacity-30 rounded"
+            title="Next (Enter)"
+          >
+            <ChevronDown className="w-3.5 h-3.5" />
+          </button>
+          <button
+            onClick={closeSearch}
+            className="p-0.5 text-theme-text-tertiary hover:text-theme-text-primary rounded"
+            title="Close (Escape)"
+          >
+            <X className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      )}
+
+      <div
+        className="overflow-auto"
+        style={{ maxHeight }}
+      >
+        {highlighting ? (
+          <div className="p-4 text-theme-text-tertiary text-sm font-mono">Loading...</div>
+        ) : (
+          <div
+            ref={contentRef}
+            className={`shiki-viewer text-xs ${showLineNumbers ? 'with-line-numbers' : ''}`}
+          />
+        )}
+      </div>
+
+      <style>{`
+        :root[data-theme="light"] { --code-line-number: #8b949e; }
+        :root[data-theme="dark"] { --code-line-number: #484f58; }
+        .shiki-viewer pre {
+          margin: 0;
+          padding: 12px;
+          background: transparent !important;
+          font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+          font-size: 12px;
+          line-height: 1.5;
+        }
+        .shiki-viewer code {
+          font-family: inherit;
+        }
+        .shiki-viewer.with-line-numbers code {
+          counter-reset: line;
+        }
+        .shiki-viewer .line {
+          display: inline-block;
+          width: 100%;
+        }
+        .shiki-viewer.with-line-numbers .line::before {
+          counter-increment: line;
+          content: counter(line);
+          display: inline-block;
+          width: 3ch;
+          margin-right: 1.5ch;
+          text-align: right;
+          color: var(--code-line-number, #484f58);
+          user-select: none;
+        }
+        .shiki-viewer .line:hover {
+          background: rgba(99, 110, 123, 0.1);
+        }
+        mark.search-highlight {
+          background-color: rgba(250, 204, 21, 0.35);
+          color: inherit;
+          border-radius: 2px;
+          padding: 0;
+        }
+        mark.search-highlight.active {
+          background-color: rgba(250, 204, 21, 0.8);
+          outline: 2px solid rgba(250, 204, 21, 0.9);
+          border-radius: 2px;
+        }
+      `}</style>
+    </div>
+  )
+}

package/src/components/ui/ConfirmDialog.tsx

@@ -0,0 +1,188 @@
+import { useEffect, useRef, ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { AlertTriangle, X } from 'lucide-react'
+import { clsx } from 'clsx'
+import { SEVERITY_TEXT, SEVERITY_BADGE_BORDERED } from '../../utils/badge-colors'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+
+
+interface ConfirmDialogProps {
+  open: boolean
+  onClose: () => void
+  onConfirm: () => void
+  title: string
+  message: string
+  details?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  variant?: 'danger' | 'warning'
+  isLoading?: boolean
+  children?: ReactNode // Optional custom content (e.g., checkboxes)
+}
+
+export function ConfirmDialog({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  details,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  variant = 'danger',
+  isLoading = false,
+  children,
+}: ConfirmDialogProps) {
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, 200)
+
+  // Handle ESC key
+  useEffect(() => {
+    if (!open) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && !isLoading) {
+        e.stopPropagation()
+        onClose()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => document.removeEventListener('keydown', handleKeyDown, true)
+  }, [open, onClose, isLoading])
+
+  // Focus trap
+  useEffect(() => {
+    if (open && dialogRef.current) {
+      dialogRef.current.focus()
+    }
+  }, [open])
+
+  if (!shouldRender) return null
+
+  const isDanger = variant === 'danger'
+  const severity = isDanger ? 'error' : 'warning'
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className={clsx(
+          'absolute inset-0 bg-black/60 backdrop-blur-sm',
+          TRANSITION_BACKDROP,
+          isOpen ? 'opacity-100' : 'opacity-0'
+        )}
+        onClick={isLoading ? undefined : onClose}
+      />
+
+      {/* Dialog */}
+      <div
+        ref={dialogRef}
+        tabIndex={-1}
+        className={clsx(
+          'relative bg-theme-surface border border-theme-border rounded-lg shadow-2xl max-w-md w-full mx-4 outline-none',
+          TRANSITION_PANEL,
+          isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-start gap-3 p-4 border-b border-theme-border">
+          <div
+            className={clsx(
+              'flex items-center justify-center w-10 h-10 rounded-full shrink-0',
+              isDanger ? 'bg-red-500/20' : 'bg-amber-500/20'
+            )}
+          >
+            <AlertTriangle className={clsx('w-5 h-5', SEVERITY_TEXT[severity])} />
+          </div>
+          <div className="flex-1 min-w-0">
+            <h3 className="text-lg font-semibold text-theme-text-primary">{title}</h3>
+            <p className="text-sm text-theme-text-secondary mt-1">{message}</p>
+          </div>
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded disabled:opacity-50"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Details */}
+        {details && (
+          <div className="p-4 border-b border-theme-border">
+            <pre className="text-xs text-theme-text-secondary bg-theme-base/50 rounded p-3 overflow-auto max-h-32 whitespace-pre-wrap font-mono">
+              {details}
+            </pre>
+          </div>
+        )}
+
+        {/* Custom content */}
+        {children && (
+          <div className="px-4 pt-4">
+            {children}
+          </div>
+        )}
+
+        {/* Warning message */}
+        <div className="p-4">
+          <div
+            className={clsx(
+              'flex items-start gap-2 p-3 rounded text-sm',
+              SEVERITY_BADGE_BORDERED[severity]
+            )}
+          >
+            <AlertTriangle className="w-4 h-4 mt-0.5 shrink-0" />
+            <span>
+              {isDanger
+                ? 'This action cannot be undone. Please make sure you want to proceed.'
+                : 'Please confirm you want to proceed with this action.'}
+            </span>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center justify-end gap-3 p-4 border-t border-theme-border">
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="px-4 py-2 text-sm font-medium text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-lg transition-colors disabled:opacity-50"
+          >
+            {cancelLabel}
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={isLoading}
+            className={clsx(
+              'px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 flex items-center gap-2',
+              isDanger
+                ? 'bg-red-600 hover:bg-red-700 text-theme-text-primary'
+                : 'bg-amber-600 hover:bg-amber-700 text-theme-text-primary'
+            )}
+          >
+            {isLoading && (
+              <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                  fill="none"
+                />
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                />
+              </svg>
+            )}
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}

package/src/components/ui/ForceDeleteConfirmDialog.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react'
+import { ConfirmDialog } from './ConfirmDialog'
+
+interface ForceDeleteConfirmDialogProps {
+  open: boolean
+  onClose: () => void
+  onConfirm: (force: boolean) => void
+  resourceName: string
+  resourceKind: string
+  namespaceName: string
+  isLoading: boolean
+}
+
+export function ForceDeleteConfirmDialog({
+  open,
+  onClose,
+  onConfirm,
+  resourceName,
+  resourceKind,
+  namespaceName,
+  isLoading,
+}: ForceDeleteConfirmDialogProps) {
+  const [forceDelete, setForceDelete] = useState(false)
+
+  function handleClose() {
+    onClose()
+    setForceDelete(false)
+  }
+
+  function handleConfirm() {
+    onConfirm(forceDelete)
+  }
+
+  return (
+    <ConfirmDialog
+      open={open}
+      onClose={handleClose}
+      onConfirm={handleConfirm}
+      title="Delete Resource"
+      message={`Are you sure you want to delete "${resourceName}"?`}
+      details={`This will permanently delete the ${resourceKind} "${resourceName}" from the "${namespaceName}" namespace.`}
+      confirmLabel={forceDelete ? 'Force Delete' : 'Delete'}
+      variant="danger"
+      isLoading={isLoading}
+    >
+      <label className="flex items-center gap-2 text-sm text-theme-text-secondary">
+        <input
+          type="checkbox"
+          checked={forceDelete}
+          onChange={(e) => setForceDelete(e.target.checked)}
+          className="w-4 h-4 rounded border-theme-border bg-theme-base text-red-600 focus:ring-red-500 focus:ring-offset-0"
+        />
+        <span>Force delete (strips finalizers and bypasses grace period)</span>
+      </label>
+    </ConfirmDialog>
+  )
+}