feat: enhance board background settings and introduce animated borders

- Added default background settings to streamline background management across components.
- Implemented animated border styles for in-progress cards to improve visual feedback.
- Refactored BoardBackgroundModal and BoardView components to utilize the new default settings, ensuring consistent background behavior.
- Updated KanbanCard to support animated borders, enhancing the user experience during task progress.
- Improved Sidebar component by optimizing the fetching of running agents count with a more efficient use of hooks.

apps/app/src/components/views/board-view.tsx

@@ -24,6 +24,7 @@ import {
   AgentModel,
   ThinkingLevel,
   AIProfile,
+  defaultBackgroundSettings,
 } from "@/store/app-store";
 import { getElectronAPI } from "@/lib/electron";
 import { cn, modelSupportsThinking } from "@/lib/utils";
@@ -1554,25 +1555,6 @@ export function BoardView() {
       }
     });
 
-    // Sort waiting_approval column: justFinished features (within 2 minutes) go to the top
-    map.waiting_approval.sort((a, b) => {
-      // Helper to check if feature is "just finished" (within 2 minutes)
-      const isJustFinished = (feature: Feature) => {
-        if (!feature.justFinishedAt) return false;
-        const finishedTime = new Date(feature.justFinishedAt).getTime();
-        const now = Date.now();
-        const twoMinutes = 2 * 60 * 1000; // 2 minutes in milliseconds
-        return now - finishedTime < twoMinutes;
-      };
-
-      const aJustFinished = isJustFinished(a);
-      const bJustFinished = isJustFinished(b);
-      // Features with justFinishedAt within 2 minutes should appear first
-      if (aJustFinished && !bJustFinished) return -1;
-      if (!aJustFinished && bJustFinished) return 1;
-      return 0; // Keep original order for features with same justFinished status
-    });
-
     return map;
   }, [features, runningAutoTasks, searchQuery]);
 
@@ -1975,27 +1957,9 @@ export function BoardView() {
         {/* Kanban Columns */}
         {(() => {
           // Get background settings for current project
-          const backgroundSettings = currentProject
-            ? boardBackgroundByProject[currentProject.path] || {
-                imagePath: null,
-                cardOpacity: 100,
-                columnOpacity: 100,
-                columnBorderEnabled: true,
-                cardGlassmorphism: true,
-                cardBorderEnabled: true,
-                cardBorderOpacity: 100,
-                hideScrollbar: false,
-              }
-            : {
-                imagePath: null,
-                cardOpacity: 100,
-                columnOpacity: 100,
-                columnBorderEnabled: true,
-                cardGlassmorphism: true,
-                cardBorderEnabled: true,
-                cardBorderOpacity: 100,
-                hideScrollbar: false,
-              };
+          const backgroundSettings =
+            (currentProject && boardBackgroundByProject[currentProject.path]) ||
+            defaultBackgroundSettings;
 
           // Build background image style if image exists
           const backgroundImageStyle = backgroundSettings.imagePath

apps/app/src/components/views/kanban-card.tsx

@@ -309,26 +309,30 @@ export const KanbanCard = memo(function KanbanCard({
     ).borderColor = `color-mix(in oklch, var(--border) ${cardBorderOpacity}%, transparent)`;
   }
 
-  return (
+  const cardElement = (
     <Card
       ref={setNodeRef}
-      style={borderStyle}
+      style={isCurrentAutoTask ? style : borderStyle}
       className={cn(
         "cursor-grab active:cursor-grabbing transition-all relative kanban-card-content select-none",
         // Apply border class when border is enabled and opacity is 100%
         // When opacity is not 100%, we use inline styles for border color
-        cardBorderEnabled && cardBorderOpacity === 100 && "border-border",
+        // Skip border classes when animated border is active (isCurrentAutoTask)
+        !isCurrentAutoTask &&
+          cardBorderEnabled &&
+          cardBorderOpacity === 100 &&
+          "border-border",
         // When border is enabled but opacity is not 100%, we still need border width
-        cardBorderEnabled && cardBorderOpacity !== 100 && "border",
+        !isCurrentAutoTask &&
+          cardBorderEnabled &&
+          cardBorderOpacity !== 100 &&
+          "border",
         // Remove default background when using opacity overlay
         !isDragging && "bg-transparent",
         // Remove default backdrop-blur-sm from Card component when glassmorphism is disabled
         !glassmorphism && "backdrop-blur-[0px]!",
         isDragging && "scale-105 shadow-lg",
-        // Special border styles for running/error states override the border opacity
-        // These need to be applied with higher specificity
-        isCurrentAutoTask &&
-          "border-running-indicator border-2 shadow-running-indicator/50 shadow-lg animate-pulse",
+        // Error state border (only when not in progress)
         feature.error &&
           !isCurrentAutoTask &&
           "border-red-500 border-2 shadow-red-500/30 shadow-lg",
@@ -1056,4 +1060,11 @@ export const KanbanCard = memo(function KanbanCard({
       </Dialog>
     </Card>
   );
+
+  // Wrap with animated border when in progress
+  if (isCurrentAutoTask) {
+    return <div className="animated-border-wrapper">{cardElement}</div>;
+  }
+
+  return cardElement;
 });