@skyhook-io/radar-app 0.2.2 → 0.3.1

package/src/components/resource/RightsizingStrip.tsx

@@ -0,0 +1,363 @@
+import { ArrowRight, ExternalLink, Gauge, HelpCircle, Loader2 } from 'lucide-react'
+import { Link, useLocation } from 'react-router-dom'
+import { Badge } from '@skyhook-io/k8s-ui/components/ui/Badge'
+import {
+  usePrometheusRightsizing,
+  usePrometheusStatus,
+  useAutoPromConnect,
+  type PrometheusRightsizing,
+  type RightsizingFit,
+  type RightsizingRow,
+} from '../../api/client'
+import { Tooltip } from '../ui/Tooltip'
+
+const RIGHTSIZING_KINDS = new Set(['Deployment', 'StatefulSet', 'DaemonSet'])
+export const RIGHTSIZING_DOCS_URL = 'https://radarhq.io/docs/features/rightsizing'
+export const RIGHTSIZING_SUMMARY =
+  'Evidence-based guidance for this workload, not a savings estimate or automatic change.'
+export const RIGHTSIZING_METHODOLOGY =
+  'Uses seven days of 5-minute samples: CPU P95 and memory maximum, plus 15% headroom. Reductions are staged and rounded to practical values; memory reductions also require verifiable restart history. Radar does not change requests.'
+
+interface RightsizingProps {
+  kind: string
+  namespace: string
+  name: string
+}
+
+function useRightsizingEvidence({ kind, namespace, name }: RightsizingProps) {
+  useAutoPromConnect()
+  const { data: status, isLoading: statusLoading } = usePrometheusStatus()
+  const connected = status?.connected === true
+  const supported = RIGHTSIZING_KINDS.has(kind)
+  const query = usePrometheusRightsizing(kind, namespace, name, connected && supported)
+  return { connected, supported, statusLoading, ...query }
+}
+
+export function RightsizingPanel(props: RightsizingProps) {
+  const state = useRightsizingEvidence(props)
+  const { search } = useLocation()
+  if (!state.supported) return null
+
+  return (
+    <section className="mx-auto w-full max-w-[1600px] rounded-lg border border-theme-border bg-theme-surface/50">
+      <header className="flex flex-wrap items-start justify-between gap-3 border-b border-theme-border px-4 py-3">
+        <div className="flex items-start gap-2">
+          <Gauge className="mt-0.5 h-4 w-4 text-theme-text-tertiary" />
+          <div>
+            <div className="flex items-center gap-1.5">
+              <h3 className="text-sm font-semibold text-theme-text-primary">Rightsizing</h3>
+              <Tooltip content={RIGHTSIZING_METHODOLOGY}>
+                <HelpCircle className="h-3.5 w-3.5 text-theme-text-tertiary" />
+              </Tooltip>
+            </div>
+            <p className="text-xs text-theme-text-tertiary">
+              {RIGHTSIZING_SUMMARY}{' '}
+              <a
+                href={RIGHTSIZING_DOCS_URL}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1 text-accent-text hover:underline"
+              >
+                How it works
+                <ExternalLink className="h-3 w-3" />
+              </a>
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          {state.data && <RightsizingContext data={state.data} />}
+          <Link
+            to={{ pathname: '/cost/rightsizing', search }}
+            className="text-xs font-medium text-accent-text hover:underline"
+          >
+            Scan visible workloads
+          </Link>
+        </div>
+      </header>
+      <div className="p-4">
+        <RightsizingBody state={state} compact={false} />
+      </div>
+    </section>
+  )
+}
+
+export function RightsizingStrip(props: RightsizingProps) {
+  const state = useRightsizingEvidence(props)
+  if (!state.supported || !state.connected || (state.isLoading && !state.data)) return null
+  return (
+    <section className="mb-3 rounded-lg border border-theme-border bg-theme-surface/40 p-3">
+      <header className="mb-2 flex items-center justify-between gap-3">
+        <div className="flex items-center gap-1.5">
+          <h3 className="text-sm font-medium text-theme-text-primary">Rightsizing</h3>
+          <Tooltip content={RIGHTSIZING_METHODOLOGY}>
+            <HelpCircle className="h-3.5 w-3.5 text-theme-text-tertiary" />
+          </Tooltip>
+        </div>
+        {state.data && <RightsizingContext data={state.data} compact />}
+      </header>
+      <RightsizingBody state={state} compact />
+    </section>
+  )
+}
+
+function RightsizingBody({
+  state,
+  compact,
+}: {
+  state: ReturnType<typeof useRightsizingEvidence>
+  compact: boolean
+}) {
+  if (state.statusLoading) {
+    return <EmptyState text="Checking Prometheus connection…" loading />
+  }
+  if (!state.connected) {
+    return <EmptyState text="Connect Prometheus to compare requests with observed demand." />
+  }
+  if (state.isLoading && !state.data) {
+    return <EmptyState text="Analyzing seven days of workload demand…" loading />
+  }
+  if (state.error && !state.data) {
+    const message = state.error instanceof Error ? state.error.message : String(state.error)
+    return <EmptyState text={`Rightsizing unavailable — ${message}`} />
+  }
+  if (!state.data) return null
+  if (!state.data.sampleAvailable || state.data.rows.length === 0) {
+    return <EmptyState text={state.data.reason ?? 'No rightsizing evidence is available.'} />
+  }
+
+  const byContainer = new Map<string, RightsizingRow[]>()
+  for (const row of state.data.rows) {
+    const rows = byContainer.get(row.container) ?? []
+    rows.push(row)
+    byContainer.set(row.container, rows)
+  }
+
+  if (compact) {
+    return (
+      <div className="space-y-2">
+        {Array.from(byContainer.entries()).map(([container, rows]) => (
+          <div key={container}>
+            <div className="mb-1 text-xs font-medium text-theme-text-secondary">{container}</div>
+            <div className="space-y-1 pl-2">
+              {rows.map((row) => (
+                <CompactFitRow key={row.resource} row={row} />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {(state.data.scaledToZero || state.data.ownerCoverage === 'current_pods') && (
+        <div className="flex flex-wrap gap-2">
+          {state.data.scaledToZero && (
+            <Badge severity="neutral" size="sm">
+              No current replicas · showing retained evidence
+            </Badge>
+          )}
+          {state.data.ownerCoverage === 'current_pods' && (
+            <Badge severity="info" size="sm">
+              Current pods only · confidence capped
+            </Badge>
+          )}
+        </div>
+      )}
+      {Array.from(byContainer.entries()).map(([container, rows]) => (
+        <div key={container}>
+          <h4 className="mb-2 text-xs font-semibold text-theme-text-secondary">{container}</h4>
+          <div className="grid gap-3 md:grid-cols-2">
+            {rows.map((row) => (
+              <FitCard key={row.resource} row={row} window={state.data!.window} />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function FitCard({ row, window }: { row: RightsizingRow; window: string }) {
+  return (
+    <div className="rounded-md border border-theme-border bg-theme-base/60 p-3">
+      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+        <span className="text-xs font-semibold uppercase tracking-wide text-theme-text-tertiary">
+          {row.resource}
+        </span>
+        <div className="flex flex-wrap items-center justify-end gap-1.5">
+          <FitBadge fit={row.fit} queryError={row.queryError} />
+          {row.hpaManaged && (
+            <Badge severity="info" size="sm">
+              HPA-managed
+            </Badge>
+          )}
+          {row.bursty && (
+            <Badge severity="warning" size="sm">
+              Bursty CPU
+            </Badge>
+          )}
+          {row.throttleRatio != null && row.throttleRatio >= 0.1 && (
+            <Badge severity="alert" size="sm">
+              Throttling observed
+            </Badge>
+          )}
+          {(row.currentPodOOM || row.windowOomEvidence) && (
+            <Badge severity="error" size="sm">
+              OOM evidence
+            </Badge>
+          )}
+        </div>
+      </div>
+      <div className="flex items-baseline gap-2 tabular-nums">
+        <div>
+          <div className="text-[10px] uppercase tracking-wide text-theme-text-quaternary">
+            Current request
+          </div>
+          <div className="text-lg font-semibold text-theme-text-primary">
+            {row.currentRequest ?? 'Unset'}
+          </div>
+        </div>
+        <ArrowRight className="h-4 w-4 text-theme-text-quaternary" />
+        <div>
+          <div className="text-[10px] uppercase tracking-wide text-theme-text-quaternary">
+            Suggested next step
+          </div>
+          <div className="text-lg font-semibold text-theme-text-primary">
+            {row.recommendedRequest ?? '—'}
+          </div>
+        </div>
+      </div>
+      <div className="mt-3 grid grid-cols-2 gap-3 border-t border-theme-border pt-3 text-xs">
+        <Metric
+          label={`${row.observed?.name ?? (row.resource === 'cpu' ? 'P95' : 'Max')} observed`}
+          value={row.observed?.formatted ?? 'No samples'}
+        />
+        <Metric label={`Evidence · ${window}`} value={`${confidenceLabel(row)} · 5m samples`} />
+      </div>
+      <FitExplanation row={row} />
+    </div>
+  )
+}
+
+function CompactFitRow({ row }: { row: RightsizingRow }) {
+  return (
+    <div className="flex flex-wrap items-center gap-2 text-xs tabular-nums text-theme-text-tertiary">
+      <span className="w-12 text-[10px] uppercase tracking-wide text-theme-text-quaternary">
+        {row.resource}
+      </span>
+      <span className="min-w-14 text-theme-text-secondary">{row.currentRequest ?? 'unset'}</span>
+      {row.recommendedRequest && (
+        <>
+          <ArrowRight className="h-3 w-3 text-theme-text-quaternary" />
+          <span className="min-w-14 text-theme-text-primary">{row.recommendedRequest}</span>
+        </>
+      )}
+      {row.observed && (
+        <span className="text-[10px] text-theme-text-quaternary">
+          ({row.observed.name} {row.observed.formatted})
+        </span>
+      )}
+      <span className="ml-auto">
+        <FitBadge fit={row.fit} queryError={row.queryError} />
+      </span>
+    </div>
+  )
+}
+
+function RightsizingContext({
+  data,
+  compact = false,
+}: {
+  data: PrometheusRightsizing
+  compact?: boolean
+}) {
+  const evidence = data.ownerCoverage === 'ksm_history' ? 'retained ownership' : 'current pods only'
+  return (
+    <span className="text-[11px] text-theme-text-tertiary">
+      {compact ? data.window : `Last ${data.window} · ${evidence}`}
+    </span>
+  )
+}
+
+function FitBadge({ fit, queryError }: { fit: RightsizingFit; queryError?: string }) {
+  const presentation = getRightsizingPresentation(fit, queryError)
+  return (
+    <Badge severity={presentation.severity} size="sm">
+      {presentation.label}
+    </Badge>
+  )
+}
+
+export function getRightsizingPresentation(fit: RightsizingFit, queryError?: string) {
+  if (queryError) return { label: 'Query failed', severity: 'error' as const }
+  const labels: Record<RightsizingFit, string> = {
+    balanced: 'Balanced',
+    oversized: 'Oversized',
+    under_requested: 'Under-requested',
+    missing_request: 'Missing request',
+    insufficient_history: 'Insufficient history',
+  }
+  const severities: Record<RightsizingFit, 'success' | 'info' | 'warning' | 'neutral'> = {
+    balanced: 'success',
+    oversized: 'info',
+    under_requested: 'warning',
+    missing_request: 'warning',
+    insufficient_history: 'neutral',
+  }
+  return { label: labels[fit], severity: severities[fit] }
+}
+
+function FitExplanation({ row }: { row: RightsizingRow }) {
+  const message = getRightsizingExplanation(row)
+  if (!message) return null
+  return <p className="mt-3 text-xs text-theme-text-tertiary">{message}</p>
+}
+
+export function getRightsizingExplanation(row: RightsizingRow): string | undefined {
+  const messages: Record<string, string> = {
+    request_within_fit_range: 'The configured request is within 30% of the evidence-based target.',
+    insufficient_history: 'At least six hours of samples are required before suggesting a request.',
+    hpa_managed: `The HPA manages ${row.resource}; review its target before changing this request.`,
+    hpa_evidence_unavailable:
+      'Radar could not verify HPA ownership, so it withheld a suggested request.',
+    oom_evidence: 'A lower memory request is withheld because OOM evidence exists.',
+    oom_evidence_unavailable:
+      'Radar could not verify recent OOM history, so it withheld a lower memory request.',
+    recommended_request_exceeds_limit:
+      'The evidence-based request would exceed the current limit; review the limit first.',
+  }
+  if (row.reductionLimited && row.calculatedRequest && row.recommendedRequest) {
+    const burstNote = row.bursty && row.peak ? ` CPU P99 reached ${row.peak.formatted}.` : ''
+    return `Demand-based target: ${row.calculatedRequest}. Radar suggests ${row.recommendedRequest} as a conservative next step; observe another full window before reducing further.${burstNote}`
+  }
+  const message = row.queryError
+    ? `Partial result: ${row.queryError}.`
+    : messages[row.recommendationReason ?? '']
+  const throttleUnavailable = row.resource === 'cpu' && !row.throttleAvailable
+  if (!message && !throttleUnavailable) return undefined
+  return message ?? 'CPU throttling metrics are unavailable; no throttling conclusion was drawn.'
+}
+
+function confidenceLabel(row: RightsizingRow) {
+  return `${row.confidence[0].toUpperCase()}${row.confidence.slice(1)} confidence`
+}
+
+function Metric({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <div className="text-theme-text-quaternary">{label}</div>
+      <div className="mt-0.5 text-theme-text-secondary">{value}</div>
+    </div>
+  )
+}
+
+function EmptyState({ text, loading = false }: { text: string; loading?: boolean }) {
+  return (
+    <div className="flex min-h-16 items-center justify-center text-sm text-theme-text-tertiary">
+      {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+      {text}
+    </div>
+  )
+}

package/src/components/resource-drawer/ResourceDrawer.tsx

@@ -4,6 +4,7 @@ import { clsx } from 'clsx'
 import { useState, useCallback } from 'react'
 import type { TopologyNode, NodeKind, HealthStatus } from '../../types'
 import { getKindBadgeBordered, healthToSeverity, SEVERITY_BADGE_BORDERED } from '../../utils/badge-colors'
+import { Tooltip } from '../ui/Tooltip'
 
 interface ResourceDrawerProps {
   node: TopologyNode
@@ -146,10 +147,10 @@ export const ResourceDrawer = memo(function ResourceDrawer({
               <h2 className="text-lg font-semibold text-theme-text-primary truncate">
                 {node.name}
               </h2>
+              <Tooltip content="Copy name">
               <button
                 onClick={copyName}
                 className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
-                title="Copy name"
               >
                 {copied ? (
                   <Check className="w-4 h-4 text-green-400" />
@@ -157,6 +158,7 @@ export const ResourceDrawer = memo(function ResourceDrawer({
                   <Copy className="w-4 h-4" />
                 )}
               </button>
+              </Tooltip>
             </div>
           </div>
           <button

package/src/components/resources/CompositeRenderer.tsx

@@ -0,0 +1,101 @@
+import { useMemo } from 'react'
+import { useQueries } from '@tanstack/react-query'
+import {
+  CompositeRenderer as BaseCompositeRenderer,
+  type ComposedRefStatus,
+} from '@skyhook-io/k8s-ui/components/resources/renderers/CompositeRenderer'
+import {
+  getCrossplaneResourceRefs,
+  type CrossplaneResourceRef,
+} from '@skyhook-io/k8s-ui/components/resources/resource-utils-crossplane'
+import { getResourceStatus } from '@skyhook-io/k8s-ui'
+import { kindToPlural } from '@skyhook-io/k8s-ui/utils/navigation'
+import type { ResourceRef as NavRef } from '../../types'
+import { fetchJSON, ApiError } from '../../api/client'
+
+interface CompositeRendererProps {
+  data: any
+  onNavigate?: (ref: NavRef) => void
+}
+
+function makeRefKey(ref: CrossplaneResourceRef): string {
+  return `${ref.apiVersion}/${ref.kind}/${ref.namespace ?? ''}/${ref.name}`
+}
+
+// Crossplane refs carry full apiVersion (e.g. "s3.aws.upbound.io/v1beta1")
+// because plural collisions across provider groups are real — two providers
+// can ship CRDs with the same kind. Drop the version, keep the group.
+function groupFromApiVersion(apiVersion: string | undefined): string {
+  if (!apiVersion) return ''
+  const slash = apiVersion.indexOf('/')
+  return slash < 0 ? '' : apiVersion.slice(0, slash)
+}
+
+/**
+ * Host wrapper for the package's CompositeRenderer: fans out a React Query
+ * lookup per composed resource ref so each row in the composed-resources
+ * list can show a live status badge.
+ *
+ * Errors are folded into the per-ref status entry rather than thrown — a
+ * missing composed resource (e.g. 404 because reconciliation hasn't created
+ * it yet) is a normal state for a freshly-applied Composite, not a failure.
+ */
+export function CompositeRenderer({ data, onNavigate }: CompositeRendererProps) {
+  const refs = useMemo<CrossplaneResourceRef[]>(() => getCrossplaneResourceRefs(data), [data])
+
+  const queries = useQueries({
+    queries: refs.map(ref => {
+      const group = groupFromApiVersion(ref.apiVersion)
+      return {
+        queryKey: ['composed-ref', group, ref.kind, ref.namespace ?? '', ref.name],
+        queryFn: async () => {
+          const ns = ref.namespace || '_'
+          const plural = kindToPlural(ref.kind)
+          const query = group ? `?group=${encodeURIComponent(group)}` : ''
+          return fetchJSON<{ resource: any }>(`/resources/${plural}/${ns}/${ref.name}${query}`)
+        },
+        staleTime: 30000,
+        retry: false,
+        enabled: Boolean(ref.kind && ref.name),
+      }
+    }),
+  })
+
+  const composedRefStatuses = useMemo<Map<string, ComposedRefStatus>>(() => {
+    const map = new Map<string, ComposedRefStatus>()
+    refs.forEach((ref, i) => {
+      const q = queries[i]
+      const key = makeRefKey(ref)
+      if (q.isLoading) {
+        map.set(key, { ref, loading: true })
+        return
+      }
+      if (q.isError) {
+        // 404 = the composed resource genuinely doesn't exist yet (normal
+        // during reconciliation). Any other failure (401/403/500/network)
+        // means we can't tell the operator the resource's status — render
+        // it distinctly so they don't read "missing" and think the resource
+        // is absent when they've actually just lost permission to read it.
+        if (q.error instanceof ApiError && q.error.status === 404) {
+          map.set(key, { ref, missing: true })
+        } else {
+          const message = q.error instanceof Error ? q.error.message : 'Failed to fetch composed resource'
+          map.set(key, { ref, error: true, errorMessage: message })
+        }
+        return
+      }
+      if (!q.data) {
+        map.set(key, { ref, missing: true })
+        return
+      }
+      const status = getResourceStatus(kindToPlural(ref.kind), q.data.resource) ?? undefined
+      map.set(key, {
+        ref,
+        status: status ? { ...status, level: (status as any).level ?? 'unknown' } : undefined,
+      })
+    })
+    return map
+  }, [refs, queries])
+
+  return <BaseCompositeRenderer data={data} onNavigate={onNavigate} composedRefStatuses={composedRefStatuses} />
+}

package/src/components/resources/ImageFilesystemModal.tsx

@@ -7,7 +7,9 @@ import { useImageMetadata, ApiError } from '../../api/client'
 import type { FileNode, ImageFilesystem } from '../../types'
 import { formatBytes } from '../../utils/format'
 import { downloadBlob, filterTree } from './file-browser-utils'
+import { Tooltip } from '../ui/Tooltip'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
+import { Input } from '@skyhook-io/k8s-ui'
 
 // Manual fetch function for filesystem (not a hook - gives us full control)
 async function fetchImageFilesystem(
@@ -141,9 +143,11 @@ export function ImageFilesystemModal({
         <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">Image Filesystem</h3>
-            <p className="text-sm text-theme-text-secondary truncate mt-0.5" title={image}>
+            <Tooltip content={image} wrapperClassName="!block w-full">
+            <p className="text-sm text-theme-text-secondary truncate mt-0.5">
               {image}
             </p>
+            </Tooltip>
             {(displayFilesystem?.platform || metadata?.platform) && (
               <p className="text-xs text-theme-text-tertiary mt-1">
                 Platform: {displayFilesystem?.platform || metadata?.platform}
@@ -163,8 +167,7 @@ export function ImageFilesystemModal({
           <div className="p-3 border-b border-theme-border shrink-0">
             <div className="relative">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
-              <input
-                type="text"
+              <Input
                 placeholder="Search files..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
@@ -245,9 +248,11 @@ export function ImageFilesystemModal({
               <span>{formatBytes(displayFilesystem.totalSize)}</span>
               {displayFilesystem.layers && <span>{displayFilesystem.layers.length} layers</span>}
               {displayFilesystem.digest && (
-                <span className="truncate" title={displayFilesystem.digest}>
+                <Tooltip content={displayFilesystem.digest} wrapperClassName="min-w-0">
+                <span className="truncate">
                   Digest: {displayFilesystem.digest.substring(0, 20)}...
                 </span>
+                </Tooltip>
               )}
             </>
           )}
@@ -362,10 +367,10 @@ function DownloadConfirmation({ metadata, onConfirm, onCancel }: DownloadConfirm
             <pre className="bg-theme-elevated rounded p-3 text-xs text-theme-text-primary overflow-x-auto font-mono">
               {authCommand}
             </pre>
+            <Tooltip content="Copy to clipboard" position="left" wrapperClassName="absolute top-2 right-2">
             <button
               onClick={handleCopy}
-              className="absolute top-2 right-2 p-1.5 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-base rounded transition-colors"
-              title="Copy to clipboard"
+              className="p-1.5 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-base rounded transition-colors"
             >
               {copied ? (
                 <Check className="w-4 h-4 text-green-400" />
@@ -373,6 +378,7 @@ function DownloadConfirmation({ metadata, onConfirm, onCancel }: DownloadConfirm
                 <Copy className="w-4 h-4" />
               )}
             </button>
+            </Tooltip>
           </div>
         </div>
       )}
@@ -444,7 +450,7 @@ function AuthenticationHelp({ image, registryType, onRetry }: AuthenticationHelp
       </p>
 
       <p className="text-xs text-theme-text-tertiary text-center max-w-md mb-6">
-        Registry: <span className="font-mono text-theme-text-secondary">{registry}</span>
+        Registry: <span className="inline-code">{registry}</span>
         {registryType && registryType !== 'generic' && (
           <> ({formatAuthMethod(registryType)})</>
         )}
@@ -461,10 +467,10 @@ function AuthenticationHelp({ image, registryType, onRetry }: AuthenticationHelp
             <pre className="bg-theme-elevated rounded p-3 text-xs text-theme-text-primary overflow-x-auto font-mono">
               {authCommand}
             </pre>
+            <Tooltip content="Copy to clipboard" position="left" wrapperClassName="absolute top-2 right-2">
             <button
               onClick={handleCopy}
-              className="absolute top-2 right-2 p-1.5 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-base rounded transition-colors"
-              title="Copy to clipboard"
+              className="p-1.5 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-base rounded transition-colors"
             >
               {copied ? (
                 <Check className="w-4 h-4 text-green-400" />
@@ -472,6 +478,7 @@ function AuthenticationHelp({ image, registryType, onRetry }: AuthenticationHelp
                 <Copy className="w-4 h-4" />
               )}
             </button>
+            </Tooltip>
           </div>
         </div>
       )}
@@ -709,11 +716,11 @@ function FileTreeNode({ node, depth, defaultExpanded = true, image, namespace, p
         )}
 
         {isFile && (
+          <Tooltip content="Download file" wrapperClassName="ml-1">
           <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"
+            className="p-1 text-theme-text-tertiary hover:text-blue-400 hover:bg-theme-elevated rounded disabled:opacity-50 disabled:pointer-events-none"
           >
             {downloading ? (
               <Loader2 className="w-3.5 h-3.5 animate-spin" />
@@ -721,6 +728,7 @@ function FileTreeNode({ node, depth, defaultExpanded = true, image, namespace, p
               <Download className="w-3.5 h-3.5" />
             )}
           </button>
+          </Tooltip>
         )}
       </div>
 
@@ -743,4 +751,3 @@ function FileTreeNode({ node, depth, defaultExpanded = true, image, namespace, p
     </div>
   )
 }
-

package/src/components/resources/PodFilesystemModal.tsx

@@ -1,12 +1,13 @@
 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 { PaneLoader } from '@skyhook-io/k8s-ui'
+import { PaneLoader, Input } from '@skyhook-io/k8s-ui'
 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'
+import { Tooltip } from '../ui/Tooltip'
 
 interface PodFilesystem {
   root: FileNode
@@ -191,8 +192,7 @@ export function PodFilesystemModal({
           {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"
+              <Input
                 placeholder="Filter files..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
@@ -384,11 +384,11 @@ function PodFileTreeNode({ node, namespace, podName, container, onNavigate }: Po
       )}
 
       {isDownloadable && (
+        <Tooltip content="Download file" wrapperClassName="ml-1">
         <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"
+          className="p-1 text-theme-text-tertiary hover:text-blue-400 hover:bg-theme-elevated rounded disabled:opacity-50 disabled:pointer-events-none"
         >
           {downloading ? (
             <Loader2 className="w-3.5 h-3.5 animate-spin" />
@@ -396,6 +396,7 @@ function PodFileTreeNode({ node, namespace, podName, container, onNavigate }: Po
             <Download className="w-3.5 h-3.5" />
           )}
         </button>
+        </Tooltip>
       )}
     </div>
   )