@asteby/metacore-runtime-react 23.4.0 → 23.5.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @asteby/metacore-runtime-react
 
+## 23.5.1
+
+### Patch Changes
+
+- 36e7cb8: DynamicKanban: las lanes ahora aprovechan el ancho del viewport. Crecen (flex-1) para llenar el contenedor cuando todas caben, con un ancho mínimo legible (280px) y un máximo razonable (420px); el scroll horizontal solo aparece cuando ya no caben. Elimina el espacio muerto a la derecha y las columnas angostas al reducir la ventana.
+
+## 23.5.0
+
+### Minor Changes
+
+- beb7af1: DynamicKanban: los contadores de cada columna muestran el total real de la etapa desde el primer render, sin necesidad de scrollear. Tras la carga inicial del tablero se dispara en paralelo una consulta liviana (`per_page=1`) por etapa, respetando la búsqueda y los filtros activos, para leer su total. El header ahora se lee `N` cuando ya están cargadas todas las tarjetas (antes `N/N`) y `N/M` cuando la etapa está parcialmente cargada. Los totales se refrescan al cambiar filtros/búsqueda y mantienen el ajuste optimista tras arrastrar una tarjeta.
+
 ## 23.4.0
 
 ### Minor Changes

package/dist/dynamic-kanban.d.ts

@@ -42,6 +42,16 @@ export declare function applyOptimisticMove(grouped: Map<string, any[]>, cardId:
 export declare function applyLaneTotalsOnMove<T extends {
     total: number | null;
 }>(pagination: Record<string, T>, fromStage: string, toStage: string): Record<string, T>;
+/**
+ * Formats a lane header's count badge. Three cases:
+ *   - A lane filter/search is active → `shown/loaded` (the client-side narrowed
+ *     count over what this lane has loaded).
+ *   - Otherwise, when the stage's server total is known → `shown` alone once
+ *     everything is loaded (`shown >= total`), else `shown/total` (partial).
+ *   - Total still unknown → just `shown`.
+ * Pure — exported for unit tests.
+ */
+export declare function formatLaneCount(shown: number, loaded: number, serverTotal: number | null, laneActive: boolean): string;
 /**
  * Picks the columns shown on a card: a `title` column (first searchable column,
  * else first text-ish column) and up to `maxFields` secondary columns. Excludes

package/dist/dynamic-kanban.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-kanban.d.ts","sourceRoot":"","sources":["../src/dynamic-kanban.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"dynamic-kanban.d.ts","sourceRoot":"","sources":["../src/dynamic-kanban.tsx"],"names":[],"mappings":"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"}

package/dist/dynamic-kanban.js

@@ -132,6 +132,23 @@ export function applyLaneTotalsOnMove(pagination, fromStage, toStage) {
     bump(toStage, +1);
     return next;
 }
+/**
+ * Formats a lane header's count badge. Three cases:
+ *   - A lane filter/search is active → `shown/loaded` (the client-side narrowed
+ *     count over what this lane has loaded).
+ *   - Otherwise, when the stage's server total is known → `shown` alone once
+ *     everything is loaded (`shown >= total`), else `shown/total` (partial).
+ *   - Total still unknown → just `shown`.
+ * Pure — exported for unit tests.
+ */
+export function formatLaneCount(shown, loaded, serverTotal, laneActive) {
+    if (laneActive)
+        return `${shown}/${loaded}`;
+    if (serverTotal != null) {
+        return shown >= serverTotal ? String(serverTotal) : `${shown}/${serverTotal}`;
+    }
+    return String(shown);
+}
 /**
  * Picks the columns shown on a card: a `title` column (first searchable column,
  * else first text-ish column) and up to `maxFields` secondary columns. Excludes
@@ -233,6 +250,10 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
     const [lanePagination, setLanePagination] = useState({});
     // Active drag card id (for the DragOverlay + drop-zone highlighting).
     const [activeId, setActiveId] = useState(null);
+    // Monotonic token for the current board load. Bumped on every fetchData so a
+    // slow eager-totals response from a superseded filter set can't inject stale
+    // stage totals into the fresh board.
+    const fetchGenRef = useRef(0);
     const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
     // ---- metadata fetch (same path as DynamicTable) ----
     useEffect(() => {
@@ -280,6 +301,7 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
     const fetchData = useCallback(async () => {
         if (!metadata)
             return;
+        const gen = ++fetchGenRef.current;
         setLoadingData(true);
         try {
             const res = (await api.get(endpoint || `/data/${model}`, {
@@ -295,6 +317,50 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
             setLoadingData(false);
         }
         setLanePagination({});
+        // Eager per-lane totals: so every lane header shows the REAL stage count
+        // on first render (not just what the global page happened to load), fire
+        // one lightweight `per_page=1` request per declared stage — in parallel,
+        // scoped by the SAME active filters/search (`f_<group_by>=<stage>` on top
+        // of filterParams). We read only `meta.total`; the row itself is ignored
+        // (the lane loads its real cards via loadMoreLane on scroll). The
+        // "unassigned" lane can't be stage-scoped, so it keeps its loaded count.
+        const gb = metadata.group_by;
+        const declaredStages = deriveStages(metadata);
+        if (gb && declaredStages.length > 0) {
+            void Promise.all(declaredStages.map(async (stage) => {
+                try {
+                    const r = (await api.get(endpoint || `/data/${model}`, {
+                        params: {
+                            ...filterParams,
+                            page: 1,
+                            per_page: 1,
+                            [`f_${gb}`]: stage.key,
+                        },
+                    }));
+                    const total = r.data.meta?.total ?? r.data.meta?.count ?? null;
+                    if (total == null || gen !== fetchGenRef.current)
+                        return;
+                    setLanePagination((p) => {
+                        const existing = p[stage.key];
+                        // A real page fetch already learned this lane's total.
+                        if (existing?.total != null)
+                            return p;
+                        return {
+                            ...p,
+                            [stage.key]: {
+                                nextPage: existing?.nextPage ?? 1,
+                                total,
+                                loading: existing?.loading ?? false,
+                                done: existing?.done ?? total === 0,
+                            },
+                        };
+                    });
+                }
+                catch (err) {
+                    // A failed total just leaves the header on the loaded count.
+                }
+            }));
+        }
     }, [api, endpoint, model, metadata, pageSize, filterParams]);
     // Load the next page for ONE lane/stage and append it (deduped by id) into
     // the shared records. Scoped by `f_<group_by>=<stage>` on top of the active
@@ -522,7 +588,7 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
         }
     }, [api, endpoint, groupByKey, lanePagination, model, records, stageOfCard, t, transitions]);
     if (loading) {
-        return (_jsx("div", { className: "flex gap-4 overflow-x-auto p-1", children: [0, 1, 2, 3].map((i) => (_jsxs("div", { className: "w-[300px] shrink-0 space-y-3", children: [_jsx(Skeleton, { className: "h-8 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" })] }, i))) }));
+        return (_jsx("div", { className: "flex w-full gap-4 overflow-x-auto p-1", children: [0, 1, 2, 3].map((i) => (_jsxs("div", { className: "min-w-[280px] max-w-[420px] flex-1 shrink-0 space-y-3", children: [_jsx(Skeleton, { className: "h-8 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" })] }, i))) }));
     }
     if (!metadata || !groupByKey || stages.length === 0) {
         return (_jsx("div", { className: "rounded-md border border-dashed p-8 text-center text-sm text-muted-foreground", children: t('kanban.noStages', {
@@ -549,7 +615,7 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
                                                     })
                                                     : t('kanban.noActiveFilters', {
                                                         defaultValue: 'Sin filtros',
-                                                    }) }), _jsxs(Button, { variant: "ghost", size: "sm", className: "h-7 gap-1 text-xs", onClick: clearAll, disabled: activeFilterCount === 0, children: [_jsx(X, { className: "h-3.5 w-3.5" }), t('kanban.clearAll', { defaultValue: 'Limpiar todo' }), activeFilterCount > 0 ? ` (${activeFilterCount})` : ''] })] })] })] }))] }), _jsx(FilterChipsRow, { fields: activeFields, onClearAll: clearAll, "data-testid": "kanban-filter-chips" }), _jsxs(DndContext, { sensors: sensors, onDragStart: onDragStart, onDragEnd: onDragEnd, children: [_jsx("div", { className: "flex min-w-0 gap-4 overflow-x-auto p-1", "data-testid": "kanban-board", children: lanes.map((stage) => {
+                                                    }) }), _jsxs(Button, { variant: "ghost", size: "sm", className: "h-7 gap-1 text-xs", onClick: clearAll, disabled: activeFilterCount === 0, children: [_jsx(X, { className: "h-3.5 w-3.5" }), t('kanban.clearAll', { defaultValue: 'Limpiar todo' }), activeFilterCount > 0 ? ` (${activeFilterCount})` : ''] })] })] })] }))] }), _jsx(FilterChipsRow, { fields: activeFields, onClearAll: clearAll, "data-testid": "kanban-filter-chips" }), _jsxs(DndContext, { sensors: sensors, onDragStart: onDragStart, onDragEnd: onDragEnd, children: [_jsx("div", { className: "flex w-full min-w-0 gap-4 overflow-x-auto p-1", "data-testid": "kanban-board", children: lanes.map((stage) => {
                             const allCards = grouped.get(stage.key) ?? [];
                             // Per-lane client-side narrowing (instant, scoped to this
                             // stage). The funnel (field/value) and the lane search
@@ -644,15 +710,16 @@ function KanbanLane({ stage, count, totalCount, serverTotal, hasMore, loadingMor
             text: laneFilter.text,
         }
         : undefined;
-    return (_jsxs("div", { ref: setNodeRef, className: "group/lane flex w-[300px] shrink-0 flex-col rounded-xl border bg-muted/30 transition-opacity", style: {
+    return (_jsxs("div", { ref: setNodeRef, 
+        // Fluid width: lanes grow (flex-1) to fill the board when they all
+        // fit, capped at max-w so a couple of lanes don't stretch absurdly
+        // wide. Below min-w the board's overflow-x-auto takes over and the
+        // lanes scroll horizontally at their minimum width.
+        className: "group/lane flex min-w-[280px] max-w-[420px] flex-1 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',
             outlineOffset: 2,
-        }, "data-stage": stage.key, "data-disabled": disabled || undefined, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2.5", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Badge, { variant: "outline", className: "border-0 text-xs font-semibold", style: headerStyle, children: t(stage.label, { defaultValue: stage.label }) }), _jsx("span", { className: "text-xs font-medium tabular-nums text-muted-foreground", children: laneActive
-                                    ? `${count}/${totalCount}`
-                                    : serverTotal != null
-                                        ? `${count}/${serverTotal}`
-                                        : count })] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", onClick: () => setSearchOpen((o) => !o), 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', {
+        }, "data-stage": stage.key, "data-disabled": disabled || undefined, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2.5", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Badge, { variant: "outline", className: "border-0 text-xs font-semibold", style: headerStyle, children: t(stage.label, { defaultValue: stage.label }) }), _jsx("span", { className: "text-xs font-medium tabular-nums text-muted-foreground", children: formatLaneCount(count, totalCount, serverTotal, laneActive) })] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", onClick: () => setSearchOpen((o) => !o), 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', {
                                     defaultValue: 'Buscar en la columna',
                                 }), children: [_jsx(Search, { className: "h-3.5 w-3.5" }), queryActive && (_jsx("span", { className: "absolute -right-0.5 -top-0.5 size-1.5 rounded-full bg-primary" }))] }), _jsx(LaneFilterButton, { fields: filterFields, value: funnelValue, onChange: onFunnelChange })] })] }), searchOpen && (_jsx("div", { className: "px-3 pb-1.5", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { ref: searchRef, value: laneFilter?.query ?? '', onChange: (e) => onQueryChange(e.target.value), onKeyDown: (e) => {
                                 if (e.key === 'Escape') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "23.4.0",
+  "version": "23.5.1",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

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

@@ -131,6 +131,15 @@ function stageCalls(api: ApiClient, stage: string) {
         (c: any[]) => c[1]?.params?.f_stage === stage,
     )
 }
+// A lane's real page-load (per_page 25), as opposed to the eager per_page=1
+// total probe fired on the initial board load.
+function stagePageCalls(api: ApiClient, stage: string) {
+    return stageCalls(api, stage).filter((c: any[]) => c[1]?.params?.per_page === 25)
+}
+// The eager total probe (per_page 1) for a stage.
+function stageTotalCalls(api: ApiClient, stage: string) {
+    return stageCalls(api, stage).filter((c: any[]) => c[1]?.params?.per_page === 1)
+}
 function globalDataCalls(api: ApiClient) {
     return (api.get as any).mock.calls.filter(
         (c: any[]) =>
@@ -171,15 +180,20 @@ describe('DynamicKanban per-lane infinite scroll', () => {
         )
         // Initial board page painted its single backlog card.
         expect(await screen.findByText('Backlog One')).toBeTruthy()
-        expect(stageCalls(api, 'backlog')).toHaveLength(0)
+        // No real page-load fired yet — only the eager per_page=1 total probe.
+        expect(stagePageCalls(api, 'backlog')).toHaveLength(0)
+        // The eager total lands, so the header shows the real stage count (1/5)
+        // BEFORE the user scrolls.
+        await waitFor(() => expect(stageTotalCalls(api, 'backlog').length).toBeGreaterThan(0))
+        expect(await screen.findByText('1/5')).toBeTruthy()
 
         // Sentinels enter view → each declared lane tops up its OWN stage.
         expect(observers.length).toBeGreaterThan(0)
         observers.forEach((o) => o.fire(true))
 
         // The backlog top-up ran with the right scoped params...
-        await waitFor(() => expect(stageCalls(api, 'backlog').length).toBeGreaterThan(0))
-        const call = stageCalls(api, 'backlog')[0]
+        await waitFor(() => expect(stagePageCalls(api, 'backlog').length).toBeGreaterThan(0))
+        const call = stagePageCalls(api, 'backlog')[0]
         expect(call[1].params).toMatchObject({ f_stage: 'backlog', page: 1, per_page: 25 })
 
         // ...its rows were appended and the header shows count/serverTotal (3/5).

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

@@ -0,0 +1,161 @@
+// @vitest-environment happy-dom
+//
+// DynamicKanban eager lane totals (#521 follow-up): every lane header shows the
+// REAL stage count on first render — before the user scrolls — by firing one
+// lightweight `per_page=1` probe per declared stage after the initial board
+// page. Covers:
+//   1. formatLaneCount — the pure `N` vs `N/M` header formatter.
+//   2. Totals visible without scrolling (partial `N/M` and complete `N`).
+//   3. Totals refetch (scoped by the new filters) when the filters change.
+import { afterEach, beforeEach, 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 { formatLaneCount, DynamicKanban } from '../dynamic-kanban'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import type { TableMetadata } from '../types'
+
+afterEach(cleanup)
+
+// ---------------------------------------------------------------------------
+// 1. Pure formatter
+// ---------------------------------------------------------------------------
+
+describe('formatLaneCount', () => {
+    it('shows just the total when everything is loaded (shown === total)', () => {
+        expect(formatLaneCount(41, 41, 41, false)).toBe('41')
+    })
+    it('shows shown/total when the lane is partial', () => {
+        expect(formatLaneCount(22, 22, 41, false)).toBe('22/41')
+    })
+    it('shows just the loaded count when the total is unknown', () => {
+        expect(formatLaneCount(7, 7, null, false)).toBe('7')
+    })
+    it('shows shown/loaded when a lane filter is active', () => {
+        expect(formatLaneCount(3, 22, 41, true)).toBe('3/22')
+    })
+    it('collapses to the total once shown catches up (never N/N)', () => {
+        expect(formatLaneCount(5, 5, 5, false)).toBe('5')
+    })
+})
+
+// ---------------------------------------------------------------------------
+// 2 + 3. Component: eager totals on load and on filter change
+// ---------------------------------------------------------------------------
+
+const STAGES = [
+    { key: 'backlog', label: 'Backlog', color: 'slate', order: 0 },
+    { key: 'done', label: 'Done', color: 'green', order: 1 },
+]
+
+function meta(over: Partial<TableMetadata> = {}): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        view_type: 'kanban',
+        group_by: 'stage',
+        stages: STAGES,
+        columns: [
+            { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: false, searchable: true },
+            { key: 'stage', label: 'Stage', type: 'status', sortable: false, filterable: true, options: STAGES.map((s) => ({ value: s.key, label: s.label })) },
+        ],
+        actions: [],
+        perPageOptions: [50],
+        defaultPerPage: 50,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: false,
+        hasActions: false,
+        ...over,
+    }
+}
+
+// Initial global page: one backlog card + two done cards. The eager per_page=1
+// probes report a backlog total of 5 (partial) and a done total of 2 (complete
+// — the two done cards are already loaded).
+function fakeApi(): ApiClient {
+    const ok = (data: unknown, m?: Record<string, unknown>) => ({
+        data: { success: true, data, ...(m ? { meta: m } : {}) },
+    })
+    return {
+        get: vi.fn(async (url: string, cfg?: any) => {
+            if (url.startsWith('/metadata/table/')) return ok(meta())
+            const stage = cfg?.params?.f_stage
+            if (stage === 'backlog') return ok([{ id: 1, title: 'Backlog One', stage: 'backlog' }], { total: 5 })
+            if (stage === 'done') return ok([{ id: 2, title: 'Done Two', stage: 'done' }], { total: 2 })
+            // initial global board page
+            return ok([
+                { id: 1, title: 'Backlog One', stage: 'backlog' },
+                { id: 2, title: 'Done Two', stage: 'done' },
+                { id: 3, title: 'Done Three', stage: 'done' },
+            ])
+        }),
+        post: vi.fn(async () => ok(null)),
+        put: vi.fn(async () => ok(null)),
+        delete: vi.fn(async () => ok(null)),
+    }
+}
+
+function totalProbeCalls(api: ApiClient) {
+    return (api.get as any).mock.calls.filter(
+        (c: any[]) => c[1]?.params?.f_stage !== undefined && c[1]?.params?.per_page === 1,
+    )
+}
+
+describe('DynamicKanban eager lane totals', () => {
+    beforeEach(() => {
+        // No IntersectionObserver: nothing scrolls, so any total shown is proof
+        // it arrived from the eager probe, not from a lane top-up.
+        ;(globalThis as any).IntersectionObserver = class {
+            observe() {}
+            disconnect() {}
+        }
+    })
+    afterEach(() => {
+        delete (globalThis as any).IntersectionObserver
+    })
+
+    it('shows the real stage total on first render without scrolling', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi()
+        render(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('Backlog One')
+        // Backlog: 1 loaded of 5 → partial. Done: 2 loaded of 2 → collapses to "2".
+        expect(await screen.findByText('1/5')).toBeTruthy()
+        expect(await screen.findByText('2')).toBeTruthy()
+        // One probe per declared stage.
+        await waitFor(() => expect(totalProbeCalls(api)).toHaveLength(2))
+    })
+
+    it('refetches the totals (scoped by the new filters) when the filters change', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi()
+        const { rerender } = render(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('1/5')
+        await waitFor(() => expect(totalProbeCalls(api)).toHaveLength(2))
+
+        rerender(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" defaultFilters={{ priority: 'high' }} />
+            </ApiProvider>,
+        )
+
+        // The filter change re-fires the eager probes (now carrying the filter).
+        await waitFor(() => expect(totalProbeCalls(api).length).toBeGreaterThan(2))
+        const probe = totalProbeCalls(api).at(-1)!
+        expect(probe[1].params).toMatchObject({ f_priority: 'high', per_page: 1 })
+    })
+})

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

@@ -383,6 +383,29 @@ describe('DynamicKanban render', () => {
         // a secondary field label is present
         expect(screen.getAllByText('Assignee:').length).toBeGreaterThan(0)
     })
+
+    it('lays out fluid lanes: the board fills the width and lanes grow (flex-1) with a min/max width', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const { container } = render(
+            <ApiProvider client={fakeApi()}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('Backlog')
+        // The board fills the container and scrolls horizontally only on overflow.
+        const board = container.querySelector('[data-testid="kanban-board"]')!
+        expect(board.className).toContain('w-full')
+        expect(board.className).toContain('overflow-x-auto')
+        // Each lane grows to fill the available width but never shrinks past a
+        // readable min-width nor stretches beyond a sane max-width.
+        const lanes = container.querySelectorAll('[data-stage]')
+        expect(lanes.length).toBe(4)
+        lanes.forEach((lane) => {
+            expect(lane.className).toContain('flex-1')
+            expect(lane.className).toContain('min-w-[280px]')
+            expect(lane.className).toContain('max-w-[420px]')
+        })
+    })
 })
 
 // The drag itself is wired by dnd-kit (pointer + layout), which happy-dom can't

package/src/dynamic-kanban.tsx

@@ -238,6 +238,28 @@ export function applyLaneTotalsOnMove<T extends { total: number | null }>(
     return next
 }
 
+/**
+ * Formats a lane header's count badge. Three cases:
+ *   - A lane filter/search is active → `shown/loaded` (the client-side narrowed
+ *     count over what this lane has loaded).
+ *   - Otherwise, when the stage's server total is known → `shown` alone once
+ *     everything is loaded (`shown >= total`), else `shown/total` (partial).
+ *   - Total still unknown → just `shown`.
+ * Pure — exported for unit tests.
+ */
+export function formatLaneCount(
+    shown: number,
+    loaded: number,
+    serverTotal: number | null,
+    laneActive: boolean,
+): string {
+    if (laneActive) return `${shown}/${loaded}`
+    if (serverTotal != null) {
+        return shown >= serverTotal ? String(serverTotal) : `${shown}/${serverTotal}`
+    }
+    return String(shown)
+}
+
 /**
  * Picks the columns shown on a card: a `title` column (first searchable column,
  * else first text-ish column) and up to `maxFields` secondary columns. Excludes
@@ -450,6 +472,11 @@ export function DynamicKanban({
     // Active drag card id (for the DragOverlay + drop-zone highlighting).
     const [activeId, setActiveId] = useState<string | null>(null)
 
+    // Monotonic token for the current board load. Bumped on every fetchData so a
+    // slow eager-totals response from a superseded filter set can't inject stale
+    // stage totals into the fresh board.
+    const fetchGenRef = useRef(0)
+
     const sensors = useSensors(
         useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     )
@@ -507,6 +534,7 @@ export function DynamicKanban({
     // change (fetchData's identity changes with filterParams).
     const fetchData = useCallback(async () => {
         if (!metadata) return
+        const gen = ++fetchGenRef.current
         setLoadingData(true)
         try {
             const res = (await api.get(endpoint || `/data/${model}`, {
@@ -519,6 +547,49 @@ export function DynamicKanban({
             setLoadingData(false)
         }
         setLanePagination({})
+        // Eager per-lane totals: so every lane header shows the REAL stage count
+        // on first render (not just what the global page happened to load), fire
+        // one lightweight `per_page=1` request per declared stage — in parallel,
+        // scoped by the SAME active filters/search (`f_<group_by>=<stage>` on top
+        // of filterParams). We read only `meta.total`; the row itself is ignored
+        // (the lane loads its real cards via loadMoreLane on scroll). The
+        // "unassigned" lane can't be stage-scoped, so it keeps its loaded count.
+        const gb = metadata.group_by
+        const declaredStages = deriveStages(metadata)
+        if (gb && declaredStages.length > 0) {
+            void Promise.all(
+                declaredStages.map(async (stage) => {
+                    try {
+                        const r = (await api.get(endpoint || `/data/${model}`, {
+                            params: {
+                                ...filterParams,
+                                page: 1,
+                                per_page: 1,
+                                [`f_${gb}`]: stage.key,
+                            },
+                        })) as { data: ApiResponse<any[]> & { meta?: any } }
+                        const total = r.data.meta?.total ?? r.data.meta?.count ?? null
+                        if (total == null || gen !== fetchGenRef.current) return
+                        setLanePagination((p) => {
+                            const existing = p[stage.key]
+                            // A real page fetch already learned this lane's total.
+                            if (existing?.total != null) return p
+                            return {
+                                ...p,
+                                [stage.key]: {
+                                    nextPage: existing?.nextPage ?? 1,
+                                    total,
+                                    loading: existing?.loading ?? false,
+                                    done: existing?.done ?? total === 0,
+                                },
+                            }
+                        })
+                    } catch (err) {
+                        // A failed total just leaves the header on the loaded count.
+                    }
+                }),
+            )
+        }
     }, [api, endpoint, model, metadata, pageSize, filterParams])
 
     // Load the next page for ONE lane/stage and append it (deduped by id) into
@@ -806,9 +877,9 @@ export function DynamicKanban({
 
     if (loading) {
         return (
-            <div className="flex gap-4 overflow-x-auto p-1">
+            <div className="flex w-full gap-4 overflow-x-auto p-1">
                 {[0, 1, 2, 3].map((i) => (
-                    <div key={i} className="w-[300px] shrink-0 space-y-3">
+                    <div key={i} className="min-w-[280px] max-w-[420px] flex-1 shrink-0 space-y-3">
                         <Skeleton className="h-8 w-full" />
                         <Skeleton className="h-24 w-full" />
                         <Skeleton className="h-24 w-full" />
@@ -952,7 +1023,7 @@ export function DynamicKanban({
             />
 
             <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd}>
-                <div className="flex min-w-0 gap-4 overflow-x-auto p-1" data-testid="kanban-board">
+                <div className="flex w-full 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 (instant, scoped to this
@@ -1238,7 +1309,11 @@ function KanbanLane({
     return (
         <div
             ref={setNodeRef}
-            className="group/lane flex w-[300px] shrink-0 flex-col rounded-xl border bg-muted/30 transition-opacity"
+            // Fluid width: lanes grow (flex-1) to fill the board when they all
+            // fit, capped at max-w so a couple of lanes don't stretch absurdly
+            // wide. Below min-w the board's overflow-x-auto takes over and the
+            // lanes scroll horizontally at their minimum width.
+            className="group/lane flex min-w-[280px] max-w-[420px] flex-1 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',
@@ -1257,11 +1332,7 @@ function KanbanLane({
                         {t(stage.label, { defaultValue: stage.label })}
                     </Badge>
                     <span className="text-xs font-medium tabular-nums text-muted-foreground">
-                        {laneActive
-                            ? `${count}/${totalCount}`
-                            : serverTotal != null
-                              ? `${count}/${serverTotal}`
-                              : count}
+                        {formatLaneCount(count, totalCount, serverTotal, laneActive)}
                     </span>
                 </div>
                 {/* Lane actions — always visible in muted (a hidden hover-reveal