toga-ai 1.0.595 → 1.0.596

package/knowledge/2.0/apps/toga-blox/features/primary-table-templates.md

@@ -55,6 +55,13 @@ Constants in `PrimaryTable.tsx`: `DEFAULT_MIN_COLUMN_WIDTH = 80`, `ABSOLUTE_MIN_
 
 1. **Measure** — on first paint, measure header + widest body cell content per column
    (`measureCellContentWidth`), store in `frozenWidths`; per-column floors in `contentFloors`.
+   The **full header width is a HARD floor for every column** (`headerFloors` state): it is not
+   capped by max-width, not overridden by a consumer `minColumnWidth`, and is applied even to
+   explicitly-pinned (`columnWidths`) columns — the earlier `return def.size` bypass was why
+   pinned columns stayed clipped. Header width is measured **deterministically** = label text
+   `scrollWidth` + a fixed ~34px reserve per sort/filter control, **not** by measuring the
+   icon-font/SVG control elements (which can report ~0 width pre-paint on the freeze pass,
+   causing both header abbreviation and icon overlap).
 2. **Freeze** — apply `table-layout: fixed` + a `<colgroup>` of frozen pixel widths so columns
    don't reflow while virtualizing. Resets when the leaf column set changes. Empty tables stay
    on auto-layout.
@@ -78,6 +85,10 @@ Sticky columns use a `--sticky-offset` CSS variable summed from neighboring colu
 ## Gotchas
 
 - Frozen widths measure only **mounted** rows; virtualized tables size from the first paint set.
+- **Header labels must never abbreviate or overlap.** The full header width is a hard floor
+  (above `maxColumnWidth`, `minColumnWidth`, and pinned `columnWidths`). Measure header width
+  deterministically (label `scrollWidth` + fixed per-control reserve), never by measuring the
+  async-loading sort/filter icon elements — they can report ~0 width before they paint.
 - `headerSpan` adds a separate top row (`colSpan`); only the leaf header row maps to colgroup.
 - Resize is non-persistent (local state, resets when columns change).
 - **A visible column can look "missing" under `shrinkColumns`.** `shrinkColumns` (modal tables)
@@ -87,6 +98,11 @@ Sticky columns use a `--sticky-offset` CSS variable summed from neighboring colu
   not the column set.
 
 ## Change history
+- 2026-08-17 — Fixed clipped/abbreviated headers: full header width is now a hard floor for every
+  column (not capped by max-width, not overridden by `minColumnWidth`, applied even to pinned
+  `columnWidths` — the old `return def.size` bypass left pinned columns clipped). Added a
+  `headerFloors` state; header width is now measured deterministically (label `scrollWidth` +
+  fixed ~34px per sort/filter control) instead of measuring async-loading icon elements. (apeterson)
 - 2026-08-17 — Noted that under `shrinkColumns` a genuinely visible column can render at a sliver width and look "missing" — check `isVisible` and the measured/frozen width, not the column set (apeterson).
 - 2026-06-23 — Documented the three Primary Table entry points, measure-and-freeze sizing, virtualization, and sticky columns (apeterson).
 - 2026-06-22 — Added `shrinkColumns` / `minColumnWidth` shrink-to-fit for modal tables; freeze logic uses natural content width (apeterson).

package/knowledge/2.0/apps/toga-blox/features/table.md

@@ -88,13 +88,18 @@ isHovered, skin, isDisabled }`. They are inserted as columns via `buildActionCol
 
 Per-column header controls, each a popover trigger with `data-active` / `data-open`:
 
-- **`HeaderFilterSearch`** — text filter, 5 modes (startsWith/endsWith/exactly/includes/
-  excludes) chosen from a **mode dropdown that excludes the currently selected mode**.
-  **Tag-based**: confirmed values become removable tags (`activeTags`); `isActive =
-  activeTags.length > 0`. The mode dropdown is portalled to `document.body` with fixed
-  positioning recomputed on scroll. The search icon (solid when active, regular otherwise)
-  is hidden while the input is focused; both the trigger button and the icon span carry
-  `data-active`. The clear button must not widen the input row (fixed-width menu).
+- **`HeaderFilterSearch`** — text filter, **multi-chip with per-chip mode**. Each confirmed
+  search becomes its own `TextFilterTag = { value, mode }` (mode ∈ Includes / Starts with /
+  Ends with / Exactly / Excludes). The mode dropdown sets the mode for the **next** chip
+  added; existing chips keep the mode they were created with. All chips on a column are
+  combined with **AND**. `onFilterChange` emits the full tags array (`{ tags }`); the
+  component rehydrates every chip from props and renders each as "Mode: value". `isActive =
+  tags.length > 0`. The mode dropdown is portalled to `document.body` with fixed positioning
+  recomputed on scroll. The search icon (solid when active, regular otherwise) is hidden
+  while the input is focused; both the trigger button and the icon span carry `data-active`.
+  The clear button must not widen the input row (fixed-width menu).
+  (Previously a column allowed only one term / one mode — a second search replaced the first
+  and switching mode re-applied it to everything.)
 - **`HeaderFilterRange`** — numeric, modes exactly/moreThan/lessThan + a range toggle
   (min/max); emits `{ key, value }[]` (`eq`/`min`/`max`/`between`). Reads its persisted
   operator/values back from a `filterParams` prop (not `filterValue`, which collapses to the
@@ -134,6 +139,10 @@ Per-column header controls, each a popover trigger with `data-active` / `data-op
 ## Gotchas
 
 - `MIN_COLUMN_WIDTH = 120` is the shrink floor only for columns with **no** explicit width.
+- **Never truncate header labels.** `truncateCells` (`.truncateCells .headerCellLabel` in
+  `toga.module.css`) is for **body** values only; it must apply only `white-space: nowrap` to
+  the header (no `overflow:hidden`/`text-overflow:ellipsis`/wrapping) or headers show ellipses.
+  Headers must render in full on one line, never abbreviated, never overlapping.
 - The filter `includes` mode treats comma-separated values as OR.
 - `EditableCell` currency formats **on blur**, phone formats **on keystroke**.
 - Cell type config (`columnTypeConfig` prop) overrides the hardcoded `COLUMN_TYPE_CONFIG`.
@@ -151,24 +160,36 @@ Per-column header controls, each a popover trigger with `data-active` / `data-op
   never for data fetching. A visible column can still *look* missing when `shrinkColumns` freezes
   it to a tiny width because its measured header+body content is minimal (see
   [primary-table-templates](primary-table-templates.md)).
-- **Filter presentational components must seed their internal mode/value state from props.**
-  The filter mode/operator survives the URL round-trip — it is persisted as a URL key suffix
-  (`_starts`/`_ends`/`_eq`/`_excludes` for text; `_min`/`_max`/`_eq`/`_between` for range),
-  rehydrated into TanStack `columnFilters` by toga25-supply `useServerTableUrlState`, and
-  carried through `PrimaryTableHeaderCell`. But `HeaderFilterSearch`/`HeaderFilterRange` are
-  remounted fresh each time a filter popover opens, so if they don't seed local state from
-  their props (`filterMode` / `filterParams`) they hard-default (`includes` for text,
-  `exactly` for range) and reopening a filter *shows the wrong mode* even though the applied
-  filter is correct. Fixed via a `useEffect` seeding `filterMode` from `filterModeProp` in
-  `HeaderFilterSearch`, and a rehydration effect keyed on `JSON.stringify(filterParams)` in
-  `HeaderFilterRange` that reconstructs mode + value(s) from the operator keys
-  (`eq`→Exactly, `min`→MoreThan, `max`→LessThan, `between`→range min/max).
+- **Filter presentational components must seed their internal state from props.**
+  Filter state survives the URL round-trip and is rehydrated into TanStack `columnFilters` by
+  toga25-supply `useServerTableUrlState`, carried through `PrimaryTableHeaderCell`. But
+  `HeaderFilterSearch`/`HeaderFilterRange` are remounted fresh each time a popover opens, so
+  they must seed local state from props or reopening *shows the wrong state*.
+  **Text (`HeaderFilterSearch`)** now persists as a single readable URL param
+  `<slug>_<col>_filter` = comma-separated `mode:value` pairs (values URL-encoded so `:`/`,`
+  inside a term can't corrupt the delimiters); `getDataTableData` parses it and pushes **one
+  AND WHERE condition per chip** (mode→op: includes→contains, startsWith→starts,
+  endsWith→ends, exactly→eq, excludes→excludes). The component rehydrates the full `tags`
+  array from props. Old base64/legacy single-mode `_starts`/`_ends`/… URLs don't parse under
+  the new scheme (graceful — just re-apply the filter). The browser may percent-encode `:`/`,`
+  in the address bar but it round-trips.
+  **Range (`HeaderFilterRange`)** still persists as key suffixes (`_min`/`_max`/`_eq`/
+  `_between`); it reads mode + value(s) back from `filterParams` via a rehydration effect keyed
+  on `JSON.stringify(filterParams)` (`eq`→Exactly, `min`→MoreThan, `max`→LessThan,
+  `between`→range min/max).
 - **Table/surface meta is cached with `Infinity` staleTime/gcTime** (`useFetchTablePageMeta`), so
   after a DB metadata change (`TableViewFields`, `Core.RecordFields`) a **hard reload** is required
   to see it. And the app consumes toga-blox's built **`dist/`**, not `src/` — editing blox source
   requires `npm run build` before it takes effect at runtime.
 
 ## Change history
+- 2026-08-17 — Built multi-chip text column filter: each `HeaderFilterSearch` search is now its
+  own `TextFilterTag {value, mode}`, the mode dropdown sets the mode for the next chip, existing
+  chips keep their mode, and all chips AND together. Persisted as a single readable URL param
+  `<slug>_<col>_filter` = `mode:value,...` (URL-encoded values); `getDataTableData` emits one AND
+  WHERE per chip. Also fixed: header labels were being ellipsis-truncated (and overlapping the
+  next column) — `truncateCells` is body-only, so `.truncateCells .headerCellLabel` is now just
+  `white-space: nowrap`. (apeterson)
 - 2026-08-17 — Fixed: column filter **mode** was not restored when a filter popover was reopened
   (text reverted to `includes`, range to `exactly`). Root cause: the URL round-trip and
   `PrimaryTableHeaderCell` preserved the mode, but `HeaderFilterSearch` (destructured

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toga-ai",
-  "version": "1.0.595",
+  "version": "1.0.596",
   "description": "TOGA Technology Team Claude Knowledge System — shared AI coding harness with skills, knowledge base CLI, and project installer for Claude Code.",
   "keywords": [
     "claude",