From cd1d3e9e94fc3744de0d746d4109abcc56f561d7 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Mon, 9 Mar 2026 15:41:45 +1030
Subject: [PATCH] Add pagination to /tasks UI route (#3)

* Initial plan

* Add pagination (Pager component) to tasks page for navigating all results

Co-authored-by: jbatesy <51190172+jbatesy@users.noreply.github.com>

* Simplify Pager navigate handler per code review feedback

Co-authored-by: jbatesy <51190172+jbatesy@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: jbatesy <51190172+jbatesy@users.noreply.github.com>
---
 ui/app/pages/tasks.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/ui/app/pages/tasks.vue b/ui/app/pages/tasks.vue
index ef9e8336..f3f452fd 100644
--- a/ui/app/pages/tasks.vue
+++ b/ui/app/pages/tasks.vue
@@ -534,6 +534,20 @@
       </template>
     </div>
 
+    <div
+      class="columns is-multiline"
+      v-if="!toggleForm && !isLoading && pagination.total_pages > 1"
+    >
+      <div class="column is-12">
+        <Pager
+          :page="pagination.page"
+          :last_page="pagination.total_pages"
+          :isLoading="isLoading"
+          @navigate="(newPage) => reloadContent(false, newPage)"
+        />
+      </div>
+    </div>
+
     <div
       class="columns is-multiline"
       v-if="!toggleForm && (isLoading || !filteredTasks || filteredTasks.length < 1)"
@@ -639,6 +653,7 @@ const isMobile = useMediaQuery({ maxWidth: 1024 });
 const tasksComposable = useTasks();
 const {
   tasks,
+  pagination,
   isLoading,
   addInProgress,
   isTaskInProgress,
@@ -758,9 +773,9 @@ const filteredTasks = computed(() => {
   return tasks.value.filter((task) => deepIncludes(task, q, new WeakSet()));
 }) as ComputedRef<Array<Task>>;
 
-const reloadContent = async (fromMounted: boolean = false) => {
+const reloadContent = async (fromMounted: boolean = false, page?: number) => {
   try {
-    await tasksComposable.loadTasks();
+    await tasksComposable.loadTasks(page ?? pagination.value.page);
 
     if (tasks.value.length > 0) {
       cleanStaleCache(tasks.value);