@skyhook-io/k8s-ui 1.7.12 → 1.7.13

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -90,18 +90,21 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
     setFetchError(null)
     try {
       const result = await fetchAll({ container: selectedContainer || undefined, tailLines, sinceSeconds })
+      // Older backends marshal empty results as null rather than [].
+      const resultPods = result.pods ?? []
+      const resultLogs = result.logs ?? []
 
-      setPods(result.pods)
+      setPods(resultPods)
 
-      if (!podsInitialized.current && result.pods.length > 0) {
+      if (!podsInitialized.current && resultPods.length > 0) {
         podsInitialized.current = true
-        setSelectedPods(new Set(result.pods.map(p => p.name)))
+        setSelectedPods(new Set(resultPods.map(p => p.name)))
       }
 
       const indexByPod = new Map<string, number>()
-      result.pods.forEach((pod, i) => indexByPod.set(pod.name, i))
+      resultPods.forEach((pod, i) => indexByPod.set(pod.name, i))
 
-      set(result.logs.map(log => ({
+      set(resultLogs.map(log => ({
         timestamp: log.timestamp,
         content: log.content,
         container: log.container,

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

@@ -174,12 +174,13 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
 
   return (
     <>
-      {/* Scaling in progress banner */}
+      {/* Scaling in progress banner — amber: replicas short of desired is an
+          attention state, not an info note (it may be a stuck rollout). */}
       {(scaledTo !== null || progressMessage) && !hasProblems && (
-        <div className="mb-4 p-3 bg-blue-500/10 border border-blue-500/30 rounded-lg">
+        <div className="mb-4 p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg">
           <div className="flex items-center gap-2">
-            <Loader2 className="w-4 h-4 text-blue-400 animate-spin shrink-0" />
-            <div className="text-sm text-blue-300">
+            <Loader2 className="w-4 h-4 text-amber-500 animate-spin shrink-0" />
+            <div className="text-sm text-amber-700 dark:text-amber-300">
               {progressMessage || `Scaling to ${scaledTo} replicas...`}
             </div>
           </div>

package/src/components/shared/DetailShell.tsx

@@ -30,6 +30,8 @@ export interface DetailShellProps<TId extends string = string> {
   onTabChange: (id: TId) => void
   tabStripEnd?: ReactNode
   overlay?: ReactNode
+  /** Hide breadcrumb/identity/header actions when a host page already owns that chrome. */
+  compactHeader?: boolean
   children: ReactNode
 }
 
@@ -44,6 +46,7 @@ export function DetailShell<TId extends string = string>({
   onTabChange,
   tabStripEnd,
   overlay,
+  compactHeader = false,
   children,
 }: DetailShellProps<TId>) {
   const visibleTabs = tabs.filter((t) => !t.hidden)
@@ -52,15 +55,19 @@ export function DetailShell<TId extends string = string>({
     <div className="flex flex-col h-full w-full bg-theme-surface">
       {/* Header */}
       <div className="shrink-0 border-b border-theme-border bg-theme-surface">
-        {breadcrumb && <div className="px-6 pt-2.5">{breadcrumb}</div>}
-        <div className={clsx('px-6 flex items-start gap-4', breadcrumb ? 'pb-3 pt-1.5' : 'py-3')}>
-          {nav}
-          <div className="flex-1 min-w-0">{identity}</div>
-          {headerActions}
-        </div>
+        {!compactHeader && (
+          <>
+            {breadcrumb && <div className="px-6 pt-2.5">{breadcrumb}</div>}
+            <div className={clsx('px-6 flex items-start gap-4', breadcrumb ? 'pb-3 pt-1.5' : 'py-3')}>
+              {nav}
+              <div className="flex-1 min-w-0">{identity}</div>
+              {headerActions}
+            </div>
+          </>
+        )}
 
         {/* Tabs (left) + scope controls / actions (right) */}
-        <div className="px-6 flex items-center border-t border-theme-border">
+        <div className={clsx('flex items-center', compactHeader ? 'px-0' : 'border-t border-theme-border px-6')}>
           <div className="flex gap-1" role="tablist">
             {visibleTabs.map((t) => (
               <DetailShellTabButton key={t.id} active={activeTab === t.id} onClick={() => onTabChange(t.id)}>

package/src/components/shared/EditableYamlView.tsx

@@ -66,19 +66,27 @@ function formatSaveError(error: string): { summary: string; details?: string } {
     const errorPart = parts[1]?.trim() || ''
 
     if (errorPart.includes('Forbidden:')) {
-      const forbiddenMatch = errorPart.match(/([^:]+):\s*Forbidden:\s*([^.{]+)/)
-      if (forbiddenMatch) {
+      const forbiddenAt = errorPart.indexOf(': Forbidden:')
+      if (forbiddenAt > 0) {
+        const target = errorPart.slice(0, forbiddenAt).trim()
+        const messageStart = forbiddenAt + ': Forbidden:'.length
+        const dotAt = errorPart.indexOf('.', messageStart)
+        const braceAt = errorPart.indexOf('{', messageStart)
+        const endCandidates = [dotAt, braceAt].filter((i) => i >= 0)
+        const messageEnd = endCandidates.length ? Math.min(...endCandidates) : errorPart.length
+        const message = errorPart.slice(messageStart, messageEnd).trim()
         return {
-          summary: `Cannot update ${forbiddenMatch[1]}: ${forbiddenMatch[2].trim()}`,
+          summary: `Cannot update ${target}: ${message}`,
           details: error.length > 200 ? error : undefined
         }
       }
     }
 
-    const summaryMatch = errorPart.match(/^([^{]+)/)
-    if (summaryMatch) {
+    const braceAt = errorPart.indexOf('{')
+    const summary = (braceAt >= 0 ? errorPart.slice(0, braceAt) : errorPart).trim()
+    if (summary) {
       return {
-        summary: summaryMatch[1].trim(),
+        summary,
         details: error.length > 200 ? error : undefined
       }
     }
@@ -111,6 +119,8 @@ interface EditableYamlViewProps {
   data: any
   onCopy: (text: string) => void
   copied: boolean
+  /** Hide edit affordances when the host surface is read-only. */
+  readOnly?: boolean
   /** Called after a successful save so the parent can refetch */
   onSaved?: () => void
   /** Save handler — injected by the platform wrapper */
@@ -128,13 +138,13 @@ interface EditableYamlViewProps {
   onDownload?: (content: string, mime: string, filename: string) => void
 }
 
-export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSave, isSaving, saveError, onDuplicate, onDownload }: EditableYamlViewProps) {
+export function EditableYamlView({ resource, data, onCopy, copied, readOnly = false, 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).
   // All sessionStorage calls are wrapped in try-catch — storage can throw
   // QuotaExceededError or be blocked by browser security policies.
-  const savedDraft = useRef(safeSessionGet(draftKey))
+  const savedDraft = useRef(readOnly ? null : safeSessionGet(draftKey))
   const [isEditing, setIsEditing] = useState(savedDraft.current !== null)
   const [editedYaml, setEditedYaml] = useState(savedDraft.current ?? '')
   const [yamlErrors, setYamlErrors] = useState<string[]>([])
@@ -153,12 +163,19 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
 
   // Autosave draft to sessionStorage while editing (best-effort)
   useEffect(() => {
+    if (readOnly) {
+      setIsEditing(false)
+      setEditedYaml('')
+      setYamlErrors([])
+      safeSessionRemove(draftKey)
+      return
+    }
     if (isEditing && editedYaml) {
       safeSessionSet(draftKey, editedYaml)
     } else {
       safeSessionRemove(draftKey)
     }
-  }, [isEditing, editedYaml, draftKey])
+  }, [isEditing, editedYaml, draftKey, readOnly])
 
   const handleDownload = useCallback(() => {
     const yaml = resourceToYaml(data)
@@ -170,10 +187,11 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
   }, [data, resource.kind, resource.name, onDownload])
 
   const handleStartEdit = useCallback(() => {
+    if (readOnly) return
     setEditedYaml(resourceToYaml(data))
     setYamlErrors([])
     setIsEditing(true)
-  }, [data])
+  }, [data, readOnly])
 
   const handleCancelEdit = useCallback(() => {
     setIsEditing(false)
@@ -345,13 +363,15 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
       <div className="flex items-center justify-between mb-2">
         <span className="text-sm font-medium text-theme-text-secondary">YAML</span>
         <div className="flex items-center gap-2">
-          <button
-            onClick={handleStartEdit}
-            className="flex items-center gap-1 px-2 py-1 text-xs text-blue-400 hover:text-blue-300 hover:bg-theme-elevated rounded"
-          >
-            <Pencil className="w-3.5 h-3.5" />
-            Edit
-          </button>
+          {!readOnly && (
+            <button
+              onClick={handleStartEdit}
+              className="flex items-center gap-1 px-2 py-1 text-xs text-blue-400 hover:text-blue-300 hover:bg-theme-elevated rounded"
+            >
+              <Pencil className="w-3.5 h-3.5" />
+              Edit
+            </button>
+          )}
           <button
             onClick={() => onCopy(yamlContent)}
             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"

package/src/components/timeline/TimelineList.tsx

@@ -1,11 +1,11 @@
-import { useState, useMemo, useRef, useEffect } from 'react'
+import { useState, useMemo, useEffect } from 'react'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { PaneLoader } from '../ui/PaneLoader'
+import { SearchBox } from '../ui/SearchBox'
 import {
   AlertCircle,
   CheckCircle,
   Clock,
-  Search,
   RefreshCw,
   ChevronRight,
   Filter,
@@ -24,7 +24,6 @@ import { ResourceRefBadge } from '../ui/drawer-components'
 import type { NavigateToResource } from '../../utils/navigation'
 import { kindToPlural, refToSelectedResource, apiVersionToGroup } from '../../utils/navigation'
 import { pluralize } from '../../utils/pluralize'
-import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
 
 /** Format resource age (e.g., "3d", "5h", "10m") */
 function formatResourceAge(createdAt: string): string {
@@ -87,29 +86,11 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
   const [timeRange, setTimeRange] = useState<TimeRange>(initialTimeRange ?? '1h')
   const [kindFilter, setKindFilter] = useState<string>('')
   const [expandedItem, setExpandedItem] = useState<string | null>(null)
-  const searchInputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     onQueryChange?.({ timeRange, kind: kindFilter || undefined })
   }, [timeRange, kindFilter, onQueryChange])
 
-  // Keyboard shortcut: / to focus search
-  useRegisterShortcut({
-    id: 'timeline-list-search',
-    keys: '/',
-    description: 'Focus search',
-    category: 'Search',
-    scope: 'timeline',
-    handler: () => searchInputRef.current?.focus(),
-  })
-  useRegisterShortcut({
-    id: 'timeline-list-escape',
-    keys: 'Escape',
-    description: 'Blur search',
-    category: 'Search',
-    scope: 'timeline',
-    handler: () => searchInputRef.current?.blur(),
-  })
 
   const [handleRefresh, isRefreshAnimating] = useRefreshAnimation(onRefresh ?? (() => {}))
 
@@ -278,17 +259,7 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
       {/* Toolbar */}
       <div className="flex items-center gap-4 px-4 py-3 border-b border-theme-border bg-theme-surface/50 flex-wrap">
         {/* Search */}
-        <div className="flex-1 relative min-w-[200px]">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
-          <input
-            ref={searchInputRef}
-            type="text"
-            placeholder="Search... (press /)"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full max-w-md pl-10 pr-4 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
-        </div>
+        <SearchBox value={searchTerm} onChange={setSearchTerm} scope="timeline" shortcutId="timeline-list-search" className="flex-1 min-w-[200px] max-w-md" />
 
         {/* Activity type filter */}
         <div className="flex items-center gap-1 bg-theme-elevated rounded-lg p-1">

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -7,7 +7,6 @@ import {
   ZoomIn,
   ZoomOut,
   ChevronRight,
-  Search,
   X,
   List,
   GanttChart,
@@ -27,6 +26,7 @@ import type { TimelineEvent, Topology } from '../../types'
 import type { NavigateToResource } from '../../utils/navigation'
 import { kindToPlural, apiVersionToGroup } from '../../utils/navigation'
 import { PaneLoader } from '../ui/PaneLoader'
+import { SearchBox } from '../ui/SearchBox'
 import { pluralize } from '../../utils/pluralize'
 import { gitOpsRouteForKind } from '../../utils/gitops-route'
 import { isChangeEvent, isHistoricalEvent, isOperation, displayKind } from '../../types'
@@ -194,7 +194,6 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
     onResourceClick?.({ kind: kindToPlural(kind), namespace, name, group })
   }, [onNavigatePath, onResourceClick])
   const containerRef = useRef<HTMLDivElement>(null)
-  const searchInputRef = useRef<HTMLInputElement>(null)
   const [zoom, setZoom] = useState(1)
   const [panOffset, setPanOffset] = useState(0)
   const [selectedEvent, setSelectedEvent] = useState<TimelineEvent | null>(null)
@@ -241,23 +240,14 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
   }, [events, hasAutoZoomed])
 
   // Keyboard shortcuts
-  useRegisterShortcut({
-    id: 'swimlane-search',
-    keys: '/',
-    description: 'Focus search',
-    category: 'Search',
-    scope: 'timeline',
-    handler: () => searchInputRef.current?.focus(),
-  })
   useRegisterShortcut({
     id: 'swimlane-escape',
     keys: 'Escape',
-    description: 'Close detail / blur search',
+    description: 'Close event detail',
     category: 'Timeline',
     scope: 'timeline',
     handler: () => {
       if (selectedEvent) setSelectedEvent(null)
-      else searchInputRef.current?.blur()
     },
   })
 
@@ -467,25 +457,7 @@ export function TimelineSwimlanes({ events, isLoading, onResourceClick, viewMode
         <div className="flex items-center justify-between px-4 py-2">
           <div className="flex items-center gap-4">
             {/* Search */}
-            <div className="relative">
-              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
-              <input
-                ref={searchInputRef}
-                type="text"
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                placeholder="Search... (press /)"
-                className="w-80 pl-9 pr-8 py-1.5 text-sm bg-theme-elevated border border-theme-border-light rounded-lg text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
-              />
-              {searchTerm && (
-                <button
-                  onClick={() => setSearchTerm('')}
-                  className="absolute right-2 top-1/2 -translate-y-1/2 text-theme-text-tertiary hover:text-theme-text-primary"
-                >
-                  <X className="w-4 h-4" />
-                </button>
-              )}
-            </div>
+            <SearchBox value={searchTerm} onChange={setSearchTerm} scope="timeline" shortcutId="swimlane-search" className="w-80" />
             {/* Zoom controls */}
             <div className="flex items-center gap-2">
               <button

package/src/components/topology/K8sResourceNode.tsx

@@ -8,6 +8,9 @@ import { clsx } from 'clsx'
 import type { NodeKind, HealthStatus, PodSummary } from '../../types'
 import { displayKind } from '../../types'
 import { healthToSeverity, SEVERITY_DOT } from '../../utils/badge-colors'
+import { workloadHue } from '../../utils/workload-colors'
+import { ownershipOf } from '../../utils/topology-neighborhood'
+import { midTruncate } from '../../utils/format'
 import { Tooltip } from '../ui/Tooltip'
 
 // Get actionable tooltip content for health issues
@@ -359,6 +362,8 @@ interface K8sResourceNodeProps {
     status: HealthStatus
     nodeData: Record<string, unknown>
     selected?: boolean
+    /** Hover-focus: when a sibling workload is focused, non-members dim. */
+    dimmed?: boolean
     onExpand?: (nodeId: string) => void
     onCollapse?: (nodeId: string) => void
     isExpanded?: boolean
@@ -370,7 +375,14 @@ export const K8sResourceNode = memo(function K8sResourceNode({
   data,
   id,
 }: K8sResourceNodeProps) {
-  const { kind, name, status, nodeData, selected, onExpand, onCollapse, isExpanded } = data
+  const { kind, name, status, nodeData, selected, dimmed, onExpand, onCollapse, isExpanded } = data
+  // Workload tint (application graph): a node owned by exactly one workload
+  // carries that workload's hue. Only on healthy/unknown cards — degraded/
+  // unhealthy already own the card background for health, which must win.
+  const { ownerColorIndex } = ownershipOf(nodeData)
+  const hue = ownerColorIndex !== null && (status === 'healthy' || status === 'unknown')
+    ? workloadHue(ownerColorIndex)
+    : undefined
   const subtitle = getSubtitle(kind, nodeData)
   const isInternet = kind === 'Internet'
   const isPodGroup = kind === 'PodGroup'
@@ -423,10 +435,11 @@ export const K8sResourceNode = memo(function K8sResourceNode({
 
       <div
         className={clsx(
-          'relative rounded-lg overflow-hidden',
+          'relative rounded-lg overflow-hidden transition-opacity duration-150',
           'bg-theme-surface topology-node-card',
           selected && 'topology-node-selected',
-          isSmallNode && 'opacity-90',
+          !selected && dimmed && 'opacity-30',
+          isSmallNode && !dimmed && 'opacity-90',
           // Status bar via CSS pseudo-element (defined in index.css)
           (status === 'healthy' || status === 'unknown') && 'topology-node-status-bar',
           status === 'healthy' && 'topology-node-status-healthy',
@@ -437,6 +450,13 @@ export const K8sResourceNode = memo(function K8sResourceNode({
           ...getStatusStyle(status),
         }}
       >
+        {/* Workload tint — layered over the surface, inset past the 4px status bar */}
+        {hue && (
+          <div
+            className="pointer-events-none absolute inset-y-0 right-0 rounded-r-lg"
+            style={{ left: 4, background: hue.wash }}
+          />
+        )}
 
         {/* Content */}
         <div className={clsx(
@@ -496,9 +516,10 @@ export const K8sResourceNode = memo(function K8sResourceNode({
             </div>
           </div>
 
-          {/* Name */}
+          {/* Name — middle-ellipsis so the differentiating suffix survives
+              (a column of pods sharing a long prefix must stay tellable apart). */}
           <div className="text-sm font-medium text-theme-text-primary truncate pr-1">
-            {name}
+            {midTruncate(name, 34)}
           </div>
 
           {/* Subtitle */}

package/src/components/topology/TopologyGraph.tsx

@@ -20,7 +20,7 @@ import {
 import '@xyflow/react/dist/style.css'
 import { toCanvas } from 'html-to-image'
 
-import { AlertTriangle, ChevronsDownUp, ChevronsUpDown, Download, Layers, LayoutGrid, Loader2, Maximize, Minus, Pause, Play, Plus, RotateCw, Shield } from 'lucide-react'
+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 { Tooltip } from '../ui/Tooltip'
 import { useToast } from '../ui/Toast'
@@ -28,6 +28,8 @@ import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 
 import { K8sResourceNode } from './K8sResourceNode'
 import { GroupNode } from './GroupNode'
+import { NEUTRAL_OWNER, type WorkloadFocus } from '../../utils/workload-colors'
+import { ownershipOf } from '../../utils/topology-neighborhood'
 import { buildHierarchicalElkGraph, applyHierarchicalLayout, getGroupKey, type GroupDisplayLevel } from './layout'
 import type { Topology, TopologyNode, TopologyEdge, ViewMode, GroupingMode } from '../../types'
 import { pluralize } from '../../utils/pluralize'
@@ -51,6 +53,15 @@ function getEdgeColor(type: string, isTrafficView: boolean): string {
   return EDGE_COLORS[type as keyof typeof EDGE_COLORS] || '#64748b'
 }
 
+// Human-readable edge legend for the resources view (traffic view is all-green).
+const EDGE_LEGEND: { label: string; color: string }[] = [
+  { label: 'owns', color: EDGE_COLORS['manages'] },
+  { label: 'exposes', color: EDGE_COLORS['exposes'] },
+  { label: 'configures', color: EDGE_COLORS['configures'] },
+  { label: 'scales', color: EDGE_COLORS['uses'] },
+  { label: 'routes to', color: EDGE_COLORS['routes-to'] },
+]
+
 // Memoized edge style cache to avoid creating new objects on every render
 const edgeStyleCache = new Map<string, React.CSSProperties>()
 
@@ -179,6 +190,13 @@ interface TopologyGraphProps {
   focusNodeId?: string
   /** Increment to request a focus on focusNodeId (lets the same node be re-focused). */
   focusNonce?: number
+  /** Application graph hover-focus (see WorkloadFocus): when set, nodes outside
+   *  the focused workload's neighborhood dim. Cheap node-data toggle — never
+   *  re-layouts. */
+  focusedOwnerId?: WorkloadFocus
+  /** Hover a node → reports its TopologyNode (null on leave). Drives the rail's
+   *  reciprocal highlight. */
+  onNodeHover?: (node: TopologyNode | null) => void
 }
 
 export function TopologyGraph({
@@ -197,6 +215,8 @@ export function TopologyGraph({
   namespacesKey = '',
   focusNodeId,
   focusNonce,
+  focusedOwnerId,
+  onNodeHover,
 }: TopologyGraphProps) {
   const isTrafficView = viewMode === 'traffic'
   const [nodes, setNodes, onNodesChangeBase] = useNodesState([] as Node[])
@@ -227,6 +247,7 @@ export function TopologyGraph({
   const [layoutRetryCount, setLayoutRetryCount] = useState(0)
   const [fitViewCounter, setFitViewCounter] = useState(0)
   const [isExporting, setIsExporting] = useState(false)
+  const [showLegend, setShowLegend] = useState(false)
   const prevStructureRef = useRef<string>('')
   const layoutVersionRef = useRef(0) // Used to invalidate stale layout results
   // Saved node positions for preservation across topology updates.
@@ -298,18 +319,26 @@ export function TopologyGraph({
     fitAllAfterLayoutRef.current = true
   }, [groupingMode])
 
-  // Expand pod group to show individual pods
+  // Expand pod group to show individual pods. Clear saved positions so ELK
+  // re-lays out the whole graph from scratch — otherwise existing nodes snap
+  // back to their saved spots while the newly-added pods get fresh ELK
+  // coordinates, and the two coordinate spaces collide (overlapping nodes).
+  // Re-fit afterwards since the expanded pods enlarge the content bounds.
   const handleExpandPodGroup = useCallback((podGroupId: string) => {
     setExpandedPodGroups(prev => new Set(prev).add(podGroupId))
+    savedPositionsRef.current.clear()
+    fitAllAfterLayoutRef.current = true
   }, [])
 
-  // Collapse pod group back
+  // Collapse pod group back — same full relayout + re-fit (the graph shrinks).
   const handleCollapsePodGroup = useCallback((podGroupId: string) => {
     setExpandedPodGroups(prev => {
       const next = new Set(prev)
       next.delete(podGroupId)
       return next
     })
+    savedPositionsRef.current.clear()
+    fitAllAfterLayoutRef.current = true
   }, [])
 
   // Expand PodGroup to individual pods
@@ -348,6 +377,7 @@ export function TopologyGraph({
         name: pod.name,
         status: pod.phase === 'Running' ? 'healthy' : pod.phase === 'Pending' ? 'degraded' : 'unhealthy',
         data: {
+          ...podGroupNode.data,
           namespace: pod.namespace,
           phase: pod.phase,
           restarts: pod.restarts,
@@ -625,6 +655,12 @@ export function TopologyGraph({
             return saved ? { ...node, position: saved } : node
           })
 
+      // The ReactFlow fitView prop fires against the pre-layout canvas; once
+      // the first ELK layout lands the content can sit off-center. Re-frame it.
+      if (isInitialLayout) {
+        fitAllAfterLayoutRef.current = true
+      }
+
       // Update saved positions: add/overwrite with positions from this layout run.
       // Remove stale entries for nodes no longer in the topology.
       const currentIds = new Set(positionedNodes.map(n => n.id))
@@ -710,6 +746,17 @@ export function TopologyGraph({
     [topology, workingNodes, onNodeClick]
   )
 
+  const handleNodeMouseEnter = useCallback(
+    (_e: React.MouseEvent, node: Node) => {
+      if (!onNodeHover || node.type === 'group') return
+      const topologyNode =
+        topology?.nodes.find(n => n.id === node.id) ?? workingNodes.find(n => n.id === node.id)
+      if (topologyNode) onNodeHover(topologyNode)
+    },
+    [topology, workingNodes, onNodeHover]
+  )
+  const handleNodeMouseLeave = useCallback(() => onNodeHover?.(null), [onNodeHover])
+
   // Update selected state - only update nodes that actually changed
   useEffect(() => {
     setNodes(nds => {
@@ -743,6 +790,32 @@ export function TopologyGraph({
     // functional update returns the same array ref when nothing changed.
   }, [selectedNodeId, setNodes, nodes])
 
+  // Hover-focus dim (application graph): when a workload is focused, dim every
+  // resource node not owned by it. A pure data toggle on the existing nodes —
+  // positions are untouched, so it never re-runs the (expensive) ELK layout.
+  useEffect(() => {
+    setNodes(nds => {
+      let changed = false
+      const updated = nds.map(node => {
+        if (node.type === 'group') return node
+        const stamp = ownershipOf(node.data?.nodeData as Record<string, unknown> | undefined)
+        // A focused workload lights its whole neighborhood (focusWorkloadIds);
+        // the "Shared / unscoped" focus lights every neutral node.
+        const inFocus =
+          focusedOwnerId == null
+            ? true
+            : focusedOwnerId === NEUTRAL_OWNER
+              ? stamp.ownerWorkloadId == null
+              : stamp.focusWorkloadIds.includes(focusedOwnerId)
+        const shouldDim = focusedOwnerId != null && !inFocus
+        if (!!node.data?.dimmed === shouldDim) return node
+        changed = true
+        return { ...node, data: { ...node.data, dimmed: shouldDim } }
+      })
+      return changed ? updated : nds
+    })
+  }, [focusedOwnerId, setNodes, nodes])
+
   if (!topology) {
     return <PaneLoader label="Loading topology…" className="absolute inset-0" />
   }
@@ -884,6 +957,8 @@ export function TopologyGraph({
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onNodeClick={handleNodeClick}
+        onNodeMouseEnter={handleNodeMouseEnter}
+        onNodeMouseLeave={handleNodeMouseLeave}
         nodeTypes={nodeTypes}
         fitView
         fitViewOptions={{ padding: 0.2 }}
@@ -935,6 +1010,30 @@ export function TopologyGraph({
               onExportingChange={setIsExporting}
             />
           </div>
+          {!isTrafficView && (
+            <>
+              {showLegend && (
+                <div className="rounded-md border border-theme-border bg-theme-surface/95 px-3 py-2 shadow-theme-md backdrop-blur">
+                  <div className="mb-1.5 text-[10px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Edge colors</div>
+                  <div className="flex flex-col gap-1">
+                    {EDGE_LEGEND.map((e) => (
+                      <div key={e.label} className="flex items-center gap-2 text-[11px] text-theme-text-secondary">
+                        <span className="inline-block h-0.5 w-5 rounded-full" style={{ background: e.color }} />
+                        {e.label}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+              <div className="react-flow__controls overflow-hidden" style={{ position: 'static', margin: 0 }}>
+                <Tooltip content="Edge color legend" delay={100} position="right">
+                  <button className="react-flow__controls-button" onClick={() => setShowLegend((v) => !v)}>
+                    <Info className="w-3.5 h-3.5" />
+                  </button>
+                </Tooltip>
+              </div>
+            </>
+          )}
         </Panel>
         <ViewportController
           viewMode={viewMode}