From 70a880f1c1fb0929cf249160ab7efe70bef62403 Mon Sep 17 00:00:00 2001
From: Youssef Idmoussi <youssef.idmoussi@gmail.com>
Date: Sat, 13 Sep 2025 18:41:01 +0200
Subject: [PATCH 1/3] Add selectable rows and filter button to model table

- Add checkboxes to table rows and header for row selection
- Implement 'Show Selected Only' filter button with toggle functionality
- Add client-side JavaScript for selection state management and filtering
- Style checkboxes, selected rows, and filter button to match existing design
- Ensure accessibility with keyboard navigation and proper ARIA labels
---
 packages/web/src/index.css  |  53 ++++++++++++++--
 packages/web/src/render.tsx | 116 ++++++++++++++++++++++++++++++++++--
 2 files changed, 160 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/index.css b/packages/web/src/index.css
index d8f66be6..17bb4060 100644
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@@ -266,10 +266,53 @@ td {
   white-space: nowrap;
 }
 
-tbody {
-  td {
-    color: var(--color-text-tertiary);
-  }
+tbody td {
+  color: var(--color-text-tertiary);
+}
+
+/* Checkbox column */
+td:first-child,
+th:first-child {
+  width: 36px;
+  text-align: center;
+  padding: 0.75rem 0.5rem;
+}
+
+/* Row selection highlight */
+tr.selected-row {
+  background-color: var(--color-surface);
+  font-weight: 500;
+  border-left: 2px solid var(--color-brand);
+}
+
+/* Checkbox style */
+input[type="checkbox"].row-checkbox,
+#select-all {
+  accent-color: var(--color-brand);
+  width: 1.15em;
+  height: 1.15em;
+  cursor: pointer;
+  border-radius: 2px;
+}
+
+/* Filter button style - matches "How to use" button */
+#filter-selected {
+  flex: 0 0 auto;
+  cursor: pointer;
+  border: none;
+  background-color: var(--color-brand);
+  color: var(--color-text-invert);
+  font-size: 0.8125rem;
+  line-height: 1.1;
+  height: 2rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.25rem;
+}
+#filter-selected:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 
   td:nth-child(1) {
     font-weight: 500;
@@ -410,7 +453,7 @@ tbody {
   .modality-icon:hover::after {
     opacity: 1;
   }
-}
+
 
 dialog::backdrop {
   backdrop-filter: blur(8px);
diff --git a/packages/web/src/render.tsx b/packages/web/src/render.tsx
index fffd5bdc..32654124 100644
--- a/packages/web/src/render.tsx
+++ b/packages/web/src/render.tsx
@@ -203,15 +203,17 @@ export const Rendered = renderToString(
           </svg>
         </a>
         <div class="search-container">
-          <input type="text" id="search" placeholder="Filter by model" />
-          <span class="search-shortcut">⌘K</span>
-        </div>
+            <input type="text" id="search" placeholder="Filter by model" />
+            <span class="search-shortcut">⌘K</span>
+          </div>
+        <button id="filter-selected" disabled>Show Selected Only</button>
         <button id="help">How to use</button>
       </div>
     </header>
     <table>
       <thead>
         <tr>
+          <th style="width:32px;"><input type="checkbox" id="select-all" aria-label="Select all models" /></th>
           <th class="sortable" data-type="text">
             Provider <span class="sort-indicator"></span>
           </th>
@@ -321,7 +323,10 @@ export const Rendered = renderToString(
                 modelA.name.localeCompare(modelB.name)
               )
               .map(([modelId, model]) => (
-                <tr key={`${providerId}-${modelId}`}>
+                <tr key={`${providerId}-${modelId}`} data-provider-id={providerId} data-model-id={modelId}>
+                  <td>
+                    <input type="checkbox" class="row-checkbox" aria-label="Select model" tabindex="0" />
+                  </td>
                   <td>
                     <div class="provider-cell">
                       {renderProviderLogo(providerId)}
@@ -520,5 +525,108 @@ export const Rendered = renderToString(
         </a>
       </div>
     </dialog>
+    <script dangerouslySetInnerHTML={{ __html: `
+      // --- Selection and Filter Logic ---
+      (function() {
+        const rowCheckboxes = () => Array.from(document.querySelectorAll('.row-checkbox'));
+        const selectAll = document.getElementById('select-all');
+        const filterBtn = document.getElementById('filter-selected');
+        let selected = new Set();
+        let filterActive = false;
+
+        // Helper: get row key
+        function getRowKey(tr) {
+          return tr.getAttribute('data-provider-id') + '::' + tr.getAttribute('data-model-id');
+        }
+
+        // Update selection state and UI
+        function updateSelectionUI() {
+          rowCheckboxes().forEach(cb => {
+            const tr = cb.closest('tr');
+            const key = getRowKey(tr);
+            if (selected.has(key)) {
+              cb.checked = true;
+              tr.classList.add('selected-row');
+            } else {
+              cb.checked = false;
+              tr.classList.remove('selected-row');
+            }
+          });
+          // Update select-all
+          if (selected.size === 0) {
+            selectAll.checked = false;
+            selectAll.indeterminate = false;
+          } else if (selected.size === rowCheckboxes().length) {
+            selectAll.checked = true;
+            selectAll.indeterminate = false;
+          } else {
+            selectAll.checked = false;
+            selectAll.indeterminate = true;
+          }
+          // Update filter button
+          filterBtn.disabled = selected.size === 0;
+          filterBtn.textContent = filterActive ? 'Show All' : 'Show Selected Only';
+        }
+
+        // Row checkbox click
+        document.addEventListener('change', function(e) {
+          if (e.target.classList.contains('row-checkbox')) {
+            const tr = e.target.closest('tr');
+            const key = getRowKey(tr);
+            if (e.target.checked) {
+              selected.add(key);
+            } else {
+              selected.delete(key);
+            }
+            updateSelectionUI();
+            if (filterActive) applyFilter();
+          }
+        });
+
+        // Select all checkbox
+        selectAll.addEventListener('change', function(e) {
+          if (selectAll.checked) {
+            rowCheckboxes().forEach(cb => {
+              const tr = cb.closest('tr');
+              selected.add(getRowKey(tr));
+            });
+          } else {
+            selected.clear();
+          }
+          updateSelectionUI();
+          if (filterActive) applyFilter();
+        });
+
+        // Filter button
+        filterBtn.addEventListener('click', function() {
+          filterActive = !filterActive;
+          applyFilter();
+          updateSelectionUI();
+        });
+
+        function applyFilter() {
+          rowCheckboxes().forEach(cb => {
+            const tr = cb.closest('tr');
+            const key = getRowKey(tr);
+            if (filterActive) {
+              tr.style.display = selected.has(key) ? '' : 'none';
+            } else {
+              tr.style.display = '';
+            }
+          });
+        }
+
+        // Keyboard accessibility: space/enter on row
+        document.addEventListener('keydown', function(e) {
+          if ((e.key === ' ' || e.key === 'Enter') && document.activeElement.classList.contains('row-checkbox')) {
+            e.preventDefault();
+            document.activeElement.click();
+          }
+        });
+
+        // Initial UI update
+        updateSelectionUI();
+      })();
+    ` }} />
   </Fragment>
 );

From 534119330c7edad42a7ab902ec953500f61e4018 Mon Sep 17 00:00:00 2001
From: Youssef Idmoussi <youssef.idmoussi@gmail.com>
Date: Sat, 13 Sep 2025 19:01:37 +0200
Subject: [PATCH 2/3] Refine selectable rows and filter button logic

- Disable select-all checkbox when showing only selected rows
- Enable filter button when no rows are selected
- Maintain consistent UI state and user experience
---
 packages/web/src/render.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/render.tsx b/packages/web/src/render.tsx
index 32654124..a4199c0b 100644
--- a/packages/web/src/render.tsx
+++ b/packages/web/src/render.tsx
@@ -203,9 +203,9 @@ export const Rendered = renderToString(
           </svg>
         </a>
         <div class="search-container">
-            <input type="text" id="search" placeholder="Filter by model" />
-            <span class="search-shortcut">⌘K</span>
-          </div>
+          <input type="text" id="search" placeholder="Filter by model" />
+          <span class="search-shortcut">⌘K</span>
+        </div>
         <button id="filter-selected" disabled>Show Selected Only</button>
         <button id="help">How to use</button>
       </div>
@@ -525,7 +525,8 @@ export const Rendered = renderToString(
         </a>
       </div>
     </dialog>
-    <script dangerouslySetInnerHTML={{ __html: `
+    <script dangerouslySetInnerHTML={{
+      __html: `
       // --- Selection and Filter Logic ---
       (function() {
         const rowCheckboxes = () => Array.from(document.querySelectorAll('.row-checkbox'));
@@ -563,8 +564,9 @@ export const Rendered = renderToString(
             selectAll.checked = false;
             selectAll.indeterminate = true;
           }
+          selectAll.disabled = filterActive;
           // Update filter button
-          filterBtn.disabled = selected.size === 0;
+          filterBtn.disabled = selectAll.checked || selected.size === 0;
           filterBtn.textContent = filterActive ? 'Show All' : 'Show Selected Only';
         }
 

From 9dd9dfd78164a53d19e458add9d4602c50e6317d Mon Sep 17 00:00:00 2001
From: Youssef Idmoussi <youssef.idmoussi@gmail.com>
Date: Sat, 13 Sep 2025 19:15:59 +0200
Subject: [PATCH 3/3] refactor(web): move selection/filter logic to TypeScript
 module

- Extract selection and filter logic from dangerouslySetInnerHTML in render.tsx
- Add packages/web/src/selection.ts with all selection/filter logic
- Import and initialize in packages/web/src/index.ts
- Remove inline script from render.tsx
- No change to UI/UX, improves maintainability and security
---
 packages/web/src/index.ts     |   7 ++-
 packages/web/src/render.tsx   | 104 ----------------------------------
 packages/web/src/selection.ts | 103 +++++++++++++++++++++++++++++++++
 3 files changed, 109 insertions(+), 105 deletions(-)
 create mode 100644 packages/web/src/selection.ts

diff --git a/packages/web/src/index.ts b/packages/web/src/index.ts
index 393ee535..f59855e8 100644
--- a/packages/web/src/index.ts
+++ b/packages/web/src/index.ts
@@ -1,3 +1,5 @@
+import { initializeSelection } from "./selection.js";
+
 const modal = document.getElementById("modal") as HTMLDialogElement;
 const modalClose = document.getElementById("close")!;
 const help = document.getElementById("help")!;
@@ -236,5 +238,8 @@ function initializeFromURL() {
   })();
 }
 
-document.addEventListener("DOMContentLoaded", initializeFromURL);
+document.addEventListener("DOMContentLoaded", () => {
+  initializeFromURL();
+  initializeSelection();
+});
 window.addEventListener("popstate", initializeFromURL);
diff --git a/packages/web/src/render.tsx b/packages/web/src/render.tsx
index a4199c0b..e27bcc71 100644
--- a/packages/web/src/render.tsx
+++ b/packages/web/src/render.tsx
@@ -525,110 +525,6 @@ export const Rendered = renderToString(
         </a>
       </div>
     </dialog>
-    <script dangerouslySetInnerHTML={{
-      __html: `
-      // --- Selection and Filter Logic ---
-      (function() {
-        const rowCheckboxes = () => Array.from(document.querySelectorAll('.row-checkbox'));
-        const selectAll = document.getElementById('select-all');
-        const filterBtn = document.getElementById('filter-selected');
-        let selected = new Set();
-        let filterActive = false;
 
-        // Helper: get row key
-        function getRowKey(tr) {
-          return tr.getAttribute('data-provider-id') + '::' + tr.getAttribute('data-model-id');
-        }
-
-        // Update selection state and UI
-        function updateSelectionUI() {
-          rowCheckboxes().forEach(cb => {
-            const tr = cb.closest('tr');
-            const key = getRowKey(tr);
-            if (selected.has(key)) {
-              cb.checked = true;
-              tr.classList.add('selected-row');
-            } else {
-              cb.checked = false;
-              tr.classList.remove('selected-row');
-            }
-          });
-          // Update select-all
-          if (selected.size === 0) {
-            selectAll.checked = false;
-            selectAll.indeterminate = false;
-          } else if (selected.size === rowCheckboxes().length) {
-            selectAll.checked = true;
-            selectAll.indeterminate = false;
-          } else {
-            selectAll.checked = false;
-            selectAll.indeterminate = true;
-          }
-          selectAll.disabled = filterActive;
-          // Update filter button
-          filterBtn.disabled = selectAll.checked || selected.size === 0;
-          filterBtn.textContent = filterActive ? 'Show All' : 'Show Selected Only';
-        }
-
-        // Row checkbox click
-        document.addEventListener('change', function(e) {
-          if (e.target.classList.contains('row-checkbox')) {
-            const tr = e.target.closest('tr');
-            const key = getRowKey(tr);
-            if (e.target.checked) {
-              selected.add(key);
-            } else {
-              selected.delete(key);
-            }
-            updateSelectionUI();
-            if (filterActive) applyFilter();
-          }
-        });
-
-        // Select all checkbox
-        selectAll.addEventListener('change', function(e) {
-          if (selectAll.checked) {
-            rowCheckboxes().forEach(cb => {
-              const tr = cb.closest('tr');
-              selected.add(getRowKey(tr));
-            });
-          } else {
-            selected.clear();
-          }
-          updateSelectionUI();
-          if (filterActive) applyFilter();
-        });
-
-        // Filter button
-        filterBtn.addEventListener('click', function() {
-          filterActive = !filterActive;
-          applyFilter();
-          updateSelectionUI();
-        });
-
-        function applyFilter() {
-          rowCheckboxes().forEach(cb => {
-            const tr = cb.closest('tr');
-            const key = getRowKey(tr);
-            if (filterActive) {
-              tr.style.display = selected.has(key) ? '' : 'none';
-            } else {
-              tr.style.display = '';
-            }
-          });
-        }
-
-        // Keyboard accessibility: space/enter on row
-        document.addEventListener('keydown', function(e) {
-          if ((e.key === ' ' || e.key === 'Enter') && document.activeElement.classList.contains('row-checkbox')) {
-            e.preventDefault();
-            document.activeElement.click();
-          }
-        });
-
-        // Initial UI update
-        updateSelectionUI();
-      })();
-    ` }} />
   </Fragment>
 );
diff --git a/packages/web/src/selection.ts b/packages/web/src/selection.ts
new file mode 100644
index 00000000..af8fee70
--- /dev/null
+++ b/packages/web/src/selection.ts
@@ -0,0 +1,103 @@
+// Selection and Filter Logic for Models Table
+export function initializeSelection() {
+  const rowCheckboxes = () => Array.from(document.querySelectorAll('.row-checkbox')) as HTMLInputElement[];
+  const selectAll = document.getElementById('select-all') as HTMLInputElement;
+  const filterBtn = document.getElementById('filter-selected') as HTMLButtonElement;
+  const selected = new Set<string>();
+  let filterActive = false;
+
+  // Helper: get row key
+  function getRowKey(tr: HTMLTableRowElement): string {
+    return tr.getAttribute('data-provider-id') + '::' + tr.getAttribute('data-model-id')!;
+  }
+
+  // Update selection state and UI
+  function updateSelectionUI() {
+    rowCheckboxes().forEach(cb => {
+      const tr = cb.closest('tr') as HTMLTableRowElement;
+      const key = getRowKey(tr);
+      if (selected.has(key)) {
+        cb.checked = true;
+        tr.classList.add('selected-row');
+      } else {
+        cb.checked = false;
+        tr.classList.remove('selected-row');
+      }
+    });
+    // Update select-all
+    if (selected.size === 0) {
+      selectAll.checked = false;
+      selectAll.indeterminate = false;
+    } else if (selected.size === rowCheckboxes().length) {
+      selectAll.checked = true;
+      selectAll.indeterminate = false;
+    } else {
+      selectAll.checked = false;
+      selectAll.indeterminate = true;
+    }
+    selectAll.disabled = filterActive;
+    // Update filter button
+    filterBtn.disabled = selectAll.checked;
+    filterBtn.textContent = filterActive ? 'Show All' : 'Show Selected Only';
+  }
+
+  // Row checkbox click
+  document.addEventListener('change', function (e) {
+    const target = e.target as HTMLInputElement;
+    if (target.classList.contains('row-checkbox')) {
+      const tr = target.closest('tr') as HTMLTableRowElement;
+      const key = getRowKey(tr);
+      if (target.checked) {
+        selected.add(key);
+      } else {
+        selected.delete(key);
+      }
+      updateSelectionUI();
+      if (filterActive) applyFilter();
+    }
+  });
+
+  // Select all checkbox
+  selectAll.addEventListener('change', function (e) {
+    if (selectAll.checked) {
+      rowCheckboxes().forEach(cb => {
+        const tr = cb.closest('tr') as HTMLTableRowElement;
+        selected.add(getRowKey(tr));
+      });
+    } else {
+      selected.clear();
+    }
+    updateSelectionUI();
+    if (filterActive) applyFilter();
+  });
+
+  // Filter button
+  filterBtn.addEventListener('click', function () {
+    filterActive = !filterActive;
+    applyFilter();
+    updateSelectionUI();
+  });
+
+  function applyFilter() {
+    rowCheckboxes().forEach(cb => {
+      const tr = cb.closest('tr') as HTMLTableRowElement;
+      const key = getRowKey(tr);
+      if (filterActive) {
+        tr.style.display = selected.has(key) ? '' : 'none';
+      } else {
+        tr.style.display = '';
+      }
+    });
+  }
+
+  // Keyboard accessibility: space/enter on row
+  document.addEventListener('keydown', function (e) {
+    if ((e.key === ' ' || e.key === 'Enter') && (document.activeElement as HTMLElement)?.classList.contains('row-checkbox')) {
+      e.preventDefault();
+      (document.activeElement as HTMLInputElement).click();
+    }
+  });
+
+  // Initial UI update
+  updateSelectionUI();
+}