From f459b73cb5fc02eec629ad5701780d8b9978de11 Mon Sep 17 00:00:00 2001
From: gsxdsm <eclipxe@gmail.com>
Date: Sun, 15 Feb 2026 10:38:23 -0800
Subject: [PATCH] fix: update kanban card status handling

- Enhanced the Kanban card component to support additional feature statuses ('interrupted' and 'ready') in the backlog display logic.
- Updated relevant components to reflect these changes, ensuring consistent behavior across the UI.
---
 .../components/kanban-card/card-actions.tsx   | 85 ++++++++++---------
 .../components/kanban-card/card-header.tsx    | 62 +++++++-------
 .../components/kanban-card/kanban-card.tsx    |  2 +
 3 files changed, 79 insertions(+), 70 deletions(-)

diff --git a/apps/ui/src/components/views/board-view/components/kanban-card/card-actions.tsx b/apps/ui/src/components/views/board-view/components/kanban-card/card-actions.tsx
index 9348a321..cc2b85c8 100644
--- a/apps/ui/src/components/views/board-view/components/kanban-card/card-actions.tsx
+++ b/apps/ui/src/components/views/board-view/components/kanban-card/card-actions.tsx
@@ -293,56 +293,59 @@ export const CardActions = memo(function CardActions({
           ) : null}
         </>
       )}
-      {!isCurrentAutoTask && feature.status === 'backlog' && (
-        <>
-          <Button
-            variant="secondary"
-            size="sm"
-            className="flex-1 h-7 text-xs"
-            onClick={(e) => {
-              e.stopPropagation();
-              onEdit();
-            }}
-            onPointerDown={(e) => e.stopPropagation()}
-            data-testid={`edit-backlog-${feature.id}`}
-          >
-            <Edit className="w-3 h-3 mr-1" />
-            Edit
-          </Button>
-          {feature.planSpec?.content && onViewPlan && (
+      {!isCurrentAutoTask &&
+        (feature.status === 'backlog' ||
+          feature.status === 'interrupted' ||
+          feature.status === 'ready') && (
+          <>
             <Button
-              variant="outline"
-              size="sm"
-              className="h-7 text-xs px-2"
-              onClick={(e) => {
-                e.stopPropagation();
-                onViewPlan();
-              }}
-              onPointerDown={(e) => e.stopPropagation()}
-              data-testid={`view-plan-${feature.id}`}
-              title="View Plan"
-            >
-              <Eye className="w-3 h-3" />
-            </Button>
-          )}
-          {onImplement && (
-            <Button
-              variant="default"
+              variant="secondary"
               size="sm"
               className="flex-1 h-7 text-xs"
               onClick={(e) => {
                 e.stopPropagation();
-                onImplement();
+                onEdit();
               }}
               onPointerDown={(e) => e.stopPropagation()}
-              data-testid={`make-${feature.id}`}
+              data-testid={`edit-backlog-${feature.id}`}
             >
-              <PlayCircle className="w-3 h-3 mr-1" />
-              Make
+              <Edit className="w-3 h-3 mr-1" />
+              Edit
             </Button>
-          )}
-        </>
-      )}
+            {feature.planSpec?.content && onViewPlan && (
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-7 text-xs px-2"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onViewPlan();
+                }}
+                onPointerDown={(e) => e.stopPropagation()}
+                data-testid={`view-plan-${feature.id}`}
+                title="View Plan"
+              >
+                <Eye className="w-3 h-3" />
+              </Button>
+            )}
+            {onImplement && (
+              <Button
+                variant="default"
+                size="sm"
+                className="flex-1 h-7 text-xs"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onImplement();
+                }}
+                onPointerDown={(e) => e.stopPropagation()}
+                data-testid={`make-${feature.id}`}
+              >
+                <PlayCircle className="w-3 h-3 mr-1" />
+                Make
+              </Button>
+            )}
+          </>
+        )}
     </div>
   );
 });
diff --git a/apps/ui/src/components/views/board-view/components/kanban-card/card-header.tsx b/apps/ui/src/components/views/board-view/components/kanban-card/card-header.tsx
index 793c3191..bdf028b9 100644
--- a/apps/ui/src/components/views/board-view/components/kanban-card/card-header.tsx
+++ b/apps/ui/src/components/views/board-view/components/kanban-card/card-header.tsx
@@ -126,35 +126,39 @@ export const CardHeaderSection = memo(function CardHeaderSection({
         </div>
       )}
 
-      {/* Backlog header */}
-      {!isCurrentAutoTask && !isSelectionMode && feature.status === 'backlog' && (
-        <div className="absolute top-2 right-2 flex items-center gap-1">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-foreground"
-            onClick={(e) => {
-              e.stopPropagation();
-              onSpawnTask?.();
-            }}
-            onPointerDown={(e) => e.stopPropagation()}
-            data-testid={`spawn-backlog-${feature.id}`}
-            title="Spawn Sub-Task"
-          >
-            <GitFork className="w-4 h-4" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-destructive"
-            onClick={handleDeleteClick}
-            onPointerDown={(e) => e.stopPropagation()}
-            data-testid={`delete-backlog-${feature.id}`}
-          >
-            <Trash2 className="w-4 h-4" />
-          </Button>
-        </div>
-      )}
+      {/* Backlog header (also handles 'interrupted' and 'ready' statuses that display in backlog column) */}
+      {!isCurrentAutoTask &&
+        !isSelectionMode &&
+        (feature.status === 'backlog' ||
+          feature.status === 'interrupted' ||
+          feature.status === 'ready') && (
+          <div className="absolute top-2 right-2 flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-foreground"
+              onClick={(e) => {
+                e.stopPropagation();
+                onSpawnTask?.();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`spawn-backlog-${feature.id}`}
+              title="Spawn Sub-Task"
+            >
+              <GitFork className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-destructive"
+              onClick={handleDeleteClick}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`delete-backlog-${feature.id}`}
+            >
+              <Trash2 className="w-4 h-4" />
+            </Button>
+          </div>
+        )}
 
       {/* Waiting approval / Verified header */}
       {!isCurrentAutoTask &&
diff --git a/apps/ui/src/components/views/board-view/components/kanban-card/kanban-card.tsx b/apps/ui/src/components/views/board-view/components/kanban-card/kanban-card.tsx
index a332f305..f6725a7d 100644
--- a/apps/ui/src/components/views/board-view/components/kanban-card/kanban-card.tsx
+++ b/apps/ui/src/components/views/board-view/components/kanban-card/kanban-card.tsx
@@ -121,6 +121,8 @@ export const KanbanCard = memo(function KanbanCard({
   const isDraggable =
     !isSelectionMode &&
     (feature.status === 'backlog' ||
+      feature.status === 'interrupted' ||
+      feature.status === 'ready' ||
       feature.status === 'waiting_approval' ||
       feature.status === 'verified' ||
       feature.status.startsWith('pipeline_') ||