status casing + sorting fix

Author: jonathanlab

src/renderer/components/tasks/TaskItem.tsx

@@ -64,7 +64,7 @@ function TaskItemComponent({
   // Determine status: If PR exists, mark as completed, otherwise use latest_run status
   const prUrl = task.latest_run?.output?.pr_url as string | undefined;
   const hasPR = !!prUrl;
-  const status = hasPR ? "completed" : task.latest_run?.status || "Backlog";
+  const status = hasPR ? "completed" : task.latest_run?.status || "backlog";
 
   const handleOpenPR = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -81,7 +81,15 @@ function TaskItemComponent({
     failed: "red",
     in_progress: "blue",
     started: "amber",
-    Backlog: "gray",
+    backlog: "gray",
+  };
+
+  const statusDisplayMap: Record<string, string> = {
+    completed: "Completed",
+    failed: "Failed",
+    in_progress: "In progress",
+    started: "Started",
+    backlog: "Backlog",
   };
 
   const handleDragStart = (e: React.DragEvent) => {
@@ -226,7 +234,8 @@ function TaskItemComponent({
                 size="1"
                 style={{ flexShrink: 0 }}
               >
-                {status}
+                {statusDisplayMap[status] ||
+                  status.charAt(0).toUpperCase() + status.slice(1)}
               </Badge>
 
               <Flex

src/renderer/components/tasks/hooks/useTaskFiltering.ts

@@ -9,6 +9,21 @@ export function useTaskFiltering(
   filter: string,
 ) {
   return useMemo(() => {
+    // Helper to get computed status (same logic as TaskItem and useTaskGrouping)
+    const getTaskStatus = (task: Task): string => {
+      const hasPR = task.latest_run?.output?.pr_url;
+      return hasPR ? "completed" : task.latest_run?.status || "backlog";
+    };
+
+    // Status order for sorting
+    const statusOrder = [
+      "failed",
+      "in_progress",
+      "started",
+      "completed",
+      "backlog",
+    ];
+
     // Sort tasks
     const orderedTasks = [...tasks].sort((a, b) => {
       let compareResult = 0;
@@ -18,9 +33,24 @@ export function useTaskFiltering(
           compareResult =
             new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
           break;
-        case "status":
-          compareResult = (a.status || "").localeCompare(b.status || "");
+        case "status": {
+          const statusA = getTaskStatus(a);
+          const statusB = getTaskStatus(b);
+          const indexA = statusOrder.indexOf(statusA);
+          const indexB = statusOrder.indexOf(statusB);
+
+          // Use index-based comparison if both found, otherwise alphabetical
+          if (indexA !== -1 && indexB !== -1) {
+            compareResult = indexA - indexB;
+          } else if (indexA !== -1) {
+            compareResult = -1;
+          } else if (indexB !== -1) {
+            compareResult = 1;
+          } else {
+            compareResult = statusA.localeCompare(statusB);
+          }
           break;
+        }
         case "title":
           compareResult = a.title.localeCompare(b.title);
           break;

src/renderer/components/tasks/hooks/useTaskGrouping.ts

@@ -62,6 +62,7 @@ export function useTaskGrouping(
 
     // Sort groups with specific ordering for status groups
     // Priority: action needed > in progress > completed > backlog
+    // Note: Status values are lowercase from TaskRun, except "Backlog" which is the fallback
     const statusOrder = [
       "failed",
       "in_progress",
@@ -76,14 +77,7 @@ export function useTaskGrouping(
         tasks,
       }))
       .sort((a, b) => {
-        const aIsEmpty = a.name.startsWith("No ");
-        const bIsEmpty = b.name.startsWith("No ");
-
-        // Empty groups always go to bottom
-        if (aIsEmpty && !bIsEmpty) return 1;
-        if (!aIsEmpty && bIsEmpty) return -1;
-
-        // If grouping by status, use status order
+        // If grouping by status, use status order first
         if (groupBy === "status") {
           const aIndex = statusOrder.indexOf(a.name);
           const bIndex = statusOrder.indexOf(b.name);
@@ -95,6 +89,13 @@ export function useTaskGrouping(
           if (bIndex !== -1) return 1;
         }
 
+        const aIsEmpty = a.name.startsWith("No ");
+        const bIsEmpty = b.name.startsWith("No ");
+
+        // Empty groups always go to bottom
+        if (aIsEmpty && !bIsEmpty) return 1;
+        if (!aIsEmpty && bIsEmpty) return -1;
+
         return a.name.localeCompare(b.name);
       });