fix(website): resolve the hero's selection summary against the drawn grid

#298 moved the cockpit's selection summary onto the engine's drawn order and
explained at length why nothing else can be correct. #321 migrated the hero to
the `model` prop, dropped `onGridReady` with it, and put the prop-derived
version back. The invariant is now live-broken again, and the guard #298 added
does not catch it.

Filter the hero to Consumer, drag across two adjacent rows and three columns,
and the sidebar reads `9 × 3 selected`. The columns are right; the rows are the
distance between those two holdings in the UNFILTERED book, because the row
order came from this component's locally sorted array while the drawn set is the
filtered one. Rows the user cannot see were counted inside a rectangle they can.

Both orders come off the engine again, via the post-#321 API: `columnLayout` for
the drawn columns (the pre-#321 `getColumns()`/`getSnapshot().visibleRows` pair
is gone) and `range(0, visibleRowCount)` for the drawn rows, mapping group
headers by `groupId` since they sit inside the copied rectangle too.

Why the existing guard stayed green: grouping.spec.ts groups the hero, hits ⌘A
and checks the totals — but grouping swaps the grouped column for the derived
one, so the column total lands on the right number read against either order,
and ⌘A spans everything, so the row total does too. Counts that coincide are not
a test of which order was used. A filter makes the drawn set a strict subset,
which no coincidence covers, so that is what the new smoke test pins.

The local sort path existed only to feed this call site, so it goes: `userSort`,
its model subscription, `sortedRows` and `sortedRowsRef`. `heroGrid/sort.ts` is
left on disk, now unreferenced by the app, pending the separate ranking decision
below.

Verified: website e2e at --workers=1 in both engines against a production build,
99 passed. The one failure, webkit `showcase: scale grid virtualizes`, is
pre-existing — reproduced on this branch's base with these two files reverted.

Not fixed here, found while verifying: #321 also dropped the hero's default
weight-desc ranking. The grid draws arrival order and never re-ranks — measured
live, the visible weights read 16.4, 9.7, 8.2, 5, 4.3, 7, 4.5 (four inversions).
Restoring it means giving the engine the sort, which makes rows re-rank on every
tick, and how much the homepage should churn is a product call, not a drive-by.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: blove

apps/website/app/components/HeroGrid.tsx

@@ -3,7 +3,7 @@
 import {
   PretableSurface,
   type PastePayload,
-  type PretableSortEntry,
+  type PretableSurfaceGrid,
 } from "@pretable/react";
 import { createLocalRowModel } from "@pretable/core";
 import { createBatcher } from "@pretable/stream-adapter";
@@ -30,28 +30,32 @@ import { PORTFOLIO_RECORDING } from "./heroGrid/recordings/portfolio";
 import { createPortfolioReplay } from "./heroGrid/replay-engine";
 import { PortfolioSummary } from "./heroGrid/PortfolioSummary";
 import { startingPositions } from "./heroGrid/roster";
-import { applySort } from "./heroGrid/sort";
 import type { PositionRow } from "./heroGrid/types";
 import styles from "./heroGrid/heroGrid.module.css";
 
+type HeroSurfaceGrid = PretableSurfaceGrid<
+  PositionRow,
+  string,
+  ReturnType<typeof makePositionColumns>
+>;
+
 const FALLBACK_VIEWPORT_HEIGHT = 520;
 /** How long the paste summary stays up before clearing itself. */
 const PASTE_SUMMARY_MS = 5000;
 
 export function HeroGrid() {
   const { ratePerSec, isPlaying } = useControlState();
   const [rows, setRows] = useState<PositionRow[]>([]);
-  const [userSort, setUserSort] = useState<PretableSortEntry[]>([]);
   const replayRef = useRef<ReturnType<typeof createPortfolioReplay> | null>(
     null,
   );
+  const gridRef = useRef<HeroSurfaceGrid | null>(null);
 
   // Live rows ref — lets columns factory read current rows without being in its deps
   const rowsRef = useRef<PositionRow[]>([]);
   useEffect(() => {
     rowsRef.current = rows;
   }, [rows]);
-  const sortedRowsRef = useRef<PositionRow[]>([]);
 
   // Stable columns — created once so the grid instance is never recreated under streaming.
   // The getRows closure captures the ref *object* (not .current) so it always reads the
@@ -71,30 +75,6 @@ export function HeroGrid() {
     }),
   );
 
-  const sortedRows = useMemo(() => applySort(rows, userSort), [rows, userSort]);
-  useEffect(
-    () =>
-      rowModel.subscribe(() => {
-        const nextSort = [
-          ...rowModel.getState().snapshot.query.sort,
-        ] as PretableSortEntry[];
-        setUserSort((currentSort) =>
-          currentSort.length === nextSort.length &&
-          currentSort.every(
-            (entry, index) =>
-              entry.columnId === nextSort[index]?.columnId &&
-              entry.direction === nextSort[index]?.direction,
-          )
-            ? currentSort
-            : nextSort,
-        );
-      }),
-    [rowModel],
-  );
-  useEffect(() => {
-    sortedRowsRef.current = sortedRows;
-  }, [sortedRows]);
-
   // Selection / copy state (filtering is uncontrolled — the built-in header
   // funnel menus own it)
   const [selection, setSelection] = useState<SelectionSummary | null>(null);
@@ -286,15 +266,33 @@ export function HeroGrid() {
     [],
   );
 
-  // onSelectionChange → summarize into row/col counts
-  const handleSelectionChange = useCallback(
-    (next: PretableSelectionState) => {
-      const colOrder = columns.map((column) => column.id);
-      const rowOrder = sortedRowsRef.current.map((row) => row.id);
-      setSelection(summarizeSelection(next, colOrder, rowOrder));
-    },
-    [columns],
-  );
+  // onSelectionChange → summarize into row/col counts.
+  //
+  // Both orders come off the engine, never off this component's `columns` or
+  // its rows: a range is a pair of boundary ids with everything between them
+  // implied, so it resolves only against the model the grid is DRAWING, and the
+  // two diverge the moment the grid draws something the props do not carry or
+  // stops drawing something they do. The synthetic row-select column is drawn
+  // and is in no prop; grouping adds the derived group column and removes the
+  // grouped one; a header funnel filters rows out of the drawn set entirely.
+  //
+  // `columnLayout` is that drawn column list, and `range(0, visibleRowCount)`
+  // the drawn row list — group headers included, because they are inside the
+  // rectangle ⌘C copies and the label speaks for that rectangle.
+  const handleSelectionChange = useCallback((next: PretableSelectionState) => {
+    const grid = gridRef.current;
+    if (grid === null) return;
+    const { snapshot } = grid.rowModel.getState();
+    setSelection(
+      summarizeSelection(
+        next,
+        grid.getState().columnLayout.map((column) => column.id),
+        snapshot
+          .range(0, snapshot.visibleRowCount)
+          .map((row) => (row.kind === "data" ? row.rowId : row.groupId)),
+      ),
+    );
+  }, []);
 
   // Copy feedback — transient "Copied ✓" toast when ⌘/Ctrl+C fires with a selection
   useEffect(() => {
@@ -339,6 +337,9 @@ export function HeroGrid() {
                 groupPanel={{ enabled: true }}
                 groupColumn={{ header: "Group" }}
                 model={rowModel}
+                onGridReady={(grid) => {
+                  gridRef.current = grid;
+                }}
                 onPaste={handlePaste}
                 onSelectionChange={handleSelectionChange}
                 rowSelectionColumn={{ enabled: true, headerCheckbox: true }}

apps/website/e2e/smoke.spec.ts

@@ -326,6 +326,46 @@ test("cockpit: filter, edit (guardrail + success), and select+copy under streami
   await expect(page.getByText(/selected · ⌘C to copy/i)).toBeVisible();
 });
 
+test("cockpit: the selection summary counts the rows the user can see", async ({
+  page,
+}) => {
+  // The sidebar's "N × M selected" claims to describe the rectangle ⌘C copies.
+  // A selection range is a pair of boundary ids with everything between them
+  // implied, so it only means anything against the order the grid is DRAWING.
+  //
+  // A filter is the cheapest way to make the drawn order diverge from any
+  // locally-held one — the drawn set is a subset — and it is a gesture the hero
+  // invites, so it is the case worth pinning. The grouped case is pinned in
+  // grouping.spec.ts, but only by counts that happen to coincide there: the
+  // derived group column replaces the grouped one, so a column total taken
+  // against the wrong order still lands on the right number.
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await waitForGridReady(page);
+
+  const sectorDialog = await openFilterMenu(page, "Sector");
+  await sectorDialog
+    .locator("[data-pretable-filter-set]")
+    .getByRole("checkbox", { name: "Consumer" })
+    .check();
+  await expect(page.locator("[data-pretable-row]")).toHaveCount(6);
+  await page.keyboard.press("Escape");
+
+  // Two adjacent rows ON SCREEN, three columns wide (symbol → sector → qty).
+  // Those two holdings are far apart in the unfiltered book, so a summary read
+  // against the whole roster reports the gap between them instead of the two
+  // rows the user dragged across — it read "9 × 3" for this exact selection.
+  const rows = page.locator("[data-pretable-row]");
+  await rows.nth(0).locator('[data-pretable-column-id="symbol"]').click();
+  await rows
+    .nth(1)
+    .locator('[data-pretable-column-id="qty"]')
+    .click({ modifiers: ["Shift"] });
+
+  await expect(page.getByRole("region", { name: "Selection" })).toContainText(
+    "2 × 3 selected",
+  );
+});
+
 test("cockpit: paste a TSV block into Qty (real clipboard on Chromium)", async ({
   page,
   context,