feat: add red theme and board background modal

- Introduced a new red theme with custom color variables for a bold aesthetic.
- Updated the theme management to include the new red theme option.
- Added a BoardBackgroundModal component for managing board background settings, including image uploads and opacity controls.
- Enhanced KanbanCard and KanbanColumn components to support new background settings such as opacity and border visibility.
- Updated API client to handle saving and deleting board backgrounds.
- Refactored theme application logic to accommodate the new preview theme functionality.

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

@@ -58,6 +58,7 @@ import { KanbanColumn } from "./kanban-column";
 import { KanbanCard } from "./kanban-card";
 import { AgentOutputModal } from "./agent-output-modal";
 import { FeatureSuggestionsDialog } from "./feature-suggestions-dialog";
+import { BoardBackgroundModal } from "@/components/dialogs/board-background-modal";
 import {
   Plus,
   RefreshCw,
@@ -86,6 +87,7 @@ import {
   Square,
   Maximize2,
   Shuffle,
+  ImageIcon,
 } from "lucide-react";
 import { toast } from "sonner";
 import { Slider } from "@/components/ui/slider";
@@ -213,6 +215,7 @@ export function BoardView() {
     aiProfiles,
     kanbanCardDetailLevel,
     setKanbanCardDetailLevel,
+    boardBackgroundByProject,
   } = useAppStore();
   const shortcuts = useKeyboardShortcutsConfig();
   const [activeFeature, setActiveFeature] = useState<Feature | null>(null);
@@ -237,6 +240,8 @@ export function BoardView() {
   );
   const [showDeleteAllVerifiedDialog, setShowDeleteAllVerifiedDialog] =
     useState(false);
+  const [showBoardBackgroundModal, setShowBoardBackgroundModal] =
+    useState(false);
   const [persistedCategories, setPersistedCategories] = useState<string[]>([]);
   const [showFollowUpDialog, setShowFollowUpDialog] = useState(false);
   const [followUpFeature, setFollowUpFeature] = useState<Feature | null>(null);
@@ -407,7 +412,8 @@ export function BoardView() {
 
     const currentPath = currentProject.path;
     const previousPath = prevProjectPathRef.current;
-    const isProjectSwitch = previousPath !== null && currentPath !== previousPath;
+    const isProjectSwitch =
+      previousPath !== null && currentPath !== previousPath;
 
     // Get cached features from store (without adding to dependencies)
     const cachedFeatures = useAppStore.getState().features;
@@ -563,7 +569,8 @@ export function BoardView() {
     const unsubscribe = api.autoMode.onEvent((event) => {
       // Use event's projectPath or projectId if available, otherwise use current project
       // Board view only reacts to events for the currently selected project
-      const eventProjectId = ('projectId' in event && event.projectId) || projectId;
+      const eventProjectId =
+        ("projectId" in event && event.projectId) || projectId;
 
       if (event.type === "auto_mode_feature_complete") {
         // Reload features when a feature is completed
@@ -592,15 +599,16 @@ export function BoardView() {
         loadFeatures();
 
         // Check for authentication errors and show a more helpful message
-        const isAuthError = event.errorType === "authentication" ||
-                          (event.error && (
-                            event.error.includes("Authentication failed") ||
-                            event.error.includes("Invalid API key")
-                          ));
+        const isAuthError =
+          event.errorType === "authentication" ||
+          (event.error &&
+            (event.error.includes("Authentication failed") ||
+              event.error.includes("Invalid API key")));
 
         if (isAuthError) {
           toast.error("Authentication Failed", {
-            description: "Your API key is invalid or expired. Please check Settings or run 'claude login' in terminal.",
+            description:
+              "Your API key is invalid or expired. Please check Settings or run 'claude login' in terminal.",
             duration: 10000,
           });
         } else {
@@ -874,8 +882,11 @@ export function BoardView() {
       // features often have skipTests=true, and we want status-based handling first
       if (targetStatus === "verified") {
         moveFeature(featureId, "verified");
-        // Clear justFinished flag when manually verifying via drag
-        persistFeatureUpdate(featureId, { status: "verified", justFinished: false });
+        // Clear justFinishedAt timestamp when manually verifying via drag
+        persistFeatureUpdate(featureId, {
+          status: "verified",
+          justFinishedAt: undefined,
+        });
         toast.success("Feature verified", {
           description: `Manually verified: ${draggedFeature.description.slice(
             0,
@@ -885,8 +896,11 @@ export function BoardView() {
       } else if (targetStatus === "backlog") {
         // Allow moving waiting_approval cards back to backlog
         moveFeature(featureId, "backlog");
-        // Clear justFinished flag when moving back to backlog
-        persistFeatureUpdate(featureId, { status: "backlog", justFinished: false });
+        // Clear justFinishedAt timestamp when moving back to backlog
+        persistFeatureUpdate(featureId, {
+          status: "backlog",
+          justFinishedAt: undefined,
+        });
         toast.info("Feature moved to backlog", {
           description: `Moved to Backlog: ${draggedFeature.description.slice(
             0,
@@ -1207,8 +1221,11 @@ export function BoardView() {
       description: feature.description,
     });
     moveFeature(feature.id, "verified");
-    // Clear justFinished flag when manually verifying
-    persistFeatureUpdate(feature.id, { status: "verified", justFinished: false });
+    // Clear justFinishedAt timestamp when manually verifying
+    persistFeatureUpdate(feature.id, {
+      status: "verified",
+      justFinishedAt: undefined,
+    });
     toast.success("Feature verified", {
       description: `Marked as verified: ${feature.description.slice(0, 50)}${
         feature.description.length > 50 ? "..." : ""
@@ -1274,11 +1291,11 @@ export function BoardView() {
     }
 
     // Move feature back to in_progress before sending follow-up
-    // Clear justFinished flag since user is now interacting with it
+    // Clear justFinishedAt timestamp since user is now interacting with it
     const updates = {
       status: "in_progress" as const,
       startedAt: new Date().toISOString(),
-      justFinished: false,
+      justFinishedAt: undefined,
     };
     updateFeature(featureId, updates);
     persistFeatureUpdate(featureId, updates);
@@ -1537,11 +1554,22 @@ export function BoardView() {
       }
     });
 
-    // Sort waiting_approval column: justFinished features go to the top
+    // Sort waiting_approval column: justFinished features (within 2 minutes) go to the top
     map.waiting_approval.sort((a, b) => {
-      // Features with justFinished=true should appear first
-      if (a.justFinished && !b.justFinished) return -1;
-      if (!a.justFinished && b.justFinished) return 1;
+      // 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
     });
 
@@ -1646,7 +1674,7 @@ export function BoardView() {
       return;
     }
 
-    const featuresToStart = backlogFeatures.slice(0, availableSlots);
+    const featuresToStart = backlogFeatures.slice(0, 1);
 
     for (const feature of featuresToStart) {
       // Update the feature status with startedAt timestamp
@@ -1855,202 +1883,296 @@ export function BoardView() {
             )}
           </div>
 
-          {/* Kanban Card Detail Level Toggle */}
+          {/* Board Background & Detail Level Controls */}
           {isMounted && (
             <TooltipProvider>
-              <div
-                className="flex items-center rounded-lg bg-secondary border border-border ml-4"
-                data-testid="kanban-detail-toggle"
-              >
+              <div className="flex items-center gap-2 ml-4">
+                {/* Board Background Button */}
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <button
-                      onClick={() => setKanbanCardDetailLevel("minimal")}
-                      className={cn(
-                        "p-2 rounded-l-lg transition-colors",
-                        kanbanCardDetailLevel === "minimal"
-                          ? "bg-brand-500/20 text-brand-500"
-                          : "text-muted-foreground hover:text-foreground hover:bg-accent"
-                      )}
-                      data-testid="kanban-toggle-minimal"
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setShowBoardBackgroundModal(true)}
+                      className="h-8 px-2"
+                      data-testid="board-background-button"
                     >
-                      <Minimize2 className="w-4 h-4" />
-                    </button>
+                      <ImageIcon className="w-4 h-4" />
+                    </Button>
                   </TooltipTrigger>
                   <TooltipContent>
-                    <p>Minimal - Title & category only</p>
-                  </TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      onClick={() => setKanbanCardDetailLevel("standard")}
-                      className={cn(
-                        "p-2 transition-colors",
-                        kanbanCardDetailLevel === "standard"
-                          ? "bg-brand-500/20 text-brand-500"
-                          : "text-muted-foreground hover:text-foreground hover:bg-accent"
-                      )}
-                      data-testid="kanban-toggle-standard"
-                    >
-                      <Square className="w-4 h-4" />
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>Standard - Steps & progress</p>
-                  </TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      onClick={() => setKanbanCardDetailLevel("detailed")}
-                      className={cn(
-                        "p-2 rounded-r-lg transition-colors",
-                        kanbanCardDetailLevel === "detailed"
-                          ? "bg-brand-500/20 text-brand-500"
-                          : "text-muted-foreground hover:text-foreground hover:bg-accent"
-                      )}
-                      data-testid="kanban-toggle-detailed"
-                    >
-                      <Maximize2 className="w-4 h-4" />
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>Detailed - Model, tools & tasks</p>
+                    <p>Board Background Settings</p>
                   </TooltipContent>
                 </Tooltip>
+
+                {/* Kanban Card Detail Level Toggle */}
+                <div
+                  className="flex items-center rounded-lg bg-secondary border border-border"
+                  data-testid="kanban-detail-toggle"
+                >
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        onClick={() => setKanbanCardDetailLevel("minimal")}
+                        className={cn(
+                          "p-2 rounded-l-lg transition-colors",
+                          kanbanCardDetailLevel === "minimal"
+                            ? "bg-brand-500/20 text-brand-500"
+                            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                        )}
+                        data-testid="kanban-toggle-minimal"
+                      >
+                        <Minimize2 className="w-4 h-4" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Minimal - Title & category only</p>
+                    </TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        onClick={() => setKanbanCardDetailLevel("standard")}
+                        className={cn(
+                          "p-2 transition-colors",
+                          kanbanCardDetailLevel === "standard"
+                            ? "bg-brand-500/20 text-brand-500"
+                            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                        )}
+                        data-testid="kanban-toggle-standard"
+                      >
+                        <Square className="w-4 h-4" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Standard - Steps & progress</p>
+                    </TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        onClick={() => setKanbanCardDetailLevel("detailed")}
+                        className={cn(
+                          "p-2 rounded-r-lg transition-colors",
+                          kanbanCardDetailLevel === "detailed"
+                            ? "bg-brand-500/20 text-brand-500"
+                            : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                        )}
+                        data-testid="kanban-toggle-detailed"
+                      >
+                        <Maximize2 className="w-4 h-4" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Detailed - Model, tools & tasks</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
               </div>
             </TooltipProvider>
           )}
         </div>
         {/* Kanban Columns */}
-        <div className="flex-1 overflow-x-auto px-4 pb-4">
-          <DndContext
-            sensors={sensors}
-            collisionDetection={collisionDetectionStrategy}
-            onDragStart={handleDragStart}
-            onDragEnd={handleDragEnd}
-          >
-            <div className="flex gap-4 h-full min-w-max">
-              {COLUMNS.map((column) => {
-                const columnFeatures = getColumnFeatures(column.id);
-                return (
-                  <KanbanColumn
-                    key={column.id}
-                    id={column.id}
-                    title={column.title}
-                    color={column.color}
-                    count={columnFeatures.length}
-                    headerAction={
-                      column.id === "verified" && columnFeatures.length > 0 ? (
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-6 px-2 text-xs text-destructive hover:text-destructive hover:bg-destructive/10"
-                          onClick={() => setShowDeleteAllVerifiedDialog(true)}
-                          data-testid="delete-all-verified-button"
-                        >
-                          <Trash2 className="w-3 h-3 mr-1" />
-                          Delete All
-                        </Button>
-                      ) : column.id === "backlog" ? (
-                        <div className="flex items-center gap-1">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-6 w-6 p-0 text-yellow-500 hover:text-yellow-400 hover:bg-yellow-500/10 relative"
-                            onClick={() => setShowSuggestionsDialog(true)}
-                            title="Feature Suggestions"
-                            data-testid="feature-suggestions-button"
-                          >
-                            <Lightbulb className="w-3.5 h-3.5" />
-                            {suggestionsCount > 0 && (
-                              <span
-                                className="absolute -top-1 -right-1 w-4 h-4 text-[9px] font-mono rounded-full bg-yellow-500 text-black flex items-center justify-center"
-                                data-testid="suggestions-count"
-                              >
-                                {suggestionsCount}
-                              </span>
-                            )}
-                          </Button>
-                          {columnFeatures.length > 0 && (
-                            <HotkeyButton
+        {(() => {
+          // 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,
+              };
+
+          // Build background image style if image exists
+          const backgroundImageStyle = backgroundSettings.imagePath
+            ? {
+                backgroundImage: `url(${
+                  process.env.NEXT_PUBLIC_SERVER_URL || "http://localhost:3008"
+                }/api/fs/image?path=${encodeURIComponent(
+                  backgroundSettings.imagePath
+                )}&projectPath=${encodeURIComponent(
+                  currentProject?.path || ""
+                )})`,
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+              }
+            : {};
+
+          return (
+            <div
+              className="flex-1 overflow-x-auto px-4 pb-4 relative"
+              style={backgroundImageStyle}
+            >
+              <DndContext
+                sensors={sensors}
+                collisionDetection={collisionDetectionStrategy}
+                onDragStart={handleDragStart}
+                onDragEnd={handleDragEnd}
+              >
+                <div className="flex gap-4 h-full min-w-max">
+                  {COLUMNS.map((column) => {
+                    const columnFeatures = getColumnFeatures(column.id);
+                    return (
+                      <KanbanColumn
+                        key={column.id}
+                        id={column.id}
+                        title={column.title}
+                        color={column.color}
+                        count={columnFeatures.length}
+                        opacity={backgroundSettings.columnOpacity}
+                        showBorder={backgroundSettings.columnBorderEnabled}
+                        hideScrollbar={backgroundSettings.hideScrollbar}
+                        headerAction={
+                          column.id === "verified" &&
+                          columnFeatures.length > 0 ? (
+                            <Button
                               variant="ghost"
                               size="sm"
-                              className="h-6 px-2 text-xs text-primary hover:text-primary hover:bg-primary/10"
-                              onClick={handleStartNextFeatures}
-                              hotkey={shortcuts.startNext}
-                              hotkeyActive={false}
-                              data-testid="start-next-button"
+                              className="h-6 px-2 text-xs text-destructive hover:text-destructive hover:bg-destructive/10"
+                              onClick={() =>
+                                setShowDeleteAllVerifiedDialog(true)
+                              }
+                              data-testid="delete-all-verified-button"
                             >
-                              <FastForward className="w-3 h-3 mr-1" />
-                              Pull Top
-                            </HotkeyButton>
-                          )}
-                        </div>
-                      ) : undefined
-                    }
-                  >
-                    <SortableContext
-                      items={columnFeatures.map((f) => f.id)}
-                      strategy={verticalListSortingStrategy}
-                    >
-                      {columnFeatures.map((feature, index) => {
-                        // Calculate shortcut key for in-progress cards (first 10 get 1-9, 0)
-                        let shortcutKey: string | undefined;
-                        if (column.id === "in_progress" && index < 10) {
-                          shortcutKey = index === 9 ? "0" : String(index + 1);
+                              <Trash2 className="w-3 h-3 mr-1" />
+                              Delete All
+                            </Button>
+                          ) : column.id === "backlog" ? (
+                            <div className="flex items-center gap-1">
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-6 w-6 p-0 text-yellow-500 hover:text-yellow-400 hover:bg-yellow-500/10 relative"
+                                onClick={() => setShowSuggestionsDialog(true)}
+                                title="Feature Suggestions"
+                                data-testid="feature-suggestions-button"
+                              >
+                                <Lightbulb className="w-3.5 h-3.5" />
+                                {suggestionsCount > 0 && (
+                                  <span
+                                    className="absolute -top-1 -right-1 w-4 h-4 text-[9px] font-mono rounded-full bg-yellow-500 text-black flex items-center justify-center"
+                                    data-testid="suggestions-count"
+                                  >
+                                    {suggestionsCount}
+                                  </span>
+                                )}
+                              </Button>
+                              {columnFeatures.length > 0 && (
+                                <HotkeyButton
+                                  variant="ghost"
+                                  size="sm"
+                                  className="h-6 px-2 text-xs text-primary hover:text-primary hover:bg-primary/10"
+                                  onClick={handleStartNextFeatures}
+                                  hotkey={shortcuts.startNext}
+                                  hotkeyActive={false}
+                                  data-testid="start-next-button"
+                                >
+                                  <FastForward className="w-3 h-3 mr-1" />
+                                  Pull Top
+                                </HotkeyButton>
+                              )}
+                            </div>
+                          ) : undefined
                         }
-                        return (
-                          <KanbanCard
-                            key={feature.id}
-                            feature={feature}
-                            onEdit={() => setEditingFeature(feature)}
-                            onDelete={() => handleDeleteFeature(feature.id)}
-                            onViewOutput={() => handleViewOutput(feature)}
-                            onVerify={() => handleVerifyFeature(feature)}
-                            onResume={() => handleResumeFeature(feature)}
-                            onForceStop={() => handleForceStopFeature(feature)}
-                            onManualVerify={() => handleManualVerify(feature)}
-                            onMoveBackToInProgress={() =>
-                              handleMoveBackToInProgress(feature)
+                      >
+                        <SortableContext
+                          items={columnFeatures.map((f) => f.id)}
+                          strategy={verticalListSortingStrategy}
+                        >
+                          {columnFeatures.map((feature, index) => {
+                            // Calculate shortcut key for in-progress cards (first 10 get 1-9, 0)
+                            let shortcutKey: string | undefined;
+                            if (column.id === "in_progress" && index < 10) {
+                              shortcutKey =
+                                index === 9 ? "0" : String(index + 1);
                             }
-                            onFollowUp={() => handleOpenFollowUp(feature)}
-                            onCommit={() => handleCommitFeature(feature)}
-                            onRevert={() => handleRevertFeature(feature)}
-                            onMerge={() => handleMergeFeature(feature)}
-                            hasContext={featuresWithContext.has(feature.id)}
-                            isCurrentAutoTask={runningAutoTasks.includes(
-                              feature.id
-                            )}
-                            shortcutKey={shortcutKey}
-                          />
-                        );
-                      })}
-                    </SortableContext>
-                  </KanbanColumn>
-                );
-              })}
-            </div>
+                            return (
+                              <KanbanCard
+                                key={feature.id}
+                                feature={feature}
+                                onEdit={() => setEditingFeature(feature)}
+                                onDelete={() => handleDeleteFeature(feature.id)}
+                                onViewOutput={() => handleViewOutput(feature)}
+                                onVerify={() => handleVerifyFeature(feature)}
+                                onResume={() => handleResumeFeature(feature)}
+                                onForceStop={() =>
+                                  handleForceStopFeature(feature)
+                                }
+                                onManualVerify={() =>
+                                  handleManualVerify(feature)
+                                }
+                                onMoveBackToInProgress={() =>
+                                  handleMoveBackToInProgress(feature)
+                                }
+                                onFollowUp={() => handleOpenFollowUp(feature)}
+                                onCommit={() => handleCommitFeature(feature)}
+                                onRevert={() => handleRevertFeature(feature)}
+                                onMerge={() => handleMergeFeature(feature)}
+                                hasContext={featuresWithContext.has(feature.id)}
+                                isCurrentAutoTask={runningAutoTasks.includes(
+                                  feature.id
+                                )}
+                                shortcutKey={shortcutKey}
+                                opacity={backgroundSettings.cardOpacity}
+                                glassmorphism={
+                                  backgroundSettings.cardGlassmorphism
+                                }
+                                cardBorderEnabled={
+                                  backgroundSettings.cardBorderEnabled
+                                }
+                                cardBorderOpacity={
+                                  backgroundSettings.cardBorderOpacity
+                                }
+                              />
+                            );
+                          })}
+                        </SortableContext>
+                      </KanbanColumn>
+                    );
+                  })}
+                </div>
 
-            <DragOverlay>
-              {activeFeature && (
-                <Card className="w-72 opacity-90 rotate-3 shadow-xl">
-                  <CardHeader className="p-3">
-                    <CardTitle className="text-sm">
-                      {activeFeature.description}
-                    </CardTitle>
-                    <CardDescription className="text-xs">
-                      {activeFeature.category}
-                    </CardDescription>
-                  </CardHeader>
-                </Card>
-              )}
-            </DragOverlay>
-          </DndContext>
-        </div>
+                <DragOverlay>
+                  {activeFeature && (
+                    <Card className="w-72 opacity-90 rotate-3 shadow-xl">
+                      <CardHeader className="p-3">
+                        <CardTitle className="text-sm">
+                          {activeFeature.description}
+                        </CardTitle>
+                        <CardDescription className="text-xs">
+                          {activeFeature.category}
+                        </CardDescription>
+                      </CardHeader>
+                    </Card>
+                  )}
+                </DragOverlay>
+              </DndContext>
+            </div>
+          );
+        })()}
       </div>
 
+      {/* Board Background Modal */}
+      <BoardBackgroundModal
+        open={showBoardBackgroundModal}
+        onOpenChange={setShowBoardBackgroundModal}
+      />
+
       {/* Add Feature Dialog */}
       <Dialog
         open={showAddDialog}