From 6a7f97769396151c378a7b88a20d903ad29c30ac Mon Sep 17 00:00:00 2001
From: Alex Rawlings <alex.rawlings@wycliffe.ca>
Date: Fri, 21 Aug 2026 10:04:34 -0600
Subject: [PATCH 1/8] Add search, sort, filter, and windowing to the analysis
 catalog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The catalog panel listed every analysis in one fixed order with no way
to
narrow it, so a draft of any size was only navigable by scrolling. The
query
core already supported all of this; only the UI that varies it was
missing.

Search, sort, and filter state is ephemeral useState inside the panel.
The
panel is mounted only while open, so closing it clears the query — a
filter
that survived a reload would leave rows missing with nothing on screen
saying
why.

Filters sit behind one control that reports how many are active, so a
panel
narrow enough to need filtering is not itself filled with them. All four
groups ship: the facet-derived ones (books, part of speech, confidence,
and
each named feature), missing gloss, breakdown, and unused-only. Against
today's data only books raises a control, since no write path records
the
others yet — the facets are rightly absent rather than offering a lone
choice.

Facets are derived from every row rather than from the rows a filter
left
standing, so a selection cannot collapse the facet that would widen it
back.

The new useRowWindow mounts a growing leading slice of the listing,
extending
as the end comes into reach and starting over when the query changes. It
is
deliberately not useSegmentWindow: a row list has no counterpart to the
scripture reference that hook holds still, so it needs none of that
geometry
bookkeeping.

A listing narrowed to nothing now says so, rather than reusing "No
analyses
recorded yet" and telling readers their draft is empty when they have
merely
mistyped. That message and the panel's original one both go through the
platform EmptyState.

Stubs the platform SearchBar, Select, MultiSelectComboBox, and
EmptyState,
each documenting where it diverges from the component it stands in for.
---
 __mocks__/lucide-react.tsx                    |   7 +
 __mocks__/platform-bible-react.tsx            | 251 +++++++++
 contributions/localizedStrings.json           |  24 +
 .../components/AnalysisCatalogPanel.test.tsx  | 531 +++++++++++++++++-
 src/components/AnalysisCatalogPanel.tsx       |  85 ++-
 src/components/CatalogFilterPopover.tsx       | 361 ++++++++++++
 src/components/CatalogQueryControls.tsx       | 129 +++++
 src/hooks/useRowWindow.ts                     |  92 +++
 8 files changed, 1449 insertions(+), 31 deletions(-)
 create mode 100644 src/components/CatalogFilterPopover.tsx
 create mode 100644 src/components/CatalogQueryControls.tsx
 create mode 100644 src/hooks/useRowWindow.ts

diff --git a/__mocks__/lucide-react.tsx b/__mocks__/lucide-react.tsx
index 38b2544b..78370dde 100644
--- a/__mocks__/lucide-react.tsx
+++ b/__mocks__/lucide-react.tsx
@@ -98,3 +98,10 @@ export function ChevronRight(props: Readonly<{ className?: string }>): ReactElem
 export function ChevronDown(props: Readonly<{ className?: string }>): ReactElement {
   return <svg data-testid="chevron-down-icon" {...props} />;
 }
+
+/**
+ * Stub for the ListFilter icon, marking the catalog's filter control.
+ */
+export function ListFilter(props: Readonly<{ className?: string }>): ReactElement {
+  return <svg data-testid="list-filter-icon" {...props} />;
+}
diff --git a/__mocks__/platform-bible-react.tsx b/__mocks__/platform-bible-react.tsx
index e59ecf58..7dc24400 100644
--- a/__mocks__/platform-bible-react.tsx
+++ b/__mocks__/platform-bible-react.tsx
@@ -459,6 +459,65 @@ export const Input = forwardRef<
   );
 });
 
+/**
+ * Stub search bar. The real component wraps a platform `Input` in a positioned container with a
+ * search icon and, once the query is non-empty, a clear button that reports `''`; this stub keeps
+ * the input and that button and drops the icon and positioning, which are visual only.
+ *
+ * It takes no `aria-label` and puts its `id` on the wrapper rather than the input, exactly as the
+ * real component does, so the input's accessible name comes from its placeholder alone — which is
+ * how a test has to find it.
+ */
+export const SearchBar = forwardRef<
+  HTMLInputElement,
+  Readonly<{
+    value: string;
+    onSearch: (searchQuery: string) => void;
+    placeholder?: string;
+    isFullWidth?: boolean;
+    className?: string;
+    isDisabled?: boolean;
+    id?: string;
+  }>
+>(function SearchBarImpl(
+  { value, onSearch, placeholder, isFullWidth: _isFullWidth, className, isDisabled, id },
+  ref,
+) {
+  return (
+    <div className={className} id={id}>
+      <input
+        ref={ref}
+        disabled={isDisabled}
+        onChange={(e) => onSearch(e.target.value)}
+        placeholder={placeholder}
+        type="text"
+        value={value}
+      />
+      {value && (
+        <button onClick={() => onSearch('')} type="button">
+          <span>Clear</span>
+        </button>
+      )}
+    </div>
+  );
+});
+
+/**
+ * Stub empty state rendered as the `<p role="status">` the real component produces, taking its
+ * `data-testid` from the `id` prop as that component does.
+ */
+export function EmptyState({
+  message,
+  id,
+  className,
+}: Readonly<{ message: string; id?: string; className?: string }>): ReactElement {
+  return (
+    <p className={className} data-testid={id} role="status">
+      {message}
+    </p>
+  );
+}
+
 /**
  * Stub textarea rendered as a native `<textarea>`, forwarding the attributes the extension's
  * migrated multi-line form fields rely on.
@@ -618,6 +677,198 @@ export function RadioGroupItem({
   );
 }
 
+/**
+ * Stub multi-select combo box. The real component is a `role="combobox"` button opening a popover
+ * that holds a cmdk `Command` palette — a search input over `CommandItem`s, each toggling its entry
+ * in or out of the selection. This stub keeps the trigger and the entries as `role="option"` buttons
+ * with the same toggle semantics, and drops the popover and the palette's own search: cmdk's
+ * filtering is the platform's behavior, not this extension's, and jsdom shows neither.
+ *
+ * Faithful in three ways the extension depends on. The trigger shows `customSelectedText` when the
+ * caller supplies one and the bare `placeholder` otherwise — the real component never lists the
+ * selection itself, so a caller that wants the selection named has to name it. An entry is resolved
+ * by its label, so two entries sharing a label collide, and one whose `value` is empty can never be
+ * selected at all. And `id` lands on the root; the stub additionally mirrors it to `data-testid`,
+ * since Testing Library has no by-id query and a test needs to scope to one of several controls.
+ */
+export function MultiSelectComboBox({
+  entries,
+  selected,
+  onChange,
+  placeholder,
+  customSelectedText,
+  isDisabled,
+  className,
+  id,
+}: Readonly<{
+  entries: readonly { value: string; label: string; secondaryLabel?: string; starred?: boolean }[];
+  selected: readonly string[];
+  onChange: (values: string[]) => void;
+  placeholder: string;
+  hasToggleAllFeature?: boolean;
+  selectAllText?: string;
+  clearAllText?: string;
+  commandEmptyMessage?: string;
+  customSelectedText?: string;
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  isDisabled?: boolean;
+  sortSelected?: boolean;
+  icon?: ReactNode;
+  className?: string;
+  variant?: 'default' | 'secondary' | 'destructive' | 'ghost' | 'outline' | 'link';
+  id?: string;
+}>): ReactElement {
+  const toggle = (value: string) =>
+    onChange(
+      selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value],
+    );
+  return (
+    <div className={className} data-testid={id} id={id}>
+      <button aria-expanded={false} disabled={isDisabled} role="combobox" type="button">
+        {customSelectedText ?? placeholder}
+      </button>
+      <div role="listbox">
+        {entries.map((entry) => (
+          <button
+            aria-selected={selected.includes(entry.value)}
+            key={entry.label}
+            // Resolving the entry by label, as the real component's own select handler does, so a
+            // stub test cannot pass on a collision the real component would drop.
+            onClick={() => {
+              const match = entries.find((candidate) => candidate.label === entry.label);
+              if (match?.value) toggle(match.value);
+            }}
+            role="option"
+            type="button"
+          >
+            {entry.label}
+            {entry.secondaryLabel}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Context carrying the {@link Select}'s value and change handler down to {@link SelectValue} and each
+ * {@link SelectItem}, mirroring how the real Radix-based component reaches its parts from the root.
+ */
+const SelectContext = createContext<{ onValueChange?: (value: string) => void; value?: string }>({});
+
+/**
+ * Stub select root, rendering its children unchanged. The real component is Radix's `Select.Root`,
+ * which renders no element of its own either.
+ */
+export function Select({
+  children,
+  onValueChange,
+  value,
+}: Readonly<{
+  children?: ReactNode;
+  onValueChange?: (value: string) => void;
+  value?: string;
+}>): ReactElement {
+  const contextValue = useMemo(() => ({ onValueChange, value }), [onValueChange, value]);
+  return <SelectContext.Provider value={contextValue}>{children}</SelectContext.Provider>;
+}
+
+/**
+ * Stub select trigger rendered as the `<button role="combobox">` the real component produces. The
+ * options are rendered unconditionally by {@link SelectContent} rather than on open, so a test picks
+ * one by clicking it rather than by opening the trigger first.
+ */
+export function SelectTrigger({
+  'aria-label': ariaLabel,
+  children,
+  className,
+  'data-testid': testId,
+  size: _size,
+}: Readonly<{
+  'aria-label'?: string;
+  children?: ReactNode;
+  className?: string;
+  'data-testid'?: string;
+  size?: 'sm' | 'default';
+}>): ReactElement {
+  return (
+    <button
+      aria-label={ariaLabel}
+      className={className}
+      data-testid={testId}
+      role="combobox"
+      type="button"
+    >
+      {children}
+    </button>
+  );
+}
+
+/**
+ * Stub select value. The real component renders the selected {@link SelectItem}'s own children,
+ * which it reads from the root's internal item registry; this stub has no registry, so it renders
+ * the selected **value** instead — enough to tell one selection from another, but not the label a
+ * reader would see. Assert on an item's `aria-selected` when the label matters.
+ */
+export function SelectValue({ placeholder }: Readonly<{ placeholder?: string }>): ReactElement {
+  const { value } = useContext(SelectContext);
+  return <>{value ?? placeholder}</>;
+}
+
+/**
+ * Stub select content rendered as the `<div role="listbox">` the real component produces, but
+ * unconditionally rather than in a portal opened by the trigger — the same simplification the
+ * {@link Popover} stub makes, and for the same reason: jsdom shows neither.
+ */
+export function SelectContent({
+  children,
+  className,
+}: Readonly<{
+  children?: ReactNode;
+  className?: string;
+  position?: 'item-aligned' | 'popper';
+}>): ReactElement {
+  return (
+    <div className={className} role="listbox">
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Stub select item rendered as the `<button role="option">` the real component produces, reporting
+ * its own value on click and marking itself selected when it matches the root's.
+ */
+export function SelectItem({
+  children,
+  className,
+  'data-testid': testId,
+  disabled,
+  value,
+}: Readonly<{
+  children?: ReactNode;
+  className?: string;
+  'data-testid'?: string;
+  disabled?: boolean;
+  value: string;
+}>): ReactElement {
+  const { onValueChange, value: selectedValue } = useContext(SelectContext);
+  return (
+    <button
+      aria-selected={selectedValue === value}
+      className={className}
+      data-testid={testId}
+      disabled={disabled}
+      onClick={() => onValueChange?.(value)}
+      role="option"
+      type="button"
+    >
+      {children}
+    </button>
+  );
+}
+
 /**
  * Context carrying the {@link Dialog}'s open-state change handler and generated title id down to
  * {@link DialogContent} and {@link DialogTitle}, mirroring how the real Radix-based component
diff --git a/contributions/localizedStrings.json b/contributions/localizedStrings.json
index 7aef2897..864b8b74 100644
--- a/contributions/localizedStrings.json
+++ b/contributions/localizedStrings.json
@@ -20,6 +20,30 @@
       "%interlinearizer_analysisCatalog_close%": "Close analysis catalog",
       "%interlinearizer_analysisCatalog_resize%": "Resize analysis catalog",
       "%interlinearizer_analysisCatalog_empty%": "No analyses recorded yet.",
+      "%interlinearizer_analysisCatalog_noMatches%": "No analyses match the search and filters.",
+      "%interlinearizer_analysisCatalog_searchPlaceholder%": "Search forms and glosses",
+      "%interlinearizer_analysisCatalog_sort%": "Sort by",
+      "%interlinearizer_analysisCatalog_sort_usageCount%": "Most used",
+      "%interlinearizer_analysisCatalog_sort_usageCountInBook%": "Most used in {book}",
+      "%interlinearizer_analysisCatalog_sort_firstUsage%": "First occurrence",
+      "%interlinearizer_analysisCatalog_sort_surfaceText%": "Form",
+      "%interlinearizer_analysisCatalog_sort_gloss%": "Gloss",
+      "%interlinearizer_analysisCatalog_filters%": "Filters",
+      "%interlinearizer_analysisCatalog_filtersActive%": "Filters ({count})",
+      "%interlinearizer_analysisCatalog_filter_selection%": "{label}: {values}",
+      "%interlinearizer_analysisCatalog_filter_untagged%": "(none)",
+      "%interlinearizer_analysisCatalog_filter_books%": "Books",
+      "%interlinearizer_analysisCatalog_filter_pos%": "Part of speech",
+      "%interlinearizer_analysisCatalog_filter_confidence%": "Confidence",
+      "%interlinearizer_analysisCatalog_filter_missingGloss%": "Missing gloss in {language}",
+      "%interlinearizer_analysisCatalog_filter_morphemes%": "Broken down or not",
+      "%interlinearizer_analysisCatalog_filter_morphemes_has%": "Broken down",
+      "%interlinearizer_analysisCatalog_filter_morphemes_lacks%": "Not broken down",
+      "%interlinearizer_analysisCatalog_filter_zeroUsages%": "Used nowhere",
+      "%interlinearizer_analysisCatalog_confidence_high%": "High",
+      "%interlinearizer_analysisCatalog_confidence_medium%": "Medium",
+      "%interlinearizer_analysisCatalog_confidence_low%": "Low",
+      "%interlinearizer_analysisCatalog_confidence_guess%": "Guess",
       "%interlinearizer_analysisCatalog_noGloss%": "(no gloss)",
       "%interlinearizer_analysisCatalog_usageCount%": "Uses in the whole draft",
       "%interlinearizer_analysisCatalog_usageCountInBook%": "Uses in {book}",
diff --git a/src/__tests__/components/AnalysisCatalogPanel.test.tsx b/src/__tests__/components/AnalysisCatalogPanel.test.tsx
index 179e9a0b..8539a919 100644
--- a/src/__tests__/components/AnalysisCatalogPanel.test.tsx
+++ b/src/__tests__/components/AnalysisCatalogPanel.test.tsx
@@ -2,10 +2,10 @@
 /// <reference types="@testing-library/jest-dom" />
 
 import type { SerializedVerseRef } from '@sillsdev/scripture';
-import { render, screen, within } from '@testing-library/react';
+import { act, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { AssignmentStatus, TextAnalysis, TokenAnalysisLink } from 'interlinearizer';
-import { useEffect } from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
 import AnalysisCatalogPanel from '../../components/AnalysisCatalogPanel';
 import { AnalysisStoreProvider } from '../../components/AnalysisStore';
 import { InterlinearNavProvider, useInterlinearNav } from '../../components/InterlinearNavContext';
@@ -13,6 +13,15 @@ import { emptyAnalysis } from '../../types/empty-factories';
 import { defaultScrRef, FIXTURE_STAMPS, makeScrollGroupHook } from '../test-helpers';
 import { mockKeyAsValueLocalizedStrings } from './test-helpers';
 
+/**
+ * The intersection-observer Jest stub exposes a helper for firing intersections on the global
+ * object. Declared here so the windowing tests reach it without a type assertion.
+ */
+declare global {
+  // eslint-disable-next-line no-var, vars-on-top
+  var triggerIntersection: (el: Element, isIntersecting: boolean) => void;
+}
+
 /** Builds a link from `tokenRef` to the analysis, approved unless another status is given. */
 function link(
   analysisId: string,
@@ -47,31 +56,103 @@ type PanelOptions = Partial<{
   analysisLanguage: string;
   /** Records every reference the panel navigates to, through the host scroll-group hook. */
   setScrRef: (ref: SerializedVerseRef) => void;
+  /** Reference the host scroll group reports, i.e. where the view already sits. */
+  scrRef: SerializedVerseRef;
   /** Book the focus probe stands in for, i.e. the one the view has mounted. */
   mountedBook: string;
 }>;
 
-/** Renders the panel inside a seeded analysis store and a real navigation provider. */
-function renderPanel(overrides: PanelOptions = {}) {
-  return render(
+/**
+ * Wraps a subject in the seeded analysis store and real navigation provider the panel needs.
+ *
+ * A navigation provider is remounted — losing the focus request it holds — by any change to the
+ * element type above it, so a rerender that swaps the subject has to keep this wrapper in place
+ * rather than rebuild an equivalent tree around it.
+ */
+function PanelProviders({
+  children,
+  overrides,
+}: Readonly<{ children: ReactNode; overrides: PanelOptions }>) {
+  return (
     <InterlinearNavProvider
-      useWebViewScrollGroupScrRef={makeScrollGroupHook(defaultScrRef, overrides.setScrRef)}
+      useWebViewScrollGroupScrRef={makeScrollGroupHook(
+        overrides.scrRef ?? defaultScrRef,
+        overrides.setScrRef,
+      )}
     >
       <AnalysisStoreProvider
         analysisLanguage={overrides.analysisLanguage ?? 'en'}
         initialAnalysis={overrides.analysis ?? emptyAnalysis()}
       >
         <FocusRequestProbe bookCode={overrides.mountedBook ?? 'GEN'} />
+        {children}
+      </AnalysisStoreProvider>
+    </InterlinearNavProvider>
+  );
+}
+
+/** Renders the panel inside a seeded analysis store and a real navigation provider. */
+function renderPanel(overrides: PanelOptions = {}) {
+  return render(
+    <PanelProviders overrides={overrides}>
+      <AnalysisCatalogPanel
+        currentBook={overrides.currentBook ?? 'GEN'}
+        onClose={overrides.onClose ?? (() => {})}
+        sourceLanguageTag="el"
+      />
+    </PanelProviders>,
+  );
+}
+
+/**
+ * The panel as the loader mounts it: conditionally rendered, so its own close control unmounts it
+ * and reopening builds a fresh one. That arrangement is what makes the query controls ephemeral.
+ */
+function ReopenableCatalog() {
+  const [isOpen, setIsOpen] = useState(true);
+  return (
+    <>
+      <button data-testid="reopen-catalog" onClick={() => setIsOpen(true)} type="button">
+        reopen
+      </button>
+      {isOpen && (
         <AnalysisCatalogPanel
-          currentBook={overrides.currentBook ?? 'GEN'}
-          onClose={overrides.onClose ?? (() => {})}
+          currentBook="GEN"
+          onClose={() => setIsOpen(false)}
           sourceLanguageTag="el"
         />
-      </AnalysisStoreProvider>
-    </InterlinearNavProvider>,
+      )}
+    </>
   );
 }
 
+/** Renders the panel so a test can close and reopen it. */
+function renderReopenablePanel(overrides: PanelOptions = {}) {
+  return render(
+    <PanelProviders overrides={overrides}>
+      <ReopenableCatalog />
+    </PanelProviders>,
+  );
+}
+
+/** The ids of the rows the list is showing, in the order it shows them. */
+function listedAnalysisIds(): (string | undefined)[] {
+  return screen.getAllByTestId('catalog-row').map((row) => row.dataset.analysisId);
+}
+
+/**
+ * The search input, located by its placeholder — the only accessible name the platform `SearchBar`
+ * gives its input, which takes no `aria-label` and puts its `id` on its wrapper.
+ */
+function searchBox(): HTMLElement {
+  return screen.getByPlaceholderText('%interlinearizer_analysisCatalog_searchPlaceholder%');
+}
+
+/** Opens the filter popover, whose controls are mounted only while it is open. */
+async function openFilters(): Promise<void> {
+  await userEvent.click(screen.getByTestId('catalog-filters-button'));
+}
+
 /** Reads the catalog row for `analysisId`, failing the test when the list has no such row. */
 function rowFor(analysisId: string): HTMLElement {
   const row = screen
@@ -279,6 +360,404 @@ describe('AnalysisCatalogPanel', () => {
     });
   });
 
+  describe('searching', () => {
+    /** Two analyses sharing no letter, so any query separates them. */
+    const TWO_WORDS: TextAnalysis = {
+      ...emptyAnalysis(),
+      tokenAnalyses: [
+        { ...FIXTURE_STAMPS, id: 'logos', surfaceText: 'λόγος', gloss: { en: 'word' } },
+        { ...FIXTURE_STAMPS, id: 'arche', surfaceText: 'ἀρχῇ', gloss: { en: 'beginning' } },
+      ],
+      tokenAnalysisLinks: [link('logos', 'GEN 1:1:0'), link('arche', 'GEN 1:2:0')],
+    };
+
+    it('narrows the list to the analyses a query matches', async () => {
+      renderPanel({ analysis: TWO_WORDS });
+
+      await userEvent.type(searchBox(), 'begin');
+
+      expect(listedAnalysisIds()).toEqual(['arche']);
+    });
+
+    it('forgets the query when the panel is closed and reopened', async () => {
+      renderReopenablePanel({ analysis: TWO_WORDS });
+      await userEvent.type(searchBox(), 'begin');
+
+      await userEvent.click(screen.getByTestId('analysis-catalog-close'));
+      await userEvent.click(screen.getByTestId('reopen-catalog'));
+
+      // A query that outlived the panel would reopen it onto a part of the list with nothing on
+      // screen saying which part, so the state is deliberately tied to the mount.
+      expect(searchBox()).toHaveValue('');
+      expect(listedAnalysisIds()).toEqual(['arche', 'logos']);
+    });
+
+    it('says the query matched nothing rather than that the draft holds nothing', async () => {
+      renderPanel({ analysis: TWO_WORDS });
+
+      await userEvent.type(searchBox(), 'ζζζ');
+
+      const panel = screen.getByTestId('analysis-catalog-panel');
+      expect(panel).toHaveTextContent('%interlinearizer_analysisCatalog_noMatches%');
+      expect(panel).not.toHaveTextContent('%interlinearizer_analysisCatalog_empty%');
+    });
+  });
+
+  describe('sorting', () => {
+    /**
+     * Three analyses whose usage order and gloss order disagree at every position, so a reorder
+     * cannot pass by coincidence.
+     */
+    const THREE: TextAnalysis = {
+      ...emptyAnalysis(),
+      tokenAnalyses: [
+        { ...FIXTURE_STAMPS, id: 'once', surfaceText: 'γῆ', gloss: { en: 'apple' } },
+        { ...FIXTURE_STAMPS, id: 'thrice', surfaceText: 'λόγος', gloss: { en: 'cherry' } },
+        { ...FIXTURE_STAMPS, id: 'twice', surfaceText: 'ἀρχῇ', gloss: { en: 'banana' } },
+      ],
+      tokenAnalysisLinks: [
+        link('once', 'GEN 1:1:0'),
+        link('twice', 'GEN 1:2:0'),
+        link('twice', 'GEN 1:3:0'),
+        link('thrice', 'GEN 1:4:0'),
+        link('thrice', 'GEN 1:5:0'),
+        link('thrice', 'GEN 1:6:0'),
+      ],
+    };
+
+    it('reorders the rows when a different sort is chosen', async () => {
+      renderPanel({ analysis: THREE });
+      expect(listedAnalysisIds()).toEqual(['thrice', 'twice', 'once']);
+
+      await userEvent.click(screen.getByTestId('catalog-sort-gloss'));
+
+      expect(listedAnalysisIds()).toEqual(['once', 'twice', 'thrice']);
+    });
+  });
+
+  describe('filtering', () => {
+    /** One analysis used only in GEN and one used only in EXO, so a book choice separates them. */
+    const PER_BOOK: TextAnalysis = {
+      ...emptyAnalysis(),
+      tokenAnalyses: [
+        { ...FIXTURE_STAMPS, id: 'in-gen', surfaceText: 'γῆ' },
+        { ...FIXTURE_STAMPS, id: 'in-exo', surfaceText: 'λόγος' },
+      ],
+      tokenAnalysisLinks: [link('in-gen', 'GEN 1:1:0'), link('in-exo', 'EXO 3:14:0')],
+    };
+
+    it('narrows the list to the analyses used in a chosen book', async () => {
+      renderPanel({ analysis: PER_BOOK });
+      await openFilters();
+
+      await userEvent.click(screen.getByRole('option', { name: 'EXO' }));
+
+      expect(listedAnalysisIds()).toEqual(['in-exo']);
+    });
+
+    it('restores the full list when the last book choice is cleared', async () => {
+      renderPanel({ analysis: PER_BOOK });
+      await openFilters();
+      await userEvent.click(screen.getByRole('option', { name: 'EXO' }));
+
+      await userEvent.click(screen.getByRole('option', { name: 'EXO' }));
+
+      // An empty selection reads as no filter at all rather than as one nothing satisfies, so
+      // deselecting the last choice is how a reader gets the whole draft back.
+      expect(listedAnalysisIds()).toEqual(['in-gen', 'in-exo']);
+    });
+
+    it('narrows the list to the analyses carrying a chosen part of speech', async () => {
+      const analysis: TextAnalysis = {
+        ...emptyAnalysis(),
+        tokenAnalyses: [
+          { ...FIXTURE_STAMPS, id: 'noun', surfaceText: 'λόγος', pos: 'noun' },
+          { ...FIXTURE_STAMPS, id: 'verb', surfaceText: 'ἦν', pos: 'verb' },
+        ],
+        tokenAnalysisLinks: [link('noun', 'GEN 1:1:0'), link('verb', 'GEN 1:2:0')],
+      };
+      renderPanel({ analysis });
+      await openFilters();
+
+      await userEvent.click(screen.getByRole('option', { name: 'verb' }));
+
+      expect(listedAnalysisIds()).toEqual(['verb']);
+    });
+
+    it('narrows the list to the analyses carrying no part of speech at all', async () => {
+      const analysis: TextAnalysis = {
+        ...emptyAnalysis(),
+        tokenAnalyses: [
+          { ...FIXTURE_STAMPS, id: 'tagged', surfaceText: 'λόγος', pos: 'noun' },
+          { ...FIXTURE_STAMPS, id: 'untagged', surfaceText: 'ἦν' },
+        ],
+        tokenAnalysisLinks: [link('tagged', 'GEN 1:1:0'), link('untagged', 'GEN 1:2:0')],
+      };
+      renderPanel({ analysis });
+      await openFilters();
+
+      // Carrying no value is a choice of its own, which is what lets a reader ask which analyses
+      // still need the field rather than only which already carry a given value.
+      await userEvent.click(
+        screen.getByRole('option', {
+          name: '%interlinearizer_analysisCatalog_filter_untagged%',
+        }),
+      );
+
+      expect(listedAnalysisIds()).toEqual(['untagged']);
+    });
+
+    it('narrows the list to the analyses carrying a chosen confidence', async () => {
+      const analysis: TextAnalysis = {
+        ...emptyAnalysis(),
+        tokenAnalyses: [
+          { ...FIXTURE_STAMPS, id: 'sure', surfaceText: 'λόγος', confidence: 'high' },
+          { ...FIXTURE_STAMPS, id: 'unsure', surfaceText: 'ἦν', confidence: 'guess' },
+        ],
+        tokenAnalysisLinks: [link('sure', 'GEN 1:1:0'), link('unsure', 'GEN 1:2:0')],
+      };
+      renderPanel({ analysis });
+      await openFilters();
+
+      // Confidence is a closed vocabulary, so unlike a part of speech it is offered under a
+      // localized name rather than under the value the record stores.
+      await userEvent.click(
+        screen.getByRole('option', {
+          name: '%interlinearizer_analysisCatalog_confidence_guess%',
+        }),
+      );
+
+      expect(listedAnalysisIds()).toEqual(['unsure']);
+    });
+
+    it('narrows the list to the analyses carrying a chosen value of a named feature', async () => {
+      const analysis: TextAnalysis = {
+        ...emptyAnalysis(),
+        tokenAnalyses: [
+          {
+            ...FIXTURE_STAMPS,
+            id: 'nom',
+            surfaceText: 'λόγος',
+            features: { case: 'nominative' },
+          },
+          { ...FIXTURE_STAMPS, id: 'gen', surfaceText: 'λόγου', features: { case: 'genitive' } },
+        ],
+        tokenAnalysisLinks: [link('nom', 'GEN 1:1:0'), link('gen', 'GEN 1:2:0')],
+      };
+      renderPanel({ analysis });
+      await openFilters();
+
+      // A feature's name and values are both free text out of the data, so each named feature
+      // raises its own control, under its own name.
+      await userEvent.click(screen.getByRole('option', { name: 'genitive' }));
+
+      expect(listedAnalysisIds()).toEqual(['gen']);
+    });
+
+    it('offers no book choice for a draft confined to one book', async () => {
+      const analysis: TextAnalysis = {
+        ...emptyAnalysis(),
+        tokenAnalyses: [
+          { ...FIXTURE_STAMPS, id: 'ta-1', surfaceText: 'γῆ' },
+          { ...FIXTURE_STAMPS, id: 'ta-2', surfaceText: 'λόγος' },
+        ],
+        tokenAnalysisLinks: [link('ta-1', 'GEN 1:1:0'), link('ta-2', 'GEN 1:2:0')],
+      };
+      renderPanel({ analysis });
+
+      await openFilters();
+
+      // One book is the state every row is already in, so choosing it would narrow nothing.
+      expect(
+        within(screen.getByTestId('catalog-filters-panel')).queryByTestId('catalog-filter-books'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('offers no choices for the fields nothing has recorded', async () => {
+      renderPanel({ analysis: PER_BOOK });
+
+      await openFilters();
+
+      // No write path records a part of speech, a confidence, or a feature yet, so every row is
+      // untagged for each of them and the facets are rightly absent rather than offering "(none)"
+      // alone — the tested-for outcome, not a gap in the controls.
+      const panel = within(screen.getByTestId('catalog-filters-panel'));
+      expect(panel.queryByTestId('catalog-filter-pos')).not.toBeInTheDocument();
+      expect(panel.queryByTestId('catalog-filter-confidence')).not.toBeInTheDocument();
+      expect(panel.queryAllByTestId(/^catalog-filter-feature-/)).toHaveLength(0);
+    });
+
+    it('narrows the list to the analyses with no gloss in the active language', async () => {
+      const analysis: TextAnalysis = {
+        ...emptyAnalysis(),
+        tokenAnalyses: [
+          { ...FIXTURE_STAMPS, id: 'glossed', surfaceText: 'λόγος', gloss: { en: 'word' } },
+          // A gloss in another language is no gloss here: the filter reads the active one.
+          { ...FIXTURE_STAMPS, id: 'elsewhere', surfaceText: 'ἦν', gloss: { fr: 'était' } },
+        ],
+        tokenAnalysisLinks: [link('glossed', 'GEN 1:1:0'), link('elsewhere', 'GEN 1:2:0')],
+      };
+      renderPanel({ analysis, analysisLanguage: 'en' });
+      await openFilters();
+
+      await userEvent.click(
+        screen.getByRole('checkbox', {
+          name: '%interlinearizer_analysisCatalog_filter_missingGloss%',
+        }),
+      );
+
+      expect(listedAnalysisIds()).toEqual(['elsewhere']);
+    });
+
+    /** One analysis broken into morphemes and one not, so the breakdown filter separates them. */
+    const PER_BREAKDOWN: TextAnalysis = {
+      ...emptyAnalysis(),
+      tokenAnalyses: [
+        {
+          ...FIXTURE_STAMPS,
+          id: 'analyzed',
+          surfaceText: 'λόγος',
+          morphemes: [{ ...FIXTURE_STAMPS, id: 'm-1', form: 'λογ', writingSystem: 'el' }],
+        },
+        { ...FIXTURE_STAMPS, id: 'whole', surfaceText: 'ἦν' },
+      ],
+      tokenAnalysisLinks: [link('analyzed', 'GEN 1:1:0'), link('whole', 'GEN 1:2:0')],
+    };
+
+    it('narrows the list to the analyses carrying a morpheme breakdown', async () => {
+      renderPanel({ analysis: PER_BREAKDOWN });
+      await openFilters();
+
+      await userEvent.click(screen.getByTestId('catalog-filter-morphemes-has'));
+
+      expect(listedAnalysisIds()).toEqual(['analyzed']);
+    });
+
+    it('narrows the list to the analyses carrying no morpheme breakdown', async () => {
+      renderPanel({ analysis: PER_BREAKDOWN });
+      await openFilters();
+
+      await userEvent.click(screen.getByTestId('catalog-filter-morphemes-lacks'));
+
+      expect(listedAnalysisIds()).toEqual(['whole']);
+    });
+
+    it('restores the full list when the breakdown filter is set back to either', async () => {
+      renderPanel({ analysis: PER_BREAKDOWN });
+      await openFilters();
+      await userEvent.click(screen.getByTestId('catalog-filter-morphemes-has'));
+
+      await userEvent.click(screen.getByTestId('catalog-filter-morphemes-any'));
+
+      // Ordered by form under the source language's collation, eta before lambda.
+      expect(listedAnalysisIds()).toEqual(['whole', 'analyzed']);
+    });
+
+    it('keeps only the analyses nothing uses', async () => {
+      // Built by hand because no write path produces an unused analysis: detaching the last link
+      // drops the payload with it.
+      const analysis: TextAnalysis = {
+        ...emptyAnalysis(),
+        tokenAnalyses: [
+          { ...FIXTURE_STAMPS, id: 'used', surfaceText: 'λόγος' },
+          { ...FIXTURE_STAMPS, id: 'unused', surfaceText: 'ἦν' },
+        ],
+        tokenAnalysisLinks: [link('used', 'GEN 1:1:0')],
+      };
+      renderPanel({ analysis });
+      await openFilters();
+
+      await userEvent.click(
+        screen.getByRole('checkbox', {
+          name: '%interlinearizer_analysisCatalog_filter_zeroUsages%',
+        }),
+      );
+
+      expect(listedAnalysisIds()).toEqual(['unused']);
+    });
+
+    it('says how many filters are narrowing the list', async () => {
+      // The count is the only thing on screen saying the list is narrowed once the popover is
+      // closed again, so it is resolved for real rather than as its own key.
+      mockKeyAsValueLocalizedStrings({
+        '%interlinearizer_analysisCatalog_filtersActive%': 'Filters ({count})',
+      });
+      renderPanel({ analysis: PER_BOOK });
+      await openFilters();
+
+      await userEvent.click(screen.getByRole('option', { name: 'EXO' }));
+      await userEvent.click(
+        screen.getByRole('checkbox', {
+          name: '%interlinearizer_analysisCatalog_filter_missingGloss%',
+        }),
+      );
+
+      expect(screen.getByTestId('catalog-filters-button')).toHaveTextContent('Filters (2)');
+    });
+
+    it('names the filter control alone while nothing is narrowing the list', async () => {
+      renderPanel({ analysis: PER_BOOK });
+
+      await openFilters();
+
+      expect(screen.getByTestId('catalog-filters-button')).toHaveTextContent(
+        '%interlinearizer_analysisCatalog_filters%',
+      );
+    });
+  });
+
+  describe('windowing the list', () => {
+    /** Far more analyses than a panel could ever show at once. */
+    const MANY: TextAnalysis = {
+      ...emptyAnalysis(),
+      tokenAnalyses: Array.from({ length: 100 }, (_unused, index) => ({
+        ...FIXTURE_STAMPS,
+        id: `ta-${index}`,
+        surfaceText: `word${index}`,
+      })),
+      tokenAnalysisLinks: Array.from({ length: 100 }, (_unused, index) =>
+        link(`ta-${index}`, `GEN 1:${index + 1}:0`),
+      ),
+    };
+
+    /** Reports the end of the list as having come into view. */
+    function reachListEnd(): void {
+      act(() => {
+        global.triggerIntersection(screen.getByTestId('catalog-rows-sentinel'), true);
+      });
+    }
+
+    it('mounts only part of a long list', () => {
+      renderPanel({ analysis: MANY });
+
+      // A draft accumulates analyses without bound, and every row carries its own expander and
+      // usage list, so the whole listing is never in the document at once.
+      const mounted = screen.getAllByTestId('catalog-row').length;
+      expect(mounted).toBeGreaterThan(0);
+      expect(mounted).toBeLessThan(100);
+    });
+
+    it('extends the window when the end of the list comes into view', () => {
+      renderPanel({ analysis: MANY });
+      const before = screen.getAllByTestId('catalog-row').length;
+
+      reachListEnd();
+
+      expect(screen.getAllByTestId('catalog-row').length).toBeGreaterThan(before);
+    });
+
+    it('starts the window over when the query changes', async () => {
+      renderPanel({ analysis: MANY });
+      reachListEnd();
+      const grown = screen.getAllByTestId('catalog-row').length;
+
+      // Matches every row, so the listing is the same length as before — only the window resets.
+      await userEvent.type(searchBox(), 'word');
+
+      expect(screen.getAllByTestId('catalog-row').length).toBeLessThan(grown);
+    });
+  });
+
   describe('row detail', () => {
     /** An analysis with a two-morpheme breakdown, used across the detail tests. */
     const ANALYZED: TextAnalysis = {
@@ -483,19 +962,18 @@ describe('AnalysisCatalogPanel', () => {
       // mounted yet, and claiming would drop the request before it could be honored.
       expect(claimedFocusRequest).toBeUndefined();
 
-      // The host echoes the jump's reference, then EXO's USJ arrives and its view mounts.
+      // The host echoes the jump's reference, then EXO's USJ arrives and its view mounts. The panel
+      // itself is left out to stand for the moment before it has re-rendered against the new book.
       rerender(
-        <InterlinearNavProvider
-          useWebViewScrollGroupScrRef={makeScrollGroupHook({
-            book: 'EXO',
-            chapterNum: 3,
-            verseNum: 14,
-          })}
+        <PanelProviders
+          overrides={{
+            analysis: TWO_BOOKS,
+            mountedBook: 'EXO',
+            scrRef: { book: 'EXO', chapterNum: 3, verseNum: 14 },
+          }}
         >
-          <AnalysisStoreProvider analysisLanguage="en" initialAnalysis={TWO_BOOKS}>
-            <FocusRequestProbe bookCode="EXO" />
-          </AnalysisStoreProvider>
-        </InterlinearNavProvider>,
+          {undefined}
+        </PanelProviders>,
       );
 
       expect(claimedFocusRequest).toBe('EXO 3:14:8');
@@ -551,6 +1029,17 @@ describe('AnalysisCatalogPanel', () => {
       expect(rowFor('ta-1')).toHaveAttribute('data-selected', 'true');
     });
 
+    it('keeps the jumped-from row selected through a search that still matches it', async () => {
+      renderPanel({ analysis: TWO_BOOKS });
+      await clickUsage('GEN 1:1:0');
+
+      await userEvent.type(searchBox(), 'λογ');
+
+      // The mark is what tells a reader where the view they are looking at came from, so narrowing
+      // the list around that very row must not be what erases it.
+      expect(rowFor('ta-1')).toHaveAttribute('data-selected', 'true');
+    });
+
     it('leaves an untouched row unselected', async () => {
       const analysis: TextAnalysis = {
         ...TWO_BOOKS,
diff --git a/src/components/AnalysisCatalogPanel.tsx b/src/components/AnalysisCatalogPanel.tsx
index f6aae721..f2159533 100644
--- a/src/components/AnalysisCatalogPanel.tsx
+++ b/src/components/AnalysisCatalogPanel.tsx
@@ -5,9 +5,18 @@ import { Button, EmptyState, TooltipProvider } from 'platform-bible-react';
 import { formatReplacementString } from 'platform-bible-utils';
 import { useCallback, useMemo, useState } from 'react';
 import { useAnalysisLanguage, useCatalogRows } from './AnalysisStore';
+import CatalogQueryControls, { QUERY_CONTROL_STRING_KEYS } from './CatalogQueryControls';
 import CatalogRowView, { ROW_STRING_KEYS } from './CatalogRowView';
 import { useInterlinearNav } from './InterlinearNavContext';
-import { applyCatalogQuery, type CatalogQuery, type CatalogUsage } from '../utils/analysis-query';
+import useRowWindow from '../hooks/useRowWindow';
+import {
+  applyCatalogQuery,
+  deriveFacets,
+  type CatalogFilters,
+  type CatalogQuery,
+  type CatalogSort,
+  type CatalogUsage,
+} from '../utils/analysis-query';
 import { collatorForTag } from '../utils/language-tags';
 
 /**
@@ -22,6 +31,8 @@ const STRING_KEYS = [
   '%interlinearizer_analysisCatalog_resize%',
   '%interlinearizer_analysisCatalog_empty%',
   '%interlinearizer_analysisCatalog_usageCountInBook%',
+  '%interlinearizer_analysisCatalog_noMatches%',
+  ...QUERY_CONTROL_STRING_KEYS,
   ...ROW_STRING_KEYS,
 ] as const satisfies `%${string}%`[];
 
@@ -52,18 +63,28 @@ export default function AnalysisCatalogPanel({
   const catalogRows = useCatalogRows(currentBook);
 
   /**
-   * How the listing is narrowed and ordered: unnarrowed, most-used first. The panel offers no
-   * control over any of it, so the values here are the whole of what the reader gets.
+   * What the reader has typed into the search box. Ephemeral rather than persisted: the panel is
+   * mounted only while it is open, so closing it clears the query — a filter that outlived a reload
+   * would leave rows missing with nothing on screen saying why.
    */
+  const [search, setSearch] = useState('');
+
+  /** How the listing is ordered. Most-used first, the question the catalog is opened to answer. */
+  const [sort, setSort] = useState<CatalogSort>('usageCount');
+
+  /** Which rows the listing keeps. Nothing narrowed until the reader chooses something. */
+  const [filters, setFilters] = useState<CatalogFilters>({});
+
+  /** How the listing is narrowed and ordered, from the controls above the list. */
   const query = useMemo<CatalogQuery>(
     () => ({
-      search: '',
-      sort: 'usageCount',
-      filters: {},
+      search,
+      sort,
+      filters,
       surfaceCollator: collatorForTag(sourceLanguageTag),
       glossCollator: collatorForTag(analysisLanguage),
     }),
-    [sourceLanguageTag, analysisLanguage],
+    [search, sort, filters, sourceLanguageTag, analysisLanguage],
   );
 
   const rows = useMemo(() => applyCatalogQuery(catalogRows, query), [catalogRows, query]);
@@ -97,6 +118,20 @@ export default function AnalysisCatalogPanel({
     );
   }, [localizedStrings, localizedBookName, bookNameKeys, currentBook]);
 
+  /**
+   * The choices worth offering as filters, taken against every row the draft holds rather than the
+   * rows a filter left standing: a facet judged against its own selection's survivors would
+   * collapse to that selection, leaving no choice on screen to widen it back by.
+   */
+  const facets = useMemo(() => deriveFacets(catalogRows), [catalogRows]);
+
+  /**
+   * The slice of the listing that is actually mounted. A draft accumulates analyses without bound
+   * and every row carries its own expander and usage list, so the list grows as it is scrolled
+   * rather than rendering whole.
+   */
+  const { windowRows, scrollRef, sentinelRef } = useRowWindow(rows);
+
   const { navigate, requestFocusToken } = useInterlinearNav();
 
   /**
@@ -150,14 +185,38 @@ export default function AnalysisCatalogPanel({
           </Button>
         </div>
 
+        <CatalogQueryControls
+          analysisLanguage={analysisLanguage}
+          currentBook={currentBook}
+          facets={facets}
+          filters={filters}
+          localizedStrings={localizedStrings}
+          onFiltersChange={setFilters}
+          onSearchChange={setSearch}
+          onSortChange={setSort}
+          search={search}
+          sort={sort}
+        />
+
         {rows.length === 0 ? (
+          // Two ways to have nothing to list, and they call for different answers: a draft that has
+          // recorded nothing yet, and a query that kept none of what it did. Telling a reader the
+          // draft is empty when they have merely mistyped would send them looking for lost work.
           <EmptyState
             className="tw:px-3 tw:py-2"
-            message={localizedStrings['%interlinearizer_analysisCatalog_empty%']}
+            id="analysis-catalog-empty"
+            message={
+              catalogRows.length === 0
+                ? localizedStrings['%interlinearizer_analysisCatalog_empty%']
+                : localizedStrings['%interlinearizer_analysisCatalog_noMatches%']
+            }
           />
         ) : (
-          <ul className="tw:flex tw:flex-col tw:flex-1 tw:min-h-0 tw:overflow-y-auto">
-            {rows.map((row) => (
+          <ul
+            className="tw:flex tw:flex-col tw:flex-1 tw:min-h-0 tw:overflow-y-auto"
+            ref={scrollRef}
+          >
+            {windowRows.map((row) => (
               <CatalogRowView
                 key={row.analysisId}
                 analysisLanguage={analysisLanguage}
@@ -168,6 +227,12 @@ export default function AnalysisCatalogPanel({
                 usageCountInBookLabel={usageCountInBookLabel}
               />
             ))}
+            {/*
+              Sits after the last mounted row, so reaching it means the reader has scrolled to the
+              end of what is mounted rather than to the end of the listing. A list item rather than a
+              bare div, since a `ul` may hold nothing else.
+            */}
+            <li aria-hidden data-testid="catalog-rows-sentinel" ref={sentinelRef} />
           </ul>
         )}
       </div>
diff --git a/src/components/CatalogFilterPopover.tsx b/src/components/CatalogFilterPopover.tsx
new file mode 100644
index 00000000..a244ccf0
--- /dev/null
+++ b/src/components/CatalogFilterPopover.tsx
@@ -0,0 +1,361 @@
+import { ListFilter } from 'lucide-react';
+import {
+  Button,
+  Label,
+  MultiSelectComboBox,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+} from 'platform-bible-react';
+import { formatReplacementString, type LanguageStrings } from 'platform-bible-utils';
+import { useId, useState } from 'react';
+import type { Confidence } from 'interlinearizer';
+import type { CatalogFacets, CatalogFilters } from '../utils/analysis-query';
+
+/**
+ * The name each confidence level is offered under. Confidence is a closed vocabulary, unlike a part
+ * of speech or a feature value, so it is named rather than shown as the record stores it. Covers
+ * every member of {@link Confidence}, so a level added there fails to compile until it is named
+ * here.
+ */
+const CONFIDENCE_LABEL_KEYS = {
+  high: '%interlinearizer_analysisCatalog_confidence_high%',
+  medium: '%interlinearizer_analysisCatalog_confidence_medium%',
+  low: '%interlinearizer_analysisCatalog_confidence_low%',
+  guess: '%interlinearizer_analysisCatalog_confidence_guess%',
+} as const satisfies Record<Confidence, `%${string}%`>;
+
+/** Localized string keys the filter controls render. */
+export const FILTER_STRING_KEYS = [
+  '%interlinearizer_analysisCatalog_filters%',
+  '%interlinearizer_analysisCatalog_filtersActive%',
+  '%interlinearizer_analysisCatalog_filter_selection%',
+  '%interlinearizer_analysisCatalog_filter_untagged%',
+  '%interlinearizer_analysisCatalog_filter_books%',
+  '%interlinearizer_analysisCatalog_filter_pos%',
+  '%interlinearizer_analysisCatalog_filter_confidence%',
+  '%interlinearizer_analysisCatalog_filter_missingGloss%',
+  '%interlinearizer_analysisCatalog_filter_morphemes%',
+  '%interlinearizer_analysisCatalog_filter_morphemes_has%',
+  '%interlinearizer_analysisCatalog_filter_morphemes_lacks%',
+  '%interlinearizer_analysisCatalog_filter_zeroUsages%',
+  ...Object.values(CONFIDENCE_LABEL_KEYS),
+] as const satisfies `%${string}%`[];
+
+/**
+ * Stands for the choice of carrying no value at all for a field, which {@link CatalogFacets} lists
+ * as `undefined`. The platform combo box speaks strings alone, so the absent choice needs a
+ * spelling of its own, and a leading NUL is one no part of speech, confidence level, or feature
+ * value can collide with — no text format the analysis layer reads carries one inside a value.
+ */
+const UNTAGGED_VALUE = '\u0000untagged';
+
+/**
+ * The breakdown filter's inactive choice, spelled out because {@link CatalogFilters} spells it
+ * `undefined` while the platform select needs a value for every choice it offers.
+ */
+const MORPHEMES_EITHER = 'either';
+
+/** Reads the breakdown filter the select reported back, its inactive choice reading as no filter. */
+function morphemeChoice(value: string): CatalogFilters['morphemes'] {
+  if (value === 'has') return 'has';
+  if (value === 'lacks') return 'lacks';
+  return undefined;
+}
+
+/** Props for {@link FacetFilter}. */
+type FacetFilterProps<T extends string> = Readonly<{
+  /** The choices the rows offer for this field, `undefined` standing for carrying no value. */
+  choices: readonly (T | undefined)[];
+  /** The choices currently selected; absent or empty means the field narrows nothing. */
+  selected: readonly (T | undefined)[] | undefined;
+  /** Records a new selection, in the field's own terms rather than the control's. */
+  onChange: (selected: readonly (T | undefined)[]) => void;
+  /** What the field is called, shown alone while nothing is selected. */
+  label: string;
+  /** Resolved localizations, for the labels every field's control shares. */
+  localizedStrings: LanguageStrings;
+  /**
+   * What a value is called, for a field whose values are a closed vocabulary. Omitted where the
+   * values are free text from the data, which name themselves.
+   */
+  labelFor?: (choice: T) => string;
+  /** Identifies the control, so a test can tell one field's choices from another's. */
+  id: string;
+}>;
+
+/**
+ * One field's choices, as a multi-select whose trigger names the field while nothing is selected
+ * and names the selection once something is.
+ *
+ * Carrying no value is offered as a choice of its own, which is what lets a reader ask which
+ * analyses are still missing the field as readily as which carry a given value.
+ */
+function FacetFilter<T extends string>({
+  choices,
+  selected,
+  onChange,
+  label,
+  localizedStrings,
+  labelFor,
+  id,
+}: FacetFilterProps<T>) {
+  const untaggedLabel = localizedStrings['%interlinearizer_analysisCatalog_filter_untagged%'];
+
+  /**
+   * Each control value read back to the choice it stands for. Held as a map rather than compared
+   * against the sentinel so the untagged choice's `undefined` is recovered as the choice it is.
+   */
+  const choiceByValue = new Map<string, T | undefined>(
+    choices.map((choice) => [choice ?? UNTAGGED_VALUE, choice]),
+  );
+
+  /** What one choice is offered under, the untagged choice included. */
+  const labelOf = (choice: T | undefined) => {
+    if (choice === undefined) return untaggedLabel;
+    return labelFor ? labelFor(choice) : choice;
+  };
+
+  const selectedLabels = (selected ?? []).map(labelOf);
+
+  return (
+    <MultiSelectComboBox
+      customSelectedText={
+        selectedLabels.length === 0
+          ? undefined
+          : formatReplacementString(
+              localizedStrings['%interlinearizer_analysisCatalog_filter_selection%'],
+              { label, values: selectedLabels.join(', ') },
+            )
+      }
+      entries={choices.map((choice) => ({
+        label: labelOf(choice),
+        value: choice ?? UNTAGGED_VALUE,
+      }))}
+      id={id}
+      onChange={(values) => onChange(values.map((value) => choiceByValue.get(value)))}
+      placeholder={label}
+      selected={(selected ?? []).map((choice) => choice ?? UNTAGGED_VALUE)}
+      variant="outline"
+    />
+  );
+}
+
+/** One of the filters that is simply on or off, as a labeled switch. */
+function FilterToggle({
+  isOn,
+  label,
+  onChange,
+}: Readonly<{
+  isOn: boolean;
+  label: string;
+  onChange: (isOn: boolean) => void;
+}>) {
+  const switchId = useId();
+  return (
+    <div className="tw:flex tw:items-center tw:justify-between tw:gap-4">
+      <Label className="tw:cursor-pointer tw:text-sm" htmlFor={switchId}>
+        {label}
+      </Label>
+      <Switch checked={isOn} id={switchId} onCheckedChange={onChange} />
+    </div>
+  );
+}
+
+/** Props for {@link CatalogFilterPopover}. */
+type CatalogFilterPopoverProps = Readonly<{
+  /**
+   * The choices worth offering, derived from every row rather than from the narrowed ones — a facet
+   * judged against its own selection's survivors collapses the moment a choice is made.
+   */
+  facets: CatalogFacets;
+  /** The filters currently narrowing the listing. */
+  filters: CatalogFilters;
+  /** Records a new set of filters. */
+  onFiltersChange: (filters: CatalogFilters) => void;
+  /** BCP 47 tag the missing-gloss filter asks about, named in its label. */
+  analysisLanguage: string;
+  /** Resolved localizations covering at least {@link FILTER_STRING_KEYS}. */
+  localizedStrings: LanguageStrings;
+}>;
+
+/**
+ * The catalog's filters, behind one control so a panel narrow enough to need filtering is not
+ * itself filled with them. The button names how many are active, since a narrowed list with its
+ * filters folded away would otherwise look like a short draft.
+ *
+ * A facet offering fewer than two choices raises no control at all: {@link CatalogFacets} omits it,
+ * because a lone choice is the state every row is already in, so choosing it would narrow nothing.
+ */
+export default function CatalogFilterPopover({
+  facets,
+  filters,
+  onFiltersChange,
+  analysisLanguage,
+  localizedStrings,
+}: CatalogFilterPopoverProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const filtersLabel = localizedStrings['%interlinearizer_analysisCatalog_filters%'];
+
+  /**
+   * How many of the filter groups are narrowing anything. Each named feature counts on its own, as
+   * each is chosen and cleared on its own; an emptied selection counts for nothing, matching the
+   * query core's reading of it as no filter rather than as one nothing satisfies.
+   */
+  const activeCount =
+    [
+      filters.books,
+      filters.pos,
+      filters.confidence,
+      ...Object.values(filters.features ?? {}),
+    ].filter((selected) => selected?.length).length +
+    [filters.missingGloss, filters.morphemes, filters.zeroUsages].filter(Boolean).length;
+
+  return (
+    <Popover onOpenChange={setIsOpen} open={isOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          className="tw:shrink-0"
+          data-testid="catalog-filters-button"
+          size="sm"
+          variant="ghost"
+        >
+          <ListFilter className="tw:size-4" />
+          {activeCount === 0
+            ? filtersLabel
+            : formatReplacementString(
+                localizedStrings['%interlinearizer_analysisCatalog_filtersActive%'],
+                { count: activeCount },
+              )}
+        </Button>
+      </PopoverTrigger>
+
+      {/* Mounted only while open so each opening starts from a fresh panel. */}
+      {isOpen && (
+        <PopoverContent
+          align="end"
+          aria-label={filtersLabel}
+          className="tw:flex tw:w-auto tw:min-w-56 tw:flex-col tw:gap-3"
+          data-testid="catalog-filters-panel"
+        >
+          {facets.books && (
+            <FacetFilter
+              choices={facets.books}
+              id="catalog-filter-books"
+              label={localizedStrings['%interlinearizer_analysisCatalog_filter_books%']}
+              // An analysis in no book is one nothing uses, which the unused-only filter keeps on
+              // its own terms, so the books facet never offers an untagged choice to narrow to.
+              onChange={(books) =>
+                onFiltersChange({
+                  ...filters,
+                  books: books.filter((book) => book !== undefined),
+                })
+              }
+              selected={filters.books}
+              localizedStrings={localizedStrings}
+            />
+          )}
+
+          {facets.pos && (
+            <FacetFilter
+              choices={facets.pos}
+              id="catalog-filter-pos"
+              label={localizedStrings['%interlinearizer_analysisCatalog_filter_pos%']}
+              onChange={(pos) => onFiltersChange({ ...filters, pos })}
+              selected={filters.pos}
+              localizedStrings={localizedStrings}
+            />
+          )}
+
+          {facets.confidence && (
+            <FacetFilter
+              choices={facets.confidence}
+              id="catalog-filter-confidence"
+              label={localizedStrings['%interlinearizer_analysisCatalog_filter_confidence%']}
+              labelFor={(confidence) => localizedStrings[CONFIDENCE_LABEL_KEYS[confidence]]}
+              onChange={(confidence) => onFiltersChange({ ...filters, confidence })}
+              selected={filters.confidence}
+              localizedStrings={localizedStrings}
+            />
+          )}
+
+          {/*
+            One control per named feature, each judged on its own values — a row satisfies the whole
+            selection only by satisfying every named feature in it. Feature names come out of the
+            data, so each is shown as it was recorded rather than under a localized name.
+          */}
+          {Object.entries(facets.features ?? {}).map(([name, choices]) => (
+            <FacetFilter
+              choices={choices}
+              id={`catalog-filter-feature-${name}`}
+              key={name}
+              label={name}
+              onChange={(values) =>
+                onFiltersChange({ ...filters, features: { ...filters.features, [name]: values } })
+              }
+              selected={filters.features?.[name]}
+              localizedStrings={localizedStrings}
+            />
+          ))}
+
+          {/*
+            Three states rather than a switch: a reader asks which analyses are broken down and which
+            are still whole as readily as either, and neither question is the other's off position.
+          */}
+          <Select
+            onValueChange={(value) =>
+              onFiltersChange({ ...filters, morphemes: morphemeChoice(value) })
+            }
+            value={filters.morphemes ?? MORPHEMES_EITHER}
+          >
+            <SelectTrigger
+              aria-label={localizedStrings['%interlinearizer_analysisCatalog_filter_morphemes%']}
+              data-testid="catalog-filter-morphemes"
+              size="sm"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem data-testid="catalog-filter-morphemes-any" value={MORPHEMES_EITHER}>
+                {localizedStrings['%interlinearizer_analysisCatalog_filter_morphemes%']}
+              </SelectItem>
+              <SelectItem data-testid="catalog-filter-morphemes-has" value="has">
+                {localizedStrings['%interlinearizer_analysisCatalog_filter_morphemes_has%']}
+              </SelectItem>
+              <SelectItem data-testid="catalog-filter-morphemes-lacks" value="lacks">
+                {localizedStrings['%interlinearizer_analysisCatalog_filter_morphemes_lacks%']}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+
+          <FilterToggle
+            isOn={filters.missingGloss ?? false}
+            label={formatReplacementString(
+              localizedStrings['%interlinearizer_analysisCatalog_filter_missingGloss%'],
+              { language: analysisLanguage },
+            )}
+            onChange={(missingGloss) => onFiltersChange({ ...filters, missingGloss })}
+          />
+
+          {/*
+            Matches nothing against today's data — no write path leaves an analysis unused, because
+            detaching its last link drops the payload with it. Shipped anyway so a Paratext 9 import,
+            and the catalog's own delete and merge, arrive with their filter already in place.
+          */}
+          <FilterToggle
+            isOn={filters.zeroUsages ?? false}
+            label={localizedStrings['%interlinearizer_analysisCatalog_filter_zeroUsages%']}
+            onChange={(zeroUsages) => onFiltersChange({ ...filters, zeroUsages })}
+          />
+        </PopoverContent>
+      )}
+    </Popover>
+  );
+}
diff --git a/src/components/CatalogQueryControls.tsx b/src/components/CatalogQueryControls.tsx
new file mode 100644
index 00000000..c5673fc1
--- /dev/null
+++ b/src/components/CatalogQueryControls.tsx
@@ -0,0 +1,129 @@
+import {
+  SearchBar,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from 'platform-bible-react';
+import { formatReplacementString, type LanguageStrings } from 'platform-bible-utils';
+import CatalogFilterPopover, { FILTER_STRING_KEYS } from './CatalogFilterPopover';
+import type { CatalogFacets, CatalogFilters, CatalogSort } from '../utils/analysis-query';
+
+/**
+ * The label each sort key is offered under, in this object's declaration order. Covers every member
+ * of {@link CatalogSort}, so a key added there fails to compile until it is labeled here too.
+ */
+const SORT_LABEL_KEYS = {
+  usageCount: '%interlinearizer_analysisCatalog_sort_usageCount%',
+  usageCountInBook: '%interlinearizer_analysisCatalog_sort_usageCountInBook%',
+  firstUsage: '%interlinearizer_analysisCatalog_sort_firstUsage%',
+  surfaceText: '%interlinearizer_analysisCatalog_sort_surfaceText%',
+  gloss: '%interlinearizer_analysisCatalog_sort_gloss%',
+} as const satisfies Record<CatalogSort, `%${string}%`>;
+
+function isSortKey(value: string): value is CatalogSort {
+  return value in SORT_LABEL_KEYS;
+}
+
+/** Localized string keys the query controls render. */
+export const QUERY_CONTROL_STRING_KEYS = [
+  '%interlinearizer_analysisCatalog_searchPlaceholder%',
+  '%interlinearizer_analysisCatalog_sort%',
+  ...Object.values(SORT_LABEL_KEYS),
+  ...FILTER_STRING_KEYS,
+] as const satisfies `%${string}%`[];
+
+/** Props for {@link CatalogQueryControls}. */
+type CatalogQueryControlsProps = Readonly<{
+  /** The query the search box holds, verbatim. */
+  search: string;
+  /** Records a new search query. */
+  onSearchChange: (search: string) => void;
+  /** The sort key the listing is ordered by. */
+  sort: CatalogSort;
+  /** Records a new sort key. */
+  onSortChange: (sort: CatalogSort) => void;
+  /** The choices worth offering as filters, derived from every row rather than the narrowed ones. */
+  facets: CatalogFacets;
+  /** The filters currently narrowing the listing. */
+  filters: CatalogFilters;
+  /** Records a new set of filters. */
+  onFiltersChange: (filters: CatalogFilters) => void;
+  /** BCP 47 tag the missing-gloss filter asks about. */
+  analysisLanguage: string;
+  /** Book code the per-book sort is named after. */
+  currentBook: string;
+  /** Resolved localizations covering at least {@link QUERY_CONTROL_STRING_KEYS}. */
+  localizedStrings: LanguageStrings;
+}>;
+
+/**
+ * The controls that vary the catalog's listing: a search box across the full width, and beneath it
+ * the sort and filter controls.
+ *
+ * The placeholder promises forms and glosses because that is all the query matches, and matches as
+ * a single substring — so it must not imply a syntax that would let a multi-word query span two of
+ * the fields it is matched against.
+ */
+export default function CatalogQueryControls({
+  search,
+  onSearchChange,
+  sort,
+  onSortChange,
+  facets,
+  filters,
+  onFiltersChange,
+  analysisLanguage,
+  currentBook,
+  localizedStrings,
+}: CatalogQueryControlsProps) {
+  const sortKeys = Object.keys(SORT_LABEL_KEYS).filter(isSortKey);
+
+  return (
+    <div className="tw:flex tw:flex-col tw:gap-2 tw:border-b tw:border-border tw:px-3 tw:py-2">
+      <SearchBar
+        isFullWidth
+        onSearch={onSearchChange}
+        placeholder={localizedStrings['%interlinearizer_analysisCatalog_searchPlaceholder%']}
+        value={search}
+      />
+
+      <div className="tw:flex tw:items-center tw:gap-2">
+        <Select
+          onValueChange={(value) => {
+            /* v8 ignore next -- the select only ever reports back one of the keys it was given */
+            if (isSortKey(value)) onSortChange(value);
+          }}
+          value={sort}
+        >
+          <SelectTrigger
+            aria-label={localizedStrings['%interlinearizer_analysisCatalog_sort%']}
+            className="tw:min-w-0 tw:flex-1"
+            data-testid="catalog-sort"
+            size="sm"
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {sortKeys.map((sortKey) => (
+              <SelectItem data-testid={`catalog-sort-${sortKey}`} key={sortKey} value={sortKey}>
+                {formatReplacementString(localizedStrings[SORT_LABEL_KEYS[sortKey]], {
+                  book: currentBook,
+                })}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <CatalogFilterPopover
+          analysisLanguage={analysisLanguage}
+          facets={facets}
+          filters={filters}
+          localizedStrings={localizedStrings}
+          onFiltersChange={onFiltersChange}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/hooks/useRowWindow.ts b/src/hooks/useRowWindow.ts
new file mode 100644
index 00000000..2a0fedf9
--- /dev/null
+++ b/src/hooks/useRowWindow.ts
@@ -0,0 +1,92 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+/**
+ * How many rows are mounted before the list has been scrolled at all. Deliberately small: the
+ * window grows on demand, so this only needs to fill a tall panel plus a little overscan, and a
+ * first paint that mounts the whole draft is the cost it exists to avoid.
+ */
+const INITIAL_ROW_COUNT = 40;
+
+/** How many rows each extend appends. */
+const EXTEND_CHUNK = 40;
+
+/**
+ * Distance in pixels beyond the list's own box at which the end-of-list sentinel arms, so the next
+ * rows are mounted before the reader can scroll past the last of them.
+ */
+const SENTINEL_ROOT_MARGIN_PX = 400;
+
+/** What {@link useRowWindow} hands back. */
+export interface UseRowWindowResult<T> {
+  /** The leading run of `rows` currently mounted, in the order they were given. */
+  windowRows: readonly T[];
+  /** Ref callback for the scrolling list element, which the sentinel is watched inside. */
+  scrollRef: (el: HTMLElement | null) => void;
+  /** Ref callback for the sentinel placed after the last mounted row. */
+  sentinelRef: (el: HTMLElement | null) => void;
+}
+
+/**
+ * Mounts a growing leading slice of a list rather than all of it, extending by a chunk each time
+ * the end of the mounted rows comes within reach of the scroll.
+ *
+ * Grow-only and anchored to nothing: the window has no notion of where in the list the reader is,
+ * so it never culls from the top and never adjusts the scroll position. A row list has no
+ * counterpart to the scripture reference a segment window has to hold still, so it needs none of
+ * that geometry bookkeeping.
+ *
+ * The window starts over whenever `rows` is a different array, which is what a changed query
+ * produces: a reader who has scrolled deep into one listing and then narrows it is looking at a new
+ * list, not further down the old one.
+ */
+export default function useRowWindow<T>(rows: readonly T[]): UseRowWindowResult<T> {
+  const [count, setCount] = useState(INITIAL_ROW_COUNT);
+
+  /** The listing the current count was reached against, so a new one can be recognized as new. */
+  const [countedRows, setCountedRows] = useState(rows);
+
+  // Start the window over on a new listing, keyed on the array's identity rather than its length
+  // because a query can narrow a listing to a different set of rows of the same size. Adjusted
+  // during the render that first sees the new listing rather than in an effect afterwards: an effect
+  // would let one frame paint the new rows at the old, grown count before shrinking back.
+  if (rows !== countedRows) {
+    setCountedRows(rows);
+    setCount(INITIAL_ROW_COUNT);
+  }
+
+  /**
+   * The mounted scroll container and sentinel, held in state rather than in refs so the observer
+   * effect re-runs once each attaches. Wiring the observer inside the ref callbacks instead would
+   * run before the container's own ref is set, leaving nothing to observe against.
+   */
+  const [scrollEl, setScrollEl] = useState<HTMLElement | undefined>(undefined);
+  const [sentinelEl, setSentinelEl] = useState<HTMLElement | undefined>(undefined);
+
+  const scrollRef = useCallback((el: HTMLElement | null) => setScrollEl(el ?? undefined), []);
+  const sentinelRef = useCallback((el: HTMLElement | null) => setSentinelEl(el ?? undefined), []);
+
+  // Extend the window each time the sentinel is reported within reach. Re-subscribes on every count
+  // change as well as on the elements', because an IntersectionObserver reports only intersection
+  // *transitions*: after an extend the sentinel node is unchanged and may still sit inside the arming
+  // margin, where a stale observer would stay silent however far the reader scrolls. A fresh observer
+  // re-delivers the current state, extending once per delivery until the sentinel is pushed clear —
+  // or until the window covers every row, at which point the count stops changing and with it the
+  // re-subscription.
+  useEffect(() => {
+    if (!scrollEl || !sentinelEl) return undefined;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setCount((current) => Math.min(rows.length, current + EXTEND_CHUNK));
+        }
+      },
+      { root: scrollEl, rootMargin: `${SENTINEL_ROOT_MARGIN_PX}px`, threshold: 0 },
+    );
+    observer.observe(sentinelEl);
+    return () => observer.disconnect();
+  }, [scrollEl, sentinelEl, count, rows.length]);
+
+  const windowRows = useMemo(() => rows.slice(0, count), [rows, count]);
+
+  return { windowRows, scrollRef, sentinelRef };
+}

From 35321783f644cf049f30cc0f589d2d7850851cb4 Mon Sep 17 00:00:00 2001
From: Alex Rawlings <alex.rawlings@wycliffe.ca>
Date: Fri, 21 Aug 2026 10:31:03 -0600
Subject: [PATCH 2/8] Name the book the per-book sort is taken against
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sort option substituted the raw book code into "Most used in
{book}",
so the dropdown read "Most used in GEN" while the row column beside it
resolved the same book through Canon.bookIdToEnglishName and read "Uses
in
Genesis" — one book named two ways in one open panel.

Resolve the name once in the panel and pass it to both views, so the two
labels cannot disagree. CatalogQueryControls takes the resolved name
rather
than the code, which keeps it presentational and leaves book-name
resolution
in the panel.
---
 .../components/AnalysisCatalogPanel.test.tsx  | 13 ++++++++
 src/components/AnalysisCatalogPanel.tsx       | 33 ++++++++++++-------
 src/components/CatalogQueryControls.tsx       |  8 ++---
 3 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/src/__tests__/components/AnalysisCatalogPanel.test.tsx b/src/__tests__/components/AnalysisCatalogPanel.test.tsx
index 8539a919..dec2e5a6 100644
--- a/src/__tests__/components/AnalysisCatalogPanel.test.tsx
+++ b/src/__tests__/components/AnalysisCatalogPanel.test.tsx
@@ -433,6 +433,19 @@ describe('AnalysisCatalogPanel', () => {
 
       expect(listedAnalysisIds()).toEqual(['once', 'twice', 'thrice']);
     });
+
+    it('names the book the per-book sort is taken against rather than showing its code', () => {
+      mockKeyAsValueLocalizedStrings({
+        '%interlinearizer_analysisCatalog_sort_usageCountInBook%': 'Most used in {book}',
+      });
+      // The panel is given a book code, so an option reading "Most used in GEN" is the failure the
+      // resolved name is asserted against.
+      renderPanel({ analysis: THREE, currentBook: 'GEN' });
+
+      expect(screen.getByTestId('catalog-sort-usageCountInBook')).toHaveTextContent(
+        'Most used in Genesis',
+      );
+    });
   });
 
   describe('filtering', () => {
diff --git a/src/components/AnalysisCatalogPanel.tsx b/src/components/AnalysisCatalogPanel.tsx
index f2159533..cc5eba71 100644
--- a/src/components/AnalysisCatalogPanel.tsx
+++ b/src/components/AnalysisCatalogPanel.tsx
@@ -100,23 +100,32 @@ export default function AnalysisCatalogPanel({
   const [localizedBookName] = useLocalizedStrings(bookNameKeys);
 
   /**
-   * Label every row carries for its per-book usage count, resolved once for the whole list. Names
-   * the book rather than giving its code, because this label reads as prose where the usage links
-   * below it read as references.
+   * What the current book is called wherever the panel names it in prose. Resolved once and given
+   * to every view that names it, so the sort option and the row column cannot name one book two
+   * ways.
    *
    * Falls back to the English name, the platform carrying a localized one for only some languages.
    * An unresolved key comes back as itself, which is what distinguishes the two.
    */
-  const usageCountInBookLabel = useMemo(() => {
+  const currentBookName = useMemo(() => {
     const [bookKey] = bookNameKeys;
     const resolved = localizedBookName?.[bookKey];
-    return formatReplacementString(
-      localizedStrings['%interlinearizer_analysisCatalog_usageCountInBook%'],
-      {
-        book: resolved && resolved !== bookKey ? resolved : Canon.bookIdToEnglishName(currentBook),
-      },
-    );
-  }, [localizedStrings, localizedBookName, bookNameKeys, currentBook]);
+    return resolved && resolved !== bookKey ? resolved : Canon.bookIdToEnglishName(currentBook);
+  }, [localizedBookName, bookNameKeys, currentBook]);
+
+  /**
+   * Label every row carries for its per-book usage count, resolved once for the whole list. Names
+   * the book rather than giving its code, because this label reads as prose where the usage links
+   * below it read as references.
+   */
+  const usageCountInBookLabel = useMemo(
+    () =>
+      formatReplacementString(
+        localizedStrings['%interlinearizer_analysisCatalog_usageCountInBook%'],
+        { book: currentBookName },
+      ),
+    [localizedStrings, currentBookName],
+  );
 
   /**
    * The choices worth offering as filters, taken against every row the draft holds rather than the
@@ -187,7 +196,7 @@ export default function AnalysisCatalogPanel({
 
         <CatalogQueryControls
           analysisLanguage={analysisLanguage}
-          currentBook={currentBook}
+          currentBookName={currentBookName}
           facets={facets}
           filters={filters}
           localizedStrings={localizedStrings}
diff --git a/src/components/CatalogQueryControls.tsx b/src/components/CatalogQueryControls.tsx
index c5673fc1..e7452116 100644
--- a/src/components/CatalogQueryControls.tsx
+++ b/src/components/CatalogQueryControls.tsx
@@ -52,8 +52,8 @@ type CatalogQueryControlsProps = Readonly<{
   onFiltersChange: (filters: CatalogFilters) => void;
   /** BCP 47 tag the missing-gloss filter asks about. */
   analysisLanguage: string;
-  /** Book code the per-book sort is named after. */
-  currentBook: string;
+  /** What the current book is called, as prose, for the per-book sort to be named after. */
+  currentBookName: string;
   /** Resolved localizations covering at least {@link QUERY_CONTROL_STRING_KEYS}. */
   localizedStrings: LanguageStrings;
 }>;
@@ -75,7 +75,7 @@ export default function CatalogQueryControls({
   filters,
   onFiltersChange,
   analysisLanguage,
-  currentBook,
+  currentBookName,
   localizedStrings,
 }: CatalogQueryControlsProps) {
   const sortKeys = Object.keys(SORT_LABEL_KEYS).filter(isSortKey);
@@ -109,7 +109,7 @@ export default function CatalogQueryControls({
             {sortKeys.map((sortKey) => (
               <SelectItem data-testid={`catalog-sort-${sortKey}`} key={sortKey} value={sortKey}>
                 {formatReplacementString(localizedStrings[SORT_LABEL_KEYS[sortKey]], {
-                  book: currentBook,
+                  book: currentBookName,
                 })}
               </SelectItem>
             ))}

From 704305c4af2c05452883d49bb833d3cd3cb33036 Mon Sep 17 00:00:00 2001
From: Alex Rawlings <alex.rawlings@wycliffe.ca>
Date: Fri, 21 Aug 2026 10:39:12 -0600
Subject: [PATCH 3/8] Make the abandoned-focus-request test verify abandonment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The test rerendered through a bare InterlinearNavProvider rather than
the
PanelProviders root it mounted with. React saw a different element type
at
that position and remounted the provider, reinitializing the ref that
holds
the pending request — so the closing assertion found no request because
none had survived the remount, not because navigating past EXO had
abandoned one. Deleting the abandonment effect entirely left the test
green.

Rerender through PanelProviders instead, keeping the provider that owns
the
request mounted across both navigation steps. The test now fails with
"EXO 3:14:8" when the abandonment effect is removed.

Also lift the two collators out of the query memo. They were rebuilt on
every keystroke in the search box, which changes the query but neither
language tag.
---
 .../components/AnalysisCatalogPanel.test.tsx  | 41 +++++++++----------
 src/components/AnalysisCatalogPanel.tsx       | 15 ++++---
 2 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/src/__tests__/components/AnalysisCatalogPanel.test.tsx b/src/__tests__/components/AnalysisCatalogPanel.test.tsx
index dec2e5a6..3fb8979c 100644
--- a/src/__tests__/components/AnalysisCatalogPanel.test.tsx
+++ b/src/__tests__/components/AnalysisCatalogPanel.test.tsx
@@ -998,34 +998,33 @@ describe('AnalysisCatalogPanel', () => {
       await clickUsage('EXO 3:14:8');
 
       // EXO's load never arrives; the reader navigates somewhere else entirely in the meantime.
-      // The probe stands in for a view of that third book, which claims nothing here.
+      // The probe stands in for a view of that third book, which claims nothing here. The request
+      // is held in a ref inside the navigation provider, so these steps rerender through the same
+      // root the mount used: a remounted provider holds no request, and the assertion below would
+      // hold however the pending one had been treated.
       rerender(
-        <InterlinearNavProvider
-          useWebViewScrollGroupScrRef={makeScrollGroupHook({
-            book: 'LEV',
-            chapterNum: 1,
-            verseNum: 1,
-          })}
+        <PanelProviders
+          overrides={{
+            analysis: TWO_BOOKS,
+            mountedBook: 'LEV',
+            scrRef: { book: 'LEV', chapterNum: 1, verseNum: 1 },
+          }}
         >
-          <AnalysisStoreProvider analysisLanguage="en" initialAnalysis={TWO_BOOKS}>
-            <FocusRequestProbe bookCode="LEV" />
-          </AnalysisStoreProvider>
-        </InterlinearNavProvider>,
+          {undefined}
+        </PanelProviders>,
       );
 
       // EXO finally mounts, long after the reader moved on.
       rerender(
-        <InterlinearNavProvider
-          useWebViewScrollGroupScrRef={makeScrollGroupHook({
-            book: 'EXO',
-            chapterNum: 3,
-            verseNum: 14,
-          })}
+        <PanelProviders
+          overrides={{
+            analysis: TWO_BOOKS,
+            mountedBook: 'EXO',
+            scrRef: { book: 'EXO', chapterNum: 3, verseNum: 14 },
+          }}
         >
-          <AnalysisStoreProvider analysisLanguage="en" initialAnalysis={TWO_BOOKS}>
-            <FocusRequestProbe bookCode="EXO" />
-          </AnalysisStoreProvider>
-        </InterlinearNavProvider>,
+          {undefined}
+        </PanelProviders>,
       );
 
       // Honoring it now would yank focus on a visit the reader made for their own reasons, long
diff --git a/src/components/AnalysisCatalogPanel.tsx b/src/components/AnalysisCatalogPanel.tsx
index cc5eba71..cdc33c09 100644
--- a/src/components/AnalysisCatalogPanel.tsx
+++ b/src/components/AnalysisCatalogPanel.tsx
@@ -75,16 +75,15 @@ export default function AnalysisCatalogPanel({
   /** Which rows the listing keeps. Nothing narrowed until the reader chooses something. */
   const [filters, setFilters] = useState<CatalogFilters>({});
 
+  // Each rebuilt only when its own tag changes: the query around them turns over on every keystroke
+  // in the search box, and a collator is expensive enough to be worth not rebuilding that often.
+  const surfaceCollator = useMemo(() => collatorForTag(sourceLanguageTag), [sourceLanguageTag]);
+  const glossCollator = useMemo(() => collatorForTag(analysisLanguage), [analysisLanguage]);
+
   /** How the listing is narrowed and ordered, from the controls above the list. */
   const query = useMemo<CatalogQuery>(
-    () => ({
-      search,
-      sort,
-      filters,
-      surfaceCollator: collatorForTag(sourceLanguageTag),
-      glossCollator: collatorForTag(analysisLanguage),
-    }),
-    [search, sort, filters, sourceLanguageTag, analysisLanguage],
+    () => ({ search, sort, filters, surfaceCollator, glossCollator }),
+    [search, sort, filters, surfaceCollator, glossCollator],
   );
 
   const rows = useMemo(() => applyCatalogQuery(catalogRows, query), [catalogRows, query]);

From dde91182365d3cbd4cd86ff3826cde5e6bc0c25b Mon Sep 17 00:00:00 2001
From: Alex Rawlings <alex.rawlings@wycliffe.ca>
Date: Mon, 24 Aug 2026 12:54:19 -0600
Subject: [PATCH 4/8] Drop the duplicate EmptyState stub from the mock

Two identical declarations shadowed each other, and neither tsc nor
ESLint covers __mocks__, so nothing flagged it.
---
 __mocks__/platform-bible-react.tsx | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/__mocks__/platform-bible-react.tsx b/__mocks__/platform-bible-react.tsx
index 7dc24400..f6376509 100644
--- a/__mocks__/platform-bible-react.tsx
+++ b/__mocks__/platform-bible-react.tsx
@@ -1304,19 +1304,6 @@ export function useTruncationTooltip<T extends HTMLElement>(): {
   return { ref, open: false, onPointerEnter: () => {}, onPointerLeave: () => {} };
 }
 
-/** Stub empty-state message, carrying the `role="status"` the real component announces through. */
-export function EmptyState({
-  message,
-  id,
-  className,
-}: Readonly<{ message: string; id?: string; className?: string }>): ReactElement {
-  return (
-    <p className={className} data-testid={id} role="status">
-      {message}
-    </p>
-  );
-}
-
 /** Whether a {@link TooltipProvider} encloses the tree. */
 const TooltipProviderContext = createContext(false);
 

From 9208be5da584c13835668b0e6fd2ba1bbcd99aec Mon Sep 17 00:00:00 2001
From: Alex Rawlings <alex.rawlings@wycliffe.ca>
Date: Thu, 27 Aug 2026 08:57:43 -0600
Subject: [PATCH 5/8] Hold the mock group's defaultLayout to the real one's
 panel-count rule

The stub group seeded its layout from `defaultLayout` unconditionally,
where
the real group takes that prop only when it names exactly the panels
mounted
and discards it otherwise. A layout naming a closed panel therefore came
back
by itself here on the next mount, which upstream would have thrown away.

That divergence hid the loader's restoring effect: the width it exists
to
reapply was already in the group's state before it ran, so the effect
could be
made a no-op with every catalog test still passing. Seed after the
panels have
registered instead, matching on the count as the real group does.

Cover the effect with a test that mounts the group closed, leaving it
knowing
only of the view so the stored layout reaches it only by being applied
as the
catalog's panel joins. Disabling the effect now fails five tests.
---
 __mocks__/platform-bible-react.tsx            | 20 +++++++++++--
 .../components/InterlinearizerLoader.test.tsx | 29 +++++++++++++++++++
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/__mocks__/platform-bible-react.tsx b/__mocks__/platform-bible-react.tsx
index f6376509..c4776c75 100644
--- a/__mocks__/platform-bible-react.tsx
+++ b/__mocks__/platform-bible-react.tsx
@@ -1471,7 +1471,9 @@ function clampLayout(
  *
  * `defaultLayout` seeds the layout on mount and is ignored thereafter, as the real group's is, so a
  * caller that resizes by writing that prop alone moves nothing here either. Moving the panels after
- * mount goes through the handle on `groupRef`.
+ * mount goes through the handle on `groupRef`. It is taken only when it names exactly the panels
+ * mounted, again as the real group takes it, so a caller whose stored layout names a panel that
+ * mounted closed has to apply that layout itself once the panel joins.
  *
  * The layout is normalized, held within its panels' `minSize`/`maxSize`, and reported back through
  * `onLayoutChanged`, as the real group does, so a caller storing what it is handed stores the
@@ -1495,7 +1497,7 @@ export function ResizablePanelGroup({
   onLayoutChanged?: (layout: Readonly<Record<string, number>>) => void;
   orientation?: 'horizontal' | 'vertical';
 }>): ReactElement {
-  const [layout, setLayout] = useState(() => normalizeLayout(defaultLayout ?? {}));
+  const [layout, setLayout] = useState<Readonly<Record<string, number>>>({});
 
   // Held in state rather than a ref so registering or unregistering a panel re-renders the group,
   // that render being what reports the layout afresh.
@@ -1518,6 +1520,20 @@ export function ResizablePanelGroup({
     };
   }, []);
 
+  // Seeded after the panels have registered rather than from the initial state, there being no
+  // count to match against until they have. A layout stored while a panel was closed therefore does
+  // not come back by itself on the next mount, leaving the caller to apply it.
+  const seededRef = useRef(false);
+  useLayoutEffect(() => {
+    if (seededRef.current || mountedIds.length === 0) return;
+    seededRef.current = true;
+    if (defaultLayout === undefined || Object.keys(defaultLayout).length !== mountedIds.length)
+      return;
+    setLayout(normalizeLayout(defaultLayout));
+    // Seeding is a mount-time reading of the prop, so later changes to it are deliberately ignored.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mountedIds]);
+
   const reportedLayout = useMemo(() => layoutOverMounted(layout, mountedIds), [layout, mountedIds]);
 
   // Read through refs so the handle can be installed once rather than replaced on every resize.
diff --git a/src/__tests__/components/InterlinearizerLoader.test.tsx b/src/__tests__/components/InterlinearizerLoader.test.tsx
index 8b58c1a2..20a79048 100644
--- a/src/__tests__/components/InterlinearizerLoader.test.tsx
+++ b/src/__tests__/components/InterlinearizerLoader.test.tsx
@@ -1892,6 +1892,35 @@ describe('InterlinearizerLoader', () => {
       }
     });
 
+    it('restores a remembered layout the group never mounted with', async () => {
+      // Closing before the remount is what makes this the restoring effect's own test: a group that
+      // mounts with the catalog open seeds itself from the stored layout, and one that never
+      // unmounts holds the layout across a reopening, either of which would carry the width without
+      // the effect. Mounting closed leaves the group knowing only of the view, so a layout naming
+      // the catalog reaches it only by being applied as the panel joins.
+      document.documentElement.dir = 'rtl';
+      try {
+        const useWebViewState = makeWebViewState();
+        await act(async () => {
+          renderLoader({ useWebViewState });
+        });
+        await userEvent.click(screen.getByTestId('tab-toolbar-analysis-catalog'));
+
+        fireEvent.keyDown(screen.getByTestId('analysis-catalog-resize'), { key: 'ArrowRight' });
+
+        await userEvent.click(screen.getByTestId('analysis-catalog-close'));
+        cleanup();
+        await act(async () => {
+          renderLoader({ useWebViewState });
+        });
+        await userEvent.click(screen.getByTestId('tab-toolbar-analysis-catalog'));
+
+        expect(catalogPanelElement()).toHaveAttribute('data-panel-layout', '30');
+      } finally {
+        document.documentElement.removeAttribute('dir');
+      }
+    });
+
     it('restores the remembered layout only once the catalog panel has joined the group', async () => {
       // Reopening restores a layout naming both panels, which a group refuses outright while it
       // still knows only of the view — a throw that takes the WebView down rather than misplacing

From da918eadd6cf9197edc747ce5ec4ea90d61af0a7 Mon Sep 17 00:00:00 2001
From: Alex Rawlings <alex.rawlings@wycliffe.ca>
Date: Thu, 27 Aug 2026 12:07:38 -0600
Subject: [PATCH 6/8] Reset the catalog's row window on the query, not the rows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The window reset exists for a changed query: a reader who narrows a
listing is looking at a new list, not further down the old one. It was
keyed on the rows array's identity instead, which is only a proxy for
that — and a proxy that also turns over on any edit to the underlying
analysis. A gloss approved in the view beside an open catalog therefore
collapsed a deeply scrolled list back to its first chunk, throwing the
reader to the end of forty rows while the sentinel re-extended beneath
them.

useRowWindow now takes the query itself and compares that by reference,
so the hook does what its own doc comment already claimed.

Also withhold the query controls from a draft that has recorded nothing,
where a search box, sort and filter popover narrow an empty listing and
the popover in particular is an invitation to a dead end. The gate reads
the draft rather than the queried rows, so a query that matched nothing
keeps the controls that are the only way to widen it back.
---
 .../components/AnalysisCatalogPanel.test.tsx  | 73 ++++++++++++++++++-
 src/components/AnalysisCatalogPanel.tsx       | 34 +++++----
 src/hooks/useRowWindow.ts                     | 28 ++++---
 3 files changed, 109 insertions(+), 26 deletions(-)

diff --git a/src/__tests__/components/AnalysisCatalogPanel.test.tsx b/src/__tests__/components/AnalysisCatalogPanel.test.tsx
index 3fb8979c..187cdd0f 100644
--- a/src/__tests__/components/AnalysisCatalogPanel.test.tsx
+++ b/src/__tests__/components/AnalysisCatalogPanel.test.tsx
@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
 import type { AssignmentStatus, TextAnalysis, TokenAnalysisLink } from 'interlinearizer';
 import { useEffect, useState, type ReactNode } from 'react';
 import AnalysisCatalogPanel from '../../components/AnalysisCatalogPanel';
-import { AnalysisStoreProvider } from '../../components/AnalysisStore';
+import { AnalysisStoreProvider, useGlossDispatch } from '../../components/AnalysisStore';
 import { InterlinearNavProvider, useInterlinearNav } from '../../components/InterlinearNavContext';
 import { emptyAnalysis } from '../../types/empty-factories';
 import { defaultScrRef, FIXTURE_STAMPS, makeScrollGroupHook } from '../test-helpers';
@@ -135,6 +135,32 @@ function renderReopenablePanel(overrides: PanelOptions = {}) {
   );
 }
 
+/**
+ * Edits a token's gloss in the store the panel is reading, standing in for the interlinear view
+ * beside it. Does nothing until {@link GlossEditProbe} has mounted.
+ */
+let editGloss: (tokenRef: string, surfaceText: string, value: string) => void = () => {};
+
+/** Publishes {@link editGloss}, standing in for the view that writes glosses beside the panel. */
+function GlossEditProbe() {
+  editGloss = useGlossDispatch();
+  return undefined;
+}
+
+/** Renders the panel beside a probe that can edit the analysis it is listing. */
+function renderPanelWithGlossEditing(overrides: PanelOptions = {}) {
+  return render(
+    <PanelProviders overrides={overrides}>
+      <GlossEditProbe />
+      <AnalysisCatalogPanel
+        currentBook={overrides.currentBook ?? 'GEN'}
+        onClose={overrides.onClose ?? (() => {})}
+        sourceLanguageTag="el"
+      />
+    </PanelProviders>,
+  );
+}
+
 /** The ids of the rows the list is showing, in the order it shows them. */
 function listedAnalysisIds(): (string | undefined)[] {
   return screen.getAllByTestId('catalog-row').map((row) => row.dataset.analysisId);
@@ -165,6 +191,7 @@ function rowFor(analysisId: string): HTMLElement {
 describe('AnalysisCatalogPanel', () => {
   beforeEach(() => {
     claimedFocusRequest = undefined;
+    editGloss = () => {};
     mockKeyAsValueLocalizedStrings();
   });
 
@@ -188,6 +215,37 @@ describe('AnalysisCatalogPanel', () => {
       );
     });
 
+    it('offers no query controls over a draft that has recorded nothing', () => {
+      // Every control would narrow an empty listing, and a filter popover over nothing is an
+      // invitation to a dead end.
+      renderPanel({ analysis: emptyAnalysis() });
+
+      expect(screen.queryByTestId('catalog-sort')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('catalog-filters-button')).not.toBeInTheDocument();
+    });
+
+    it('keeps the query controls when a query rather than the draft emptied the listing', async () => {
+      // The controls are the only way back to a listing a query has narrowed away, so the case that
+      // looks emptiest is the one that most needs them.
+      renderPanel({
+        analysis: {
+          ...emptyAnalysis(),
+          tokenAnalyses: [
+            { ...FIXTURE_STAMPS, id: 'ta-1', surfaceText: 'λόγος', gloss: { en: 'word' } },
+          ],
+          tokenAnalysisLinks: [link('ta-1', 'GEN 1:1:0')],
+        },
+      });
+
+      await userEvent.type(searchBox(), 'ζζζ');
+
+      expect(screen.getByTestId('analysis-catalog-panel')).toHaveTextContent(
+        '%interlinearizer_analysisCatalog_noMatches%',
+      );
+      expect(screen.getByTestId('catalog-sort')).toBeInTheDocument();
+      expect(screen.getByTestId('catalog-filters-button')).toBeInTheDocument();
+    });
+
     it('renders an analysis with its gloss and its usage counts inside and outside the book', () => {
       const analysis: TextAnalysis = {
         ...emptyAnalysis(),
@@ -769,6 +827,19 @@ describe('AnalysisCatalogPanel', () => {
 
       expect(screen.getAllByTestId('catalog-row').length).toBeLessThan(grown);
     });
+
+    it('keeps the window where it is when the analysis changes under an unchanged query', () => {
+      // A gloss approved in the view beside an open catalog rebuilds every row without narrowing
+      // anything, and collapsing a deeply scrolled list back to its first chunk on that would throw
+      // the reader to the end of it.
+      renderPanelWithGlossEditing({ analysis: MANY });
+      reachListEnd();
+      const grown = screen.getAllByTestId('catalog-row').length;
+
+      act(() => editGloss('GEN 1:1:0', 'word0', 'beginning'));
+
+      expect(screen.getAllByTestId('catalog-row').length).toBe(grown);
+    });
   });
 
   describe('row detail', () => {
diff --git a/src/components/AnalysisCatalogPanel.tsx b/src/components/AnalysisCatalogPanel.tsx
index cdc33c09..09868e01 100644
--- a/src/components/AnalysisCatalogPanel.tsx
+++ b/src/components/AnalysisCatalogPanel.tsx
@@ -138,7 +138,7 @@ export default function AnalysisCatalogPanel({
    * and every row carries its own expander and usage list, so the list grows as it is scrolled
    * rather than rendering whole.
    */
-  const { windowRows, scrollRef, sentinelRef } = useRowWindow(rows);
+  const { windowRows, scrollRef, sentinelRef } = useRowWindow(rows, query);
 
   const { navigate, requestFocusToken } = useInterlinearNav();
 
@@ -193,18 +193,26 @@ export default function AnalysisCatalogPanel({
           </Button>
         </div>
 
-        <CatalogQueryControls
-          analysisLanguage={analysisLanguage}
-          currentBookName={currentBookName}
-          facets={facets}
-          filters={filters}
-          localizedStrings={localizedStrings}
-          onFiltersChange={setFilters}
-          onSearchChange={setSearch}
-          onSortChange={setSort}
-          search={search}
-          sort={sort}
-        />
+        {/*
+          Withheld from a draft that has recorded nothing, where every control would narrow an empty
+          listing. Judged against the draft rather than against the rows a query left standing,
+          which keeps the controls on screen for the query that matched nothing — they are the only
+          way to widen it back.
+        */}
+        {catalogRows.length > 0 && (
+          <CatalogQueryControls
+            analysisLanguage={analysisLanguage}
+            currentBookName={currentBookName}
+            facets={facets}
+            filters={filters}
+            localizedStrings={localizedStrings}
+            onFiltersChange={setFilters}
+            onSearchChange={setSearch}
+            onSortChange={setSort}
+            search={search}
+            sort={sort}
+          />
+        )}
 
         {rows.length === 0 ? (
           // Two ways to have nothing to list, and they call for different answers: a draft that has
diff --git a/src/hooks/useRowWindow.ts b/src/hooks/useRowWindow.ts
index 2a0fedf9..d73e109a 100644
--- a/src/hooks/useRowWindow.ts
+++ b/src/hooks/useRowWindow.ts
@@ -35,22 +35,26 @@ export interface UseRowWindowResult<T> {
  * counterpart to the scripture reference a segment window has to hold still, so it needs none of
  * that geometry bookkeeping.
  *
- * The window starts over whenever `rows` is a different array, which is what a changed query
- * produces: a reader who has scrolled deep into one listing and then narrows it is looking at a new
- * list, not further down the old one.
+ * The window starts over whenever `query` is a different value, compared by reference: a reader who
+ * has scrolled deep into one listing and then narrows it is looking at a new list, not further down
+ * the old one. A caller passes whatever it narrows and orders its rows by, and one whose listing
+ * never narrows passes nothing. Keyed on that rather than on `rows`, which turns over on any edit
+ * to the underlying analysis as well — a gloss approved in the view beside an open catalog would
+ * otherwise collapse a deeply scrolled list back to its first chunk.
  */
-export default function useRowWindow<T>(rows: readonly T[]): UseRowWindowResult<T> {
+export default function useRowWindow<T>(
+  rows: readonly T[],
+  query?: unknown,
+): UseRowWindowResult<T> {
   const [count, setCount] = useState(INITIAL_ROW_COUNT);
 
-  /** The listing the current count was reached against, so a new one can be recognized as new. */
-  const [countedRows, setCountedRows] = useState(rows);
+  /** The query the current count was reached against, so a new one can be recognized as new. */
+  const [countedQuery, setCountedQuery] = useState(query);
 
-  // Start the window over on a new listing, keyed on the array's identity rather than its length
-  // because a query can narrow a listing to a different set of rows of the same size. Adjusted
-  // during the render that first sees the new listing rather than in an effect afterwards: an effect
-  // would let one frame paint the new rows at the old, grown count before shrinking back.
-  if (rows !== countedRows) {
-    setCountedRows(rows);
+  // Adjusted during the render that first sees the new query rather than in an effect afterwards:
+  // an effect would let one frame paint the new rows at the old, grown count before shrinking back.
+  if (query !== countedQuery) {
+    setCountedQuery(query);
     setCount(INITIAL_ROW_COUNT);
   }
 

From 07f71509269e995deb05a67a89234ab865c08c3f Mon Sep 17 00:00:00 2001
From: Alex Rawlings <alex.rawlings@wycliffe.ca>
Date: Thu, 27 Aug 2026 13:07:40 -0600
Subject: [PATCH 7/8] Read the resize direction once per press

---
 src/hooks/usePanelResizeKeys.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/hooks/usePanelResizeKeys.ts b/src/hooks/usePanelResizeKeys.ts
index 755d8e23..f39fabbe 100644
--- a/src/hooks/usePanelResizeKeys.ts
+++ b/src/hooks/usePanelResizeKeys.ts
@@ -68,15 +68,17 @@ export default function usePanelResizeKeys(
       if (event.ctrlKey || event.metaKey || event.altKey) return;
 
       const { travel, step } = keyTravel(event.key);
+      // Bound for the press, so the direction it is turned away for is the one it is resized by.
+      const widen = widenTravel();
       // Left alone in a left-to-right interface, where the platform handle already reads these
       // keys the way the panel is pointing; stepping here as well would move it twice.
-      if (travel === 0 || widenTravel() !== 1) return;
+      if (travel === 0 || widen !== 1) return;
 
       // Claims the press before the platform's own handler sees it, that handler starting by
       // returning on an event already defaulted.
       event.preventDefault();
 
-      const next = Math.min(100, Math.max(0, percentage + travel * widenTravel() * step));
+      const next = Math.min(100, Math.max(0, percentage + travel * widen * step));
       // A key pressed at the end of the range it moves toward — an arrow held down there repeating,
       // or a jump key aimed at it — would otherwise put an unchanged layout through the store.
       if (next !== percentage) onPercentageChange(next);

From d85e9e3f3309af73e7c853c57abd8dad5bb4b0ca Mon Sep 17 00:00:00 2001
From: Alex Rawlings <alex.rawlings@wycliffe.ca>
Date: Fri, 28 Aug 2026 13:10:37 -0600
Subject: [PATCH 8/8] Spell an empty facet value to the filter control

A feature value is free text, so it may be the empty string. The filter
offered such a choice under its own spelling, which the platform control
can neither carry as a value nor show as a label: the choice appeared as
a blank, unclickable row.

Give it a sentinel of its own, alongside the one the absent choice
already uses, and a localized label to be read under. Route the three
places that spelled a choice for the control through one function, so
they cannot disagree about the two choices that need spelling.

Latent for now, no write path recording feature values yet.
---
 contributions/localizedStrings.json           |  1 +
 .../components/AnalysisCatalogPanel.test.tsx  | 24 +++++++++++++++
 src/components/CatalogFilterPopover.tsx       | 30 +++++++++++++++----
 3 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/contributions/localizedStrings.json b/contributions/localizedStrings.json
index 864b8b74..17481d57 100644
--- a/contributions/localizedStrings.json
+++ b/contributions/localizedStrings.json
@@ -32,6 +32,7 @@
       "%interlinearizer_analysisCatalog_filtersActive%": "Filters ({count})",
       "%interlinearizer_analysisCatalog_filter_selection%": "{label}: {values}",
       "%interlinearizer_analysisCatalog_filter_untagged%": "(none)",
+      "%interlinearizer_analysisCatalog_filter_empty%": "(empty)",
       "%interlinearizer_analysisCatalog_filter_books%": "Books",
       "%interlinearizer_analysisCatalog_filter_pos%": "Part of speech",
       "%interlinearizer_analysisCatalog_filter_confidence%": "Confidence",
diff --git a/src/__tests__/components/AnalysisCatalogPanel.test.tsx b/src/__tests__/components/AnalysisCatalogPanel.test.tsx
index 187cdd0f..b937478a 100644
--- a/src/__tests__/components/AnalysisCatalogPanel.test.tsx
+++ b/src/__tests__/components/AnalysisCatalogPanel.test.tsx
@@ -625,6 +625,30 @@ describe('AnalysisCatalogPanel', () => {
       expect(listedAnalysisIds()).toEqual(['gen']);
     });
 
+    it('narrows the list to the analyses carrying a feature value that is the empty string', async () => {
+      const analysis: TextAnalysis = {
+        ...emptyAnalysis(),
+        tokenAnalyses: [
+          { ...FIXTURE_STAMPS, id: 'blank', surfaceText: 'λόγος', features: { case: '' } },
+          { ...FIXTURE_STAMPS, id: 'gen', surfaceText: 'λόγου', features: { case: 'genitive' } },
+        ],
+        tokenAnalysisLinks: [link('blank', 'GEN 1:1:0'), link('gen', 'GEN 1:2:0')],
+      };
+      renderPanel({ analysis });
+      await openFilters();
+
+      // Feature values are free text, so one may be the empty string, which the control can
+      // neither label nor carry as itself.
+      const feature = within(screen.getByTestId('catalog-filter-feature-case'));
+      await userEvent.click(
+        feature.getByRole('option', {
+          name: '%interlinearizer_analysisCatalog_filter_empty%',
+        }),
+      );
+
+      expect(listedAnalysisIds()).toEqual(['blank']);
+    });
+
     it('offers no book choice for a draft confined to one book', async () => {
       const analysis: TextAnalysis = {
         ...emptyAnalysis(),
diff --git a/src/components/CatalogFilterPopover.tsx b/src/components/CatalogFilterPopover.tsx
index a244ccf0..27d40720 100644
--- a/src/components/CatalogFilterPopover.tsx
+++ b/src/components/CatalogFilterPopover.tsx
@@ -37,6 +37,7 @@ export const FILTER_STRING_KEYS = [
   '%interlinearizer_analysisCatalog_filtersActive%',
   '%interlinearizer_analysisCatalog_filter_selection%',
   '%interlinearizer_analysisCatalog_filter_untagged%',
+  '%interlinearizer_analysisCatalog_filter_empty%',
   '%interlinearizer_analysisCatalog_filter_books%',
   '%interlinearizer_analysisCatalog_filter_pos%',
   '%interlinearizer_analysisCatalog_filter_confidence%',
@@ -56,6 +57,19 @@ export const FILTER_STRING_KEYS = [
  */
 const UNTAGGED_VALUE = '\u0000untagged';
 
+/**
+ * Stands for the choice of carrying the empty string, which a free-text field may hold. The
+ * platform control cannot carry an empty value, so that choice needs a spelling of its own, kept
+ * clear of any real value the same way {@link UNTAGGED_VALUE} is.
+ */
+const EMPTY_VALUE = '\u0000empty';
+
+/** How one choice is spelled to the platform control, the two absent-value choices included. */
+function valueOf(choice: string | undefined): string {
+  if (choice === undefined) return UNTAGGED_VALUE;
+  return choice === '' ? EMPTY_VALUE : choice;
+}
+
 /**
  * The breakdown filter's inactive choice, spelled out because {@link CatalogFilters} spells it
  * `undefined` while the platform select needs a value for every choice it offers.
@@ -107,18 +121,24 @@ function FacetFilter<T extends string>({
   id,
 }: FacetFilterProps<T>) {
   const untaggedLabel = localizedStrings['%interlinearizer_analysisCatalog_filter_untagged%'];
+  const emptyLabel = localizedStrings['%interlinearizer_analysisCatalog_filter_empty%'];
 
   /**
    * Each control value read back to the choice it stands for. Held as a map rather than compared
-   * against the sentinel so the untagged choice's `undefined` is recovered as the choice it is.
+   * against the sentinels so that a choice the field spells as absence or as the empty string is
+   * recovered as the choice it is.
    */
   const choiceByValue = new Map<string, T | undefined>(
-    choices.map((choice) => [choice ?? UNTAGGED_VALUE, choice]),
+    choices.map((choice) => [valueOf(choice), choice]),
   );
 
-  /** What one choice is offered under, the untagged choice included. */
+  /**
+   * What one choice is offered under. The choices the field spells as absence or as the empty
+   * string are named as well, neither being readable as itself.
+   */
   const labelOf = (choice: T | undefined) => {
     if (choice === undefined) return untaggedLabel;
+    if (choice === '') return emptyLabel;
     return labelFor ? labelFor(choice) : choice;
   };
 
@@ -136,12 +156,12 @@ function FacetFilter<T extends string>({
       }
       entries={choices.map((choice) => ({
         label: labelOf(choice),
-        value: choice ?? UNTAGGED_VALUE,
+        value: valueOf(choice),
       }))}
       id={id}
       onChange={(values) => onChange(values.map((value) => choiceByValue.get(value)))}
       placeholder={label}
-      selected={(selected ?? []).map((choice) => choice ?? UNTAGGED_VALUE)}
+      selected={(selected ?? []).map(valueOf)}
       variant="outline"
     />
   );