@skyhook-io/k8s-ui 1.5.13 → 1.6.1

package/src/components/resources/ResourcesView.tsx

@@ -1655,6 +1655,8 @@ interface ResourcesViewProps {
   hideSidebar?: boolean
   /** Callback when the [+] create button is clicked. Receives the currently selected kind info. */
   onCreateResource?: (kind: { name: string; kind: string; group: string } | null) => void
+  /** Default kind when the URL does not include one. */
+  defaultKind?: SelectedKindInfo
   /** Columns prepended to KNOWN_COLUMNS for every kind. For example, a
    *  multi-cluster host can inject a leading Cluster column. Each extra
    *  column is self-contained (own render/sort/filter), so the host
@@ -1692,6 +1694,7 @@ const DEFAULT_KIND_INFO: SelectedKindInfo = { name: 'pods', kind: 'Pod', group:
 // fall through to DEFAULT_KIND.
 function getInitialKindFromURL(
   basePath: string = '/resources',
+  defaultKind: SelectedKindInfo = DEFAULT_KIND_INFO,
   locationPathname?: string,
   locationSearch?: string,
 ): SelectedKindInfo {
@@ -1726,7 +1729,7 @@ function getInitialKindFromURL(
     }
     return { name: kind, kind: kind, group }
   }
-  return DEFAULT_KIND_INFO
+  return defaultKind
 }
 
 // Get initial filters from URL
@@ -1749,6 +1752,51 @@ function getInitialFiltersFromURL() {
 // Sort state type
 type SortDirection = 'asc' | 'desc' | null
 
+// Coarse "just now / Xm / Xh / Xd" buckets — finer-grained updates
+// add motion in the periphery without aiding any user decision.
+function formatLastUpdatedBucket(elapsedMs: number): string {
+  const elapsedSec = Math.max(0, Math.floor(elapsedMs / 1000))
+  if (elapsedSec < 60) return 'just now'
+  const minutes = Math.floor(elapsedSec / 60)
+  if (minutes < 60) return `${minutes}m`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h`
+  return `${Math.floor(hours / 24)}d`
+}
+
+// ms until the displayed bucket would change.
+function msToNextBucket(elapsedMs: number): number {
+  const elapsed = Math.max(0, elapsedMs)
+  if (elapsed < 60_000) return 60_000 - elapsed
+  if (elapsed < 3_600_000) return 60_000 - (elapsed % 60_000)
+  if (elapsed < 86_400_000) return 3_600_000 - (elapsed % 3_600_000)
+  return 86_400_000 - (elapsed % 86_400_000)
+}
+
+// Isolated subtree so re-renders don't cascade into the parent's
+// virtualized table.
+function LastUpdatedLabel({ lastUpdated }: { lastUpdated: Date }) {
+  const [, force] = useState(0)
+  useEffect(() => {
+    let id: ReturnType<typeof setTimeout>
+    function schedule() {
+      const delay = Math.max(1000, msToNextBucket(Date.now() - lastUpdated.getTime()))
+      id = setTimeout(() => {
+        force(t => t + 1)
+        schedule()
+      }, delay)
+    }
+    schedule()
+    return () => clearTimeout(id)
+  }, [lastUpdated])
+  return (
+    <div className="flex items-center gap-1.5 text-xs text-theme-text-tertiary">
+      <Clock className="w-3.5 h-3.5" />
+      <span>Updated {formatLastUpdatedBucket(Date.now() - lastUpdated.getTime())}</span>
+    </div>
+  )
+}
+
 export function ResourcesView({
   namespaces, selectedResource, onResourceClick, onResourceClickYaml, onKindChange,
   apiResources: apiResourcesProp,
@@ -1772,18 +1820,23 @@ export function ResourcesView({
   onSelectedKindChange,
   hideSidebar = false,
   onCreateResource,
+  defaultKind = DEFAULT_KIND_INFO,
   extraLeadingColumns,
   onRowSelect,
 }: ResourcesViewProps) {
   const initialFilters = getInitialFiltersFromURL()
-  const [selectedKind, setSelectedKind] = useState<SelectedKindInfo>(() => getInitialKindFromURL(basePath, locationPathname, locationSearch))
-  // Sync selectedKind from URL when locationPathname changes (e.g., browser back, external sidebar navigation)
+  const [selectedKind, setSelectedKind] = useState<SelectedKindInfo>(() => getInitialKindFromURL(basePath, defaultKind, locationPathname, locationSearch))
+  // Sync selectedKind from URL when the URL changes (browser back, external sidebar navigation).
+  // Deps are URL-derived only — including selectedKind.name/group would race against pending
+  // navigation: a sidebar click flips state before navigate() lands, this effect re-reads the
+  // stale URL, and reverts the kind. The window into a stale URL between state change and URL
+  // update is what produced the "blink and fail to navigate" bug.
   useEffect(() => {
-    const kindFromURL = getInitialKindFromURL(basePath, locationPathname, locationSearch)
-    if (kindFromURL.name !== selectedKind.name || kindFromURL.group !== selectedKind.group) {
-      setSelectedKind(kindFromURL)
-    }
-  }, [locationPathname, locationSearch]) // eslint-disable-line react-hooks/exhaustive-deps
+    const kindFromURL = getInitialKindFromURL(basePath, defaultKind, locationPathname, locationSearch)
+    setSelectedKind((prev) =>
+      kindFromURL.name !== prev.name || kindFromURL.group !== prev.group ? kindFromURL : prev,
+    )
+  }, [basePath, defaultKind, locationPathname, locationSearch])
   // Notify parent of selected kind changes (including initial mount)
   useEffect(() => {
     onSelectedKindChange?.(selectedKind)
@@ -1850,6 +1903,9 @@ export function ResourcesView({
   const hasProcessedInitialResource = useRef(false)
   // Set by sidebar kind change to push a browser history entry (vs replace for filter changes)
   const shouldPushHistory = useRef(false)
+  // Used by the URL-write effect to distinguish drawer-to-drawer navigation (A -> B, push)
+  // from initial open (null -> X) and close (X -> null), which stay as URL replaces.
+  const prevSelectedResourceRef = useRef<SelectedResource | null>(null)
 
   // Ref to search input for keyboard shortcut
   const searchInputRef = useRef<HTMLInputElement>(null)
@@ -2336,7 +2392,7 @@ export function ResourcesView({
     isSyncingFromURL.current = true
 
     // Re-read URL params and update state
-    const newKind = getInitialKindFromURL(basePath, locationPathname, locationSearch)
+    const newKind = getInitialKindFromURL(basePath, defaultKind, locationPathname, locationSearch)
     const newFilters = getInitialFiltersFromURL()
 
     // Update kind if it changed
@@ -2366,7 +2422,7 @@ export function ResourcesView({
     requestAnimationFrame(() => {
       isSyncingFromURL.current = false
     })
-  }, [locationPathname, locationSearch]) // Re-run when injected URL path or search params change
+  }, [locationPathname, locationSearch, defaultKind, basePath]) // Re-run when injected URL path or search params change
 
   const navigate = useMemo(() => {
     if (!onNavigate) return (_pathOrObj: any, _opts?: any) => {}
@@ -2434,6 +2490,25 @@ export function ResourcesView({
     const newPath = `${basePath}/${kindInfo.name}`
     const queryStr = params.toString()
 
+    // No-op guard: if the target URL already matches the address bar, skip the
+    // navigate. Without this, a state catch-up after browser POP (App-level
+    // POP→state sync re-running this effect) would push a duplicate entry on
+    // top of the popped state — making the next Back appear to do nothing or
+    // (with multi-namespace name collisions) jump to a sibling resource via
+    // auto-resolution. Reading window.location avoids needing host-injected
+    // navigationType.
+    if (typeof window !== 'undefined') {
+      const currentPathname = window.location.pathname
+      const currentSearch = window.location.search.replace(/^\?/, '')
+      // Compare using basename-relative target path against window.pathname,
+      // which may include a host basename (e.g. /c/{cluster}). Treat a path
+      // suffix match as equal so embedded hosts don't false-trigger a write.
+      const pathMatches = currentPathname === newPath || currentPathname.endsWith(newPath)
+      if (pathMatches && currentSearch === queryStr) {
+        return
+      }
+    }
+
     // Route both push and replace through `navigate` (which honors the
     // onNavigate prop). The previous direct `window.history.replaceState`
     // bypass meant a host that wants to suppress URL writes (passing
@@ -2446,12 +2521,12 @@ export function ResourcesView({
   useEffect(() => {
     // Skip URL update if we're syncing FROM the URL (e.g., browser back button)
     if (isSyncingFromURL.current) {
-
+      prevSelectedResourceRef.current = selectedResource ?? null
       return
     }
     // Skip on initial mount so we don't strip ?resource= before the mount effect reads it
     if (!hasProcessedInitialResource.current) {
-
+      prevSelectedResourceRef.current = selectedResource ?? null
       return
     }
     // Skip URL update if selectedResource's kind doesn't match selectedKind (still syncing)
@@ -2462,12 +2537,38 @@ export function ResourcesView({
         return // Wait for kind sync effect to run first
       }
     }
-    // Push history when kind changes (so browser back/forward works), replace for filter changes
-    const pushHistory = shouldPushHistory.current
+    // Push history for navigations (so browser back works); replace for filter / drawer-toggle changes.
+    // A navigation is one of: explicit sidebar/keyboard kind switch (shouldPushHistory),
+    // kind change driven by external setSelectedResource (pathname differs from target — e.g. clicking a
+    // Parent Gateway from a TCPRoute drawer), or a drawer-to-drawer switch within the same kind
+    // (selectedResource A -> B, both non-null and different). Initial open (null -> X) and close (X -> null)
+    // stay as replace because they don't represent a destination the user wants to "go back" to.
+    const targetPath = `${basePath}/${selectedKind.name}`
+    // Compare basename-relative paths. Hosts that mount the app under a non-empty basename
+    // (e.g. Radar Hub at /c/{cluster}) inject `locationPathname` from useLocation(), which strips
+    // the basename — `window.location.pathname` still includes it, so reading window directly
+    // would never match `targetPath` (basename-relative) and force every URL write to push.
+    const currentPath =
+      locationPathname !== undefined
+        ? locationPathname
+        : typeof window !== 'undefined'
+          ? window.location.pathname
+          : ''
+    const pathChanged = currentPath !== targetPath
+    const prev = prevSelectedResourceRef.current
+    const current = selectedResource ?? null
+    const drawerSwitched =
+      prev !== null && current !== null &&
+      (prev.namespace !== current.namespace ||
+        prev.name !== current.name ||
+        prev.kind !== current.kind ||
+        (prev.group ?? '') !== (current.group ?? ''))
+    const pushHistory = shouldPushHistory.current || pathChanged || drawerSwitched
     shouldPushHistory.current = false
+    prevSelectedResourceRef.current = current
 
     updateURL(selectedKind, searchTerm, columnFilters, problemFilters, showInactiveReplicaSets, selectedResource?.namespace, selectedResource?.name, pushHistory)
-  }, [selectedKind, searchTerm, columnFilters, problemFilters, showInactiveReplicaSets, selectedResource, updateURL])
+  }, [selectedKind, searchTerm, columnFilters, problemFilters, showInactiveReplicaSets, selectedResource, updateURL, basePath, locationPathname])
 
   // Handle resource click from URL on mount
   useEffect(() => {
@@ -2624,12 +2725,18 @@ export function ResourcesView({
 
   const [refetch, isRefreshAnimating, refreshPhase] = useRefreshAnimation(() => refetchFn?.())
 
-  // Track last updated time
+  // React Query bumps dataUpdatedAt on no-op refetches (window focus,
+  // mount, sibling subscribers); structural sharing returns the same
+  // resources reference when data is byte-identical. Skip the timer
+  // reset in that case — otherwise opening a filter drawer looks like
+  // it triggered a real fetch.
+  const lastDataRef = useRef<unknown>(undefined)
   useEffect(() => {
-    if (dataUpdatedAt) {
-      setLastUpdated(new Date(dataUpdatedAt))
-    }
-  }, [dataUpdatedAt])
+    if (!dataUpdatedAt) return
+    if (resources === lastDataRef.current) return
+    lastDataRef.current = resources
+    setLastUpdated(new Date(dataUpdatedAt))
+  }, [dataUpdatedAt, resources])
 
   // Derive counts — prefer lightweight resourceCounts prop over full query data
   const counts = useMemo(() => {
@@ -3468,12 +3575,7 @@ export function ResourcesView({
             </span>
           )}
 
-          {lastUpdated && (
-            <div className="flex items-center gap-1.5 text-xs text-theme-text-tertiary">
-              <Clock className="w-3.5 h-3.5" />
-              <span>Updated <span className="inline-block min-w-[4ch] tabular-nums">{formatAge(lastUpdated.toISOString())}</span></span>
-            </div>
-          )}
+          {lastUpdated && <LastUpdatedLabel lastUpdated={lastUpdated} />}
           {/* Column picker */}
           <div className="relative" ref={columnPickerRef}>
             <button
@@ -3970,7 +4072,14 @@ function CellContent({ resource, kind, column, group, majorityNodeMinorVersion,
     )
   }
   if (column === 'age') {
-    return <span className="text-sm text-theme-text-secondary">{formatAge(meta.creationTimestamp)}</span>
+    if (!meta.creationTimestamp) {
+      return <span className="text-sm text-theme-text-secondary">-</span>
+    }
+    return (
+      <Tooltip content={new Date(meta.creationTimestamp).toLocaleString()}>
+        <span className="text-sm text-theme-text-secondary">{formatAge(meta.creationTimestamp)}</span>
+      </Tooltip>
+    )
   }
 
   // Kind-specific columns (normalize CRD singular names like 'ScaledObject' → 'scaledobjects')
@@ -5716,6 +5825,3 @@ function EventCell({ resource, column }: { resource: any; column: string }) {
       return <span className="text-sm text-theme-text-tertiary">-</span>
   }
 }
-
-
-

package/src/components/resources/index.ts

@@ -14,6 +14,6 @@ export * from './resource-utils-trivy'
 export * from './resource-utils-traefik'
 export * from './resource-utils-velero'
 export { ResourcesView, ResourcesViewDataContext } from './ResourcesView'
-export type { ResourceQueryResult } from './ResourcesView'
+export type { ResourceQueryResult, ExtraColumn } from './ResourcesView'
 export { ResourcesSidebar } from './ResourcesSidebar'
 export type { ResourcesSidebarProps, SelectedKindInfo, PinnedItem } from './ResourcesSidebar'

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

@@ -55,7 +55,7 @@ export function KnativeConfigurationRenderer({ data, onNavigate }: KnativeConfig
                 <div className="text-xs text-theme-text-secondary truncate" title={c.image}>{c.image}</div>
                 {c.ports && c.ports.length > 0 && (
                   <div className="text-xs text-theme-text-tertiary mt-1">
-                    Ports: {c.ports.map((p: any) => `${p.containerPort}/${p.protocol || 'TCP'}`).join(', ')}
+                    Ports: {c.ports.map((p: any) => `${p.name ? `${p.name}: ` : ''}${p.containerPort}/${p.protocol || 'TCP'}`).join(', ')}
                   </div>
                 )}
               </div>

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

@@ -67,7 +67,7 @@ export function KnativeRevisionRenderer({ data }: KnativeRevisionRendererProps)
                 <div className="text-xs text-theme-text-secondary truncate" title={c.image}>{c.image}</div>
                 {c.ports && c.ports.length > 0 && (
                   <div className="text-xs text-theme-text-tertiary mt-1">
-                    Ports: {c.ports.map((p: any) => `${p.containerPort}/${p.protocol || 'TCP'}`).join(', ')}
+                    Ports: {c.ports.map((p: any) => `${p.name ? `${p.name}: ` : ''}${p.containerPort}/${p.protocol || 'TCP'}`).join(', ')}
                   </div>
                 )}
                 {c.resources && (c.resources.requests || c.resources.limits) && (

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

@@ -123,7 +123,7 @@ export function KnativeServiceRenderer({ data, onNavigate }: KnativeServiceRende
                 <div className="text-xs text-theme-text-secondary truncate" title={c.image}>{c.image}</div>
                 {c.ports && c.ports.length > 0 && (
                   <div className="text-xs text-theme-text-tertiary mt-1">
-                    Ports: {c.ports.map((p: any) => `${p.containerPort}/${p.protocol || 'TCP'}`).join(', ')}
+                    Ports: {c.ports.map((p: any) => `${p.name ? `${p.name}: ` : ''}${p.containerPort}/${p.protocol || 'TCP'}`).join(', ')}
                   </div>
                 )}
               </div>

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

@@ -635,7 +635,8 @@ export function PodRenderer({
                       <span>Ports:</span>
                       {container.ports.map((p: any) => (
                         canPortForward && renderPortAction ? (
-                          <span key={`${p.containerPort}-${p.protocol || 'TCP'}`}>
+                          <span key={`${p.name || ''}-${p.containerPort}-${p.protocol || 'TCP'}`} className="inline-flex items-center gap-1">
+                            {p.name && <span className="text-theme-text-tertiary">{p.name}:</span>}
                             {renderPortAction({
                               namespace,
                               podName,
@@ -645,8 +646,8 @@ export function PodRenderer({
                             })}
                           </span>
                         ) : (
-                          <span key={`${p.containerPort}-${p.protocol || 'TCP'}`} className="text-theme-text-tertiary">
-                            {p.containerPort}/{p.protocol || 'TCP'}
+                          <span key={`${p.name || ''}-${p.containerPort}-${p.protocol || 'TCP'}`} className="text-theme-text-tertiary">
+                            {p.name ? `${p.name}: ` : ''}{p.containerPort}/{p.protocol || 'TCP'}
                           </span>
                         )
                       ))}

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

@@ -6,6 +6,7 @@ import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-co
 import { ConfirmDialog } from '../../ui/ConfirmDialog'
 import type { SecretCertificateInfo, CertificateInfo } from '../../../types'
 import { pluralize } from '../../../utils/pluralize'
+import { cleanResourceForYaml } from '../../../utils/yaml'
 
 interface SecretRendererProps {
   data: any
@@ -74,16 +75,9 @@ export function SecretRenderer({ data, certificateInfo, resourceData, onSaveSecr
 
   const handleSave = useCallback(async (key: string, newValue: string) => {
     if (!onSaveSecretValue || !resourceData) return
-    const cleaned = structuredClone(resourceData)
-    delete cleaned.status
-    if (cleaned.metadata) {
-      delete cleaned.metadata.managedFields
-      delete cleaned.metadata.resourceVersion
-      delete cleaned.metadata.uid
-      delete cleaned.metadata.creationTimestamp
-      delete cleaned.metadata.generation
-    }
-    // Encode with UTF-8 support
+    const cleaned = cleanResourceForYaml(resourceData)
+    if (!cleaned.data) cleaned.data = {}
+    // btoa is byte-only; round-trip through encodeURIComponent/unescape so non-ASCII secret values survive base64 encoding.
     cleaned.data[key] = btoa(unescape(encodeURIComponent(newValue)))
     const yaml = yamlStringify(cleaned, { lineWidth: 0, indent: 2 })
     try {

package/src/components/shared/EditableYamlView.tsx

@@ -9,11 +9,14 @@ import {
   XCircle,
   AlertTriangle,
 } from 'lucide-react'
+import { Download } from 'lucide-react'
 import { stringify as yamlStringify } from 'yaml'
 import { CodeViewer } from '../ui/CodeViewer'
 import { YamlEditor } from '../ui/YamlEditor'
 import { Tooltip } from '../ui/Tooltip'
 import type { SelectedResource } from '../../types'
+import { resourceToYaml } from '../../utils/yaml'
+import { triggerDownload } from '../../utils/download'
 
 // ============================================================================
 // SUCCESS ANIMATION
@@ -118,9 +121,14 @@ interface EditableYamlViewProps {
   saveError?: string | null
   /** Duplicate handler — opens create dialog with this resource's YAML */
   onDuplicate?: (params: { kind: string; namespace: string; name: string; yaml: string }) => void
+  /**
+   * Optional override for the download trigger — desktop builds inject a native save dialog here.
+   * Falls back to a browser blob download when omitted.
+   */
+  onDownload?: (content: string, mime: string, filename: string) => void
 }
 
-export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSave, isSaving, saveError, onDuplicate }: EditableYamlViewProps) {
+export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSave, isSaving, saveError, onDuplicate, onDownload }: EditableYamlViewProps) {
   const draftKey = `radar_yaml_draft:${resource.kind}/${resource.namespace}/${resource.name}`
 
   // Restore draft from sessionStorage (e.g., after session-expiry redirect).
@@ -149,26 +157,20 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
     }
   }, [isEditing, editedYaml, draftKey])
 
-  // Convert resource to YAML for editing
-  const convertToYaml = useCallback((d: any) => {
-    if (!d) return ''
-    const cleaned = { ...d }
-    delete cleaned.status
-    if (cleaned.metadata) {
-      delete cleaned.metadata.managedFields
-      delete cleaned.metadata.resourceVersion
-      delete cleaned.metadata.uid
-      delete cleaned.metadata.creationTimestamp
-      delete cleaned.metadata.generation
-    }
-    return yamlStringify(cleaned, { lineWidth: 0, indent: 2 })
-  }, [])
+  const handleDownload = useCallback(() => {
+    const yaml = resourceToYaml(data)
+    if (!yaml) return
+    // Prefer the canonical singular Kind from the manifest (e.g. "Pod") over the URL plural ("pods").
+    const kindForFile = (data?.kind || resource.kind || 'resource').toLowerCase()
+    const slug = `${kindForFile}-${resource.name}`.replace(/[^a-z0-9._-]+/g, '-')
+    triggerDownload(yaml, 'application/yaml', `${slug}.yaml`, onDownload)
+  }, [data, resource.kind, resource.name, onDownload])
 
   const handleStartEdit = useCallback(() => {
-    setEditedYaml(convertToYaml(data))
+    setEditedYaml(resourceToYaml(data))
     setYamlErrors([])
     setIsEditing(true)
-  }, [data, convertToYaml])
+  }, [data])
 
   const handleCancelEdit = useCallback(() => {
     setIsEditing(false)
@@ -328,6 +330,15 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
             {copied ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
             Copy
           </button>
+          <Tooltip content="Download manifest as YAML (server-generated fields stripped)">
+            <button
+              onClick={handleDownload}
+              className="flex items-center gap-1 px-2 py-1 text-xs text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+            >
+              <Download className="w-3.5 h-3.5" />
+              Download
+            </button>
+          </Tooltip>
           {onDuplicate && (
             <Tooltip content="Duplicate as new resource">
               <button

package/src/components/shared/ManagedByChip.tsx

@@ -0,0 +1,45 @@
+import { GitBranch } from 'lucide-react'
+import { clsx } from 'clsx'
+import type { GitOpsOwnerRef } from '../../utils/gitops-owner'
+
+// ManagedByChip renders the "Managed by <ArgoCD/FluxCD app>" affordance for
+// resources detected (via labels/annotations) to be GitOps-managed. The chip
+// is clickable when the host wires `onOpen`; integrators that don't surface
+// a GitOps tab can omit the handler and the chip degrades to a passive badge
+// so the relationship is still visible.
+//
+// Variant:
+//   - inline (default): compact pill suitable for header rows and resource list rows
+//   - block: starts a new line with mt-1 spacing, used in WorkloadView title strip
+export function ManagedByChip({
+  owner,
+  onOpen,
+  variant = 'inline',
+}: {
+  owner: GitOpsOwnerRef
+  onOpen?: (ref: GitOpsOwnerRef) => void
+  variant?: 'inline' | 'block'
+}) {
+  const toolLabel = owner.tool === 'argocd' ? 'ArgoCD' : 'FluxCD'
+  const label = owner.namespace ? `${owner.namespace}/${owner.name}` : owner.name
+  const title = `Managed by ${toolLabel} · ${label}`
+  const interactive = !!onOpen
+  const Wrapper = interactive ? 'button' : 'span'
+  return (
+    <Wrapper
+      {...(interactive
+        ? { type: 'button' as const, onClick: () => onOpen?.(owner) }
+        : {})}
+      title={title}
+      className={clsx(
+        'inline-flex items-center gap-1 rounded border border-theme-border bg-theme-elevated px-1.5 py-0.5 text-[11px] text-theme-text-secondary',
+        variant === 'block' && 'mt-1',
+        interactive && 'hover:border-skyhook-500/60 hover:text-skyhook-500 transition-colors',
+      )}
+    >
+      <GitBranch className="h-3 w-3 shrink-0" />
+      <span className="shrink-0 text-theme-text-tertiary">Managed by</span>
+      <span className="truncate max-w-[180px]">{label}</span>
+    </Wrapper>
+  )
+}

package/src/components/shared/index.ts

@@ -2,3 +2,4 @@ export { ResourceRendererDispatch, getResourceStatus, type RendererOverrides } f
 export { EditableYamlView, SaveSuccessAnimation } from './EditableYamlView'
 export { ResourceActionsBar, RevisionHistoryDialog } from './ResourceActionsBar'
 export { CreateResourceDialog, type CreateResourceDialogProps, type ApplyResult } from './CreateResourceDialog'
+export { ManagedByChip } from './ManagedByChip'

package/src/components/timeline/TimelineList.tsx

@@ -22,7 +22,7 @@ import { isChangeEvent, isK8sEvent, isHistoricalEvent, isOperation } from '../..
 import { getOperationColor, getHealthBadgeColor, SEVERITY_BADGE } from '../../utils/badge-colors'
 import { ResourceRefBadge } from '../ui/drawer-components'
 import type { NavigateToResource } from '../../utils/navigation'
-import { kindToPlural, refToSelectedResource } from '../../utils/navigation'
+import { kindToPlural, refToSelectedResource, apiVersionToGroup } from '../../utils/navigation'
 import { pluralize } from '../../utils/pluralize'
 import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
 
@@ -589,7 +589,7 @@ function ActivityCard({ item, expanded, onToggle, onResourceClick }: ActivityCar
               <button
                 onClick={(e) => {
                   e.stopPropagation()
-                  onResourceClick?.({ kind: kindToPlural(item.kind), namespace: item.namespace, name: item.name })
+                  onResourceClick?.({ kind: kindToPlural(item.kind), namespace: item.namespace, name: item.name, group: apiVersionToGroup(item.apiVersion) })
                 }}
                 className="flex items-center gap-2 hover:bg-theme-elevated/50 rounded px-1 -ml-1 transition-colors group"
               >
@@ -732,7 +732,7 @@ function AggregatedActivityCard({ first, last, count, reason, expanded, onToggle
               <button
                 onClick={(e) => {
                   e.stopPropagation()
-                  onResourceClick?.({ kind: kindToPlural(first.kind), namespace: first.namespace, name: first.name })
+                  onResourceClick?.({ kind: kindToPlural(first.kind), namespace: first.namespace, name: first.name, group: apiVersionToGroup(first.apiVersion) })
                 }}
                 className="flex items-center gap-2 hover:bg-theme-elevated/50 rounded px-1 -ml-1 transition-colors group"
               >

package/src/components/topology/TopologyGraph.tsx

@@ -445,10 +445,11 @@ export function TopologyGraph({
   // Structure key for change detection — includes groupLevels so chip↔cardGrid triggers relayout
   const structureKey = useMemo(() => {
     const nodeIds = workingNodes.map(n => n.id).sort().join(',')
+    const edgeIds = workingEdges.map(e => `${e.source}->${e.target}:${e.type}`).sort().join(',')
     const levels = Array.from(groupLevels.entries()).sort().map(([k, v]) => `${k}:${v}`).join(',')
     const expanded = Array.from(expandedPodGroups).sort().join(',')
-    return `${viewMode}|${nodeIds}|${levels}|${expanded}|${groupingMode}|${layoutRetryCount}`
-  }, [viewMode, workingNodes, groupLevels, expandedPodGroups, groupingMode, layoutRetryCount])
+    return `${viewMode}|${nodeIds}|${edgeIds}|${levels}|${expanded}|${groupingMode}|${layoutRetryCount}`
+  }, [viewMode, workingNodes, workingEdges, groupLevels, expandedPodGroups, groupingMode, layoutRetryCount])
 
   // Layout when structure changes - use hierarchical ELK layout
   useEffect(() => {

package/src/components/ui/Tooltip.tsx

@@ -218,7 +218,16 @@ export function Tooltip({
             ref={tooltipRef}
             className={clsx(
               'fixed z-[9999] px-2 py-1 text-xs text-theme-text-primary bg-theme-base rounded shadow-lg border border-theme-border',
-              'whitespace-nowrap pointer-events-none',
+              // Cap width + allow wrapping. Long tooltips (multi-sentence
+              // disabled-reason explanations) used to render with
+              // whitespace-nowrap, producing 700+ px wide single-line
+              // tooltips that the viewport collision logic then pushed
+              // away from their trigger to fit on screen — visually
+              // detached from the element they were describing. With
+              // max-w-xs (320px) + whitespace-normal, short tooltips
+              // still fit on one line (content shorter than max-width)
+              // and long ones wrap naturally near the trigger.
+              'max-w-xs whitespace-normal break-words pointer-events-none',
               className
             )}
             style={{

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

@@ -519,7 +519,7 @@ export function PodTemplateSection({ template }: { template: any }) {
           <div className="text-xs text-theme-text-secondary truncate" title={c.image}>{c.image}</div>
           {c.ports && (
             <div className="text-xs text-theme-text-tertiary mt-1">
-              Ports: {c.ports.map((p: any) => `${p.containerPort}/${p.protocol || 'TCP'}`).join(', ')}
+              Ports: {c.ports.map((p: any) => `${p.name ? `${p.name}: ` : ''}${p.containerPort}/${p.protocol || 'TCP'}`).join(', ')}
             </div>
           )}
         </div>
@@ -724,7 +724,8 @@ export function RelatedResourcesSection({ relationships, onNavigate }: RelatedRe
     (relationships.configRefs && relationships.configRefs.length > 0) ||
     (relationships.consumers && relationships.consumers.length > 0) ||
     (relationships.scalers && relationships.scalers.length > 0) ||
-    (relationships.policies && relationships.policies.length > 0) ||
+    (relationships.pdbs && relationships.pdbs.length > 0) ||
+    (relationships.networkPolicies && relationships.networkPolicies.length > 0) ||
     relationships.scaleTarget
 
   if (!hasRelationships) return null
@@ -765,25 +766,12 @@ export function RelatedResourcesSection({ relationships, onNavigate }: RelatedRe
         {relationships.scalers && relationships.scalers.length > 0 && (
           <RelationshipGroup label="Autoscaler" refs={dedupeRefs(relationships.scalers)} onNavigate={onNavigate} />
         )}
-        {relationships.policies && relationships.policies.length > 0 && (() => {
-          const policyKinds = new Set(['NetworkPolicy', 'CiliumNetworkPolicy', 'CiliumClusterwideNetworkPolicy', 'ClusterNetworkPolicy'])
-          const pdbs = relationships.policies.filter(r => r.kind === 'PodDisruptionBudget')
-          const netpols = relationships.policies.filter(r => policyKinds.has(r.kind))
-          const other = relationships.policies.filter(r => r.kind !== 'PodDisruptionBudget' && !policyKinds.has(r.kind))
-          return (
-            <>
-              {pdbs.length > 0 && (
-                <RelationshipGroup label="Disruption Budget" refs={dedupeRefs(pdbs)} onNavigate={onNavigate} />
-              )}
-              {netpols.length > 0 && (
-                <RelationshipGroup label="Network Policies" refs={dedupeRefs(netpols)} onNavigate={onNavigate} />
-              )}
-              {other.length > 0 && (
-                <RelationshipGroup label="Policies" refs={dedupeRefs(other)} onNavigate={onNavigate} />
-              )}
-            </>
-          )
-        })()}
+        {relationships.pdbs && relationships.pdbs.length > 0 && (
+          <RelationshipGroup label="Disruption Budget" refs={dedupeRefs(relationships.pdbs)} onNavigate={onNavigate} />
+        )}
+        {relationships.networkPolicies && relationships.networkPolicies.length > 0 && (
+          <RelationshipGroup label="Network Policies" refs={dedupeRefs(relationships.networkPolicies)} onNavigate={onNavigate} />
+        )}
         {relationships.scaleTarget && (
           <RelationshipGroup label="Scale Target" refs={[relationships.scaleTarget]} onNavigate={onNavigate} />
         )}