@skyhook-io/radar-app 0.1.1

package/src/components/resources/PodFilesystemModal.tsx

@@ -0,0 +1,407 @@
+import { useState, useRef, useEffect, useMemo, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import { X, File, Link2, ChevronRight, AlertTriangle, Loader2, Search, Download, FolderOpen } from 'lucide-react'
+import { clsx } from 'clsx'
+import type { FileNode } from '../../types'
+import { formatBytes } from '../../utils/format'
+import { downloadBlob, filterTree } from './file-browser-utils'
+import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
+
+interface PodFilesystem {
+  root: FileNode
+  totalFiles: number
+}
+
+async function fetchPodFiles(
+  namespace: string,
+  podName: string,
+  container: string,
+  dirPath: string,
+): Promise<PodFilesystem> {
+  const params = new URLSearchParams()
+  params.set('container', container)
+  params.set('path', dirPath)
+
+  const response = await fetch(apiUrl(`/pods/${namespace}/${podName}/files?${params.toString()}`), {
+    credentials: getCredentialsMode(),
+    headers: getAuthHeaders(),
+  })
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: 'Request failed' }))
+    throw new Error(error.error || `HTTP ${response.status}`)
+  }
+  return response.json()
+}
+
+interface PodFilesystemModalProps {
+  open: boolean
+  onClose: () => void
+  namespace: string
+  podName: string
+  containers: string[]
+  initialContainer?: string
+  onSwitchToImageFiles?: () => void
+}
+
+export function PodFilesystemModal({
+  open,
+  onClose,
+  namespace,
+  podName,
+  containers,
+  initialContainer,
+  onSwitchToImageFiles,
+}: PodFilesystemModalProps) {
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedContainer, setSelectedContainer] = useState(initialContainer || containers[0] || '')
+  const [currentPath, setCurrentPath] = useState('/')
+  const [filesystem, setFilesystem] = useState<PodFilesystem | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const loadDirectory = useCallback(async (dirPath: string) => {
+    setIsLoading(true)
+    setError(null)
+    try {
+      const result = await fetchPodFiles(namespace, podName, selectedContainer, dirPath)
+      setFilesystem(result)
+      setCurrentPath(dirPath)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to list files')
+    } finally {
+      setIsLoading(false)
+    }
+  }, [namespace, podName, selectedContainer])
+
+  // Load root on open or container change
+  useEffect(() => {
+    if (open && selectedContainer) {
+      loadDirectory('/')
+    }
+  }, [open, selectedContainer, loadDirectory])
+
+  // Reset state when modal closes
+  useEffect(() => {
+    if (!open) {
+      setSearchQuery('')
+      setFilesystem(null)
+      setError(null)
+      setIsLoading(false)
+      setCurrentPath('/')
+      setSelectedContainer(initialContainer || containers[0] || '')
+    }
+  }, [open, initialContainer, containers])
+
+  // Handle ESC key
+  useEffect(() => {
+    if (!open) return
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') { e.stopPropagation(); onClose() }
+    }
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => document.removeEventListener('keydown', handleKeyDown, true)
+  }, [open, onClose])
+
+  // Focus trap
+  useEffect(() => {
+    if (open && dialogRef.current) {
+      dialogRef.current.focus()
+    }
+  }, [open])
+
+  if (!open) return null
+
+  const showFilesystem = filesystem && filesystem.root
+
+  // Build breadcrumb segments
+  const pathSegments = currentPath === '/'
+    ? ['/']
+    : ['/', ...currentPath.split('/').filter(Boolean)]
+
+  return createPortal(
+    <div className="fixed inset-0 z-[100] flex items-center justify-center">
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+
+      {/* Modal */}
+      <div
+        ref={dialogRef}
+        tabIndex={-1}
+        className="relative dialog w-full max-w-4xl mx-4 max-h-[85vh] flex flex-col outline-none"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-theme-border shrink-0">
+          <div className="flex-1 min-w-0">
+            <h3 className="text-lg font-semibold text-theme-text-primary">Pod Files</h3>
+            <p className="text-sm text-theme-text-secondary truncate mt-0.5">
+              {namespace}/{podName}
+            </p>
+          </div>
+
+          {/* Container selector */}
+          {containers.length > 1 && (
+            <select
+              value={selectedContainer}
+              onChange={(e) => setSelectedContainer(e.target.value)}
+              className="mr-4 px-3 py-1.5 text-sm bg-theme-base border border-theme-border rounded-lg text-theme-text-primary focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              {containers.map((c) => (
+                <option key={c} value={c}>{c}</option>
+              ))}
+            </select>
+          )}
+
+          <button
+            onClick={onClose}
+            className="p-2 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded ml-2"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Breadcrumb + Search */}
+        <div className="p-3 border-b border-theme-border shrink-0 flex items-center gap-3">
+          {/* Breadcrumb */}
+          <div className="flex items-center gap-1 text-sm min-w-0 flex-shrink overflow-hidden">
+            {pathSegments.map((segment, i) => {
+              const segmentPath = i === 0 ? '/' : '/' + pathSegments.slice(1, i + 1).join('/')
+              const isLast = i === pathSegments.length - 1
+              return (
+                <span key={segmentPath} className="flex items-center gap-1">
+                  {i > 0 && <ChevronRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />}
+                  <button
+                    onClick={() => !isLast && loadDirectory(segmentPath)}
+                    className={clsx(
+                      'truncate',
+                      isLast
+                        ? 'text-theme-text-primary font-medium'
+                        : 'text-blue-400 hover:text-blue-300 hover:underline'
+                    )}
+                  >
+                    {segment === '/' ? '/' : segment}
+                  </button>
+                </span>
+              )
+            })}
+          </div>
+
+          {/* Search */}
+          {showFilesystem && (
+            <div className="relative flex-1 min-w-[200px]">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
+              <input
+                type="text"
+                placeholder="Filter files..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-10 pr-4 py-1.5 bg-theme-base border border-theme-border rounded-lg text-sm text-theme-text-primary placeholder-theme-text-tertiary focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+          )}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-4">
+          {/* Loading */}
+          {isLoading && (
+            <div className="flex flex-col items-center justify-center h-64">
+              <Loader2 className="w-8 h-8 text-blue-400 animate-spin" />
+              <span className="mt-3 text-theme-text-secondary">Loading files...</span>
+            </div>
+          )}
+
+          {/* Error */}
+          {error && !isLoading && (
+            <div className="p-4 bg-red-500/10 border border-red-500/30 rounded-lg">
+              <div className="flex items-start gap-3">
+                <AlertTriangle className="w-5 h-5 text-red-400 shrink-0 mt-0.5" />
+                <div>
+                  <div className="font-medium text-red-400">Failed to list files</div>
+                  <div className="text-sm text-theme-text-secondary mt-1">{error}</div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* File tree */}
+          {showFilesystem && !isLoading && (
+            <PodFileTreeView
+              root={filesystem.root}
+              searchQuery={searchQuery}
+              namespace={namespace}
+              podName={podName}
+              container={selectedContainer}
+              onNavigate={loadDirectory}
+            />
+          )}
+        </div>
+
+        {/* Footer with stats */}
+        <div className="p-3 border-t border-theme-border text-xs text-theme-text-tertiary flex items-center gap-4 shrink-0">
+          {filesystem && !isLoading && (
+            <>
+              <span>{filesystem.totalFiles} items</span>
+              <span>Container: {selectedContainer}</span>
+            </>
+          )}
+          {onSwitchToImageFiles && (
+            <button
+              onClick={() => { onClose(); onSwitchToImageFiles() }}
+              className="ml-auto text-blue-400 hover:text-blue-300 hover:underline"
+            >
+              Browse static image from registry &rarr;
+            </button>
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+// ============================================================================
+// Pod File Tree View
+// ============================================================================
+
+interface PodFileTreeViewProps {
+  root: FileNode
+  searchQuery: string
+  namespace: string
+  podName: string
+  container: string
+  onNavigate: (path: string) => void
+}
+
+function PodFileTreeView({ root, searchQuery, namespace, podName, container, onNavigate }: PodFileTreeViewProps) {
+  const filteredRoot = useMemo(() => {
+    if (!searchQuery.trim()) return root
+    return filterTree(root, searchQuery.toLowerCase())
+  }, [root, searchQuery])
+
+  if (!filteredRoot || !filteredRoot.children || filteredRoot.children.length === 0) {
+    return (
+      <div className="text-center text-theme-text-tertiary py-8">
+        {searchQuery ? 'No files match your filter' : 'Empty directory'}
+      </div>
+    )
+  }
+
+  return (
+    <div className="font-mono text-sm">
+      {filteredRoot.children.map((node) => (
+        <PodFileTreeNode
+          key={node.path}
+          node={node}
+          namespace={namespace}
+          podName={podName}
+          container={container}
+          onNavigate={onNavigate}
+        />
+      ))}
+    </div>
+  )
+}
+
+interface PodFileTreeNodeProps {
+  node: FileNode
+  namespace: string
+  podName: string
+  container: string
+  onNavigate: (path: string) => void
+}
+
+function PodFileTreeNode({ node, namespace, podName, container, onNavigate }: PodFileTreeNodeProps) {
+  const [downloading, setDownloading] = useState(false)
+  const isDir = node.type === 'dir'
+  const isSymlink = node.type === 'symlink'
+  const isDownloadable = !isDir // files and symlinks can be downloaded
+
+  const handleDownload = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (downloading) return
+
+    setDownloading(true)
+    try {
+      const params = new URLSearchParams()
+      params.set('container', container)
+      params.set('path', node.path)
+
+      const response = await fetch(apiUrl(`/pods/${namespace}/${podName}/files/download?${params.toString()}`), {
+        credentials: getCredentialsMode(),
+        headers: getAuthHeaders(),
+      })
+      if (!response.ok) {
+        const err = await response.json().catch(() => ({ error: 'Download failed' }))
+        throw new Error(err.error || `HTTP ${response.status}`)
+      }
+
+      const blob = await response.blob()
+      await downloadBlob(blob, node.name)
+    } catch (err) {
+      console.error('Download failed:', err)
+    } finally {
+      setDownloading(false)
+    }
+  }
+
+  const handleClick = () => {
+    if (isDir) {
+      onNavigate(node.path)
+    }
+  }
+
+  return (
+    <div
+      className={clsx(
+        'flex items-center gap-1 py-0.5 px-1 rounded hover:bg-theme-elevated',
+        isDir && 'font-medium cursor-pointer'
+      )}
+      onClick={handleClick}
+    >
+      {isDir ? (
+        <FolderOpen className="w-4 h-4 text-amber-400 shrink-0" />
+      ) : isSymlink ? (
+        <Link2 className="w-4 h-4 text-cyan-400 shrink-0" />
+      ) : (
+        <File className="w-4 h-4 text-theme-text-tertiary shrink-0" />
+      )}
+
+      <span className="text-theme-text-primary truncate flex-1">{node.name}</span>
+
+      {isSymlink && node.linkTarget && (
+        <span className="text-xs text-cyan-400 truncate max-w-48">
+          -&gt; {node.linkTarget}
+        </span>
+      )}
+
+      {!isDir && node.size !== undefined && (
+        <span className="text-xs text-theme-text-tertiary ml-2">
+          {formatBytes(node.size)}
+        </span>
+      )}
+
+      {node.permissions && (
+        <span className="text-xs text-theme-text-tertiary ml-2 font-normal">
+          {node.permissions}
+        </span>
+      )}
+
+      {isDownloadable && (
+        <button
+          onClick={handleDownload}
+          disabled={downloading}
+          className="p-1 text-theme-text-tertiary hover:text-blue-400 hover:bg-theme-elevated rounded ml-1 disabled:opacity-50"
+          title="Download file"
+        >
+          {downloading ? (
+            <Loader2 className="w-3.5 h-3.5 animate-spin" />
+          ) : (
+            <Download className="w-3.5 h-3.5" />
+          )}
+        </button>
+      )}
+    </div>
+  )
+}
+

package/src/components/resources/ResourceDetailDrawer.tsx

@@ -0,0 +1,43 @@
+import { ResourceDetailDrawer as BaseResourceDetailDrawer } from '@skyhook-io/k8s-ui'
+import type { SelectedResource } from '../../types'
+import { WorkloadView } from '../workload/WorkloadView'
+
+interface ResourceDetailDrawerProps {
+  resource: SelectedResource
+  onClose: () => void
+  onNavigate?: (resource: SelectedResource) => void
+  /** Open directly to YAML view */
+  initialTab?: 'detail' | 'yaml'
+  /** Controls slide-in/out animation (driven by useAnimatedUnmount) */
+  isOpen?: boolean
+  /** Whether the drawer is expanded to full-screen WorkloadView */
+  expanded?: boolean
+  /** Called when user clicks collapse in expanded mode */
+  onCollapse?: () => void
+  /** Called when user clicks expand button */
+  onExpand?: (resource: SelectedResource) => void
+  /** Navigate to another resource within expanded WorkloadView */
+  onNavigateToResource?: (resource: SelectedResource) => void
+}
+
+export function ResourceDetailDrawer(props: ResourceDetailDrawerProps) {
+  return (
+    <BaseResourceDetailDrawer {...props}>
+      {({ resource, expanded, initialTab, onClose, onExpand, onBack, onNavigateToResource, onCollapseToDrawer }) => (
+        <WorkloadView
+          kind={resource.kind}
+          namespace={resource.namespace}
+          name={resource.name}
+          group={resource.group}
+          expanded={expanded}
+          initialTab={initialTab}
+          onClose={onClose}
+          onExpand={onExpand}
+          onBack={onBack ?? (() => {})}
+          onNavigateToResource={onNavigateToResource}
+          onCollapseToDrawer={onCollapseToDrawer}
+        />
+      )}
+    </BaseResourceDetailDrawer>
+  )
+}

package/src/components/resources/ResourcesView.tsx

@@ -0,0 +1,190 @@
+import { useState, useMemo, useCallback, useEffect } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { ApiError, fetchJSON, isForbiddenError, useSecretCertExpiry, useTopPodMetrics, useTopNodeMetrics } from '../../api/client'
+import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
+import { useAPIResources } from '../../api/apiResources'
+import { initNavigationMap } from '@skyhook-io/k8s-ui'
+import { usePinnedKinds } from '../../hooks/useFavorites'
+import { useOpenLogs, useOpenWorkloadLogs } from '../dock'
+import {
+  ResourcesView as BaseResourcesView,
+  CORE_RESOURCES,
+} from '@skyhook-io/k8s-ui'
+import type { ResourceQueryResult } from '@skyhook-io/k8s-ui'
+import type { SelectedResource } from '../../types'
+import type { NavigateToResource } from '../../utils/navigation'
+import { CreateResourceDialog } from '../shared/CreateResourceDialog'
+import { getSkeletonYaml } from '../../utils/skeleton-yaml'
+
+interface ResourceCountsResponse {
+  counts: Record<string, number>
+  forbidden?: string[]
+}
+
+interface ResourcesViewProps {
+  namespaces: string[]
+  selectedResource?: SelectedResource | null
+  onResourceClick?: (resource: SelectedResource | null) => void
+  onResourceClickYaml?: NavigateToResource
+  onKindChange?: () => void
+}
+
+export function ResourcesView({ namespaces, selectedResource, onResourceClick, onResourceClickYaml, onKindChange }: ResourcesViewProps) {
+  const location = useLocation()
+  const navigate = useNavigate()
+
+  // API resources discovery
+  const { data: apiResources } = useAPIResources()
+
+  // Initialize navigation kind↔plural maps from discovered API resources
+  useEffect(() => {
+    if (apiResources) initNavigationMap(apiResources)
+  }, [apiResources])
+
+  // Track the selected kind from the k8s-ui component
+  const [selectedKind, setSelectedKind] = useState<{ name: string; kind: string; group: string } | null>(null)
+
+  // Lightweight resource counts for sidebar badges (~2KB instead of ~608MB)
+  const namespacesParam = namespaces.join(',')
+  const { data: countsData } = useQuery({
+    queryKey: ['resource-counts', namespacesParam],
+    queryFn: async () => {
+      const params = new URLSearchParams()
+      if (namespaces.length > 0) params.set('namespaces', namespacesParam)
+      return fetchJSON<ResourceCountsResponse>(`/resource-counts?${params}`)
+    },
+    staleTime: 10000,
+    refetchInterval: 60000, // Safety net — SSE k8s_event drives near-real-time invalidation
+  })
+
+  // Determine if selected kind is a CRD (only CRDs should send ?group= to backend)
+  const isSelectedCrd = useMemo(() => {
+    if (!selectedKind) return false
+    // Check API resources first, fall back to CORE_RESOURCES
+    const match = apiResources?.find(r => r.name === selectedKind.name && r.group === selectedKind.group)
+      ?? CORE_RESOURCES.find(r => r.name === selectedKind.name && r.group === selectedKind.group)
+    return match?.isCrd ?? (!!selectedKind.group) // default: has group = likely CRD
+  }, [selectedKind, apiResources])
+
+  // Fetch full data only for the selected kind
+  const selectedKindQuery = useQuery({
+    queryKey: ['resources', selectedKind?.name, isSelectedCrd ? selectedKind?.group : '', namespaces],
+    queryFn: async () => {
+      if (!selectedKind) return []
+      const params = new URLSearchParams()
+      if (namespaces.length > 0) params.set('namespaces', namespacesParam)
+      if (isSelectedCrd && selectedKind.group) params.set('group', selectedKind.group)
+      const res = await fetch(apiUrl(`/resources/${selectedKind.name}?${params}`), {
+        credentials: getCredentialsMode(),
+        headers: getAuthHeaders(),
+      })
+      if (!res.ok) {
+        const errorData = await res.json().catch(() => ({ error: `HTTP ${res.status}` }))
+        throw new ApiError(errorData.error || `Failed to fetch ${selectedKind.name}`, res.status, errorData)
+      }
+      return res.json()
+    },
+    enabled: !!selectedKind,
+    staleTime: 30000,
+    refetchInterval: 120000, // Safety net — SSE k8s_event drives near-real-time invalidation
+    retry: (failureCount: number, error: Error) => {
+      if (isForbiddenError(error)) return false
+      return failureCount < 3
+    },
+  })
+
+  // Map to ResourceQueryResult shape
+  const selectedKindQueryResult: ResourceQueryResult | undefined = useMemo(() => {
+    if (!selectedKind) return undefined
+    return {
+      data: selectedKindQuery.data as any[] | undefined,
+      isLoading: selectedKindQuery.isLoading,
+      error: selectedKindQuery.error,
+      refetch: selectedKindQuery.refetch,
+      dataUpdatedAt: selectedKindQuery.dataUpdatedAt,
+    }
+  }, [selectedKind, selectedKindQuery.data, selectedKindQuery.isLoading, selectedKindQuery.error, selectedKindQuery.refetch, selectedKindQuery.dataUpdatedAt])
+
+  // Metrics
+  const { data: topPodMetrics } = useTopPodMetrics()
+  const { data: topNodeMetrics } = useTopNodeMetrics()
+
+  // Certificate expiry
+  const { data: certExpiry, isError: certExpiryError } = useSecretCertExpiry()
+
+  // Pinned kinds
+  const { pinned, togglePin, isPinned } = usePinnedKinds()
+
+  // Dock actions
+  const openLogs = useOpenLogs()
+  const openWorkloadLogs = useOpenWorkloadLogs()
+
+  // Navigation adapter
+  const handleNavigate = useMemo(() => {
+    return (path: string, options?: { replace?: boolean }) => {
+      navigate(path, { replace: options?.replace })
+    }
+  }, [navigate])
+
+  // Create resource dialog
+  const [createDialogOpen, setCreateDialogOpen] = useState(false)
+  const [createDialogYaml, setCreateDialogYaml] = useState('')
+  const [createDialogTitle, setCreateDialogTitle] = useState<string | undefined>()
+
+  const handleCreateResource = useCallback((kind: { name: string; kind: string; group: string } | null) => {
+    if (kind?.kind) {
+      setCreateDialogYaml(getSkeletonYaml(kind.kind, kind.group))
+      setCreateDialogTitle(`Create ${kind.kind}`)
+    } else {
+      setCreateDialogYaml('')
+      setCreateDialogTitle(undefined)
+    }
+    setCreateDialogOpen(true)
+  }, [])
+
+  return (
+    <>
+    <BaseResourcesView
+      namespaces={namespaces}
+      selectedResource={selectedResource}
+      onResourceClick={onResourceClick}
+      onResourceClickYaml={onResourceClickYaml}
+      onKindChange={onKindChange}
+      // Injected data
+      apiResources={apiResources}
+      // Lightweight counts for sidebar (replaces 233 parallel queries)
+      resourceCounts={countsData?.counts}
+      resourceForbidden={countsData?.forbidden}
+      selectedKindQuery={selectedKindQueryResult}
+      onSelectedKindChange={setSelectedKind}
+      topPodMetrics={topPodMetrics}
+      topNodeMetrics={topNodeMetrics}
+      certExpiry={certExpiry}
+      certExpiryError={certExpiryError}
+      // Pinned kinds
+      pinned={pinned}
+      togglePin={togglePin}
+      isPinned={(kind: string, group?: string) => isPinned(kind, group ?? '')}
+      // Navigation
+      locationSearch={location.search}
+      locationPathname={location.pathname}
+      onNavigate={handleNavigate}
+      // Dock actions
+      onOpenLogs={openLogs}
+      onOpenWorkloadLogs={openWorkloadLogs}
+      // Create resource
+      onCreateResource={handleCreateResource}
+    />
+    <CreateResourceDialog
+      open={createDialogOpen}
+      onClose={() => setCreateDialogOpen(false)}
+      initialYaml={createDialogYaml}
+      title={createDialogTitle}
+      onCreated={(result) => {
+        onResourceClick?.({ kind: result.kind, namespace: result.namespace, name: result.name, group: '' })
+      }}
+    />
+    </>
+  )
+}

package/src/components/resources/drawer-components.tsx

@@ -0,0 +1 @@
+export * from '@skyhook-io/k8s-ui/components/ui/drawer-components'

package/src/components/resources/file-browser-utils.ts

@@ -0,0 +1,35 @@
+import type { FileNode } from '../../types'
+import { isDesktopApp, desktopSaveBlob } from '../../utils/desktop-download'
+
+/** Trigger a file download from a Blob. Uses native save dialog on desktop. */
+export async function downloadBlob(blob: Blob, filename: string): Promise<void> {
+  if (await isDesktopApp()) {
+    await desktopSaveBlob(blob, filename)
+    return
+  }
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
+/** Recursively filter a FileNode tree by name substring match. */
+export function filterTree(node: FileNode, query: string): FileNode | null {
+  if (node.name.toLowerCase().includes(query)) {
+    return node
+  }
+
+  if (node.type === 'dir' && node.children) {
+    const filteredChildren = node.children
+      .map((child) => filterTree(child, query))
+      .filter((child): child is FileNode => child !== null)
+
+    if (filteredChildren.length > 0) {
+      return { ...node, children: filteredChildren }
+    }
+  }
+
+  return null
+}

package/src/components/resources/renderers/AlertRenderer.tsx

@@ -0,0 +1 @@
+export * from '@skyhook-io/k8s-ui/components/resources/renderers/AlertRenderer'