@skyhook-io/k8s-ui 1.8.11 → 1.8.12

package/src/components/topology/TopologyGraph.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   ReactFlow,
   ReactFlowProvider,
@@ -23,6 +23,7 @@ import { toCanvas } from 'html-to-image'
 
 import { AlertTriangle, ChevronsDownUp, ChevronsUpDown, Download, Info, Layers, LayoutGrid, Loader2, Maximize, Minus, Pause, Play, Plus, RotateCw, Shield } from 'lucide-react'
 import { PaneLoader } from '../ui/PaneLoader'
+import { TopologyOverlayBar } from './TopologyOverlayBar'
 import { Input } from '../ui/Input'
 import { Tooltip } from '../ui/Tooltip'
 import { useToast } from '../ui/Toast'
@@ -186,10 +187,6 @@ interface TopologyGraphProps {
   onTogglePause?: () => void
   /** Called when user clicks "maximize" on a namespace group — sets namespace filter to just that namespace */
   onMaximizeNamespace?: (namespace: string) => void
-  /** Shown as a breadcrumb label when viewing a single namespace */
-  namespaceBreadcrumb?: string
-  /** Called when breadcrumb "back" is clicked to return to all-namespace view */
-  onClearNamespace?: () => void
   /** Serialized namespace filter — when this changes, reset groupLevels for fresh smart default */
   namespacesKey?: string
   /** Node to pan/zoom the canvas to. Bump focusNonce to re-trigger for the same id. */
@@ -207,6 +204,9 @@ interface TopologyGraphProps {
   onToggleReplicaSets?: (ownerID: string) => void
   /** Padding reserved around fit-to-view operations for overlaid UI. */
   fitViewPadding?: FitViewOptions['padding']
+  /** Host overlay content (e.g. a search + controls row), stacked above the
+   *  topology's own status banners in the overlay bar. */
+  children?: ReactNode
 }
 
 export function TopologyGraph({
@@ -220,8 +220,6 @@ export function TopologyGraph({
   paused = false,
   onTogglePause,
   onMaximizeNamespace,
-  namespaceBreadcrumb,
-  onClearNamespace,
   namespacesKey = '',
   focusNodeId,
   focusNonce,
@@ -229,6 +227,7 @@ export function TopologyGraph({
   onNodeHover,
   onToggleReplicaSets,
   fitViewPadding = 0.15,
+  children,
 }: TopologyGraphProps) {
   const isTrafficView = viewMode === 'traffic'
   const [nodes, setNodes, onNodesChangeBase] = useNodesState([] as Node[])
@@ -933,96 +932,83 @@ export function TopologyGraph({
 
   return (
     <ReactFlowProvider>
-      {/* Namespace breadcrumb — shown when viewing a single namespace */}
-      {namespaceBreadcrumb && (
-        <div className="absolute top-3 left-3 z-10 flex items-center gap-1.5">
-          {onClearNamespace && (
-            <button
-              onClick={onClearNamespace}
-              className="text-xs text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
-            >
-              All Namespaces
-            </button>
-          )}
-          {onClearNamespace && (
-            <span className="text-xs text-theme-text-tertiary">/</span>
-          )}
-          <span className="text-xs font-medium text-theme-text-secondary bg-theme-surface/80 backdrop-blur-sm border border-theme-border/50 rounded-md px-2 py-0.5">
-            {namespaceBreadcrumb}
-          </span>
-        </div>
-      )}
-      {/* Warning banner for partial topology data */}
-      {topology?.warnings && topology.warnings.length > 0 && (() => {
-        const rbacWarnings = topology.warnings.filter(w => w.includes('RBAC not granted'))
-        const viewWarnings = topology.warnings.filter(w => w.startsWith('Topology view:'))
-        const otherWarnings = topology.warnings.filter(w => !w.includes('RBAC not granted') && !w.startsWith('Topology view:'))
-        const isAllRbac = otherWarnings.length === 0 && viewWarnings.length === 0
-        const isViewLimited = otherWarnings.length === 0 && rbacWarnings.length === 0 && viewWarnings.length > 0
-        return (
-          <div className={`absolute top-2 z-10 ${isViewLimited ? 'left-2 max-w-xl' : 'left-2 right-2'} ${isAllRbac ? 'bg-amber-500/10 border-amber-500/20' : 'bg-amber-500/10 border-amber-500/30'} border rounded-lg p-2 backdrop-blur-sm`}>
+      {/* Overlay bar: status banners lead (a partial-data/RBAC warning must read
+          before the user trusts the graph), host children stack below. Flex
+          column so nothing overlaps. Banners de-absoluted — the bar owns position/z. */}
+      <TopologyOverlayBar>
+        {/* Warning banner for partial topology data */}
+        {topology?.warnings && topology.warnings.length > 0 && (() => {
+          const rbacWarnings = topology.warnings.filter(w => w.includes('RBAC not granted'))
+          const viewWarnings = topology.warnings.filter(w => w.startsWith('Topology view:'))
+          const otherWarnings = topology.warnings.filter(w => !w.includes('RBAC not granted') && !w.startsWith('Topology view:'))
+          const isAllRbac = otherWarnings.length === 0 && viewWarnings.length === 0
+          const isViewLimited = otherWarnings.length === 0 && rbacWarnings.length === 0 && viewWarnings.length > 0
+          return (
+            <div className={`pointer-events-auto ${isViewLimited ? 'max-w-xl' : 'w-full'} ${isAllRbac ? 'bg-amber-500/10 border-amber-500/20' : 'bg-amber-500/10 border-amber-500/30'} border rounded-lg p-2 backdrop-blur-sm`}>
+              <div className="flex items-start gap-2">
+                {isAllRbac ? (
+                  <Shield className="w-4 h-4 text-amber-400 shrink-0 mt-0.5" />
+                ) : (
+                  <AlertTriangle className="w-4 h-4 text-amber-500 shrink-0 mt-0.5" />
+                )}
+                <div className="text-sm">
+                  <span className="font-medium text-amber-400">
+                    {isAllRbac ? 'Limited Access:' : isViewLimited ? 'View limited:' : 'Warning:'}
+                  </span>
+                  <span className="text-theme-text-secondary ml-1">
+                    {isAllRbac
+                      ? `${pluralize(rbacWarnings.length, 'resource type')} not accessible due to RBAC restrictions.`
+                      : isViewLimited
+                        ? 'Large retained run history is summarized to keep the graph readable.'
+                        : 'Some resources failed to load. Data may be incomplete.'}
+                  </span>
+                  <details className="mt-1">
+                    <summary className="text-xs text-amber-400/80 hover:text-amber-400">
+                      Show details ({topology.warnings.length})
+                    </summary>
+                    <ul className="mt-1 text-xs text-theme-text-tertiary space-y-0.5">
+                      {rbacWarnings.length > 0 && otherWarnings.length > 0 && (
+                        <li className="text-amber-400/60 font-medium mt-1">RBAC restrictions:</li>
+                      )}
+                      {rbacWarnings.map((w, i) => (
+                        <li key={`rbac-${i}`} className="font-mono">{w}</li>
+                      ))}
+                      {viewWarnings.length > 0 && (rbacWarnings.length > 0 || otherWarnings.length > 0) && (
+                        <li className="text-amber-400/60 font-medium mt-1">View limits:</li>
+                      )}
+                      {viewWarnings.map((w, i) => (
+                        <li key={`view-${i}`} className="font-mono">{w}</li>
+                      ))}
+                      {otherWarnings.length > 0 && (rbacWarnings.length > 0 || viewWarnings.length > 0) && (
+                        <li className="text-amber-400/60 font-medium mt-1">Other warnings:</li>
+                      )}
+                      {otherWarnings.map((w, i) => (
+                        <li key={`other-${i}`} className="font-mono">{w}</li>
+                      ))}
+                    </ul>
+                  </details>
+                </div>
+              </div>
+            </div>
+          )
+        })()}
+        {/* Layout error banner - shown even when stale nodes exist */}
+        {layoutError && nodes.length > 0 && (
+          <div className="w-full pointer-events-auto bg-red-500/10 border border-red-500/30 rounded-lg p-2 backdrop-blur-sm">
             <div className="flex items-start gap-2">
-              {isAllRbac ? (
-                <Shield className="w-4 h-4 text-amber-400 shrink-0 mt-0.5" />
-              ) : (
-                <AlertTriangle className="w-4 h-4 text-amber-500 shrink-0 mt-0.5" />
-              )}
+              <AlertTriangle className="w-4 h-4 text-red-500 shrink-0 mt-0.5" />
               <div className="text-sm">
-                <span className="font-medium text-amber-400">
-                  {isAllRbac ? 'Limited Access:' : isViewLimited ? 'View limited:' : 'Warning:'}
-                </span>
+                <span className="font-medium text-red-400">Layout Error:</span>
                 <span className="text-theme-text-secondary ml-1">
-                  {isAllRbac
-                    ? `${pluralize(rbacWarnings.length, 'resource type')} not accessible due to RBAC restrictions.`
-                    : isViewLimited
-                      ? 'Large retained run history is summarized to keep the graph readable.'
-                      : 'Some resources failed to load. Data may be incomplete.'}
+                  Failed to update layout. Showing previous view.
                 </span>
-                <details className="mt-1">
-                  <summary className="text-xs text-amber-400/80 hover:text-amber-400">
-                    Show details ({topology.warnings.length})
-                  </summary>
-                  <ul className="mt-1 text-xs text-theme-text-tertiary space-y-0.5">
-                    {rbacWarnings.length > 0 && otherWarnings.length > 0 && (
-                      <li className="text-amber-400/60 font-medium mt-1">RBAC restrictions:</li>
-                    )}
-                    {rbacWarnings.map((w, i) => (
-                      <li key={`rbac-${i}`} className="font-mono">{w}</li>
-                    ))}
-                    {viewWarnings.length > 0 && (rbacWarnings.length > 0 || otherWarnings.length > 0) && (
-                      <li className="text-amber-400/60 font-medium mt-1">View limits:</li>
-                    )}
-                    {viewWarnings.map((w, i) => (
-                      <li key={`view-${i}`} className="font-mono">{w}</li>
-                    ))}
-                    {otherWarnings.length > 0 && (rbacWarnings.length > 0 || viewWarnings.length > 0) && (
-                      <li className="text-amber-400/60 font-medium mt-1">Other warnings:</li>
-                    )}
-                    {otherWarnings.map((w, i) => (
-                      <li key={`other-${i}`} className="font-mono">{w}</li>
-                    ))}
-                  </ul>
-                </details>
+                <p className="mt-1 text-xs text-theme-text-tertiary font-mono">{layoutError}</p>
               </div>
             </div>
           </div>
-        )
-      })()}
-      {/* Layout error banner - shown even when stale nodes exist */}
-      {layoutError && nodes.length > 0 && (
-        <div className="absolute top-2 left-2 right-2 z-10 bg-red-500/10 border border-red-500/30 rounded-lg p-2 backdrop-blur-sm">
-          <div className="flex items-start gap-2">
-            <AlertTriangle className="w-4 h-4 text-red-500 shrink-0 mt-0.5" />
-            <div className="text-sm">
-              <span className="font-medium text-red-400">Layout Error:</span>
-              <span className="text-theme-text-secondary ml-1">
-                Failed to update layout. Showing previous view.
-              </span>
-              <p className="mt-1 text-xs text-theme-text-tertiary font-mono">{layoutError}</p>
-            </div>
-          </div>
-        </div>
-      )}
+        )}
+        {children}
+      </TopologyOverlayBar>
       {/* Summary-mode pill — pod tier collapsed to per-workload/service counts */}
       {topology?.summaryMode && (
         <div className="absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1.5 bg-blue-500/10 border border-blue-500/30 rounded-full px-3 py-1 backdrop-blur-sm">

package/src/components/topology/TopologyOverlayBar.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react'
+import { clsx } from 'clsx'
+
+interface TopologyOverlayBarProps {
+  children: ReactNode
+  /** Extra classes merged onto the bar container. */
+  className?: string
+}
+
+/**
+ * Top-anchored overlay bar for the topology canvas. Stacks children top-to-
+ * bottom (flex column, source order); wrap items in your own `flex` div to put
+ * them on one line. Everything stacks, so overlays never collide.
+ *
+ * `pointer-events-none` so the canvas stays pannable in the gaps — interactive
+ * children opt back in with `pointer-events-auto`. Children are `items-start`
+ * (content width); use `w-full` for a full-width row.
+ */
+export function TopologyOverlayBar({ children, className }: TopologyOverlayBarProps) {
+  return (
+    <div
+      className={clsx(
+        'pointer-events-none absolute inset-x-2 top-2 z-10 flex flex-col items-start gap-2',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/topology/TopologySearch.tsx

@@ -1,4 +1,5 @@
 import { useState, useCallback, useEffect, useRef, useMemo } from 'react'
+import { createPortal } from 'react-dom'
 import { Search, X, ChevronRight } from 'lucide-react'
 import { Input } from '../ui/Input'
 import { getTopologyIcon } from '../../utils/resource-icons'
@@ -24,12 +25,12 @@ interface TopologySearchProps {
    * empty-state hint above. Defaults to "current view".
    */
   viewModeLabel?: string
-  /**
-   * Position utilities for the trigger button (default "top-4 left-4").
-   * The host overrides this to avoid colliding with other canvas overlays
-   * (e.g. stacking below the namespace breadcrumb).
-   */
-  triggerClassName?: string
+  /** Element the search overlay portals into — typically the topology pane. Set
+   *  it when the trigger lives inside a `pointer-events-none` overlay bar: the
+   *  overlay then renders OUTSIDE that bar (so its backdrop is clickable) and is
+   *  `absolute inset-0` scoped to this container (dims only the pane). Omit to
+   *  fall back to a viewport-level `fixed` overlay on document.body. */
+  overlayContainer?: HTMLElement | null
 }
 
 // Icon mapping for different resource kinds
@@ -71,7 +72,7 @@ function getKindColor(kind: string): string {
   }
 }
 
-export function TopologySearch({ nodes, onNodeSelect, onZoomToNode, allNodes, viewModeLabel, triggerClassName }: TopologySearchProps) {
+export function TopologySearch({ nodes, onNodeSelect, onZoomToNode, allNodes, viewModeLabel, overlayContainer }: TopologySearchProps) {
   const [isOpen, setIsOpen] = useState(false)
   const [query, setQuery] = useState('')
   const [selectedIndex, setSelectedIndex] = useState(0)
@@ -195,15 +196,20 @@ export function TopologySearch({ nodes, onNodeSelect, onZoomToNode, allNodes, vi
     setTimeout(() => inputRef.current?.focus(), 0)
   }, [])
 
+  // Portal the overlay OUT of the (pointer-events-none) overlay bar the trigger
+  // sits in. With a container → `absolute inset-0` scoped to it (the pane);
+  // without → a viewport `fixed` overlay on document.body.
+  const portalTarget = overlayContainer ?? (typeof document !== 'undefined' ? document.body : null)
+  const overlayPositionClass = overlayContainer ? 'absolute' : 'fixed'
+
   return (
     <>
       {/* Search trigger button */}
       <button
         onClick={handleOpen}
-        className={clsx(
-          'absolute z-10 flex items-center gap-2 px-3 py-2 bg-theme-surface/90 backdrop-blur border border-theme-border rounded-lg text-theme-text-secondary hover:text-theme-text-primary hover:border-theme-border-light transition-colors',
-          triggerClassName ?? 'top-4 left-4'
-        )}
+        // Layout-neutral (positioned by the host's overlay bar); pointer-events-
+        // auto inside the pointer-events-none bar.
+        className="pointer-events-auto flex items-center gap-2 px-3 py-2 bg-theme-surface/90 backdrop-blur border border-theme-border rounded-lg text-theme-text-secondary hover:text-theme-text-primary hover:border-theme-border-light transition-colors"
       >
         <Search className="w-4 h-4" />
         <span className="text-sm">Search</span>
@@ -212,9 +218,10 @@ export function TopologySearch({ nodes, onNodeSelect, onZoomToNode, allNodes, vi
         </kbd>
       </button>
 
-      {/* Search modal */}
-      {isOpen && (
-        <div className="absolute inset-0 z-50 flex items-start justify-center pt-[10vh]">
+      {/* Portaled out of the overlay bar (see portalTarget above) so the
+          backdrop is clickable and the dim covers only the pane, not the app. */}
+      {isOpen && portalTarget && createPortal(
+        <div className={`${overlayPositionClass} inset-0 z-50 flex items-start justify-center pt-[10vh]`}>
           {/* Backdrop */}
           <div
             className="absolute inset-0 bg-theme-base/60 backdrop-blur-sm"
@@ -339,7 +346,8 @@ export function TopologySearch({ nodes, onNodeSelect, onZoomToNode, allNodes, vi
               </div>
             )}
           </div>
-        </div>
+        </div>,
+        portalTarget,
       )}
     </>
   )

package/src/components/topology/index.ts

@@ -4,4 +4,6 @@ export { GroupNode } from './GroupNode'
 export { TopologySearch } from './TopologySearch'
 export { TopologyFilterSidebar } from './TopologyFilterSidebar'
 export { TopologyControls } from './TopologyControls'
+export { TopologyOverlayBar } from './TopologyOverlayBar'
+export { TopologyBreadcrumb } from './TopologyBreadcrumb'
 export { buildHierarchicalElkGraph, applyHierarchicalLayout, getGroupKey, setLayoutEngine } from './layout'

package/src/components/ui/Badge.tsx

@@ -52,7 +52,7 @@ interface BadgeProps {
 // ---------------------------------------------------------------------------
 const SEVERITY: Record<BadgeSeverity, string> = {
   success: 'bg-emerald-100 text-emerald-700 border-emerald-300 dark:bg-emerald-950/50 dark:text-emerald-400 dark:border-emerald-700/40',
-  warning: 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-700/40',
+  warning: 'bg-amber-100 text-warning-text border-amber-300 dark:bg-amber-950/50 dark:border-amber-700/40',
   alert:   'bg-orange-100 text-orange-800 border-orange-300 dark:bg-orange-950/50 dark:text-orange-400 dark:border-orange-700/40',
   error:   'bg-red-100 text-red-700 border-red-300 dark:bg-red-950/50 dark:text-red-400 dark:border-red-700/40',
   info:    'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',

package/src/components/ui/SelectMenu.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from 'react'
+import { Check, ChevronDown } from 'lucide-react'
+import { clsx } from 'clsx'
+
+export interface SelectMenuOption {
+  value: string
+  label: string
+}
+
+export function SelectMenu({
+  value,
+  options,
+  onChange,
+  ariaLabel,
+  className,
+}: {
+  value: string
+  options: SelectMenuOption[]
+  onChange: (value: string) => void
+  ariaLabel: string
+  className?: string
+}) {
+  const [open, setOpen] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const selected = options.find((option) => option.value === value) ?? options[0]
+
+  useEffect(() => {
+    if (!open) return
+    const onPointerDown = (event: MouseEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) setOpen(false)
+    }
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('mousedown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [open])
+
+  return (
+    <div ref={rootRef} className={clsx('relative', className)}>
+      <button
+        type="button"
+        aria-label={ariaLabel}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => setOpen((current) => !current)}
+        className="flex h-8 w-full items-center justify-between gap-2 rounded-md border border-theme-border bg-theme-elevated px-2.5 text-xs text-theme-text-primary transition-colors hover:bg-theme-hover"
+      >
+        <span className="truncate">{selected?.label}</span>
+        <ChevronDown className={clsx('h-3.5 w-3.5 shrink-0 text-theme-text-tertiary transition-transform', open && 'rotate-180')} />
+      </button>
+      {open && (
+        <div role="listbox" className="absolute right-0 top-full z-50 mt-1 min-w-full overflow-hidden rounded-md border border-theme-border bg-theme-surface py-1 shadow-theme-lg">
+          {options.map((option) => {
+            const active = option.value === value
+            return (
+              <button
+                key={option.value}
+                type="button"
+                role="option"
+                aria-selected={active}
+                onClick={() => {
+                  onChange(option.value)
+                  setOpen(false)
+                }}
+                className="flex w-full items-center gap-2 whitespace-nowrap px-2.5 py-1.5 text-left text-xs text-theme-text-secondary transition-colors hover:bg-theme-hover hover:text-theme-text-primary"
+              >
+                <Check className={clsx('h-3.5 w-3.5 shrink-0 text-accent', !active && 'opacity-0')} />
+                {option.label}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -410,7 +410,7 @@ export function AlertBanner({ variant, icon, title, message, items, children }:
         {hasBody ? (
           <div className="flex-1 min-w-0">
             <div className={clsx('text-sm font-medium', colors.title, items && 'mb-1')}>{title}</div>
-            {message && <div className={clsx('text-xs mt-1 break-all', colors.message)}>{message}</div>}
+            {message && <div className={clsx('text-xs mt-1 break-words', colors.message)}>{message}</div>}
             {items && items.length > 0 && (
               <ul className={clsx('text-xs space-y-1', colors.list)}>
                 {items.map((item, i) => (
@@ -446,11 +446,14 @@ export interface Problem {
 }
 
 /** Displays a list of problem alerts (warnings and errors) */
-// True when the resource detail is already rendering a dedicated, authoritative
-// "Operational Issues" section (the Issues pipeline — richer cause/action). Only
-// renderers whose problems the pipeline COMPREHENSIVELY covers read this and drop
-// their own problem array so the same failure isn't shown twice — today that's
-// PodRenderer and WorkloadRenderer (workload + pod runtime). It is deliberately
+// True when the resource detail is rendering (or still fetching) a dedicated,
+// authoritative "Operational Issues" section (the Issues pipeline — richer
+// cause/action). Renderers whose problems the pipeline COMPREHENSIVELY covers read
+// this and drop their own condition banner so the same failure isn't shown twice.
+// It stays true WHILE the live-issues fetch is pending: a banner the pipeline will
+// cover would otherwise flash on first paint before the issues arrive and hide it;
+// once the fetch settles with no issues (e.g. a CRD the pipeline doesn't watch),
+// it flips false and the renderer's banner appears cleanly. It is deliberately
 // NOT wired into ProblemAlerts: that component is used only by GitOps renderers
 // (Argo/Flux), whose Degraded/OutOfSync/revision-mismatch banners the pipeline
 // does not fully emit (e.g. OutOfSync only for automated Argo apps) — suppressing

package/src/components/ui/index.ts

@@ -10,6 +10,8 @@ export type { EmptyStateTone, EmptyStateVariant } from './EmptyState'
 export { RestrictedState } from './RestrictedState'
 export { FetchResult } from './FetchResult'
 export { SearchBox } from './SearchBox'
+export { SelectMenu } from './SelectMenu'
+export type { SelectMenuOption } from './SelectMenu'
 export { Input } from './Input'
 export { FilterPill } from './FilterPill'
 export type { FilterPillTone } from './FilterPill'

package/src/components/workload/WorkloadView.tsx

@@ -29,6 +29,7 @@ import {
   X,
   BarChart3,
   Network,
+  DollarSign,
 } from 'lucide-react'
 import type { TimelineEvent, ResourceRef, Relationships, SelectedResource, ResolvedEnvFrom, Topology, TopologyNode, HPADiagnosis, WorkloadPodInfo } from '../../types'
 import type { GitOpsStatus } from '../../types/gitops'
@@ -64,7 +65,7 @@ import {
 } from '../resources/resource-utils'
 import { ServicePortCards, type ServicePortRenderProps } from '../resources/renderers/ServiceRenderer'
 
-export type WorkloadTabType = 'overview' | 'topology' | 'timeline' | 'logs' | 'metrics' | 'yaml'
+export type WorkloadTabType = 'overview' | 'topology' | 'timeline' | 'logs' | 'metrics' | 'cost' | 'yaml'
 type TabType = WorkloadTabType
 
 export interface ResourceOwnershipContext {
@@ -257,6 +258,8 @@ interface WorkloadViewProps {
   }) => ReactNode
   /** Render the metrics tab content */
   renderMetricsTab?: (props: { kind: string; namespace: string; name: string }) => ReactNode
+  /** Render the cost tab content */
+  renderCostTab?: (props: { kind: string; namespace: string; name: string }) => ReactNode
   /** Render a read-only YAML view for a related object from the workload's
    *  neighborhood. Providing this turns the YAML tab into an object explorer
    *  (rail of the workload + its Services/config/policies/pods); omitting it
@@ -265,6 +268,8 @@ interface WorkloadViewProps {
   renderRelatedYaml?: (ref: { kind: string; namespace: string; name: string; group?: string }) => ReactNode
   /** Whether metrics are available for this resource kind */
   isMetricsAvailable?: (kind: string, resource: any) => boolean
+  /** Whether cost is available for this resource kind */
+  isCostAvailable?: (kind: string, resource: any) => boolean
   /** Render extra content at the bottom of the overview tab (e.g. audit findings) */
   renderOverviewExtra?: (props: { kind: string; namespace: string; name: string }) => ReactNode
   /** Render lightweight overview intro content before the default renderer. */
@@ -280,6 +285,10 @@ interface WorkloadViewProps {
    *  live issues for this resource). Avoids showing the same failure twice.
    *  Also gates the `renderOverviewLead` wrapper (see above). */
   hasOperationalIssues?: boolean
+  /** True while the live-issues fetch is still pending. Renderers suppress their
+   *  banners during this window too — a banner whose failure the pipeline covers
+   *  would otherwise flash on first paint before the issues arrive and hide it. */
+  operationalIssuesPending?: boolean
 
   // ── Duplicate ────────────────────────────────────────────────────────────
   /** Duplicate handler — opens create dialog with this resource's YAML */
@@ -359,7 +368,9 @@ export function WorkloadView({
   renderExpandedOverview,
   renderRelatedYaml,
   renderMetricsTab,
+  renderCostTab,
   isMetricsAvailable,
+  isCostAvailable,
   // Duplicate
   onDuplicate,
   onDownload,
@@ -367,6 +378,7 @@ export function WorkloadView({
   renderOverviewIntro,
   renderOverviewLead,
   hasOperationalIssues,
+  operationalIssuesPending,
   // Actions bar
   actionsBarProps,
   // Renderer overrides
@@ -644,8 +656,10 @@ export function WorkloadView({
   })
 
   const showMetricsTab = isMetricsAvailable ? isMetricsAvailable(kind, resource) : false
+  const showCostTab = isCostAvailable ? isCostAvailable(kind, resource) : false
   const logsTabVisible = Boolean(renderLogsTab) && (allPods.length > 0 || LOGS_TAB_WITHOUT_PODS_KINDS.has(kindToPlural(kind).toLowerCase()))
   const metricsTabVisible = Boolean(showMetricsTab && renderMetricsTab)
+  const costTabVisible = Boolean(showCostTab && renderCostTab)
   const podEvidenceLoading = resourceLoading || workloadPodsLoading || eventsLoading
   const logsFallbackReady = !renderLogsTab || (!logsTabVisible && !podEvidenceLoading)
   const requestedTab: TabType = activeTab
@@ -660,6 +674,7 @@ export function WorkloadView({
     },
     { id: 'logs', label: 'Logs', icon: <Terminal className="w-4 h-4" />, hidden: !logsTabVisible },
     { id: 'metrics', label: 'Metrics', icon: <BarChart3 className="w-4 h-4" />, hidden: !metricsTabVisible },
+    { id: 'cost', label: 'Cost', icon: <DollarSign className="w-4 h-4" />, hidden: !costTabVisible },
     { id: 'yaml', label: 'YAML', icon: <FileText className="w-4 h-4" /> },
   ]
   const requestedTabAvailable = tabs.some((tab) => tab.id === requestedTab && !tab.hidden)
@@ -670,6 +685,7 @@ export function WorkloadView({
     (
       (requestedTab === 'topology' && topologyTabHidden) ||
       (requestedTab === 'metrics' && (!renderMetricsTab || (!!resource && !resourceLoading && !showMetricsTab))) ||
+      (requestedTab === 'cost' && (!renderCostTab || (!!resource && !resourceLoading && !showCostTab))) ||
       (requestedTab === 'logs' && logsFallbackReady)
     )
   useEffect(() => {
@@ -794,7 +810,7 @@ export function WorkloadView({
               onDownload={onDownload}
             />
           ) : (
-            <OperationalIssuesShownContext.Provider value={!!hasOperationalIssues}>
+            <OperationalIssuesShownContext.Provider value={!!hasOperationalIssues || !!operationalIssuesPending}>
               {renderOverviewLead && hasOperationalIssues && (
                 <div className="px-4 pt-4">
                   {renderOverviewLead({ kind, namespace, name })}
@@ -831,7 +847,7 @@ export function WorkloadView({
 
   // ── Expanded (full) mode ─────────────────────────────────────────────────
   return (
-    <OperationalIssuesShownContext.Provider value={!!hasOperationalIssues}>
+    <OperationalIssuesShownContext.Provider value={!!hasOperationalIssues || !!operationalIssuesPending}>
     <DetailShell
       breadcrumb={breadcrumb}
       nav={
@@ -1038,6 +1054,11 @@ export function WorkloadView({
             {renderMetricsTab({ kind: resource?.kind || kind, namespace, name })}
           </div>
         )}
+        {effectiveTab === 'cost' && renderCostTab && (
+          <div className="h-full overflow-auto p-4">
+            {renderCostTab({ kind: resource?.kind || kind, namespace, name })}
+          </div>
+        )}
         {effectiveTab === 'yaml' && (
           <div className="flex h-full min-h-0">
             {renderRelatedYaml && yamlObjects.length > 1 && (

package/src/theme/tailwind-theme.css

@@ -20,6 +20,7 @@
   --color-theme-text-secondary: var(--text-secondary);
   --color-theme-text-tertiary: var(--text-tertiary);
   --color-theme-text-disabled: var(--text-disabled);
+  --color-warning-text: var(--warning-text);
 
   /* Borders */
   --color-theme-border: var(--border-default);

package/src/theme/variables.css

@@ -49,6 +49,7 @@
   --text-secondary: light-dark(#555860, #D8DAE0);
   --text-tertiary: light-dark(#6B7080, #B0B5C0);
   --text-disabled: light-dark(#A0A4AC, #6A7080);
+  --warning-text: light-dark(#92400E, #FBBF24);
 
   /* ── Borders (lightly blue-tinted in light mode) ── */
   --border-default: light-dark(#D8E0EE, #222840);