@skyhook-io/k8s-ui 1.8.12 → 1.8.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.8.12",
+  "version": "1.8.13",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/resources/ResourcesView.tsx

@@ -33,7 +33,7 @@ import { ResourceBar } from '../ui/ResourceBar'
 import type { SelectedResource, APIResource } from '../../types'
 import { isForbiddenError } from '../../types/fetch-error'
 import type { NavigateToResource } from '../../utils/navigation'
-import { categorizeResources, CORE_RESOURCES } from '../../utils/api-resources'
+import { categorizeResources, CORE_RESOURCES, findAPIResourceForRoute } from '../../utils/api-resources'
 import {
   getPodStatus,
   getPodRestarts,
@@ -129,6 +129,7 @@ import {
   getCellFilterValue,
   parseColumnFilters,
   serializeColumnFilters,
+  parseColumnFilterExcludes,
   podMatchesProblemCategory,
   SEVERITY_DOT_COLOR,
 } from './resource-utils'
@@ -2036,13 +2037,9 @@ function getInitialKindFromURL(
   }
   const group = new URLSearchParams(search).get('apiGroup') || ''
   if (kind) {
-    // Find matching resource from CORE_RESOURCES or use as-is
-    // Only match core resources when no apiGroup is specified (avoids collisions like KNative Service)
-    if (!group) {
-      const coreMatch = CORE_RESOURCES.find(r => r.kind === kind || r.name === kind)
-      if (coreMatch) {
-        return { name: coreMatch.name, kind: coreMatch.kind, group: coreMatch.group }
-      }
+    const coreMatch = findAPIResourceForRoute(undefined, kind, group)
+    if (coreMatch) {
+      return { name: coreMatch.name, kind: coreMatch.kind, group: coreMatch.group }
     }
     return { name: kind, kind: kind, group }
   }
@@ -2100,11 +2097,14 @@ export function deriveSidebarResourceCounts(
 function getInitialFiltersFromURL() {
   const params = new URLSearchParams(window.location.search)
   // Parse generic column filters
-  const columnFilters = parseColumnFilters(params.get('filters'))
+  const filtersParam = params.get('filters')
+  const columnFilters = parseColumnFilters(filtersParam)
+  const columnFilterExcludes = parseColumnFilterExcludes(filtersParam)
   const result = {
     search: params.get('search') || '',
     regex: params.get('regex') === 'true',
     columnFilters,
+    columnFilterExcludes,
     problemFilters: params.get('problems')?.split(',').filter(Boolean) || [],
     showInactive: params.get('showInactive') === 'true',
     labelSelector: params.get('labels') || '', // e.g., "app=caretta,version=v1"
@@ -2188,6 +2188,7 @@ export function ResourcesView({
   const [sortDirection, setSortDirection] = useState<SortDirection>(null)
   // Filter state
   const [columnFilters, setColumnFilters] = useState<Record<string, string[]>>(initialFilters.columnFilters)
+  const [columnFilterExcludes, setColumnFilterExcludes] = useState<Record<string, boolean>>(initialFilters.columnFilterExcludes)
   const [problemFilters, setProblemFilters] = useState<string[]>(initialFilters.problemFilters)
   const [openColumnFilter, setOpenColumnFilter] = useState<string | null>(null)
   const [columnFilterSearch, setColumnFilterSearch] = useState('')
@@ -2237,6 +2238,25 @@ export function ResourcesView({
       delete next[key]
       return next
     })
+    setColumnFilterExcludes(prev => {
+      if (!prev[key]) return prev
+      const next = { ...prev }
+      delete next[key]
+      return next
+    })
+  }, [])
+
+  const setColumnFilterMode = useCallback((key: string, exclude: boolean) => {
+    setColumnFilterExcludes(prev => {
+      if (Boolean(prev[key]) === exclude) return prev
+      const next = { ...prev }
+      if (exclude) {
+        next[key] = true
+      } else {
+        delete next[key]
+      }
+      return next
+    })
   }, [])
 
   const toggleColumnFilterValue = useCallback((key: string, value: string) => {
@@ -2248,6 +2268,14 @@ export function ResourcesView({
         const updated = current.filter(v => v !== value)
         if (updated.length === 0) {
           delete next[key]
+          // The operator is meaningless with no selected values — drop it so a
+          // stale exclude flag doesn't linger in state or re-arm on reselect.
+          setColumnFilterExcludes(inv => {
+            if (!inv[key]) return inv
+            const nextInv = { ...inv }
+            delete nextInv[key]
+            return nextInv
+          })
         } else {
           next[key] = updated
         }
@@ -2550,6 +2578,12 @@ export function ResourcesView({
       delete next[key]
       return next
     })
+    setColumnFilterExcludes(prev => {
+      if (!(key in prev)) return prev
+      const next = { ...prev }
+      delete next[key]
+      return next
+    })
     if (sortColumn === key) {
       setSortColumn(null)
       setSortDirection(null)
@@ -2944,6 +2978,12 @@ export function ResourcesView({
       setColumnFilters(newFilters.columnFilters)
     }
 
+    // Update column filter operators (include/exclude) if changed
+    const excludeKeys = (m: Record<string, boolean>) => Object.keys(m).filter(k => m[k]).sort().join(',')
+    if (excludeKeys(newFilters.columnFilterExcludes) !== excludeKeys(columnFilterExcludes)) {
+      setColumnFilterExcludes(newFilters.columnFilterExcludes)
+    }
+
     // Reset the flag after a tick to allow normal URL updates
     requestAnimationFrame(() => {
       isSyncingFromURL.current = false
@@ -2969,6 +3009,7 @@ export function ResourcesView({
     search: string,
     regex: boolean,
     colFilters: Record<string, string[]>,
+    colExcludes: Record<string, boolean>,
     problems: string[],
     showInactive: boolean,
     resourceNs?: string,
@@ -2995,8 +3036,13 @@ export function ResourcesView({
     } else {
       params.delete('regex')
     }
-    // Write column filters as `filters` param; remove legacy `status` param
-    const filtersStr = serializeColumnFilters(colFilters)
+    // Write column filters as `filters` param; the exclude operator is folded
+    // into each column entry, so it can never drift from the values it negates.
+    // Guard against a stale exclude flag on a column with no active values.
+    const activeExcludes = Object.fromEntries(
+      Object.entries(colExcludes).filter(([k, on]) => on && (colFilters[k]?.length ?? 0) > 0)
+    )
+    const filtersStr = serializeColumnFilters(colFilters, activeExcludes)
     if (filtersStr) {
       params.set('filters', filtersStr)
     } else {
@@ -3058,6 +3104,7 @@ export function ResourcesView({
     setSearchTerm('')
     setRegexMode(false)
     setColumnFilters({})
+    setColumnFilterExcludes({})
     setProblemFilters([])
     setLabelSelector('')
     setOwnerKind('')
@@ -3124,8 +3171,8 @@ export function ResourcesView({
     shouldPushHistory.current = false
     prevSelectedResourceRef.current = current
 
-    updateURL(selectedKind, searchTerm, regexMode, columnFilters, problemFilters, showInactiveReplicaSets, selectedResource?.namespace, selectedResource?.name, pushHistory)
-  }, [selectedKind, searchTerm, regexMode, columnFilters, problemFilters, showInactiveReplicaSets, selectedResource, updateURL, basePath, locationPathname])
+    updateURL(selectedKind, searchTerm, regexMode, columnFilters, columnFilterExcludes, problemFilters, showInactiveReplicaSets, selectedResource?.namespace, selectedResource?.name, pushHistory)
+  }, [selectedKind, searchTerm, regexMode, columnFilters, columnFilterExcludes, problemFilters, showInactiveReplicaSets, selectedResource, updateURL, basePath, locationPathname])
 
   // Handle resource click from URL on mount
   useEffect(() => {
@@ -3425,6 +3472,7 @@ export function ResourcesView({
     setOpenColumnFilter(null)
     if (!isSyncingFromURL.current) {
       setColumnFilters({})
+      setColumnFilterExcludes({})
     }
     setProblemFilters([])
   }, [selectedKind.name])
@@ -3598,7 +3646,8 @@ export function ResourcesView({
         activeColFilters.every(([col, vals]) => {
           const extra = extraColumnsByKey.get(col)
           const cellVal = extra?.getFilterValue ? extra.getFilterValue(r) : getCellFilterValue(r, col, kindLower)
-          return vals.includes(cellVal)
+          const match = vals.includes(cellVal)
+          return columnFilterExcludes[col] ? !match : match
         })
       )
     }
@@ -3741,7 +3790,7 @@ export function ResourcesView({
     }
 
     return result
-  }, [resources, searchTerm, regexMode, searchRegex, columnFilters, problemFilters, showInactiveReplicaSets, labelSelector, ownerKind, ownerName, selectedKind.name, sortColumn, sortDirection, getSortValue, extraColumnsByKey, podMatchesProblemFilter])
+  }, [resources, searchTerm, regexMode, searchRegex, columnFilters, columnFilterExcludes, problemFilters, showInactiveReplicaSets, labelSelector, ownerKind, ownerName, selectedKind.name, sortColumn, sortDirection, getSortValue, extraColumnsByKey, podMatchesProblemFilter])
 
   // For nodes table: compute the majority minor version so outliers can be highlighted
   const majorityNodeMinorVersion = useMemo(() => {
@@ -4693,7 +4742,7 @@ export function ResourcesView({
                         className="flex items-center gap-1 px-2 py-1 text-xs selection selection-text rounded-md hover:selection-strong transition-colors"
                       >
                         <ListFilter className="w-3 h-3" />
-                        <span>{key}: {vals.join(', ')}</span>
+                        <span>{key}: {columnFilterExcludes[key] ? 'not ' : ''}{vals.join(', ')}</span>
                         <X className="w-3 h-3" />
                       </button>
                     ))}
@@ -4831,7 +4880,14 @@ export function ResourcesView({
                                 )}
                               >
                                 <ListFilter className="w-3 h-3" />
-                                {hasActiveFilter && <span className="text-[10px] leading-none font-semibold">{activeFilterValues.length}</span>}
+                                {hasActiveFilter && (
+                                  <span
+                                    className="text-[10px] leading-none font-semibold"
+                                    aria-label={`${activeFilterValues.length} ${columnFilterExcludes[col.key] ? 'excluded' : 'included'} value${activeFilterValues.length === 1 ? '' : 's'}`}
+                                  >
+                                    {columnFilterExcludes[col.key] ? `≠ ${activeFilterValues.length}` : activeFilterValues.length}
+                                  </span>
+                                )}
                               </button>
                               {hasActiveFilter && (
                                 <button
@@ -4865,6 +4921,34 @@ export function ResourcesView({
                               )}
                               onClick={(e) => e.stopPropagation()}
                             >
+                              <div className="flex items-center gap-1 p-1.5 border-b border-theme-border" role="group" aria-label={`${col.label} filter mode`}>
+                                <button
+                                  onClick={() => setColumnFilterMode(col.key, false)}
+                                  aria-pressed={!columnFilterExcludes[col.key]}
+                                  className={clsx(
+                                    'flex-1 px-2 py-1 text-xs rounded transition-colors',
+                                    !columnFilterExcludes[col.key]
+                                      ? 'selection-strong selection-text'
+                                      : 'text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary'
+                                  )}
+                                  title="Show rows matching the selected values"
+                                >
+                                  Include
+                                </button>
+                                <button
+                                  onClick={() => setColumnFilterMode(col.key, true)}
+                                  aria-pressed={Boolean(columnFilterExcludes[col.key])}
+                                  className={clsx(
+                                    'flex-1 px-2 py-1 text-xs rounded transition-colors',
+                                    columnFilterExcludes[col.key]
+                                      ? 'selection-strong selection-text'
+                                      : 'text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary'
+                                  )}
+                                  title="Show rows that do NOT match the selected values"
+                                >
+                                  Exclude
+                                </button>
+                              </div>
                               {values.length > 5 ? (
                                 <div className="flex items-center gap-2 p-2 border-b border-theme-border">
                                   <div className="relative flex-1">
@@ -5922,11 +6006,17 @@ function PodCell({ resource, column }: { resource: any; column: string }) {
           <button
             onClick={(e) => {
               e.stopPropagation()
-              // Merge node filter into existing column filters via URL
+              // Merge node filter into existing column filters via URL,
+              // preserving any exclude operators already set on other columns.
               const params = new URLSearchParams(window.location.search)
               const existing = parseColumnFilters(params.get('filters'))
+              const existingExcludes = parseColumnFilterExcludes(params.get('filters'))
               existing['node'] = [nodeVal]
-              params.set('filters', serializeColumnFilters(existing))
+              // Clicking a node means "show pods on this node", so force the
+              // node column back to include mode even if it was previously
+              // set to exclude — otherwise the shortcut would hide those pods.
+              delete existingExcludes['node']
+              params.set('filters', serializeColumnFilters(existing, existingExcludes))
               navigate?.(`/resources/pods?${params.toString()}`)
             }}
             className="text-sm text-blue-400 hover:text-blue-300 hover:underline truncate block text-left"

package/src/components/resources/column-filter-serialization.test.ts

@@ -1,5 +1,9 @@
 import { describe, it, expect } from 'vitest'
-import { parseColumnFilters, serializeColumnFilters } from './resource-utils'
+import {
+  parseColumnFilters,
+  serializeColumnFilters,
+  parseColumnFilterExcludes,
+} from './resource-utils'
 
 describe('column filter serialization round-trip', () => {
   it('round-trips built-in keys', () => {
@@ -23,4 +27,78 @@ describe('column filter serialization round-trip', () => {
   it('parses legacy unencoded built-in keys', () => {
     expect(parseColumnFilters('status:Running')).toEqual({ status: ['Running'] })
   })
+
+  it('treats a two-part filter as implicit include (no excludes)', () => {
+    expect(parseColumnFilterExcludes('status:Running')).toEqual({})
+  })
+})
+
+describe('column filter include/exclude operator', () => {
+  it('serializes excluded columns with the explicit exclude operator', () => {
+    const filters = { status: ['Running', 'Completed'], namespace: ['default'] }
+    const excludes = { status: true }
+    expect(serializeColumnFilters(filters, excludes)).toBe(
+      'status:exclude:Running,Completed|namespace:default'
+    )
+  })
+
+  it('round-trips values through an excluded column', () => {
+    const filters = { status: ['Running', 'Completed'] }
+    const serialized = serializeColumnFilters(filters, { status: true })
+    expect(parseColumnFilters(serialized)).toEqual(filters)
+    expect(parseColumnFilterExcludes(serialized)).toEqual({ status: true })
+  })
+
+  it('parses the explicit include operator as non-excluded', () => {
+    expect(parseColumnFilters('namespace:include:default')).toEqual({ namespace: ['default'] })
+    expect(parseColumnFilterExcludes('namespace:include:default')).toEqual({})
+  })
+
+  it('keeps a value literally named "exclude" in the two-part form', () => {
+    expect(parseColumnFilters('reason:exclude')).toEqual({ reason: ['exclude'] })
+    expect(parseColumnFilterExcludes('reason:exclude')).toEqual({})
+  })
+
+  it('handles a value literally named "exclude" under the exclude operator', () => {
+    const serialized = serializeColumnFilters({ reason: ['exclude'] }, { reason: true })
+    expect(serialized).toBe('reason:exclude:exclude')
+    expect(parseColumnFilters(serialized)).toEqual({ reason: ['exclude'] })
+    expect(parseColumnFilterExcludes(serialized)).toEqual({ reason: true })
+  })
+
+  it('does not emit an operator for an excluded column with no values', () => {
+    expect(serializeColumnFilters({ status: [] }, { status: true })).toBe('')
+    expect(parseColumnFilterExcludes('')).toEqual({})
+  })
+
+  it('preserves the exclude operator for custom-column keys', () => {
+    const filters = { 'label:tier': ['control-plane'] }
+    const serialized = serializeColumnFilters(filters, { 'label:tier': true })
+    expect(serialized).toBe('label%3Atier:exclude:control-plane')
+    expect(parseColumnFilters(serialized)).toEqual(filters)
+    expect(parseColumnFilterExcludes(serialized)).toEqual({ 'label:tier': true })
+  })
+
+  it('returns empty structures for empty/absent params', () => {
+    expect(parseColumnFilters('')).toEqual({})
+    expect(parseColumnFilters(null)).toEqual({})
+    expect(parseColumnFilterExcludes(null)).toEqual({})
+    expect(serializeColumnFilters({})).toBe('')
+  })
+
+  it('ignores prototype-polluting keys from a crafted param', () => {
+    const parsed = parseColumnFilters('__proto__:Running|constructor:x|status:Running')
+    expect(parsed).toEqual({ status: ['Running'] })
+    expect(Object.prototype.hasOwnProperty.call(parsed, '__proto__')).toBe(false)
+    expect(({} as Record<string, unknown>).polluted).toBeUndefined()
+    expect(parseColumnFilterExcludes('__proto__:exclude:Running')).toEqual({})
+  })
+
+  it('lets the last segment win the mode when a column repeats', () => {
+    expect(parseColumnFilters('status:exclude:Running|status:Completed')).toEqual({ status: ['Completed'] })
+    expect(parseColumnFilterExcludes('status:exclude:Running|status:Completed')).toEqual({})
+
+    expect(parseColumnFilters('status:Running|status:exclude:Completed')).toEqual({ status: ['Completed'] })
+    expect(parseColumnFilterExcludes('status:Running|status:exclude:Completed')).toEqual({ status: true })
+  })
 })

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,
@@ -848,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
@@ -908,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">
@@ -924,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…
@@ -954,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>
@@ -975,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)}

package/src/components/ui/Tooltip.test.tsx

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { Tooltip } from './Tooltip'
+
+function render(preserveWrapperWhenDisabled = false) {
+  return renderToString(
+    <Tooltip content="Full value" disabled preserveWrapperWhenDisabled={preserveWrapperWhenDisabled}>
+      <span>Visible value</span>
+    </Tooltip>,
+  )
+}
+
+describe('Tooltip', () => {
+  it('omits its wrapper when disabled by default', () => {
+    expect(render()).not.toContain('inline-flex max-w-full')
+  })
+
+  it('can preserve its wrapper while disabled for layout-sensitive children', () => {
+    expect(render(true)).toContain('inline-flex max-w-full')
+  })
+})

package/src/components/ui/Tooltip.tsx

@@ -29,6 +29,8 @@ interface TooltipProps {
   className?: string
   /** Whether tooltip is disabled */
   disabled?: boolean
+  /** Keep the wrapper mounted while disabled when child layout measurement requires stable DOM ancestry. */
+  preserveWrapperWhenDisabled?: boolean
   /** Additional class for the wrapper span (useful for positioning) */
   wrapperClassName?: string
   /** Inline styles for the wrapper span (useful for absolute positioning) */
@@ -42,6 +44,7 @@ export function Tooltip({
   position = 'top',
   className,
   disabled = false,
+  preserveWrapperWhenDisabled = false,
   wrapperClassName,
   wrapperStyle,
 }: TooltipProps) {
@@ -99,6 +102,9 @@ export function Tooltip({
       clearTimeout(hideTimeoutRef.current)
       hideTimeoutRef.current = null
     }
+    if (activeHide === hideRef.current) {
+      activeHide = null
+    }
     setIsVisible(false)
     setCoords(null)
   }
@@ -194,16 +200,7 @@ export function Tooltip({
   // pointer-events-none and never fires mouseleave.
   useEffect(() => {
     if (disabled) {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current)
-        timeoutRef.current = null
-      }
-      if (hideTimeoutRef.current) {
-        clearTimeout(hideTimeoutRef.current)
-        hideTimeoutRef.current = null
-      }
-      setIsVisible(false)
-      setCoords(null)
+      hideRef.current()
     }
   }, [disabled])
 
@@ -224,7 +221,7 @@ export function Tooltip({
     }
   }, [isVisible])
 
-  if (disabled || !content) {
+  if ((disabled && !preserveWrapperWhenDisabled) || !content) {
     return <>{children}</>
   }
 
@@ -245,7 +242,7 @@ export function Tooltip({
       >
         {children}
       </span>
-      {isVisible &&
+      {isVisible && !disabled &&
         createPortal(
           <span
             ref={tooltipRef}

package/src/utils/api-resources.test.ts

@@ -1,5 +1,40 @@
 import { describe, expect, it } from 'vitest'
-import { categorizeResources, formatGroupName, shortenGroupName } from './api-resources'
+import { categorizeResources, findAPIResourceForRoute, formatGroupName, shortenGroupName } from './api-resources'
+
+describe('findAPIResourceForRoute', () => {
+  const resources = [
+    { group: 'metrics.k8s.io', version: 'v1beta1', kind: 'PodMetrics', name: 'pods', namespaced: true, isCrd: false, verbs: ['get'] },
+  ]
+
+  it('prefers the canonical core resource when a discovered API has the same plural name', () => {
+    expect(findAPIResourceForRoute(resources, 'pods')?.kind).toBe('Pod')
+  })
+
+  it('respects an explicit API group for a colliding resource', () => {
+    expect(findAPIResourceForRoute(resources, 'pods', 'metrics.k8s.io')?.kind).toBe('PodMetrics')
+  })
+
+  it('resolves a discovered resource without a core collision', () => {
+    const crd = { group: 'example.io', version: 'v1', kind: 'Widget', name: 'widgets', namespaced: true, isCrd: true, verbs: ['list'] }
+    expect(findAPIResourceForRoute([crd], 'widgets')).toBe(crd)
+  })
+
+  it('resolves core resources before discovery loads', () => {
+    expect(findAPIResourceForRoute(undefined, 'pods')?.kind).toBe('Pod')
+  })
+
+  it('falls back to an exact built-in API group before discovery loads', () => {
+    expect(findAPIResourceForRoute(undefined, 'storageclasses', 'storage.k8s.io')).toMatchObject({
+      kind: 'StorageClass',
+      namespaced: false,
+    })
+  })
+
+  it('supports the legacy Kind route form without weakening group matching', () => {
+    expect(findAPIResourceForRoute(undefined, 'Pod')?.name).toBe('pods')
+    expect(findAPIResourceForRoute(undefined, 'Pod', 'metrics.k8s.io')).toBeUndefined()
+  })
+})
 
 describe('formatGroupName', () => {
   it('uses friendly names for common CRD groups seen in clusters', () => {

package/src/utils/api-resources.ts

@@ -47,9 +47,25 @@ export const CORE_RESOURCES: APIResource[] = [
   { group: 'scheduling.k8s.io', version: 'v1', kind: 'PriorityClass', name: 'priorityclasses', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
   { group: 'node.k8s.io', version: 'v1', kind: 'RuntimeClass', name: 'runtimeclasses', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
   { group: 'coordination.k8s.io', version: 'v1', kind: 'Lease', name: 'leases', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'storage.k8s.io', version: 'v1', kind: 'StorageClass', name: 'storageclasses', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
   { group: 'storage.k8s.io', version: 'v1', kind: 'VolumeAttachment', name: 'volumeattachments', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
 ]
 
+export function findAPIResourceForRoute(
+  resources: APIResource[] | undefined,
+  routeSlug: string,
+  group = '',
+): APIResource | undefined {
+  const matchesRoute = (resource: APIResource) =>
+    resource.name === routeSlug || resource.kind === routeSlug
+  if (group) {
+    return resources?.find(r => matchesRoute(r) && r.group === group)
+      ?? CORE_RESOURCES.find(r => matchesRoute(r) && r.group === group)
+  }
+  return CORE_RESOURCES.find(matchesRoute)
+    ?? resources?.find(matchesRoute)
+}
+
 // Resources that should be hidden from the sidebar
 const HIDDEN_KINDS = ['PodMetrics', 'NodeMetrics']