@asteby/metacore-runtime-react 23.0.0 → 23.1.0

package/src/__tests__/dynamic-kanban.test.tsx

@@ -40,6 +40,7 @@ import {
     selectCardColumns,
     cardMatchesLaneQuery,
     cardMatchesLaneFunnel,
+    laneFunnelCount,
     translateOptionLabels,
     summarizeFilterValues,
     UNASSIGNED_LANE,
@@ -283,6 +284,18 @@ describe('cardMatchesLaneFunnel', () => {
     })
 })
 
+describe('laneFunnelCount', () => {
+    it('counts picked values, else 1 for free text, else 0', () => {
+        expect(laneFunnelCount(undefined)).toBe(0)
+        expect(laneFunnelCount({})).toBe(0)
+        expect(laneFunnelCount({ values: ['a', 'b', 'c'] })).toBe(3)
+        expect(laneFunnelCount({ text: 'foo' })).toBe(1)
+        expect(laneFunnelCount({ text: '  ' })).toBe(0)
+        // picked values win over stray text
+        expect(laneFunnelCount({ values: ['a'], text: 'x' })).toBe(1)
+    })
+})
+
 describe('translateOptionLabels', () => {
     it('runs option labels through the translator (stage i18n keys → localized)', () => {
         const opts = [
@@ -528,4 +541,31 @@ describe('DynamicKanban lane funnel', () => {
         ).toBeTruthy()
         expect(screen.queryByPlaceholderText('Contiene...')).toBeNull()
     })
+
+    it('shows a count badge on the funnel with the number of picked values', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        render(
+            <ApiProvider client={fakeApi()}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('Fix login bug')
+        fireEvent.click(screen.getAllByLabelText('Filtrar columna')[0])
+        await screen.findByPlaceholderText('Buscar valores...')
+
+        // pick two stage values from the combobox
+        const options = screen.getAllByRole('option')
+        expect(options.length).toBeGreaterThanOrEqual(2)
+        fireEvent.click(options[0])
+        fireEvent.click(options[1])
+        // apply
+        fireEvent.click(screen.getByText(/Aplicar/))
+
+        // the first lane's funnel button now carries a "2" count badge
+        await waitFor(() =>
+            expect(
+                screen.getAllByLabelText('Filtrar columna')[0].textContent,
+            ).toContain('2'),
+        )
+    })
 })

package/src/__tests__/dynamic-table-filters.test.tsx

@@ -0,0 +1,102 @@
+// @vitest-environment happy-dom
+//
+// DynamicTable filter parity with the kanban:
+//   - Facet PREFETCH: on metadata resolve, the table warms every facet field in
+//     one burst (`/data/<model>/facets?field=<key>`), so a text-column header
+//     filter opens instantly.
+//   - Stage-select: the group_by/stage column with no options of its own becomes
+//     a select (NOT a facet) — so it must NOT trigger a facets prewarm.
+//   - Long-text columns stay plain text (no facet, no prewarm).
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
+}))
+const I18N = { t: (_k: string, o?: { defaultValue?: string }) => o?.defaultValue ?? _k, i18n: { language: 'es' } }
+vi.mock('react-i18next', () => ({ useTranslation: () => I18N }))
+
+import { DynamicTable } from '../dynamic-table'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import type { TableMetadata } from '../types'
+
+afterEach(cleanup)
+
+const STAGES = [
+    { key: 'backlog', label: 'issue.stage.backlog', color: 'slate', order: 0 },
+    { key: 'done', label: 'issue.stage.done', color: 'green', order: 1 },
+]
+
+function meta(): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        group_by: 'stage',
+        stages: STAGES,
+        columns: [
+            { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: true, searchable: true },
+            { key: 'body', label: 'Body', type: 'text', sortable: false, filterable: true, cellStyle: 'truncate-text' },
+            { key: 'stage', label: 'Stage', type: 'status', sortable: false, filterable: true },
+        ],
+        actions: [],
+        perPageOptions: [50],
+        defaultPerPage: 50,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: true,
+        hasActions: false,
+    }
+}
+
+function fakeApi(): ApiClient {
+    const ok = (data: unknown) => ({ data: { success: true, data, meta: { total: 0 } } })
+    return {
+        get: vi.fn(async (url: string, cfg?: any) => {
+            if (url.startsWith('/metadata/table/')) return ok(meta())
+            if (url.endsWith('/facets')) {
+                const f = cfg?.params?.field
+                return ok([
+                    { value: `${f}-a`, label: `${f} A`, count: 2 },
+                    { value: `${f}-b`, label: `${f} B`, count: 1 },
+                ])
+            }
+            return ok([])
+        }),
+        post: vi.fn(async () => ok(null)),
+        put: vi.fn(async () => ok(null)),
+        delete: vi.fn(async () => ok(null)),
+    }
+}
+
+function facetFields(api: ApiClient): string[] {
+    return (api.get as any).mock.calls
+        .filter((c: any[]) => String(c[0]).endsWith('/facets'))
+        .map((c: any[]) => c[1]?.params?.field)
+}
+
+describe('DynamicTable facet prefetch + stage-select', () => {
+    it('prewarms the plain text column but NOT the stage (select) or long-text columns', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi()
+        render(
+            <ApiProvider client={api}>
+                <DynamicTable model="issue" />
+            </ApiProvider>,
+        )
+        // 'title' is a facet → it gets prewarmed against the model-derived endpoint
+        await waitFor(() =>
+            expect(
+                (api.get as any).mock.calls.some(
+                    (c: any[]) =>
+                        String(c[0]) === '/data/issue/facets' &&
+                        c[1]?.params?.field === 'title',
+                ),
+            ).toBe(true),
+        )
+        const fields = facetFields(api)
+        // stage → select (from the pipeline stages), never faceted
+        expect(fields).not.toContain('stage')
+        // body → long-text, stays plain text, never faceted
+        expect(fields).not.toContain('body')
+    })
+})

package/src/__tests__/filter-chips.test.tsx

@@ -0,0 +1,119 @@
+// @vitest-environment happy-dom
+//
+// FilterChipsRow — the removable active-filter chip row shared by DynamicTable
+// and DynamicKanban: one chip per active field (label + summarized value + a
+// value-color dot when the option carries a color), an X that clears that field,
+// and a trailing "Limpiar todo".
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, fireEvent } from '@testing-library/react'
+
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (_k: string, opts?: { defaultValue?: string }) => opts?.defaultValue ?? _k,
+    }),
+}))
+
+import {
+    FilterChipsRow,
+    summarizeFilterValues,
+    chipValueColor,
+    type FilterChipField,
+} from '../filter-chips'
+
+afterEach(cleanup)
+
+function field(over: Partial<FilterChipField> & { key: string }): FilterChipField {
+    return {
+        label: over.key,
+        config: {
+            selectedValues: [],
+            options: [],
+            filterKey: over.key,
+            onFilterChange: vi.fn(),
+            ...(over.config as any),
+        },
+        ...over,
+    }
+}
+
+describe('summarizeFilterValues / chipValueColor', () => {
+    const opts = [
+        { value: 'backlog', label: 'Pendiente', color: 'slate' },
+        { value: 'done', label: 'Hecho', color: 'green' },
+    ]
+    it('summarizes a single value to its (translated) option label', () => {
+        expect(summarizeFilterValues(['done'], opts)).toBe('Hecho')
+    })
+    it('resolves the option color for the chip dot', () => {
+        expect(chipValueColor({ selectedValues: ['done'], options: opts })).toBeTruthy()
+    })
+    it('has no dot for a free-text (ILIKE) value', () => {
+        expect(
+            chipValueColor({ selectedValues: ['ILIKE:foo'], options: opts }),
+        ).toBeUndefined()
+    })
+})
+
+describe('FilterChipsRow', () => {
+    const stageOptions = [
+        { value: 'backlog', label: 'Pendiente', color: 'slate' },
+        { value: 'done', label: 'Hecho', color: 'green' },
+    ]
+
+    it('renders nothing when there are no active fields', () => {
+        const { container } = render(
+            <FilterChipsRow fields={[]} onClearAll={() => {}} />,
+        )
+        expect(container.firstChild).toBeNull()
+    })
+
+    it('renders a chip per active field with its translated value summary', () => {
+        render(
+            <FilterChipsRow
+                fields={[
+                    field({
+                        key: 'stage',
+                        label: 'Etapa',
+                        config: {
+                            selectedValues: ['done'],
+                            options: stageOptions,
+                            filterKey: 'stage',
+                            onFilterChange: vi.fn(),
+                        },
+                    }),
+                ]}
+                onClearAll={() => {}}
+                data-testid="chips"
+            />,
+        )
+        expect(screen.getByText('Etapa:')).toBeTruthy()
+        // the value shows the TRANSLATED option label, not the raw key
+        expect(screen.getByText('Hecho')).toBeTruthy()
+    })
+
+    it('clears one field via its X and everything via "Limpiar todo"', () => {
+        const onFilterChange = vi.fn()
+        const onClearAll = vi.fn()
+        render(
+            <FilterChipsRow
+                fields={[
+                    field({
+                        key: 'stage',
+                        label: 'Etapa',
+                        config: {
+                            selectedValues: ['done'],
+                            options: stageOptions,
+                            filterKey: 'stage',
+                            onFilterChange,
+                        },
+                    }),
+                ]}
+                onClearAll={onClearAll}
+            />,
+        )
+        fireEvent.click(screen.getByLabelText('Quitar filtro'))
+        expect(onFilterChange).toHaveBeenCalledWith('stage', [])
+        fireEvent.click(screen.getByText('Limpiar todo'))
+        expect(onClearAll).toHaveBeenCalled()
+    })
+})

package/src/dynamic-kanban.tsx

@@ -77,9 +77,14 @@ import {
     Skeleton,
 } from '@asteby/metacore-ui/primitives'
 import { ColumnFilterControl, FilterValueCombobox, type ColumnFilterType } from '@asteby/metacore-ui/data-table'
-import { generateBadgeStyles, optionColor, resolveColorCss } from '@asteby/metacore-ui/lib'
+import { generateBadgeStyles, optionColor } from '@asteby/metacore-ui/lib'
 import { useApi } from './api-context'
 import { useDynamicFilters } from './use-dynamic-filters'
+import {
+    FilterChipsRow,
+    summarizeFilterValues,
+    translateOptionLabels,
+} from './filter-chips'
 import { useMetadataCache } from './metadata-cache'
 import { ActivityValueRenderer } from './activity-value-renderer'
 import { DynamicIcon } from './dynamic-icon'
@@ -96,6 +101,10 @@ import type {
     StageTransition,
 } from './types'
 
+// Re-exported for tests + backward-compat: these live in ./filter-chips now
+// (shared with DynamicTable) but were historically imported from here.
+export { summarizeFilterValues, translateOptionLabels }
+
 // ---------------------------------------------------------------------------
 // Pure helpers (exported for unit tests — no React, no transport)
 // ---------------------------------------------------------------------------
@@ -233,71 +242,6 @@ export function selectCardColumns(
     return { title, fields }
 }
 
-/**
- * Human-readable summary of a field's selected filter values for the removable
- * chip row. Resolves option labels, unwraps the wire operators
- * (`IN:`/`ILIKE:`/`RANGE:`/`GTE:`/`LTE:`/date `from_to`), and caps the list at
- * `maxShown` values with a `+n` overflow. Pure — exported for unit tests.
- */
-export function summarizeFilterValues(
-    values: string[] | undefined,
-    options: { label: string; value: string }[] | undefined,
-    maxShown = 2,
-): string {
-    if (!values || values.length === 0) return ''
-    const opts = options ?? []
-    const labelFor = (v: string) =>
-        opts.find((o) => o.value === v)?.label ?? v
-    const first = values[0]
-    if (values.length === 1) {
-        if (first.startsWith('ILIKE:')) return `"${first.slice(6)}"`
-        if (first.startsWith('IN:')) {
-            return summarizeList(first.slice(3).split(','), labelFor, maxShown)
-        }
-        if (first.startsWith('RANGE:')) {
-            const [min, max] = first.slice(6).split(',')
-            return `${min || '…'} – ${max || '…'}`
-        }
-        if (/^\d{4}-\d{2}-\d{2}_/.test(first)) return first.replace('_', ' – ')
-    }
-    if (first.startsWith('GTE:') || first.startsWith('LTE:')) {
-        const min = values.find((v) => v.startsWith('GTE:'))?.slice(4) ?? ''
-        const max = values.find((v) => v.startsWith('LTE:'))?.slice(4) ?? ''
-        return `${min || '…'} – ${max || '…'}`
-    }
-    return summarizeList(values, labelFor, maxShown)
-}
-
-function summarizeList(
-    items: string[],
-    labelFor: (v: string) => string,
-    maxShown: number,
-): string {
-    const labels = items.map(labelFor)
-    if (labels.length <= maxShown) return labels.join(', ')
-    return `${labels.slice(0, maxShown).join(', ')} +${labels.length - maxShown}`
-}
-
-/**
- * The color of a filter's first selected value (for the chip's dot) — e.g. a
- * stage's palette color. Returns a resolved CSS color, or undefined for
- * operator/range/free-text values that carry no option color.
- */
-function chipValueColor(config: {
-    selectedValues: string[]
-    options: { value: string; color?: string }[]
-}): string | undefined {
-    const sel = config.selectedValues
-    if (!sel || sel.length === 0) return undefined
-    const first = sel[0]
-    let value = first
-    if (first.startsWith('IN:')) value = first.slice(3).split(',')[0]
-    else if (/^(ILIKE|RANGE|GTE|LTE):/.test(first)) return undefined
-    else if (/^\d{4}-\d{2}-\d{2}_/.test(first)) return undefined
-    const opt = config.options.find((o) => o.value === value)
-    return opt?.color ? resolveColorCss(opt.color) : undefined
-}
-
 /**
  * Whether a card passes a lane funnel. Picked select/facet `values` match by
  * equality (IN — the card's field value must be one of them); a free-text
@@ -320,14 +264,16 @@ export function cardMatchesLaneFunnel(
 }
 
 /**
- * Translates option labels through the app translator (manifest i18n keys →
- * localized text). A raw value with no matching key falls through to itself via
- * `defaultValue`. Pure — exported for unit tests.
+ * Count of applied criteria on a lane funnel: the number of picked select/facet
+ * `values`, else 1 for a free-text `text`, else 0. Drives the funnel's count
+ * badge. Pure — exported for unit tests.
  */
-export function translateOptionLabels<
-    T extends { label: string },
->(options: T[], translate: (key: string) => string): T[] {
-    return options.map((o) => ({ ...o, label: translate(o.label) }))
+export function laneFunnelCount(
+    value: { values?: string[]; text?: string } | undefined,
+): number {
+    if (value?.values?.length) return value.values.length
+    if (value?.text?.trim()) return 1
+    return 0
 }
 
 /**
@@ -878,64 +824,13 @@ export function DynamicKanban({
                 )}
             </div>
 
-            {/* Removable chip row — one chip per active field filter, plus a
-                "Limpiar todo" at the end. Instant feedback without opening the
-                Sheet; clicking a chip's X clears that field server-side. */}
-            {activeFields.length > 0 && (
-                <div
-                    className="flex flex-wrap items-center gap-1.5"
-                    data-testid="kanban-filter-chips"
-                >
-                    {activeFields.map((field) => {
-                        const summary = summarizeFilterValues(
-                            field.config.selectedValues,
-                            field.config.options,
-                        )
-                        const dot = chipValueColor(field.config)
-                        return (
-                            <Badge
-                                key={field.key}
-                                variant="secondary"
-                                className="h-6 gap-1.5 rounded-md pl-2 pr-1 text-xs font-normal"
-                            >
-                                {dot && (
-                                    <span
-                                        className="size-2 shrink-0 rounded-full"
-                                        style={{ backgroundColor: dot }}
-                                    />
-                                )}
-                                <span className="font-medium">{field.label}:</span>
-                                <span className="max-w-[180px] truncate text-muted-foreground">
-                                    {summary}
-                                </span>
-                                <button
-                                    type="button"
-                                    onClick={() =>
-                                        field.config.onFilterChange(
-                                            field.config.filterKey,
-                                            [],
-                                        )
-                                    }
-                                    className="ml-0.5 rounded-sm p-0.5 transition-colors hover:bg-muted-foreground/20"
-                                    aria-label={t('kanban.removeFilter', {
-                                        defaultValue: 'Quitar filtro',
-                                    })}
-                                >
-                                    <X className="h-3 w-3" />
-                                </button>
-                            </Badge>
-                        )
-                    })}
-                    <Button
-                        variant="ghost"
-                        size="sm"
-                        className="h-6 gap-1 px-2 text-xs text-muted-foreground"
-                        onClick={clearAll}
-                    >
-                        {t('kanban.clearAll', { defaultValue: 'Limpiar todo' })}
-                    </Button>
-                </div>
-            )}
+            {/* Removable chip row — shared with DynamicTable. Instant feedback
+                without opening the Sheet; a chip's X clears that field. */}
+            <FilterChipsRow
+                fields={activeFields}
+                onClearAll={clearAll}
+                data-testid="kanban-filter-chips"
+            />
 
             <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd}>
                 <div className="flex min-w-0 gap-4 overflow-x-auto p-1" data-testid="kanban-board">
@@ -1219,18 +1114,14 @@ function KanbanLane({
                         {laneActive ? `${count}/${totalCount}` : count}
                     </span>
                 </div>
-                {/* Lane actions — dimmed until the lane (or the board row) is
-                    hovered/focused, so an idle board stays clean. Stay lit when a
-                    lane filter is active. */}
-                <div
-                    className={`flex items-center gap-0.5 transition-opacity focus-within:opacity-100 group-hover/lane:opacity-100 ${
-                        laneActive || searchOpen ? 'opacity-100' : 'opacity-0'
-                    }`}
-                >
+                {/* Lane actions — always visible in muted (a hidden hover-reveal
+                    was undiscoverable); active state is a primary tint + a count
+                    badge on the funnel. */}
+                <div className="flex items-center gap-0.5">
                     <button
                         type="button"
                         onClick={() => setSearchOpen((o) => !o)}
-                        className={`flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${
+                        className={`relative flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${
                             queryActive ? 'text-primary' : 'text-muted-foreground'
                         }`}
                         aria-label={t('kanban.searchLane', {
@@ -1238,6 +1129,9 @@ function KanbanLane({
                         })}
                     >
                         <Search className="h-3.5 w-3.5" />
+                        {queryActive && (
+                            <span className="absolute -right-0.5 -top-0.5 size-1.5 rounded-full bg-primary" />
+                        )}
                     </button>
                     <LaneFilterButton
                         fields={filterFields}
@@ -1332,6 +1226,8 @@ function LaneFilterButton({
         value &&
         ((value.values && value.values.length > 0) || value.text?.trim())
     )
+    // Number of applied criteria on this lane's funnel (drives the count badge).
+    const activeCount = laneFunnelCount(value)
     // The value step mirrors the sheet: when the chosen field is a select or a
     // facet (static options OR a lazy loader), render the SAME pro combobox —
     // multi-select, searchable, with counts. Only a genuinely free-text field
@@ -1357,7 +1253,7 @@ function LaneFilterButton({
             <PopoverTrigger asChild>
                 <button
                     type="button"
-                    className={`flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${
+                    className={`relative flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${
                         active ? 'text-primary' : 'text-muted-foreground'
                     }`}
                     aria-label={t('kanban.filterLane', {
@@ -1365,6 +1261,11 @@ function LaneFilterButton({
                     })}
                 >
                     <ListFilter className="h-3.5 w-3.5" />
+                    {activeCount > 0 && (
+                        <span className="absolute -right-1 -top-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[9px] font-bold leading-none text-primary-foreground tabular-nums">
+                            {activeCount}
+                        </span>
+                    )}
                 </button>
             </PopoverTrigger>
             <PopoverContent

package/src/dynamic-table.tsx

@@ -67,6 +67,7 @@ import { useApi, useCurrentBranch } from './api-context'
 import type { ColumnFilterConfig, GetDynamicColumns } from './dynamic-columns-shim'
 import { defaultGetDynamicColumns, DATE_CELL_TYPES, aggregateOf, formatAggregateTotal } from './dynamic-columns'
 import { useFacetLoaders, isLongTextColumn } from './use-facet-loaders'
+import { FilterChipsRow, translateOptionLabels, type FilterChipField } from './filter-chips'
 import { OptionsContext } from './options-context'
 import type { TableMetadata, ApiResponse } from './types'
 import { getSearchableColumnKeys } from './column-visibility'
@@ -536,11 +537,15 @@ export function DynamicTable({
     // getDynamicColumns forwards `loadOptions` into the column meta). Facets base
     // derived off the list endpoint exactly like the aggregate endpoint below.
     const facetsBase = endpoint ? `${endpoint}/facets` : model ? `/data/${model}/facets` : null
-    const { getFacetLoader } = useFacetLoaders(facetsBase)
+    const { getFacetLoader, prefetchFacets, facetOptions } = useFacetLoaders(facetsBase)
 
     const columnFilterConfigs = useMemo(() => {
         const map = new Map<string, ColumnFilterConfig>()
         if (!metadata) return map
+        // Option labels arrive as manifest i18n keys; translate them here (the ui
+        // package has no i18n) so header filters, chips and value summaries show
+        // localized text. A raw value with no key falls through via defaultValue.
+        const tr = (label: string) => t(label, { defaultValue: label })
         const stageOptions = (metadata.stages ?? []).map((s) => ({
             label: s.label,
             value: s.key,
@@ -574,18 +579,23 @@ export function DynamicTable({
                 if (loader) {
                     fType = 'facet'
                     loadOptions = loader
+                    // Prewarmed values (from prefetchFacets) → the header filter
+                    // opens with the list already there, no "Cargando…" flash.
+                    options = facetOptions.get(f.column || f.key) ?? []
                 }
             }
             if (fType === 'select' && options.length === 0 && !f.searchEndpoint) continue
             map.set(f.key, {
                 filterType: fType,
                 filterKey: f.column || f.key,
-                options,
+                options: translateOptionLabels(options, tr),
                 selectedValues: dynamicFilters[f.column || f.key] || [],
                 onFilterChange: handleDynamicFilterChange,
                 loading: f.searchEndpoint ? !filterOptionsMap.has(f.searchEndpoint) : false,
                 searchEndpoint: f.searchEndpoint,
-                loadOptions,
+                loadOptions: loadOptions
+                    ? (q?: string) => loadOptions!(q).then((o) => translateOptionLabels(o, tr))
+                    : undefined,
             })
         }
         for (const c of metadata.columns ?? []) {
@@ -635,22 +645,64 @@ export function DynamicTable({
                 if (loader) {
                     filterType = 'facet'
                     loadOptions = loader
+                    // Prewarmed values (from prefetchFacets) → instant open.
+                    options = facetOptions.get(c.key) ?? []
                 }
             }
 
             map.set(c.key, {
                 filterType,
                 filterKey: c.key,
-                options,
+                options: translateOptionLabels(options, tr),
                 selectedValues: dynamicFilters[c.key] || [],
                 onFilterChange: handleDynamicFilterChange,
                 loading: hasEndpoint && !filterOptionsMap.has(c.searchEndpoint!),
                 searchEndpoint: c.searchEndpoint,
-                loadOptions,
+                loadOptions: loadOptions
+                    ? (q?: string) => loadOptions!(q).then((o) => translateOptionLabels(o, tr))
+                    : undefined,
             })
         }
         return map
-    }, [metadata, filterOptionsMap, dynamicFilters, handleDynamicFilterChange, facetsBase, getFacetLoader])
+    }, [metadata, filterOptionsMap, dynamicFilters, handleDynamicFilterChange, facetsBase, getFacetLoader, facetOptions, t])
+
+    // Prewarm every facet field once the configs settle, so a text column's
+    // header filter opens instantly with values + counts (same as the kanban).
+    const facetFieldsSig = useMemo(() => {
+        const keys: string[] = []
+        for (const config of columnFilterConfigs.values()) {
+            if (config.filterType === 'facet') keys.push(config.filterKey)
+        }
+        return keys.join('|')
+    }, [columnFilterConfigs])
+    useEffect(() => {
+        if (!facetFieldsSig) return
+        prefetchFacets(facetFieldsSig.split('|'))
+    }, [facetFieldsSig, prefetchFacets])
+
+    // Active-filter chips (shared row with the kanban). One chip per field with a
+    // selection; the label is the translated filter/column label.
+    const activeFilterChips = useMemo<FilterChipField[]>(() => {
+        if (!metadata) return []
+        const out: FilterChipField[] = []
+        for (const [key, config] of columnFilterConfigs) {
+            if ((config.selectedValues?.length ?? 0) === 0) continue
+            const f = metadata.filters?.find((x) => x.key === key)
+            const c = metadata.columns?.find((x) => x.key === key)
+            const rawLabel = f?.label || c?.label || key
+            out.push({
+                key,
+                label: t(rawLabel, { defaultValue: rawLabel }),
+                config,
+            })
+        }
+        return out
+    }, [metadata, columnFilterConfigs, t])
+
+    const clearAllDynamicFilters = useCallback(() => {
+        setDynamicFilters({})
+        setPagination((prev: PaginationState) => ({ ...prev, pageIndex: 0 }))
+    }, [])
 
     const columns = useMemo(() => {
         if (!viewMetadata) return []
@@ -771,6 +823,17 @@ export function DynamicTable({
                             </>
                         }
                     />
+                    {/* Active-filter chips — shared with the kanban. Quick
+                        visibility + one-click removal of the header filters. */}
+                    {activeFilterChips.length > 0 && (
+                        <div className='pt-2'>
+                            <FilterChipsRow
+                                fields={activeFilterChips}
+                                onClearAll={clearAllDynamicFilters}
+                                data-testid='table-filter-chips'
+                            />
+                        </div>
+                    )}
                 </div>
                 {/* Desktop: classic horizontal-scroll table. Hidden on phones —
                     a 7-column table forces a wide horizontal scroll there, so we