@asteby/metacore-runtime-react 21.1.0 → 23.0.0

package/src/dynamic-kanban.tsx

@@ -38,7 +38,18 @@ import {
     type DragStartEvent,
     type DragEndEvent,
 } from '@dnd-kit/core'
-import { ListFilter, MoreHorizontal, Search, X } from 'lucide-react'
+import {
+    Calendar,
+    CircleDot,
+    Hash,
+    ListFilter,
+    MoreHorizontal,
+    Search,
+    Tag,
+    ToggleLeft,
+    Type,
+    X,
+} from 'lucide-react'
 import { toast } from 'sonner'
 import {
     Badge,
@@ -65,8 +76,8 @@ import {
     SheetTrigger,
     Skeleton,
 } from '@asteby/metacore-ui/primitives'
-import { ColumnFilterControl, type ColumnFilterType } from '@asteby/metacore-ui/data-table'
-import { generateBadgeStyles, optionColor } from '@asteby/metacore-ui/lib'
+import { ColumnFilterControl, FilterValueCombobox, type ColumnFilterType } from '@asteby/metacore-ui/data-table'
+import { generateBadgeStyles, optionColor, resolveColorCss } from '@asteby/metacore-ui/lib'
 import { useApi } from './api-context'
 import { useDynamicFilters } from './use-dynamic-filters'
 import { useMetadataCache } from './metadata-cache'
@@ -222,6 +233,122 @@ 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
+ * `text` matches by case-insensitive substring. No field / no criteria → passes.
+ * Pure — exported for unit tests.
+ */
+export function cardMatchesLaneFunnel(
+    card: any,
+    filter: { field?: string; values?: string[]; text?: string } | undefined,
+): boolean {
+    if (!filter?.field) return true
+    const raw = String(card?.[filter.field] ?? '')
+    if (filter.values && filter.values.length > 0) {
+        return filter.values.includes(raw)
+    }
+    if (filter.text?.trim()) {
+        return raw.toLowerCase().includes(filter.text.trim().toLowerCase())
+    }
+    return true
+}
+
+/**
+ * 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.
+ */
+export function translateOptionLabels<
+    T extends { label: string },
+>(options: T[], translate: (key: string) => string): T[] {
+    return options.map((o) => ({ ...o, label: translate(o.label) }))
+}
+
+/**
+ * Whether a card matches a free-text lane search: a case-insensitive substring
+ * over the card's title + every visible field value (`String(v)`). Empty query
+ * matches everything. Pure — exported for unit tests.
+ */
+export function cardMatchesLaneQuery(
+    card: any,
+    cols: ColumnDefinition[],
+    query: string,
+): boolean {
+    const q = query.trim().toLowerCase()
+    if (!q) return true
+    return cols.some((c) =>
+        String(card?.[c.key] ?? '')
+            .toLowerCase()
+            .includes(q),
+    )
+}
+
 // ---------------------------------------------------------------------------
 // Theme hook (mirrors the private one in dynamic-columns / activity-renderer)
 // ---------------------------------------------------------------------------
@@ -250,6 +377,20 @@ function useIsDarkTheme(): boolean {
 // Component
 // ---------------------------------------------------------------------------
 
+/**
+ * Per-lane client-side filter. Two AND-combined dimensions:
+ *   - The funnel: a `field` plus EITHER `values` (chosen from a select/facet —
+ *     matched by equality/IN against the card's field value) OR `text` (a
+ *     free-text substring for text-only fields).
+ *   - `query`: the lane search — a substring over the card title + field values.
+ */
+interface LaneFilterState {
+    field?: string
+    values?: string[]
+    text?: string
+    query?: string
+}
+
 export interface DynamicKanbanProps {
     /** Model key as registered on the backend (e.g. "issue"). */
     model: string
@@ -352,13 +493,15 @@ export function DynamicKanban({
     // and `f_<key>` serialization DynamicTable uses, so the board filters
     // identically to its table sibling.
     const {
+        dynamicFilters,
         globalFilter,
         setGlobalFilter,
         columnFilterConfigs,
         filterParams,
         activeFilterCount,
+        handleDynamicFilterChange,
         clearAll,
-    } = useDynamicFilters(metadata, { defaultFilters })
+    } = useDynamicFilters(metadata, { defaultFilters, model, endpoint })
 
     // ---- records fetch (same path as DynamicTable, single large page) ----
     const fetchData = useCallback(async () => {
@@ -397,29 +540,75 @@ export function DynamicKanban({
             label: string
             config: NonNullable<ReturnType<typeof columnFilterConfigs.get>>
         }[] = []
+        // Option labels come from the manifest as i18n keys (e.g.
+        // "integration_github.stage.backlog"). ColumnFilterControl lives in the
+        // ui package (no i18n), so translate labels HERE — on the static options
+        // and on whatever the facet loader resolves — before they ever reach a
+        // control, chip or value summary. A raw value (a repo name) has no key,
+        // so t() returns it verbatim via defaultValue.
+        const tr = (label: string) => t(label, { defaultValue: label })
         for (const [key, config] of columnFilterConfigs) {
             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 })
+            const translatedConfig = {
+                ...config,
+                options: translateOptionLabels(config.options, tr),
+                loadOptions: config.loadOptions
+                    ? (q?: string) =>
+                          config.loadOptions!(q).then((opts) =>
+                              translateOptionLabels(opts, tr),
+                          )
+                    : undefined,
+            }
+            out.push({
+                key,
+                label: tr(rawLabel),
+                config: translatedConfig,
+            })
         }
         return out
     }, [metadata, columnFilterConfigs, t])
 
+    // Split filters into active (with a selection) and the rest — the Sheet
+    // groups the active ones on top, the rest alphabetically. Also drives the
+    // removable chip row below the toolbar.
+    const { activeFields, inactiveFields } = useMemo(() => {
+        const active = filterFields.filter(
+            (f) => (f.config.selectedValues?.length ?? 0) > 0,
+        )
+        const inactive = filterFields
+            .filter((f) => (f.config.selectedValues?.length ?? 0) === 0)
+            .sort((a, b) => a.label.localeCompare(b.label))
+        return { activeFields: active, inactiveFields: inactive }
+    }, [filterFields])
+
     // Sheet (grouped global filters) open state + per-lane client-side filters.
     // A lane filter narrows ONLY that stage's already-fetched cards by a field
     // value — instant, no refetch — so a user can drill into one column without
     // touching the rest of the board (the global filters, by contrast, refetch
     // the whole board server-side).
     const [filtersOpen, setFiltersOpen] = useState(false)
+    // Per-lane client-side narrowing. Two independent, AND-combined dimensions:
+    //   - `field`/`value`: the funnel — a field-scoped substring match.
+    //   - `query`: the lane search — a substring over the card title + every
+    //     visible field value.
+    // A lane with neither is dropped from the map (so it reads as "unfiltered").
     const [laneFilters, setLaneFilters] = useState<
-        Record<string, { field: string; value: string }>
+        Record<string, LaneFilterState>
     >({})
-    const setLaneFilter = useCallback(
-        (stageKey: string, filter: { field: string; value: string } | null) => {
+    const updateLaneFilter = useCallback(
+        (stageKey: string, patch: Partial<LaneFilterState>) => {
             setLaneFilters((prev) => {
+                const merged: LaneFilterState = { ...prev[stageKey], ...patch }
                 const next = { ...prev }
-                if (filter) next[stageKey] = filter
+                const hasFunnel = !!(
+                    merged.field &&
+                    ((merged.values && merged.values.length > 0) ||
+                        merged.text?.trim())
+                )
+                const hasQuery = !!merged.query?.trim()
+                if (hasFunnel || hasQuery) next[stageKey] = merged
                 else delete next[stageKey]
                 return next
             })
@@ -444,6 +633,12 @@ export function DynamicKanban({
         [metadata],
     )
 
+    // Columns the lane search scans: the card title + its visible field cells.
+    const searchCols = useMemo(
+        () => [titleCol, ...fieldCols].filter(Boolean) as ColumnDefinition[],
+        [titleCol, fieldCols],
+    )
+
     // Row-placement actions resolved EXACTLY like DynamicTable's action column:
     // capability-gated (when a <PermissionsProvider> is mounted) and with the
     // implicit View/Edit/Delete trio materialized for CRUD models. An action the
@@ -616,69 +811,151 @@ export function DynamicKanban({
                         </SheetTrigger>
                         <SheetContent
                             side="right"
-                            className="flex w-80 flex-col gap-4 sm:max-w-sm"
+                            className="flex w-80 flex-col gap-0 p-0 sm:max-w-sm"
                         >
-                            <SheetHeader className="space-y-0">
-                                <SheetTitle>
+                            <SheetHeader className="space-y-0 border-b px-4 py-3">
+                                <SheetTitle className="text-sm">
                                     {t('kanban.filters', { defaultValue: 'Filtros' })}
                                 </SheetTitle>
                             </SheetHeader>
-                            {/* One labeled control per filterable field, stacked. Same
-                                configs / server-side engine as the inline chips were,
-                                just grouped so they never spill across the board. */}
-                            <div className="flex flex-1 flex-col gap-2 overflow-y-auto pr-1">
-                                {filterFields.map((field) => (
-                                    <ColumnFilterControl
+                            {/* Active filters grouped on top, the rest alphabetical
+                                below a separator. Each row: label + its control; the
+                                active field is highlighted by ColumnFilterControl's
+                                own active styling. Same server-side engine as before. */}
+                            <div className="flex flex-1 flex-col gap-1 overflow-y-auto px-4 py-3">
+                                {activeFields.length > 0 && (
+                                    <>
+                                        <p className="px-0.5 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                                            {t('kanban.activeFilters', {
+                                                defaultValue: 'Con filtros activos',
+                                            })}
+                                        </p>
+                                        {activeFields.map((field) => (
+                                            <SheetFilterRow
+                                                key={field.key}
+                                                field={field}
+                                                isStage={field.key === groupByKey}
+                                            />
+                                        ))}
+                                        {inactiveFields.length > 0 && (
+                                            <div className="my-2 border-t" />
+                                        )}
+                                    </>
+                                )}
+                                {inactiveFields.map((field) => (
+                                    <SheetFilterRow
                                         key={field.key}
-                                        showLabel
-                                        label={field.label}
-                                        filterKey={field.config.filterKey}
-                                        filterType={
-                                            field.config.filterType as ColumnFilterType
-                                        }
-                                        filterOptions={field.config.options}
-                                        filterLoading={field.config.loading}
-                                        filterSearchEndpoint={field.config.searchEndpoint}
-                                        selectedValues={field.config.selectedValues}
-                                        onFilterChange={field.config.onFilterChange}
+                                        field={field}
+                                        isStage={field.key === groupByKey}
                                     />
                                 ))}
                             </div>
-                            {activeFilterCount > 0 && (
+                            <div className="sticky bottom-0 flex items-center justify-between gap-2 border-t bg-background px-4 py-3">
+                                <span className="text-xs text-muted-foreground tabular-nums">
+                                    {activeFilterCount > 0
+                                        ? t('kanban.activeCount', {
+                                              defaultValue: '{{count}} activos',
+                                              count: activeFilterCount,
+                                          })
+                                        : t('kanban.noActiveFilters', {
+                                              defaultValue: 'Sin filtros',
+                                          })}
+                                </span>
                                 <Button
                                     variant="ghost"
                                     size="sm"
-                                    className="gap-1 text-xs text-muted-foreground"
+                                    className="h-7 gap-1 text-xs"
                                     onClick={clearAll}
+                                    disabled={activeFilterCount === 0}
                                 >
                                     <X className="h-3.5 w-3.5" />
-                                    {t('kanban.clearFilters', { defaultValue: 'Limpiar' })}
-                                    {` (${activeFilterCount})`}
+                                    {t('kanban.clearAll', { defaultValue: 'Limpiar todo' })}
+                                    {activeFilterCount > 0 ? ` (${activeFilterCount})` : ''}
                                 </Button>
-                            )}
+                            </div>
                         </SheetContent>
                     </Sheet>
                 )}
             </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>
+            )}
+
             <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd}>
                 <div className="flex min-w-0 gap-4 overflow-x-auto p-1" data-testid="kanban-board">
                 {lanes.map((stage) => {
                     const allCards = grouped.get(stage.key) ?? []
-                    // Per-lane client-side narrowing: substring match on the
-                    // chosen field over the already-fetched cards. Instant, and
-                    // scoped to this stage only.
+                    // Per-lane client-side narrowing (instant, scoped to this
+                    // stage). The funnel (field/value) and the lane search
+                    // (query) are AND-combined.
                     const laneFilter = laneFilters[stage.key]
-                    const cards =
-                        laneFilter && laneFilter.value.trim()
-                            ? allCards.filter((c) =>
-                                  String(c[laneFilter.field] ?? '')
-                                      .toLowerCase()
-                                      .includes(
-                                          laneFilter.value.trim().toLowerCase(),
-                                      ),
-                              )
-                            : allCards
+                    let cards = allCards
+                    if (laneFilter?.field) {
+                        cards = cards.filter((c) =>
+                            cardMatchesLaneFunnel(c, laneFilter),
+                        )
+                    }
+                    if (laneFilter?.query?.trim()) {
+                        cards = cards.filter((c) =>
+                            cardMatchesLaneQuery(c, searchCols, laneFilter.query!),
+                        )
+                    }
                     const droppableAllowed =
                         !activeId ||
                         stage.key === activeStage ||
@@ -691,8 +968,15 @@ export function DynamicKanban({
                             totalCount={allCards.length}
                             filterFields={filterFields}
                             laneFilter={laneFilter}
-                            onLaneFilterChange={(f) =>
-                                setLaneFilter(stage.key, f)
+                            onFunnelChange={(f) =>
+                                updateLaneFilter(stage.key, {
+                                    field: f?.field,
+                                    values: f?.values,
+                                    text: f?.text,
+                                })
+                            }
+                            onQueryChange={(q) =>
+                                updateLaneFilter(stage.key, { query: q })
                             }
                             isDark={isDark}
                             dimmed={!!activeId && !droppableAllowed}
@@ -747,17 +1031,113 @@ export function DynamicKanban({
     )
 }
 
+// ---------------------------------------------------------------------------
+// Sheet filter row — a labeled ColumnFilterControl for the Filtros panel.
+// ---------------------------------------------------------------------------
+
+interface SheetFilterField {
+    key: string
+    label: string
+    config: {
+        filterType: string
+        filterKey: string
+        options: { label: string; value: string; icon?: string; color?: string }[]
+        selectedValues: string[]
+        onFilterChange: (filterKey: string, values: string[]) => void
+        loading?: boolean
+        searchEndpoint?: string
+        loadOptions?: (q?: string) => Promise<any[]>
+    }
+}
+
+/**
+ * A per-data-type glyph for the Filtros panel rows (and their popover header):
+ * Hash for numbers, Calendar for dates, CircleDot for the pipeline stage, Tag
+ * for value pickers, ToggleLeft for booleans, Type for free text.
+ */
+function filterTypeIcon(filterType: string, isStage: boolean): React.ReactNode {
+    if (isStage) return <CircleDot className="h-3.5 w-3.5" />
+    switch (filterType) {
+        case 'number_range':
+            return <Hash className="h-3.5 w-3.5" />
+        case 'date_range':
+            return <Calendar className="h-3.5 w-3.5" />
+        case 'boolean':
+            return <ToggleLeft className="h-3.5 w-3.5" />
+        case 'select':
+        case 'dynamic_select':
+        case 'facet':
+            return <Tag className="h-3.5 w-3.5" />
+        default:
+            return <Type className="h-3.5 w-3.5" />
+    }
+}
+
+function SheetFilterRow({
+    field,
+    isStage,
+}: {
+    field: SheetFilterField
+    isStage: boolean
+}) {
+    const summary = summarizeFilterValues(
+        field.config.selectedValues,
+        field.config.options,
+    )
+    return (
+        <ColumnFilterControl
+            variant="row"
+            align="end"
+            icon={filterTypeIcon(field.config.filterType, isStage)}
+            label={field.label}
+            valueSummary={summary}
+            filterKey={field.config.filterKey}
+            filterType={field.config.filterType as ColumnFilterType}
+            filterOptions={field.config.options}
+            filterLoading={field.config.loading}
+            filterSearchEndpoint={field.config.searchEndpoint}
+            selectedValues={field.config.selectedValues}
+            onFilterChange={field.config.onFilterChange}
+            loadOptions={field.config.loadOptions}
+        />
+    )
+}
+
 // ---------------------------------------------------------------------------
 // Lane (droppable column)
 // ---------------------------------------------------------------------------
 
+interface LaneFilterField {
+    key: string
+    label: string
+    config?: ColumnFilterConfigLike
+}
+
+/** Minimal shape the lane funnel reads off a shared filter config. */
+interface ColumnFilterConfigLike {
+    filterType?: string
+    filterKey?: string
+    options?: { label: string; value: string; color?: string; count?: number }[]
+    loadOptions?: (q?: string) => Promise<
+        { label: string; value: string; color?: string; count?: number }[]
+    >
+}
+
+/** The funnel's committed value: a field + either picked `values` or free `text`. */
+interface LaneFunnelValue {
+    field: string
+    values?: string[]
+    text?: string
+}
+
 interface KanbanLaneProps {
     stage: StageMeta
     count: number
     totalCount: number
-    filterFields: { key: string; label: string }[]
-    laneFilter: { field: string; value: string } | undefined
-    onLaneFilterChange: (filter: { field: string; value: string } | null) => void
+    filterFields: LaneFilterField[]
+    laneFilter: LaneFilterState | undefined
+    onFunnelChange: (filter: LaneFunnelValue | null) => void
+    onQueryChange: (query: string) => void
     isDark: boolean
     dimmed: boolean
     disabled: boolean
@@ -770,7 +1150,8 @@ function KanbanLane({
     totalCount,
     filterFields,
     laneFilter,
-    onLaneFilterChange,
+    onFunnelChange,
+    onQueryChange,
     isDark,
     dimmed,
     disabled,
@@ -781,14 +1162,42 @@ function KanbanLane({
     const headerStyle = generateBadgeStyles(stage.color || optionColor(stage.key), {
         isDark,
     })
-    const laneActive = !!(laneFilter && laneFilter.value.trim())
-    const activeFieldLabel =
-        filterFields.find((f) => f.key === laneFilter?.field)?.label ??
-        laneFilter?.field
+    const funnelField = filterFields.find((f) => f.key === laneFilter?.field)
+    const funnelActive = !!(
+        laneFilter?.field &&
+        ((laneFilter.values && laneFilter.values.length > 0) ||
+            laneFilter.text?.trim())
+    )
+    const queryActive = !!laneFilter?.query?.trim()
+    const laneActive = funnelActive || queryActive
+    const activeFieldLabel = funnelField?.label ?? laneFilter?.field
+    // Human summary of the funnel value: resolved option labels for picked
+    // values, or the raw free text.
+    const funnelSummary =
+        laneFilter?.values && laneFilter.values.length > 0
+            ? summarizeFilterValues(laneFilter.values, funnelField?.config?.options)
+            : laneFilter?.text ?? ''
+
+    // Inline lane search: a Search icon expands an Input; Escape or blur-while-
+    // empty collapses it. The query itself lives in the parent's laneFilters so
+    // it survives collapse and combines with the funnel.
+    const [searchOpen, setSearchOpen] = useState(queryActive)
+    const searchRef = useRef<HTMLInputElement | null>(null)
+    useEffect(() => {
+        if (searchOpen) searchRef.current?.focus()
+    }, [searchOpen])
+    const funnelValue: LaneFunnelValue | undefined = laneFilter?.field
+        ? {
+              field: laneFilter.field,
+              values: laneFilter.values,
+              text: laneFilter.text,
+          }
+        : undefined
+
     return (
         <div
             ref={setNodeRef}
-            className="flex w-[300px] shrink-0 flex-col rounded-lg border bg-muted/30 transition-opacity"
+            className="group/lane flex w-[300px] shrink-0 flex-col rounded-xl border bg-muted/30 transition-opacity"
             style={{
                 opacity: dimmed ? 0.45 : 1,
                 outline: isOver && !disabled ? '2px solid var(--ring, #3b82f6)' : 'none',
@@ -798,33 +1207,79 @@ function KanbanLane({
             data-disabled={disabled || undefined}
         >
             <div className="flex items-center justify-between gap-2 px-3 py-2.5">
-                <Badge
-                    variant="outline"
-                    className="border-0 text-xs font-semibold"
-                    style={headerStyle}
-                >
-                    {t(stage.label, { defaultValue: stage.label })}
-                </Badge>
-                <div className="flex items-center gap-1">
+                <div className="flex min-w-0 items-center gap-2">
+                    <Badge
+                        variant="outline"
+                        className="border-0 text-xs font-semibold"
+                        style={headerStyle}
+                    >
+                        {t(stage.label, { defaultValue: stage.label })}
+                    </Badge>
                     <span className="text-xs font-medium tabular-nums text-muted-foreground">
                         {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'
+                    }`}
+                >
+                    <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 ${
+                            queryActive ? 'text-primary' : 'text-muted-foreground'
+                        }`}
+                        aria-label={t('kanban.searchLane', {
+                            defaultValue: 'Buscar en la columna',
+                        })}
+                    >
+                        <Search className="h-3.5 w-3.5" />
+                    </button>
                     <LaneFilterButton
                         fields={filterFields}
-                        value={laneFilter}
-                        onChange={onLaneFilterChange}
+                        value={funnelValue}
+                        onChange={onFunnelChange}
                     />
                 </div>
             </div>
-            {laneActive && (
+            {searchOpen && (
+                <div className="px-3 pb-1.5">
+                    <div className="relative">
+                        <Search className="pointer-events-none absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" />
+                        <Input
+                            ref={searchRef}
+                            value={laneFilter?.query ?? ''}
+                            onChange={(e) => onQueryChange(e.target.value)}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Escape') {
+                                    onQueryChange('')
+                                    setSearchOpen(false)
+                                }
+                            }}
+                            onBlur={() => {
+                                if (!laneFilter?.query?.trim()) setSearchOpen(false)
+                            }}
+                            placeholder={t('kanban.searchLanePlaceholder', {
+                                defaultValue: 'Buscar tarjetas...',
+                            })}
+                            className="h-7 pl-7 text-xs"
+                        />
+                    </div>
+                </div>
+            )}
+            {funnelActive && (
                 <div className="flex items-center gap-1 px-3 pb-1.5 text-[11px] text-muted-foreground">
                     <ListFilter className="h-3 w-3 shrink-0" />
                     <span className="truncate">
-                        {activeFieldLabel}: {laneFilter!.value}
+                        {activeFieldLabel}: {funnelSummary}
                     </span>
                     <button
                         type="button"
-                        onClick={() => onLaneFilterChange(null)}
+                        onClick={() => onFunnelChange(null)}
                         className="ml-auto rounded p-0.5 hover:bg-muted"
                         aria-label={t('kanban.clearFilters', {
                             defaultValue: 'Limpiar',
@@ -855,34 +1310,54 @@ function LaneFilterButton({
     value,
     onChange,
 }: {
-    fields: { key: string; label: string }[]
-    value: { field: string; value: string } | undefined
-    onChange: (filter: { field: string; value: string } | null) => void
+    fields: LaneFilterField[]
+    value: LaneFunnelValue | undefined
+    onChange: (filter: LaneFunnelValue | null) => void
 }) {
     const { t } = useTranslation()
     const [open, setOpen] = useState(false)
     const [field, setField] = useState(value?.field ?? fields[0]?.key ?? '')
-    const [text, setText] = useState(value?.value ?? '')
+    const [values, setValues] = useState<string[]>(value?.values ?? [])
+    const [text, setText] = useState(value?.text ?? '')
     // Re-seed the draft from the committed filter each time the popover opens.
     useEffect(() => {
         if (open) {
             setField(value?.field ?? fields[0]?.key ?? '')
-            setText(value?.value ?? '')
+            setValues(value?.values ?? [])
+            setText(value?.text ?? '')
         }
     }, [open, value, fields])
     if (fields.length === 0) return null
-    const active = !!(value && value.value.trim())
+    const active = !!(
+        value &&
+        ((value.values && value.values.length > 0) || value.text?.trim())
+    )
+    // 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
+    // (no options, no loader) falls back to a raw "Contiene..." input.
+    const cfg = fields.find((f) => f.key === field)?.config
+    const hasValuePicker = (cfg?.options?.length ?? 0) > 0 || !!cfg?.loadOptions
+    const toggle = (v: string) =>
+        setValues((prev) =>
+            prev.includes(v) ? prev.filter((x) => x !== v) : [...prev, v],
+        )
     const apply = () => {
-        if (field && text.trim()) onChange({ field, value: text })
+        if (field && values.length > 0) onChange({ field, values })
+        else if (field && text.trim()) onChange({ field, text: text.trim() })
         else onChange(null)
         setOpen(false)
     }
+    const clear = () => {
+        onChange(null)
+        setOpen(false)
+    }
     return (
         <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
                 <button
                     type="button"
-                    className={`rounded p-1 transition-colors hover:bg-muted hover:text-foreground ${
+                    className={`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', {
@@ -892,9 +1367,21 @@ function LaneFilterButton({
                     <ListFilter className="h-3.5 w-3.5" />
                 </button>
             </PopoverTrigger>
-            <PopoverContent align="end" className="w-56 space-y-2 p-2">
-                <Select value={field} onValueChange={setField}>
-                    <SelectTrigger className="h-8 text-xs">
+            <PopoverContent
+                align="end"
+                className="w-72 space-y-2.5 rounded-xl p-2.5 shadow-lg"
+            >
+                <Select
+                    value={field}
+                    onValueChange={(f) => {
+                        setField(f)
+                        // Reset the value when switching fields — a value picked
+                        // for one field is meaningless for another.
+                        setValues([])
+                        setText('')
+                    }}
+                >
+                    <SelectTrigger className="h-8 w-full text-xs">
                         <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
@@ -905,30 +1392,50 @@ function LaneFilterButton({
                         ))}
                     </SelectContent>
                 </Select>
-                <Input
-                    autoFocus
-                    value={text}
-                    onChange={(e) => setText(e.target.value)}
-                    onKeyDown={(e) => {
-                        if (e.key === 'Enter') apply()
-                    }}
-                    placeholder={t('kanban.filterValue', { defaultValue: 'Valor...' })}
-                    className="h-8 text-xs"
-                />
-                <div className="flex justify-between gap-2">
+                {hasValuePicker ? (
+                    // `key={field}` remounts the combobox on field switch so it
+                    // reloads that field's values from scratch (no stale list).
+                    <div className="overflow-hidden rounded-lg border">
+                        <FilterValueCombobox
+                            key={field}
+                            staticOptions={cfg?.options}
+                            loadOptions={cfg?.loadOptions}
+                            selected={values}
+                            onToggle={toggle}
+                        />
+                    </div>
+                ) : (
+                    <Input
+                        autoFocus
+                        value={text}
+                        onChange={(e) => setText(e.target.value)}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter') apply()
+                        }}
+                        placeholder={t('kanban.filterValue', {
+                            defaultValue: 'Contiene...',
+                        })}
+                        className="h-8 w-full text-xs"
+                    />
+                )}
+                <div className="flex gap-1.5">
                     <Button
-                        variant="ghost"
+                        variant="outline"
                         size="sm"
-                        className="h-7 text-xs"
-                        onClick={() => {
-                            onChange(null)
-                            setOpen(false)
-                        }}
+                        className="h-7 flex-1 text-xs"
+                        onClick={clear}
+                        disabled={!active && values.length === 0 && !text.trim()}
                     >
                         {t('kanban.clearFilters', { defaultValue: 'Limpiar' })}
                     </Button>
-                    <Button size="sm" className="h-7 text-xs" onClick={apply}>
+                    <Button
+                        size="sm"
+                        className="h-7 flex-1 text-xs"
+                        onClick={apply}
+                        disabled={values.length === 0 && !text.trim()}
+                    >
                         {t('kanban.apply', { defaultValue: 'Aplicar' })}
+                        {values.length > 0 ? ` (${values.length})` : ''}
                     </Button>
                 </div>
             </PopoverContent>