@skyhook-io/k8s-ui 1.8.11 → 1.8.12

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

@@ -1,5 +1,5 @@
 import { Globe, ArrowRight, Network, Filter } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { Badge } from '../../ui/Badge'
 import type { ResourceRef } from '../../../types'
 
@@ -23,6 +23,10 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
   const unresolvedRefsParents = parentStatuses.filter((p: any) =>
     (p.conditions || []).some((c: any) => c.type === 'ResolvedRefs' && c.status === 'False')
   )
+  // The Operational Issues section (when the host shows it) already reports these
+  // Accepted/ResolvedRefs failures with richer cause + next-step context, so drop
+  // the renderer's own banners to avoid showing the same failure twice.
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   const firstParentConditions = parentStatuses.length > 0
     ? parentStatuses[0].conditions
@@ -47,7 +51,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
 
   return (
     <>
-      {notAcceptedParents.length > 0 && (
+      {notAcceptedParents.length > 0 && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="Route Not Accepted"
@@ -61,7 +65,7 @@ export function GRPCRouteRenderer({ data, onNavigate }: GRPCRouteRendererProps)
         />
       )}
 
-      {unresolvedRefsParents.length > 0 && (
+      {unresolvedRefsParents.length > 0 && !operationalIssuesShown && (
         <AlertBanner
           variant="warning"
           title="Unresolved References"

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

@@ -1,5 +1,5 @@
 import { Cpu } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { Badge } from '../../ui/Badge'
 
 interface GatewayClassRendererProps {
@@ -14,11 +14,12 @@ export function GatewayClassRenderer({ data }: GatewayClassRendererProps) {
   const acceptedCond = conditions.find((c: any) => c.type === 'Accepted')
   const isAccepted = acceptedCond?.status === 'True'
   const isNotAccepted = acceptedCond?.status === 'False'
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   return (
     <>
       {/* Problem detection alert */}
-      {isNotAccepted && (
+      {isNotAccepted && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="GatewayClass Not Accepted"

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

@@ -1,5 +1,5 @@
 import { Globe, ArrowRight, Network, Filter } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { Badge } from '../../ui/Badge'
 import type { ResourceRef } from '../../../types'
 
@@ -23,6 +23,10 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
   const unresolvedRefsParents = parentStatuses.filter((p: any) =>
     (p.conditions || []).some((c: any) => c.type === 'ResolvedRefs' && c.status === 'False')
   )
+  // The Operational Issues section (when the host shows it) already reports these
+  // Accepted/ResolvedRefs failures with richer cause + next-step context, so drop
+  // the renderer's own banners to avoid showing the same failure twice.
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   const firstParentConditions = parentStatuses.length > 0
     ? parentStatuses[0].conditions
@@ -47,7 +51,7 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
 
   return (
     <>
-      {notAcceptedParents.length > 0 && (
+      {notAcceptedParents.length > 0 && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="Route Not Accepted"
@@ -61,7 +65,7 @@ export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps)
         />
       )}
 
-      {unresolvedRefsParents.length > 0 && (
+      {unresolvedRefsParents.length > 0 && !operationalIssuesShown && (
         <AlertBanner
           variant="warning"
           title="Unresolved References"

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

@@ -1,5 +1,5 @@
 import { Server, HardDrive, Shield, Network, Tag, Image } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, KeyValueBadgeList } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, KeyValueBadgeList, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { getEC2NodeClassStatus } from '../resource-utils-karpenter'
 
 interface KarpenterEC2NodeClassRendererProps {
@@ -13,6 +13,7 @@ export function KarpenterEC2NodeClassRenderer({ data }: KarpenterEC2NodeClassRen
 
   const nodeClassStatus = getEC2NodeClassStatus(data)
   const isNotReady = nodeClassStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
 
   const amiTerms = spec.amiSelectorTerms || []
@@ -28,7 +29,7 @@ export function KarpenterEC2NodeClassRenderer({ data }: KarpenterEC2NodeClassRen
 
   return (
     <>
-      {isNotReady && (
+      {isNotReady && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="EC2NodeClass Not Ready"

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

@@ -1,6 +1,6 @@
 import { Server, Cpu, Settings } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
 import { CAPACITY_TYPE_BADGE, BADGE_INACTIVE } from '../../../utils/badge-colors'
 import {
@@ -40,6 +40,7 @@ export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeCl
 
   const claimStatus = getNodeClaimStatus(data)
   const isNotReady = claimStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const capacity = getNodeClaimCapacity(data)
   const requirements = getNodeClaimRequirements(data)
@@ -61,7 +62,7 @@ export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeCl
   return (
     <>
       {/* Problem alert */}
-      {isNotReady && (
+      {isNotReady && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="NodeClaim Not Ready"

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

@@ -1,5 +1,5 @@
 import { Server, Settings, Shield, Cpu, Tag, BarChart3 } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
 import {
   getNodePoolStatus,
@@ -31,6 +31,7 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
 
   const poolStatus = getNodePoolStatus(data)
   const isNotReady = poolStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const requirements = getNodePoolRequirements(data)
   const weight = getNodePoolWeight(data)
@@ -45,7 +46,7 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
   return (
     <>
       {/* Problem alert */}
-      {isNotReady && (
+      {isNotReady && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="NodePool Not Ready"

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

@@ -1,5 +1,5 @@
 import { Cpu } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, useOperationalIssuesShown } from '../../ui/drawer-components'
 import {
   getScaledJobStatus,
   getScaledJobTarget,
@@ -18,13 +18,14 @@ export function KedaScaledJobRenderer({ data }: KedaScaledJobRendererProps) {
 
   const jobStatus = getScaledJobStatus(data)
   const isNotReady = jobStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const triggers = getScaledJobTriggers(data)
 
   return (
     <>
       {/* Problem alert */}
-      {isNotReady && (
+      {isNotReady && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="ScaledJob Not Ready"

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

@@ -1,5 +1,5 @@
 import { Cpu, Settings } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
 import {
   getScaledObjectStatus,
@@ -39,6 +39,7 @@ export function KedaScaledObjectRenderer({ data, onNavigate }: KedaScaledObjectR
   const isPaused = soStatus.text === 'Paused'
   const isFallback = soStatus.text === 'Fallback'
   const isNotReady = soStatus.level === 'unhealthy'
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const fallbackCond = conditions.find((c: any) => c.type === 'Fallback')
@@ -53,7 +54,7 @@ export function KedaScaledObjectRenderer({ data, onNavigate }: KedaScaledObjectR
           message={fallbackCond?.message || 'KEDA is using fallback replicas because triggers are failing.'}
         />
       )}
-      {isNotReady && !isFallback && (
+      {isNotReady && !isFallback && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="ScaledObject Not Ready"

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

@@ -1,5 +1,5 @@
 import { Box, Settings, Cloud, ScrollText, Pause, Layers } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
 import { CodeViewer } from '../../ui/CodeViewer'
 import {
   getCrossplaneStatus,
@@ -41,6 +41,7 @@ export function ManagedResourceRenderer({ data, onNavigate }: ManagedResourceRen
   const atProvider = data?.status?.atProvider
 
   const alertVariant = status.level === 'unhealthy' || status.level === 'alert' ? status.level : null
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   return (
     <>
@@ -53,7 +54,7 @@ export function ManagedResourceRenderer({ data, onNavigate }: ManagedResourceRen
         />
       )}
 
-      {alertVariant && statusReason && (
+      {alertVariant && statusReason && !operationalIssuesShown && (
         <AlertBanner
           variant={alertVariant === 'unhealthy' ? 'error' : 'warning'}
           title={status.text}

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import { HardDrive } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink, useOperationalIssuesShown} from '../../ui/drawer-components'
 
 interface PVCRendererProps {
   data: any
@@ -38,11 +38,12 @@ export function PVCRenderer({ data, onNavigate, extraSections }: PVCRendererProp
   const selectedNode = annotations['volume.kubernetes.io/selected-node']
   const bindCompleted = annotations['pv.kubernetes.io/bind-completed']
   const hasProvisionerInfo = provisioner || selectedNode || bindCompleted
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   return (
     <>
       {/* Problem alerts */}
-      {isLost && (
+      {isLost && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="Issues Detected"

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

@@ -1,6 +1,6 @@
 import { Lock, Key, FileText } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, KeyValueBadgeList, AlertBanner, ResourceLink, useOperationalIssuesShown } from '../../ui/drawer-components'
 
 interface SealedSecretRendererProps {
   data: any
@@ -32,6 +32,7 @@ export function SealedSecretRenderer({ data, onNavigate }: SealedSecretRendererP
   const syncedCond = conditions.find((c: any) => c.type === 'Synced')
   const isSynced = syncedCond?.status === 'True'
   const isNotSynced = syncedCond?.status === 'False'
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   const hasTemplateMetadata =
     (templateLabels && Object.keys(templateLabels).length > 0) ||
@@ -40,7 +41,7 @@ export function SealedSecretRenderer({ data, onNavigate }: SealedSecretRendererP
   return (
     <>
       {/* Problem detection alert */}
-      {isNotSynced && (
+      {isNotSynced && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="Secret is not synced"

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

@@ -1,5 +1,5 @@
 import { ShieldCheck } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, useOperationalIssuesShown } from '../../ui/drawer-components'
 import {
   getSecretStoreStatus,
   getSecretStoreProviderType,
@@ -41,11 +41,12 @@ export function SecretStoreRenderer({ data }: SecretStoreRendererProps) {
   // Problem detection
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
   const isNotReady = readyCond?.status === 'False'
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   return (
     <>
       {/* Alert if not ready */}
-      {isNotReady && (
+      {isNotReady && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="Store Not Ready"

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

@@ -1,5 +1,5 @@
 import { Globe, ArrowRight, Network } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge, useOperationalIssuesShown } from '../../ui/drawer-components'
 import { Badge } from '../../ui/Badge'
 import type { ResourceRef } from '../../../types'
 
@@ -26,6 +26,10 @@ export function SimpleRouteRenderer({ data, kind, onNavigate }: SimpleRouteRende
   const unresolvedRefsParents = parentStatuses.filter((p: any) =>
     (p.conditions || []).some((c: any) => c.type === 'ResolvedRefs' && c.status === 'False')
   )
+  // The Operational Issues section (when the host shows it) already reports these
+  // Accepted/ResolvedRefs failures with richer cause + next-step context, so drop
+  // the renderer's own banners to avoid showing the same failure twice.
+  const operationalIssuesShown = useOperationalIssuesShown()
 
   const firstParentConditions = parentStatuses.length > 0
     ? parentStatuses[0].conditions
@@ -50,7 +54,7 @@ export function SimpleRouteRenderer({ data, kind, onNavigate }: SimpleRouteRende
 
   return (
     <>
-      {notAcceptedParents.length > 0 && (
+      {notAcceptedParents.length > 0 && !operationalIssuesShown && (
         <AlertBanner
           variant="error"
           title="Route Not Accepted"
@@ -64,7 +68,7 @@ export function SimpleRouteRenderer({ data, kind, onNavigate }: SimpleRouteRende
         />
       )}
 
-      {unresolvedRefsParents.length > 0 && (
+      {unresolvedRefsParents.length > 0 && !operationalIssuesShown && (
         <AlertBanner
           variant="warning"
           title="Unresolved References"

package/src/components/resources/resource-utils-argo.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { getArgoApplicationStatus } from './resource-utils-argo'
+import { getArgoApplicationStatus, isArgoOperationInProgress } from './resource-utils-argo'
 
 describe('getArgoApplicationStatus', () => {
   // A Suspended Argo app is intentionally paused — neutral (sky), matching the
@@ -20,4 +20,21 @@ describe('getArgoApplicationStatus', () => {
     const badge = getArgoApplicationStatus({ status: { health: { status: 'Degraded' }, sync: { status: 'Synced' } } })
     expect(badge.level).toBe('unhealthy')
   })
+
+  it('surfaces an operation being terminated', () => {
+    const badge = getArgoApplicationStatus({ status: { operationState: { phase: 'Terminating' } } })
+    expect(badge.level).toBe('degraded')
+    expect(badge.text).toBe('Terminating')
+  })
+})
+
+describe('isArgoOperationInProgress', () => {
+  it.each([
+    [{ status: { operationState: { phase: 'Running' } } }, true],
+    [{ status: { operationState: { phase: 'Terminating' } } }, true],
+    [{ operation: { sync: {} }, status: { operationState: { phase: 'Succeeded' } } }, true],
+    [{ status: { operationState: { phase: 'Succeeded' } } }, false],
+  ])('maps %o to %s', (app, expected) => {
+    expect(isArgoOperationInProgress(app)).toBe(expected)
+  })
 })

package/src/components/resources/resource-utils-argo.ts

@@ -33,6 +33,9 @@ export function getArgoApplicationStatus(app: any): StatusBadge {
   if (opPhase === 'Running') {
     return { text: 'Syncing', color: healthColors.degraded, level: 'degraded' }
   }
+  if (opPhase === 'Terminating') {
+    return { text: 'Terminating', color: healthColors.degraded, level: 'degraded' }
+  }
 
   // Failed operation
   if (opPhase === 'Failed' || opPhase === 'Error') {
@@ -61,6 +64,11 @@ export function getArgoApplicationStatus(app: any): StatusBadge {
   return { text: health || sync || 'Unknown', color: healthColors.unknown, level: 'unknown' }
 }
 
+export function isArgoOperationInProgress(app: any): boolean {
+  const phase = app?.status?.operationState?.phase
+  return app?.operation != null || phase === 'Running' || phase === 'Terminating'
+}
+
 // Radar suspends an Argo Application by clearing spec.syncPolicy.automated and
 // recording the prior prune/selfHeal flags in annotations so Resume can restore
 // them. The *presence* of any of these annotations marks the app as suspended —

package/src/components/shared/ResourceActionsBar.tsx

@@ -18,6 +18,7 @@ import {
 } from 'lucide-react'
 import { createTwoFilesPatch } from 'diff'
 import { clsx } from 'clsx'
+import { classifyDiffLine } from './UnifiedDiff'
 import { Tooltip } from '../ui/Tooltip'
 import { ForceDeleteConfirmDialog, type CascadeDependent } from '../ui/ForceDeleteConfirmDialog'
 import { ConfirmDialog } from '../ui/ConfirmDialog'
@@ -1124,9 +1125,7 @@ function RevisionDiffView({ currentTemplate, selectedTemplate, currentRevision,
         {hasChanges ? (
           <pre className="text-xs font-mono p-0 m-0">
             {diffLines.map((line, index) => {
-              const isAddition = line.startsWith('+') && !line.startsWith('+++')
-              const isDeletion = line.startsWith('-') && !line.startsWith('---')
-              const isHeader = line.startsWith('@@') || line.startsWith('---') || line.startsWith('+++')
+              const { isAddition, isRemoval: isDeletion, isHeader } = classifyDiffLine(line)
 
               return (
                 <div

package/src/components/shared/UnifiedDiff.tsx

@@ -0,0 +1,51 @@
+import { clsx } from 'clsx'
+
+// Shared unified-diff rendering primitives. Every diff surface (Helm manifest
+// diff, Helm values preview, revision history, Argo resource diff) classifies
+// lines by the same leading marker; keeping that logic here stops the four
+// renderers from silently drifting apart.
+
+// classifyDiffLine tags a unified-diff line as an addition, a removal, or a hunk/
+// file header. `+++`/`---` file headers are NOT additions/removals.
+export function classifyDiffLine(line: string): {
+  isAddition: boolean
+  isRemoval: boolean
+  isHeader: boolean
+} {
+  return {
+    isAddition: line.startsWith('+') && !line.startsWith('+++'),
+    isRemoval: line.startsWith('-') && !line.startsWith('---'),
+    isHeader: line.startsWith('@@') || line.startsWith('---') || line.startsWith('+++'),
+  }
+}
+
+// hasDiffBodyChange is true when a unified-diff string has any added/removed body
+// line (ignoring the patch's own file/hunk headers) — the "any real change?"
+// short-circuit shared by the manifest and Argo diff surfaces.
+export function hasDiffBodyChange(diff: string): boolean {
+  return diff.split('\n').some((line) => {
+    const { isAddition, isRemoval } = classifyDiffLine(line)
+    return isAddition || isRemoval
+  })
+}
+
+// DiffLine renders one unified-diff line colored by marker — the gutter-less
+// "manifest" style shared by the Helm manifest diff and the Argo resource diff.
+// (The line-numbered gutter variants build their own row but share
+// classifyDiffLine.)
+export function DiffLine({ line }: { line: string }) {
+  const { isAddition, isRemoval, isHeader } = classifyDiffLine(line)
+  return (
+    <div
+      className={clsx(
+        'whitespace-pre',
+        isAddition && 'bg-green-500/10 text-green-700 dark:text-green-400',
+        isRemoval && 'bg-red-500/10 text-red-700 dark:text-red-400',
+        isHeader && 'text-theme-text-tertiary font-bold',
+        !isAddition && !isRemoval && !isHeader && 'text-theme-text-secondary'
+      )}
+    >
+      {line || ' '}
+    </div>
+  )
+}

package/src/components/shared/index.ts

@@ -4,3 +4,4 @@ export { ResourceActionsBar, RevisionHistoryDialog } from './ResourceActionsBar'
 export { CreateResourceDialog, type CreateResourceDialogProps, type ApplyResult } from './CreateResourceDialog'
 export { HelmManagedByChip, ManagedByChip, type HelmOwnerRef } from './ManagedByChip'
 export { DetailShell, type DetailShellProps, type DetailShellTab } from './DetailShell'
+export { classifyDiffLine, hasDiffBodyChange, DiffLine } from './UnifiedDiff'

package/src/components/timeline/TimelineList.tsx

@@ -98,6 +98,10 @@ export interface TimelineListProps {
   // returned set reaches it, the list surfaces an end-of-list note so the drop of
   // older events isn't silent. Omit when the source isn't capped (e.g. compact).
   truncatedAt?: number
+  // Hosts that filter a capped source after fetching must report truncation
+  // explicitly because the visible row count no longer reflects the source cap.
+  isTruncated?: boolean
+  truncationMessage?: string
 }
 
 const TIME_RANGES: { value: TimeRange; label: string }[] = [
@@ -109,7 +113,7 @@ const TIME_RANGES: { value: TimeRange; label: string }[] = [
   { value: 'all', label: 'All' },
 ]
 
-export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasLimitedAccess, namespaces, onViewChange, currentView = 'list', onResourceClick, initialFilter, initialTimeRange, rangeOptions = TIME_RANGES, hideRangeSelector = false, showDeleted: showDeletedProp, onShowDeletedChange, search: searchProp, onSearchChange, activityFilter: activityFilterProp, onActivityFilterChange, kindFilter: kindFilterProp, onKindFilterChange, onVisibleWindowChange, scrollToMs, compact = false, selectedEventId, onSelectEvent, truncatedAt }: TimelineListProps) {
+export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasLimitedAccess, namespaces, onViewChange, currentView = 'list', onResourceClick, initialFilter, initialTimeRange, rangeOptions = TIME_RANGES, hideRangeSelector = false, showDeleted: showDeletedProp, onShowDeletedChange, search: searchProp, onSearchChange, activityFilter: activityFilterProp, onActivityFilterChange, kindFilter: kindFilterProp, onKindFilterChange, onVisibleWindowChange, scrollToMs, compact = false, selectedEventId, onSelectEvent, truncatedAt, isTruncated, truncationMessage }: TimelineListProps) {
   const [searchInternal, setSearchInternal] = useState('')
   const searchTerm = searchProp ?? searchInternal
   const setSearchTerm = onSearchChange ?? setSearchInternal
@@ -510,10 +514,10 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
                 </div>
               </div>
             ))}
-            {truncatedAt != null && events.length >= truncatedAt && (
+            {truncatedAt != null && (isTruncated ?? events.length >= truncatedAt) && (
               <div className="flex items-center justify-center gap-2 py-4 text-sm text-theme-text-tertiary">
                 <Clock className="h-4 w-4 opacity-50" />
-                <span>Showing the newest {truncatedAt.toLocaleString()} events in this range — narrow the query to see older ones</span>
+                <span>{truncationMessage ?? `Showing the newest ${truncatedAt.toLocaleString()} events in this range — narrow the query to see older ones`}</span>
               </div>
             )}
           </div>

package/src/components/timeline/TimelineToolbarState.test.tsx

@@ -35,6 +35,30 @@ describe('TimelineList controlled vs fallback', () => {
     expect(html).toContain('K8s Events')
     expect(html).toContain('Problems')
   })
+
+  it('shows an explicit truncation message after host-side filtering', () => {
+    const html = renderToString(
+      <TimelineList
+        events={EVENTS}
+        isLoading={false}
+        truncatedAt={10_000}
+        isTruncated
+        truncationMessage="Only the newest source window was searched."
+      />,
+    )
+    expect(html).toContain('Only the newest source window was searched.')
+  })
+
+  it('does not infer truncation when the host explicitly reports a complete source', () => {
+    const events = Array.from({ length: 2 }, (_, index) => ({
+      ...EVENTS[0],
+      id: String(index),
+    }))
+    const html = renderToString(
+      <TimelineList events={events} isLoading={false} truncatedAt={2} isTruncated={false} />,
+    )
+    expect(html).not.toContain('Showing the newest 2 events')
+  })
 })
 
 describe('TimelineSwimlanes controlled vs fallback', () => {

package/src/components/topology/TopologyBreadcrumb.tsx

@@ -0,0 +1,30 @@
+interface TopologyBreadcrumbProps {
+  /** The single active namespace to show. */
+  namespace: string
+  /** When set, renders a clickable "All Namespaces" crumb that clears the filter. */
+  onClear?: () => void
+}
+
+/**
+ * Namespace-context crumb for the topology overlay bar, shown when the graph is
+ * scoped to a single namespace. Place it in the host's overlay-bar composition
+ * (e.g. above the search) so it reads as page context.
+ */
+export function TopologyBreadcrumb({ namespace, onClear }: TopologyBreadcrumbProps) {
+  return (
+    <div className="flex items-center gap-1.5 pointer-events-auto">
+      {onClear && (
+        <button
+          onClick={onClear}
+          className="text-xs text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
+        >
+          All Namespaces
+        </button>
+      )}
+      {onClear && <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">
+        {namespace}
+      </span>
+    </div>
+  )
+}

package/src/components/topology/TopologyControls.tsx

@@ -80,7 +80,9 @@ export function TopologyControls({
   }
 
   return (
-    <div className="absolute top-4 right-4 z-10 flex items-center gap-2">
+    // Layout-neutral (positioned by the host's overlay bar): `relative` anchors
+    // its own dropdowns; `pointer-events-auto` inside the pointer-events-none bar.
+    <div className="relative flex items-center gap-2 pointer-events-auto">
       {/* Freshness/liveness status — backed for legibility over the canvas but
           borderless + divided off, so it reads as a status, not another control. */}
       {leadingSlot && (