@skyhook-io/k8s-ui 1.8.11 → 1.8.13

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/resources/resource-utils.ts

@@ -1827,40 +1827,109 @@ export function formatResources(resources: any): string {
  * Used by the generic column filter system to match resources against filter values.
  * Reuses existing utility functions for kind-specific columns.
  */
-// Parse column filters from URL `filters` param (format: "col:val1,val2|col2:val3")
-// Uses `|` as pair separator between columns, `,` between values within a column.
-// Multi-select: each column key maps to an array of selected values.
+// Parse column filters from URL `filters` param. Each column is either
+// "col:val1,val2" (implicit include) or "col:exclude:val1,val2" (explicit
+// operator). `|` separates columns, `,` separates values within a column.
+// Keys and values are URI-encoded so their own delimiters survive; the operator,
+// when present, is the literal token "include" or "exclude".
 export function parseColumnFilters(filtersParam: string | null): Record<string, string[]> {
-  if (!filtersParam) return {}
-  const filters: Record<string, string[]> = {}
+  // Prototype-less accumulator: the keys come from the URL, so a plain object
+  // would expose Object.prototype as a write target (js/remote-property-injection).
+  const filters: Record<string, string[]> = Object.create(null)
+  if (!filtersParam) return filters
   for (const pair of filtersParam.split('|')) {
-    const colonIdx = pair.indexOf(':')
-    if (colonIdx > 0) {
-      const rawKey = pair.slice(0, colonIdx).trim()
-      const valStr = pair.slice(colonIdx + 1).trim()
-      // Keys are URI-encoded so a custom-column key's own colon (e.g.
-      // "label:tier") doesn't collide with the key:value delimiter.
-      let key: string
-      try { key = decodeURIComponent(rawKey) } catch { key = rawKey }
-      if (key && valStr) {
-        filters[key] = valStr.split(',').map(v => {
-          try { return decodeURIComponent(v.trim()) } catch { return v.trim() }
-        }).filter(Boolean)
-      }
+    const parsed = parseColumnFilterPair(pair)
+    // Guard the dynamic write: the key comes from the URL, so reject the
+    // prototype-polluting names right at the assignment (js/remote-property-injection).
+    if (parsed && parsed.key !== '__proto__' && parsed.key !== 'prototype' && parsed.key !== 'constructor') {
+      filters[parsed.key] = parsed.values
     }
   }
   return filters
 }
 
-// Serialize column filters to URL param format. Keys and values are both
-// URI-encoded so a colon inside a custom-column key (e.g. "label:tier") or a
-// comma inside a value (e.g. "Ready,SchedulingDisabled") survives the round-trip.
-export function serializeColumnFilters(filters: Record<string, string[]>): string {
-  const result = Object.entries(filters)
+// Serialize column filters to URL param format. Columns listed in `excludes`
+// emit the explicit "exclude" operator; all others keep the backwards-compatible
+// two-part shape. Keys and values are both URI-encoded so a colon inside a
+// custom-column key (e.g. "label:tier") or a comma inside a value (e.g.
+// "Ready,SchedulingDisabled") survives the round-trip.
+export function serializeColumnFilters(
+  filters: Record<string, string[]>,
+  excludes?: Record<string, boolean>,
+): string {
+  return Object.entries(filters)
     .filter(([, v]) => v.length > 0)
-    .map(([k, vals]) => `${encodeURIComponent(k)}:${vals.map(v => encodeURIComponent(v)).join(',')}`)
+    .map(([k, vals]) => {
+      const op = excludes?.[k] ? 'exclude:' : ''
+      return `${encodeURIComponent(k)}:${op}${vals.map(v => encodeURIComponent(v)).join(',')}`
+    })
     .join('|')
-  return result
+}
+
+// Which columns are in exclude mode (show non-matching rows). Read from the same
+// `filters` param so the operator can't drift out of sync with the values it
+// negates — a lone exclude operator with no values is structurally impossible.
+export function parseColumnFilterExcludes(filtersParam: string | null): Record<string, boolean> {
+  // Prototype-less accumulator: see parseColumnFilters (js/remote-property-injection).
+  const excludes: Record<string, boolean> = Object.create(null)
+  if (!filtersParam) return excludes
+  for (const pair of filtersParam.split('|')) {
+    const parsed = parseColumnFilterPair(pair)
+    // Guard the dynamic write against prototype-polluting keys from the URL
+    // right at the assignment (js/remote-property-injection).
+    if (
+      parsed && parsed.values.length &&
+      parsed.key !== '__proto__' && parsed.key !== 'prototype' && parsed.key !== 'constructor'
+    ) {
+      // Values are last-write-wins per key in parseColumnFilters, so the mode
+      // must track the same final segment: a later include overrides an
+      // earlier exclude for the same column, otherwise the two disagree.
+      if (parsed.exclude) {
+        excludes[parsed.key] = true
+      } else {
+        delete excludes[parsed.key]
+      }
+    }
+  }
+  return excludes
+}
+
+// Split a single "col[:operator]:values" pair into its decoded key, values, and
+// whether the explicit exclude operator was present. The first literal colon
+// delimits key from the rest (keys are encoded, so their own colons don't
+// count); an optional leading "include"/"exclude" token in the remainder is the
+// operator. Any other leading token is treated as a value (two-part form), so a
+// value literally named "exclude" without a following colon round-trips.
+function parseColumnFilterPair(
+  pair: string,
+): { key: string; values: string[]; exclude: boolean } | null {
+  const colonIdx = pair.indexOf(':')
+  if (colonIdx <= 0) return null
+  const rawKey = pair.slice(0, colonIdx).trim()
+  let rest = pair.slice(colonIdx + 1).trim()
+  let key: string
+  try { key = decodeURIComponent(rawKey) } catch { key = rawKey }
+  if (!key) return null
+  // Guard against prototype-pollution: the key becomes an object property name
+  // downstream, and it comes straight from the URL. Reject the well-known
+  // dangerous names so a crafted `filters` param can't touch the prototype.
+  if (key === '__proto__' || key === 'prototype' || key === 'constructor') return null
+
+  let exclude = false
+  const opIdx = rest.indexOf(':')
+  if (opIdx >= 0) {
+    const op = rest.slice(0, opIdx).trim().toLowerCase()
+    if (op === 'exclude' || op === 'include') {
+      exclude = op === 'exclude'
+      rest = rest.slice(opIdx + 1).trim()
+    }
+  }
+  if (!rest) return null
+  const values = rest.split(',').map(v => {
+    try { return decodeURIComponent(v.trim()) } catch { return v.trim() }
+  }).filter(Boolean)
+  if (!values.length) return null
+  return { key, values, exclude }
 }
 
 export function getCellFilterValue(resource: any, column: string, kind: string): string {

package/src/components/shared/ResourceActionsBar.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import {
   RefreshCw,
   Terminal,
@@ -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'
@@ -847,6 +848,35 @@ function ArgoActions({ resource, data, onSync, isSyncing, onRefresh, isRefreshin
 // REVISION HISTORY DIALOG
 // ============================================================================
 
+function RevisionImage({ image, displayImage }: { image: string; displayImage: string }) {
+  const ref = useRef<HTMLSpanElement>(null)
+  const [isTruncated, setIsTruncated] = useState(false)
+
+  useEffect(() => {
+    const element = ref.current
+    if (!element) return
+
+    const measure = () => setIsTruncated(element.scrollWidth > element.clientWidth)
+    measure()
+
+    const observer = new ResizeObserver(measure)
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [displayImage])
+
+  return (
+    <Tooltip
+      content={image}
+      delay={300}
+      disabled={!isTruncated}
+      preserveWrapperWhenDisabled
+      wrapperClassName="w-full min-w-0"
+    >
+      <span ref={ref} className="block truncate">{displayImage}</span>
+    </Tooltip>
+  )
+}
+
 export function RevisionHistoryDialog({ kind, namespace, name, open, onClose, revisions, isLoading, error, onRollback, isRollingBack }: {
   kind: string
   namespace: string
@@ -907,10 +937,7 @@ export function RevisionHistoryDialog({ kind, namespace, name, open, onClose, re
       open={open}
       onClose={handleClose}
       closable={!isRollingBack}
-      className={clsx(
-        "flex flex-col",
-        diffRevision ? "max-w-5xl w-full max-h-[85vh]" : "max-w-lg w-full"
-      )}
+      className="flex max-h-[85vh] w-[calc(100vw-2rem)] max-w-5xl flex-col"
     >
       <div className="flex items-center justify-between p-4 border-b border-theme-border shrink-0">
         <div className="flex items-center gap-2">
@@ -923,17 +950,20 @@ export function RevisionHistoryDialog({ kind, namespace, name, open, onClose, re
             </span>
           )}
         </div>
-        <button
-          onClick={handleClose}
-          disabled={isRollingBack}
-          className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded disabled:opacity-50"
-        >
-          <X className="w-5 h-5" />
-        </button>
+        <Tooltip content="Close" delay={150}>
+          <button
+            onClick={handleClose}
+            disabled={isRollingBack}
+            aria-label="Close revision history"
+            className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded disabled:opacity-50"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </Tooltip>
       </div>
 
       <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
-        <div className={clsx("p-4 overflow-y-auto", diffRevision ? "max-h-48 shrink-0" : "max-h-80")}>
+        <div className={clsx("min-h-0 overflow-x-hidden overflow-y-auto p-4", diffRevision ? "max-h-48 shrink-0" : "max-h-[65vh]")}>
           {isLoading && (
             <div className="flex items-center justify-center py-8 text-theme-text-secondary text-sm">
               Loading revisions…
@@ -953,7 +983,13 @@ export function RevisionHistoryDialog({ kind, namespace, name, open, onClose, re
           )}
 
           {revisions && revisions.length > 0 && (
-            <table className="w-full text-sm">
+            <table className="w-full table-fixed text-sm">
+              <colgroup>
+                <col className="w-16" />
+                <col />
+                <col className="w-24" />
+                <col className="w-44" />
+              </colgroup>
               <thead>
                 <tr className="text-theme-text-secondary text-left text-xs uppercase tracking-wider">
                   <th className="pb-2 pr-3 font-medium">Rev</th>
@@ -974,17 +1010,15 @@ export function RevisionHistoryDialog({ kind, namespace, name, open, onClose, re
                     <td className="py-2 pr-3 text-theme-text-primary font-mono">
                       #{rev.number}
                     </td>
-                    <td className="py-2 pr-3 text-theme-text-secondary font-mono max-w-[180px]">
-                      <Tooltip content={rev.image} delay={300} wrapperClassName="min-w-0">
-                        <span className="truncate">{getImageTag(rev.image)}</span>
-                      </Tooltip>
+                    <td className="min-w-0 py-2 pr-3 text-theme-text-secondary font-mono">
+                      <RevisionImage image={rev.image} displayImage={getImageTag(rev.image)} />
                     </td>
                     <td className="py-2 pr-3 text-theme-text-secondary whitespace-nowrap">
                       {formatTimeAgo(rev.createdAt)}
                     </td>
                     <td className="py-2 text-right">
                       <div className="flex items-center gap-1 justify-end">
-                        {!rev.isCurrent && rev.template && currentRevision?.template && (
+                        {!rev.isCurrent && confirmRevision !== rev.number && rev.template && currentRevision?.template && (
                           <Tooltip content="Compare with current revision" delay={150}>
                             <button
                               onClick={() => setDiffRevision(diffRevision === rev.number ? null : rev.number)}
@@ -1124,9 +1158,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 && (