@@ -0,0 +1,78 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { ActiveFilterBar, type ActiveFilterBarProps } from './ActiveFilterBar'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+let root: Root | null = null
+let element: HTMLDivElement
+
+async function render(overrides: Partial<ActiveFilterBarProps> = {}) {
+  const props: ActiveFilterBarProps = {
+    columnFilters: {},
+    columnFilterExcludes: {},
+    problemFilters: [],
+    labelSelector: '',
+    onClearColumn: vi.fn(),
+    onClearProblems: vi.fn(),
+    onClearLabels: vi.fn(),
+    ...overrides,
+  }
+  element = document.createElement('div')
+  root = createRoot(element)
+  await act(async () => root!.render(<ActiveFilterBar {...props} />))
+  return props
+}
+
+function buttonWithText(text: string): HTMLButtonElement {
+  const button = [...element.querySelectorAll('button')].find((b) => b.textContent?.includes(text))
+  if (!button) throw new Error(`no button containing "${text}"`)
+  return button
+}
+
+afterEach(async () => {
+  await act(async () => root?.unmount())
+  root = null
+})
+
+describe('ActiveFilterBar', () => {
+  it('renders nothing without active filters or a restore', async () => {
+    await render({ columnFilters: { status: [] } })
+    expect(element.innerHTML).toBe('')
+  })
+
+  it('renders one chip per active filter, marking excluded columns', async () => {
+    await render({
+      columnFilters: { status: ['Running', 'Pending'], node: ['n1'], empty: [] },
+      columnFilterExcludes: { node: true },
+      problemFilters: ['crashloop'],
+      labelSelector: 'app=nginx',
+    })
+    expect(element.querySelectorAll('button')).toHaveLength(4)
+    expect(element.textContent).toContain('status: Running, Pending')
+    expect(element.textContent).toContain('node: not n1')
+    expect(element.textContent).toContain('Problems: crashloop')
+    expect(element.textContent).toContain('app=nginx')
+    expect(element.textContent).not.toContain('restored')
+  })
+
+  it('calls the matching clear handler when a chip is clicked', async () => {
+    const props = await render({ columnFilters: { status: ['Running'] }, problemFilters: ['oom'], labelSelector: 'tier=web' })
+    await act(async () => buttonWithText('status:').click())
+    await act(async () => buttonWithText('Problems:').click())
+    await act(async () => buttonWithText('tier=web').click())
+    expect(props.onClearColumn).toHaveBeenCalledWith('status')
+    expect(props.onClearProblems).toHaveBeenCalledOnce()
+    expect(props.onClearLabels).toHaveBeenCalledOnce()
+  })
+
+  it('shows the restored line only when restored, with Clear calling onClearAll', async () => {
+    const onClearAll = vi.fn()
+    await render({ restored: true, onClearAll, columnFilters: { status: ['Running'] } })
+    expect(element.textContent).toContain('Filters restored from your last visit')
+    await act(async () => buttonWithText('Clear').click())
+    expect(onClearAll).toHaveBeenCalledOnce()
+  })
+})
@@ -0,0 +1,86 @@
+import { clsx } from 'clsx'
+import { AlertTriangle, History, ListFilter, Tag, X } from 'lucide-react'
+
+export interface ActiveFilterBarProps {
+  columnFilters: Record<string, string[]>
+  columnFilterExcludes: Record<string, boolean>
+  problemFilters: string[]
+  labelSelector: string
+  onClearColumn: (key: string) => void
+  onClearProblems: () => void
+  onClearLabels: () => void
+  restored?: boolean
+  onClearAll?: () => void
+  className?: string
+}
+
+export function ActiveFilterBar({
+  columnFilters,
+  columnFilterExcludes,
+  problemFilters,
+  labelSelector,
+  onClearColumn,
+  onClearProblems,
+  onClearLabels,
+  restored = false,
+  onClearAll,
+  className,
+}: ActiveFilterBarProps) {
+  const activeColEntries = Object.entries(columnFilters).filter(([, vals]) => vals.length > 0)
+  const hasChips = activeColEntries.length > 0 || problemFilters.length > 0 || !!labelSelector
+  if (!hasChips && !restored) return null
+
+  return (
+    <div className={clsx('flex flex-wrap items-center gap-1.5', className)}>
+      {restored && (
+        <span className="flex items-center gap-1 text-xs text-theme-text-tertiary">
+          <History className="w-3 h-3" />
+          <span>Filters restored from your last visit.</span>
+          {onClearAll && (
+            <button
+              type="button"
+              onClick={onClearAll}
+              className="text-theme-text-secondary hover:text-theme-text-primary underline underline-offset-2"
+            >
+              Clear
+            </button>
+          )}
+        </span>
+      )}
+      {activeColEntries.map(([key, vals]) => (
+        <button
+          type="button"
+          key={key}
+          onClick={() => onClearColumn(key)}
+          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}: {columnFilterExcludes[key] ? 'not ' : ''}{vals.join(', ')}</span>
+          <X className="w-3 h-3" />
+        </button>
+      ))}
+      {problemFilters.length > 0 && (
+        <button
+          type="button"
+          onClick={onClearProblems}
+          className="flex items-center gap-1 px-2 py-1 text-xs bg-red-500/15 text-red-700 dark:text-red-300 rounded-md hover:bg-red-500/25 transition-colors"
+        >
+          <AlertTriangle className="w-3 h-3" />
+          <span>Problems: {problemFilters.join(', ')}</span>
+          <X className="w-3 h-3" />
+        </button>
+      )}
+      {labelSelector && (
+        <button
+          type="button"
+          onClick={onClearLabels}
+          className="flex items-center gap-1 px-2 py-1 text-xs bg-green-500/15 text-green-700 dark:text-green-300 rounded-md hover:bg-green-500/25 transition-colors"
+        >
+          <Tag className="w-3 h-3" />
+          <span>{labelSelector}</span>
+          <X className="w-3 h-3" />
+        </button>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest'
+import { hasFilterIntent } from './ResourcesView'
+import { kindFiltersFromSearch, kindFiltersToSearch, serializeColumnFilters } from './resource-utils'
+
+describe('kindFiltersFromSearch', () => {
+  it('restores column filters, their exclude operator and problem filters', () => {
+    const filters = serializeColumnFilters({ namespace: ['a', 'b'], status: ['Running'] }, { status: true })
+    const search = `?${new URLSearchParams({ filters, problems: 'failed,pending', search: 'web' })}`
+
+    expect(kindFiltersFromSearch(search)).toEqual({
+      columnFilters: { namespace: ['a', 'b'], status: ['Running'] },
+      columnFilterExcludes: { status: true },
+      problemFilters: ['failed', 'pending'],
+    })
+  })
+
+  it('starts empty for a kind with nothing remembered', () => {
+    expect(kindFiltersFromSearch(undefined)).toEqual({ columnFilters: {}, columnFilterExcludes: {}, problemFilters: [] })
+  })
+})
+
+describe('kindFiltersToSearch', () => {
+  it('round-trips through kindFiltersFromSearch and keeps only the per-kind filters', () => {
+    const filters = serializeColumnFilters({ namespace: ['a'], status: ['Running'] }, { status: true })
+    const saved = kindFiltersToSearch(kindFiltersFromSearch(`?${new URLSearchParams({ filters, problems: 'failed', search: 'web', namespaces: 'x' })}`))
+
+    expect(new URLSearchParams(saved).get('search')).toBeNull()
+    expect(kindFiltersFromSearch(saved)).toEqual({
+      columnFilters: { namespace: ['a'], status: ['Running'] },
+      columnFilterExcludes: { status: true },
+      problemFilters: ['failed'],
+    })
+  })
+
+  it('is empty when there is nothing to save, ignoring an exclude flag with no values', () => {
+    expect(kindFiltersToSearch({ columnFilters: { status: [] }, columnFilterExcludes: { status: true }, problemFilters: [] })).toBe('')
+  })
+})
+
+describe('hasFilterIntent', () => {
+  it('is false for a bare list URL, even with the namespace pick or a kind group', () => {
+    expect(hasFilterIntent('')).toBe(false)
+    expect(hasFilterIntent('?namespaces=a,b&apiGroup=serving.knative.dev&ai-run=r1')).toBe(false)
+  })
+
+  it.each(['filters=status:Running', 'problems=failed', 'search=web', 'regex=true', 'labels=app%3Dweb', 'ownerKind=DaemonSet', 'ownerName=x', 'resource=a/web', 'showInactive=true'])(
+    'is true when the URL carries %s',
+    (param) => {
+      expect(hasFilterIntent(`?namespaces=a&${param}`)).toBe(true)
+    },
+  )
+})