fix(ui): show the correct Threads page size (#116349)

* fix(ui): correct sessions page-size controls

* test(ui): defer unrelated memory mock repair

* style(ui): format page-size regression

ui/src/i18n/locales/en.ts

@@ -741,6 +741,7 @@ export const en: TranslationMap = {
     noArchivedSessions: "No archived sessions.",
     noSessionsMatchFilters: "No threads match your filters.",
     pagination: "{start}-{end} of {total} rows",
+    pageSize: "Rows per page",
     rowsPerPage: "{count} per page",
     showAll: "Show all",
     inherit: "inherit",

ui/src/pages/sessions/view.browser.test.ts

@@ -197,6 +197,18 @@ function sessionsTableHtml() {
             </tbody>
           </table>
         </div>
+        <div class="data-table-pagination">
+          <div class="data-table-pagination__info">1-25 of 30 rows</div>
+          <div class="data-table-pagination__controls">
+            <select class="data-table-pagination__size" aria-label="Rows per page">
+              <option value="10">10 per page</option>
+              <option value="25" selected>25 per page</option>
+              <option value="50">50 per page</option>
+            </select>
+            <button>Previous</button>
+            <button>Next</button>
+          </div>
+        </div>
       </div>
     </div>
   `;
@@ -303,4 +315,15 @@ describeBrowserLayout("sessions responsive browser layout", () => {
       await closeFixture(fixture);
     }
   });
+
+  it("exposes the page-size selector by its localized accessible name", async () => {
+    const fixture = await openFixture(context, 1440, 900);
+    try {
+      const pageSize = fixture.page.getByRole("combobox", { name: "Rows per page" });
+      await pageSize.waitFor();
+      expect(await pageSize.inputValue()).toBe("25");
+    } finally {
+      await closeFixture(fixture);
+    }
+  });
 });

ui/src/pages/sessions/view.test.ts

@@ -318,6 +318,28 @@ describe("sessions view", () => {
     expect(container.querySelector(".data-table-pagination")).toBeNull();
   });
 
+  it("selects and names the current page size on first render", async () => {
+    const container = document.createElement("div");
+    render(
+      renderSessions({
+        ...buildProps(
+          buildMultiResult([
+            { key: "one", kind: "direct", updatedAt: 2 },
+            { key: "two", kind: "direct", updatedAt: 1 },
+          ]),
+        ),
+        pageSize: 25,
+      }),
+      container,
+    );
+    await Promise.resolve();
+
+    const pageSize = container.querySelector<HTMLSelectElement>(".data-table-pagination__size");
+    expect(pageSize?.getAttribute("aria-label")).toBe("Rows per page");
+    expect(pageSize?.value).toBe("25");
+    expect(pageSize?.selectedOptions[0]?.textContent?.trim()).toBe("25 per page");
+  });
+
   it("keeps the filtered empty state when grouping is active", async () => {
     const container = document.createElement("div");
     render(

ui/src/pages/sessions/view.ts

@@ -1456,13 +1456,16 @@ function renderSessionsTable(props: SessionsProps, ctx: SessionsTableContext) {
             <div class="data-table-pagination__controls">
               <select
                 class="data-table-pagination__size"
+                aria-label=${t("sessionsView.pageSize")}
                 .value=${String(props.pageSize)}
                 @change=${(e: Event) =>
                   props.onPageSizeChange(Number((e.target as HTMLSelectElement).value))}
               >
                 ${PAGE_SIZES.map(
+                  // The matching option owns initial selection because the select's value
+                  // property binds before these dynamic children exist on first render.
                   (s) =>
-                    html`<option value=${s}>
+                    html`<option value=${s} ?selected=${s === props.pageSize}>
                       ${t("sessionsView.rowsPerPage", { count: String(s) })}
                     </option>`,
                 )}