refactor: move from next js to vite and tanstack router

apps/ui/src/components/views/board-view/board-controls.tsx

@@ -0,0 +1,136 @@
+
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { ImageIcon, Archive, Minimize2, Square, Maximize2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface BoardControlsProps {
+  isMounted: boolean;
+  onShowBoardBackground: () => void;
+  onShowCompletedModal: () => void;
+  completedCount: number;
+  kanbanCardDetailLevel: "minimal" | "standard" | "detailed";
+  onDetailLevelChange: (level: "minimal" | "standard" | "detailed") => void;
+}
+
+export function BoardControls({
+  isMounted,
+  onShowBoardBackground,
+  onShowCompletedModal,
+  completedCount,
+  kanbanCardDetailLevel,
+  onDetailLevelChange,
+}: BoardControlsProps) {
+  if (!isMounted) return null;
+
+  return (
+    <TooltipProvider>
+      <div className="flex items-center gap-2 ml-4">
+        {/* Board Background Button */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onShowBoardBackground}
+              className="h-8 px-2"
+              data-testid="board-background-button"
+            >
+              <ImageIcon className="w-4 h-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Board Background Settings</p>
+          </TooltipContent>
+        </Tooltip>
+
+        {/* Completed/Archived Features Button */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onShowCompletedModal}
+              className="h-8 px-2 relative"
+              data-testid="completed-features-button"
+            >
+              <Archive className="w-4 h-4" />
+              {completedCount > 0 && (
+                <span className="absolute -top-1 -right-1 bg-brand-500 text-white text-[10px] font-bold rounded-full w-4 h-4 flex items-center justify-center">
+                  {completedCount > 99 ? "99+" : completedCount}
+                </span>
+              )}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Completed Features ({completedCount})</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={() => onDetailLevelChange("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={() => onDetailLevelChange("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={() => onDetailLevelChange("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>
+  );
+}

apps/ui/src/components/views/board-view/board-header.tsx

@@ -0,0 +1,103 @@
+
+import { Button } from "@/components/ui/button";
+import { HotkeyButton } from "@/components/ui/hotkey-button";
+import { Slider } from "@/components/ui/slider";
+import { Play, StopCircle, Plus, Users } from "lucide-react";
+import { KeyboardShortcut } from "@/hooks/use-keyboard-shortcuts";
+
+interface BoardHeaderProps {
+  projectName: string;
+  maxConcurrency: number;
+  onConcurrencyChange: (value: number) => void;
+  isAutoModeRunning: boolean;
+  onStartAutoMode: () => void;
+  onStopAutoMode: () => void;
+  onAddFeature: () => void;
+  addFeatureShortcut: KeyboardShortcut;
+  isMounted: boolean;
+}
+
+export function BoardHeader({
+  projectName,
+  maxConcurrency,
+  onConcurrencyChange,
+  isAutoModeRunning,
+  onStartAutoMode,
+  onStopAutoMode,
+  onAddFeature,
+  addFeatureShortcut,
+  isMounted,
+}: BoardHeaderProps) {
+  return (
+    <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
+      <div>
+        <h1 className="text-xl font-bold">Kanban Board</h1>
+        <p className="text-sm text-muted-foreground">{projectName}</p>
+      </div>
+      <div className="flex gap-2 items-center">
+        {/* Concurrency Slider - only show after mount to prevent hydration issues */}
+        {isMounted && (
+          <div
+            className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-secondary border border-border"
+            data-testid="concurrency-slider-container"
+          >
+            <Users className="w-4 h-4 text-muted-foreground" />
+            <Slider
+              value={[maxConcurrency]}
+              onValueChange={(value) => onConcurrencyChange(value[0])}
+              min={1}
+              max={10}
+              step={1}
+              className="w-20"
+              data-testid="concurrency-slider"
+            />
+            <span
+              className="text-sm text-muted-foreground min-w-[2ch] text-center"
+              data-testid="concurrency-value"
+            >
+              {maxConcurrency}
+            </span>
+          </div>
+        )}
+
+        {/* Auto Mode Toggle - only show after mount to prevent hydration issues */}
+        {isMounted && (
+          <>
+            {isAutoModeRunning ? (
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={onStopAutoMode}
+                data-testid="stop-auto-mode"
+              >
+                <StopCircle className="w-4 h-4 mr-2" />
+                Stop Auto Mode
+              </Button>
+            ) : (
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={onStartAutoMode}
+                data-testid="start-auto-mode"
+              >
+                <Play className="w-4 h-4 mr-2" />
+                Auto Mode
+              </Button>
+            )}
+          </>
+        )}
+
+        <HotkeyButton
+          size="sm"
+          onClick={onAddFeature}
+          hotkey={addFeatureShortcut}
+          hotkeyActive={false}
+          data-testid="add-feature-button"
+        >
+          <Plus className="w-4 h-4 mr-2" />
+          Add Feature
+        </HotkeyButton>
+      </div>
+    </div>
+  );
+}

apps/ui/src/components/views/board-view/board-search-bar.tsx

@@ -0,0 +1,88 @@
+
+import { useRef, useEffect } from "react";
+import { Input } from "@/components/ui/input";
+import { Search, X, Loader2 } from "lucide-react";
+
+interface BoardSearchBarProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  isCreatingSpec: boolean;
+  creatingSpecProjectPath?: string;
+  currentProjectPath?: string;
+}
+
+export function BoardSearchBar({
+  searchQuery,
+  onSearchChange,
+  isCreatingSpec,
+  creatingSpecProjectPath,
+  currentProjectPath,
+}: BoardSearchBarProps) {
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  // Focus search input when "/" is pressed
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Only focus if not typing in an input/textarea
+      if (
+        e.key === "/" &&
+        !(e.target instanceof HTMLInputElement) &&
+        !(e.target instanceof HTMLTextAreaElement)
+      ) {
+        e.preventDefault();
+        searchInputRef.current?.focus();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  return (
+    <div className="relative max-w-md flex-1 flex items-center gap-2">
+      <div className="relative flex-1">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+        <Input
+          ref={searchInputRef}
+          type="text"
+          placeholder="Search features by keyword..."
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="pl-9 pr-12 border-border"
+          data-testid="kanban-search-input"
+        />
+        {searchQuery ? (
+          <button
+            onClick={() => onSearchChange("")}
+            className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-sm hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+            data-testid="kanban-search-clear"
+            aria-label="Clear search"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        ) : (
+          <span
+            className="absolute right-2 top-1/2 -translate-y-1/2 px-1.5 py-0.5 text-[10px] font-mono rounded bg-brand-500/10 border border-brand-500/30 text-brand-400/70"
+            data-testid="kanban-search-hotkey"
+          >
+            /
+          </span>
+        )}
+      </div>
+      {/* Spec Creation Loading Badge */}
+      {isCreatingSpec &&
+        currentProjectPath === creatingSpecProjectPath && (
+          <div
+            className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-brand-500/10 border border-brand-500/20 shrink-0"
+            title="Creating App Specification"
+            data-testid="spec-creation-badge"
+          >
+            <Loader2 className="w-3 h-3 animate-spin text-brand-500 shrink-0" />
+            <span className="text-xs font-medium text-brand-500 whitespace-nowrap">
+              Creating spec
+            </span>
+          </div>
+        )}
+    </div>
+  );
+}

apps/ui/src/components/views/board-view/components/index.ts

@@ -0,0 +1,3 @@
+export { KanbanCard } from "./kanban-card";
+export { KanbanColumn } from "./kanban-column";
+export { WorktreeSelector } from "./worktree-selector";

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

@@ -0,0 +1,85 @@
+
+import { memo } from "react";
+import { useDroppable } from "@dnd-kit/core";
+import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
+
+interface KanbanColumnProps {
+  id: string;
+  title: string;
+  colorClass: string;
+  count: number;
+  children: ReactNode;
+  headerAction?: ReactNode;
+  opacity?: number;
+  showBorder?: boolean;
+  hideScrollbar?: boolean;
+}
+
+export const KanbanColumn = memo(function KanbanColumn({
+  id,
+  title,
+  colorClass,
+  count,
+  children,
+  headerAction,
+  opacity = 100,
+  showBorder = true,
+  hideScrollbar = false,
+}: KanbanColumnProps) {
+  const { setNodeRef, isOver } = useDroppable({ id });
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(
+        "relative flex flex-col h-full rounded-xl transition-all duration-200 w-72",
+        showBorder && "border border-border/60",
+        isOver && "ring-2 ring-primary/30 ring-offset-1 ring-offset-background"
+      )}
+      data-testid={`kanban-column-${id}`}
+    >
+      {/* Background layer with opacity */}
+      <div
+        className={cn(
+          "absolute inset-0 rounded-xl backdrop-blur-sm transition-colors duration-200",
+          isOver ? "bg-accent/80" : "bg-card/80"
+        )}
+        style={{ opacity: opacity / 100 }}
+      />
+
+      {/* Column Header */}
+      <div
+        className={cn(
+          "relative z-10 flex items-center gap-3 px-3 py-2.5",
+          showBorder && "border-b border-border/40"
+        )}
+      >
+        <div className={cn("w-2.5 h-2.5 rounded-full shrink-0", colorClass)} />
+        <h3 className="font-semibold text-sm text-foreground/90 flex-1 tracking-tight">{title}</h3>
+        {headerAction}
+        <span className="text-xs font-medium text-muted-foreground/80 bg-muted/50 px-2 py-0.5 rounded-md tabular-nums">
+          {count}
+        </span>
+      </div>
+
+      {/* Column Content */}
+      <div
+        className={cn(
+          "relative z-10 flex-1 overflow-y-auto p-2 space-y-2.5",
+          hideScrollbar &&
+            "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
+          // Smooth scrolling
+          "scroll-smooth"
+        )}
+      >
+        {children}
+      </div>
+
+      {/* Drop zone indicator when dragging over */}
+      {isOver && (
+        <div className="absolute inset-0 rounded-xl bg-primary/5 pointer-events-none z-5 border-2 border-dashed border-primary/20" />
+      )}
+    </div>
+  );
+});

apps/ui/src/components/views/board-view/components/worktree-selector.tsx

@@ -0,0 +1,832 @@
+
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuLabel,
+} from "@/components/ui/dropdown-menu";
+import {
+  GitBranch,
+  Plus,
+  Trash2,
+  MoreHorizontal,
+  RefreshCw,
+  GitCommit,
+  GitPullRequest,
+  ExternalLink,
+  ChevronDown,
+  Download,
+  Upload,
+  GitBranchPlus,
+  Check,
+  Search,
+  Play,
+  Square,
+  Globe,
+  Loader2,
+} from "lucide-react";
+import { useAppStore } from "@/store/app-store";
+import { getElectronAPI } from "@/lib/electron";
+import { cn, pathsEqual, normalizePath } from "@/lib/utils";
+import { toast } from "sonner";
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  isCurrent: boolean; // Is this the currently checked out branch?
+  hasWorktree: boolean; // Does this branch have an active worktree?
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+interface BranchInfo {
+  name: string;
+  isCurrent: boolean;
+  isRemote: boolean;
+}
+
+interface DevServerInfo {
+  worktreePath: string;
+  port: number;
+  url: string;
+}
+
+interface FeatureInfo {
+  id: string;
+  worktreePath?: string;
+  branchName?: string; // Used as fallback to determine which worktree the spinner should show on
+}
+
+interface WorktreeSelectorProps {
+  projectPath: string;
+  onCreateWorktree: () => void;
+  onDeleteWorktree: (worktree: WorktreeInfo) => void;
+  onCommit: (worktree: WorktreeInfo) => void;
+  onCreatePR: (worktree: WorktreeInfo) => void;
+  onCreateBranch: (worktree: WorktreeInfo) => void;
+  runningFeatureIds?: string[];
+  features?: FeatureInfo[];
+  /** Increment this to trigger a refresh without unmounting the component */
+  refreshTrigger?: number;
+}
+
+export function WorktreeSelector({
+  projectPath,
+  onCreateWorktree,
+  onDeleteWorktree,
+  onCommit,
+  onCreatePR,
+  onCreateBranch,
+  runningFeatureIds = [],
+  features = [],
+  refreshTrigger = 0,
+}: WorktreeSelectorProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isPulling, setIsPulling] = useState(false);
+  const [isPushing, setIsPushing] = useState(false);
+  const [isSwitching, setIsSwitching] = useState(false);
+  const [isActivating, setIsActivating] = useState(false);
+  const [isStartingDevServer, setIsStartingDevServer] = useState(false);
+  const [worktrees, setWorktrees] = useState<WorktreeInfo[]>([]);
+  const [branches, setBranches] = useState<BranchInfo[]>([]);
+  const [aheadCount, setAheadCount] = useState(0);
+  const [behindCount, setBehindCount] = useState(0);
+  const [isLoadingBranches, setIsLoadingBranches] = useState(false);
+  const [branchFilter, setBranchFilter] = useState("");
+  const [runningDevServers, setRunningDevServers] = useState<
+    Map<string, DevServerInfo>
+  >(new Map());
+  const [defaultEditorName, setDefaultEditorName] = useState<string>("Editor");
+  const currentWorktree = useAppStore((s) => s.getCurrentWorktree(projectPath));
+  const setCurrentWorktree = useAppStore((s) => s.setCurrentWorktree);
+  const setWorktreesInStore = useAppStore((s) => s.setWorktrees);
+  const useWorktreesEnabled = useAppStore((s) => s.useWorktrees);
+
+  const fetchWorktrees = useCallback(async () => {
+    if (!projectPath) return;
+    setIsLoading(true);
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.listAll) {
+        console.warn("Worktree API not available");
+        return;
+      }
+      const result = await api.worktree.listAll(projectPath, true);
+      if (result.success && result.worktrees) {
+        setWorktrees(result.worktrees);
+        setWorktreesInStore(projectPath, result.worktrees);
+      }
+    } catch (error) {
+      console.error("Failed to fetch worktrees:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [projectPath, setWorktreesInStore]);
+
+  const fetchDevServers = useCallback(async () => {
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.listDevServers) {
+        return;
+      }
+      const result = await api.worktree.listDevServers();
+      if (result.success && result.result?.servers) {
+        const serversMap = new Map<string, DevServerInfo>();
+        for (const server of result.result.servers) {
+          serversMap.set(server.worktreePath, server);
+        }
+        setRunningDevServers(serversMap);
+      }
+    } catch (error) {
+      console.error("Failed to fetch dev servers:", error);
+    }
+  }, []);
+
+  const fetchDefaultEditor = useCallback(async () => {
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.getDefaultEditor) {
+        return;
+      }
+      const result = await api.worktree.getDefaultEditor();
+      if (result.success && result.result?.editorName) {
+        setDefaultEditorName(result.result.editorName);
+      }
+    } catch (error) {
+      console.error("Failed to fetch default editor:", error);
+    }
+  }, []);
+
+  const fetchBranches = useCallback(async (worktreePath: string) => {
+    setIsLoadingBranches(true);
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.listBranches) {
+        console.warn("List branches API not available");
+        return;
+      }
+      const result = await api.worktree.listBranches(worktreePath);
+      if (result.success && result.result) {
+        setBranches(result.result.branches);
+        setAheadCount(result.result.aheadCount || 0);
+        setBehindCount(result.result.behindCount || 0);
+      }
+    } catch (error) {
+      console.error("Failed to fetch branches:", error);
+    } finally {
+      setIsLoadingBranches(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchWorktrees();
+    fetchDevServers();
+    fetchDefaultEditor();
+  }, [fetchWorktrees, fetchDevServers, fetchDefaultEditor]);
+
+  // Refresh when refreshTrigger changes (but skip the initial render)
+  useEffect(() => {
+    if (refreshTrigger > 0) {
+      fetchWorktrees();
+    }
+  }, [refreshTrigger, fetchWorktrees]);
+
+  // Initialize selection to main if not set OR if the stored worktree no longer exists
+  // This handles stale data (e.g., a worktree that was deleted)
+  useEffect(() => {
+    if (worktrees.length > 0) {
+      const currentPath = currentWorktree?.path;
+
+      // Check if the currently selected worktree still exists
+      // null path means main (which always exists if worktrees has items)
+      // Non-null path means we need to verify it exists in the worktrees list
+      const currentWorktreeExists = currentPath === null
+        ? true
+        : worktrees.some((w) => !w.isMain && pathsEqual(w.path, currentPath));
+
+      // Reset to main if:
+      // 1. No worktree is set (currentWorktree is null/undefined)
+      // 2. Current worktree has a path that doesn't exist in the list (stale data)
+      if (currentWorktree == null || (currentPath !== null && !currentWorktreeExists)) {
+        const mainWorktree = worktrees.find((w) => w.isMain);
+        const mainBranch = mainWorktree?.branch || "main";
+        setCurrentWorktree(projectPath, null, mainBranch); // null = main worktree
+      }
+    }
+  }, [worktrees, currentWorktree, projectPath, setCurrentWorktree]);
+
+  const handleSelectWorktree = async (worktree: WorktreeInfo) => {
+    // Simply select the worktree in the UI with both path and branch
+    setCurrentWorktree(
+      projectPath,
+      worktree.isMain ? null : worktree.path,
+      worktree.branch
+    );
+  };
+
+  const handleStartDevServer = async (worktree: WorktreeInfo) => {
+    if (isStartingDevServer) return;
+    setIsStartingDevServer(true);
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.startDevServer) {
+        toast.error("Start dev server API not available");
+        return;
+      }
+
+      // Use projectPath for main, worktree.path for others
+      const targetPath = worktree.isMain ? projectPath : worktree.path;
+      const result = await api.worktree.startDevServer(projectPath, targetPath);
+
+      if (result.success && result.result) {
+        // Update running servers map (normalize path for cross-platform compatibility)
+        setRunningDevServers((prev) => {
+          const next = new Map(prev);
+          next.set(normalizePath(targetPath), {
+            worktreePath: result.result!.worktreePath,
+            port: result.result!.port,
+            url: result.result!.url,
+          });
+          return next;
+        });
+        toast.success(`Dev server started on port ${result.result.port}`);
+      } else {
+        toast.error(result.error || "Failed to start dev server");
+      }
+    } catch (error) {
+      console.error("Start dev server failed:", error);
+      toast.error("Failed to start dev server");
+    } finally {
+      setIsStartingDevServer(false);
+    }
+  };
+
+  const handleStopDevServer = async (worktree: WorktreeInfo) => {
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.stopDevServer) {
+        toast.error("Stop dev server API not available");
+        return;
+      }
+
+      // Use projectPath for main, worktree.path for others
+      const targetPath = worktree.isMain ? projectPath : worktree.path;
+      const result = await api.worktree.stopDevServer(targetPath);
+
+      if (result.success) {
+        // Update running servers map (normalize path for cross-platform compatibility)
+        setRunningDevServers((prev) => {
+          const next = new Map(prev);
+          next.delete(normalizePath(targetPath));
+          return next;
+        });
+        toast.success(result.result?.message || "Dev server stopped");
+      } else {
+        toast.error(result.error || "Failed to stop dev server");
+      }
+    } catch (error) {
+      console.error("Stop dev server failed:", error);
+      toast.error("Failed to stop dev server");
+    }
+  };
+
+  const handleOpenDevServerUrl = (worktree: WorktreeInfo) => {
+    const targetPath = worktree.isMain ? projectPath : worktree.path;
+    const serverInfo = runningDevServers.get(targetPath);
+    if (serverInfo) {
+      window.open(serverInfo.url, "_blank");
+    }
+  };
+
+  // Helper to get the path key for a worktree (for looking up in runningDevServers)
+  // Normalizes path for cross-platform compatibility
+  const getWorktreeKey = (worktree: WorktreeInfo) => {
+    const path = worktree.isMain ? projectPath : worktree.path;
+    return path ? normalizePath(path) : path;
+  };
+
+  // Helper to check if a worktree has running features
+  const hasRunningFeatures = (worktree: WorktreeInfo) => {
+    if (runningFeatureIds.length === 0) return false;
+
+    const worktreeKey = getWorktreeKey(worktree);
+
+    // Check if any running feature belongs to this worktree
+    return runningFeatureIds.some((featureId) => {
+      const feature = features.find((f) => f.id === featureId);
+      if (!feature) return false;
+
+      // First, check if worktreePath is set and matches
+      // Use pathsEqual for cross-platform compatibility (Windows uses backslashes)
+      if (feature.worktreePath) {
+        if (worktree.isMain) {
+          // Feature has worktreePath - show on main only if it matches projectPath
+          return pathsEqual(feature.worktreePath, projectPath);
+        }
+        // For non-main worktrees, check if worktreePath matches
+        return pathsEqual(feature.worktreePath, worktreeKey);
+      }
+
+      // If worktreePath is not set, use branchName as fallback
+      if (feature.branchName) {
+        // Feature has a branchName - show spinner on the worktree with matching branch
+        return worktree.branch === feature.branchName;
+      }
+
+      // No worktreePath and no branchName - default to main
+      return worktree.isMain;
+    });
+  };
+
+  const handleOpenInEditor = async (worktree: WorktreeInfo) => {
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.openInEditor) {
+        console.warn("Open in editor API not available");
+        return;
+      }
+      const result = await api.worktree.openInEditor(worktree.path);
+      if (result.success && result.result) {
+        toast.success(result.result.message);
+      } else if (result.error) {
+        toast.error(result.error);
+      }
+    } catch (error) {
+      console.error("Open in editor failed:", error);
+    }
+  };
+
+  const handleSwitchBranch = async (
+    worktree: WorktreeInfo,
+    branchName: string
+  ) => {
+    if (isSwitching || branchName === worktree.branch) return;
+    setIsSwitching(true);
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.switchBranch) {
+        toast.error("Switch branch API not available");
+        return;
+      }
+      const result = await api.worktree.switchBranch(worktree.path, branchName);
+      if (result.success && result.result) {
+        toast.success(result.result.message);
+        // Refresh worktrees to get updated branch info
+        fetchWorktrees();
+      } else {
+        toast.error(result.error || "Failed to switch branch");
+      }
+    } catch (error) {
+      console.error("Switch branch failed:", error);
+      toast.error("Failed to switch branch");
+    } finally {
+      setIsSwitching(false);
+    }
+  };
+
+  const handlePull = async (worktree: WorktreeInfo) => {
+    if (isPulling) return;
+    setIsPulling(true);
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.pull) {
+        toast.error("Pull API not available");
+        return;
+      }
+      const result = await api.worktree.pull(worktree.path);
+      if (result.success && result.result) {
+        toast.success(result.result.message);
+        // Refresh worktrees to get updated status
+        fetchWorktrees();
+      } else {
+        toast.error(result.error || "Failed to pull latest changes");
+      }
+    } catch (error) {
+      console.error("Pull failed:", error);
+      toast.error("Failed to pull latest changes");
+    } finally {
+      setIsPulling(false);
+    }
+  };
+
+  const handlePush = async (worktree: WorktreeInfo) => {
+    if (isPushing) return;
+    setIsPushing(true);
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.push) {
+        toast.error("Push API not available");
+        return;
+      }
+      const result = await api.worktree.push(worktree.path);
+      if (result.success && result.result) {
+        toast.success(result.result.message);
+        // Refresh to update ahead/behind counts
+        fetchBranches(worktree.path);
+        fetchWorktrees();
+      } else {
+        toast.error(result.error || "Failed to push changes");
+      }
+    } catch (error) {
+      console.error("Push failed:", error);
+      toast.error("Failed to push changes");
+    } finally {
+      setIsPushing(false);
+    }
+  };
+
+  // The "selected" worktree is based on UI state, not git's current branch
+  // currentWorktree.path is null for main, or the worktree path for others
+  const currentWorktreePath = currentWorktree?.path ?? null;
+  const selectedWorktree = currentWorktreePath
+    ? worktrees.find((w) => pathsEqual(w.path, currentWorktreePath))
+    : worktrees.find((w) => w.isMain);
+
+  // Render a worktree tab with branch selector (for main) and actions dropdown
+  const renderWorktreeTab = (worktree: WorktreeInfo) => {
+    // Selection is based on UI state, not git's current branch
+    // Default to main selected if currentWorktree is null/undefined or path is null
+    const isSelected = worktree.isMain
+      ? currentWorktree === null ||
+        currentWorktree === undefined ||
+        currentWorktree.path === null
+      : pathsEqual(worktree.path, currentWorktreePath);
+
+    const isRunning = hasRunningFeatures(worktree);
+
+    return (
+      <div key={worktree.path} className="flex items-center">
+        {/* Main branch: clickable button + separate branch switch dropdown */}
+        {worktree.isMain ? (
+          <>
+            {/* Clickable button to select/preview main */}
+            <Button
+              variant={isSelected ? "default" : "outline"}
+              size="sm"
+              className={cn(
+                "h-7 px-3 text-xs font-mono gap-1.5 border-r-0 rounded-l-md rounded-r-none",
+                isSelected && "bg-primary text-primary-foreground",
+                !isSelected && "bg-secondary/50 hover:bg-secondary"
+              )}
+              onClick={() => handleSelectWorktree(worktree)}
+              disabled={isActivating}
+              title="Click to preview main"
+            >
+              {isRunning && <Loader2 className="w-3 h-3 animate-spin" />}
+              {isActivating && !isRunning && (
+                <RefreshCw className="w-3 h-3 animate-spin" />
+              )}
+              {worktree.branch}
+              {worktree.hasChanges && (
+                <span className="inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded bg-background/80 text-foreground border border-border">
+                  {worktree.changedFilesCount}
+                </span>
+              )}
+            </Button>
+            {/* Branch switch dropdown button */}
+            <DropdownMenu
+              onOpenChange={(open) => {
+                if (open) {
+                  fetchBranches(worktree.path);
+                  setBranchFilter("");
+                }
+              }}
+            >
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant={isSelected ? "default" : "outline"}
+                  size="sm"
+                  className={cn(
+                    "h-7 w-7 p-0 rounded-none border-r-0",
+                    isSelected && "bg-primary text-primary-foreground",
+                    !isSelected && "bg-secondary/50 hover:bg-secondary"
+                  )}
+                  title="Switch branch"
+                >
+                  <GitBranch className="w-3 h-3" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="w-64">
+                <DropdownMenuLabel className="text-xs">
+                  Switch Branch
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                {/* Search input */}
+                <div className="px-2 py-1.5">
+                  <div className="relative">
+                    <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
+                    <Input
+                      placeholder="Filter branches..."
+                      value={branchFilter}
+                      onChange={(e) => setBranchFilter(e.target.value)}
+                      onKeyDown={(e) => e.stopPropagation()}
+                      onKeyUp={(e) => e.stopPropagation()}
+                      onKeyPress={(e) => e.stopPropagation()}
+                      className="h-7 pl-7 text-xs"
+                      autoFocus
+                    />
+                  </div>
+                </div>
+                <DropdownMenuSeparator />
+                <div className="max-h-[250px] overflow-y-auto">
+                  {isLoadingBranches ? (
+                    <DropdownMenuItem disabled className="text-xs">
+                      <RefreshCw className="w-3.5 h-3.5 mr-2 animate-spin" />
+                      Loading branches...
+                    </DropdownMenuItem>
+                  ) : (
+                    (() => {
+                      const filteredBranches = branches.filter((b) =>
+                        b.name
+                          .toLowerCase()
+                          .includes(branchFilter.toLowerCase())
+                      );
+                      if (filteredBranches.length === 0) {
+                        return (
+                          <DropdownMenuItem disabled className="text-xs">
+                            {branchFilter
+                              ? "No matching branches"
+                              : "No branches found"}
+                          </DropdownMenuItem>
+                        );
+                      }
+                      return filteredBranches.map((branch) => (
+                        <DropdownMenuItem
+                          key={branch.name}
+                          onClick={() =>
+                            handleSwitchBranch(worktree, branch.name)
+                          }
+                          disabled={
+                            isSwitching || branch.name === worktree.branch
+                          }
+                          className="text-xs font-mono"
+                        >
+                          {branch.name === worktree.branch ? (
+                            <Check className="w-3.5 h-3.5 mr-2 flex-shrink-0" />
+                          ) : (
+                            <span className="w-3.5 mr-2 flex-shrink-0" />
+                          )}
+                          <span className="truncate">{branch.name}</span>
+                        </DropdownMenuItem>
+                      ));
+                    })()
+                  )}
+                </div>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={() => onCreateBranch(worktree)}
+                  className="text-xs"
+                >
+                  <GitBranchPlus className="w-3.5 h-3.5 mr-2" />
+                  Create New Branch...
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </>
+        ) : (
+          // Non-main branches - click to switch to this branch
+          <Button
+            variant={isSelected ? "default" : "outline"}
+            size="sm"
+            className={cn(
+              "h-7 px-3 text-xs font-mono gap-1.5 rounded-l-md rounded-r-none border-r-0",
+              isSelected && "bg-primary text-primary-foreground",
+              !isSelected && "bg-secondary/50 hover:bg-secondary",
+              !worktree.hasWorktree && !isSelected && "opacity-70" // Dim if no active worktree
+            )}
+            onClick={() => handleSelectWorktree(worktree)}
+            disabled={isActivating}
+            title={
+              worktree.hasWorktree
+                ? "Click to switch to this worktree's branch"
+                : "Click to switch to this branch"
+            }
+          >
+            {isRunning && <Loader2 className="w-3 h-3 animate-spin" />}
+            {isActivating && !isRunning && (
+              <RefreshCw className="w-3 h-3 animate-spin" />
+            )}
+            {worktree.branch}
+            {worktree.hasChanges && (
+              <span className="inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded bg-background/80 text-foreground border border-border">
+                {worktree.changedFilesCount}
+              </span>
+            )}
+          </Button>
+        )}
+
+        {/* Dev server indicator */}
+        {runningDevServers.has(getWorktreeKey(worktree)) && (
+          <Button
+            variant={isSelected ? "default" : "outline"}
+            size="sm"
+            className={cn(
+              "h-7 w-7 p-0 rounded-none border-r-0",
+              isSelected && "bg-primary text-primary-foreground",
+              !isSelected && "bg-secondary/50 hover:bg-secondary",
+              "text-green-500"
+            )}
+            onClick={() => handleOpenDevServerUrl(worktree)}
+            title={`Open dev server (port ${
+              runningDevServers.get(getWorktreeKey(worktree))?.port
+            })`}
+          >
+            <Globe className="w-3 h-3" />
+          </Button>
+        )}
+
+        {/* Actions dropdown */}
+        <DropdownMenu
+          onOpenChange={(open) => {
+            if (open) {
+              fetchBranches(worktree.path);
+            }
+          }}
+        >
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant={isSelected ? "default" : "outline"}
+              size="sm"
+              className={cn(
+                "h-7 w-7 p-0 rounded-l-none",
+                isSelected && "bg-primary text-primary-foreground",
+                !isSelected && "bg-secondary/50 hover:bg-secondary"
+              )}
+            >
+              <MoreHorizontal className="w-3 h-3" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-56">
+            {/* Dev server controls */}
+            {runningDevServers.has(getWorktreeKey(worktree)) ? (
+              <>
+                <DropdownMenuLabel className="text-xs flex items-center gap-2">
+                  <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+                  Dev Server Running (:
+                  {runningDevServers.get(getWorktreeKey(worktree))?.port})
+                </DropdownMenuLabel>
+                <DropdownMenuItem
+                  onClick={() => handleOpenDevServerUrl(worktree)}
+                  className="text-xs"
+                >
+                  <Globe className="w-3.5 h-3.5 mr-2" />
+                  Open in Browser
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => handleStopDevServer(worktree)}
+                  className="text-xs text-destructive focus:text-destructive"
+                >
+                  <Square className="w-3.5 h-3.5 mr-2" />
+                  Stop Dev Server
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+              </>
+            ) : (
+              <>
+                <DropdownMenuItem
+                  onClick={() => handleStartDevServer(worktree)}
+                  disabled={isStartingDevServer}
+                  className="text-xs"
+                >
+                  <Play
+                    className={cn(
+                      "w-3.5 h-3.5 mr-2",
+                      isStartingDevServer && "animate-pulse"
+                    )}
+                  />
+                  {isStartingDevServer ? "Starting..." : "Start Dev Server"}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+              </>
+            )}
+            {/* Pull option */}
+            <DropdownMenuItem
+              onClick={() => handlePull(worktree)}
+              disabled={isPulling}
+              className="text-xs"
+            >
+              <Download
+                className={cn("w-3.5 h-3.5 mr-2", isPulling && "animate-pulse")}
+              />
+              {isPulling ? "Pulling..." : "Pull"}
+              {behindCount > 0 && (
+                <span className="ml-auto text-[10px] bg-muted px-1.5 py-0.5 rounded">
+                  {behindCount} behind
+                </span>
+              )}
+            </DropdownMenuItem>
+            {/* Push option */}
+            <DropdownMenuItem
+              onClick={() => handlePush(worktree)}
+              disabled={isPushing || aheadCount === 0}
+              className="text-xs"
+            >
+              <Upload
+                className={cn("w-3.5 h-3.5 mr-2", isPushing && "animate-pulse")}
+              />
+              {isPushing ? "Pushing..." : "Push"}
+              {aheadCount > 0 && (
+                <span className="ml-auto text-[10px] bg-primary/20 text-primary px-1.5 py-0.5 rounded">
+                  {aheadCount} ahead
+                </span>
+              )}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            {/* Open in editor */}
+            <DropdownMenuItem
+              onClick={() => handleOpenInEditor(worktree)}
+              className="text-xs"
+            >
+              <ExternalLink className="w-3.5 h-3.5 mr-2" />
+              Open in {defaultEditorName}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            {/* Commit changes */}
+            {worktree.hasChanges && (
+              <DropdownMenuItem
+                onClick={() => onCommit(worktree)}
+                className="text-xs"
+              >
+                <GitCommit className="w-3.5 h-3.5 mr-2" />
+                Commit Changes
+              </DropdownMenuItem>
+            )}
+            {/* Show PR option if not on main branch, or if on main with changes */}
+            {(worktree.branch !== "main" || worktree.hasChanges) && (
+              <DropdownMenuItem
+                onClick={() => onCreatePR(worktree)}
+                className="text-xs"
+              >
+                <GitPullRequest className="w-3.5 h-3.5 mr-2" />
+                Create Pull Request
+              </DropdownMenuItem>
+            )}
+            {/* Only show delete for non-main worktrees */}
+            {!worktree.isMain && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={() => onDeleteWorktree(worktree)}
+                  className="text-xs text-destructive focus:text-destructive"
+                >
+                  <Trash2 className="w-3.5 h-3.5 mr-2" />
+                  Delete Worktree
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    );
+  };
+
+  // Don't render the worktree selector if the feature is disabled
+  if (!useWorktreesEnabled) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center gap-2 px-4 py-2 border-b border-border bg-glass/50 backdrop-blur-sm">
+      <GitBranch className="w-4 h-4 text-muted-foreground" />
+      <span className="text-sm text-muted-foreground mr-2">Branch:</span>
+
+      {/* Worktree Tabs */}
+      <div className="flex items-center gap-1 flex-wrap">
+        {worktrees.map((worktree) => renderWorktreeTab(worktree))}
+
+        {/* Add Worktree Button */}
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
+          onClick={onCreateWorktree}
+          title="Create new worktree"
+        >
+          <Plus className="w-4 h-4" />
+        </Button>
+
+        {/* Refresh Button */}
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
+          onClick={fetchWorktrees}
+          disabled={isLoading}
+          title="Refresh worktrees"
+        >
+          <RefreshCw
+            className={cn("w-3.5 h-3.5", isLoading && "animate-spin")}
+          />
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/ui/src/components/views/board-view/constants.ts

@@ -0,0 +1,22 @@
+import { Feature } from "@/store/app-store";
+
+export type ColumnId = Feature["status"];
+
+export const COLUMNS: { id: ColumnId; title: string; colorClass: string }[] = [
+  { id: "backlog", title: "Backlog", colorClass: "bg-[var(--status-backlog)]" },
+  {
+    id: "in_progress",
+    title: "In Progress",
+    colorClass: "bg-[var(--status-in-progress)]",
+  },
+  {
+    id: "waiting_approval",
+    title: "Waiting Approval",
+    colorClass: "bg-[var(--status-waiting)]",
+  },
+  {
+    id: "verified",
+    title: "Verified",
+    colorClass: "bg-[var(--status-success)]",
+  },
+];

apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx

@@ -0,0 +1,488 @@
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { HotkeyButton } from "@/components/ui/hotkey-button";
+import { Label } from "@/components/ui/label";
+import { CategoryAutocomplete } from "@/components/ui/category-autocomplete";
+import { BranchAutocomplete } from "@/components/ui/branch-autocomplete";
+import {
+  DescriptionImageDropZone,
+  FeatureImagePath as DescriptionImagePath,
+  ImagePreviewMap,
+} from "@/components/ui/description-image-dropzone";
+import {
+  MessageSquare,
+  Settings2,
+  FlaskConical,
+  Sparkles,
+  ChevronDown,
+} from "lucide-react";
+import { toast } from "sonner";
+import { getElectronAPI } from "@/lib/electron";
+import { modelSupportsThinking } from "@/lib/utils";
+import {
+  useAppStore,
+  AgentModel,
+  ThinkingLevel,
+  FeatureImage,
+  AIProfile,
+} from "@/store/app-store";
+import {
+  ModelSelector,
+  ThinkingLevelSelector,
+  ProfileQuickSelect,
+  TestingTabContent,
+  PrioritySelector,
+} from "../shared";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useNavigate } from "@tanstack/react-router";
+
+interface AddFeatureDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAdd: (feature: {
+    category: string;
+    description: string;
+    steps: string[];
+    images: FeatureImage[];
+    imagePaths: DescriptionImagePath[];
+    skipTests: boolean;
+    model: AgentModel;
+    thinkingLevel: ThinkingLevel;
+    branchName: string;
+    priority: number;
+  }) => void;
+  categorySuggestions: string[];
+  branchSuggestions: string[];
+  defaultSkipTests: boolean;
+  defaultBranch?: string;
+  isMaximized: boolean;
+  showProfilesOnly: boolean;
+  aiProfiles: AIProfile[];
+}
+
+export function AddFeatureDialog({
+  open,
+  onOpenChange,
+  onAdd,
+  categorySuggestions,
+  branchSuggestions,
+  defaultSkipTests,
+  defaultBranch = "main",
+  isMaximized,
+  showProfilesOnly,
+  aiProfiles,
+}: AddFeatureDialogProps) {
+  const navigate = useNavigate();
+  const [newFeature, setNewFeature] = useState({
+    category: "",
+    description: "",
+    steps: [""],
+    images: [] as FeatureImage[],
+    imagePaths: [] as DescriptionImagePath[],
+    skipTests: false,
+    model: "opus" as AgentModel,
+    thinkingLevel: "none" as ThinkingLevel,
+    branchName: "main",
+    priority: 2 as number, // Default to medium priority
+  });
+  const [newFeaturePreviewMap, setNewFeaturePreviewMap] =
+    useState<ImagePreviewMap>(() => new Map());
+  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
+  const [descriptionError, setDescriptionError] = useState(false);
+  const [isEnhancing, setIsEnhancing] = useState(false);
+  const [enhancementMode, setEnhancementMode] = useState<
+    "improve" | "technical" | "simplify" | "acceptance"
+  >("improve");
+
+  // Get enhancement model and worktrees setting from store
+  const { enhancementModel, useWorktrees } = useAppStore();
+
+  // Sync defaults when dialog opens
+  useEffect(() => {
+    if (open) {
+      setNewFeature((prev) => ({
+        ...prev,
+        skipTests: defaultSkipTests,
+        branchName: defaultBranch,
+      }));
+    }
+  }, [open, defaultSkipTests, defaultBranch]);
+
+  const handleAdd = () => {
+    if (!newFeature.description.trim()) {
+      setDescriptionError(true);
+      return;
+    }
+
+    const category = newFeature.category || "Uncategorized";
+    const selectedModel = newFeature.model;
+    const normalizedThinking = modelSupportsThinking(selectedModel)
+      ? newFeature.thinkingLevel
+      : "none";
+
+    onAdd({
+      category,
+      description: newFeature.description,
+      steps: newFeature.steps.filter((s) => s.trim()),
+      images: newFeature.images,
+      imagePaths: newFeature.imagePaths,
+      skipTests: newFeature.skipTests,
+      model: selectedModel,
+      thinkingLevel: normalizedThinking,
+      branchName: newFeature.branchName,
+      priority: newFeature.priority,
+    });
+
+    // Reset form
+    setNewFeature({
+      category: "",
+      description: "",
+      steps: [""],
+      images: [],
+      imagePaths: [],
+      skipTests: defaultSkipTests,
+      model: "opus",
+      priority: 2,
+      thinkingLevel: "none",
+      branchName: defaultBranch,
+    });
+    setNewFeaturePreviewMap(new Map());
+    setShowAdvancedOptions(false);
+    setDescriptionError(false);
+    onOpenChange(false);
+  };
+
+  const handleDialogClose = (open: boolean) => {
+    onOpenChange(open);
+    if (!open) {
+      setNewFeaturePreviewMap(new Map());
+      setShowAdvancedOptions(false);
+      setDescriptionError(false);
+    }
+  };
+
+  const handleEnhanceDescription = async () => {
+    if (!newFeature.description.trim() || isEnhancing) return;
+
+    setIsEnhancing(true);
+    try {
+      const api = getElectronAPI();
+      const result = await api.enhancePrompt?.enhance(
+        newFeature.description,
+        enhancementMode,
+        enhancementModel
+      );
+
+      if (result?.success && result.enhancedText) {
+        const enhancedText = result.enhancedText;
+        setNewFeature((prev) => ({ ...prev, description: enhancedText }));
+        toast.success("Description enhanced!");
+      } else {
+        toast.error(result?.error || "Failed to enhance description");
+      }
+    } catch (error) {
+      console.error("Enhancement failed:", error);
+      toast.error("Failed to enhance description");
+    } finally {
+      setIsEnhancing(false);
+    }
+  };
+
+  const handleModelSelect = (model: AgentModel) => {
+    setNewFeature({
+      ...newFeature,
+      model,
+      thinkingLevel: modelSupportsThinking(model)
+        ? newFeature.thinkingLevel
+        : "none",
+    });
+  };
+
+  const handleProfileSelect = (
+    model: AgentModel,
+    thinkingLevel: ThinkingLevel
+  ) => {
+    setNewFeature({
+      ...newFeature,
+      model,
+      thinkingLevel,
+    });
+  };
+
+  const newModelAllowsThinking = modelSupportsThinking(newFeature.model);
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogClose}>
+      <DialogContent
+        compact={!isMaximized}
+        data-testid="add-feature-dialog"
+        onPointerDownOutside={(e) => {
+          const target = e.target as HTMLElement;
+          if (target.closest('[data-testid="category-autocomplete-list"]')) {
+            e.preventDefault();
+          }
+        }}
+        onInteractOutside={(e) => {
+          const target = e.target as HTMLElement;
+          if (target.closest('[data-testid="category-autocomplete-list"]')) {
+            e.preventDefault();
+          }
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>Add New Feature</DialogTitle>
+          <DialogDescription>
+            Create a new feature card for the Kanban board.
+          </DialogDescription>
+        </DialogHeader>
+        <Tabs
+          defaultValue="prompt"
+          className="py-4 flex-1 min-h-0 flex flex-col"
+        >
+          <TabsList className="w-full grid grid-cols-3 mb-4">
+            <TabsTrigger value="prompt" data-testid="tab-prompt">
+              <MessageSquare className="w-4 h-4 mr-2" />
+              Prompt
+            </TabsTrigger>
+            <TabsTrigger value="model" data-testid="tab-model">
+              <Settings2 className="w-4 h-4 mr-2" />
+              Model
+            </TabsTrigger>
+            <TabsTrigger value="testing" data-testid="tab-testing">
+              <FlaskConical className="w-4 h-4 mr-2" />
+              Testing
+            </TabsTrigger>
+          </TabsList>
+
+          {/* Prompt Tab */}
+          <TabsContent
+            value="prompt"
+            className="space-y-4 overflow-y-auto cursor-default"
+          >
+            <div className="space-y-2">
+              <Label htmlFor="description">Description</Label>
+              <DescriptionImageDropZone
+                value={newFeature.description}
+                onChange={(value) => {
+                  setNewFeature({ ...newFeature, description: value });
+                  if (value.trim()) {
+                    setDescriptionError(false);
+                  }
+                }}
+                images={newFeature.imagePaths}
+                onImagesChange={(images) =>
+                  setNewFeature({ ...newFeature, imagePaths: images })
+                }
+                placeholder="Describe the feature..."
+                previewMap={newFeaturePreviewMap}
+                onPreviewMapChange={setNewFeaturePreviewMap}
+                autoFocus
+                error={descriptionError}
+              />
+            </div>
+            <div className="flex w-fit items-center gap-3 select-none cursor-default">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="w-[200px] justify-between"
+                  >
+                    {enhancementMode === "improve" && "Improve Clarity"}
+                    {enhancementMode === "technical" && "Add Technical Details"}
+                    {enhancementMode === "simplify" && "Simplify"}
+                    {enhancementMode === "acceptance" &&
+                      "Add Acceptance Criteria"}
+                    <ChevronDown className="w-4 h-4 ml-2" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem
+                    onClick={() => setEnhancementMode("improve")}
+                  >
+                    Improve Clarity
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => setEnhancementMode("technical")}
+                  >
+                    Add Technical Details
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => setEnhancementMode("simplify")}
+                  >
+                    Simplify
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => setEnhancementMode("acceptance")}
+                  >
+                    Add Acceptance Criteria
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleEnhanceDescription}
+                disabled={!newFeature.description.trim() || isEnhancing}
+                loading={isEnhancing}
+              >
+                <Sparkles className="w-4 h-4 mr-2" />
+                Enhance with AI
+              </Button>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="category">Category (optional)</Label>
+              <CategoryAutocomplete
+                value={newFeature.category}
+                onChange={(value) =>
+                  setNewFeature({ ...newFeature, category: value })
+                }
+                suggestions={categorySuggestions}
+                placeholder="e.g., Core, UI, API"
+                data-testid="feature-category-input"
+              />
+            </div>
+            {useWorktrees && (
+              <div className="space-y-2">
+                <Label htmlFor="branch">Target Branch</Label>
+                <BranchAutocomplete
+                  value={newFeature.branchName}
+                  onChange={(value) =>
+                    setNewFeature({ ...newFeature, branchName: value })
+                  }
+                  branches={branchSuggestions}
+                  placeholder="Select or create branch..."
+                  data-testid="feature-branch-input"
+                />
+                <p className="text-xs text-muted-foreground">
+                  Work will be done in this branch. A worktree will be created if
+                  needed.
+                </p>
+              </div>
+            )}
+
+            {/* Priority Selector */}
+            <PrioritySelector
+              selectedPriority={newFeature.priority}
+              onPrioritySelect={(priority) =>
+                setNewFeature({ ...newFeature, priority })
+              }
+              testIdPrefix="priority"
+            />
+          </TabsContent>
+
+          {/* Model Tab */}
+          <TabsContent
+            value="model"
+            className="space-y-4 overflow-y-auto cursor-default"
+          >
+            {/* Show Advanced Options Toggle */}
+            {showProfilesOnly && (
+              <div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border">
+                <div className="space-y-1">
+                  <p className="text-sm font-medium text-foreground">
+                    Simple Mode Active
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    Only showing AI profiles. Advanced model tweaking is hidden.
+                  </p>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
+                  data-testid="show-advanced-options-toggle"
+                >
+                  <Settings2 className="w-4 h-4 mr-2" />
+                  {showAdvancedOptions ? "Hide" : "Show"} Advanced
+                </Button>
+              </div>
+            )}
+
+            {/* Quick Select Profile Section */}
+            <ProfileQuickSelect
+              profiles={aiProfiles}
+              selectedModel={newFeature.model}
+              selectedThinkingLevel={newFeature.thinkingLevel}
+              onSelect={handleProfileSelect}
+              showManageLink
+              onManageLinkClick={() => {
+                onOpenChange(false);
+                navigate({ to: "/profiles" });
+              }}
+            />
+
+            {/* Separator */}
+            {aiProfiles.length > 0 &&
+              (!showProfilesOnly || showAdvancedOptions) && (
+                <div className="border-t border-border" />
+              )}
+
+            {/* Claude Models Section */}
+            {(!showProfilesOnly || showAdvancedOptions) && (
+              <>
+                <ModelSelector
+                  selectedModel={newFeature.model}
+                  onModelSelect={handleModelSelect}
+                />
+                {newModelAllowsThinking && (
+                  <ThinkingLevelSelector
+                    selectedLevel={newFeature.thinkingLevel}
+                    onLevelSelect={(level) =>
+                      setNewFeature({ ...newFeature, thinkingLevel: level })
+                    }
+                  />
+                )}
+              </>
+            )}
+          </TabsContent>
+
+          {/* Testing Tab */}
+          <TabsContent
+            value="testing"
+            className="space-y-4 overflow-y-auto cursor-default"
+          >
+            <TestingTabContent
+              skipTests={newFeature.skipTests}
+              onSkipTestsChange={(skipTests) =>
+                setNewFeature({ ...newFeature, skipTests })
+              }
+              steps={newFeature.steps}
+              onStepsChange={(steps) => setNewFeature({ ...newFeature, steps })}
+            />
+          </TabsContent>
+        </Tabs>
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <HotkeyButton
+            onClick={handleAdd}
+            hotkey={{ key: "Enter", cmdCtrl: true }}
+            hotkeyActive={open}
+            data-testid="confirm-add-feature"
+          >
+            Add Feature
+          </HotkeyButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/ui/src/components/views/board-view/dialogs/agent-output-modal.tsx

@@ -0,0 +1,342 @@
+
+import { useEffect, useRef, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Loader2, List, FileText, GitBranch } from "lucide-react";
+import { getElectronAPI } from "@/lib/electron";
+import { LogViewer } from "@/components/ui/log-viewer";
+import { GitDiffPanel } from "@/components/ui/git-diff-panel";
+import { useAppStore } from "@/store/app-store";
+import type { AutoModeEvent } from "@/types/electron";
+
+interface AgentOutputModalProps {
+  open: boolean;
+  onClose: () => void;
+  featureDescription: string;
+  featureId: string;
+  /** The status of the feature - used to determine if spinner should be shown */
+  featureStatus?: string;
+  /** Called when a number key (0-9) is pressed while the modal is open */
+  onNumberKeyPress?: (key: string) => void;
+}
+
+type ViewMode = "parsed" | "raw" | "changes";
+
+export function AgentOutputModal({
+  open,
+  onClose,
+  featureDescription,
+  featureId,
+  featureStatus,
+  onNumberKeyPress,
+}: AgentOutputModalProps) {
+  const [output, setOutput] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [viewMode, setViewMode] = useState<ViewMode>("parsed");
+  const [projectPath, setProjectPath] = useState<string>("");
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const autoScrollRef = useRef(true);
+  const projectPathRef = useRef<string>("");
+  const useWorktrees = useAppStore((state) => state.useWorktrees);
+
+  // Auto-scroll to bottom when output changes
+  useEffect(() => {
+    if (autoScrollRef.current && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [output]);
+
+  // Load existing output from file
+  useEffect(() => {
+    if (!open) return;
+
+    const loadOutput = async () => {
+      const api = getElectronAPI();
+      if (!api) return;
+
+      setIsLoading(true);
+
+      try {
+        // Get current project path from store (we'll need to pass this)
+        const currentProject = (window as any).__currentProject;
+        if (!currentProject?.path) {
+          setIsLoading(false);
+          return;
+        }
+
+        projectPathRef.current = currentProject.path;
+        setProjectPath(currentProject.path);
+
+        // Use features API to get agent output
+        if (api.features) {
+          const result = await api.features.getAgentOutput(
+            currentProject.path,
+            featureId
+          );
+
+          if (result.success) {
+            setOutput(result.content || "");
+          } else {
+            setOutput("");
+          }
+        } else {
+          setOutput("");
+        }
+      } catch (error) {
+        console.error("Failed to load output:", error);
+        setOutput("");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadOutput();
+  }, [open, featureId]);
+
+  // Listen to auto mode events and update output
+  useEffect(() => {
+    if (!open) return;
+
+    const api = getElectronAPI();
+    if (!api?.autoMode) return;
+
+    const unsubscribe = api.autoMode.onEvent((event) => {
+      // Filter events for this specific feature only (skip events without featureId)
+      if ("featureId" in event && event.featureId !== featureId) {
+        return;
+      }
+
+      let newContent = "";
+
+      switch (event.type) {
+        case "auto_mode_progress":
+          newContent = event.content || "";
+          break;
+        case "auto_mode_tool":
+          const toolName = event.tool || "Unknown Tool";
+          const toolInput = event.input
+            ? JSON.stringify(event.input, null, 2)
+            : "";
+          newContent = `\n🔧 Tool: ${toolName}\n${
+            toolInput ? `Input: ${toolInput}\n` : ""
+          }`;
+          break;
+        case "auto_mode_phase":
+          const phaseEmoji =
+            event.phase === "planning"
+              ? "📋"
+              : event.phase === "action"
+              ? "⚡"
+              : "✅";
+          newContent = `\n${phaseEmoji} ${event.message}\n`;
+          break;
+        case "auto_mode_error":
+          newContent = `\n❌ Error: ${event.error}\n`;
+          break;
+        case "auto_mode_ultrathink_preparation":
+          // Format thinking level preparation information
+          let prepContent = `\n🧠 Ultrathink Preparation\n`;
+
+          if (event.warnings && event.warnings.length > 0) {
+            prepContent += `\n⚠️ Warnings:\n`;
+            event.warnings.forEach((warning: string) => {
+              prepContent += `  • ${warning}\n`;
+            });
+          }
+
+          if (event.recommendations && event.recommendations.length > 0) {
+            prepContent += `\n💡 Recommendations:\n`;
+            event.recommendations.forEach((rec: string) => {
+              prepContent += `  • ${rec}\n`;
+            });
+          }
+
+          if (event.estimatedCost !== undefined) {
+            prepContent += `\n💰 Estimated Cost: ~$${event.estimatedCost.toFixed(
+              2
+            )} per execution\n`;
+          }
+
+          if (event.estimatedTime) {
+            prepContent += `\n⏱️ Estimated Time: ${event.estimatedTime}\n`;
+          }
+
+          newContent = prepContent;
+          break;
+        case "auto_mode_feature_complete":
+          const emoji = event.passes ? "✅" : "⚠️";
+          newContent = `\n${emoji} Task completed: ${event.message}\n`;
+
+          // Close the modal when the feature is verified (passes = true)
+          if (event.passes) {
+            // Small delay to show the completion message before closing
+            setTimeout(() => {
+              onClose();
+            }, 1500);
+          }
+          break;
+      }
+
+      if (newContent) {
+        // Only update local state - server is the single source of truth for file writes
+        setOutput((prev) => prev + newContent);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [open, featureId]);
+
+  // Handle scroll to detect if user scrolled up
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
+    autoScrollRef.current = isAtBottom;
+  };
+
+  // Handle number key presses while modal is open
+  useEffect(() => {
+    if (!open || !onNumberKeyPress) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Check if a number key (0-9) was pressed without modifiers
+      if (
+        !event.ctrlKey &&
+        !event.altKey &&
+        !event.metaKey &&
+        /^[0-9]$/.test(event.key)
+      ) {
+        event.preventDefault();
+        onNumberKeyPress(event.key);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, onNumberKeyPress]);
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent
+        className="w-[60vw] max-w-[60vw] max-h-[80vh] flex flex-col"
+        data-testid="agent-output-modal"
+      >
+        <DialogHeader className="flex-shrink-0">
+          <div className="flex items-center justify-between">
+            <DialogTitle className="flex items-center gap-2">
+              {featureStatus !== "verified" &&
+                featureStatus !== "waiting_approval" && (
+                  <Loader2 className="w-5 h-5 text-primary animate-spin" />
+                )}
+              Agent Output
+            </DialogTitle>
+            <div className="flex items-center gap-1 bg-muted rounded-lg p-1">
+              <button
+                onClick={() => setViewMode("parsed")}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+                  viewMode === "parsed"
+                    ? "bg-primary/20 text-primary shadow-sm"
+                    : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                }`}
+                data-testid="view-mode-parsed"
+              >
+                <List className="w-3.5 h-3.5" />
+                Logs
+              </button>
+              <button
+                onClick={() => setViewMode("changes")}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+                  viewMode === "changes"
+                    ? "bg-primary/20 text-primary shadow-sm"
+                    : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                }`}
+                data-testid="view-mode-changes"
+              >
+                <GitBranch className="w-3.5 h-3.5" />
+                Changes
+              </button>
+              <button
+                onClick={() => setViewMode("raw")}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+                  viewMode === "raw"
+                    ? "bg-primary/20 text-primary shadow-sm"
+                    : "text-muted-foreground hover:text-foreground hover:bg-accent"
+                }`}
+                data-testid="view-mode-raw"
+              >
+                <FileText className="w-3.5 h-3.5" />
+                Raw
+              </button>
+            </div>
+          </div>
+          <DialogDescription
+            className="mt-1 max-h-24 overflow-y-auto break-words"
+            data-testid="agent-output-description"
+          >
+            {featureDescription}
+          </DialogDescription>
+        </DialogHeader>
+
+        {viewMode === "changes" ? (
+          <div className="flex-1 min-h-[400px] max-h-[60vh] overflow-y-auto scrollbar-visible">
+            {projectPath ? (
+              <GitDiffPanel
+                projectPath={projectPath}
+                featureId={featureId}
+                compact={false}
+                useWorktrees={useWorktrees}
+                className="border-0 rounded-lg"
+              />
+            ) : (
+              <div className="flex items-center justify-center h-full text-muted-foreground">
+                <Loader2 className="w-6 h-6 animate-spin mr-2" />
+                Loading...
+              </div>
+            )}
+          </div>
+        ) : (
+          <>
+            <div
+              ref={scrollRef}
+              onScroll={handleScroll}
+              className="flex-1 overflow-y-auto bg-zinc-950 rounded-lg p-4 font-mono text-xs min-h-[400px] max-h-[60vh] scrollbar-visible"
+            >
+              {isLoading && !output ? (
+                <div className="flex items-center justify-center h-full text-muted-foreground">
+                  <Loader2 className="w-6 h-6 animate-spin mr-2" />
+                  Loading output...
+                </div>
+              ) : !output ? (
+                <div className="flex items-center justify-center h-full text-muted-foreground">
+                  No output yet. The agent will stream output here as it works.
+                </div>
+              ) : viewMode === "parsed" ? (
+                <LogViewer output={output} />
+              ) : (
+                <div className="whitespace-pre-wrap break-words text-zinc-300">
+                  {output}
+                </div>
+              )}
+            </div>
+
+            <div className="text-xs text-muted-foreground text-center flex-shrink-0">
+              {autoScrollRef.current
+                ? "Auto-scrolling enabled"
+                : "Scroll to bottom to enable auto-scroll"}
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/ui/src/components/views/board-view/dialogs/commit-worktree-dialog.tsx

@@ -0,0 +1,162 @@
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { GitCommit, Loader2 } from "lucide-react";
+import { getElectronAPI } from "@/lib/electron";
+import { toast } from "sonner";
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+interface CommitWorktreeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  onCommitted: () => void;
+}
+
+export function CommitWorktreeDialog({
+  open,
+  onOpenChange,
+  worktree,
+  onCommitted,
+}: CommitWorktreeDialogProps) {
+  const [message, setMessage] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleCommit = async () => {
+    if (!worktree || !message.trim()) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.commit) {
+        setError("Worktree API not available");
+        return;
+      }
+      const result = await api.worktree.commit(worktree.path, message);
+
+      if (result.success && result.result) {
+        if (result.result.committed) {
+          toast.success("Changes committed", {
+            description: `Commit ${result.result.commitHash} on ${result.result.branch}`,
+          });
+          onCommitted();
+          onOpenChange(false);
+          setMessage("");
+        } else {
+          toast.info("No changes to commit", {
+            description: result.result.message,
+          });
+        }
+      } else {
+        setError(result.error || "Failed to commit changes");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to commit");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && e.metaKey && !isLoading && message.trim()) {
+      handleCommit();
+    }
+  };
+
+  if (!worktree) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <GitCommit className="w-5 h-5" />
+            Commit Changes
+          </DialogTitle>
+          <DialogDescription>
+            Commit changes in the{" "}
+            <code className="font-mono bg-muted px-1 rounded">
+              {worktree.branch}
+            </code>{" "}
+            worktree.
+            {worktree.changedFilesCount && (
+              <span className="ml-1">
+                ({worktree.changedFilesCount} file
+                {worktree.changedFilesCount > 1 ? "s" : ""} changed)
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="commit-message">Commit Message</Label>
+            <Textarea
+              id="commit-message"
+              placeholder="Describe your changes..."
+              value={message}
+              onChange={(e) => {
+                setMessage(e.target.value);
+                setError(null);
+              }}
+              onKeyDown={handleKeyDown}
+              className="min-h-[100px] font-mono text-sm"
+              autoFocus
+            />
+            {error && <p className="text-sm text-destructive">{error}</p>}
+          </div>
+
+          <p className="text-xs text-muted-foreground">
+            Press <kbd className="px-1 py-0.5 bg-muted rounded text-xs">Cmd+Enter</kbd> to commit
+          </p>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            disabled={isLoading}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleCommit}
+            disabled={isLoading || !message.trim()}
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                Committing...
+              </>
+            ) : (
+              <>
+                <GitCommit className="w-4 h-4 mr-2" />
+                Commit
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/ui/src/components/views/board-view/dialogs/completed-features-modal.tsx

@@ -0,0 +1,103 @@
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { ArchiveRestore, Trash2 } from "lucide-react";
+import { Feature } from "@/store/app-store";
+
+interface CompletedFeaturesModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  completedFeatures: Feature[];
+  onUnarchive: (feature: Feature) => void;
+  onDelete: (feature: Feature) => void;
+}
+
+export function CompletedFeaturesModal({
+  open,
+  onOpenChange,
+  completedFeatures,
+  onUnarchive,
+  onDelete,
+}: CompletedFeaturesModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="max-w-6xl max-h-[90vh] flex flex-col"
+        data-testid="completed-features-modal"
+      >
+        <DialogHeader>
+          <DialogTitle>Completed Features</DialogTitle>
+          <DialogDescription>
+            {completedFeatures.length === 0
+              ? "No completed features yet."
+              : `${completedFeatures.length} completed feature${
+                  completedFeatures.length > 1 ? "s" : ""
+                }`}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex-1 overflow-y-auto py-4">
+          {completedFeatures.length === 0 ? (
+            <div className="text-center text-muted-foreground py-8">
+              <ArchiveRestore className="w-12 h-12 mx-auto mb-4 opacity-50" />
+              <p>No completed features</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+              {completedFeatures.map((feature) => (
+                <Card
+                  key={feature.id}
+                  className="flex flex-col"
+                  data-testid={`completed-card-${feature.id}`}
+                >
+                  <CardHeader className="p-3 pb-2 flex-1">
+                    <CardTitle className="text-sm leading-tight line-clamp-3">
+                      {feature.description || feature.summary || feature.id}
+                    </CardTitle>
+                    <CardDescription className="text-xs mt-1 truncate">
+                      {feature.category || "Uncategorized"}
+                    </CardDescription>
+                  </CardHeader>
+                  <div className="p-3 pt-0 flex gap-2">
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      className="flex-1 h-7 text-xs"
+                      onClick={() => onUnarchive(feature)}
+                      data-testid={`unarchive-${feature.id}`}
+                    >
+                      <ArchiveRestore className="w-3 h-3 mr-1" />
+                      Restore
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 w-7 p-0 text-muted-foreground hover:text-destructive"
+                      onClick={() => onDelete(feature)}
+                      data-testid={`delete-completed-${feature.id}`}
+                      title="Delete"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </Card>
+              ))}
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/ui/src/components/views/board-view/dialogs/create-branch-dialog.tsx

@@ -0,0 +1,151 @@
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { getElectronAPI } from "@/lib/electron";
+import { toast } from "sonner";
+import { GitBranchPlus, Loader2 } from "lucide-react";
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+interface CreateBranchDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  onCreated: () => void;
+}
+
+export function CreateBranchDialog({
+  open,
+  onOpenChange,
+  worktree,
+  onCreated,
+}: CreateBranchDialogProps) {
+  const [branchName, setBranchName] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Reset state when dialog opens/closes
+  useEffect(() => {
+    if (open) {
+      setBranchName("");
+      setError(null);
+    }
+  }, [open]);
+
+  const handleCreate = async () => {
+    if (!worktree || !branchName.trim()) return;
+
+    // Basic validation
+    const invalidChars = /[\s~^:?*[\]\\]/;
+    if (invalidChars.test(branchName)) {
+      setError("Branch name contains invalid characters");
+      return;
+    }
+
+    setIsCreating(true);
+    setError(null);
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.checkoutBranch) {
+        toast.error("Branch API not available");
+        return;
+      }
+
+      const result = await api.worktree.checkoutBranch(worktree.path, branchName.trim());
+
+      if (result.success && result.result) {
+        toast.success(result.result.message);
+        onCreated();
+        onOpenChange(false);
+      } else {
+        setError(result.error || "Failed to create branch");
+      }
+    } catch (err) {
+      console.error("Create branch failed:", err);
+      setError("Failed to create branch");
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <GitBranchPlus className="w-5 h-5" />
+            Create New Branch
+          </DialogTitle>
+          <DialogDescription>
+            Create a new branch from <span className="font-mono text-foreground">{worktree?.branch || "current branch"}</span>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="branch-name">Branch Name</Label>
+            <Input
+              id="branch-name"
+              placeholder="feature/my-new-feature"
+              value={branchName}
+              onChange={(e) => {
+                setBranchName(e.target.value);
+                setError(null);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && branchName.trim() && !isCreating) {
+                  handleCreate();
+                }
+              }}
+              disabled={isCreating}
+              autoFocus
+            />
+            {error && (
+              <p className="text-sm text-destructive">{error}</p>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isCreating}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleCreate}
+            disabled={!branchName.trim() || isCreating}
+          >
+            {isCreating ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                Creating...
+              </>
+            ) : (
+              "Create Branch"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/ui/src/components/views/board-view/dialogs/create-pr-dialog.tsx

@@ -0,0 +1,374 @@
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { GitPullRequest, Loader2, ExternalLink } from "lucide-react";
+import { getElectronAPI } from "@/lib/electron";
+import { toast } from "sonner";
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+interface CreatePRDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  onCreated: () => void;
+}
+
+export function CreatePRDialog({
+  open,
+  onOpenChange,
+  worktree,
+  onCreated,
+}: CreatePRDialogProps) {
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [baseBranch, setBaseBranch] = useState("main");
+  const [commitMessage, setCommitMessage] = useState("");
+  const [isDraft, setIsDraft] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [prUrl, setPrUrl] = useState<string | null>(null);
+  const [browserUrl, setBrowserUrl] = useState<string | null>(null);
+  const [showBrowserFallback, setShowBrowserFallback] = useState(false);
+
+  // Reset state when dialog opens or worktree changes
+  useEffect(() => {
+    if (open) {
+      // Only reset form fields, not the result states (prUrl, browserUrl, showBrowserFallback)
+      // These are set by the API response and should persist until dialog closes
+      setTitle("");
+      setBody("");
+      setCommitMessage("");
+      setBaseBranch("main");
+      setIsDraft(false);
+      setError(null);
+    } else {
+      // Reset everything when dialog closes
+      setTitle("");
+      setBody("");
+      setCommitMessage("");
+      setBaseBranch("main");
+      setIsDraft(false);
+      setError(null);
+      setPrUrl(null);
+      setBrowserUrl(null);
+      setShowBrowserFallback(false);
+    }
+  }, [open, worktree?.path]);
+
+  const handleCreate = async () => {
+    if (!worktree) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.createPR) {
+        setError("Worktree API not available");
+        return;
+      }
+      const result = await api.worktree.createPR(worktree.path, {
+        commitMessage: commitMessage || undefined,
+        prTitle: title || worktree.branch,
+        prBody: body || `Changes from branch ${worktree.branch}`,
+        baseBranch,
+        draft: isDraft,
+      });
+
+      if (result.success && result.result) {
+        if (result.result.prCreated && result.result.prUrl) {
+          setPrUrl(result.result.prUrl);
+          toast.success("Pull request created!", {
+            description: `PR created from ${result.result.branch}`,
+            action: {
+              label: "View PR",
+              onClick: () => window.open(result.result!.prUrl!, "_blank"),
+            },
+          });
+          onCreated();
+        } else {
+          // Branch was pushed successfully
+          const prError = result.result.prError;
+          const hasBrowserUrl = !!result.result.browserUrl;
+
+          // Check if we should show browser fallback
+          if (!result.result.prCreated && hasBrowserUrl) {
+            // If gh CLI is not available, show browser fallback UI
+            if (prError === "gh_cli_not_available" || !result.result.ghCliAvailable) {
+              setBrowserUrl(result.result.browserUrl ?? null);
+              setShowBrowserFallback(true);
+              toast.success("Branch pushed", {
+                description: result.result.committed
+                  ? `Commit ${result.result.commitHash} pushed to ${result.result.branch}`
+                  : `Branch ${result.result.branch} pushed`,
+              });
+              // Don't call onCreated() here - we want to keep the dialog open to show the browser URL
+              setIsLoading(false);
+              return; // Don't close dialog, show browser fallback UI
+            }
+
+            // gh CLI is available but failed - show error with browser option
+            if (prError) {
+              // Parse common gh CLI errors for better messages
+              let errorMessage = prError;
+              if (prError.includes("No commits between")) {
+                errorMessage = "No new commits to create PR. Make sure your branch has changes compared to the base branch.";
+              } else if (prError.includes("already exists")) {
+                errorMessage = "A pull request already exists for this branch.";
+              } else if (prError.includes("not logged in") || prError.includes("auth")) {
+                errorMessage = "GitHub CLI not authenticated. Run 'gh auth login' in terminal.";
+              }
+
+              // Show error but also provide browser option
+              setBrowserUrl(result.result.browserUrl ?? null);
+              setShowBrowserFallback(true);
+              toast.error("PR creation failed", {
+                description: errorMessage,
+                duration: 8000,
+              });
+              // Don't call onCreated() here - we want to keep the dialog open to show the browser URL
+              setIsLoading(false);
+              return;
+            }
+          }
+
+          // Show success toast for push
+          toast.success("Branch pushed", {
+            description: result.result.committed
+              ? `Commit ${result.result.commitHash} pushed to ${result.result.branch}`
+              : `Branch ${result.result.branch} pushed`,
+          });
+
+          // No browser URL available, just close
+          if (!result.result.prCreated) {
+            if (!hasBrowserUrl) {
+              toast.info("PR not created", {
+                description: "Could not determine repository URL. GitHub CLI (gh) may not be installed or authenticated.",
+                duration: 8000,
+              });
+            }
+          }
+          onCreated();
+          onOpenChange(false);
+        }
+      } else {
+        setError(result.error || "Failed to create pull request");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create PR");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    onOpenChange(false);
+    // Reset state after dialog closes
+    setTimeout(() => {
+      setTitle("");
+      setBody("");
+      setCommitMessage("");
+      setBaseBranch("main");
+      setIsDraft(false);
+      setError(null);
+      setPrUrl(null);
+      setBrowserUrl(null);
+      setShowBrowserFallback(false);
+    }, 200);
+  };
+
+  if (!worktree) return null;
+
+  const shouldShowBrowserFallback = showBrowserFallback && browserUrl;
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[550px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <GitPullRequest className="w-5 h-5" />
+            Create Pull Request
+          </DialogTitle>
+          <DialogDescription>
+            Push changes and create a pull request from{" "}
+            <code className="font-mono bg-muted px-1 rounded">
+              {worktree.branch}
+            </code>
+          </DialogDescription>
+        </DialogHeader>
+
+        {prUrl ? (
+          <div className="py-6 text-center space-y-4">
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-500/10">
+              <GitPullRequest className="w-8 h-8 text-green-500" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold">Pull Request Created!</h3>
+              <p className="text-sm text-muted-foreground mt-1">
+                Your PR is ready for review
+              </p>
+            </div>
+            <Button
+              onClick={() => window.open(prUrl, "_blank")}
+              className="gap-2"
+            >
+              <ExternalLink className="w-4 h-4" />
+              View Pull Request
+            </Button>
+          </div>
+        ) : shouldShowBrowserFallback ? (
+          <div className="py-6 text-center space-y-4">
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-500/10">
+              <GitPullRequest className="w-8 h-8 text-blue-500" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold">Branch Pushed!</h3>
+              <p className="text-sm text-muted-foreground mt-1">
+                Your changes have been pushed to GitHub.
+                <br />
+                Click below to create a pull request in your browser.
+              </p>
+            </div>
+            <div className="space-y-3">
+              <Button
+                onClick={() => {
+                  if (browserUrl) {
+                    window.open(browserUrl, "_blank");
+                  }
+                }}
+                className="gap-2 w-full"
+                size="lg"
+              >
+                <ExternalLink className="w-4 h-4" />
+                Create PR in Browser
+              </Button>
+              <div className="p-2 bg-muted rounded text-xs break-all font-mono">
+                {browserUrl}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Tip: Install the GitHub CLI (<code className="bg-muted px-1 rounded">gh</code>) to create PRs directly from the app
+              </p>
+              <DialogFooter className="mt-4">
+                <Button variant="outline" onClick={handleClose}>
+                  Close
+                </Button>
+              </DialogFooter>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="grid gap-4 py-4">
+              {worktree.hasChanges && (
+                <div className="grid gap-2">
+                  <Label htmlFor="commit-message">
+                    Commit Message{" "}
+                    <span className="text-muted-foreground">(optional)</span>
+                  </Label>
+                  <Input
+                    id="commit-message"
+                    placeholder="Leave empty to auto-generate"
+                    value={commitMessage}
+                    onChange={(e) => setCommitMessage(e.target.value)}
+                    className="font-mono text-sm"
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    {worktree.changedFilesCount} uncommitted file(s) will be
+                    committed
+                  </p>
+                </div>
+              )}
+
+              <div className="grid gap-2">
+                <Label htmlFor="pr-title">PR Title</Label>
+                <Input
+                  id="pr-title"
+                  placeholder={worktree.branch}
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                />
+              </div>
+
+              <div className="grid gap-2">
+                <Label htmlFor="pr-body">Description</Label>
+                <Textarea
+                  id="pr-body"
+                  placeholder="Describe the changes in this PR..."
+                  value={body}
+                  onChange={(e) => setBody(e.target.value)}
+                  className="min-h-[80px]"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="base-branch">Base Branch</Label>
+                  <Input
+                    id="base-branch"
+                    placeholder="main"
+                    value={baseBranch}
+                    onChange={(e) => setBaseBranch(e.target.value)}
+                    className="font-mono text-sm"
+                  />
+                </div>
+                <div className="flex items-end">
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="draft"
+                      checked={isDraft}
+                      onCheckedChange={(checked) => setIsDraft(checked === true)}
+                    />
+                    <Label htmlFor="draft" className="cursor-pointer">
+                      Create as draft
+                    </Label>
+                  </div>
+                </div>
+              </div>
+
+              {error && (
+                <p className="text-sm text-destructive">{error}</p>
+              )}
+            </div>
+
+            <DialogFooter>
+              <Button variant="ghost" onClick={handleClose} disabled={isLoading}>
+                Cancel
+              </Button>
+              <Button onClick={handleCreate} disabled={isLoading}>
+                {isLoading ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    Creating...
+                  </>
+                ) : (
+                  <>
+                    <GitPullRequest className="w-4 h-4 mr-2" />
+                    Create PR
+                  </>
+                )}
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/ui/src/components/views/board-view/dialogs/create-worktree-dialog.tsx

@@ -0,0 +1,170 @@
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { GitBranch, Loader2 } from "lucide-react";
+import { getElectronAPI } from "@/lib/electron";
+import { toast } from "sonner";
+
+interface CreatedWorktreeInfo {
+  path: string;
+  branch: string;
+}
+
+interface CreateWorktreeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectPath: string;
+  onCreated: (worktree: CreatedWorktreeInfo) => void;
+}
+
+export function CreateWorktreeDialog({
+  open,
+  onOpenChange,
+  projectPath,
+  onCreated,
+}: CreateWorktreeDialogProps) {
+  const [branchName, setBranchName] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleCreate = async () => {
+    if (!branchName.trim()) {
+      setError("Branch name is required");
+      return;
+    }
+
+    // Validate branch name (git-compatible)
+    const validBranchRegex = /^[a-zA-Z0-9._/-]+$/;
+    if (!validBranchRegex.test(branchName)) {
+      setError(
+        "Invalid branch name. Use only letters, numbers, dots, underscores, hyphens, and slashes."
+      );
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.create) {
+        setError("Worktree API not available");
+        return;
+      }
+      const result = await api.worktree.create(projectPath, branchName);
+
+      if (result.success && result.worktree) {
+        toast.success(
+          `Worktree created for branch "${result.worktree.branch}"`,
+          {
+            description: result.worktree.isNew
+              ? "New branch created"
+              : "Using existing branch",
+          }
+        );
+        onCreated({ path: result.worktree.path, branch: result.worktree.branch });
+        onOpenChange(false);
+        setBranchName("");
+      } else {
+        setError(result.error || "Failed to create worktree");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create worktree");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !isLoading && branchName.trim()) {
+      handleCreate();
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <GitBranch className="w-5 h-5" />
+            Create New Worktree
+          </DialogTitle>
+          <DialogDescription>
+            Create a new git worktree with its own branch. This allows you to
+            work on multiple features in parallel.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="branch-name">Branch Name</Label>
+            <Input
+              id="branch-name"
+              placeholder="feature/my-new-feature"
+              value={branchName}
+              onChange={(e) => {
+                setBranchName(e.target.value);
+                setError(null);
+              }}
+              onKeyDown={handleKeyDown}
+              className="font-mono text-sm"
+              autoFocus
+            />
+            {error && <p className="text-sm text-destructive">{error}</p>}
+          </div>
+
+          <div className="text-xs text-muted-foreground space-y-1">
+            <p>Examples:</p>
+            <ul className="list-disc list-inside pl-2 space-y-0.5">
+              <li>
+                <code className="bg-muted px-1 rounded">feature/user-auth</code>
+              </li>
+              <li>
+                <code className="bg-muted px-1 rounded">fix/login-bug</code>
+              </li>
+              <li>
+                <code className="bg-muted px-1 rounded">hotfix/security-patch</code>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            disabled={isLoading}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleCreate}
+            disabled={isLoading || !branchName.trim()}
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                Creating...
+              </>
+            ) : (
+              <>
+                <GitBranch className="w-4 h-4 mr-2" />
+                Create Worktree
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/ui/src/components/views/board-view/dialogs/delete-all-verified-dialog.tsx

@@ -0,0 +1,53 @@
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Trash2 } from "lucide-react";
+
+interface DeleteAllVerifiedDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  verifiedCount: number;
+  onConfirm: () => void;
+}
+
+export function DeleteAllVerifiedDialog({
+  open,
+  onOpenChange,
+  verifiedCount,
+  onConfirm,
+}: DeleteAllVerifiedDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent data-testid="delete-all-verified-dialog">
+        <DialogHeader>
+          <DialogTitle>Delete All Verified Features</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete all verified features? This action
+            cannot be undone.
+            {verifiedCount > 0 && (
+              <span className="block mt-2 text-yellow-500">
+                {verifiedCount} feature(s) will be deleted.
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={onConfirm} data-testid="confirm-delete-all-verified">
+            <Trash2 className="w-4 h-4 mr-2" />
+            Delete All
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/ui/src/components/views/board-view/dialogs/delete-completed-feature-dialog.tsx

@@ -0,0 +1,66 @@
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Trash2 } from "lucide-react";
+import { Feature } from "@/store/app-store";
+
+interface DeleteCompletedFeatureDialogProps {
+  feature: Feature | null;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export function DeleteCompletedFeatureDialog({
+  feature,
+  onClose,
+  onConfirm,
+}: DeleteCompletedFeatureDialogProps) {
+  if (!feature) return null;
+
+  return (
+    <Dialog open={!!feature} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent data-testid="delete-completed-confirmation-dialog">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-destructive">
+            <Trash2 className="w-5 h-5" />
+            Delete Feature
+          </DialogTitle>
+          <DialogDescription>
+            Are you sure you want to permanently delete this feature?
+            <span className="block mt-2 font-medium text-foreground">
+              &quot;{feature.description?.slice(0, 100)}
+              {(feature.description?.length ?? 0) > 100 ? "..." : ""}&quot;
+            </span>
+            <span className="block mt-2 text-destructive font-medium">
+              This action cannot be undone.
+            </span>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={onClose}
+            data-testid="cancel-delete-completed-button"
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            data-testid="confirm-delete-completed-button"
+          >
+            <Trash2 className="w-4 h-4 mr-2" />
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/ui/src/components/views/board-view/dialogs/delete-worktree-dialog.tsx

@@ -0,0 +1,157 @@
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Loader2, Trash2, AlertTriangle } from "lucide-react";
+import { getElectronAPI } from "@/lib/electron";
+import { toast } from "sonner";
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+interface DeleteWorktreeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectPath: string;
+  worktree: WorktreeInfo | null;
+  onDeleted: (deletedWorktree: WorktreeInfo, deletedBranch: boolean) => void;
+}
+
+export function DeleteWorktreeDialog({
+  open,
+  onOpenChange,
+  projectPath,
+  worktree,
+  onDeleted,
+}: DeleteWorktreeDialogProps) {
+  const [deleteBranch, setDeleteBranch] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleDelete = async () => {
+    if (!worktree) return;
+
+    setIsLoading(true);
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.delete) {
+        toast.error("Worktree API not available");
+        return;
+      }
+      const result = await api.worktree.delete(
+        projectPath,
+        worktree.path,
+        deleteBranch
+      );
+
+      if (result.success) {
+        toast.success(`Worktree deleted`, {
+          description: deleteBranch
+            ? `Branch "${worktree.branch}" was also deleted`
+            : `Branch "${worktree.branch}" was kept`,
+        });
+        onDeleted(worktree, deleteBranch);
+        onOpenChange(false);
+        setDeleteBranch(false);
+      } else {
+        toast.error("Failed to delete worktree", {
+          description: result.error,
+        });
+      }
+    } catch (err) {
+      toast.error("Failed to delete worktree", {
+        description: err instanceof Error ? err.message : "Unknown error",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (!worktree) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Trash2 className="w-5 h-5 text-destructive" />
+            Delete Worktree
+          </DialogTitle>
+          <DialogDescription className="space-y-3">
+            <span>
+              Are you sure you want to delete the worktree for branch{" "}
+              <code className="font-mono bg-muted px-1 rounded">
+                {worktree.branch}
+              </code>
+              ?
+            </span>
+
+            {worktree.hasChanges && (
+              <div className="flex items-start gap-2 p-3 rounded-md bg-yellow-500/10 border border-yellow-500/20 mt-2">
+                <AlertTriangle className="w-4 h-4 text-yellow-500 mt-0.5 flex-shrink-0" />
+                <span className="text-yellow-500 text-sm">
+                  This worktree has {worktree.changedFilesCount} uncommitted
+                  change(s). These will be lost if you proceed.
+                </span>
+              </div>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex items-center space-x-2 py-4">
+          <Checkbox
+            id="delete-branch"
+            checked={deleteBranch}
+            onCheckedChange={(checked) => setDeleteBranch(checked === true)}
+          />
+          <Label htmlFor="delete-branch" className="text-sm cursor-pointer">
+            Also delete the branch{" "}
+            <code className="font-mono bg-muted px-1 rounded">
+              {worktree.branch}
+            </code>
+          </Label>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            disabled={isLoading}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={handleDelete}
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                Deleting...
+              </>
+            ) : (
+              <>
+                <Trash2 className="w-4 h-4 mr-2" />
+                Delete
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/ui/src/components/views/board-view/dialogs/dependency-tree-dialog.tsx

@@ -0,0 +1,232 @@
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Feature } from "@/store/app-store";
+import { AlertCircle, CheckCircle2, Circle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface DependencyTreeDialogProps {
+  open: boolean;
+  onClose: () => void;
+  feature: Feature | null;
+  allFeatures: Feature[];
+}
+
+export function DependencyTreeDialog({
+  open,
+  onClose,
+  feature,
+  allFeatures,
+}: DependencyTreeDialogProps) {
+  const [dependencyTree, setDependencyTree] = useState<{
+    dependencies: Feature[];
+    dependents: Feature[];
+  }>({ dependencies: [], dependents: [] });
+
+  useEffect(() => {
+    if (!feature) return;
+
+    // Find features this depends on
+    const dependencies = (feature.dependencies || [])
+      .map((depId) => allFeatures.find((f) => f.id === depId))
+      .filter((f): f is Feature => f !== undefined);
+
+    // Find features that depend on this one
+    const dependents = allFeatures.filter((f) =>
+      f.dependencies?.includes(feature.id)
+    );
+
+    setDependencyTree({ dependencies, dependents });
+  }, [feature, allFeatures]);
+
+  if (!feature) return null;
+
+  const getStatusIcon = (status: Feature["status"]) => {
+    switch (status) {
+      case "completed":
+      case "verified":
+        return <CheckCircle2 className="w-4 h-4 text-green-500" />;
+      case "in_progress":
+      case "waiting_approval":
+        return <Circle className="w-4 h-4 text-blue-500 fill-blue-500/20" />;
+      default:
+        return <Circle className="w-4 h-4 text-muted-foreground/50" />;
+    }
+  };
+
+  const getPriorityBadge = (priority?: number) => {
+    if (!priority) return null;
+    return (
+      <span
+        className={cn(
+          "text-xs px-1.5 py-0.5 rounded font-medium",
+          priority === 1 && "bg-red-500/20 text-red-500",
+          priority === 2 && "bg-yellow-500/20 text-yellow-500",
+          priority === 3 && "bg-blue-500/20 text-blue-500"
+        )}
+      >
+        P{priority}
+      </span>
+    );
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="max-w-xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Dependency Tree</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6 mt-4">
+          {/* Current Feature */}
+          <div className="border-2 border-primary rounded-lg p-4 bg-primary/5">
+            <div className="flex items-center gap-3 mb-2">
+              {getStatusIcon(feature.status)}
+              <h3 className="font-semibold text-sm">Current Feature</h3>
+              {getPriorityBadge(feature.priority)}
+            </div>
+            <p className="text-sm text-muted-foreground">{feature.description}</p>
+            <p className="text-xs text-muted-foreground/70 mt-2">
+              Category: {feature.category}
+            </p>
+          </div>
+
+          {/* Dependencies (what this feature needs) */}
+          <div>
+            <div className="flex items-center gap-2 mb-3">
+              <h3 className="font-semibold text-sm">
+                Dependencies ({dependencyTree.dependencies.length})
+              </h3>
+              <span className="text-xs text-muted-foreground">
+                This feature requires:
+              </span>
+            </div>
+
+            {dependencyTree.dependencies.length === 0 ? (
+              <div className="text-sm text-muted-foreground/70 italic border border-dashed rounded-lg p-4 text-center">
+                No dependencies - this feature can be started independently
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {dependencyTree.dependencies.map((dep) => (
+                  <div
+                    key={dep.id}
+                    className={cn(
+                      "border rounded-lg p-3 transition-colors",
+                      dep.status === "completed" || dep.status === "verified"
+                        ? "bg-green-500/5 border-green-500/20"
+                        : "bg-muted/30 border-border"
+                    )}
+                  >
+                    <div className="flex items-center gap-3 mb-1">
+                      {getStatusIcon(dep.status)}
+                      <span className="text-sm font-medium flex-1">
+                        {dep.description.slice(0, 100)}
+                        {dep.description.length > 100 && "..."}
+                      </span>
+                      {getPriorityBadge(dep.priority)}
+                    </div>
+                    <div className="flex items-center gap-3 ml-7">
+                      <span className="text-xs text-muted-foreground">
+                        {dep.category}
+                      </span>
+                      <span
+                        className={cn(
+                          "text-xs px-2 py-0.5 rounded-full",
+                          dep.status === "completed" || dep.status === "verified"
+                            ? "bg-green-500/20 text-green-600"
+                            : dep.status === "in_progress"
+                              ? "bg-blue-500/20 text-blue-600"
+                              : "bg-muted text-muted-foreground"
+                        )}
+                      >
+                        {dep.status.replace(/_/g, " ")}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Dependents (what depends on this feature) */}
+          <div>
+            <div className="flex items-center gap-2 mb-3">
+              <h3 className="font-semibold text-sm">
+                Dependents ({dependencyTree.dependents.length})
+              </h3>
+              <span className="text-xs text-muted-foreground">
+                Features blocked by this:
+              </span>
+            </div>
+
+            {dependencyTree.dependents.length === 0 ? (
+              <div className="text-sm text-muted-foreground/70 italic border border-dashed rounded-lg p-4 text-center">
+                No dependents - no other features are waiting on this one
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {dependencyTree.dependents.map((dependent) => (
+                  <div
+                    key={dependent.id}
+                    className="border rounded-lg p-3 bg-muted/30"
+                  >
+                    <div className="flex items-center gap-3 mb-1">
+                      {getStatusIcon(dependent.status)}
+                      <span className="text-sm font-medium flex-1">
+                        {dependent.description.slice(0, 100)}
+                        {dependent.description.length > 100 && "..."}
+                      </span>
+                      {getPriorityBadge(dependent.priority)}
+                    </div>
+                    <div className="flex items-center gap-3 ml-7">
+                      <span className="text-xs text-muted-foreground">
+                        {dependent.category}
+                      </span>
+                      <span
+                        className={cn(
+                          "text-xs px-2 py-0.5 rounded-full",
+                          dependent.status === "completed" ||
+                            dependent.status === "verified"
+                            ? "bg-green-500/20 text-green-600"
+                            : dependent.status === "in_progress"
+                              ? "bg-blue-500/20 text-blue-600"
+                              : "bg-muted text-muted-foreground"
+                        )}
+                      >
+                        {dependent.status.replace(/_/g, " ")}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Warning for incomplete dependencies */}
+          {dependencyTree.dependencies.some(
+            (d) => d.status !== "completed" && d.status !== "verified"
+          ) && (
+            <div className="flex items-start gap-3 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
+              <AlertCircle className="w-5 h-5 text-yellow-600 shrink-0 mt-0.5" />
+              <div className="text-sm">
+                <p className="font-medium text-yellow-700 dark:text-yellow-500">
+                  Incomplete Dependencies
+                </p>
+                <p className="text-yellow-600 dark:text-yellow-400 mt-1">
+                  This feature has dependencies that aren't completed yet.
+                  Consider completing them first for a smoother implementation.
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/ui/src/components/views/board-view/dialogs/edit-feature-dialog.tsx

@@ -0,0 +1,503 @@
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { HotkeyButton } from "@/components/ui/hotkey-button";
+import { Label } from "@/components/ui/label";
+import { CategoryAutocomplete } from "@/components/ui/category-autocomplete";
+import { BranchAutocomplete } from "@/components/ui/branch-autocomplete";
+import {
+  DescriptionImageDropZone,
+  FeatureImagePath as DescriptionImagePath,
+  ImagePreviewMap,
+} from "@/components/ui/description-image-dropzone";
+import {
+  MessageSquare,
+  Settings2,
+  FlaskConical,
+  Sparkles,
+  ChevronDown,
+  GitBranch,
+} from "lucide-react";
+import { toast } from "sonner";
+import { getElectronAPI } from "@/lib/electron";
+import { modelSupportsThinking } from "@/lib/utils";
+import {
+  Feature,
+  AgentModel,
+  ThinkingLevel,
+  AIProfile,
+  useAppStore,
+} from "@/store/app-store";
+import {
+  ModelSelector,
+  ThinkingLevelSelector,
+  ProfileQuickSelect,
+  TestingTabContent,
+  PrioritySelector,
+} from "../shared";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { DependencyTreeDialog } from "./dependency-tree-dialog";
+
+interface EditFeatureDialogProps {
+  feature: Feature | null;
+  onClose: () => void;
+  onUpdate: (
+    featureId: string,
+    updates: {
+      category: string;
+      description: string;
+      steps: string[];
+      skipTests: boolean;
+      model: AgentModel;
+      thinkingLevel: ThinkingLevel;
+      imagePaths: DescriptionImagePath[];
+      branchName: string;
+      priority: number;
+    }
+  ) => void;
+  categorySuggestions: string[];
+  branchSuggestions: string[];
+  isMaximized: boolean;
+  showProfilesOnly: boolean;
+  aiProfiles: AIProfile[];
+  allFeatures: Feature[];
+}
+
+export function EditFeatureDialog({
+  feature,
+  onClose,
+  onUpdate,
+  categorySuggestions,
+  branchSuggestions,
+  isMaximized,
+  showProfilesOnly,
+  aiProfiles,
+  allFeatures,
+}: EditFeatureDialogProps) {
+  const [editingFeature, setEditingFeature] = useState<Feature | null>(feature);
+  const [editFeaturePreviewMap, setEditFeaturePreviewMap] =
+    useState<ImagePreviewMap>(() => new Map());
+  const [showEditAdvancedOptions, setShowEditAdvancedOptions] = useState(false);
+  const [isEnhancing, setIsEnhancing] = useState(false);
+  const [enhancementMode, setEnhancementMode] = useState<
+    "improve" | "technical" | "simplify" | "acceptance"
+  >("improve");
+  const [showDependencyTree, setShowDependencyTree] = useState(false);
+
+  // Get enhancement model and worktrees setting from store
+  const { enhancementModel, useWorktrees } = useAppStore();
+
+  useEffect(() => {
+    setEditingFeature(feature);
+    if (!feature) {
+      setEditFeaturePreviewMap(new Map());
+      setShowEditAdvancedOptions(false);
+    }
+  }, [feature]);
+
+  const handleUpdate = () => {
+    if (!editingFeature) return;
+
+    const selectedModel = (editingFeature.model ?? "opus") as AgentModel;
+    const normalizedThinking: ThinkingLevel = modelSupportsThinking(
+      selectedModel
+    )
+      ? editingFeature.thinkingLevel ?? "none"
+      : "none";
+
+    const updates = {
+      category: editingFeature.category,
+      description: editingFeature.description,
+      steps: editingFeature.steps,
+      skipTests: editingFeature.skipTests ?? false,
+      model: selectedModel,
+      thinkingLevel: normalizedThinking,
+      imagePaths: editingFeature.imagePaths ?? [],
+      branchName: editingFeature.branchName ?? "main",
+      priority: editingFeature.priority ?? 2,
+    };
+
+    onUpdate(editingFeature.id, updates);
+    setEditFeaturePreviewMap(new Map());
+    setShowEditAdvancedOptions(false);
+    onClose();
+  };
+
+  const handleDialogClose = (open: boolean) => {
+    if (!open) {
+      onClose();
+    }
+  };
+
+  const handleModelSelect = (model: AgentModel) => {
+    if (!editingFeature) return;
+    setEditingFeature({
+      ...editingFeature,
+      model,
+      thinkingLevel: modelSupportsThinking(model)
+        ? editingFeature.thinkingLevel
+        : "none",
+    });
+  };
+
+  const handleProfileSelect = (
+    model: AgentModel,
+    thinkingLevel: ThinkingLevel
+  ) => {
+    if (!editingFeature) return;
+    setEditingFeature({
+      ...editingFeature,
+      model,
+      thinkingLevel,
+    });
+  };
+
+  const handleEnhanceDescription = async () => {
+    if (!editingFeature?.description.trim() || isEnhancing) return;
+
+    setIsEnhancing(true);
+    try {
+      const api = getElectronAPI();
+      const result = await api.enhancePrompt?.enhance(
+        editingFeature.description,
+        enhancementMode,
+        enhancementModel
+      );
+
+      if (result?.success && result.enhancedText) {
+        const enhancedText = result.enhancedText;
+        setEditingFeature((prev) =>
+          prev ? { ...prev, description: enhancedText } : prev
+        );
+        toast.success("Description enhanced!");
+      } else {
+        toast.error(result?.error || "Failed to enhance description");
+      }
+    } catch (error) {
+      console.error("Enhancement failed:", error);
+      toast.error("Failed to enhance description");
+    } finally {
+      setIsEnhancing(false);
+    }
+  };
+
+  const editModelAllowsThinking = modelSupportsThinking(editingFeature?.model);
+
+  if (!editingFeature) {
+    return null;
+  }
+
+  return (
+    <Dialog open={!!editingFeature} onOpenChange={handleDialogClose}>
+      <DialogContent
+        compact={!isMaximized}
+        data-testid="edit-feature-dialog"
+        onPointerDownOutside={(e) => {
+          const target = e.target as HTMLElement;
+          if (target.closest('[data-testid="category-autocomplete-list"]')) {
+            e.preventDefault();
+          }
+        }}
+        onInteractOutside={(e) => {
+          const target = e.target as HTMLElement;
+          if (target.closest('[data-testid="category-autocomplete-list"]')) {
+            e.preventDefault();
+          }
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>Edit Feature</DialogTitle>
+          <DialogDescription>Modify the feature details.</DialogDescription>
+        </DialogHeader>
+        <Tabs
+          defaultValue="prompt"
+          className="py-4 flex-1 min-h-0 flex flex-col"
+        >
+          <TabsList className="w-full grid grid-cols-3 mb-4">
+            <TabsTrigger value="prompt" data-testid="edit-tab-prompt">
+              <MessageSquare className="w-4 h-4 mr-2" />
+              Prompt
+            </TabsTrigger>
+            <TabsTrigger value="model" data-testid="edit-tab-model">
+              <Settings2 className="w-4 h-4 mr-2" />
+              Model
+            </TabsTrigger>
+            <TabsTrigger value="testing" data-testid="edit-tab-testing">
+              <FlaskConical className="w-4 h-4 mr-2" />
+              Testing
+            </TabsTrigger>
+          </TabsList>
+
+          {/* Prompt Tab */}
+          <TabsContent
+            value="prompt"
+            className="space-y-4 overflow-y-auto cursor-default"
+          >
+            <div className="space-y-2">
+              <Label htmlFor="edit-description">Description</Label>
+              <DescriptionImageDropZone
+                value={editingFeature.description}
+                onChange={(value) =>
+                  setEditingFeature({
+                    ...editingFeature,
+                    description: value,
+                  })
+                }
+                images={editingFeature.imagePaths ?? []}
+                onImagesChange={(images) =>
+                  setEditingFeature({
+                    ...editingFeature,
+                    imagePaths: images,
+                  })
+                }
+                placeholder="Describe the feature..."
+                previewMap={editFeaturePreviewMap}
+                onPreviewMapChange={setEditFeaturePreviewMap}
+                data-testid="edit-feature-description"
+              />
+            </div>
+            <div className="flex w-fit items-center gap-3 select-none cursor-default">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="w-[180px] justify-between"
+                  >
+                    {enhancementMode === "improve" && "Improve Clarity"}
+                    {enhancementMode === "technical" && "Add Technical Details"}
+                    {enhancementMode === "simplify" && "Simplify"}
+                    {enhancementMode === "acceptance" &&
+                      "Add Acceptance Criteria"}
+                    <ChevronDown className="w-4 h-4 ml-2" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem
+                    onClick={() => setEnhancementMode("improve")}
+                  >
+                    Improve Clarity
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => setEnhancementMode("technical")}
+                  >
+                    Add Technical Details
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => setEnhancementMode("simplify")}
+                  >
+                    Simplify
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => setEnhancementMode("acceptance")}
+                  >
+                    Add Acceptance Criteria
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleEnhanceDescription}
+                disabled={!editingFeature.description.trim() || isEnhancing}
+                loading={isEnhancing}
+              >
+                <Sparkles className="w-4 h-4 mr-2" />
+                Enhance with AI
+              </Button>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-category">Category (optional)</Label>
+              <CategoryAutocomplete
+                value={editingFeature.category}
+                onChange={(value) =>
+                  setEditingFeature({
+                    ...editingFeature,
+                    category: value,
+                  })
+                }
+                suggestions={categorySuggestions}
+                placeholder="e.g., Core, UI, API"
+                data-testid="edit-feature-category"
+              />
+            </div>
+            {useWorktrees && (
+              <div className="space-y-2">
+                <Label htmlFor="edit-branch">Target Branch</Label>
+                <BranchAutocomplete
+                  value={editingFeature.branchName ?? "main"}
+                  onChange={(value) =>
+                    setEditingFeature({
+                      ...editingFeature,
+                      branchName: value,
+                    })
+                  }
+                  branches={branchSuggestions}
+                  placeholder="Select or create branch..."
+                  data-testid="edit-feature-branch"
+                  disabled={editingFeature.status !== "backlog"}
+                />
+                {editingFeature.status !== "backlog" && (
+                  <p className="text-xs text-muted-foreground">
+                    Branch cannot be changed after work has started.
+                  </p>
+                )}
+                {editingFeature.status === "backlog" && (
+                  <p className="text-xs text-muted-foreground">
+                    Work will be done in this branch. A worktree will be created
+                    if needed.
+                  </p>
+                )}
+              </div>
+            )}
+
+            {/* Priority Selector */}
+            <PrioritySelector
+              selectedPriority={editingFeature.priority ?? 2}
+              onPrioritySelect={(priority) =>
+                setEditingFeature({
+                  ...editingFeature,
+                  priority,
+                })
+              }
+              testIdPrefix="edit-priority"
+            />
+          </TabsContent>
+
+          {/* Model Tab */}
+          <TabsContent
+            value="model"
+            className="space-y-4 overflow-y-auto cursor-default"
+          >
+            {/* Show Advanced Options Toggle */}
+            {showProfilesOnly && (
+              <div className="flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border">
+                <div className="space-y-1">
+                  <p className="text-sm font-medium text-foreground">
+                    Simple Mode Active
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    Only showing AI profiles. Advanced model tweaking is hidden.
+                  </p>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() =>
+                    setShowEditAdvancedOptions(!showEditAdvancedOptions)
+                  }
+                  data-testid="edit-show-advanced-options-toggle"
+                >
+                  <Settings2 className="w-4 h-4 mr-2" />
+                  {showEditAdvancedOptions ? "Hide" : "Show"} Advanced
+                </Button>
+              </div>
+            )}
+
+            {/* Quick Select Profile Section */}
+            <ProfileQuickSelect
+              profiles={aiProfiles}
+              selectedModel={editingFeature.model ?? "opus"}
+              selectedThinkingLevel={editingFeature.thinkingLevel ?? "none"}
+              onSelect={handleProfileSelect}
+              testIdPrefix="edit-profile-quick-select"
+            />
+
+            {/* Separator */}
+            {aiProfiles.length > 0 &&
+              (!showProfilesOnly || showEditAdvancedOptions) && (
+                <div className="border-t border-border" />
+              )}
+
+            {/* Claude Models Section */}
+            {(!showProfilesOnly || showEditAdvancedOptions) && (
+              <>
+                <ModelSelector
+                  selectedModel={(editingFeature.model ?? "opus") as AgentModel}
+                  onModelSelect={handleModelSelect}
+                  testIdPrefix="edit-model-select"
+                />
+                {editModelAllowsThinking && (
+                  <ThinkingLevelSelector
+                    selectedLevel={editingFeature.thinkingLevel ?? "none"}
+                    onLevelSelect={(level) =>
+                      setEditingFeature({
+                        ...editingFeature,
+                        thinkingLevel: level,
+                      })
+                    }
+                    testIdPrefix="edit-thinking-level"
+                  />
+                )}
+              </>
+            )}
+          </TabsContent>
+
+          {/* Testing Tab */}
+          <TabsContent
+            value="testing"
+            className="space-y-4 overflow-y-auto cursor-default"
+          >
+            <TestingTabContent
+              skipTests={editingFeature.skipTests ?? false}
+              onSkipTestsChange={(skipTests) =>
+                setEditingFeature({ ...editingFeature, skipTests })
+              }
+              steps={editingFeature.steps}
+              onStepsChange={(steps) =>
+                setEditingFeature({ ...editingFeature, steps })
+              }
+              testIdPrefix="edit"
+            />
+          </TabsContent>
+        </Tabs>
+        <DialogFooter className="sm:!justify-between">
+          <Button
+            variant="outline"
+            onClick={() => setShowDependencyTree(true)}
+            className="gap-2 h-10"
+          >
+            <GitBranch className="w-4 h-4" />
+            View Dependency Tree
+          </Button>
+          <div className="flex gap-2">
+            <Button variant="ghost" onClick={onClose}>
+              Cancel
+            </Button>
+            <HotkeyButton
+              onClick={handleUpdate}
+              hotkey={{ key: "Enter", cmdCtrl: true }}
+              hotkeyActive={!!editingFeature}
+              data-testid="confirm-edit-feature"
+            >
+              Save Changes
+            </HotkeyButton>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+
+      <DependencyTreeDialog
+        open={showDependencyTree}
+        onClose={() => setShowDependencyTree(false)}
+        feature={editingFeature}
+        allFeatures={allFeatures}
+      />
+    </Dialog>
+  );
+}

apps/ui/src/components/views/board-view/dialogs/feature-suggestions-dialog.tsx

@@ -0,0 +1,539 @@
+
+import { useEffect, useRef, useState, useCallback } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { HotkeyButton } from "@/components/ui/hotkey-button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  Loader2,
+  Lightbulb,
+  Download,
+  StopCircle,
+  ChevronDown,
+  ChevronRight,
+  RefreshCw,
+  Shield,
+  Zap,
+} from "lucide-react";
+import { getElectronAPI, FeatureSuggestion, SuggestionsEvent, SuggestionType } from "@/lib/electron";
+import { useAppStore, Feature } from "@/store/app-store";
+import { toast } from "sonner";
+
+interface FeatureSuggestionsDialogProps {
+  open: boolean;
+  onClose: () => void;
+  projectPath: string;
+  // Props to persist state across dialog open/close
+  suggestions: FeatureSuggestion[];
+  setSuggestions: (suggestions: FeatureSuggestion[]) => void;
+  isGenerating: boolean;
+  setIsGenerating: (generating: boolean) => void;
+}
+
+// Configuration for each suggestion type
+const suggestionTypeConfig: Record<SuggestionType, {
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+  description: string;
+  color: string;
+}> = {
+  features: {
+    label: "Feature Suggestions",
+    icon: Lightbulb,
+    description: "Discover missing features and improvements",
+    color: "text-yellow-500",
+  },
+  refactoring: {
+    label: "Refactoring Suggestions",
+    icon: RefreshCw,
+    description: "Find code smells and refactoring opportunities",
+    color: "text-blue-500",
+  },
+  security: {
+    label: "Security Suggestions",
+    icon: Shield,
+    description: "Identify security vulnerabilities and issues",
+    color: "text-red-500",
+  },
+  performance: {
+    label: "Performance Suggestions",
+    icon: Zap,
+    description: "Discover performance bottlenecks and optimizations",
+    color: "text-green-500",
+  },
+};
+
+export function FeatureSuggestionsDialog({
+  open,
+  onClose,
+  projectPath,
+  suggestions,
+  setSuggestions,
+  isGenerating,
+  setIsGenerating,
+}: FeatureSuggestionsDialogProps) {
+  const [progress, setProgress] = useState<string[]>([]);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const [isImporting, setIsImporting] = useState(false);
+  const [currentSuggestionType, setCurrentSuggestionType] = useState<SuggestionType | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const autoScrollRef = useRef(true);
+
+  const { features, setFeatures } = useAppStore();
+
+  // Initialize selectedIds when suggestions change
+  useEffect(() => {
+    if (suggestions.length > 0 && selectedIds.size === 0) {
+      setSelectedIds(new Set(suggestions.map((s) => s.id)));
+    }
+  }, [suggestions, selectedIds.size]);
+
+  // Auto-scroll progress when new content arrives
+  useEffect(() => {
+    if (autoScrollRef.current && scrollRef.current && isGenerating) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [progress, isGenerating]);
+
+  // Listen for suggestion events when dialog is open
+  useEffect(() => {
+    if (!open) return;
+
+    const api = getElectronAPI();
+    if (!api?.suggestions) return;
+
+    const unsubscribe = api.suggestions.onEvent((event: SuggestionsEvent) => {
+      if (event.type === "suggestions_progress") {
+        setProgress((prev) => [...prev, event.content || ""]);
+      } else if (event.type === "suggestions_tool") {
+        const toolName = event.tool || "Unknown Tool";
+        setProgress((prev) => [...prev, `Using tool: ${toolName}\n`]);
+      } else if (event.type === "suggestions_complete") {
+        setIsGenerating(false);
+        if (event.suggestions && event.suggestions.length > 0) {
+          setSuggestions(event.suggestions);
+          // Select all by default
+          setSelectedIds(new Set(event.suggestions.map((s) => s.id)));
+          const typeLabel = currentSuggestionType ? suggestionTypeConfig[currentSuggestionType].label.toLowerCase() : "suggestions";
+          toast.success(`Generated ${event.suggestions.length} ${typeLabel}!`);
+        } else {
+          toast.info("No suggestions generated. Try again.");
+        }
+      } else if (event.type === "suggestions_error") {
+        setIsGenerating(false);
+        toast.error(`Error: ${event.error}`);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [open, setSuggestions, setIsGenerating, currentSuggestionType]);
+
+  // Start generating suggestions for a specific type
+  const handleGenerate = useCallback(async (suggestionType: SuggestionType) => {
+    const api = getElectronAPI();
+    if (!api?.suggestions) {
+      toast.error("Suggestions API not available");
+      return;
+    }
+
+    setIsGenerating(true);
+    setProgress([]);
+    setSuggestions([]);
+    setSelectedIds(new Set());
+    setCurrentSuggestionType(suggestionType);
+
+    try {
+      const result = await api.suggestions.generate(projectPath, suggestionType);
+      if (!result.success) {
+        toast.error(result.error || "Failed to start generation");
+        setIsGenerating(false);
+      }
+    } catch (error) {
+      console.error("Failed to generate suggestions:", error);
+      toast.error("Failed to start generation");
+      setIsGenerating(false);
+    }
+  }, [projectPath, setIsGenerating, setSuggestions]);
+
+  // Stop generating
+  const handleStop = useCallback(async () => {
+    const api = getElectronAPI();
+    if (!api?.suggestions) return;
+
+    try {
+      await api.suggestions.stop();
+      setIsGenerating(false);
+      toast.info("Generation stopped");
+    } catch (error) {
+      console.error("Failed to stop generation:", error);
+    }
+  }, [setIsGenerating]);
+
+  // Toggle suggestion selection
+  const toggleSelection = useCallback((id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  // Toggle expand/collapse for a suggestion
+  const toggleExpanded = useCallback((id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  // Select/deselect all
+  const toggleSelectAll = useCallback(() => {
+    if (selectedIds.size === suggestions.length) {
+      setSelectedIds(new Set());
+    } else {
+      setSelectedIds(new Set(suggestions.map((s) => s.id)));
+    }
+  }, [selectedIds.size, suggestions]);
+
+  // Import selected suggestions as features
+  const handleImport = useCallback(async () => {
+    if (selectedIds.size === 0) {
+      toast.warning("No suggestions selected");
+      return;
+    }
+
+    setIsImporting(true);
+
+    try {
+      const api = getElectronAPI();
+      const selectedSuggestions = suggestions.filter((s) =>
+        selectedIds.has(s.id)
+      );
+
+      // Create new features from selected suggestions
+      const newFeatures: Feature[] = selectedSuggestions.map((s) => ({
+        id: `feature-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        category: s.category,
+        description: s.description,
+        steps: s.steps,
+        status: "backlog" as const,
+        skipTests: true, // As specified, testing mode true
+        priority: s.priority, // Preserve priority from suggestion
+      }));
+
+      // Create each new feature using the features API
+      if (api.features) {
+        for (const feature of newFeatures) {
+          await api.features.create(projectPath, feature);
+        }
+      }
+
+      // Merge with existing features for store update
+      const updatedFeatures = [...features, ...newFeatures];
+
+      // Update store
+      setFeatures(updatedFeatures);
+
+      toast.success(`Imported ${newFeatures.length} features to backlog!`);
+
+      // Clear suggestions after importing
+      setSuggestions([]);
+      setSelectedIds(new Set());
+      setProgress([]);
+      setCurrentSuggestionType(null);
+
+      onClose();
+    } catch (error) {
+      console.error("Failed to import features:", error);
+      toast.error("Failed to import features");
+    } finally {
+      setIsImporting(false);
+    }
+  }, [selectedIds, suggestions, features, setFeatures, setSuggestions, projectPath, onClose]);
+
+  // Handle scroll to detect if user scrolled up
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
+    autoScrollRef.current = isAtBottom;
+  };
+
+  // Go back to type selection
+  const handleBackToSelection = useCallback(() => {
+    setSuggestions([]);
+    setSelectedIds(new Set());
+    setProgress([]);
+    setCurrentSuggestionType(null);
+  }, [setSuggestions]);
+
+  const hasStarted = progress.length > 0 || suggestions.length > 0;
+  const hasSuggestions = suggestions.length > 0;
+  const currentConfig = currentSuggestionType ? suggestionTypeConfig[currentSuggestionType] : null;
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent
+        className="w-[70vw] max-w-[70vw] max-h-[85vh] flex flex-col"
+        data-testid="feature-suggestions-dialog"
+      >
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle className="flex items-center gap-2">
+            {currentConfig ? (
+              <>
+                <currentConfig.icon className={`w-5 h-5 ${currentConfig.color}`} />
+                {currentConfig.label}
+              </>
+            ) : (
+              <>
+                <Lightbulb className="w-5 h-5 text-yellow-500" />
+                AI Suggestions
+              </>
+            )}
+          </DialogTitle>
+          <DialogDescription>
+            {currentConfig
+              ? currentConfig.description
+              : "Analyze your project to discover improvements. Choose a suggestion type below."}
+          </DialogDescription>
+        </DialogHeader>
+
+        {!hasStarted ? (
+          // Initial state - show suggestion type buttons
+          <div className="flex-1 flex flex-col items-center justify-center py-8">
+            <p className="text-muted-foreground text-center max-w-lg mb-8">
+              Our AI will analyze your project and generate actionable suggestions.
+              Choose what type of analysis you want to perform:
+            </p>
+            <div className="grid grid-cols-2 gap-4 w-full max-w-2xl">
+              {(Object.entries(suggestionTypeConfig) as [SuggestionType, typeof suggestionTypeConfig[SuggestionType]][]).map(
+                ([type, config]) => {
+                  const Icon = config.icon;
+                  return (
+                    <Button
+                      key={type}
+                      variant="outline"
+                      className="h-auto py-6 px-6 flex flex-col items-center gap-3 hover:border-primary/50 transition-colors"
+                      onClick={() => handleGenerate(type)}
+                      data-testid={`generate-${type}-btn`}
+                    >
+                      <Icon className={`w-8 h-8 ${config.color}`} />
+                      <div className="text-center">
+                        <div className="font-semibold">{config.label.replace(" Suggestions", "")}</div>
+                        <div className="text-xs text-muted-foreground mt-1">
+                          {config.description}
+                        </div>
+                      </div>
+                    </Button>
+                  );
+                }
+              )}
+            </div>
+          </div>
+        ) : isGenerating ? (
+          // Generating state - show progress
+          <div className="flex-1 flex flex-col min-h-0">
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                Analyzing project...
+              </div>
+              <Button variant="destructive" size="sm" onClick={handleStop}>
+                <StopCircle className="w-4 h-4 mr-2" />
+                Stop
+              </Button>
+            </div>
+            <div
+              ref={scrollRef}
+              onScroll={handleScroll}
+              className="flex-1 overflow-y-auto bg-zinc-950 rounded-lg p-4 font-mono text-xs min-h-[200px] max-h-[400px]"
+            >
+              <div className="whitespace-pre-wrap break-words text-zinc-300">
+                {progress.join("")}
+              </div>
+            </div>
+          </div>
+        ) : hasSuggestions ? (
+          // Results state - show suggestions list
+          <div className="flex-1 flex flex-col min-h-0">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-4">
+                <span className="text-sm text-muted-foreground">
+                  {suggestions.length} suggestions generated
+                </span>
+                <Button variant="ghost" size="sm" onClick={toggleSelectAll}>
+                  {selectedIds.size === suggestions.length
+                    ? "Deselect All"
+                    : "Select All"}
+                </Button>
+              </div>
+              <span className="text-sm font-medium">
+                {selectedIds.size} selected
+              </span>
+            </div>
+
+            <div
+              ref={scrollRef}
+              className="flex-1 overflow-y-auto space-y-2 min-h-[200px] max-h-[400px] pr-2"
+            >
+              {suggestions.map((suggestion) => {
+                const isSelected = selectedIds.has(suggestion.id);
+                const isExpanded = expandedIds.has(suggestion.id);
+
+                return (
+                  <div
+                    key={suggestion.id}
+                    className={`border rounded-lg p-3 transition-colors ${
+                      isSelected
+                        ? "border-primary bg-primary/5"
+                        : "border-border hover:border-primary/50"
+                    }`}
+                    data-testid={`suggestion-${suggestion.id}`}
+                  >
+                    <div className="flex items-start gap-3">
+                      <Checkbox
+                        id={suggestion.id}
+                        checked={isSelected}
+                        onCheckedChange={() => toggleSelection(suggestion.id)}
+                        className="mt-1"
+                      />
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                          <button
+                            onClick={() => toggleExpanded(suggestion.id)}
+                            className="flex items-center gap-1 text-muted-foreground hover:text-foreground"
+                          >
+                            {isExpanded ? (
+                              <ChevronDown className="w-4 h-4" />
+                            ) : (
+                              <ChevronRight className="w-4 h-4" />
+                            )}
+                          </button>
+                          <span className="text-xs px-2 py-0.5 rounded-full bg-primary/20 text-primary font-medium">
+                            #{suggestion.priority}
+                          </span>
+                          <span className="text-xs px-2 py-0.5 rounded-full bg-secondary text-secondary-foreground">
+                            {suggestion.category}
+                          </span>
+                        </div>
+                        <Label
+                          htmlFor={suggestion.id}
+                          className="text-sm font-medium cursor-pointer"
+                        >
+                          {suggestion.description}
+                        </Label>
+
+                        {isExpanded && (
+                          <div className="mt-3 space-y-2 text-sm">
+                            {suggestion.reasoning && (
+                              <p className="text-muted-foreground italic">
+                                {suggestion.reasoning}
+                              </p>
+                            )}
+                            {suggestion.steps.length > 0 && (
+                              <div>
+                                <p className="text-xs font-medium text-muted-foreground mb-1">
+                                  Implementation Steps:
+                                </p>
+                                <ul className="list-disc list-inside text-xs text-muted-foreground space-y-0.5">
+                                  {suggestion.steps.map((step, i) => (
+                                    <li key={i}>{step}</li>
+                                  ))}
+                                </ul>
+                              </div>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ) : (
+          // No results state
+          <div className="flex-1 flex flex-col items-center justify-center py-8 text-center">
+            <p className="text-muted-foreground mb-4">
+              No suggestions were generated. Try running the analysis again.
+            </p>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={handleBackToSelection}>
+                Back to Selection
+              </Button>
+              {currentSuggestionType && (
+                <Button onClick={() => handleGenerate(currentSuggestionType)}>
+                  <Lightbulb className="w-4 h-4 mr-2" />
+                  Try Again
+                </Button>
+              )}
+            </div>
+          </div>
+        )}
+
+        <DialogFooter className="flex-shrink-0">
+          {hasSuggestions && (
+            <div className="flex gap-2 w-full justify-between">
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={handleBackToSelection}>
+                  Back
+                </Button>
+                {currentSuggestionType && (
+                  <Button variant="outline" onClick={() => handleGenerate(currentSuggestionType)}>
+                    {currentConfig && <currentConfig.icon className="w-4 h-4 mr-2" />}
+                    Regenerate
+                  </Button>
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button variant="ghost" onClick={onClose}>
+                  Cancel
+                </Button>
+                <HotkeyButton
+                  onClick={handleImport}
+                  disabled={selectedIds.size === 0 || isImporting}
+                  hotkey={{ key: "Enter", cmdCtrl: true }}
+                  hotkeyActive={open && hasSuggestions}
+                >
+                  {isImporting ? (
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  ) : (
+                    <Download className="w-4 h-4 mr-2" />
+                  )}
+                  Import {selectedIds.size} Feature
+                  {selectedIds.size !== 1 ? "s" : ""}
+                </HotkeyButton>
+              </div>
+            </div>
+          )}
+          {!hasSuggestions && !isGenerating && hasStarted && (
+            <Button variant="ghost" onClick={onClose}>
+              Close
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/ui/src/components/views/board-view/dialogs/follow-up-dialog.tsx

@@ -0,0 +1,120 @@
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { HotkeyButton } from "@/components/ui/hotkey-button";
+import {
+  DescriptionImageDropZone,
+  FeatureImagePath as DescriptionImagePath,
+  ImagePreviewMap,
+} from "@/components/ui/description-image-dropzone";
+import { MessageSquare } from "lucide-react";
+import { Feature } from "@/store/app-store";
+
+interface FollowUpDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  feature: Feature | null;
+  prompt: string;
+  imagePaths: DescriptionImagePath[];
+  previewMap: ImagePreviewMap;
+  onPromptChange: (prompt: string) => void;
+  onImagePathsChange: (paths: DescriptionImagePath[]) => void;
+  onPreviewMapChange: (map: ImagePreviewMap) => void;
+  onSend: () => void;
+  isMaximized: boolean;
+}
+
+export function FollowUpDialog({
+  open,
+  onOpenChange,
+  feature,
+  prompt,
+  imagePaths,
+  previewMap,
+  onPromptChange,
+  onImagePathsChange,
+  onPreviewMapChange,
+  onSend,
+  isMaximized,
+}: FollowUpDialogProps) {
+  const handleClose = (open: boolean) => {
+    if (!open) {
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent
+        compact={!isMaximized}
+        data-testid="follow-up-dialog"
+        onKeyDown={(e) => {
+          if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && prompt.trim()) {
+            e.preventDefault();
+            onSend();
+          }
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>Follow-Up Prompt</DialogTitle>
+          <DialogDescription>
+            Send additional instructions to continue working on this feature.
+            {feature && (
+              <span className="block mt-2 text-primary">
+                Feature: {feature.description.slice(0, 100)}
+                {feature.description.length > 100 ? "..." : ""}
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4 overflow-y-auto flex-1 min-h-0">
+          <div className="space-y-2">
+            <Label htmlFor="follow-up-prompt">Instructions</Label>
+            <DescriptionImageDropZone
+              value={prompt}
+              onChange={onPromptChange}
+              images={imagePaths}
+              onImagesChange={onImagePathsChange}
+              placeholder="Describe what needs to be fixed or changed..."
+              previewMap={previewMap}
+              onPreviewMapChange={onPreviewMapChange}
+            />
+          </div>
+          <p className="text-xs text-muted-foreground">
+            The agent will continue from where it left off, using the existing
+            context. You can attach screenshots to help explain the issue.
+          </p>
+        </div>
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => {
+              onOpenChange(false);
+            }}
+          >
+            Cancel
+          </Button>
+          <HotkeyButton
+            onClick={onSend}
+            disabled={!prompt.trim()}
+            hotkey={{ key: "Enter", cmdCtrl: true }}
+            hotkeyActive={open}
+            data-testid="confirm-follow-up"
+          >
+            <MessageSquare className="w-4 h-4 mr-2" />
+            Send Follow-Up
+          </HotkeyButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/ui/src/components/views/board-view/dialogs/index.ts

@@ -0,0 +1,8 @@
+export { AddFeatureDialog } from "./add-feature-dialog";
+export { AgentOutputModal } from "./agent-output-modal";
+export { CompletedFeaturesModal } from "./completed-features-modal";
+export { DeleteAllVerifiedDialog } from "./delete-all-verified-dialog";
+export { DeleteCompletedFeatureDialog } from "./delete-completed-feature-dialog";
+export { EditFeatureDialog } from "./edit-feature-dialog";
+export { FeatureSuggestionsDialog } from "./feature-suggestions-dialog";
+export { FollowUpDialog } from "./follow-up-dialog";

apps/ui/src/components/views/board-view/hooks/index.ts

@@ -0,0 +1,10 @@
+export { useBoardFeatures } from "./use-board-features";
+export { useBoardDragDrop } from "./use-board-drag-drop";
+export { useBoardActions } from "./use-board-actions";
+export { useBoardKeyboardShortcuts } from "./use-board-keyboard-shortcuts";
+export { useBoardColumnFeatures } from "./use-board-column-features";
+export { useBoardEffects } from "./use-board-effects";
+export { useBoardBackground } from "./use-board-background";
+export { useBoardPersistence } from "./use-board-persistence";
+export { useFollowUpState } from "./use-follow-up-state";
+export { useSuggestionsState } from "./use-suggestions-state";

apps/ui/src/components/views/board-view/hooks/use-board-actions.ts

@@ -0,0 +1,878 @@
+import { useCallback } from "react";
+import {
+  Feature,
+  FeatureImage,
+  AgentModel,
+  ThinkingLevel,
+  useAppStore,
+} from "@/store/app-store";
+import { FeatureImagePath as DescriptionImagePath } from "@/components/ui/description-image-dropzone";
+import { getElectronAPI } from "@/lib/electron";
+import { toast } from "sonner";
+import { useAutoMode } from "@/hooks/use-auto-mode";
+import { truncateDescription } from "@/lib/utils";
+
+interface UseBoardActionsProps {
+  currentProject: { path: string; id: string } | null;
+  features: Feature[];
+  runningAutoTasks: string[];
+  loadFeatures: () => Promise<void>;
+  persistFeatureCreate: (feature: Feature) => Promise<void>;
+  persistFeatureUpdate: (
+    featureId: string,
+    updates: Partial<Feature>
+  ) => Promise<void>;
+  persistFeatureDelete: (featureId: string) => Promise<void>;
+  saveCategory: (category: string) => Promise<void>;
+  setEditingFeature: (feature: Feature | null) => void;
+  setShowOutputModal: (show: boolean) => void;
+  setOutputFeature: (feature: Feature | null) => void;
+  followUpFeature: Feature | null;
+  followUpPrompt: string;
+  followUpImagePaths: DescriptionImagePath[];
+  setFollowUpFeature: (feature: Feature | null) => void;
+  setFollowUpPrompt: (prompt: string) => void;
+  setFollowUpImagePaths: (paths: DescriptionImagePath[]) => void;
+  setFollowUpPreviewMap: (map: Map<string, string>) => void;
+  setShowFollowUpDialog: (show: boolean) => void;
+  inProgressFeaturesForShortcuts: Feature[];
+  outputFeature: Feature | null;
+  projectPath: string | null;
+  onWorktreeCreated?: () => void;
+  currentWorktreeBranch: string | null; // Branch name of the selected worktree for filtering
+}
+
+export function useBoardActions({
+  currentProject,
+  features,
+  runningAutoTasks,
+  loadFeatures,
+  persistFeatureCreate,
+  persistFeatureUpdate,
+  persistFeatureDelete,
+  saveCategory,
+  setEditingFeature,
+  setShowOutputModal,
+  setOutputFeature,
+  followUpFeature,
+  followUpPrompt,
+  followUpImagePaths,
+  setFollowUpFeature,
+  setFollowUpPrompt,
+  setFollowUpImagePaths,
+  setFollowUpPreviewMap,
+  setShowFollowUpDialog,
+  inProgressFeaturesForShortcuts,
+  outputFeature,
+  projectPath,
+  onWorktreeCreated,
+  currentWorktreeBranch,
+}: UseBoardActionsProps) {
+  const {
+    addFeature,
+    updateFeature,
+    removeFeature,
+    moveFeature,
+    useWorktrees,
+  } = useAppStore();
+  const autoMode = useAutoMode();
+
+  /**
+   * Get or create the worktree path for a feature based on its branchName.
+   * - If branchName is "main" or empty, returns the project path
+   * - Otherwise, creates a worktree for that branch if needed
+   */
+  const getOrCreateWorktreeForFeature = useCallback(
+    async (feature: Feature): Promise<string | null> => {
+      if (!projectPath) return null;
+
+      const branchName = feature.branchName || "main";
+
+      // If targeting main branch, use the project path directly
+      if (branchName === "main" || branchName === "master") {
+        return projectPath;
+      }
+
+      // For other branches, create a worktree if it doesn't exist
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.create) {
+          console.error("[BoardActions] Worktree API not available");
+          return projectPath;
+        }
+
+        // Try to create the worktree (will return existing if already exists)
+        const result = await api.worktree.create(projectPath, branchName);
+
+        if (result.success && result.worktree) {
+          console.log(
+            `[BoardActions] Worktree ready for branch "${branchName}": ${result.worktree.path}`
+          );
+          if (result.worktree.isNew) {
+            toast.success(`Worktree created for branch "${branchName}"`, {
+              description: "A new worktree was created for this feature.",
+            });
+          }
+          return result.worktree.path;
+        } else {
+          console.error(
+            "[BoardActions] Failed to create worktree:",
+            result.error
+          );
+          toast.error("Failed to create worktree", {
+            description:
+              result.error || "Could not create worktree for this branch.",
+          });
+          return projectPath; // Fall back to project path
+        }
+      } catch (error) {
+        console.error("[BoardActions] Error creating worktree:", error);
+        toast.error("Error creating worktree", {
+          description: error instanceof Error ? error.message : "Unknown error",
+        });
+        return projectPath; // Fall back to project path
+      }
+    },
+    [projectPath]
+  );
+
+  const handleAddFeature = useCallback(
+    async (featureData: {
+      category: string;
+      description: string;
+      steps: string[];
+      images: FeatureImage[];
+      imagePaths: DescriptionImagePath[];
+      skipTests: boolean;
+      model: AgentModel;
+      thinkingLevel: ThinkingLevel;
+      branchName: string;
+      priority: number;
+    }) => {
+      let worktreePath: string | undefined;
+
+      // If worktrees are enabled and a non-main branch is selected, create the worktree
+      if (useWorktrees && featureData.branchName) {
+        const branchName = featureData.branchName;
+        if (branchName !== "main" && branchName !== "master") {
+          // Create a temporary feature-like object for getOrCreateWorktreeForFeature
+          const tempFeature = { branchName } as Feature;
+          const path = await getOrCreateWorktreeForFeature(tempFeature);
+          if (path && path !== projectPath) {
+            worktreePath = path;
+            // Refresh worktree selector after creating worktree
+            onWorktreeCreated?.();
+          }
+        }
+      }
+
+      const newFeatureData = {
+        ...featureData,
+        status: "backlog" as const,
+        worktreePath,
+      };
+      const createdFeature = addFeature(newFeatureData);
+      // Must await to ensure feature exists on server before user can drag it
+      await persistFeatureCreate(createdFeature);
+      saveCategory(featureData.category);
+    },
+    [addFeature, persistFeatureCreate, saveCategory, useWorktrees, getOrCreateWorktreeForFeature, projectPath, onWorktreeCreated]
+  );
+
+  const handleUpdateFeature = useCallback(
+    async (
+      featureId: string,
+      updates: {
+        category: string;
+        description: string;
+        steps: string[];
+        skipTests: boolean;
+        model: AgentModel;
+        thinkingLevel: ThinkingLevel;
+        imagePaths: DescriptionImagePath[];
+        branchName: string;
+        priority: number;
+      }
+    ) => {
+      // Get the current feature to check if branch is changing
+      const currentFeature = features.find((f) => f.id === featureId);
+      const currentBranch = currentFeature?.branchName || "main";
+      const newBranch = updates.branchName || "main";
+      const branchIsChanging = currentBranch !== newBranch;
+
+      let worktreePath: string | undefined;
+      let shouldClearWorktreePath = false;
+
+      // If worktrees are enabled and branch is changing to a non-main branch, create worktree
+      if (useWorktrees && branchIsChanging) {
+        if (newBranch === "main" || newBranch === "master") {
+          // Changing to main - clear the worktreePath
+          shouldClearWorktreePath = true;
+        } else {
+          // Changing to a feature branch - create worktree if needed
+          const tempFeature = { branchName: newBranch } as Feature;
+          const path = await getOrCreateWorktreeForFeature(tempFeature);
+          if (path && path !== projectPath) {
+            worktreePath = path;
+            // Refresh worktree selector after creating worktree
+            onWorktreeCreated?.();
+          }
+        }
+      }
+
+      // Build final updates with worktreePath if it was changed
+      let finalUpdates: typeof updates & { worktreePath?: string };
+      if (branchIsChanging && useWorktrees) {
+        if (shouldClearWorktreePath) {
+          // Use null to clear the value in persistence (cast to work around type system)
+          finalUpdates = { ...updates, worktreePath: null as unknown as string | undefined };
+        } else {
+          finalUpdates = { ...updates, worktreePath };
+        }
+      } else {
+        finalUpdates = updates;
+      }
+
+      updateFeature(featureId, finalUpdates);
+      persistFeatureUpdate(featureId, finalUpdates);
+      if (updates.category) {
+        saveCategory(updates.category);
+      }
+      setEditingFeature(null);
+    },
+    [updateFeature, persistFeatureUpdate, saveCategory, setEditingFeature, features, useWorktrees, getOrCreateWorktreeForFeature, projectPath, onWorktreeCreated]
+  );
+
+  const handleDeleteFeature = useCallback(
+    async (featureId: string) => {
+      const feature = features.find((f) => f.id === featureId);
+      if (!feature) return;
+
+      const isRunning = runningAutoTasks.includes(featureId);
+
+      if (isRunning) {
+        try {
+          await autoMode.stopFeature(featureId);
+          toast.success("Agent stopped", {
+            description: `Stopped and deleted: ${truncateDescription(
+              feature.description
+            )}`,
+          });
+        } catch (error) {
+          console.error("[Board] Error stopping feature before delete:", error);
+          toast.error("Failed to stop agent", {
+            description: "The feature will still be deleted.",
+          });
+        }
+      }
+
+      if (feature.imagePaths && feature.imagePaths.length > 0) {
+        try {
+          const api = getElectronAPI();
+          for (const imagePathObj of feature.imagePaths) {
+            try {
+              await api.deleteFile(imagePathObj.path);
+              console.log(`[Board] Deleted image: ${imagePathObj.path}`);
+            } catch (error) {
+              console.error(
+                `[Board] Failed to delete image ${imagePathObj.path}:`,
+                error
+              );
+            }
+          }
+        } catch (error) {
+          console.error(
+            `[Board] Error deleting images for feature ${featureId}:`,
+            error
+          );
+        }
+      }
+
+      removeFeature(featureId);
+      persistFeatureDelete(featureId);
+    },
+    [features, runningAutoTasks, autoMode, removeFeature, persistFeatureDelete]
+  );
+
+  const handleRunFeature = useCallback(
+    async (feature: Feature) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.autoMode) {
+          console.error("Auto mode API not available");
+          return;
+        }
+
+        // Use the feature's assigned worktreePath (set when moving to in_progress)
+        // This ensures work happens in the correct worktree based on the feature's branchName
+        const featureWorktreePath = feature.worktreePath;
+
+        const result = await api.autoMode.runFeature(
+          currentProject.path,
+          feature.id,
+          useWorktrees,
+          featureWorktreePath || undefined
+        );
+
+        if (result.success) {
+          console.log(
+            "[Board] Feature run started successfully in worktree:",
+            featureWorktreePath || "main"
+          );
+        } else {
+          console.error("[Board] Failed to run feature:", result.error);
+          await loadFeatures();
+        }
+      } catch (error) {
+        console.error("[Board] Error running feature:", error);
+        await loadFeatures();
+      }
+    },
+    [currentProject, useWorktrees, loadFeatures]
+  );
+
+  const handleStartImplementation = useCallback(
+    async (feature: Feature) => {
+      if (!autoMode.canStartNewTask) {
+        toast.error("Concurrency limit reached", {
+          description: `You can only have ${autoMode.maxConcurrency} task${
+            autoMode.maxConcurrency > 1 ? "s" : ""
+          } running at a time. Wait for a task to complete or increase the limit.`,
+        });
+        return false;
+      }
+
+      const updates = {
+        status: "in_progress" as const,
+        startedAt: new Date().toISOString(),
+      };
+      updateFeature(feature.id, updates);
+      // Must await to ensure feature status is persisted before starting agent
+      await persistFeatureUpdate(feature.id, updates);
+      console.log("[Board] Feature moved to in_progress, starting agent...");
+      await handleRunFeature(feature);
+      return true;
+    },
+    [autoMode, updateFeature, persistFeatureUpdate, handleRunFeature]
+  );
+
+  const handleVerifyFeature = useCallback(
+    async (feature: Feature) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.autoMode) {
+          console.error("Auto mode API not available");
+          return;
+        }
+
+        const result = await api.autoMode.verifyFeature(
+          currentProject.path,
+          feature.id
+        );
+
+        if (result.success) {
+          console.log("[Board] Feature verification started successfully");
+        } else {
+          console.error("[Board] Failed to verify feature:", result.error);
+          await loadFeatures();
+        }
+      } catch (error) {
+        console.error("[Board] Error verifying feature:", error);
+        await loadFeatures();
+      }
+    },
+    [currentProject, loadFeatures]
+  );
+
+  const handleResumeFeature = useCallback(
+    async (feature: Feature) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.autoMode) {
+          console.error("Auto mode API not available");
+          return;
+        }
+
+        const result = await api.autoMode.resumeFeature(
+          currentProject.path,
+          feature.id,
+          useWorktrees
+        );
+
+        if (result.success) {
+          console.log("[Board] Feature resume started successfully");
+        } else {
+          console.error("[Board] Failed to resume feature:", result.error);
+          await loadFeatures();
+        }
+      } catch (error) {
+        console.error("[Board] Error resuming feature:", error);
+        await loadFeatures();
+      }
+    },
+    [currentProject, loadFeatures, useWorktrees]
+  );
+
+  const handleManualVerify = useCallback(
+    (feature: Feature) => {
+      moveFeature(feature.id, "verified");
+      persistFeatureUpdate(feature.id, {
+        status: "verified",
+        justFinishedAt: undefined,
+      });
+      toast.success("Feature verified", {
+        description: `Marked as verified: ${truncateDescription(
+          feature.description
+        )}`,
+      });
+    },
+    [moveFeature, persistFeatureUpdate]
+  );
+
+  const handleMoveBackToInProgress = useCallback(
+    (feature: Feature) => {
+      const updates = {
+        status: "in_progress" as const,
+        startedAt: new Date().toISOString(),
+      };
+      updateFeature(feature.id, updates);
+      persistFeatureUpdate(feature.id, updates);
+      toast.info("Feature moved back", {
+        description: `Moved back to In Progress: ${truncateDescription(
+          feature.description
+        )}`,
+      });
+    },
+    [updateFeature, persistFeatureUpdate]
+  );
+
+  const handleOpenFollowUp = useCallback(
+    (feature: Feature) => {
+      setFollowUpFeature(feature);
+      setFollowUpPrompt("");
+      setFollowUpImagePaths([]);
+      setShowFollowUpDialog(true);
+    },
+    [
+      setFollowUpFeature,
+      setFollowUpPrompt,
+      setFollowUpImagePaths,
+      setShowFollowUpDialog,
+    ]
+  );
+
+  const handleSendFollowUp = useCallback(async () => {
+    if (!currentProject || !followUpFeature || !followUpPrompt.trim()) return;
+
+    const featureId = followUpFeature.id;
+    const featureDescription = followUpFeature.description;
+    const prompt = followUpPrompt;
+
+    const api = getElectronAPI();
+    if (!api?.autoMode?.followUpFeature) {
+      console.error("Follow-up feature API not available");
+      toast.error("Follow-up not available", {
+        description: "This feature is not available in the current version.",
+      });
+      return;
+    }
+
+    const updates = {
+      status: "in_progress" as const,
+      startedAt: new Date().toISOString(),
+      justFinishedAt: undefined,
+    };
+    updateFeature(featureId, updates);
+    persistFeatureUpdate(featureId, updates);
+
+    setShowFollowUpDialog(false);
+    setFollowUpFeature(null);
+    setFollowUpPrompt("");
+    setFollowUpImagePaths([]);
+    setFollowUpPreviewMap(new Map());
+
+    toast.success("Follow-up started", {
+      description: `Continuing work on: ${truncateDescription(
+        featureDescription
+      )}`,
+    });
+
+    const imagePaths = followUpImagePaths.map((img) => img.path);
+    // Use the feature's worktreePath to ensure work happens in the correct branch
+    const featureWorktreePath = followUpFeature.worktreePath;
+    api.autoMode
+      .followUpFeature(
+        currentProject.path,
+        followUpFeature.id,
+        followUpPrompt,
+        imagePaths,
+        featureWorktreePath
+      )
+      .catch((error) => {
+        console.error("[Board] Error sending follow-up:", error);
+        toast.error("Failed to send follow-up", {
+          description:
+            error instanceof Error ? error.message : "An error occurred",
+        });
+        loadFeatures();
+      });
+  }, [
+    currentProject,
+    followUpFeature,
+    followUpPrompt,
+    followUpImagePaths,
+    updateFeature,
+    persistFeatureUpdate,
+    setShowFollowUpDialog,
+    setFollowUpFeature,
+    setFollowUpPrompt,
+    setFollowUpImagePaths,
+    setFollowUpPreviewMap,
+    loadFeatures,
+  ]);
+
+  const handleCommitFeature = useCallback(
+    async (feature: Feature) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.autoMode?.commitFeature) {
+          console.error("Commit feature API not available");
+          toast.error("Commit not available", {
+            description:
+              "This feature is not available in the current version.",
+          });
+          return;
+        }
+
+        // Pass the feature's worktreePath to ensure commits happen in the correct worktree
+        const result = await api.autoMode.commitFeature(
+          currentProject.path,
+          feature.id,
+          feature.worktreePath
+        );
+
+        if (result.success) {
+          moveFeature(feature.id, "verified");
+          persistFeatureUpdate(feature.id, { status: "verified" });
+          toast.success("Feature committed", {
+            description: `Committed and verified: ${truncateDescription(
+              feature.description
+            )}`,
+          });
+          // Refresh worktree selector to update commit counts
+          onWorktreeCreated?.();
+        } else {
+          console.error("[Board] Failed to commit feature:", result.error);
+          toast.error("Failed to commit feature", {
+            description: result.error || "An error occurred",
+          });
+          await loadFeatures();
+        }
+      } catch (error) {
+        console.error("[Board] Error committing feature:", error);
+        toast.error("Failed to commit feature", {
+          description:
+            error instanceof Error ? error.message : "An error occurred",
+        });
+        await loadFeatures();
+      }
+    },
+    [
+      currentProject,
+      moveFeature,
+      persistFeatureUpdate,
+      loadFeatures,
+      onWorktreeCreated,
+    ]
+  );
+
+  const handleMergeFeature = useCallback(
+    async (feature: Feature) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.mergeFeature) {
+          console.error("Worktree API not available");
+          toast.error("Merge not available", {
+            description:
+              "This feature is not available in the current version.",
+          });
+          return;
+        }
+
+        const result = await api.worktree.mergeFeature(
+          currentProject.path,
+          feature.id
+        );
+
+        if (result.success) {
+          await loadFeatures();
+          toast.success("Feature merged", {
+            description: `Changes merged to main branch: ${truncateDescription(
+              feature.description
+            )}`,
+          });
+        } else {
+          console.error("[Board] Failed to merge feature:", result.error);
+          toast.error("Failed to merge feature", {
+            description: result.error || "An error occurred",
+          });
+        }
+      } catch (error) {
+        console.error("[Board] Error merging feature:", error);
+        toast.error("Failed to merge feature", {
+          description:
+            error instanceof Error ? error.message : "An error occurred",
+        });
+      }
+    },
+    [currentProject, loadFeatures]
+  );
+
+  const handleCompleteFeature = useCallback(
+    (feature: Feature) => {
+      const updates = {
+        status: "completed" as const,
+      };
+      updateFeature(feature.id, updates);
+      persistFeatureUpdate(feature.id, updates);
+
+      toast.success("Feature completed", {
+        description: `Archived: ${truncateDescription(feature.description)}`,
+      });
+    },
+    [updateFeature, persistFeatureUpdate]
+  );
+
+  const handleUnarchiveFeature = useCallback(
+    (feature: Feature) => {
+      const updates = {
+        status: "verified" as const,
+      };
+      updateFeature(feature.id, updates);
+      persistFeatureUpdate(feature.id, updates);
+
+      toast.success("Feature restored", {
+        description: `Moved back to verified: ${truncateDescription(
+          feature.description
+        )}`,
+      });
+    },
+    [updateFeature, persistFeatureUpdate]
+  );
+
+  const handleViewOutput = useCallback(
+    (feature: Feature) => {
+      setOutputFeature(feature);
+      setShowOutputModal(true);
+    },
+    [setOutputFeature, setShowOutputModal]
+  );
+
+  const handleOutputModalNumberKeyPress = useCallback(
+    (key: string) => {
+      const index = key === "0" ? 9 : parseInt(key, 10) - 1;
+      const targetFeature = inProgressFeaturesForShortcuts[index];
+
+      if (!targetFeature) {
+        return;
+      }
+
+      if (targetFeature.id === outputFeature?.id) {
+        setShowOutputModal(false);
+      } else {
+        setOutputFeature(targetFeature);
+      }
+    },
+    [
+      inProgressFeaturesForShortcuts,
+      outputFeature?.id,
+      setShowOutputModal,
+      setOutputFeature,
+    ]
+  );
+
+  const handleForceStopFeature = useCallback(
+    async (feature: Feature) => {
+      try {
+        await autoMode.stopFeature(feature.id);
+
+        const targetStatus =
+          feature.skipTests && feature.status === "waiting_approval"
+            ? "waiting_approval"
+            : "backlog";
+
+        if (targetStatus !== feature.status) {
+          moveFeature(feature.id, targetStatus);
+          // Must await to ensure file is written before user can restart
+          await persistFeatureUpdate(feature.id, { status: targetStatus });
+        }
+
+        toast.success("Agent stopped", {
+          description:
+            targetStatus === "waiting_approval"
+              ? `Stopped commit - returned to waiting approval: ${truncateDescription(
+                  feature.description
+                )}`
+              : `Stopped working on: ${truncateDescription(
+                  feature.description
+                )}`,
+        });
+      } catch (error) {
+        console.error("[Board] Error stopping feature:", error);
+        toast.error("Failed to stop agent", {
+          description:
+            error instanceof Error ? error.message : "An error occurred",
+        });
+      }
+    },
+    [autoMode, moveFeature, persistFeatureUpdate]
+  );
+
+  const handleStartNextFeatures = useCallback(async () => {
+    // Filter backlog features by the currently selected worktree branch
+    // This ensures "G" only starts features from the filtered list
+    const backlogFeatures = features.filter((f) => {
+      if (f.status !== "backlog") return false;
+
+      // Determine the feature's branch (default to "main" if not set)
+      const featureBranch = f.branchName || "main";
+
+      // If no worktree is selected (currentWorktreeBranch is null or main-like),
+      // show features with no branch or "main"/"master" branch
+      if (
+        !currentWorktreeBranch ||
+        currentWorktreeBranch === "main" ||
+        currentWorktreeBranch === "master"
+      ) {
+        return (
+          !f.branchName ||
+          featureBranch === "main" ||
+          featureBranch === "master"
+        );
+      }
+
+      // Otherwise, only show features matching the selected worktree branch
+      return featureBranch === currentWorktreeBranch;
+    });
+
+    const availableSlots =
+      useAppStore.getState().maxConcurrency - runningAutoTasks.length;
+
+    if (availableSlots <= 0) {
+      toast.error("Concurrency limit reached", {
+        description:
+          "Wait for a task to complete or increase the concurrency limit.",
+      });
+      return;
+    }
+
+    if (backlogFeatures.length === 0) {
+      toast.info("Backlog empty", {
+        description:
+          currentWorktreeBranch &&
+          currentWorktreeBranch !== "main" &&
+          currentWorktreeBranch !== "master"
+            ? `No features in backlog for branch "${currentWorktreeBranch}".`
+            : "No features in backlog to start.",
+      });
+      return;
+    }
+
+    // Sort by priority (lower number = higher priority, priority 1 is highest)
+    // This matches the auto mode service behavior for consistency
+    const sortedBacklog = [...backlogFeatures].sort(
+      (a, b) => (a.priority || 999) - (b.priority || 999)
+    );
+
+    // Start only one feature per keypress (user must press again for next)
+    const featuresToStart = sortedBacklog.slice(0, 1);
+
+    for (const feature of featuresToStart) {
+      // Only create worktrees if the feature is enabled
+      let worktreePath: string | null = null;
+      if (useWorktrees) {
+        // Get or create worktree based on the feature's assigned branch (same as drag-to-in-progress)
+        worktreePath = await getOrCreateWorktreeForFeature(feature);
+        if (worktreePath) {
+          await persistFeatureUpdate(feature.id, { worktreePath });
+        }
+        // Refresh worktree selector after creating worktree
+        onWorktreeCreated?.();
+      }
+      // Start the implementation
+      // Pass feature with worktreePath so handleRunFeature uses the correct path
+      await handleStartImplementation({
+        ...feature,
+        worktreePath: worktreePath || undefined,
+      });
+    }
+  }, [
+    features,
+    runningAutoTasks,
+    handleStartImplementation,
+    getOrCreateWorktreeForFeature,
+    persistFeatureUpdate,
+    onWorktreeCreated,
+    currentWorktreeBranch,
+    useWorktrees,
+  ]);
+
+  const handleDeleteAllVerified = useCallback(async () => {
+    const verifiedFeatures = features.filter((f) => f.status === "verified");
+
+    for (const feature of verifiedFeatures) {
+      const isRunning = runningAutoTasks.includes(feature.id);
+      if (isRunning) {
+        try {
+          await autoMode.stopFeature(feature.id);
+        } catch (error) {
+          console.error("[Board] Error stopping feature before delete:", error);
+        }
+      }
+      removeFeature(feature.id);
+      persistFeatureDelete(feature.id);
+    }
+
+    toast.success("All verified features deleted", {
+      description: `Deleted ${verifiedFeatures.length} feature(s).`,
+    });
+  }, [
+    features,
+    runningAutoTasks,
+    autoMode,
+    removeFeature,
+    persistFeatureDelete,
+  ]);
+
+  return {
+    handleAddFeature,
+    handleUpdateFeature,
+    handleDeleteFeature,
+    handleStartImplementation,
+    handleVerifyFeature,
+    handleResumeFeature,
+    handleManualVerify,
+    handleMoveBackToInProgress,
+    handleOpenFollowUp,
+    handleSendFollowUp,
+    handleCommitFeature,
+    handleMergeFeature,
+    handleCompleteFeature,
+    handleUnarchiveFeature,
+    handleViewOutput,
+    handleOutputModalNumberKeyPress,
+    handleForceStopFeature,
+    handleStartNextFeatures,
+    handleDeleteAllVerified,
+  };
+}

apps/ui/src/components/views/board-view/hooks/use-board-background.ts

@@ -0,0 +1,47 @@
+import { useMemo } from "react";
+import { useAppStore, defaultBackgroundSettings } from "@/store/app-store";
+
+interface UseBoardBackgroundProps {
+  currentProject: { path: string; id: string } | null;
+}
+
+export function useBoardBackground({ currentProject }: UseBoardBackgroundProps) {
+  const boardBackgroundByProject = useAppStore(
+    (state) => state.boardBackgroundByProject
+  );
+
+  // Get background settings for current project
+  const backgroundSettings = useMemo(() => {
+    return (
+      (currentProject && boardBackgroundByProject[currentProject.path]) ||
+      defaultBackgroundSettings
+    );
+  }, [currentProject, boardBackgroundByProject]);
+
+  // Build background image style if image exists
+  const backgroundImageStyle = useMemo(() => {
+    if (!backgroundSettings.imagePath || !currentProject) {
+      return {};
+    }
+
+    return {
+      backgroundImage: `url(${
+        import.meta.env.VITE_SERVER_URL || "http://localhost:3008"
+      }/api/fs/image?path=${encodeURIComponent(
+        backgroundSettings.imagePath
+      )}&projectPath=${encodeURIComponent(currentProject.path)}${
+        backgroundSettings.imageVersion
+          ? `&v=${backgroundSettings.imageVersion}`
+          : ""
+      })`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat",
+    } as React.CSSProperties;
+  }, [backgroundSettings, currentProject]);
+
+  return {
+    backgroundSettings,
+    backgroundImageStyle,
+  };
+}

apps/ui/src/components/views/board-view/hooks/use-board-column-features.ts

@@ -0,0 +1,135 @@
+import { useMemo, useCallback } from "react";
+import { Feature } from "@/store/app-store";
+import { pathsEqual } from "@/lib/utils";
+
+type ColumnId = Feature["status"];
+
+interface UseBoardColumnFeaturesProps {
+  features: Feature[];
+  runningAutoTasks: string[];
+  searchQuery: string;
+  currentWorktreePath: string | null; // Currently selected worktree path
+  currentWorktreeBranch: string | null; // Branch name of the selected worktree (null = main)
+  projectPath: string | null; // Main project path (for main worktree)
+}
+
+export function useBoardColumnFeatures({
+  features,
+  runningAutoTasks,
+  searchQuery,
+  currentWorktreePath,
+  currentWorktreeBranch,
+  projectPath,
+}: UseBoardColumnFeaturesProps) {
+  // Memoize column features to prevent unnecessary re-renders
+  const columnFeaturesMap = useMemo(() => {
+    const map: Record<ColumnId, Feature[]> = {
+      backlog: [],
+      in_progress: [],
+      waiting_approval: [],
+      verified: [],
+      completed: [], // Completed features are shown in the archive modal, not as a column
+    };
+
+    // Filter features by search query (case-insensitive)
+    const normalizedQuery = searchQuery.toLowerCase().trim();
+    const filteredFeatures = normalizedQuery
+      ? features.filter(
+          (f) =>
+            f.description.toLowerCase().includes(normalizedQuery) ||
+            f.category?.toLowerCase().includes(normalizedQuery)
+        )
+      : features;
+
+    // Determine the effective worktree path and branch for filtering
+    // If currentWorktreePath is null, we're on the main worktree
+    const effectiveWorktreePath = currentWorktreePath || projectPath;
+    // Use the branch name from the selected worktree
+    // If we're selecting main (currentWorktreePath is null), currentWorktreeBranch
+    // should contain the main branch's actual name, defaulting to "main"
+    // If we're selecting a non-main worktree but can't find it, currentWorktreeBranch is null
+    // In that case, we can't do branch-based filtering, so we'll handle it specially below
+    const effectiveBranch = currentWorktreeBranch;
+
+    filteredFeatures.forEach((f) => {
+      // If feature has a running agent, always show it in "in_progress"
+      const isRunning = runningAutoTasks.includes(f.id);
+
+      // Check if feature matches the current worktree
+      // Match by worktreePath if set, OR by branchName if set
+      // Features with neither are considered unassigned (show on ALL worktrees)
+      const featureBranch = f.branchName || "main";
+      const hasWorktreeAssigned = f.worktreePath || f.branchName;
+
+      let matchesWorktree: boolean;
+      if (!hasWorktreeAssigned) {
+        // No worktree or branch assigned - show on ALL worktrees (unassigned)
+        matchesWorktree = true;
+      } else if (f.worktreePath) {
+        // Has worktreePath - match by path (use pathsEqual for cross-platform compatibility)
+        matchesWorktree = pathsEqual(f.worktreePath, effectiveWorktreePath);
+      } else if (effectiveBranch === null) {
+        // We're viewing main but branch hasn't been initialized yet
+        // (worktrees disabled or haven't loaded yet).
+        // Show features assigned to main/master branch since we're on the main worktree.
+        matchesWorktree = featureBranch === "main" || featureBranch === "master";
+      } else {
+        // Has branchName but no worktreePath - match by branch name
+        matchesWorktree = featureBranch === effectiveBranch;
+      }
+
+      if (isRunning) {
+        // Only show running tasks if they match the current worktree
+        if (matchesWorktree) {
+          map.in_progress.push(f);
+        }
+      } else {
+        // Otherwise, use the feature's status (fallback to backlog for unknown statuses)
+        const status = f.status as ColumnId;
+
+        // Filter all items by worktree, including backlog
+        // This ensures backlog items with a branch assigned only show in that branch
+        if (status === "backlog") {
+          if (matchesWorktree) {
+            map.backlog.push(f);
+          }
+        } else if (map[status]) {
+          // Only show if matches current worktree or has no worktree assigned
+          if (matchesWorktree) {
+            map[status].push(f);
+          }
+        } else {
+          // Unknown status, default to backlog
+          map.backlog.push(f);
+        }
+      }
+    });
+
+    // Sort backlog by priority: 1 (high) -> 2 (medium) -> 3 (low) -> no priority
+    map.backlog.sort((a, b) => {
+      const aPriority = a.priority ?? 999; // Features without priority go last
+      const bPriority = b.priority ?? 999;
+      return aPriority - bPriority;
+    });
+
+    return map;
+  }, [features, runningAutoTasks, searchQuery, currentWorktreePath, currentWorktreeBranch, projectPath]);
+
+  const getColumnFeatures = useCallback(
+    (columnId: ColumnId) => {
+      return columnFeaturesMap[columnId];
+    },
+    [columnFeaturesMap]
+  );
+
+  // Memoize completed features for the archive modal
+  const completedFeatures = useMemo(() => {
+    return features.filter((f) => f.status === "completed");
+  }, [features]);
+
+  return {
+    columnFeaturesMap,
+    getColumnFeatures,
+    completedFeatures,
+  };
+}

apps/ui/src/components/views/board-view/hooks/use-board-drag-drop.ts

@@ -0,0 +1,294 @@
+import { useState, useCallback } from "react";
+import { DragStartEvent, DragEndEvent } from "@dnd-kit/core";
+import { Feature } from "@/store/app-store";
+import { useAppStore } from "@/store/app-store";
+import { toast } from "sonner";
+import { COLUMNS, ColumnId } from "../constants";
+import { getElectronAPI } from "@/lib/electron";
+
+interface UseBoardDragDropProps {
+  features: Feature[];
+  currentProject: { path: string; id: string } | null;
+  runningAutoTasks: string[];
+  persistFeatureUpdate: (
+    featureId: string,
+    updates: Partial<Feature>
+  ) => Promise<void>;
+  handleStartImplementation: (feature: Feature) => Promise<boolean>;
+  projectPath: string | null; // Main project path
+  onWorktreeCreated?: () => void; // Callback when a new worktree is created
+}
+
+export function useBoardDragDrop({
+  features,
+  currentProject,
+  runningAutoTasks,
+  persistFeatureUpdate,
+  handleStartImplementation,
+  projectPath,
+  onWorktreeCreated,
+}: UseBoardDragDropProps) {
+  const [activeFeature, setActiveFeature] = useState<Feature | null>(null);
+  const { moveFeature, useWorktrees } = useAppStore();
+
+  /**
+   * Get or create the worktree path for a feature based on its branchName.
+   * - If branchName is "main" or empty, returns the project path
+   * - Otherwise, creates a worktree for that branch if needed
+   */
+  const getOrCreateWorktreeForFeature = useCallback(
+    async (feature: Feature): Promise<string | null> => {
+      if (!projectPath) return null;
+
+      const branchName = feature.branchName || "main";
+
+      // If targeting main branch, use the project path directly
+      if (branchName === "main" || branchName === "master") {
+        return projectPath;
+      }
+
+      // For other branches, create a worktree if it doesn't exist
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.create) {
+          console.error("[DragDrop] Worktree API not available");
+          return projectPath;
+        }
+
+        // Try to create the worktree (will return existing if already exists)
+        const result = await api.worktree.create(projectPath, branchName);
+
+        if (result.success && result.worktree) {
+          console.log(
+            `[DragDrop] Worktree ready for branch "${branchName}": ${result.worktree.path}`
+          );
+          if (result.worktree.isNew) {
+            toast.success(`Worktree created for branch "${branchName}"`, {
+              description: "A new worktree was created for this feature.",
+            });
+          }
+          return result.worktree.path;
+        } else {
+          console.error("[DragDrop] Failed to create worktree:", result.error);
+          toast.error("Failed to create worktree", {
+            description: result.error || "Could not create worktree for this branch.",
+          });
+          return projectPath; // Fall back to project path
+        }
+      } catch (error) {
+        console.error("[DragDrop] Error creating worktree:", error);
+        toast.error("Error creating worktree", {
+          description: error instanceof Error ? error.message : "Unknown error",
+        });
+        return projectPath; // Fall back to project path
+      }
+    },
+    [projectPath]
+  );
+
+  const handleDragStart = useCallback(
+    (event: DragStartEvent) => {
+      const { active } = event;
+      const feature = features.find((f) => f.id === active.id);
+      if (feature) {
+        setActiveFeature(feature);
+      }
+    },
+    [features]
+  );
+
+  const handleDragEnd = useCallback(
+    async (event: DragEndEvent) => {
+      const { active, over } = event;
+      setActiveFeature(null);
+
+      if (!over) return;
+
+      const featureId = active.id as string;
+      const overId = over.id as string;
+
+      // Find the feature being dragged
+      const draggedFeature = features.find((f) => f.id === featureId);
+      if (!draggedFeature) return;
+
+      // Check if this is a running task (non-skipTests, TDD)
+      const isRunningTask = runningAutoTasks.includes(featureId);
+
+      // Determine if dragging is allowed based on status and skipTests
+      // - Backlog items can always be dragged
+      // - waiting_approval items can always be dragged (to allow manual verification via drag)
+      // - verified items can always be dragged (to allow moving back to waiting_approval)
+      // - skipTests (non-TDD) items can be dragged between in_progress and verified
+      // - Non-skipTests (TDD) items that are in progress cannot be dragged (they are running)
+      if (
+        draggedFeature.status !== "backlog" &&
+        draggedFeature.status !== "waiting_approval" &&
+        draggedFeature.status !== "verified"
+      ) {
+        // Only allow dragging in_progress if it's a skipTests feature and not currently running
+        if (!draggedFeature.skipTests || isRunningTask) {
+          console.log(
+            "[Board] Cannot drag feature - TDD feature or currently running"
+          );
+          return;
+        }
+      }
+
+      let targetStatus: ColumnId | null = null;
+
+      // Check if we dropped on a column
+      const column = COLUMNS.find((c) => c.id === overId);
+      if (column) {
+        targetStatus = column.id;
+      } else {
+        // Dropped on another feature - find its column
+        const overFeature = features.find((f) => f.id === overId);
+        if (overFeature) {
+          targetStatus = overFeature.status;
+        }
+      }
+
+      if (!targetStatus) return;
+
+      // Same column, nothing to do
+      if (targetStatus === draggedFeature.status) return;
+
+      // Handle different drag scenarios
+      if (draggedFeature.status === "backlog") {
+        // From backlog
+        if (targetStatus === "in_progress") {
+          // Only create worktrees if the feature is enabled
+          let worktreePath: string | null = null;
+          if (useWorktrees) {
+            // Get or create worktree based on the feature's assigned branch
+            worktreePath = await getOrCreateWorktreeForFeature(draggedFeature);
+            if (worktreePath) {
+              await persistFeatureUpdate(featureId, { worktreePath });
+            }
+            // Refresh worktree selector after moving to in_progress
+            onWorktreeCreated?.();
+          }
+          // Use helper function to handle concurrency check and start implementation
+          // Pass feature with worktreePath so handleRunFeature uses the correct path
+          await handleStartImplementation({ ...draggedFeature, worktreePath: worktreePath || undefined });
+        } else {
+          moveFeature(featureId, targetStatus);
+          persistFeatureUpdate(featureId, { status: targetStatus });
+        }
+      } else if (draggedFeature.status === "waiting_approval") {
+        // waiting_approval features can be dragged to verified for manual verification
+        // NOTE: This check must come BEFORE skipTests check because waiting_approval
+        // features often have skipTests=true, and we want status-based handling first
+        if (targetStatus === "verified") {
+          moveFeature(featureId, "verified");
+          // 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,
+              50
+            )}${draggedFeature.description.length > 50 ? "..." : ""}`,
+          });
+        } else if (targetStatus === "backlog") {
+          // Allow moving waiting_approval cards back to backlog
+          moveFeature(featureId, "backlog");
+          // Clear justFinishedAt timestamp and worktreePath when moving back to backlog
+          persistFeatureUpdate(featureId, {
+            status: "backlog",
+            justFinishedAt: undefined,
+            worktreePath: undefined,
+          });
+          toast.info("Feature moved to backlog", {
+            description: `Moved to Backlog: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? "..." : ""}`,
+          });
+        }
+      } else if (draggedFeature.skipTests) {
+        // skipTests feature being moved between in_progress and verified
+        if (
+          targetStatus === "verified" &&
+          draggedFeature.status === "in_progress"
+        ) {
+          // Manual verify via drag
+          moveFeature(featureId, "verified");
+          persistFeatureUpdate(featureId, { status: "verified" });
+          toast.success("Feature verified", {
+            description: `Marked as verified: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? "..." : ""}`,
+          });
+        } else if (
+          targetStatus === "waiting_approval" &&
+          draggedFeature.status === "verified"
+        ) {
+          // Move verified feature back to waiting_approval
+          moveFeature(featureId, "waiting_approval");
+          persistFeatureUpdate(featureId, { status: "waiting_approval" });
+          toast.info("Feature moved back", {
+            description: `Moved back to Waiting Approval: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? "..." : ""}`,
+          });
+        } else if (targetStatus === "backlog") {
+          // Allow moving skipTests cards back to backlog
+          moveFeature(featureId, "backlog");
+          // Clear worktreePath when moving back to backlog
+          persistFeatureUpdate(featureId, { status: "backlog", worktreePath: undefined });
+          toast.info("Feature moved to backlog", {
+            description: `Moved to Backlog: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? "..." : ""}`,
+          });
+        }
+      } else if (draggedFeature.status === "verified") {
+        // Handle verified TDD (non-skipTests) features being moved back
+        if (targetStatus === "waiting_approval") {
+          // Move verified feature back to waiting_approval
+          moveFeature(featureId, "waiting_approval");
+          persistFeatureUpdate(featureId, { status: "waiting_approval" });
+          toast.info("Feature moved back", {
+            description: `Moved back to Waiting Approval: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? "..." : ""}`,
+          });
+        } else if (targetStatus === "backlog") {
+          // Allow moving verified cards back to backlog
+          moveFeature(featureId, "backlog");
+          // Clear worktreePath when moving back to backlog
+          persistFeatureUpdate(featureId, { status: "backlog", worktreePath: undefined });
+          toast.info("Feature moved to backlog", {
+            description: `Moved to Backlog: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? "..." : ""}`,
+          });
+        }
+      }
+    },
+    [
+      features,
+      runningAutoTasks,
+      moveFeature,
+      persistFeatureUpdate,
+      handleStartImplementation,
+      getOrCreateWorktreeForFeature,
+      onWorktreeCreated,
+      useWorktrees,
+    ]
+  );
+
+  return {
+    activeFeature,
+    handleDragStart,
+    handleDragEnd,
+  };
+}

apps/ui/src/components/views/board-view/hooks/use-board-effects.ts

@@ -0,0 +1,166 @@
+import { useEffect, useRef } from "react";
+import { getElectronAPI } from "@/lib/electron";
+import { useAppStore } from "@/store/app-store";
+import { useAutoMode } from "@/hooks/use-auto-mode";
+
+interface UseBoardEffectsProps {
+  currentProject: { path: string; id: string } | null;
+  specCreatingForProject: string | null;
+  setSpecCreatingForProject: (path: string | null) => void;
+  setSuggestionsCount: (count: number) => void;
+  setFeatureSuggestions: (suggestions: any[]) => void;
+  setIsGeneratingSuggestions: (generating: boolean) => void;
+  checkContextExists: (featureId: string) => Promise<boolean>;
+  features: any[];
+  isLoading: boolean;
+  setFeaturesWithContext: (set: Set<string>) => void;
+}
+
+export function useBoardEffects({
+  currentProject,
+  specCreatingForProject,
+  setSpecCreatingForProject,
+  setSuggestionsCount,
+  setFeatureSuggestions,
+  setIsGeneratingSuggestions,
+  checkContextExists,
+  features,
+  isLoading,
+  setFeaturesWithContext,
+}: UseBoardEffectsProps) {
+  const autoMode = useAutoMode();
+
+  // Make current project available globally for modal
+  useEffect(() => {
+    if (currentProject) {
+      (window as any).__currentProject = currentProject;
+    }
+    return () => {
+      (window as any).__currentProject = null;
+    };
+  }, [currentProject]);
+
+  // Listen for suggestions events to update count (persists even when dialog is closed)
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.suggestions) return;
+
+    const unsubscribe = api.suggestions.onEvent((event) => {
+      if (event.type === "suggestions_complete" && event.suggestions) {
+        setSuggestionsCount(event.suggestions.length);
+        setFeatureSuggestions(event.suggestions);
+        setIsGeneratingSuggestions(false);
+      } else if (event.type === "suggestions_error") {
+        setIsGeneratingSuggestions(false);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [setSuggestionsCount, setFeatureSuggestions, setIsGeneratingSuggestions]);
+
+  // Subscribe to spec regeneration events to clear creating state on completion
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api.specRegeneration) return;
+
+    const unsubscribe = api.specRegeneration.onEvent((event) => {
+      console.log(
+        "[BoardView] Spec regeneration event:",
+        event.type,
+        "for project:",
+        event.projectPath
+      );
+
+      if (event.projectPath !== specCreatingForProject) {
+        return;
+      }
+
+      if (event.type === "spec_regeneration_complete") {
+        setSpecCreatingForProject(null);
+      } else if (event.type === "spec_regeneration_error") {
+        setSpecCreatingForProject(null);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [specCreatingForProject, setSpecCreatingForProject]);
+
+  // Sync running tasks from electron backend on mount
+  useEffect(() => {
+    if (!currentProject) return;
+
+    const syncRunningTasks = async () => {
+      try {
+        const api = getElectronAPI();
+        if (!api?.autoMode?.status) return;
+
+        const status = await api.autoMode.status(currentProject.path);
+        if (status.success) {
+          const projectId = currentProject.id;
+          const { clearRunningTasks, addRunningTask, setAutoModeRunning } =
+            useAppStore.getState();
+
+          if (status.runningFeatures) {
+            console.log(
+              "[Board] Syncing running tasks from backend:",
+              status.runningFeatures
+            );
+
+            clearRunningTasks(projectId);
+
+            status.runningFeatures.forEach((featureId: string) => {
+              addRunningTask(projectId, featureId);
+            });
+          }
+
+          const isAutoModeRunning =
+            status.autoLoopRunning ?? status.isRunning ?? false;
+          console.log(
+            "[Board] Syncing auto mode running state:",
+            isAutoModeRunning
+          );
+          setAutoModeRunning(projectId, isAutoModeRunning);
+        }
+      } catch (error) {
+        console.error("[Board] Failed to sync running tasks:", error);
+      }
+    };
+
+    syncRunningTasks();
+  }, [currentProject]);
+
+  // Check which features have context files
+  useEffect(() => {
+    const checkAllContexts = async () => {
+      const featuresWithPotentialContext = features.filter(
+        (f) =>
+          f.status === "in_progress" ||
+          f.status === "waiting_approval" ||
+          f.status === "verified"
+      );
+      const contextChecks = await Promise.all(
+        featuresWithPotentialContext.map(async (f) => ({
+          id: f.id,
+          hasContext: await checkContextExists(f.id),
+        }))
+      );
+
+      const newSet = new Set<string>();
+      contextChecks.forEach(({ id, hasContext }) => {
+        if (hasContext) {
+          newSet.add(id);
+        }
+      });
+
+      setFeaturesWithContext(newSet);
+    };
+
+    if (features.length > 0 && !isLoading) {
+      checkAllContexts();
+    }
+  }, [features, isLoading, checkContextExists, setFeaturesWithContext]);
+}

apps/ui/src/components/views/board-view/hooks/use-board-features.ts

@@ -0,0 +1,268 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import { useAppStore, Feature } from "@/store/app-store";
+import { getElectronAPI } from "@/lib/electron";
+import { toast } from "sonner";
+
+interface UseBoardFeaturesProps {
+  currentProject: { path: string; id: string } | null;
+}
+
+export function useBoardFeatures({ currentProject }: UseBoardFeaturesProps) {
+  const { features, setFeatures } = useAppStore();
+  const [isLoading, setIsLoading] = useState(true);
+  const [persistedCategories, setPersistedCategories] = useState<string[]>([]);
+
+  // Track previous project path to detect project switches
+  const prevProjectPathRef = useRef<string | null>(null);
+  const isInitialLoadRef = useRef(true);
+  const isSwitchingProjectRef = useRef(false);
+
+  // Load features using features API
+  // IMPORTANT: Do NOT add 'features' to dependency array - it would cause infinite reload loop
+  const loadFeatures = useCallback(async () => {
+    if (!currentProject) return;
+
+    const currentPath = currentProject.path;
+    const previousPath = prevProjectPathRef.current;
+    const isProjectSwitch =
+      previousPath !== null && currentPath !== previousPath;
+
+    // Get cached features from store (without adding to dependencies)
+    const cachedFeatures = useAppStore.getState().features;
+
+    // If project switched, mark it but don't clear features yet
+    // We'll clear after successful API load to prevent data loss
+    if (isProjectSwitch) {
+      console.log(
+        `[BoardView] Project switch detected: ${previousPath} -> ${currentPath}`
+      );
+      isSwitchingProjectRef.current = true;
+      isInitialLoadRef.current = true;
+    }
+
+    // Update the ref to track current project
+    prevProjectPathRef.current = currentPath;
+
+    // Only show loading spinner on initial load to prevent board flash during reloads
+    if (isInitialLoadRef.current) {
+      setIsLoading(true);
+    }
+
+    try {
+      const api = getElectronAPI();
+      if (!api.features) {
+        console.error("[BoardView] Features API not available");
+        // Keep cached features if API is unavailable
+        return;
+      }
+
+      const result = await api.features.getAll(currentProject.path);
+
+      if (result.success && result.features) {
+        const featuresWithIds = result.features.map(
+          (f: any, index: number) => ({
+            ...f,
+            id: f.id || `feature-${index}-${Date.now()}`,
+            status: f.status || "backlog",
+            startedAt: f.startedAt, // Preserve startedAt timestamp
+            // Ensure model and thinkingLevel are set for backward compatibility
+            model: f.model || "opus",
+            thinkingLevel: f.thinkingLevel || "none",
+          })
+        );
+        // Successfully loaded features - now safe to set them
+        setFeatures(featuresWithIds);
+
+        // Only clear categories on project switch AFTER successful load
+        if (isProjectSwitch) {
+          setPersistedCategories([]);
+        }
+      } else if (!result.success && result.error) {
+        console.error("[BoardView] API returned error:", result.error);
+        // If it's a new project or the error indicates no features found,
+        // that's expected - start with empty array
+        if (isProjectSwitch) {
+          setFeatures([]);
+          setPersistedCategories([]);
+        }
+        // Otherwise keep cached features
+      }
+    } catch (error) {
+      console.error("Failed to load features:", error);
+      // On error, keep existing cached features for the current project
+      // Only clear on project switch if we have no features from server
+      if (isProjectSwitch && cachedFeatures.length === 0) {
+        setFeatures([]);
+        setPersistedCategories([]);
+      }
+    } finally {
+      setIsLoading(false);
+      isInitialLoadRef.current = false;
+      isSwitchingProjectRef.current = false;
+    }
+  }, [currentProject, setFeatures]);
+
+  // Load persisted categories from file
+  const loadCategories = useCallback(async () => {
+    if (!currentProject) return;
+
+    try {
+      const api = getElectronAPI();
+      const result = await api.readFile(
+        `${currentProject.path}/.automaker/categories.json`
+      );
+
+      if (result.success && result.content) {
+        const parsed = JSON.parse(result.content);
+        if (Array.isArray(parsed)) {
+          setPersistedCategories(parsed);
+        }
+      } else {
+        // File doesn't exist, ensure categories are cleared
+        setPersistedCategories([]);
+      }
+    } catch (error) {
+      console.error("Failed to load categories:", error);
+      // If file doesn't exist, ensure categories are cleared
+      setPersistedCategories([]);
+    }
+  }, [currentProject]);
+
+  // Save a new category to the persisted categories file
+  const saveCategory = useCallback(
+    async (category: string) => {
+      if (!currentProject || !category.trim()) return;
+
+      try {
+        const api = getElectronAPI();
+
+        // Read existing categories
+        let categories: string[] = [...persistedCategories];
+
+        // Add new category if it doesn't exist
+        if (!categories.includes(category)) {
+          categories.push(category);
+          categories.sort(); // Keep sorted
+
+          // Write back to file
+          await api.writeFile(
+            `${currentProject.path}/.automaker/categories.json`,
+            JSON.stringify(categories, null, 2)
+          );
+
+          // Update state
+          setPersistedCategories(categories);
+        }
+      } catch (error) {
+        console.error("Failed to save category:", error);
+      }
+    },
+    [currentProject, persistedCategories]
+  );
+
+  // Subscribe to spec regeneration complete events to refresh kanban board
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api.specRegeneration) return;
+
+    const unsubscribe = api.specRegeneration.onEvent((event) => {
+      // Refresh the kanban board when spec regeneration completes for the current project
+      if (
+        event.type === "spec_regeneration_complete" &&
+        currentProject &&
+        event.projectPath === currentProject.path
+      ) {
+        console.log(
+          "[BoardView] Spec regeneration complete, refreshing features"
+        );
+        loadFeatures();
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [currentProject, loadFeatures]);
+
+  // Listen for auto mode feature completion and errors to reload features
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.autoMode || !currentProject) return;
+
+    const { removeRunningTask } = useAppStore.getState();
+    const projectId = currentProject.id;
+
+    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;
+
+      if (event.type === "auto_mode_feature_complete") {
+        // Reload features when a feature is completed
+        console.log("[Board] Feature completed, reloading features...");
+        loadFeatures();
+        // Play ding sound when feature is done (unless muted)
+        const { muteDoneSound } = useAppStore.getState();
+        if (!muteDoneSound) {
+          const audio = new Audio("/sounds/ding.mp3");
+          audio
+            .play()
+            .catch((err) => console.warn("Could not play ding sound:", err));
+        }
+      } else if (event.type === "auto_mode_error") {
+        // Reload features when an error occurs (feature moved to waiting_approval)
+        console.log(
+          "[Board] Feature error, reloading features...",
+          event.error
+        );
+
+        // Remove from running tasks so it moves to the correct column
+        if (event.featureId) {
+          removeRunningTask(eventProjectId, event.featureId);
+        }
+
+        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")));
+
+        if (isAuthError) {
+          toast.error("Authentication Failed", {
+            description:
+              "Your API key is invalid or expired. Please check Settings or run 'claude login' in terminal.",
+            duration: 10000,
+          });
+        } else {
+          toast.error("Agent encountered an error", {
+            description: event.error || "Check the logs for details",
+          });
+        }
+      }
+    });
+
+    return unsubscribe;
+  }, [loadFeatures, currentProject]);
+
+  useEffect(() => {
+    loadFeatures();
+  }, [loadFeatures]);
+
+  // Load persisted categories on mount
+  useEffect(() => {
+    loadCategories();
+  }, [loadCategories]);
+
+  return {
+    features,
+    isLoading,
+    persistedCategories,
+    loadFeatures,
+    loadCategories,
+    saveCategory,
+  };
+}

apps/ui/src/components/views/board-view/hooks/use-board-keyboard-shortcuts.ts

@@ -0,0 +1,78 @@
+import { useMemo, useRef, useEffect } from "react";
+import {
+  useKeyboardShortcuts,
+  useKeyboardShortcutsConfig,
+  KeyboardShortcut,
+} from "@/hooks/use-keyboard-shortcuts";
+import { Feature } from "@/store/app-store";
+
+interface UseBoardKeyboardShortcutsProps {
+  features: Feature[];
+  runningAutoTasks: string[];
+  onAddFeature: () => void;
+  onStartNextFeatures: () => void;
+  onViewOutput: (feature: Feature) => void;
+}
+
+export function useBoardKeyboardShortcuts({
+  features,
+  runningAutoTasks,
+  onAddFeature,
+  onStartNextFeatures,
+  onViewOutput,
+}: UseBoardKeyboardShortcutsProps) {
+  const shortcuts = useKeyboardShortcutsConfig();
+
+  // Get in-progress features for keyboard shortcuts (memoized for shortcuts)
+  const inProgressFeaturesForShortcuts = useMemo(() => {
+    return features.filter((f) => {
+      const isRunning = runningAutoTasks.includes(f.id);
+      return isRunning || f.status === "in_progress";
+    });
+  }, [features, runningAutoTasks]);
+
+  // Ref to hold the start next callback (to avoid dependency issues)
+  const startNextFeaturesRef = useRef<() => void>(() => {});
+
+  // Update ref when callback changes
+  useEffect(() => {
+    startNextFeaturesRef.current = onStartNextFeatures;
+  }, [onStartNextFeatures]);
+
+  // Keyboard shortcuts for this view
+  const boardShortcuts: KeyboardShortcut[] = useMemo(() => {
+    const shortcutsList: KeyboardShortcut[] = [
+      {
+        key: shortcuts.addFeature,
+        action: onAddFeature,
+        description: "Add new feature",
+      },
+      {
+        key: shortcuts.startNext,
+        action: () => startNextFeaturesRef.current(),
+        description: "Start next features from backlog",
+      },
+    ];
+
+    // Add shortcuts for in-progress cards (1-9 and 0 for 10th)
+    inProgressFeaturesForShortcuts.slice(0, 10).forEach((feature, index) => {
+      // Keys 1-9 for first 9 cards, 0 for 10th card
+      const key = index === 9 ? "0" : String(index + 1);
+      shortcutsList.push({
+        key,
+        action: () => {
+          onViewOutput(feature);
+        },
+        description: `View output for in-progress card ${index + 1}`,
+      });
+    });
+
+    return shortcutsList;
+  }, [inProgressFeaturesForShortcuts, shortcuts, onAddFeature, onViewOutput]);
+
+  useKeyboardShortcuts(boardShortcuts);
+
+  return {
+    inProgressFeaturesForShortcuts,
+  };
+}

apps/ui/src/components/views/board-view/hooks/use-board-persistence.ts

@@ -0,0 +1,90 @@
+import { useCallback } from "react";
+import { Feature } from "@/store/app-store";
+import { getElectronAPI } from "@/lib/electron";
+import { useAppStore } from "@/store/app-store";
+
+interface UseBoardPersistenceProps {
+  currentProject: { path: string; id: string } | null;
+}
+
+export function useBoardPersistence({
+  currentProject,
+}: UseBoardPersistenceProps) {
+  const { updateFeature } = useAppStore();
+
+  // Persist feature update to API (replaces saveFeatures)
+  const persistFeatureUpdate = useCallback(
+    async (featureId: string, updates: Partial<Feature>) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api.features) {
+          console.error("[BoardView] Features API not available");
+          return;
+        }
+
+        const result = await api.features.update(
+          currentProject.path,
+          featureId,
+          updates
+        );
+        if (result.success && result.feature) {
+          updateFeature(result.feature.id, result.feature);
+        }
+      } catch (error) {
+        console.error("Failed to persist feature update:", error);
+      }
+    },
+    [currentProject, updateFeature]
+  );
+
+  // Persist feature creation to API
+  const persistFeatureCreate = useCallback(
+    async (feature: Feature) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api.features) {
+          console.error("[BoardView] Features API not available");
+          return;
+        }
+
+        const result = await api.features.create(currentProject.path, feature);
+        if (result.success && result.feature) {
+          updateFeature(result.feature.id, result.feature);
+        }
+      } catch (error) {
+        console.error("Failed to persist feature creation:", error);
+      }
+    },
+    [currentProject, updateFeature]
+  );
+
+  // Persist feature deletion to API
+  const persistFeatureDelete = useCallback(
+    async (featureId: string) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api.features) {
+          console.error("[BoardView] Features API not available");
+          return;
+        }
+
+        await api.features.delete(currentProject.path, featureId);
+      } catch (error) {
+        console.error("Failed to persist feature deletion:", error);
+      }
+    },
+    [currentProject]
+  );
+
+  return {
+    persistFeatureCreate,
+    persistFeatureUpdate,
+    persistFeatureDelete,
+  };
+}

apps/ui/src/components/views/board-view/hooks/use-follow-up-state.ts

@@ -0,0 +1,48 @@
+import { useState, useCallback } from "react";
+import { Feature } from "@/store/app-store";
+import {
+  FeatureImagePath as DescriptionImagePath,
+  ImagePreviewMap,
+} from "@/components/ui/description-image-dropzone";
+
+export function useFollowUpState() {
+  const [showFollowUpDialog, setShowFollowUpDialog] = useState(false);
+  const [followUpFeature, setFollowUpFeature] = useState<Feature | null>(null);
+  const [followUpPrompt, setFollowUpPrompt] = useState("");
+  const [followUpImagePaths, setFollowUpImagePaths] = useState<DescriptionImagePath[]>([]);
+  const [followUpPreviewMap, setFollowUpPreviewMap] = useState<ImagePreviewMap>(() => new Map());
+
+  const resetFollowUpState = useCallback(() => {
+    setShowFollowUpDialog(false);
+    setFollowUpFeature(null);
+    setFollowUpPrompt("");
+    setFollowUpImagePaths([]);
+    setFollowUpPreviewMap(new Map());
+  }, []);
+
+  const handleFollowUpDialogChange = useCallback((open: boolean) => {
+    if (!open) {
+      resetFollowUpState();
+    } else {
+      setShowFollowUpDialog(open);
+    }
+  }, [resetFollowUpState]);
+
+  return {
+    // State
+    showFollowUpDialog,
+    followUpFeature,
+    followUpPrompt,
+    followUpImagePaths,
+    followUpPreviewMap,
+    // Setters
+    setShowFollowUpDialog,
+    setFollowUpFeature,
+    setFollowUpPrompt,
+    setFollowUpImagePaths,
+    setFollowUpPreviewMap,
+    // Helpers
+    resetFollowUpState,
+    handleFollowUpDialogChange,
+  };
+}

apps/ui/src/components/views/board-view/hooks/use-suggestions-state.ts

@@ -0,0 +1,34 @@
+import { useState, useCallback } from "react";
+import type { FeatureSuggestion } from "@/lib/electron";
+
+export function useSuggestionsState() {
+  const [showSuggestionsDialog, setShowSuggestionsDialog] = useState(false);
+  const [suggestionsCount, setSuggestionsCount] = useState(0);
+  const [featureSuggestions, setFeatureSuggestions] = useState<FeatureSuggestion[]>([]);
+  const [isGeneratingSuggestions, setIsGeneratingSuggestions] = useState(false);
+
+  const updateSuggestions = useCallback((suggestions: FeatureSuggestion[]) => {
+    setFeatureSuggestions(suggestions);
+    setSuggestionsCount(suggestions.length);
+  }, []);
+
+  const closeSuggestionsDialog = useCallback(() => {
+    setShowSuggestionsDialog(false);
+  }, []);
+
+  return {
+    // State
+    showSuggestionsDialog,
+    suggestionsCount,
+    featureSuggestions,
+    isGeneratingSuggestions,
+    // Setters
+    setShowSuggestionsDialog,
+    setSuggestionsCount,
+    setFeatureSuggestions,
+    setIsGeneratingSuggestions,
+    // Helpers
+    updateSuggestions,
+    closeSuggestionsDialog,
+  };
+}

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

@@ -0,0 +1,237 @@
+
+import {
+  DndContext,
+  DragOverlay,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { HotkeyButton } from "@/components/ui/hotkey-button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { KanbanColumn, KanbanCard } from "./components";
+import { Feature } from "@/store/app-store";
+import { FastForward, Lightbulb, Trash2 } from "lucide-react";
+import { useKeyboardShortcutsConfig } from "@/hooks/use-keyboard-shortcuts";
+import { COLUMNS, ColumnId } from "./constants";
+
+interface KanbanBoardProps {
+  sensors: any;
+  collisionDetectionStrategy: (args: any) => any;
+  onDragStart: (event: any) => void;
+  onDragEnd: (event: any) => void;
+  activeFeature: Feature | null;
+  getColumnFeatures: (columnId: ColumnId) => Feature[];
+  backgroundImageStyle: React.CSSProperties;
+  backgroundSettings: {
+    columnOpacity: number;
+    columnBorderEnabled: boolean;
+    hideScrollbar: boolean;
+    cardOpacity: number;
+    cardGlassmorphism: boolean;
+    cardBorderEnabled: boolean;
+    cardBorderOpacity: number;
+  };
+  onEdit: (feature: Feature) => void;
+  onDelete: (featureId: string) => void;
+  onViewOutput: (feature: Feature) => void;
+  onVerify: (feature: Feature) => void;
+  onResume: (feature: Feature) => void;
+  onForceStop: (feature: Feature) => void;
+  onManualVerify: (feature: Feature) => void;
+  onMoveBackToInProgress: (feature: Feature) => void;
+  onFollowUp: (feature: Feature) => void;
+  onCommit: (feature: Feature) => void;
+  onComplete: (feature: Feature) => void;
+  onImplement: (feature: Feature) => void;
+  featuresWithContext: Set<string>;
+  runningAutoTasks: string[];
+  shortcuts: ReturnType<typeof useKeyboardShortcutsConfig>;
+  onStartNextFeatures: () => void;
+  onShowSuggestions: () => void;
+  suggestionsCount: number;
+  onDeleteAllVerified: () => void;
+}
+
+export function KanbanBoard({
+  sensors,
+  collisionDetectionStrategy,
+  onDragStart,
+  onDragEnd,
+  activeFeature,
+  getColumnFeatures,
+  backgroundImageStyle,
+  backgroundSettings,
+  onEdit,
+  onDelete,
+  onViewOutput,
+  onVerify,
+  onResume,
+  onForceStop,
+  onManualVerify,
+  onMoveBackToInProgress,
+  onFollowUp,
+  onCommit,
+  onComplete,
+  onImplement,
+  featuresWithContext,
+  runningAutoTasks,
+  shortcuts,
+  onStartNextFeatures,
+  onShowSuggestions,
+  suggestionsCount,
+  onDeleteAllVerified,
+}: KanbanBoardProps) {
+  return (
+    <div
+      className="flex-1 overflow-x-auto px-4 pb-4 relative"
+      style={backgroundImageStyle}
+    >
+      <DndContext
+        sensors={sensors}
+        collisionDetection={collisionDetectionStrategy}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
+      >
+        <div className="flex gap-5 h-full min-w-max py-1">
+          {COLUMNS.map((column) => {
+            const columnFeatures = getColumnFeatures(column.id);
+            return (
+              <KanbanColumn
+                key={column.id}
+                id={column.id}
+                title={column.title}
+                colorClass={column.colorClass}
+                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-destructive hover:text-destructive hover:bg-destructive/10"
+                      onClick={onDeleteAllVerified}
+                      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={onShowSuggestions}
+                        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={onStartNextFeatures}
+                          hotkey={shortcuts.startNext}
+                          hotkeyActive={false}
+                          data-testid="start-next-button"
+                        >
+                          <FastForward className="w-3 h-3 mr-1" />
+                          Make
+                        </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);
+                    }
+                    return (
+                      <KanbanCard
+                        key={feature.id}
+                        feature={feature}
+                        onEdit={() => onEdit(feature)}
+                        onDelete={() => onDelete(feature.id)}
+                        onViewOutput={() => onViewOutput(feature)}
+                        onVerify={() => onVerify(feature)}
+                        onResume={() => onResume(feature)}
+                        onForceStop={() => onForceStop(feature)}
+                        onManualVerify={() => onManualVerify(feature)}
+                        onMoveBackToInProgress={() =>
+                          onMoveBackToInProgress(feature)
+                        }
+                        onFollowUp={() => onFollowUp(feature)}
+                        onCommit={() => onCommit(feature)}
+                        onComplete={() => onComplete(feature)}
+                        onImplement={() => onImplement(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
+          dropAnimation={{
+            duration: 200,
+            easing: "cubic-bezier(0.18, 0.67, 0.6, 1.22)",
+          }}
+        >
+          {activeFeature && (
+            <Card className="w-72 rotate-2 shadow-2xl shadow-black/25 border-primary/50 bg-card/95 backdrop-blur-sm transition-transform">
+              <CardHeader className="p-3">
+                <CardTitle className="text-sm font-medium line-clamp-2">
+                  {activeFeature.description}
+                </CardTitle>
+                <CardDescription className="text-xs text-muted-foreground">
+                  {activeFeature.category}
+                </CardDescription>
+              </CardHeader>
+            </Card>
+          )}
+        </DragOverlay>
+      </DndContext>
+    </div>
+  );
+}

apps/ui/src/components/views/board-view/shared/index.ts

@@ -0,0 +1,6 @@
+export * from "./model-constants";
+export * from "./model-selector";
+export * from "./thinking-level-selector";
+export * from "./profile-quick-select";
+export * from "./testing-tab-content";
+export * from "./priority-selector";

apps/ui/src/components/views/board-view/shared/model-constants.ts

@@ -0,0 +1,70 @@
+import { AgentModel, ThinkingLevel } from "@/store/app-store";
+import {
+  Brain,
+  Zap,
+  Scale,
+  Cpu,
+  Rocket,
+  Sparkles,
+} from "lucide-react";
+
+export type ModelOption = {
+  id: AgentModel;
+  label: string;
+  description: string;
+  badge?: string;
+  provider: "claude";
+};
+
+export const CLAUDE_MODELS: ModelOption[] = [
+  {
+    id: "haiku",
+    label: "Claude Haiku",
+    description: "Fast and efficient for simple tasks.",
+    badge: "Speed",
+    provider: "claude",
+  },
+  {
+    id: "sonnet",
+    label: "Claude Sonnet",
+    description: "Balanced performance with strong reasoning.",
+    badge: "Balanced",
+    provider: "claude",
+  },
+  {
+    id: "opus",
+    label: "Claude Opus",
+    description: "Most capable model for complex work.",
+    badge: "Premium",
+    provider: "claude",
+  },
+];
+
+export const THINKING_LEVELS: ThinkingLevel[] = [
+  "none",
+  "low",
+  "medium",
+  "high",
+  "ultrathink",
+];
+
+export const THINKING_LEVEL_LABELS: Record<ThinkingLevel, string> = {
+  none: "None",
+  low: "Low",
+  medium: "Med",
+  high: "High",
+  ultrathink: "Ultra",
+};
+
+// Profile icon mapping
+export const PROFILE_ICONS: Record<
+  string,
+  React.ComponentType<{ className?: string }>
+> = {
+  Brain,
+  Zap,
+  Scale,
+  Cpu,
+  Rocket,
+  Sparkles,
+};

apps/ui/src/components/views/board-view/shared/model-selector.tsx

@@ -0,0 +1,55 @@
+
+import { Label } from "@/components/ui/label";
+import { Brain } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { AgentModel } from "@/store/app-store";
+import { CLAUDE_MODELS, ModelOption } from "./model-constants";
+
+interface ModelSelectorProps {
+  selectedModel: AgentModel;
+  onModelSelect: (model: AgentModel) => void;
+  testIdPrefix?: string;
+}
+
+export function ModelSelector({
+  selectedModel,
+  onModelSelect,
+  testIdPrefix = "model-select",
+}: ModelSelectorProps) {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <Label className="flex items-center gap-2">
+          <Brain className="w-4 h-4 text-primary" />
+          Claude (SDK)
+        </Label>
+        <span className="text-[11px] px-2 py-0.5 rounded-full border border-primary/40 text-primary">
+          Native
+        </span>
+      </div>
+      <div className="flex gap-2 flex-wrap">
+        {CLAUDE_MODELS.map((option) => {
+          const isSelected = selectedModel === option.id;
+          const shortName = option.label.replace("Claude ", "");
+          return (
+            <button
+              key={option.id}
+              type="button"
+              onClick={() => onModelSelect(option.id)}
+              title={option.description}
+              className={cn(
+                "flex-1 min-w-[80px] px-3 py-2 rounded-md border text-sm font-medium transition-colors",
+                isSelected
+                  ? "bg-primary text-primary-foreground border-primary"
+                  : "bg-background hover:bg-accent border-input"
+              )}
+              data-testid={`${testIdPrefix}-${option.id}`}
+            >
+              {shortName}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

apps/ui/src/components/views/board-view/shared/priority-selector.tsx

@@ -0,0 +1,62 @@
+
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface PrioritySelectorProps {
+  selectedPriority: number;
+  onPrioritySelect: (priority: number) => void;
+  testIdPrefix?: string;
+}
+
+export function PrioritySelector({
+  selectedPriority,
+  onPrioritySelect,
+  testIdPrefix = "priority",
+}: PrioritySelectorProps) {
+  return (
+    <div className="space-y-2">
+      <Label>Priority</Label>
+      <div className="flex gap-2">
+        <button
+          type="button"
+          onClick={() => onPrioritySelect(1)}
+          className={cn(
+            "flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors",
+            selectedPriority === 1
+              ? "bg-red-500/20 text-red-500 border-2 border-red-500/50"
+              : "bg-muted/50 text-muted-foreground border border-border hover:bg-muted"
+          )}
+          data-testid={`${testIdPrefix}-high-button`}
+        >
+          High
+        </button>
+        <button
+          type="button"
+          onClick={() => onPrioritySelect(2)}
+          className={cn(
+            "flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors",
+            selectedPriority === 2
+              ? "bg-yellow-500/20 text-yellow-500 border-2 border-yellow-500/50"
+              : "bg-muted/50 text-muted-foreground border border-border hover:bg-muted"
+          )}
+          data-testid={`${testIdPrefix}-medium-button`}
+        >
+          Medium
+        </button>
+        <button
+          type="button"
+          onClick={() => onPrioritySelect(3)}
+          className={cn(
+            "flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors",
+            selectedPriority === 3
+              ? "bg-blue-500/20 text-blue-500 border-2 border-blue-500/50"
+              : "bg-muted/50 text-muted-foreground border border-border hover:bg-muted"
+          )}
+          data-testid={`${testIdPrefix}-low-button`}
+        >
+          Low
+        </button>
+      </div>
+    </div>
+  );
+}

apps/ui/src/components/views/board-view/shared/profile-quick-select.tsx

@@ -0,0 +1,98 @@
+
+import { Label } from "@/components/ui/label";
+import { Brain, UserCircle } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { AgentModel, ThinkingLevel, AIProfile } from "@/store/app-store";
+import { PROFILE_ICONS } from "./model-constants";
+
+interface ProfileQuickSelectProps {
+  profiles: AIProfile[];
+  selectedModel: AgentModel;
+  selectedThinkingLevel: ThinkingLevel;
+  onSelect: (model: AgentModel, thinkingLevel: ThinkingLevel) => void;
+  testIdPrefix?: string;
+  showManageLink?: boolean;
+  onManageLinkClick?: () => void;
+}
+
+export function ProfileQuickSelect({
+  profiles,
+  selectedModel,
+  selectedThinkingLevel,
+  onSelect,
+  testIdPrefix = "profile-quick-select",
+  showManageLink = false,
+  onManageLinkClick,
+}: ProfileQuickSelectProps) {
+  if (profiles.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <Label className="flex items-center gap-2">
+          <UserCircle className="w-4 h-4 text-brand-500" />
+          Quick Select Profile
+        </Label>
+        <span className="text-[11px] px-2 py-0.5 rounded-full border border-brand-500/40 text-brand-500">
+          Presets
+        </span>
+      </div>
+      <div className="grid grid-cols-2 gap-2">
+        {profiles.slice(0, 6).map((profile) => {
+          const IconComponent = profile.icon
+            ? PROFILE_ICONS[profile.icon]
+            : Brain;
+          const isSelected =
+            selectedModel === profile.model &&
+            selectedThinkingLevel === profile.thinkingLevel;
+          return (
+            <button
+              key={profile.id}
+              type="button"
+              onClick={() => onSelect(profile.model, profile.thinkingLevel)}
+              className={cn(
+                "flex items-center gap-2 p-2 rounded-lg border text-left transition-all",
+                isSelected
+                  ? "bg-brand-500/10 border-brand-500 text-foreground"
+                  : "bg-background hover:bg-accent border-input"
+              )}
+              data-testid={`${testIdPrefix}-${profile.id}`}
+            >
+              <div className="w-7 h-7 rounded flex items-center justify-center shrink-0 bg-primary/10">
+                {IconComponent && (
+                  <IconComponent className="w-4 h-4 text-primary" />
+                )}
+              </div>
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium truncate">{profile.name}</p>
+                <p className="text-[10px] text-muted-foreground truncate">
+                  {profile.model}
+                  {profile.thinkingLevel !== "none" &&
+                    ` + ${profile.thinkingLevel}`}
+                </p>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+      <p className="text-xs text-muted-foreground">
+        Or customize below.
+        {showManageLink && onManageLinkClick && (
+          <>
+            {" "}
+            Manage profiles in{" "}
+            <button
+              type="button"
+              onClick={onManageLinkClick}
+              className="text-brand-500 hover:underline"
+            >
+              AI Profiles
+            </button>
+          </>
+        )}
+      </p>
+    </div>
+  );
+}

apps/ui/src/components/views/board-view/shared/testing-tab-content.tsx

@@ -0,0 +1,85 @@
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { FlaskConical, Plus } from "lucide-react";
+
+interface TestingTabContentProps {
+  skipTests: boolean;
+  onSkipTestsChange: (skipTests: boolean) => void;
+  steps: string[];
+  onStepsChange: (steps: string[]) => void;
+  testIdPrefix?: string;
+}
+
+export function TestingTabContent({
+  skipTests,
+  onSkipTestsChange,
+  steps,
+  onStepsChange,
+  testIdPrefix = "",
+}: TestingTabContentProps) {
+  const checkboxId = testIdPrefix ? `${testIdPrefix}-skip-tests` : "skip-tests";
+
+  const handleStepChange = (index: number, value: string) => {
+    const newSteps = [...steps];
+    newSteps[index] = value;
+    onStepsChange(newSteps);
+  };
+
+  const handleAddStep = () => {
+    onStepsChange([...steps, ""]);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id={checkboxId}
+          checked={!skipTests}
+          onCheckedChange={(checked) => onSkipTestsChange(checked !== true)}
+          data-testid={`${testIdPrefix ? testIdPrefix + "-" : ""}skip-tests-checkbox`}
+        />
+        <div className="flex items-center gap-2">
+          <Label htmlFor={checkboxId} className="text-sm cursor-pointer">
+            Enable automated testing
+          </Label>
+          <FlaskConical className="w-3.5 h-3.5 text-muted-foreground" />
+        </div>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        When enabled, this feature will use automated TDD. When disabled, it
+        will require manual verification.
+      </p>
+
+      {/* Verification Steps - Only shown when skipTests is enabled */}
+      {skipTests && (
+        <div className="space-y-2 pt-2 border-t border-border">
+          <Label>Verification Steps</Label>
+          <p className="text-xs text-muted-foreground mb-2">
+            Add manual steps to verify this feature works correctly.
+          </p>
+          {steps.map((step, index) => (
+            <Input
+              key={index}
+              value={step}
+              placeholder={`Verification step ${index + 1}`}
+              onChange={(e) => handleStepChange(index, e.target.value)}
+              data-testid={`${testIdPrefix ? testIdPrefix + "-" : ""}feature-step-${index}${testIdPrefix ? "" : "-input"}`}
+            />
+          ))}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleAddStep}
+            data-testid={`${testIdPrefix ? testIdPrefix + "-" : ""}add-step-button`}
+          >
+            <Plus className="w-4 h-4 mr-2" />
+            Add Verification Step
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

apps/ui/src/components/views/board-view/shared/thinking-level-selector.tsx

@@ -0,0 +1,48 @@
+
+import { Label } from "@/components/ui/label";
+import { Brain } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { ThinkingLevel } from "@/store/app-store";
+import { THINKING_LEVELS, THINKING_LEVEL_LABELS } from "./model-constants";
+
+interface ThinkingLevelSelectorProps {
+  selectedLevel: ThinkingLevel;
+  onLevelSelect: (level: ThinkingLevel) => void;
+  testIdPrefix?: string;
+}
+
+export function ThinkingLevelSelector({
+  selectedLevel,
+  onLevelSelect,
+  testIdPrefix = "thinking-level",
+}: ThinkingLevelSelectorProps) {
+  return (
+    <div className="space-y-2 pt-2 border-t border-border">
+      <Label className="flex items-center gap-2 text-sm">
+        <Brain className="w-3.5 h-3.5 text-muted-foreground" />
+        Thinking Level
+      </Label>
+      <div className="flex gap-2 flex-wrap">
+        {THINKING_LEVELS.map((level) => (
+          <button
+            key={level}
+            type="button"
+            onClick={() => onLevelSelect(level)}
+            className={cn(
+              "flex-1 px-3 py-2 rounded-md border text-sm font-medium transition-colors min-w-[60px]",
+              selectedLevel === level
+                ? "bg-primary text-primary-foreground border-primary"
+                : "bg-background hover:bg-accent border-input"
+            )}
+            data-testid={`${testIdPrefix}-${level}`}
+          >
+            {THINKING_LEVEL_LABELS[level]}
+          </button>
+        ))}
+      </div>
+      <p className="text-xs text-muted-foreground">
+        Higher levels give more time to reason through complex problems.
+      </p>
+    </div>
+  );
+}