feat: add pagination and click selection to resource list

Co-authored-by: aider (openrouter/thinkingmachines/inkling-small:free) <aider@aider.chat>

frontend/app.js

@@ -11,6 +11,8 @@ document.addEventListener('DOMContentLoaded', () => {
   const actionOutput = document.getElementById('action-output');
 
   let currentData = [];
+  let currentPage = 1;
+  const pageSize = 10;
 
   function saveSession() {
     sessionStorage.setItem('k8s_context', contextSelect.value);
@@ -73,6 +75,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const ctx = contextSelect.value || null;
     resourceTitle.textContent = resType.charAt(0).toUpperCase() + resType.slice(1);
     resourceList.innerHTML = '<li>Loading...</li>';
+    currentPage = 1;
     try {
       let url;
       if (resType === 'pods') {
@@ -115,26 +118,61 @@ document.addEventListener('DOMContentLoaded', () => {
 
   function renderList() {
     const filter = searchInput.value.toLowerCase();
-    resourceList.innerHTML = '';
     const filtered = currentData.filter(item => item.name.toLowerCase().includes(filter));
-    if (filtered.length === 0) {
+    const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+    if (currentPage > totalPages) currentPage = totalPages;
+    if (currentPage < 1) currentPage = 1;
+
+    const start = (currentPage - 1) * pageSize;
+    const pageItems = filtered.slice(start, start + pageSize);
+
+    resourceList.innerHTML = '';
+    if (pageItems.length === 0) {
       resourceList.innerHTML = '<li>No results</li>';
-      return;
+    } else {
+      pageItems.forEach(item => {
+        const li = document.createElement('li');
+        li.style.cursor = 'pointer';
+        li.innerHTML = `<strong>${item.name}</strong> <span style="color:#666">(${item.namespace})</span>`;
+        li.addEventListener('click', () => {
+          actionName.value = item.name;
+          Array.from(resourceList.children).forEach(child => {
+            child.classList.remove('selected');
+            child.style.background = '';
+          });
+          li.classList.add('selected');
+          li.style.background = '#ebf8ff';
+        });
+        resourceList.appendChild(li);
+      });
     }
-    filtered.forEach(item => {
-      const li = document.createElement('li');
-      li.innerHTML = `<strong>${item.name}</strong> <span style="color:#666">(${item.namespace})</span>`;
-      resourceList.appendChild(li);
-    });
+
+    const pageInfo = document.getElementById('page-info');
+    if (pageInfo) pageInfo.textContent = `Page ${currentPage} of ${totalPages} (${filtered.length} total)`;
+
+    const prevBtn = document.getElementById('prev-page');
+    const nextBtn = document.getElementById('next-page');
+    if (prevBtn) prevBtn.disabled = currentPage <= 1;
+    if (nextBtn) nextBtn.disabled = currentPage >= totalPages;
   }
 
   contextSelect.addEventListener('change', () => { saveSession(); loadNamespaces(); });
   namespaceSelect.addEventListener('change', () => { saveSession(); loadResources(); });
   resourceSelect.addEventListener('change', () => { saveSession(); loadResources(); });
-  searchBtn.addEventListener('click', renderList);
-  searchInput.addEventListener('input', renderList);
+  searchBtn.addEventListener('click', () => { currentPage = 1; renderList(); });
+  searchInput.addEventListener('input', () => { currentPage = 1; renderList(); });
   setDefaultBtn.addEventListener('click', () => { saveSession(); alert('Defaults saved for session'); });
 
+  document.getElementById('prev-page').addEventListener('click', () => {
+    if (currentPage > 1) { currentPage--; renderList(); }
+  });
+  document.getElementById('next-page').addEventListener('click', () => {
+    const filter = searchInput.value.toLowerCase();
+    const filtered = currentData.filter(item => item.name.toLowerCase().includes(filter));
+    const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+    if (currentPage < totalPages) { currentPage++; renderList(); }
+  });
+
   document.getElementById('btn-describe').addEventListener('click', async () => {
     const name = actionName.value.trim();
     if (!name) return;