@skyhook-io/k8s-ui 1.5.13 → 1.6.0

package/src/components/gitops/tree/index.ts

@@ -0,0 +1,4 @@
+export { GitOpsTreeGraph } from './GitOpsTreeGraph'
+export type { GitOpsTreePreset } from './GitOpsTreeGraph'
+export type { GitOpsTreeFilters } from './tree-helpers'
+export { gitOpsFilterSet, hasGitOpsTreeFilters, matchesGitOpsTreeFilters } from './tree-helpers'

package/src/components/gitops/tree/tree-helpers.ts

@@ -0,0 +1,42 @@
+import type { GitOpsTreeNode } from '../../../types'
+
+export interface GitOpsTreeFilters {
+  kinds?: Set<string> | string[]
+  namespaces?: Set<string> | string[]
+  sync?: Set<string> | string[]
+  health?: Set<string> | string[]
+  roles?: Set<string> | string[]
+}
+
+export function gitOpsFilterSet(values?: Set<string> | string[]): Set<string> | undefined {
+  if (!values) return undefined
+  const set = values instanceof Set ? values : new Set(values)
+  return set.size > 0 ? set : undefined
+}
+
+export function matchesGitOpsTreeFilters(node: GitOpsTreeNode, filters?: GitOpsTreeFilters): boolean {
+  if (!filters) return true
+  const kinds = gitOpsFilterSet(filters.kinds)
+  const namespaces = gitOpsFilterSet(filters.namespaces)
+  const sync = gitOpsFilterSet(filters.sync)
+  const health = gitOpsFilterSet(filters.health)
+  const roles = gitOpsFilterSet(filters.roles)
+
+  if (kinds && !kinds.has(node.ref.kind)) return false
+  if (namespaces && !namespaces.has(node.ref.namespace || '(cluster)')) return false
+  if (sync && !sync.has(node.sync || 'Unknown')) return false
+  if (health && !health.has(node.health || 'Unknown')) return false
+  if (roles && !roles.has(node.role)) return false
+  return true
+}
+
+export function hasGitOpsTreeFilters(filters?: GitOpsTreeFilters): boolean {
+  if (!filters) return false
+  return Boolean(
+    gitOpsFilterSet(filters.kinds) ||
+    gitOpsFilterSet(filters.namespaces) ||
+    gitOpsFilterSet(filters.sync) ||
+    gitOpsFilterSet(filters.health) ||
+    gitOpsFilterSet(filters.roles),
+  )
+}

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
@@ -1772,18 +1775,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 +1858,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 +2347,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 +2377,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 +2445,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 +2476,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 +2492,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(() => {
@@ -5716,6 +5772,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>

package/src/components/workload/ResourceDetailDrawer.tsx

@@ -2,6 +2,7 @@ import { useState, useCallback, useEffect, useRef, type ReactNode } from 'react'
 import { TRANSITION_DRAWER } from '../../utils/animation'
 import { clsx } from 'clsx'
 import type { SelectedResource } from '../../types'
+import { useDockReservedHeight } from '../dock/DockContext'
 
 interface ResourceDetailDrawerProps {
   resource: SelectedResource
@@ -111,11 +112,12 @@ export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab
   }, [expanded, onNavigateToResource, onNavigate])
 
   const headerHeight = headerHeightProp ?? 49
+  const dockInset = useDockReservedHeight()
 
   return (
     <div
       className={clsx(
-        'fixed right-0 bg-theme-surface border-l border-theme-border flex flex-col shadow-drawer z-40',
+        'absolute right-0 bg-theme-surface border-l border-theme-border flex flex-col shadow-drawer z-40',
         TRANSITION_DRAWER,
         isOpen
           ? 'translate-x-0 opacity-100'
@@ -123,9 +125,9 @@ export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab
         expanded && '!border-l-0',
       )}
       style={{
-        width: expanded ? `calc(100vw - ${leftOffset}px)` : drawerWidth,
+        width: expanded ? `calc(100% - ${leftOffset}px)` : drawerWidth,
         top: headerHeight,
-        height: `calc(100vh - ${headerHeight}px)`,
+        height: `calc(100% - ${headerHeight}px - ${dockInset}px)`,
         // Collapse is instant — no animation, content and width snap together.
         // Expand + slide-in/out animate via TRANSITION_DRAWER class.
         ...(isCollapsing && { transition: 'none' }),