Merge pull request #192 from AutoMaker-Org/persist-background-settings

refactor: Introduce useBoardBackgroundSettings hook for managing boar…

apps/ui/src/components/dialogs/board-background-modal.tsx

@@ -15,6 +15,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
 import { useAppStore, defaultBackgroundSettings } from "@/store/app-store";
 import { getHttpApiClient } from "@/lib/http-api-client";
+import { useBoardBackgroundSettings } from "@/hooks/use-board-background-settings";
 import { toast } from "sonner";
 
 const ACCEPTED_IMAGE_TYPES = [
@@ -35,9 +36,8 @@ export function BoardBackgroundModal({
   open,
   onOpenChange,
 }: BoardBackgroundModalProps) {
+  const { currentProject, boardBackgroundByProject } = useAppStore();
   const {
-    currentProject,
-    boardBackgroundByProject,
     setBoardBackground,
     setCardOpacity,
     setColumnOpacity,
@@ -47,7 +47,7 @@ export function BoardBackgroundModal({
     setCardBorderOpacity,
     setHideScrollbar,
     clearBoardBackground,
-  } = useAppStore();
+  } = useBoardBackgroundSettings();
   const [isDragOver, setIsDragOver] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -139,8 +139,8 @@ export function BoardBackgroundModal({
         );
 
         if (result.success && result.path) {
-          // Update store with the relative path (live update)
-          setBoardBackground(currentProject.path, result.path);
+          // Update store and persist to server
+          await setBoardBackground(currentProject.path, result.path);
           toast.success("Background image saved");
         } else {
           toast.error(result.error || "Failed to save background image");
@@ -214,7 +214,7 @@ export function BoardBackgroundModal({
       );
 
       if (result.success) {
-        clearBoardBackground(currentProject.path);
+        await clearBoardBackground(currentProject.path);
         setPreviewImage(null);
         toast.success("Background image cleared");
       } else {
@@ -228,59 +228,59 @@ export function BoardBackgroundModal({
     }
   }, [currentProject, clearBoardBackground]);
 
-  // Live update opacity when sliders change
+  // Live update opacity when sliders change (with persistence)
   const handleCardOpacityChange = useCallback(
-    (value: number[]) => {
+    async (value: number[]) => {
       if (!currentProject) return;
-      setCardOpacity(currentProject.path, value[0]);
+      await setCardOpacity(currentProject.path, value[0]);
     },
     [currentProject, setCardOpacity]
   );
 
   const handleColumnOpacityChange = useCallback(
-    (value: number[]) => {
+    async (value: number[]) => {
       if (!currentProject) return;
-      setColumnOpacity(currentProject.path, value[0]);
+      await setColumnOpacity(currentProject.path, value[0]);
     },
     [currentProject, setColumnOpacity]
   );
 
   const handleColumnBorderToggle = useCallback(
-    (checked: boolean) => {
+    async (checked: boolean) => {
       if (!currentProject) return;
-      setColumnBorderEnabled(currentProject.path, checked);
+      await setColumnBorderEnabled(currentProject.path, checked);
     },
     [currentProject, setColumnBorderEnabled]
   );
 
   const handleCardGlassmorphismToggle = useCallback(
-    (checked: boolean) => {
+    async (checked: boolean) => {
       if (!currentProject) return;
-      setCardGlassmorphism(currentProject.path, checked);
+      await setCardGlassmorphism(currentProject.path, checked);
     },
     [currentProject, setCardGlassmorphism]
   );
 
   const handleCardBorderToggle = useCallback(
-    (checked: boolean) => {
+    async (checked: boolean) => {
       if (!currentProject) return;
-      setCardBorderEnabled(currentProject.path, checked);
+      await setCardBorderEnabled(currentProject.path, checked);
     },
     [currentProject, setCardBorderEnabled]
   );
 
   const handleCardBorderOpacityChange = useCallback(
-    (value: number[]) => {
+    async (value: number[]) => {
       if (!currentProject) return;
-      setCardBorderOpacity(currentProject.path, value[0]);
+      await setCardBorderOpacity(currentProject.path, value[0]);
     },
     [currentProject, setCardBorderOpacity]
   );
 
   const handleHideScrollbarToggle = useCallback(
-    (checked: boolean) => {
+    async (checked: boolean) => {
       if (!currentProject) return;
-      setHideScrollbar(currentProject.path, checked);
+      await setHideScrollbar(currentProject.path, checked);
     },
     [currentProject, setHideScrollbar]
   );

apps/ui/src/components/dialogs/file-browser-dialog.tsx

@@ -208,13 +208,31 @@ export function FileBrowserDialog({
     }
   };
 
-  const handleSelect = () => {
+  const handleSelect = useCallback(() => {
     if (currentPath) {
       addRecentFolder(currentPath);
       onSelect(currentPath);
       onOpenChange(false);
     }
-  };
+  }, [currentPath, onSelect, onOpenChange]);
+
+  // Handle Command/Ctrl+Enter keyboard shortcut to select current folder
+  useEffect(() => {
+    if (!open) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Check for Command+Enter (Mac) or Ctrl+Enter (Windows/Linux)
+      if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        if (currentPath && !loading) {
+          handleSelect();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open, currentPath, loading, handleSelect]);
 
   // Helper to get folder name from path
   const getFolderName = (path: string) => {
@@ -399,9 +417,12 @@ export function FileBrowserDialog({
           <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
-          <Button size="sm" onClick={handleSelect} disabled={!currentPath || loading}>
+          <Button size="sm" onClick={handleSelect} disabled={!currentPath || loading} title="Select current folder (Cmd+Enter / Ctrl+Enter)">
             <FolderOpen className="w-3.5 h-3.5 mr-1.5" />
             Select Current Folder
+            <kbd className="ml-2 px-1.5 py-0.5 text-[10px] bg-background/50 rounded border border-border">
+              {typeof navigator !== "undefined" && navigator.platform?.includes("Mac") ? "⌘" : "Ctrl"}+↵
+            </kbd>
           </Button>
         </DialogFooter>
       </DialogContent>

apps/ui/src/components/ui/card.tsx

@@ -11,11 +11,12 @@ function Card({ className, gradient = false, ...props }: CardProps) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border border-white/10 backdrop-blur-md py-6",
+        "bg-card text-card-foreground flex flex-col gap-1 rounded-xl border border-white/10 backdrop-blur-md py-6",
         // Premium layered shadow
         "shadow-[0_1px_2px_rgba(0,0,0,0.05),0_4px_6px_rgba(0,0,0,0.05),0_10px_20px_rgba(0,0,0,0.04)]",
         // Gradient border option
-        gradient && "relative before:absolute before:inset-0 before:rounded-xl before:p-[1px] before:bg-gradient-to-br before:from-white/20 before:to-transparent before:pointer-events-none before:-z-10",
+        gradient &&
+          "relative before:absolute before:inset-0 before:rounded-xl before:p-[1px] before:bg-gradient-to-br before:from-white/20 before:to-transparent before:pointer-events-none before:-z-10",
         className
       )}
       {...props}

apps/ui/src/components/views/board-view/components/kanban-card.tsx

@@ -1,4 +1,3 @@
-
 import { useState, useEffect, useMemo, memo } from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
@@ -150,7 +149,12 @@ export const KanbanCard = memo(function KanbanCard({
   const [agentInfo, setAgentInfo] = useState<AgentTaskInfo | null>(null);
   const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
   const [currentTime, setCurrentTime] = useState(() => Date.now());
-  const { kanbanCardDetailLevel, enableDependencyBlocking, features, useWorktrees } = useAppStore();
+  const {
+    kanbanCardDetailLevel,
+    enableDependencyBlocking,
+    features,
+    useWorktrees,
+  } = useAppStore();
 
   // Calculate blocking dependencies (if feature is in backlog and has incomplete dependencies)
   const blockingDependencies = useMemo(() => {
@@ -287,9 +291,8 @@ export const KanbanCard = memo(function KanbanCard({
     (borderStyle as Record<string, string>).borderColor = "transparent";
   } else if (cardBorderOpacity !== 100) {
     (borderStyle as Record<string, string>).borderWidth = "1px";
-    (
-      borderStyle as Record<string, string>
-    ).borderColor = `color-mix(in oklch, var(--border) ${cardBorderOpacity}%, transparent)`;
+    (borderStyle as Record<string, string>).borderColor =
+      `color-mix(in oklch, var(--border) ${cardBorderOpacity}%, transparent)`;
   }
 
   const cardElement = (
@@ -336,168 +339,220 @@ export const KanbanCard = memo(function KanbanCard({
         />
       )}
 
-      {/* Priority badge */}
-      {feature.priority && (
-        <TooltipProvider delayDuration={200}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div
-                className={cn(
-                  "absolute px-2 py-1 h-8 text-sm font-bold rounded-md flex items-center justify-center z-10",
-                  "top-2 left-2 min-w-[36px]",
-                  feature.priority === 1 &&
-                    "bg-red-500/20 text-red-500 border-2 border-red-500/50",
-                  feature.priority === 2 &&
-                    "bg-yellow-500/20 text-yellow-500 border-2 border-yellow-500/50",
-                  feature.priority === 3 &&
-                    "bg-blue-500/20 text-blue-500 border-2 border-blue-500/50"
-                )}
-                data-testid={`priority-badge-${feature.id}`}
-              >
-                {feature.priority === 1 ? "H" : feature.priority === 2 ? "M" : "L"}
-              </div>
-            </TooltipTrigger>
-            <TooltipContent side="right" className="text-xs">
-              <p>
-                {feature.priority === 1
-                  ? "High Priority"
-                  : feature.priority === 2
-                  ? "Medium Priority"
-                  : "Low Priority"}
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      )}
-
-      {/* Category text next to priority badge */}
-      {feature.priority && (
-        <div className="absolute top-2 left-[54px] right-12 z-10 flex items-center h-[32px]">
-          <span className="text-[11px] text-muted-foreground/70 font-medium truncate">
-            {feature.category}
-          </span>
-        </div>
-      )}
-
-      {/* Skip Tests (Manual) indicator badge - positioned at top right */}
-      {feature.skipTests && !feature.error && feature.status === "backlog" && (
-        <TooltipProvider delayDuration={200}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div
-                className={cn(
-                  "absolute px-2 py-1 h-8 text-sm font-bold rounded-md flex items-center justify-center z-10",
-                  "min-w-[36px]",
-                  "top-2 right-2",
-                  "bg-[var(--status-warning-bg)] border-2 border-[var(--status-warning)]/50 text-[var(--status-warning)]"
-                )}
-                data-testid={`skip-tests-badge-${feature.id}`}
-              >
-                <Hand className="w-4 h-4" />
-              </div>
-            </TooltipTrigger>
-            <TooltipContent side="left" className="text-xs">
-              <p>Manual verification required</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      )}
-
-      {/* Error indicator badge */}
-      {feature.error && (
-        <TooltipProvider delayDuration={200}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div
-                className={cn(
-                  "absolute px-2 py-1 text-[11px] font-medium rounded-md flex items-center justify-center z-10",
-                  "min-w-[36px]",
-                  feature.priority ? "top-11 left-2" : "top-2 left-2",
-                  "bg-[var(--status-error-bg)] border border-[var(--status-error)]/40 text-[var(--status-error)]"
-                )}
-                data-testid={`error-badge-${feature.id}`}
-              >
-                <AlertCircle className="w-3.5 h-3.5" />
-              </div>
-            </TooltipTrigger>
-            <TooltipContent side="right" className="text-xs max-w-[250px]">
-              <p>{feature.error}</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      )}
-
-      {/* Blocked by dependencies badge - positioned at top right */}
-      {blockingDependencies.length > 0 && !feature.error && !feature.skipTests && feature.status === "backlog" && (
-        <TooltipProvider delayDuration={200}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div
-                className={cn(
-                  "absolute px-2 py-1 h-8 text-sm font-bold rounded-md flex items-center justify-center z-10",
-                  "min-w-[36px]",
-                  "top-2 right-2",
-                  "bg-orange-500/20 border-2 border-orange-500/50 text-orange-500"
-                )}
-                data-testid={`blocked-badge-${feature.id}`}
-              >
-                <Lock className="w-4 h-4" />
-              </div>
-            </TooltipTrigger>
-            <TooltipContent side="left" className="text-xs max-w-[250px]">
-              <p className="font-medium mb-1">Blocked by {blockingDependencies.length} incomplete {blockingDependencies.length === 1 ? 'dependency' : 'dependencies'}</p>
-              <p className="text-muted-foreground">
-                {blockingDependencies.map(depId => {
-                  const dep = features.find(f => f.id === depId);
-                  return dep?.description || depId;
-                }).join(', ')}
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      )}
-
-      {/* Just Finished indicator badge */}
-      {isJustFinished && (
-        <div
-          className={cn(
-            "absolute px-1.5 py-0.5 text-[10px] font-medium rounded-md flex items-center gap-1 z-10",
-            feature.priority ? "top-11 left-2" : "top-2 left-2",
-            "bg-[var(--status-success-bg)] border border-[var(--status-success)]/40 text-[var(--status-success)]",
-            "animate-pulse"
+      {/* Compact Badge Row */}
+      {(feature.error ||
+        (blockingDependencies.length > 0 &&
+          !feature.error &&
+          !feature.skipTests &&
+          feature.status === "backlog") ||
+        isJustFinished) && (
+        <div className="flex flex-wrap items-center gap-1.5 px-3 pt-1.5 min-h-[24px]">
+          {/* Error badge */}
+          {feature.error && (
+            <TooltipProvider delayDuration={200}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div
+                    className={cn(
+                      "inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium",
+                      "bg-[var(--status-error-bg)] border-[var(--status-error)]/40 text-[var(--status-error)]"
+                    )}
+                    data-testid={`error-badge-${feature.id}`}
+                  >
+                    <AlertCircle className="w-3 h-3" />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="text-xs max-w-[250px]">
+                  <p>{feature.error}</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+
+          {/* Blocked badge */}
+          {blockingDependencies.length > 0 &&
+            !feature.error &&
+            !feature.skipTests &&
+            feature.status === "backlog" && (
+              <TooltipProvider delayDuration={200}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div
+                      className={cn(
+                        "inline-flex items-center gap-1 rounded-full border-2 px-1.5 py-0.5 text-[10px] font-bold",
+                        "bg-orange-500/20 border-orange-500/50 text-orange-500"
+                      )}
+                      data-testid={`blocked-badge-${feature.id}`}
+                    >
+                      <Lock className="w-3 h-3" />
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent
+                    side="bottom"
+                    className="text-xs max-w-[250px]"
+                  >
+                    <p className="font-medium mb-1">
+                      Blocked by {blockingDependencies.length} incomplete{" "}
+                      {blockingDependencies.length === 1
+                        ? "dependency"
+                        : "dependencies"}
+                    </p>
+                    <p className="text-muted-foreground">
+                      {blockingDependencies
+                        .map((depId) => {
+                          const dep = features.find((f) => f.id === depId);
+                          return dep?.description || depId;
+                        })
+                        .join(", ")}
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+
+          {/* Just Finished badge */}
+          {isJustFinished && (
+            <div
+              className={cn(
+                "inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium",
+                "bg-[var(--status-success-bg)] border-[var(--status-success)]/40 text-[var(--status-success)]",
+                "animate-pulse"
+              )}
+              data-testid={`just-finished-badge-${feature.id}`}
+              title="Agent just finished working on this feature"
+            >
+              <Sparkles className="w-3 h-3" />
+            </div>
           )}
-          data-testid={`just-finished-badge-${feature.id}`}
-          title="Agent just finished working on this feature"
-        >
-          <Sparkles className="w-3 h-3" />
         </div>
       )}
 
-      <CardHeader
-        className={cn(
-          "p-3 pb-2 block",
-          feature.priority && "pt-12",
-          !feature.priority &&
-            (feature.skipTests || feature.error || isJustFinished) &&
-            "pt-10"
-        )}
-      >
-        {isCurrentAutoTask && (
-          <div className="absolute top-2 right-2 flex items-center justify-center gap-2 bg-[var(--status-in-progress)]/15 border border-[var(--status-in-progress)]/50 rounded-md px-2 py-0.5">
-            <Loader2 className="w-3.5 h-3.5 text-[var(--status-in-progress)] animate-spin" />
-            <span className="text-[10px] text-[var(--status-in-progress)] font-medium">
-              {formatModelName(feature.model ?? DEFAULT_MODEL)}
-            </span>
-            {feature.startedAt && (
-              <CountUpTimer
-                startedAt={feature.startedAt}
-                className="text-[var(--status-in-progress)] text-[10px]"
-              />
+      {/* Category row */}
+      <div className="px-3 pt-4">
+        <span className="text-[11px] text-muted-foreground/70 font-medium">
+          {feature.category}
+        </span>
+      </div>
+
+      <CardHeader className="p-3 pb-2 block">
+        {/* Priority and Manual Verification badges - top left, aligned with delete button */}
+        {(feature.priority ||
+          (feature.skipTests &&
+            !feature.error &&
+            feature.status === "backlog")) && (
+          <div className="absolute top-2 left-2 flex items-center gap-1.5">
+            {/* Priority badge */}
+            {feature.priority && (
+              <TooltipProvider delayDuration={200}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div
+                      className={cn(
+                        "inline-flex items-center justify-center gap-1 rounded-full border-2 px-1.5 py-0.5 text-[10px] font-bold",
+                        feature.priority === 1 &&
+                          "bg-red-500/20 text-red-500 border-red-500/50",
+                        feature.priority === 2 &&
+                          "bg-yellow-500/20 text-yellow-500 border-yellow-500/50",
+                        feature.priority === 3 &&
+                          "bg-blue-500/20 text-blue-500 border-blue-500/50"
+                      )}
+                      data-testid={`priority-badge-${feature.id}`}
+                    >
+                      {feature.priority === 1
+                        ? "H"
+                        : feature.priority === 2
+                          ? "M"
+                          : "L"}
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" className="text-xs">
+                    <p>
+                      {feature.priority === 1
+                        ? "High Priority"
+                        : feature.priority === 2
+                          ? "Medium Priority"
+                          : "Low Priority"}
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             )}
+            {/* Manual verification badge */}
+            {feature.skipTests &&
+              !feature.error &&
+              feature.status === "backlog" && (
+                <TooltipProvider delayDuration={200}>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div
+                        className={cn(
+                          "inline-flex items-center gap-1 rounded-full border-2 px-1.5 py-0.5 text-[10px] font-bold",
+                          "bg-[var(--status-warning-bg)] border-[var(--status-warning)]/50 text-[var(--status-warning)]"
+                        )}
+                        data-testid={`skip-tests-badge-${feature.id}`}
+                      >
+                        <Hand className="w-3 h-3" />
+                      </div>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom" className="text-xs">
+                      <p>Manual verification required</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
+          </div>
+        )}
+        {isCurrentAutoTask && (
+          <div className="absolute top-2 right-2 flex items-center gap-1">
+            <div className="flex items-center justify-center gap-2 bg-[var(--status-in-progress)]/15 border border-[var(--status-in-progress)]/50 rounded-md px-2 py-0.5">
+              <Loader2 className="w-3.5 h-3.5 text-[var(--status-in-progress)] animate-spin" />
+              {feature.startedAt && (
+                <CountUpTimer
+                  startedAt={feature.startedAt}
+                  className="text-[var(--status-in-progress)] text-[10px]"
+                />
+              )}
+            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 w-6 p-0 hover:bg-muted/80 rounded-md"
+                  onClick={(e) => e.stopPropagation()}
+                  onPointerDown={(e) => e.stopPropagation()}
+                  data-testid={`menu-running-${feature.id}`}
+                >
+                  <MoreVertical className="w-3.5 h-3.5 text-muted-foreground" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-36">
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit();
+                  }}
+                  data-testid={`edit-running-${feature.id}`}
+                  className="text-xs"
+                >
+                  <Edit className="w-3 h-3 mr-2" />
+                  Edit
+                </DropdownMenuItem>
+                {/* Model info in dropdown */}
+                <div className="px-2 py-1.5 text-[10px] text-muted-foreground border-t mt-1 pt-1.5">
+                  <div className="flex items-center gap-1">
+                    <Cpu className="w-3 h-3" />
+                    <span>
+                      {formatModelName(feature.model ?? DEFAULT_MODEL)}
+                    </span>
+                  </div>
+                </div>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         )}
         {!isCurrentAutoTask && feature.status === "backlog" && (
-          <div className="absolute bottom-1 right-2">
+          <div className="absolute top-2 right-2">
             <Button
               variant="ghost"
               size="sm"
@@ -528,7 +583,9 @@ export const KanbanCard = memo(function KanbanCard({
                   }}
                   onPointerDown={(e) => e.stopPropagation()}
                   data-testid={`edit-${
-                    feature.status === "waiting_approval" ? "waiting" : "verified"
+                    feature.status === "waiting_approval"
+                      ? "waiting"
+                      : "verified"
                   }-${feature.id}`}
                   title="Edit"
                 >
@@ -554,8 +611,6 @@ export const KanbanCard = memo(function KanbanCard({
                     <FileText className="w-4 h-4" />
                   </Button>
                 )}
-              </div>
-              <div className="absolute bottom-1 right-2">
                 <Button
                   variant="ghost"
                   size="sm"
@@ -566,7 +621,9 @@ export const KanbanCard = memo(function KanbanCard({
                   }}
                   onPointerDown={(e) => e.stopPropagation()}
                   data-testid={`delete-${
-                    feature.status === "waiting_approval" ? "waiting" : "verified"
+                    feature.status === "waiting_approval"
+                      ? "waiting"
+                      : "verified"
                   }-${feature.id}`}
                   title="Delete"
                 >
@@ -577,7 +634,21 @@ export const KanbanCard = memo(function KanbanCard({
           )}
         {!isCurrentAutoTask && feature.status === "in_progress" && (
           <>
-            <div className="absolute top-2 right-2">
+            <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-destructive"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleDeleteClick(e);
+                }}
+                onPointerDown={(e) => e.stopPropagation()}
+                data-testid={`delete-feature-${feature.id}`}
+                title="Delete"
+              >
+                <Trash2 className="w-4 h-4" />
+              </Button>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
@@ -616,25 +687,18 @@ export const KanbanCard = memo(function KanbanCard({
                       View Logs
                     </DropdownMenuItem>
                   )}
+                  {/* Model info in dropdown */}
+                  <div className="px-2 py-1.5 text-[10px] text-muted-foreground border-t mt-1 pt-1.5">
+                    <div className="flex items-center gap-1">
+                      <Cpu className="w-3 h-3" />
+                      <span>
+                        {formatModelName(feature.model ?? DEFAULT_MODEL)}
+                      </span>
+                    </div>
+                  </div>
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
-            <div className="absolute bottom-1 right-2">
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-destructive"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleDeleteClick(e);
-                }}
-                onPointerDown={(e) => e.stopPropagation()}
-                data-testid={`delete-feature-${feature.id}`}
-                title="Delete"
-              >
-                <Trash2 className="w-4 h-4" />
-              </Button>
-            </div>
           </>
         )}
         <div className="flex items-start gap-2">
@@ -650,7 +714,9 @@ export const KanbanCard = memo(function KanbanCard({
             {feature.titleGenerating ? (
               <div className="flex items-center gap-1.5 mb-1">
                 <Loader2 className="w-3 h-3 animate-spin text-muted-foreground" />
-                <span className="text-xs text-muted-foreground italic">Generating title...</span>
+                <span className="text-xs text-muted-foreground italic">
+                  Generating title...
+                </span>
               </div>
             ) : feature.title ? (
               <CardTitle className="text-sm font-semibold text-foreground mb-1 line-clamp-2">
@@ -688,16 +754,11 @@ export const KanbanCard = memo(function KanbanCard({
                 )}
               </button>
             )}
-            {!feature.priority && (
-              <CardDescription className="text-[11px] mt-1.5 truncate text-muted-foreground/70">
-                {feature.category}
-              </CardDescription>
-            )}
           </div>
         </div>
       </CardHeader>
 
-      <CardContent className="p-3 pt-0">
+      <CardContent className="px-3 pt-0 pb-0">
         {/* Target Branch Display */}
         {useWorktrees && feature.branchName && (
           <div className="mb-2 flex items-center gap-1.5 text-[11px] text-muted-foreground">
@@ -710,8 +771,9 @@ export const KanbanCard = memo(function KanbanCard({
 
         {/* PR URL Display */}
         {typeof feature.prUrl === "string" &&
-          /^https?:\/\//i.test(feature.prUrl) && (() => {
-            const prNumber = feature.prUrl.split('/').pop();
+          /^https?:\/\//i.test(feature.prUrl) &&
+          (() => {
+            const prNumber = feature.prUrl.split("/").pop();
             return (
               <div className="mb-2">
                 <a
@@ -726,7 +788,7 @@ export const KanbanCard = memo(function KanbanCard({
                 >
                   <GitPullRequest className="w-3 h-3 shrink-0" />
                   <span className="truncate max-w-[150px]">
-                    {prNumber ? `Pull Request #${prNumber}` : 'Pull Request'}
+                    {prNumber ? `Pull Request #${prNumber}` : "Pull Request"}
                   </span>
                   <ExternalLink className="w-2.5 h-2.5 shrink-0" />
                 </a>
@@ -917,11 +979,11 @@ export const KanbanCard = memo(function KanbanCard({
         )}
 
         {/* Actions */}
-        <div className="flex flex-wrap gap-1.5">
+        <div className="flex flex-wrap gap-1.5 -mx-3 -mb-3 px-3 pb-3">
           {isCurrentAutoTask && (
             <>
               {/* Approve Plan button - PRIORITY: shows even when agent is "running" (paused for approval) */}
-              {feature.planSpec?.status === 'generated' && onApprovePlan && (
+              {feature.planSpec?.status === "generated" && onApprovePlan && (
                 <Button
                   variant="default"
                   size="sm"
@@ -981,7 +1043,7 @@ export const KanbanCard = memo(function KanbanCard({
           {!isCurrentAutoTask && feature.status === "in_progress" && (
             <>
               {/* Approve Plan button - shows when plan is generated and waiting for approval */}
-              {feature.planSpec?.status === 'generated' && onApprovePlan && (
+              {feature.planSpec?.status === "generated" && onApprovePlan && (
                 <Button
                   variant="default"
                   size="sm"

apps/ui/src/hooks/use-board-background-settings.ts

@@ -0,0 +1,182 @@
+import { useCallback } from "react";
+import { useAppStore } from "@/store/app-store";
+import { getHttpApiClient } from "@/lib/http-api-client";
+import { toast } from "sonner";
+
+/**
+ * Hook for managing board background settings with automatic persistence to server
+ */
+export function useBoardBackgroundSettings() {
+  const store = useAppStore();
+  const httpClient = getHttpApiClient();
+
+  // Helper to persist settings to server
+  const persistSettings = useCallback(
+    async (projectPath: string, settingsToUpdate: Record<string, unknown>) => {
+      try {
+        const result = await httpClient.settings.updateProject(
+          projectPath,
+          {
+            boardBackground: settingsToUpdate,
+          }
+        );
+
+        if (!result.success) {
+          console.error("Failed to persist settings:", result.error);
+          toast.error("Failed to save settings");
+        }
+      } catch (error) {
+        console.error("Failed to persist settings:", error);
+        toast.error("Failed to save settings");
+      }
+    },
+    [httpClient]
+  );
+
+  // Get current background settings for a project
+  const getCurrentSettings = useCallback(
+    (projectPath: string) => {
+      const current = store.boardBackgroundByProject[projectPath];
+      return current || {
+        imagePath: null,
+        cardOpacity: 100,
+        columnOpacity: 100,
+        columnBorderEnabled: true,
+        cardGlassmorphism: true,
+        cardBorderEnabled: true,
+        cardBorderOpacity: 100,
+        hideScrollbar: false,
+      };
+    },
+    [store.boardBackgroundByProject]
+  );
+
+  // Persisting wrappers for store actions
+  const setBoardBackground = useCallback(
+    async (projectPath: string, imagePath: string | null) => {
+      // Get current settings first
+      const current = getCurrentSettings(projectPath);
+
+      // Prepare the updated settings
+      const toUpdate = {
+        ...current,
+        imagePath,
+        imageVersion: imagePath ? Date.now() : undefined,
+      };
+
+      // Update local store
+      store.setBoardBackground(projectPath, imagePath);
+
+      // Persist to server
+      await persistSettings(projectPath, toUpdate);
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const setCardOpacity = useCallback(
+    async (projectPath: string, opacity: number) => {
+      const current = getCurrentSettings(projectPath);
+      store.setCardOpacity(projectPath, opacity);
+      await persistSettings(projectPath, { ...current, cardOpacity: opacity });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const setColumnOpacity = useCallback(
+    async (projectPath: string, opacity: number) => {
+      const current = getCurrentSettings(projectPath);
+      store.setColumnOpacity(projectPath, opacity);
+      await persistSettings(projectPath, { ...current, columnOpacity: opacity });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const setColumnBorderEnabled = useCallback(
+    async (projectPath: string, enabled: boolean) => {
+      const current = getCurrentSettings(projectPath);
+      store.setColumnBorderEnabled(projectPath, enabled);
+      await persistSettings(projectPath, {
+        ...current,
+        columnBorderEnabled: enabled,
+      });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const setCardGlassmorphism = useCallback(
+    async (projectPath: string, enabled: boolean) => {
+      const current = getCurrentSettings(projectPath);
+      store.setCardGlassmorphism(projectPath, enabled);
+      await persistSettings(projectPath, {
+        ...current,
+        cardGlassmorphism: enabled,
+      });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const setCardBorderEnabled = useCallback(
+    async (projectPath: string, enabled: boolean) => {
+      const current = getCurrentSettings(projectPath);
+      store.setCardBorderEnabled(projectPath, enabled);
+      await persistSettings(projectPath, {
+        ...current,
+        cardBorderEnabled: enabled,
+      });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const setCardBorderOpacity = useCallback(
+    async (projectPath: string, opacity: number) => {
+      const current = getCurrentSettings(projectPath);
+      store.setCardBorderOpacity(projectPath, opacity);
+      await persistSettings(projectPath, {
+        ...current,
+        cardBorderOpacity: opacity,
+      });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const setHideScrollbar = useCallback(
+    async (projectPath: string, hide: boolean) => {
+      const current = getCurrentSettings(projectPath);
+      store.setHideScrollbar(projectPath, hide);
+      await persistSettings(projectPath, { ...current, hideScrollbar: hide });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const clearBoardBackground = useCallback(
+    async (projectPath: string) => {
+      store.clearBoardBackground(projectPath);
+      // Clear the boardBackground settings
+      await persistSettings(projectPath, {
+        imagePath: null,
+        imageVersion: undefined,
+        cardOpacity: 100,
+        columnOpacity: 100,
+        columnBorderEnabled: true,
+        cardGlassmorphism: true,
+        cardBorderEnabled: true,
+        cardBorderOpacity: 100,
+        hideScrollbar: false,
+      });
+    },
+    [store, persistSettings]
+  );
+
+  return {
+    setBoardBackground,
+    setCardOpacity,
+    setColumnOpacity,
+    setColumnBorderEnabled,
+    setCardGlassmorphism,
+    setCardBorderEnabled,
+    setCardBorderOpacity,
+    setHideScrollbar,
+    clearBoardBackground,
+    getCurrentSettings,
+  };
+}