Merge origin/main into feature/shared-packages

Resolved conflicts:
- list.ts: Keep @automaker/git-utils import, add worktree-metadata import
- feature-loader.ts: Use Feature type from @automaker/types
- automaker-paths.test.ts: Import from @automaker/platform
- kanban-card.tsx: Accept deletion (split into components/)
- subprocess.test.ts: Keep libs/platform location

Added missing exports to @automaker/platform:
- getGlobalSettingsPath, getCredentialsPath, getProjectSettingsPath, ensureDataDir

Added title and titleGenerating fields to @automaker/types Feature interface.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

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

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

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

apps/ui/src/components/layout/sidebar.tsx

@@ -1029,12 +1029,6 @@ export function Sidebar() {
         icon: UserCircle,
         shortcut: shortcuts.profiles,
       },
-      {
-        id: "terminal",
-        label: "Terminal",
-        icon: Terminal,
-        shortcut: shortcuts.terminal,
-      },
     ];
 
     // Filter out hidden items
@@ -1048,29 +1042,39 @@ export function Sidebar() {
       if (item.id === "profiles" && hideAiProfiles) {
         return false;
       }
-      if (item.id === "terminal" && hideTerminal) {
-        return false;
-      }
       return true;
     });
 
+    // Build project items - Terminal is conditionally included
+    const projectItems: NavItem[] = [
+      {
+        id: "board",
+        label: "Kanban Board",
+        icon: LayoutGrid,
+        shortcut: shortcuts.board,
+      },
+      {
+        id: "agent",
+        label: "Agent Runner",
+        icon: Bot,
+        shortcut: shortcuts.agent,
+      },
+    ];
+
+    // Add Terminal to Project section if not hidden
+    if (!hideTerminal) {
+      projectItems.push({
+        id: "terminal",
+        label: "Terminal",
+        icon: Terminal,
+        shortcut: shortcuts.terminal,
+      });
+    }
+
     return [
       {
         label: "Project",
-        items: [
-          {
-            id: "board",
-            label: "Kanban Board",
-            icon: LayoutGrid,
-            shortcut: shortcuts.board,
-          },
-          {
-            id: "agent",
-            label: "Agent Runner",
-            icon: Bot,
-            shortcut: shortcuts.agent,
-          },
-        ],
+        items: projectItems,
       },
       {
         label: "Tools",

apps/ui/src/components/splash-screen.tsx

@@ -0,0 +1,309 @@
+import { useEffect, useState, useMemo } from "react";
+
+const TOTAL_DURATION = 2300; // Total animation duration in ms (tightened from 4000)
+const LOGO_ENTER_DURATION = 500; // Tightened from 1200
+const PARTICLES_ENTER_DELAY = 100; // Tightened from 400
+const EXIT_START = 1800; // Adjusted for shorter duration
+
+interface Particle {
+  id: number;
+  x: number;
+  y: number;
+  size: number;
+  delay: number;
+  angle: number;
+  distance: number;
+  opacity: number;
+  floatDuration: number;
+}
+
+function generateParticles(count: number): Particle[] {
+  return Array.from({ length: count }, (_, i) => {
+    const angle = (i / count) * 360 + Math.random() * 30;
+    const distance = 60 + Math.random() * 80; // Increased spread
+    return {
+      id: i,
+      x: Math.cos((angle * Math.PI) / 180) * distance,
+      y: Math.sin((angle * Math.PI) / 180) * distance,
+      size: 3 + Math.random() * 6, // Slightly smaller range for more subtle look
+      delay: Math.random() * 400,
+      angle,
+      distance: 300 + Math.random() * 200,
+      opacity: 0.4 + Math.random() * 0.6,
+      floatDuration: 3000 + Math.random() * 4000,
+    };
+  });
+}
+
+export function SplashScreen({ onComplete }: { onComplete: () => void }) {
+  const [phase, setPhase] = useState<"enter" | "hold" | "exit" | "done">(
+    "enter"
+  );
+
+  const particles = useMemo(() => generateParticles(50), []);
+
+  useEffect(() => {
+    const timers: NodeJS.Timeout[] = [];
+
+    // Phase transitions
+    timers.push(setTimeout(() => setPhase("hold"), LOGO_ENTER_DURATION));
+    timers.push(setTimeout(() => setPhase("exit"), EXIT_START));
+    timers.push(
+      setTimeout(() => {
+        setPhase("done");
+        onComplete();
+      }, TOTAL_DURATION)
+    );
+
+    return () => timers.forEach(clearTimeout);
+  }, [onComplete]);
+
+  if (phase === "done") return null;
+
+  return (
+    <div
+      className={`
+        fixed inset-0 z-[9999] flex items-center justify-center
+        bg-background
+        transition-opacity duration-500 ease-out
+        ${phase === "exit" ? "opacity-0" : "opacity-100"}
+      `}
+      style={{
+        pointerEvents: phase === "exit" ? "none" : "auto",
+      }}
+    >
+      <style>{`
+        @keyframes spin-slow {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        @keyframes spin-slow-reverse {
+          from { transform: rotate(360deg); }
+          to { transform: rotate(0deg); }
+        }
+        @keyframes float {
+          0%, 100% { transform: translate(0, 0); }
+          50% { transform: translate(6px, -6px); }
+        }
+      `}</style>
+
+      {/* Subtle gradient background */}
+      <div
+        className="absolute inset-0 opacity-30"
+        style={{
+          background:
+            "radial-gradient(circle at center, var(--brand-500) 0%, transparent 70%)",
+        }}
+      />
+
+      {/* Particle container 1 - Clockwise */}
+      <div
+        className="absolute inset-0 flex items-center justify-center overflow-hidden"
+        style={{ animation: "spin-slow 60s linear infinite" }}
+      >
+        {particles.slice(0, 25).map((particle) => (
+          <div
+            key={particle.id}
+            className="absolute"
+            style={{
+              transform:
+                phase === "exit"
+                  ? `translate(${Math.cos((particle.angle * Math.PI) / 180) * particle.distance}px, ${Math.sin((particle.angle * Math.PI) / 180) * particle.distance}px)`
+                  : `translate(${particle.x}px, ${particle.y}px)`,
+              transition:
+                phase === "enter"
+                  ? `all 600ms ease-out ${PARTICLES_ENTER_DELAY + particle.delay}ms`
+                  : phase === "exit"
+                    ? `all 800ms cubic-bezier(0.4, 0, 1, 1) ${particle.delay * 0.3}ms`
+                    : "all 300ms ease-out",
+            }}
+          >
+            <div
+              className="rounded-full"
+              style={{
+                width: particle.size,
+                height: particle.size,
+                background: `linear-gradient(135deg, var(--brand-400), var(--brand-600))`,
+                boxShadow: `0 0 ${particle.size * 2}px var(--brand-500)`,
+                opacity:
+                  phase === "enter"
+                    ? 0
+                    : phase === "hold"
+                      ? particle.opacity
+                      : 0,
+                transform: phase === "exit" ? "scale(0)" : "scale(1)",
+                animation: `float ${particle.floatDuration}ms ease-in-out infinite`,
+                transition: "opacity 300ms ease-out, transform 300ms ease-out",
+              }}
+            />
+          </div>
+        ))}
+      </div>
+
+      {/* Particle container 2 - Counter-Clockwise */}
+      <div
+        className="absolute inset-0 flex items-center justify-center overflow-hidden"
+        style={{ animation: "spin-slow-reverse 75s linear infinite" }}
+      >
+        {particles.slice(25).map((particle) => (
+          <div
+            key={particle.id}
+            className="absolute"
+            style={{
+              transform:
+                phase === "exit"
+                  ? `translate(${Math.cos((particle.angle * Math.PI) / 180) * particle.distance}px, ${Math.sin((particle.angle * Math.PI) / 180) * particle.distance}px)`
+                  : `translate(${particle.x}px, ${particle.y}px)`,
+              transition:
+                phase === "enter"
+                  ? `all 600ms ease-out ${PARTICLES_ENTER_DELAY + particle.delay}ms`
+                  : phase === "exit"
+                    ? `all 800ms cubic-bezier(0.4, 0, 1, 1) ${particle.delay * 0.3}ms`
+                    : "all 300ms ease-out",
+            }}
+          >
+            <div
+              className="rounded-full"
+              style={{
+                width: particle.size,
+                height: particle.size,
+                background: `linear-gradient(135deg, var(--brand-400), var(--brand-600))`,
+                boxShadow: `0 0 ${particle.size * 2}px var(--brand-500)`,
+                opacity:
+                  phase === "enter"
+                    ? 0
+                    : phase === "hold"
+                      ? particle.opacity
+                      : 0,
+                transform: phase === "exit" ? "scale(0)" : "scale(1)",
+                animation: `float ${particle.floatDuration}ms ease-in-out infinite`,
+                animationDelay: `${particle.delay}ms`,
+                transition: "opacity 300ms ease-out, transform 300ms ease-out",
+              }}
+            />
+          </div>
+        ))}
+      </div>
+
+      {/* Logo container */}
+      <div
+        className="relative z-10"
+        style={{
+          opacity: phase === "enter" ? 0 : phase === "exit" ? 0 : 1,
+          transform:
+            phase === "enter"
+              ? "scale(0.3) rotate(-20deg)"
+              : phase === "exit"
+                ? "scale(2.5) translateY(-100px)"
+                : "scale(1) rotate(0deg)",
+          transition:
+            phase === "enter"
+              ? `all ${LOGO_ENTER_DURATION}ms cubic-bezier(0.34, 1.56, 0.64, 1)`
+              : phase === "exit"
+                ? "all 600ms cubic-bezier(0.4, 0, 1, 1)"
+                : "all 300ms ease-out",
+        }}
+      >
+        {/* Glow effect behind logo */}
+        <div
+          className="absolute inset-0 blur-3xl"
+          style={{
+            background:
+              "radial-gradient(circle, var(--brand-500) 0%, transparent 70%)",
+            transform: "scale(2.5)",
+            opacity: phase === "hold" ? 0.6 : 0,
+            transition: "opacity 500ms ease-out",
+          }}
+        />
+
+        {/* The logo */}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 256 256"
+          role="img"
+          aria-label="Automaker Logo"
+          className="relative z-10"
+          style={{
+            width: 120,
+            height: 120,
+            filter: "drop-shadow(0 0 30px var(--brand-500))",
+          }}
+        >
+          <defs>
+            <linearGradient
+              id="splash-bg"
+              x1="0"
+              y1="0"
+              x2="256"
+              y2="256"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0%" style={{ stopColor: "var(--brand-400)" }} />
+              <stop offset="100%" style={{ stopColor: "var(--brand-600)" }} />
+            </linearGradient>
+            <filter
+              id="splash-shadow"
+              x="-20%"
+              y="-20%"
+              width="140%"
+              height="140%"
+            >
+              <feDropShadow
+                dx="0"
+                dy="4"
+                stdDeviation="4"
+                floodColor="#000000"
+                floodOpacity="0.25"
+              />
+            </filter>
+          </defs>
+          <rect
+            x="16"
+            y="16"
+            width="224"
+            height="224"
+            rx="56"
+            fill="url(#splash-bg)"
+          />
+          <g
+            fill="none"
+            stroke="#FFFFFF"
+            strokeWidth="20"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            filter="url(#splash-shadow)"
+          >
+            <path d="M92 92 L52 128 L92 164" />
+            <path d="M144 72 L116 184" />
+            <path d="M164 92 L204 128 L164 164" />
+          </g>
+        </svg>
+      </div>
+
+      {/* Automaker text that fades in below the logo */}
+      <div
+        className="absolute flex items-center gap-1"
+        style={{
+          top: "calc(50% + 80px)",
+          opacity: phase === "enter" ? 0 : phase === "exit" ? 0 : 1,
+          transform:
+            phase === "enter"
+              ? "translateY(20px)"
+              : phase === "exit"
+                ? "translateY(-30px) scale(1.2)"
+                : "translateY(0)",
+          transition:
+            phase === "enter"
+              ? `all 600ms ease-out ${LOGO_ENTER_DURATION - 200}ms`
+              : phase === "exit"
+                ? "all 500ms cubic-bezier(0.4, 0, 1, 1)"
+                : "all 300ms ease-out",
+        }}
+      >
+        <span className="font-bold text-foreground text-4xl tracking-tight leading-none">
+          automaker<span className="text-brand-500">.</span>
+        </span>
+      </div>
+    </div>
+  );
+}

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

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

apps/ui/src/components/ui/category-autocomplete.tsx

@@ -1,5 +1,5 @@
 
-import * as React from "react";
+import { Tag } from "lucide-react";
 import { Autocomplete } from "@/components/ui/autocomplete";
 
 interface CategoryAutocompleteProps {
@@ -9,6 +9,7 @@ interface CategoryAutocompleteProps {
   placeholder?: string;
   className?: string;
   disabled?: boolean;
+  error?: boolean;
   "data-testid"?: string;
 }
 
@@ -19,6 +20,7 @@ export function CategoryAutocomplete({
   placeholder = "Select or type a category...",
   className,
   disabled = false,
+  error = false,
   "data-testid": testId,
 }: CategoryAutocompleteProps) {
   return (
@@ -27,10 +29,14 @@ export function CategoryAutocomplete({
       onChange={onChange}
       options={suggestions}
       placeholder={placeholder}
-      searchPlaceholder="Search category..."
+      searchPlaceholder="Search or type new category..."
       emptyMessage="No category found."
       className={className}
       disabled={disabled}
+      error={error}
+      icon={Tag}
+      allowCreate
+      createLabel={(v) => `Create "${v}"`}
       data-testid={testId}
       itemTestIdPrefix="category-option"
     />

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

@@ -1,4 +1,3 @@
-
 import { useEffect, useState, useCallback, useMemo, useRef } from "react";
 import {
   PointerSensor,
@@ -39,6 +38,7 @@ import { CommitWorktreeDialog } from "./board-view/dialogs/commit-worktree-dialo
 import { CreatePRDialog } from "./board-view/dialogs/create-pr-dialog";
 import { CreateBranchDialog } from "./board-view/dialogs/create-branch-dialog";
 import { WorktreePanel } from "./board-view/worktree-panel";
+import type { PRInfo, WorktreeInfo } from "./board-view/worktree-panel/types";
 import { COLUMNS } from "./board-view/constants";
 import {
   useBoardFeatures,
@@ -58,6 +58,9 @@ const EMPTY_WORKTREES: ReturnType<
   ReturnType<typeof useAppStore.getState>["getWorktrees"]
 > = [];
 
+/** Delay before starting a newly created feature to allow state to settle */
+const FEATURE_CREATION_SETTLE_DELAY_MS = 500;
+
 export function BoardView() {
   const {
     currentProject,
@@ -271,13 +274,16 @@ export function BoardView() {
 
   // Calculate unarchived card counts per branch
   const branchCardCounts = useMemo(() => {
-    return hookFeatures.reduce((counts, feature) => {
-      if (feature.status !== "completed") {
-        const branch = feature.branchName ?? "main";
-        counts[branch] = (counts[branch] || 0) + 1;
-      }
-      return counts;
-    }, {} as Record<string, number>);
+    return hookFeatures.reduce(
+      (counts, feature) => {
+        if (feature.status !== "completed") {
+          const branch = feature.branchName ?? "main";
+          counts[branch] = (counts[branch] || 0) + 1;
+        }
+        return counts;
+      },
+      {} as Record<string, number>
+    );
   }, [hookFeatures]);
 
   // Custom collision detection that prioritizes columns over cards
@@ -340,7 +346,7 @@ export function BoardView() {
   const worktrees = useMemo(
     () =>
       currentProject
-        ? worktreesByProject[currentProject.path] ?? EMPTY_WORKTREES
+        ? (worktreesByProject[currentProject.path] ?? EMPTY_WORKTREES)
         : EMPTY_WORKTREES,
     [currentProject, worktreesByProject]
   );
@@ -412,9 +418,124 @@ export function BoardView() {
     outputFeature,
     projectPath: currentProject?.path || null,
     onWorktreeCreated: () => setWorktreeRefreshKey((k) => k + 1),
+    onWorktreeAutoSelect: (newWorktree) => {
+      if (!currentProject) return;
+      // Check if worktree already exists in the store (by branch name)
+      const currentWorktrees = getWorktrees(currentProject.path);
+      const existingWorktree = currentWorktrees.find(
+        (w) => w.branch === newWorktree.branch
+      );
+
+      // Only add if it doesn't already exist (to avoid duplicates)
+      if (!existingWorktree) {
+        const newWorktreeInfo = {
+          path: newWorktree.path,
+          branch: newWorktree.branch,
+          isMain: false,
+          isCurrent: false,
+          hasWorktree: true,
+        };
+        setWorktrees(currentProject.path, [
+          ...currentWorktrees,
+          newWorktreeInfo,
+        ]);
+      }
+      // Select the worktree (whether it existed or was just added)
+      setCurrentWorktree(
+        currentProject.path,
+        newWorktree.path,
+        newWorktree.branch
+      );
+    },
     currentWorktreeBranch,
   });
 
+  // Handler for addressing PR comments - creates a feature and starts it automatically
+  const handleAddressPRComments = useCallback(
+    async (worktree: WorktreeInfo, prInfo: PRInfo) => {
+      // Use a simple prompt that instructs the agent to read and address PR feedback
+      // The agent will fetch the PR comments directly, which is more reliable and up-to-date
+      const prNumber = prInfo.number;
+      const description = `Read the review requests on PR #${prNumber} and address any feedback the best you can.`;
+
+      // Create the feature
+      const featureData = {
+        category: "PR Review",
+        description,
+        steps: [],
+        images: [],
+        imagePaths: [],
+        skipTests: defaultSkipTests,
+        model: "opus" as const,
+        thinkingLevel: "none" as const,
+        branchName: worktree.branch,
+        priority: 1, // High priority for PR feedback
+        planningMode: "skip" as const,
+        requirePlanApproval: false,
+      };
+
+      await handleAddFeature(featureData);
+
+      // Find the newly created feature and start it
+      // We need to wait a moment for the feature to be created
+      setTimeout(async () => {
+        const latestFeatures = useAppStore.getState().features;
+        const newFeature = latestFeatures.find(
+          (f) =>
+            f.branchName === worktree.branch &&
+            f.status === "backlog" &&
+            f.description.includes(`PR #${prNumber}`)
+        );
+
+        if (newFeature) {
+          await handleStartImplementation(newFeature);
+        }
+      }, FEATURE_CREATION_SETTLE_DELAY_MS);
+    },
+    [handleAddFeature, handleStartImplementation, defaultSkipTests]
+  );
+
+  // Handler for resolving conflicts - creates a feature to pull from origin/main and resolve conflicts
+  const handleResolveConflicts = useCallback(
+    async (worktree: WorktreeInfo) => {
+      const description = `Pull latest from origin/main and resolve conflicts. Merge origin/main into the current branch (${worktree.branch}), resolving any merge conflicts that arise. After resolving conflicts, ensure the code compiles and tests pass.`;
+
+      // Create the feature
+      const featureData = {
+        category: "Maintenance",
+        description,
+        steps: [],
+        images: [],
+        imagePaths: [],
+        skipTests: defaultSkipTests,
+        model: "opus" as const,
+        thinkingLevel: "none" as const,
+        branchName: worktree.branch,
+        priority: 1, // High priority for conflict resolution
+        planningMode: "skip" as const,
+        requirePlanApproval: false,
+      };
+
+      await handleAddFeature(featureData);
+
+      // Find the newly created feature and start it
+      setTimeout(async () => {
+        const latestFeatures = useAppStore.getState().features;
+        const newFeature = latestFeatures.find(
+          (f) =>
+            f.branchName === worktree.branch &&
+            f.status === "backlog" &&
+            f.description.includes("Pull latest from origin/main")
+        );
+
+        if (newFeature) {
+          await handleStartImplementation(newFeature);
+        }
+      }, FEATURE_CREATION_SETTLE_DELAY_MS);
+    },
+    [handleAddFeature, handleStartImplementation, defaultSkipTests]
+  );
+
   // Client-side auto mode: periodically check for backlog items and move them to in-progress
   // Use a ref to track the latest auto mode state so async operations always check the current value
   const autoModeRunningRef = useRef(autoMode.isRunning);
@@ -835,6 +956,7 @@ export function BoardView() {
       <BoardHeader
         projectName={currentProject.name}
         maxConcurrency={maxConcurrency}
+        runningAgentsCount={runningAutoTasks.length}
         onConcurrencyChange={setMaxConcurrency}
         isAutoModeRunning={autoMode.isRunning}
         onAutoModeToggle={(enabled) => {
@@ -874,6 +996,8 @@ export function BoardView() {
           setSelectedWorktreeForAction(worktree);
           setShowCreateBranchDialog(true);
         }}
+        onAddressPRComments={handleAddressPRComments}
+        onResolveConflicts={handleResolveConflicts}
         onRemovedWorktrees={handleRemovedWorktrees}
         runningFeatureIds={runningAutoTasks}
         branchCardCounts={branchCardCounts}
@@ -1153,7 +1277,25 @@ export function BoardView() {
         open={showCreatePRDialog}
         onOpenChange={setShowCreatePRDialog}
         worktree={selectedWorktreeForAction}
-        onCreated={() => {
+        projectPath={currentProject?.path || null}
+        onCreated={(prUrl) => {
+          // If a PR was created and we have the worktree branch, update all features on that branch with the PR URL
+          if (prUrl && selectedWorktreeForAction?.branch) {
+            const branchName = selectedWorktreeForAction.branch;
+            const featuresToUpdate = hookFeatures.filter((f) => f.branchName === branchName);
+
+            // Update local state synchronously
+            featuresToUpdate.forEach((feature) => {
+              updateFeature(feature.id, { prUrl });
+            });
+
+            // Persist changes asynchronously and in parallel
+            Promise.all(
+              featuresToUpdate.map((feature) =>
+                persistFeatureUpdate(feature.id, { prUrl })
+              )
+            ).catch(console.error);
+          }
           setWorktreeRefreshKey((k) => k + 1);
           setSelectedWorktreeForAction(null);
         }}

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

@@ -4,12 +4,13 @@ import { HotkeyButton } from "@/components/ui/hotkey-button";
 import { Slider } from "@/components/ui/slider";
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
-import { Plus, Users } from "lucide-react";
+import { Plus, Bot } from "lucide-react";
 import { KeyboardShortcut } from "@/hooks/use-keyboard-shortcuts";
 
 interface BoardHeaderProps {
   projectName: string;
   maxConcurrency: number;
+  runningAgentsCount: number;
   onConcurrencyChange: (value: number) => void;
   isAutoModeRunning: boolean;
   onAutoModeToggle: (enabled: boolean) => void;
@@ -21,6 +22,7 @@ interface BoardHeaderProps {
 export function BoardHeader({
   projectName,
   maxConcurrency,
+  runningAgentsCount,
   onConcurrencyChange,
   isAutoModeRunning,
   onAutoModeToggle,
@@ -41,7 +43,8 @@ export function BoardHeader({
             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" />
+            <Bot className="w-4 h-4 text-muted-foreground" />
+            <span className="text-sm font-medium">Agents</span>
             <Slider
               value={[maxConcurrency]}
               onValueChange={(value) => onConcurrencyChange(value[0])}
@@ -52,10 +55,10 @@ export function BoardHeader({
               data-testid="concurrency-slider"
             />
             <span
-              className="text-sm text-muted-foreground min-w-[2ch] text-center"
+              className="text-sm text-muted-foreground min-w-[5ch] text-center"
               data-testid="concurrency-value"
             >
-              {maxConcurrency}
+              {runningAgentsCount} / {maxConcurrency}
             </span>
           </div>
         )}

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

@@ -1,2 +1,2 @@
-export { KanbanCard } from "./kanban-card";
+export { KanbanCard } from "./kanban-card/kanban-card";
 export { KanbanColumn } from "./kanban-column";

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

@@ -0,0 +1,283 @@
+import { useEffect, useState } from "react";
+import { Feature, ThinkingLevel, useAppStore } from "@/store/app-store";
+import {
+  AgentTaskInfo,
+  parseAgentContext,
+  formatModelName,
+  DEFAULT_MODEL,
+} from "@/lib/agent-context-parser";
+import { cn } from "@/lib/utils";
+import {
+  Cpu,
+  Brain,
+  ListTodo,
+  Sparkles,
+  Expand,
+  CheckCircle2,
+  Circle,
+  Loader2,
+  Wrench,
+} from "lucide-react";
+import { getElectronAPI } from "@/lib/electron";
+import { SummaryDialog } from "./summary-dialog";
+
+/**
+ * Formats thinking level for compact display
+ */
+function formatThinkingLevel(level: ThinkingLevel | undefined): string {
+  if (!level || level === "none") return "";
+  const labels: Record<ThinkingLevel, string> = {
+    none: "",
+    low: "Low",
+    medium: "Med",
+    high: "High",
+    ultrathink: "Ultra",
+  };
+  return labels[level];
+}
+
+interface AgentInfoPanelProps {
+  feature: Feature;
+  contextContent?: string;
+  summary?: string;
+  isCurrentAutoTask?: boolean;
+}
+
+export function AgentInfoPanel({
+  feature,
+  contextContent,
+  summary,
+  isCurrentAutoTask,
+}: AgentInfoPanelProps) {
+  const { kanbanCardDetailLevel } = useAppStore();
+  const [agentInfo, setAgentInfo] = useState<AgentTaskInfo | null>(null);
+  const [isSummaryDialogOpen, setIsSummaryDialogOpen] = useState(false);
+
+  const showAgentInfo = kanbanCardDetailLevel === "detailed";
+
+  useEffect(() => {
+    const loadContext = async () => {
+      if (contextContent) {
+        const info = parseAgentContext(contextContent);
+        setAgentInfo(info);
+        return;
+      }
+
+      if (feature.status === "backlog") {
+        setAgentInfo(null);
+        return;
+      }
+
+      try {
+        const api = getElectronAPI();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-undef
+        const currentProject = (window as any).__currentProject;
+        if (!currentProject?.path) return;
+
+        if (api.features) {
+          const result = await api.features.getAgentOutput(
+            currentProject.path,
+            feature.id
+          );
+
+          if (result.success && result.content) {
+            const info = parseAgentContext(result.content);
+            setAgentInfo(info);
+          }
+        } else {
+          const contextPath = `${currentProject.path}/.automaker/features/${feature.id}/agent-output.md`;
+          const result = await api.readFile(contextPath);
+
+          if (result.success && result.content) {
+            const info = parseAgentContext(result.content);
+            setAgentInfo(info);
+          }
+        }
+      } catch {
+        // eslint-disable-next-line no-undef
+        console.debug("[KanbanCard] No context file for feature:", feature.id);
+      }
+    };
+
+    loadContext();
+
+    if (isCurrentAutoTask) {
+      // eslint-disable-next-line no-undef
+      const interval = setInterval(loadContext, 3000);
+      return () => {
+        // eslint-disable-next-line no-undef
+        clearInterval(interval);
+      };
+    }
+  }, [feature.id, feature.status, contextContent, isCurrentAutoTask]);
+  // Model/Preset Info for Backlog Cards
+  if (showAgentInfo && feature.status === "backlog") {
+    return (
+      <div className="mb-3 space-y-2 overflow-hidden">
+        <div className="flex items-center gap-2 text-[11px] flex-wrap">
+          <div className="flex items-center gap-1 text-[var(--status-info)]">
+            <Cpu className="w-3 h-3" />
+            <span className="font-medium">
+              {formatModelName(feature.model ?? DEFAULT_MODEL)}
+            </span>
+          </div>
+          {feature.thinkingLevel && feature.thinkingLevel !== "none" && (
+            <div className="flex items-center gap-1 text-purple-400">
+              <Brain className="w-3 h-3" />
+              <span className="font-medium">
+                {formatThinkingLevel(feature.thinkingLevel)}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Agent Info Panel for non-backlog cards
+  if (showAgentInfo && feature.status !== "backlog" && agentInfo) {
+    return (
+      <div className="mb-3 space-y-2 overflow-hidden">
+        {/* Model & Phase */}
+        <div className="flex items-center gap-2 text-[11px] flex-wrap">
+          <div className="flex items-center gap-1 text-[var(--status-info)]">
+            <Cpu className="w-3 h-3" />
+            <span className="font-medium">
+              {formatModelName(feature.model ?? DEFAULT_MODEL)}
+            </span>
+          </div>
+          {agentInfo.currentPhase && (
+            <div
+              className={cn(
+                "px-1.5 py-0.5 rounded-md text-[10px] font-medium",
+                agentInfo.currentPhase === "planning" &&
+                  "bg-[var(--status-info-bg)] text-[var(--status-info)]",
+                agentInfo.currentPhase === "action" &&
+                  "bg-[var(--status-warning-bg)] text-[var(--status-warning)]",
+                agentInfo.currentPhase === "verification" &&
+                  "bg-[var(--status-success-bg)] text-[var(--status-success)]"
+              )}
+            >
+              {agentInfo.currentPhase}
+            </div>
+          )}
+        </div>
+
+        {/* Task List Progress */}
+        {agentInfo.todos.length > 0 && (
+          <div className="space-y-1">
+            <div className="flex items-center gap-1 text-[10px] text-muted-foreground/70">
+              <ListTodo className="w-3 h-3" />
+              <span>
+                {agentInfo.todos.filter((t) => t.status === "completed").length}
+                /{agentInfo.todos.length} tasks
+              </span>
+            </div>
+            <div className="space-y-0.5 max-h-16 overflow-y-auto">
+              {agentInfo.todos.slice(0, 3).map((todo, idx) => (
+                <div
+                  key={idx}
+                  className="flex items-center gap-1.5 text-[10px]"
+                >
+                  {todo.status === "completed" ? (
+                    <CheckCircle2 className="w-2.5 h-2.5 text-[var(--status-success)] shrink-0" />
+                  ) : todo.status === "in_progress" ? (
+                    <Loader2 className="w-2.5 h-2.5 text-[var(--status-warning)] animate-spin shrink-0" />
+                  ) : (
+                    <Circle className="w-2.5 h-2.5 text-muted-foreground/50 shrink-0" />
+                  )}
+                  <span
+                    className={cn(
+                      "break-words hyphens-auto line-clamp-2 leading-relaxed",
+                      todo.status === "completed" &&
+                        "text-muted-foreground/60 line-through",
+                      todo.status === "in_progress" &&
+                        "text-[var(--status-warning)]",
+                      todo.status === "pending" && "text-muted-foreground/80"
+                    )}
+                  >
+                    {todo.content}
+                  </span>
+                </div>
+              ))}
+              {agentInfo.todos.length > 3 && (
+                <p className="text-[10px] text-muted-foreground/60 pl-4">
+                  +{agentInfo.todos.length - 3} more
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Summary for waiting_approval and verified */}
+        {(feature.status === "waiting_approval" ||
+          feature.status === "verified") && (
+          <>
+            {(feature.summary || summary || agentInfo.summary) && (
+              <div className="space-y-1.5 pt-2 border-t border-border/30 overflow-hidden">
+                <div className="flex items-center justify-between gap-2">
+                  <div className="flex items-center gap-1 text-[10px] text-[var(--status-success)] min-w-0">
+                    <Sparkles className="w-3 h-3 shrink-0" />
+                    <span className="truncate font-medium">Summary</span>
+                  </div>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setIsSummaryDialogOpen(true);
+                    }}
+                    onPointerDown={(e) => e.stopPropagation()}
+                    className="p-0.5 rounded-md hover:bg-muted/80 transition-colors text-muted-foreground/60 hover:text-muted-foreground shrink-0"
+                    title="View full summary"
+                    data-testid={`expand-summary-${feature.id}`}
+                  >
+                    <Expand className="w-3 h-3" />
+                  </button>
+                </div>
+                <p className="text-[10px] text-muted-foreground/70 line-clamp-3 break-words hyphens-auto leading-relaxed overflow-hidden">
+                  {feature.summary || summary || agentInfo.summary}
+                </p>
+              </div>
+            )}
+            {!feature.summary &&
+              !summary &&
+              !agentInfo.summary &&
+              agentInfo.toolCallCount > 0 && (
+                <div className="flex items-center gap-2 text-[10px] text-muted-foreground/60 pt-2 border-t border-border/30">
+                  <span className="flex items-center gap-1">
+                    <Wrench className="w-2.5 h-2.5" />
+                    {agentInfo.toolCallCount} tool calls
+                  </span>
+                  {agentInfo.todos.length > 0 && (
+                    <span className="flex items-center gap-1">
+                      <CheckCircle2 className="w-2.5 h-2.5 text-[var(--status-success)]" />
+                      {
+                        agentInfo.todos.filter((t) => t.status === "completed")
+                          .length
+                      }{" "}
+                      tasks done
+                    </span>
+                  )}
+                </div>
+              )}
+          </>
+        )}
+      </div>
+    );
+  }
+
+  // Always render SummaryDialog if showAgentInfo is true (even if no agentInfo yet)
+  // This ensures the dialog can be opened from the expand button
+  return (
+    <>
+      {showAgentInfo && (
+        <SummaryDialog
+          feature={feature}
+          agentInfo={agentInfo}
+          summary={summary}
+          isOpen={isSummaryDialogOpen}
+          onOpenChange={setIsSummaryDialogOpen}
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,337 @@
+import { Feature } from "@/store/app-store";
+import { Button } from "@/components/ui/button";
+import {
+  Edit,
+  PlayCircle,
+  RotateCcw,
+  StopCircle,
+  CheckCircle2,
+  FileText,
+  Eye,
+  Wand2,
+  Archive,
+} from "lucide-react";
+
+interface CardActionsProps {
+  feature: Feature;
+  isCurrentAutoTask: boolean;
+  hasContext?: boolean;
+  shortcutKey?: string;
+  onEdit: () => void;
+  onViewOutput?: () => void;
+  onVerify?: () => void;
+  onResume?: () => void;
+  onForceStop?: () => void;
+  onManualVerify?: () => void;
+  onFollowUp?: () => void;
+  onImplement?: () => void;
+  onComplete?: () => void;
+  onViewPlan?: () => void;
+  onApprovePlan?: () => void;
+}
+
+export function CardActions({
+  feature,
+  isCurrentAutoTask,
+  hasContext,
+  shortcutKey,
+  onEdit,
+  onViewOutput,
+  onVerify,
+  onResume,
+  onForceStop,
+  onManualVerify,
+  onFollowUp,
+  onImplement,
+  onComplete,
+  onViewPlan,
+  onApprovePlan,
+}: CardActionsProps) {
+  return (
+    <div className="flex flex-wrap gap-1.5 -mx-3 -mb-3 px-3 pb-3">
+      {isCurrentAutoTask && (
+        <>
+          {/* Approve Plan button - PRIORITY: shows even when agent is "running" (paused for approval) */}
+          {feature.planSpec?.status === "generated" && onApprovePlan && (
+            <Button
+              variant="default"
+              size="sm"
+              className="flex-1 min-w-0 h-7 text-[11px] bg-purple-600 hover:bg-purple-700 text-white animate-pulse"
+              onClick={(e) => {
+                e.stopPropagation();
+                onApprovePlan();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`approve-plan-running-${feature.id}`}
+            >
+              <FileText className="w-3 h-3 mr-1 shrink-0" />
+              <span className="truncate">Approve Plan</span>
+            </Button>
+          )}
+          {onViewOutput && (
+            <Button
+              variant="secondary"
+              size="sm"
+              className="flex-1 h-7 text-[11px]"
+              onClick={(e) => {
+                e.stopPropagation();
+                onViewOutput();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`view-output-${feature.id}`}
+            >
+              <FileText className="w-3 h-3 mr-1 shrink-0" />
+              <span className="truncate">Logs</span>
+              {shortcutKey && (
+                <span
+                  className="ml-1.5 px-1 py-0.5 text-[9px] font-mono rounded bg-foreground/10"
+                  data-testid={`shortcut-key-${feature.id}`}
+                >
+                  {shortcutKey}
+                </span>
+              )}
+            </Button>
+          )}
+          {onForceStop && (
+            <Button
+              variant="destructive"
+              size="sm"
+              className="h-7 text-[11px] px-2 shrink-0"
+              onClick={(e) => {
+                e.stopPropagation();
+                onForceStop();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`force-stop-${feature.id}`}
+            >
+              <StopCircle className="w-3 h-3" />
+            </Button>
+          )}
+        </>
+      )}
+      {!isCurrentAutoTask && feature.status === "in_progress" && (
+        <>
+          {/* Approve Plan button - shows when plan is generated and waiting for approval */}
+          {feature.planSpec?.status === "generated" && onApprovePlan && (
+            <Button
+              variant="default"
+              size="sm"
+              className="flex-1 h-7 text-[11px] bg-purple-600 hover:bg-purple-700 text-white animate-pulse"
+              onClick={(e) => {
+                e.stopPropagation();
+                onApprovePlan();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`approve-plan-${feature.id}`}
+            >
+              <FileText className="w-3 h-3 mr-1" />
+              Approve Plan
+            </Button>
+          )}
+          {feature.skipTests && onManualVerify ? (
+            <Button
+              variant="default"
+              size="sm"
+              className="flex-1 h-7 text-[11px]"
+              onClick={(e) => {
+                e.stopPropagation();
+                onManualVerify();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`manual-verify-${feature.id}`}
+            >
+              <CheckCircle2 className="w-3 h-3 mr-1" />
+              Verify
+            </Button>
+          ) : hasContext && onResume ? (
+            <Button
+              variant="default"
+              size="sm"
+              className="flex-1 h-7 text-[11px] bg-[var(--status-success)] hover:bg-[var(--status-success)]/90"
+              onClick={(e) => {
+                e.stopPropagation();
+                onResume();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`resume-feature-${feature.id}`}
+            >
+              <RotateCcw className="w-3 h-3 mr-1" />
+              Resume
+            </Button>
+          ) : onVerify ? (
+            <Button
+              variant="default"
+              size="sm"
+              className="flex-1 h-7 text-[11px] bg-[var(--status-success)] hover:bg-[var(--status-success)]/90"
+              onClick={(e) => {
+                e.stopPropagation();
+                onVerify();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`verify-feature-${feature.id}`}
+            >
+              <PlayCircle className="w-3 h-3 mr-1" />
+              Resume
+            </Button>
+          ) : null}
+          {onViewOutput && !feature.skipTests && (
+            <Button
+              variant="secondary"
+              size="sm"
+              className="h-7 text-[11px] px-2"
+              onClick={(e) => {
+                e.stopPropagation();
+                onViewOutput();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`view-output-inprogress-${feature.id}`}
+            >
+              <FileText className="w-3 h-3" />
+            </Button>
+          )}
+        </>
+      )}
+      {!isCurrentAutoTask && feature.status === "verified" && (
+        <>
+          {/* Logs button */}
+          {onViewOutput && (
+            <Button
+              variant="secondary"
+              size="sm"
+              className="flex-1 h-7 text-xs min-w-0"
+              onClick={(e) => {
+                e.stopPropagation();
+                onViewOutput();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`view-output-verified-${feature.id}`}
+            >
+              <FileText className="w-3 h-3 mr-1 shrink-0" />
+              <span className="truncate">Logs</span>
+            </Button>
+          )}
+          {/* Complete button */}
+          {onComplete && (
+            <Button
+              variant="default"
+              size="sm"
+              className="flex-1 h-7 text-xs min-w-0 bg-brand-500 hover:bg-brand-600"
+              onClick={(e) => {
+                e.stopPropagation();
+                onComplete();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`complete-${feature.id}`}
+            >
+              <Archive className="w-3 h-3 mr-1 shrink-0" />
+              <span className="truncate">Complete</span>
+            </Button>
+          )}
+        </>
+      )}
+      {!isCurrentAutoTask && feature.status === "waiting_approval" && (
+        <>
+          {/* Refine prompt button */}
+          {onFollowUp && (
+            <Button
+              variant="secondary"
+              size="sm"
+              className="flex-1 h-7 text-[11px] min-w-0"
+              onClick={(e) => {
+                e.stopPropagation();
+                onFollowUp();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`follow-up-${feature.id}`}
+            >
+              <Wand2 className="w-3 h-3 mr-1 shrink-0" />
+              <span className="truncate">Refine</span>
+            </Button>
+          )}
+          {/* Show Verify button if PR was created (changes are committed), otherwise show Mark as Verified button */}
+          {feature.prUrl && onManualVerify ? (
+            <Button
+              variant="default"
+              size="sm"
+              className="flex-1 h-7 text-[11px]"
+              onClick={(e) => {
+                e.stopPropagation();
+                onManualVerify();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`verify-${feature.id}`}
+            >
+              <CheckCircle2 className="w-3 h-3 mr-1" />
+              Verify
+            </Button>
+          ) : onManualVerify ? (
+            <Button
+              variant="default"
+              size="sm"
+              className="flex-1 h-7 text-[11px]"
+              onClick={(e) => {
+                e.stopPropagation();
+                onManualVerify();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`mark-as-verified-${feature.id}`}
+            >
+              <CheckCircle2 className="w-3 h-3 mr-1" />
+              Mark as Verified
+            </Button>
+          ) : null}
+        </>
+      )}
+      {!isCurrentAutoTask && feature.status === "backlog" && (
+        <>
+          <Button
+            variant="secondary"
+            size="sm"
+            className="flex-1 h-7 text-xs"
+            onClick={(e) => {
+              e.stopPropagation();
+              onEdit();
+            }}
+            onPointerDown={(e) => e.stopPropagation()}
+            data-testid={`edit-backlog-${feature.id}`}
+          >
+            <Edit className="w-3 h-3 mr-1" />
+            Edit
+          </Button>
+          {feature.planSpec?.content && onViewPlan && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-7 text-xs px-2"
+              onClick={(e) => {
+                e.stopPropagation();
+                onViewPlan();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`view-plan-${feature.id}`}
+              title="View Plan"
+            >
+              <Eye className="w-3 h-3" />
+            </Button>
+          )}
+          {onImplement && (
+            <Button
+              variant="default"
+              size="sm"
+              className="flex-1 h-7 text-xs"
+              onClick={(e) => {
+                e.stopPropagation();
+                onImplement();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`make-${feature.id}`}
+            >
+              <PlayCircle className="w-3 h-3 mr-1" />
+              Make
+            </Button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,266 @@
+import { useEffect, useMemo, useState } from "react";
+import { Feature, useAppStore } from "@/store/app-store";
+import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { AlertCircle, Lock, Hand, Sparkles } from "lucide-react";
+import { getBlockingDependencies } from "@/lib/dependency-resolver";
+
+interface CardBadgeProps {
+  children: React.ReactNode;
+  className?: string;
+  "data-testid"?: string;
+  title?: string;
+}
+
+/**
+ * Shared badge component matching the "Just Finished" badge style
+ * Used for priority badges and other card badges
+ */
+function CardBadge({
+  children,
+  className,
+  "data-testid": dataTestId,
+  title,
+}: CardBadgeProps) {
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium",
+        className
+      )}
+      data-testid={dataTestId}
+      title={title}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface CardBadgesProps {
+  feature: Feature;
+}
+
+export function CardBadges({ feature }: CardBadgesProps) {
+  const { enableDependencyBlocking, features } = useAppStore();
+
+  // Calculate blocking dependencies (if feature is in backlog and has incomplete dependencies)
+  const blockingDependencies = useMemo(() => {
+    if (!enableDependencyBlocking || feature.status !== "backlog") {
+      return [];
+    }
+    return getBlockingDependencies(feature, features);
+  }, [enableDependencyBlocking, feature, features]);
+
+  // Status badges row (error, blocked)
+  const showStatusBadges =
+    feature.error ||
+    (blockingDependencies.length > 0 &&
+      !feature.error &&
+      !feature.skipTests &&
+      feature.status === "backlog");
+
+  if (!showStatusBadges) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-1.5 px-3 pt-1.5 min-h-[24px]">
+      {/* Error badge */}
+      {feature.error && (
+        <TooltipProvider delayDuration={200}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className={cn(
+                  "inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium",
+                  "bg-[var(--status-error-bg)] border-[var(--status-error)]/40 text-[var(--status-error)]"
+                )}
+                data-testid={`error-badge-${feature.id}`}
+              >
+                <AlertCircle className="w-3 h-3" />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="text-xs max-w-[250px]">
+              <p>{feature.error}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+
+      {/* Blocked badge */}
+      {blockingDependencies.length > 0 &&
+        !feature.error &&
+        !feature.skipTests &&
+        feature.status === "backlog" && (
+          <TooltipProvider delayDuration={200}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div
+                  className={cn(
+                    "inline-flex items-center gap-1 rounded-full border-2 px-1.5 py-0.5 text-[10px] font-bold",
+                    "bg-orange-500/20 border-orange-500/50 text-orange-500"
+                  )}
+                  data-testid={`blocked-badge-${feature.id}`}
+                >
+                  <Lock className="w-3 h-3" />
+                </div>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" className="text-xs max-w-[250px]">
+                <p className="font-medium mb-1">
+                  Blocked by {blockingDependencies.length} incomplete{" "}
+                  {blockingDependencies.length === 1
+                    ? "dependency"
+                    : "dependencies"}
+                </p>
+                <p className="text-muted-foreground">
+                  {blockingDependencies
+                    .map((depId) => {
+                      const dep = features.find((f) => f.id === depId);
+                      return dep?.description || depId;
+                    })
+                    .join(", ")}
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+    </div>
+  );
+}
+
+interface PriorityBadgesProps {
+  feature: Feature;
+}
+
+export function PriorityBadges({ feature }: PriorityBadgesProps) {
+  const [currentTime, setCurrentTime] = useState(() => Date.now());
+
+  const isJustFinished = useMemo(() => {
+    if (
+      !feature.justFinishedAt ||
+      feature.status !== "waiting_approval" ||
+      feature.error
+    ) {
+      return false;
+    }
+    const finishedTime = new Date(feature.justFinishedAt).getTime();
+    const twoMinutes = 2 * 60 * 1000;
+    return currentTime - finishedTime < twoMinutes;
+  }, [feature.justFinishedAt, feature.status, feature.error, currentTime]);
+
+  useEffect(() => {
+    if (!feature.justFinishedAt || feature.status !== "waiting_approval") {
+      return;
+    }
+
+    const finishedTime = new Date(feature.justFinishedAt).getTime();
+    const twoMinutes = 2 * 60 * 1000;
+    const timeRemaining = twoMinutes - (currentTime - finishedTime);
+
+    if (timeRemaining <= 0) {
+      return;
+    }
+
+    // eslint-disable-next-line no-undef
+    const interval = setInterval(() => {
+      setCurrentTime(Date.now());
+    }, 1000);
+
+    return () => {
+      // eslint-disable-next-line no-undef
+      clearInterval(interval);
+    };
+  }, [feature.justFinishedAt, feature.status, currentTime]);
+
+  const showPriorityBadges =
+    feature.priority ||
+    (feature.skipTests && !feature.error && feature.status === "backlog") ||
+    isJustFinished;
+
+  if (!showPriorityBadges) {
+    return null;
+  }
+
+  return (
+    <div className="absolute top-2 left-2 flex items-center gap-1.5">
+      {/* Priority badge */}
+      {feature.priority && (
+        <TooltipProvider delayDuration={200}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <CardBadge
+                className={cn(
+                  "bg-opacity-90 border rounded-[6px] px-1.5 py-0.5 flex items-center justify-center border-[1.5px] w-5 h-5", // badge style from example
+                  feature.priority === 1 &&
+                    "bg-[var(--status-error-bg)] border-[var(--status-error)]/40 text-[var(--status-error)]",
+                  feature.priority === 2 &&
+                    "bg-[var(--status-warning-bg)] border-[var(--status-warning)]/40 text-[var(--status-warning)]",
+                  feature.priority === 3 &&
+                    "bg-[var(--status-info-bg)] border-[var(--status-info)]/40 text-[var(--status-info)]"
+                )}
+                data-testid={`priority-badge-${feature.id}`}
+              >
+                {feature.priority === 1 ? (
+                  <span className="font-bold text-xs flex items-center gap-0.5">
+                    H
+                  </span>
+                ) : feature.priority === 2 ? (
+                  <span className="font-bold text-xs flex items-center gap-0.5">
+                    M
+                  </span>
+                ) : (
+                  <span className="font-bold text-xs flex items-center gap-0.5">
+                    L
+                  </span>
+                )}
+              </CardBadge>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="text-xs">
+              <p>
+                {feature.priority === 1
+                  ? "High Priority"
+                  : feature.priority === 2
+                    ? "Medium Priority"
+                    : "Low Priority"}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+      {/* Manual verification badge */}
+      {feature.skipTests && !feature.error && feature.status === "backlog" && (
+        <TooltipProvider delayDuration={200}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <CardBadge
+                className="bg-[var(--status-warning-bg)] border-[var(--status-warning)]/40 text-[var(--status-warning)]"
+                data-testid={`skip-tests-badge-${feature.id}`}
+              >
+                <Hand className="w-3 h-3" />
+              </CardBadge>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="text-xs">
+              <p>Manual verification required</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+
+      {/* Just Finished badge */}
+      {isJustFinished && (
+        <CardBadge
+          className="bg-[var(--status-success-bg)] border-[var(--status-success)]/40 text-[var(--status-success)] animate-pulse"
+          data-testid={`just-finished-badge-${feature.id}`}
+          title="Agent just finished working on this feature"
+        >
+          <Sparkles className="w-3 h-3" />
+        </CardBadge>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,82 @@
+import { Feature } from "@/store/app-store";
+import { GitBranch, GitPullRequest, ExternalLink, CheckCircle2, Circle } from "lucide-react";
+
+interface CardContentSectionsProps {
+  feature: Feature;
+  useWorktrees: boolean;
+  showSteps: boolean;
+}
+
+export function CardContentSections({
+  feature,
+  useWorktrees,
+  showSteps,
+}: CardContentSectionsProps) {
+  return (
+    <>
+      {/* Target Branch Display */}
+      {useWorktrees && feature.branchName && (
+        <div className="mb-2 flex items-center gap-1.5 text-[11px] text-muted-foreground">
+          <GitBranch className="w-3 h-3 shrink-0" />
+          <span className="font-mono truncate" title={feature.branchName}>
+            {feature.branchName}
+          </span>
+        </div>
+      )}
+
+      {/* PR URL Display */}
+      {typeof feature.prUrl === "string" &&
+        /^https?:\/\//i.test(feature.prUrl) &&
+        (() => {
+          const prNumber = feature.prUrl.split("/").pop();
+          return (
+            <div className="mb-2">
+              <a
+                href={feature.prUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={(e) => e.stopPropagation()}
+                onPointerDown={(e) => e.stopPropagation()}
+                className="inline-flex items-center gap-1.5 text-[11px] text-purple-500 hover:text-purple-400 transition-colors"
+                title={feature.prUrl}
+                data-testid={`pr-url-${feature.id}`}
+              >
+                <GitPullRequest className="w-3 h-3 shrink-0" />
+                <span className="truncate max-w-[150px]">
+                  {prNumber ? `Pull Request #${prNumber}` : "Pull Request"}
+                </span>
+                <ExternalLink className="w-2.5 h-2.5 shrink-0" />
+              </a>
+            </div>
+          );
+        })()}
+
+      {/* Steps Preview */}
+      {showSteps && feature.steps && feature.steps.length > 0 && (
+        <div className="mb-3 space-y-1.5">
+          {feature.steps.slice(0, 3).map((step, index) => (
+            <div
+              key={index}
+              className="flex items-start gap-2 text-[11px] text-muted-foreground/80"
+            >
+              {feature.status === "verified" ? (
+                <CheckCircle2 className="w-3 h-3 mt-0.5 text-[var(--status-success)] shrink-0" />
+              ) : (
+                <Circle className="w-3 h-3 mt-0.5 shrink-0 text-muted-foreground/50" />
+              )}
+              <span className="break-words hyphens-auto line-clamp-2 leading-relaxed">
+                {step}
+              </span>
+            </div>
+          ))}
+          {feature.steps.length > 3 && (
+            <p className="text-[10px] text-muted-foreground/60 pl-5">
+              +{feature.steps.length - 3} more
+            </p>
+          )}
+        </div>
+      )}
+    </>
+  );
+}
+

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

@@ -0,0 +1,330 @@
+import { useState } from "react";
+import { Feature } from "@/store/app-store";
+import { cn } from "@/lib/utils";
+import {
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  GripVertical,
+  Edit,
+  Loader2,
+  Trash2,
+  FileText,
+  MoreVertical,
+  ChevronDown,
+  ChevronUp,
+  Cpu,
+} from "lucide-react";
+import { CountUpTimer } from "@/components/ui/count-up-timer";
+import { formatModelName, DEFAULT_MODEL } from "@/lib/agent-context-parser";
+import { DeleteConfirmDialog } from "@/components/ui/delete-confirm-dialog";
+
+interface CardHeaderProps {
+  feature: Feature;
+  isDraggable: boolean;
+  isCurrentAutoTask: boolean;
+  onEdit: () => void;
+  onDelete: () => void;
+  onViewOutput?: () => void;
+}
+
+export function CardHeaderSection({
+  feature,
+  isDraggable,
+  isCurrentAutoTask,
+  onEdit,
+  onDelete,
+  onViewOutput,
+}: CardHeaderProps) {
+  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+
+  const handleDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsDeleteDialogOpen(true);
+  };
+
+  const handleConfirmDelete = () => {
+    onDelete();
+  };
+
+  return (
+    <CardHeader className="p-3 pb-2 block">
+      {/* Running task header */}
+      {isCurrentAutoTask && (
+        <div className="absolute top-2 right-2 flex items-center gap-1">
+          <div className="flex items-center justify-center gap-2 bg-[var(--status-in-progress)]/15 border border-[var(--status-in-progress)]/50 rounded-md px-2 py-0.5">
+            <Loader2 className="w-3.5 h-3.5 text-[var(--status-in-progress)] animate-spin" />
+            {feature.startedAt && (
+              <CountUpTimer
+                startedAt={feature.startedAt}
+                className="text-[var(--status-in-progress)] text-[10px]"
+              />
+            )}
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0 hover:bg-muted/80 rounded-md"
+                onClick={(e) => e.stopPropagation()}
+                onPointerDown={(e) => e.stopPropagation()}
+                data-testid={`menu-running-${feature.id}`}
+              >
+                <MoreVertical className="w-3.5 h-3.5 text-muted-foreground" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-36">
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onEdit();
+                }}
+                data-testid={`edit-running-${feature.id}`}
+                className="text-xs"
+              >
+                <Edit className="w-3 h-3 mr-2" />
+                Edit
+              </DropdownMenuItem>
+              {/* Model info in dropdown */}
+              <div className="px-2 py-1.5 text-[10px] text-muted-foreground border-t mt-1 pt-1.5">
+                <div className="flex items-center gap-1">
+                  <Cpu className="w-3 h-3" />
+                  <span>
+                    {formatModelName(feature.model ?? DEFAULT_MODEL)}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )}
+
+      {/* Backlog header */}
+      {!isCurrentAutoTask && feature.status === "backlog" && (
+        <div className="absolute top-2 right-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-destructive"
+            onClick={handleDeleteClick}
+            onPointerDown={(e) => e.stopPropagation()}
+            data-testid={`delete-backlog-${feature.id}`}
+          >
+            <Trash2 className="w-4 h-4" />
+          </Button>
+        </div>
+      )}
+
+      {/* Waiting approval / Verified header */}
+      {!isCurrentAutoTask &&
+        (feature.status === "waiting_approval" ||
+          feature.status === "verified") && (
+          <>
+            <div className="absolute top-2 right-2 flex items-center gap-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-foreground"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onEdit();
+                }}
+                onPointerDown={(e) => e.stopPropagation()}
+                data-testid={`edit-${
+                  feature.status === "waiting_approval"
+                    ? "waiting"
+                    : "verified"
+                }-${feature.id}`}
+                title="Edit"
+              >
+                <Edit className="w-4 h-4" />
+              </Button>
+              {onViewOutput && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-foreground"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onViewOutput();
+                  }}
+                  onPointerDown={(e) => e.stopPropagation()}
+                  data-testid={`logs-${
+                    feature.status === "waiting_approval"
+                      ? "waiting"
+                      : "verified"
+                  }-${feature.id}`}
+                  title="Logs"
+                >
+                  <FileText className="w-4 h-4" />
+                </Button>
+              )}
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-destructive"
+                onClick={handleDeleteClick}
+                onPointerDown={(e) => e.stopPropagation()}
+                data-testid={`delete-${
+                  feature.status === "waiting_approval"
+                    ? "waiting"
+                    : "verified"
+                }-${feature.id}`}
+                title="Delete"
+              >
+                <Trash2 className="w-4 h-4" />
+              </Button>
+            </div>
+          </>
+        )}
+
+      {/* In progress header */}
+      {!isCurrentAutoTask && feature.status === "in_progress" && (
+        <>
+          <div className="absolute top-2 right-2 flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-destructive"
+              onClick={handleDeleteClick}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`delete-feature-${feature.id}`}
+              title="Delete"
+            >
+              <Trash2 className="w-4 h-4" />
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 w-6 p-0 hover:bg-muted/80 rounded-md"
+                  onClick={(e) => e.stopPropagation()}
+                  onPointerDown={(e) => e.stopPropagation()}
+                  data-testid={`menu-${feature.id}`}
+                >
+                  <MoreVertical className="w-3.5 h-3.5 text-muted-foreground" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-36">
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit();
+                  }}
+                  data-testid={`edit-feature-${feature.id}`}
+                  className="text-xs"
+                >
+                  <Edit className="w-3 h-3 mr-2" />
+                  Edit
+                </DropdownMenuItem>
+                {onViewOutput && (
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onViewOutput();
+                    }}
+                    data-testid={`view-logs-${feature.id}`}
+                    className="text-xs"
+                  >
+                    <FileText className="w-3 h-3 mr-2" />
+                    View Logs
+                  </DropdownMenuItem>
+                )}
+                {/* Model info in dropdown */}
+                <div className="px-2 py-1.5 text-[10px] text-muted-foreground border-t mt-1 pt-1.5">
+                  <div className="flex items-center gap-1">
+                    <Cpu className="w-3 h-3" />
+                    <span>
+                      {formatModelName(feature.model ?? DEFAULT_MODEL)}
+                    </span>
+                  </div>
+                </div>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </>
+      )}
+
+      {/* Title and description */}
+      <div className="flex items-start gap-2">
+        {isDraggable && (
+          <div
+            className="-ml-2 -mt-1 p-2 touch-none opacity-40 hover:opacity-70 transition-opacity"
+            data-testid={`drag-handle-${feature.id}`}
+          >
+            <GripVertical className="w-3.5 h-3.5 text-muted-foreground" />
+          </div>
+        )}
+        <div className="flex-1 min-w-0 overflow-hidden">
+          {feature.titleGenerating ? (
+            <div className="flex items-center gap-1.5 mb-1">
+              <Loader2 className="w-3 h-3 animate-spin text-muted-foreground" />
+              <span className="text-xs text-muted-foreground italic">
+                Generating title...
+              </span>
+            </div>
+          ) : feature.title ? (
+            <CardTitle className="text-sm font-semibold text-foreground mb-1 line-clamp-2">
+              {feature.title}
+            </CardTitle>
+          ) : null}
+          <CardDescription
+            className={cn(
+              "text-xs leading-snug break-words hyphens-auto overflow-hidden text-muted-foreground",
+              !isDescriptionExpanded && "line-clamp-3"
+            )}
+          >
+            {feature.description || feature.summary || feature.id}
+          </CardDescription>
+          {(feature.description || feature.summary || "").length > 100 && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsDescriptionExpanded(!isDescriptionExpanded);
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              className="flex items-center gap-0.5 text-[10px] text-muted-foreground/70 hover:text-muted-foreground mt-1.5 transition-colors"
+              data-testid={`toggle-description-${feature.id}`}
+            >
+              {isDescriptionExpanded ? (
+                <>
+                  <ChevronUp className="w-3 h-3" />
+                  <span>Less</span>
+                </>
+              ) : (
+                <>
+                  <ChevronDown className="w-3 h-3" />
+                  <span>More</span>
+                </>
+              )}
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Delete Confirmation Dialog */}
+      <DeleteConfirmDialog
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+        onConfirm={handleConfirmDelete}
+        title="Delete Feature"
+        description="Are you sure you want to delete this feature? This action cannot be undone."
+        testId="delete-confirmation-dialog"
+        confirmTestId="confirm-delete-button"
+      />
+    </CardHeader>
+  );
+}
+

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

@@ -0,0 +1,214 @@
+import React, { memo } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "@/lib/utils";
+import { Card, CardContent } from "@/components/ui/card";
+import { Feature, useAppStore } from "@/store/app-store";
+import { CardBadges, PriorityBadges } from "./card-badges";
+import { CardHeaderSection } from "./card-header";
+import { CardContentSections } from "./card-content-sections";
+import { AgentInfoPanel } from "./agent-info-panel";
+import { CardActions } from "./card-actions";
+
+interface KanbanCardProps {
+  feature: Feature;
+  onEdit: () => void;
+  onDelete: () => void;
+  onViewOutput?: () => void;
+  onVerify?: () => void;
+  onResume?: () => void;
+  onForceStop?: () => void;
+  onManualVerify?: () => void;
+  onMoveBackToInProgress?: () => void;
+  onFollowUp?: () => void;
+  onImplement?: () => void;
+  onComplete?: () => void;
+  onViewPlan?: () => void;
+  onApprovePlan?: () => void;
+  hasContext?: boolean;
+  isCurrentAutoTask?: boolean;
+  shortcutKey?: string;
+  contextContent?: string;
+  summary?: string;
+  opacity?: number;
+  glassmorphism?: boolean;
+  cardBorderEnabled?: boolean;
+  cardBorderOpacity?: number;
+}
+
+export const KanbanCard = memo(function KanbanCard({
+  feature,
+  onEdit,
+  onDelete,
+  onViewOutput,
+  onVerify,
+  onResume,
+  onForceStop,
+  onManualVerify,
+  onMoveBackToInProgress: _onMoveBackToInProgress,
+  onFollowUp,
+  onImplement,
+  onComplete,
+  onViewPlan,
+  onApprovePlan,
+  hasContext,
+  isCurrentAutoTask,
+  shortcutKey,
+  contextContent,
+  summary,
+  opacity = 100,
+  glassmorphism = true,
+  cardBorderEnabled = true,
+  cardBorderOpacity = 100,
+}: KanbanCardProps) {
+  const { kanbanCardDetailLevel, useWorktrees } = useAppStore();
+
+  const showSteps =
+    kanbanCardDetailLevel === "standard" ||
+    kanbanCardDetailLevel === "detailed";
+
+  const isDraggable =
+    feature.status === "backlog" ||
+    feature.status === "waiting_approval" ||
+    feature.status === "verified" ||
+    (feature.status === "in_progress" && !isCurrentAutoTask);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: feature.id,
+    disabled: !isDraggable,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : undefined,
+  };
+
+  const borderStyle: React.CSSProperties = { ...style };
+  if (!cardBorderEnabled) {
+    (borderStyle as Record<string, string>).borderWidth = "0px";
+    (borderStyle as Record<string, string>).borderColor = "transparent";
+  } else if (cardBorderOpacity !== 100) {
+    (borderStyle as Record<string, string>).borderWidth = "1px";
+    (borderStyle as Record<string, string>).borderColor =
+      `color-mix(in oklch, var(--border) ${cardBorderOpacity}%, transparent)`;
+  }
+
+  const cardElement = (
+    <Card
+      ref={setNodeRef}
+      style={isCurrentAutoTask ? style : borderStyle}
+      className={cn(
+        "cursor-grab active:cursor-grabbing relative kanban-card-content select-none",
+        "transition-all duration-200 ease-out",
+        // Premium shadow system
+        "shadow-sm hover:shadow-md hover:shadow-black/10",
+        // Subtle lift on hover
+        "hover:-translate-y-0.5",
+        !isCurrentAutoTask &&
+          cardBorderEnabled &&
+          cardBorderOpacity === 100 &&
+          "border-border/50",
+        !isCurrentAutoTask &&
+          cardBorderEnabled &&
+          cardBorderOpacity !== 100 &&
+          "border",
+        !isDragging && "bg-transparent",
+        !glassmorphism && "backdrop-blur-[0px]!",
+        isDragging && "scale-105 shadow-xl shadow-black/20 rotate-1",
+        // Error state - using CSS variable
+        feature.error &&
+          !isCurrentAutoTask &&
+          "border-[var(--status-error)] border-2 shadow-[var(--status-error-bg)] shadow-lg",
+        !isDraggable && "cursor-default"
+      )}
+      data-testid={`kanban-card-${feature.id}`}
+      onDoubleClick={onEdit}
+      {...attributes}
+      {...(isDraggable ? listeners : {})}
+    >
+      {/* Background overlay with opacity */}
+      {!isDragging && (
+        <div
+          className={cn(
+            "absolute inset-0 rounded-xl bg-card -z-10",
+            glassmorphism && "backdrop-blur-sm"
+          )}
+          style={{ opacity: opacity / 100 }}
+        />
+      )}
+
+      {/* Status Badges Row */}
+      <CardBadges feature={feature} />
+
+      {/* Category row */}
+      <div className="px-3 pt-4">
+        <span className="text-[11px] text-muted-foreground/70 font-medium">
+          {feature.category}
+        </span>
+      </div>
+
+      {/* Priority and Manual Verification badges */}
+      <PriorityBadges feature={feature} />
+
+      {/* Card Header */}
+      <CardHeaderSection
+        feature={feature}
+        isDraggable={isDraggable}
+        isCurrentAutoTask={!!isCurrentAutoTask}
+        onEdit={onEdit}
+        onDelete={onDelete}
+        onViewOutput={onViewOutput}
+      />
+
+      <CardContent className="px-3 pt-0 pb-0">
+        {/* Content Sections */}
+        <CardContentSections
+          feature={feature}
+          useWorktrees={useWorktrees}
+          showSteps={showSteps}
+        />
+
+        {/* Agent Info Panel */}
+        <AgentInfoPanel
+          feature={feature}
+          contextContent={contextContent}
+          summary={summary}
+          isCurrentAutoTask={isCurrentAutoTask}
+        />
+
+        {/* Actions */}
+        <CardActions
+          feature={feature}
+          isCurrentAutoTask={!!isCurrentAutoTask}
+          hasContext={hasContext}
+          shortcutKey={shortcutKey}
+          onEdit={onEdit}
+          onViewOutput={onViewOutput}
+          onVerify={onVerify}
+          onResume={onResume}
+          onForceStop={onForceStop}
+          onManualVerify={onManualVerify}
+          onFollowUp={onFollowUp}
+          onImplement={onImplement}
+          onComplete={onComplete}
+          onViewPlan={onViewPlan}
+          onApprovePlan={onApprovePlan}
+        />
+      </CardContent>
+    </Card>
+  );
+
+  // Wrap with animated border when in progress
+  if (isCurrentAutoTask) {
+    return <div className="animated-border-wrapper">{cardElement}</div>;
+  }
+
+  return cardElement;
+});

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

@@ -0,0 +1,75 @@
+import { Feature } from "@/store/app-store";
+import { AgentTaskInfo } from "@/lib/agent-context-parser";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Markdown } from "@/components/ui/markdown";
+import { Sparkles } from "lucide-react";
+
+interface SummaryDialogProps {
+  feature: Feature;
+  agentInfo: AgentTaskInfo | null;
+  summary?: string;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function SummaryDialog({
+  feature,
+  agentInfo,
+  summary,
+  isOpen,
+  onOpenChange,
+}: SummaryDialogProps) {
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="max-w-4xl max-h-[80vh] overflow-hidden flex flex-col"
+        data-testid={`summary-dialog-${feature.id}`}
+      >
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Sparkles className="w-5 h-5 text-[var(--status-success)]" />
+            Implementation Summary
+          </DialogTitle>
+          <DialogDescription
+            className="text-sm"
+            title={feature.description || feature.summary || ""}
+          >
+            {(() => {
+              const displayText =
+                feature.description || feature.summary || "No description";
+              return displayText.length > 100
+                ? `${displayText.slice(0, 100)}...`
+                : displayText;
+            })()}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex-1 overflow-y-auto p-4 bg-card rounded-lg border border-border/50">
+          <Markdown>
+            {feature.summary ||
+              summary ||
+              agentInfo?.summary ||
+              "No summary available"}
+          </Markdown>
+        </div>
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            data-testid="close-summary-button"
+          >
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+

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

@@ -11,6 +11,7 @@ import {
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import { HotkeyButton } from "@/components/ui/hotkey-button";
+import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { CategoryAutocomplete } from "@/components/ui/category-autocomplete";
 import {
@@ -58,6 +59,7 @@ interface AddFeatureDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onAdd: (feature: {
+    title: string;
     category: string;
     description: string;
     steps: string[];
@@ -99,6 +101,7 @@ export function AddFeatureDialog({
   const navigate = useNavigate();
   const [useCurrentBranch, setUseCurrentBranch] = useState(true);
   const [newFeature, setNewFeature] = useState({
+    title: "",
     category: "",
     description: "",
     steps: [""],
@@ -126,16 +129,25 @@ export function AddFeatureDialog({
     enhancementModel,
     defaultPlanningMode,
     defaultRequirePlanApproval,
+    defaultAIProfileId,
     useWorktrees,
   } = useAppStore();
 
   // Sync defaults when dialog opens
   useEffect(() => {
     if (open) {
+      // Find the default profile if one is set
+      const defaultProfile = defaultAIProfileId
+        ? aiProfiles.find((p) => p.id === defaultAIProfileId)
+        : null;
+
       setNewFeature((prev) => ({
         ...prev,
         skipTests: defaultSkipTests,
         branchName: defaultBranch || "",
+        // Use default profile's model/thinkingLevel if set, else fallback to defaults
+        model: defaultProfile?.model ?? "opus",
+        thinkingLevel: defaultProfile?.thinkingLevel ?? "none",
       }));
       setUseCurrentBranch(true);
       setPlanningMode(defaultPlanningMode);
@@ -147,6 +159,8 @@ export function AddFeatureDialog({
     defaultBranch,
     defaultPlanningMode,
     defaultRequirePlanApproval,
+    defaultAIProfileId,
+    aiProfiles,
   ]);
 
   const handleAdd = () => {
@@ -175,6 +189,7 @@ export function AddFeatureDialog({
       : newFeature.branchName || "";
 
     onAdd({
+      title: newFeature.title,
       category,
       description: newFeature.description,
       steps: newFeature.steps.filter((s) => s.trim()),
@@ -191,6 +206,7 @@ export function AddFeatureDialog({
 
     // Reset form
     setNewFeature({
+      title: "",
       category: "",
       description: "",
       steps: [""],
@@ -339,6 +355,17 @@ export function AddFeatureDialog({
                 error={descriptionError}
               />
             </div>
+            <div className="space-y-2">
+              <Label htmlFor="title">Title (optional)</Label>
+              <Input
+                id="title"
+                value={newFeature.title}
+                onChange={(e) =>
+                  setNewFeature({ ...newFeature, title: e.target.value })
+                }
+                placeholder="Leave blank to auto-generate"
+              />
+            </div>
             <div className="flex w-fit items-center gap-3 select-none cursor-default">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>

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

@@ -29,13 +29,15 @@ interface CreatePRDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   worktree: WorktreeInfo | null;
-  onCreated: () => void;
+  projectPath: string | null;
+  onCreated: (prUrl?: string) => void;
 }
 
 export function CreatePRDialog({
   open,
   onOpenChange,
   worktree,
+  projectPath,
   onCreated,
 }: CreatePRDialogProps) {
   const [title, setTitle] = useState("");
@@ -96,6 +98,7 @@ export function CreatePRDialog({
         return;
       }
       const result = await api.worktree.createPR(worktree.path, {
+        projectPath: projectPath || undefined,
         commitMessage: commitMessage || undefined,
         prTitle: title || worktree.branch,
         prBody: body || `Changes from branch ${worktree.branch}`,
@@ -108,13 +111,25 @@ export function CreatePRDialog({
           setPrUrl(result.result.prUrl);
           // Mark operation as completed for refresh on close
           operationCompletedRef.current = true;
-          toast.success("Pull request created!", {
-            description: `PR created from ${result.result.branch}`,
-            action: {
-              label: "View PR",
-              onClick: () => window.open(result.result!.prUrl!, "_blank"),
-            },
-          });
+
+          // Show different message based on whether PR already existed
+          if (result.result.prAlreadyExisted) {
+            toast.success("Pull request found!", {
+              description: `PR already exists for ${result.result.branch}`,
+              action: {
+                label: "View PR",
+                onClick: () => window.open(result.result!.prUrl!, "_blank"),
+              },
+            });
+          } else {
+            toast.success("Pull request created!", {
+              description: `PR created from ${result.result.branch}`,
+              action: {
+                label: "View PR",
+                onClick: () => window.open(result.result!.prUrl!, "_blank"),
+              },
+            });
+          }
           // Don't call onCreated() here - keep dialog open to show success message
           // onCreated() will be called when user closes the dialog
         } else {
@@ -200,7 +215,8 @@ export function CreatePRDialog({
     // Only call onCreated() if an actual operation completed
     // This prevents unnecessary refreshes when user cancels
     if (operationCompletedRef.current) {
-      onCreated();
+      // Pass the PR URL if one was created
+      onCreated(prUrl || undefined);
     }
     onOpenChange(false);
     // State reset is handled by useEffect when open becomes false

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

@@ -11,6 +11,7 @@ import {
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import { HotkeyButton } from "@/components/ui/hotkey-button";
+import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { CategoryAutocomplete } from "@/components/ui/category-autocomplete";
 import {
@@ -61,6 +62,7 @@ interface EditFeatureDialogProps {
   onUpdate: (
     featureId: string,
     updates: {
+      title: string;
       category: string;
       description: string;
       steps: string[];
@@ -159,6 +161,7 @@ export function EditFeatureDialog({
       : editingFeature.branchName || "";
 
     const updates = {
+      title: editingFeature.title ?? "",
       category: editingFeature.category,
       description: editingFeature.description,
       steps: editingFeature.steps,
@@ -311,6 +314,21 @@ export function EditFeatureDialog({
                 data-testid="edit-feature-description"
               />
             </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-title">Title (optional)</Label>
+              <Input
+                id="edit-title"
+                value={editingFeature.title ?? ""}
+                onChange={(e) =>
+                  setEditingFeature({
+                    ...editingFeature,
+                    title: e.target.value,
+                  })
+                }
+                placeholder="Leave blank to auto-generate"
+                data-testid="edit-feature-title"
+              />
+            </div>
             <div className="flex w-fit items-center gap-3 select-none cursor-default">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>

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

@@ -41,6 +41,7 @@ interface UseBoardActionsProps {
   outputFeature: Feature | null;
   projectPath: string | null;
   onWorktreeCreated?: () => void;
+  onWorktreeAutoSelect?: (worktree: { path: string; branch: string }) => void;
   currentWorktreeBranch: string | null; // Branch name of the selected worktree for filtering
 }
 
@@ -68,6 +69,7 @@ export function useBoardActions({
   outputFeature,
   projectPath,
   onWorktreeCreated,
+  onWorktreeAutoSelect,
   currentWorktreeBranch,
 }: UseBoardActionsProps) {
   const {
@@ -87,6 +89,7 @@ export function useBoardActions({
 
   const handleAddFeature = useCallback(
     async (featureData: {
+      title: string;
       category: string;
       description: string;
       steps: string[];
@@ -114,15 +117,20 @@ export function useBoardActions({
               currentProject.path,
               finalBranchName
             );
-            if (result.success) {
+            if (result.success && result.worktree) {
               console.log(
                 `[Board] Worktree for branch "${finalBranchName}" ${
                   result.worktree?.isNew ? "created" : "already exists"
                 }`
               );
+              // Auto-select the worktree when creating a feature for it
+              onWorktreeAutoSelect?.({
+                path: result.worktree.path,
+                branch: result.worktree.branch,
+              });
               // Refresh worktree list in UI
               onWorktreeCreated?.();
-            } else {
+            } else if (!result.success) {
               console.error(
                 `[Board] Failed to create worktree for branch "${finalBranchName}":`,
                 result.error
@@ -141,8 +149,14 @@ export function useBoardActions({
         }
       }
 
+      // Check if we need to generate a title
+      const needsTitleGeneration =
+        !featureData.title.trim() && featureData.description.trim();
+
       const newFeatureData = {
         ...featureData,
+        title: featureData.title,
+        titleGenerating: needsTitleGeneration,
         status: "backlog" as const,
         branchName: finalBranchName,
       };
@@ -150,14 +164,56 @@ export function useBoardActions({
       // Must await to ensure feature exists on server before user can drag it
       await persistFeatureCreate(createdFeature);
       saveCategory(featureData.category);
+
+      // Generate title in the background if needed (non-blocking)
+      if (needsTitleGeneration) {
+        const api = getElectronAPI();
+        if (api?.features?.generateTitle) {
+          api.features
+            .generateTitle(featureData.description)
+            .then((result) => {
+              if (result.success && result.title) {
+                const titleUpdates = {
+                  title: result.title,
+                  titleGenerating: false,
+                };
+                updateFeature(createdFeature.id, titleUpdates);
+                persistFeatureUpdate(createdFeature.id, titleUpdates);
+              } else {
+                // Clear generating flag even if failed
+                const titleUpdates = { titleGenerating: false };
+                updateFeature(createdFeature.id, titleUpdates);
+                persistFeatureUpdate(createdFeature.id, titleUpdates);
+              }
+            })
+            .catch((error) => {
+              console.error("[Board] Error generating title:", error);
+              // Clear generating flag on error
+              const titleUpdates = { titleGenerating: false };
+              updateFeature(createdFeature.id, titleUpdates);
+              persistFeatureUpdate(createdFeature.id, titleUpdates);
+            });
+        }
+      }
     },
-    [addFeature, persistFeatureCreate, saveCategory, useWorktrees, currentProject, onWorktreeCreated]
+    [
+      addFeature,
+      persistFeatureCreate,
+      persistFeatureUpdate,
+      updateFeature,
+      saveCategory,
+      useWorktrees,
+      currentProject,
+      onWorktreeCreated,
+      onWorktreeAutoSelect,
+    ]
   );
 
   const handleUpdateFeature = useCallback(
     async (
       featureId: string,
       updates: {
+        title: string;
         category: string;
         description: string;
         steps: string[];
@@ -212,6 +268,7 @@ export function useBoardActions({
 
       const finalUpdates = {
         ...updates,
+        title: updates.title,
         branchName: finalBranchName,
       };
 
@@ -222,7 +279,15 @@ export function useBoardActions({
       }
       setEditingFeature(null);
     },
-    [updateFeature, persistFeatureUpdate, saveCategory, setEditingFeature, useWorktrees, currentProject, onWorktreeCreated]
+    [
+      updateFeature,
+      persistFeatureUpdate,
+      saveCategory,
+      setEditingFeature,
+      useWorktrees,
+      currentProject,
+      onWorktreeCreated,
+    ]
   );
 
   const handleDeleteFeature = useCallback(

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

@@ -194,7 +194,6 @@ export function KanbanBoard({
                           onMoveBackToInProgress(feature)
                         }
                         onFollowUp={() => onFollowUp(feature)}
-                        onCommit={() => onCommit(feature)}
                         onComplete={() => onComplete(feature)}
                         onImplement={() => onImplement(feature)}
                         onViewPlan={() => onViewPlan(feature)}

apps/ui/src/components/views/board-view/worktree-panel/components/worktree-actions-dropdown.tsx

@@ -19,9 +19,11 @@ import {
   Play,
   Square,
   Globe,
+  MessageSquare,
+  GitMerge,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
-import type { WorktreeInfo, DevServerInfo } from "../types";
+import type { WorktreeInfo, DevServerInfo, PRInfo } from "../types";
 
 interface WorktreeActionsDropdownProps {
   worktree: WorktreeInfo;
@@ -40,6 +42,8 @@ interface WorktreeActionsDropdownProps {
   onOpenInEditor: (worktree: WorktreeInfo) => void;
   onCommit: (worktree: WorktreeInfo) => void;
   onCreatePR: (worktree: WorktreeInfo) => void;
+  onAddressPRComments: (worktree: WorktreeInfo, prInfo: PRInfo) => void;
+  onResolveConflicts: (worktree: WorktreeInfo) => void;
   onDeleteWorktree: (worktree: WorktreeInfo) => void;
   onStartDevServer: (worktree: WorktreeInfo) => void;
   onStopDevServer: (worktree: WorktreeInfo) => void;
@@ -63,11 +67,16 @@ export function WorktreeActionsDropdown({
   onOpenInEditor,
   onCommit,
   onCreatePR,
+  onAddressPRComments,
+  onResolveConflicts,
   onDeleteWorktree,
   onStartDevServer,
   onStopDevServer,
   onOpenDevServerUrl,
 }: WorktreeActionsDropdownProps) {
+  // Check if there's a PR associated with this worktree from stored metadata
+  const hasPR = !!worktree.pr;
+
   return (
     <DropdownMenu onOpenChange={onOpenChange}>
       <DropdownMenuTrigger asChild>
@@ -154,6 +163,15 @@ export function WorktreeActionsDropdown({
             </span>
           )}
         </DropdownMenuItem>
+        {!worktree.isMain && (
+          <DropdownMenuItem
+            onClick={() => onResolveConflicts(worktree)}
+            className="text-xs text-purple-500 focus:text-purple-600"
+          >
+            <GitMerge className="w-3.5 h-3.5 mr-2" />
+            Pull & Resolve Conflicts
+          </DropdownMenuItem>
+        )}
         <DropdownMenuSeparator />
         <DropdownMenuItem
           onClick={() => onOpenInEditor(worktree)}
@@ -170,12 +188,50 @@ export function WorktreeActionsDropdown({
           </DropdownMenuItem>
         )}
         {/* Show PR option for non-primary worktrees, or primary worktree with changes */}
-        {(!worktree.isMain || worktree.hasChanges) && (
+        {(!worktree.isMain || worktree.hasChanges) && !hasPR && (
           <DropdownMenuItem onClick={() => onCreatePR(worktree)} className="text-xs">
             <GitPullRequest className="w-3.5 h-3.5 mr-2" />
             Create Pull Request
           </DropdownMenuItem>
         )}
+        {/* Show PR info and Address Comments button if PR exists */}
+        {!worktree.isMain && hasPR && worktree.pr && (
+          <>
+            <DropdownMenuItem
+              onClick={() => {
+                window.open(worktree.pr!.url, "_blank");
+              }}
+              className="text-xs"
+            >
+              <GitPullRequest className="w-3 h-3 mr-2" />
+              PR #{worktree.pr.number}
+              <span className="ml-auto text-[10px] bg-green-500/20 text-green-600 px-1.5 py-0.5 rounded uppercase">
+                {worktree.pr.state}
+              </span>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                // Convert stored PR info to the full PRInfo format for the handler
+                // The handler will fetch full comments from GitHub
+                const prInfo: PRInfo = {
+                  number: worktree.pr!.number,
+                  title: worktree.pr!.title,
+                  url: worktree.pr!.url,
+                  state: worktree.pr!.state,
+                  author: "", // Will be fetched
+                  body: "",   // Will be fetched
+                  comments: [],
+                  reviewComments: [],
+                };
+                onAddressPRComments(worktree, prInfo);
+              }}
+              className="text-xs text-blue-500 focus:text-blue-600"
+            >
+              <MessageSquare className="w-3.5 h-3.5 mr-2" />
+              Address PR Comments
+            </DropdownMenuItem>
+          </>
+        )}
         {!worktree.isMain && (
           <>
             <DropdownMenuSeparator />

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

@@ -1,14 +1,22 @@
 
 import { Button } from "@/components/ui/button";
-import { RefreshCw, Globe, Loader2 } from "lucide-react";
+import { RefreshCw, Globe, Loader2, CircleDot, GitPullRequest } from "lucide-react";
 import { cn } from "@/lib/utils";
-import type { WorktreeInfo, BranchInfo, DevServerInfo } from "../types";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { WorktreeInfo, BranchInfo, DevServerInfo, PRInfo } from "../types";
 import { BranchSwitchDropdown } from "./branch-switch-dropdown";
 import { WorktreeActionsDropdown } from "./worktree-actions-dropdown";
 
 interface WorktreeTabProps {
   worktree: WorktreeInfo;
   cardCount?: number; // Number of unarchived cards for this branch
+  hasChanges?: boolean; // Whether the worktree has uncommitted changes
+  changedFilesCount?: number; // Number of files with uncommitted changes
   isSelected: boolean;
   isRunning: boolean;
   isActivating: boolean;
@@ -36,6 +44,8 @@ interface WorktreeTabProps {
   onOpenInEditor: (worktree: WorktreeInfo) => void;
   onCommit: (worktree: WorktreeInfo) => void;
   onCreatePR: (worktree: WorktreeInfo) => void;
+  onAddressPRComments: (worktree: WorktreeInfo, prInfo: PRInfo) => void;
+  onResolveConflicts: (worktree: WorktreeInfo) => void;
   onDeleteWorktree: (worktree: WorktreeInfo) => void;
   onStartDevServer: (worktree: WorktreeInfo) => void;
   onStopDevServer: (worktree: WorktreeInfo) => void;
@@ -45,6 +55,8 @@ interface WorktreeTabProps {
 export function WorktreeTab({
   worktree,
   cardCount,
+  hasChanges,
+  changedFilesCount,
   isSelected,
   isRunning,
   isActivating,
@@ -72,13 +84,101 @@ export function WorktreeTab({
   onOpenInEditor,
   onCommit,
   onCreatePR,
+  onAddressPRComments,
+  onResolveConflicts,
   onDeleteWorktree,
   onStartDevServer,
   onStopDevServer,
   onOpenDevServerUrl,
 }: WorktreeTabProps) {
+
+  let prBadge: JSX.Element | null = null;
+  if (worktree.pr) {
+    const prState = worktree.pr.state?.toLowerCase() ?? "open";
+    const prStateClasses = (() => {
+      // When selected (active tab), use high contrast solid background (paper-like)
+      if (isSelected) {
+        return "bg-background text-foreground border-transparent shadow-sm";
+      }
+
+      // When not selected, use the colored variants
+      switch (prState) {
+        case "open":
+        case "reopened":
+          return "bg-emerald-500/15 dark:bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 border-emerald-500/30 dark:border-emerald-500/40 hover:bg-emerald-500/25";
+        case "draft":
+          return "bg-amber-500/15 dark:bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30 dark:border-amber-500/40 hover:bg-amber-500/25";
+        case "merged":
+          return "bg-purple-500/15 dark:bg-purple-500/20 text-purple-600 dark:text-purple-400 border-purple-500/30 dark:border-purple-500/40 hover:bg-purple-500/25";
+        case "closed":
+          return "bg-rose-500/15 dark:bg-rose-500/20 text-rose-600 dark:text-rose-400 border-rose-500/30 dark:border-rose-500/40 hover:bg-rose-500/25";
+        default:
+          return "bg-muted text-muted-foreground border-border/60 hover:bg-muted/80";
+      }
+    })();
+
+    const prLabel = `Pull Request #${worktree.pr.number}, ${prState}${worktree.pr.title ? `: ${worktree.pr.title}` : ""}`;
+
+    // Helper to get status icon color for the selected state
+    const getStatusColorClass = () => {
+      if (!isSelected) return "";
+      switch (prState) {
+        case "open":
+        case "reopened":
+          return "text-emerald-600 dark:text-emerald-500";
+        case "draft":
+          return "text-amber-600 dark:text-amber-500";
+        case "merged":
+          return "text-purple-600 dark:text-purple-500";
+        case "closed":
+          return "text-rose-600 dark:text-rose-500";
+        default:
+          return "text-muted-foreground";
+      }
+    };
+
+    prBadge = (
+      <span
+        role="button"
+        tabIndex={0}
+        className={cn(
+          "ml-1.5 inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium transition-colors",
+          "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 focus:ring-offset-background",
+          "cursor-pointer hover:opacity-80 active:opacity-70",
+          prStateClasses
+        )}
+        title={`${prLabel} - Click to open`}
+        aria-label={`${prLabel} - Click to open pull request`}
+        onClick={(e) => {
+          e.stopPropagation(); // Prevent triggering worktree selection
+          if (worktree.pr?.url) {
+            window.open(worktree.pr.url, "_blank", "noopener,noreferrer");
+          }
+        }}
+        onKeyDown={(e) => {
+          // Prevent event from bubbling to parent button
+          e.stopPropagation();
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            if (worktree.pr?.url) {
+              window.open(worktree.pr.url, "_blank", "noopener,noreferrer");
+            }
+          }
+        }}
+      >
+        <GitPullRequest className={cn("w-3 h-3", getStatusColorClass())} aria-hidden="true" />
+        <span aria-hidden="true" className={isSelected ? "text-foreground font-semibold" : ""}>
+          PR #{worktree.pr.number}
+        </span>
+        <span className={cn("capitalize", getStatusColorClass())} aria-hidden="true">
+          {prState}
+        </span>
+      </span>
+    );
+  }
+
   return (
-    <div className="flex items-center">
+    <div className="flex items-center rounded-md">
       {worktree.isMain ? (
         <>
           <Button
@@ -103,6 +203,27 @@ export function WorktreeTab({
                 {cardCount}
               </span>
             )}
+            {hasChanges && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span className={cn(
+                      "inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded border",
+                      isSelected
+                        ? "bg-amber-500 text-amber-950 border-amber-400"
+                        : "bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30"
+                    )}>
+                      <CircleDot className="w-2.5 h-2.5 mr-0.5" />
+                      {changedFilesCount ?? "!"}
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{changedFilesCount ?? "Some"} uncommitted file{changedFilesCount !== 1 ? "s" : ""}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+            {prBadge}
           </Button>
           <BranchSwitchDropdown
             worktree={worktree}
@@ -146,6 +267,27 @@ export function WorktreeTab({
               {cardCount}
             </span>
           )}
+          {hasChanges && (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className={cn(
+                    "inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded border",
+                    isSelected
+                      ? "bg-amber-500 text-amber-950 border-amber-400"
+                      : "bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30"
+                  )}>
+                    <CircleDot className="w-2.5 h-2.5 mr-0.5" />
+                    {changedFilesCount ?? "!"}
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{changedFilesCount ?? "Some"} uncommitted file{changedFilesCount !== 1 ? "s" : ""}</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+          {prBadge}
         </Button>
       )}
 
@@ -183,6 +325,8 @@ export function WorktreeTab({
         onOpenInEditor={onOpenInEditor}
         onCommit={onCommit}
         onCreatePR={onCreatePR}
+        onAddressPRComments={onAddressPRComments}
+        onResolveConflicts={onResolveConflicts}
         onDeleteWorktree={onDeleteWorktree}
         onStartDevServer={onStartDevServer}
         onStopDevServer={onStopDevServer}

apps/ui/src/components/views/board-view/worktree-panel/hooks/use-worktrees.ts

@@ -1,5 +1,5 @@
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { useAppStore } from "@/store/app-store";
 import { getElectronAPI } from "@/lib/electron";
 import { pathsEqual } from "@/lib/utils";
@@ -20,9 +20,12 @@ export function useWorktrees({ projectPath, refreshTrigger = 0, onRemovedWorktre
   const setWorktreesInStore = useAppStore((s) => s.setWorktrees);
   const useWorktreesEnabled = useAppStore((s) => s.useWorktrees);
 
-  const fetchWorktrees = useCallback(async () => {
+  const fetchWorktrees = useCallback(async (options?: { silent?: boolean }) => {
     if (!projectPath) return;
-    setIsLoading(true);
+    const silent = options?.silent ?? false;
+    if (!silent) {
+      setIsLoading(true);
+    }
     try {
       const api = getElectronAPI();
       if (!api?.worktree?.listAll) {
@@ -40,7 +43,9 @@ export function useWorktrees({ projectPath, refreshTrigger = 0, onRemovedWorktre
       console.error("Failed to fetch worktrees:", error);
       return undefined;
     } finally {
-      setIsLoading(false);
+      if (!silent) {
+        setIsLoading(false);
+      }
     }
   }, [projectPath, setWorktreesInStore]);
 
@@ -58,14 +63,25 @@ export function useWorktrees({ projectPath, refreshTrigger = 0, onRemovedWorktre
     }
   }, [refreshTrigger, fetchWorktrees, onRemovedWorktrees]);
 
+  // Use a ref to track the current worktree to avoid running validation
+  // when selection changes (which could cause a race condition with stale worktrees list)
+  const currentWorktreeRef = useRef(currentWorktree);
+  useEffect(() => {
+    currentWorktreeRef.current = currentWorktree;
+  }, [currentWorktree]);
+
+  // Validation effect: only runs when worktrees list changes (not on selection change)
+  // This prevents a race condition where the selection is reset because the
+  // local worktrees state hasn't been updated yet from the async fetch
   useEffect(() => {
     if (worktrees.length > 0) {
-      const currentPath = currentWorktree?.path;
+      const current = currentWorktreeRef.current;
+      const currentPath = current?.path;
       const currentWorktreeExists = currentPath === null
         ? true
         : worktrees.some((w) => !w.isMain && pathsEqual(w.path, currentPath));
 
-      if (currentWorktree == null || (currentPath !== null && !currentWorktreeExists)) {
+      if (current == null || (currentPath !== null && !currentWorktreeExists)) {
         // Find the primary worktree and get its branch name
         // Fallback to "main" only if worktrees haven't loaded yet
         const mainWorktree = worktrees.find((w) => w.isMain);
@@ -73,7 +89,7 @@ export function useWorktrees({ projectPath, refreshTrigger = 0, onRemovedWorktre
         setCurrentWorktree(projectPath, null, mainBranch);
       }
     }
-  }, [worktrees, currentWorktree, projectPath, setCurrentWorktree]);
+  }, [worktrees, projectPath, setCurrentWorktree]);
 
   const handleSelectWorktree = useCallback(
     (worktree: WorktreeInfo) => {

apps/ui/src/components/views/board-view/worktree-panel/types.ts

@@ -1,3 +1,11 @@
+export interface WorktreePRInfo {
+  number: number;
+  url: string;
+  title: string;
+  state: string;
+  createdAt: string;
+}
+
 export interface WorktreeInfo {
   path: string;
   branch: string;
@@ -6,6 +14,7 @@ export interface WorktreeInfo {
   hasWorktree: boolean;
   hasChanges?: boolean;
   changedFilesCount?: number;
+  pr?: WorktreePRInfo;
 }
 
 export interface BranchInfo {
@@ -25,6 +34,31 @@ export interface FeatureInfo {
   branchName?: string;
 }
 
+export interface PRInfo {
+  number: number;
+  title: string;
+  url: string;
+  state: string;
+  author: string;
+  body: string;
+  comments: Array<{
+    id: number;
+    author: string;
+    body: string;
+    createdAt: string;
+    isReviewComment: boolean;
+  }>;
+  reviewComments: Array<{
+    id: number;
+    author: string;
+    body: string;
+    path?: string;
+    line?: number;
+    createdAt: string;
+    isReviewComment: boolean;
+  }>;
+}
+
 export interface WorktreePanelProps {
   projectPath: string;
   onCreateWorktree: () => void;
@@ -32,6 +66,8 @@ export interface WorktreePanelProps {
   onCommit: (worktree: WorktreeInfo) => void;
   onCreatePR: (worktree: WorktreeInfo) => void;
   onCreateBranch: (worktree: WorktreeInfo) => void;
+  onAddressPRComments: (worktree: WorktreeInfo, prInfo: PRInfo) => void;
+  onResolveConflicts: (worktree: WorktreeInfo) => void;
   onRemovedWorktrees?: (removedWorktrees: Array<{ path: string; branch: string }>) => void;
   runningFeatureIds?: string[];
   features?: FeatureInfo[];

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

@@ -1,6 +1,12 @@
-
+import { useState, useEffect, useRef } from "react";
 import { Button } from "@/components/ui/button";
-import { GitBranch, Plus, RefreshCw } from "lucide-react";
+import {
+  GitBranch,
+  Plus,
+  RefreshCw,
+  PanelLeftOpen,
+  PanelLeftClose,
+} from "lucide-react";
 import { cn, pathsEqual } from "@/lib/utils";
 import type { WorktreePanelProps, WorktreeInfo } from "./types";
 import {
@@ -13,6 +19,8 @@ import {
 } from "./hooks";
 import { WorktreeTab } from "./components";
 
+const WORKTREE_PANEL_COLLAPSED_KEY = "worktree-panel-collapsed";
+
 export function WorktreePanel({
   projectPath,
   onCreateWorktree,
@@ -20,6 +28,8 @@ export function WorktreePanel({
   onCommit,
   onCreatePR,
   onCreateBranch,
+  onAddressPRComments,
+  onResolveConflicts,
   onRemovedWorktrees,
   runningFeatureIds = [],
   features = [],
@@ -79,6 +89,45 @@ export function WorktreePanel({
     features,
   });
 
+  // Collapse state with localStorage persistence
+  const [isCollapsed, setIsCollapsed] = useState(() => {
+    if (typeof window === "undefined") return false;
+    const saved = localStorage.getItem(WORKTREE_PANEL_COLLAPSED_KEY);
+    return saved === "true";
+  });
+
+  useEffect(() => {
+    localStorage.setItem(WORKTREE_PANEL_COLLAPSED_KEY, String(isCollapsed));
+  }, [isCollapsed]);
+
+  const toggleCollapsed = () => setIsCollapsed((prev) => !prev);
+
+  // Periodic interval check (1 second) to detect branch changes on disk
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  useEffect(() => {
+    intervalRef.current = setInterval(() => {
+      fetchWorktrees({ silent: true });
+    }, 1000);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [fetchWorktrees]);
+
+  // Get the currently selected worktree for collapsed view
+  const selectedWorktree = worktrees.find((w) => {
+    if (
+      currentWorktree === null ||
+      currentWorktree === undefined ||
+      currentWorktree.path === null
+    ) {
+      return w.isMain;
+    }
+    return pathsEqual(w.path, currentWorktreePath);
+  });
+
   const isWorktreeSelected = (worktree: WorktreeInfo) => {
     return worktree.isMain
       ? currentWorktree === null ||
@@ -87,99 +136,208 @@ export function WorktreePanel({
       : pathsEqual(worktree.path, currentWorktreePath);
   };
 
-  const handleBranchDropdownOpenChange = (worktree: WorktreeInfo) => (open: boolean) => {
-    if (open) {
-      fetchBranches(worktree.path);
-      resetBranchFilter();
-    }
-  };
+  const handleBranchDropdownOpenChange =
+    (worktree: WorktreeInfo) => (open: boolean) => {
+      if (open) {
+        fetchBranches(worktree.path);
+        resetBranchFilter();
+      }
+    };
 
-  const handleActionsDropdownOpenChange = (worktree: WorktreeInfo) => (open: boolean) => {
-    if (open) {
-      fetchBranches(worktree.path);
-    }
-  };
+  const handleActionsDropdownOpenChange =
+    (worktree: WorktreeInfo) => (open: boolean) => {
+      if (open) {
+        fetchBranches(worktree.path);
+      }
+    };
 
-  if (!useWorktreesEnabled) {
-    return null;
+  const mainWorktree = worktrees.find((w) => w.isMain);
+  const nonMainWorktrees = worktrees.filter((w) => !w.isMain);
+
+  // Collapsed view - just show current branch and toggle
+  if (isCollapsed) {
+    return (
+      <div className="flex items-center gap-2 px-4 py-1.5 border-b border-border bg-glass/50 backdrop-blur-sm">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+          onClick={toggleCollapsed}
+          title="Expand worktree panel"
+        >
+          <PanelLeftOpen className="w-4 h-4" />
+        </Button>
+        <GitBranch className="w-4 h-4 text-muted-foreground" />
+        <span className="text-sm text-muted-foreground">Branch:</span>
+        <span className="text-sm font-mono font-medium">
+          {selectedWorktree?.branch ?? "main"}
+        </span>
+        {selectedWorktree?.hasChanges && (
+          <span className="inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded border bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30">
+            {selectedWorktree.changedFilesCount ?? "!"}
+          </span>
+        )}
+      </div>
+    );
   }
 
+  // Expanded view - full worktree panel
   return (
     <div className="flex items-center gap-2 px-4 py-2 border-b border-border bg-glass/50 backdrop-blur-sm">
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+        onClick={toggleCollapsed}
+        title="Collapse worktree panel"
+      >
+        <PanelLeftClose className="w-4 h-4" />
+      </Button>
+
       <GitBranch className="w-4 h-4 text-muted-foreground" />
       <span className="text-sm text-muted-foreground mr-2">Branch:</span>
 
-      <div className="flex items-center gap-1 flex-wrap">
-        {worktrees.map((worktree) => {
-          const cardCount = branchCardCounts?.[worktree.branch];
-          return (
-            <WorktreeTab
-              key={worktree.path}
-              worktree={worktree}
-              cardCount={cardCount}
-              isSelected={isWorktreeSelected(worktree)}
-              isRunning={hasRunningFeatures(worktree)}
-              isActivating={isActivating}
-              isDevServerRunning={isDevServerRunning(worktree)}
-              devServerInfo={getDevServerInfo(worktree)}
-              defaultEditorName={defaultEditorName}
-              branches={branches}
-              filteredBranches={filteredBranches}
-              branchFilter={branchFilter}
-              isLoadingBranches={isLoadingBranches}
-              isSwitching={isSwitching}
-              isPulling={isPulling}
-              isPushing={isPushing}
-              isStartingDevServer={isStartingDevServer}
-              aheadCount={aheadCount}
-              behindCount={behindCount}
-              onSelectWorktree={handleSelectWorktree}
-              onBranchDropdownOpenChange={handleBranchDropdownOpenChange(worktree)}
-              onActionsDropdownOpenChange={handleActionsDropdownOpenChange(worktree)}
-              onBranchFilterChange={setBranchFilter}
-              onSwitchBranch={handleSwitchBranch}
-              onCreateBranch={onCreateBranch}
-              onPull={handlePull}
-              onPush={handlePush}
-              onOpenInEditor={handleOpenInEditor}
-              onCommit={onCommit}
-              onCreatePR={onCreatePR}
-              onDeleteWorktree={onDeleteWorktree}
-              onStartDevServer={handleStartDevServer}
-              onStopDevServer={handleStopDevServer}
-              onOpenDevServerUrl={handleOpenDevServerUrl}
-            />
-          );
-        })}
-
-        <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>
-
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
-          onClick={async () => {
-            const removedWorktrees = await fetchWorktrees();
-            if (removedWorktrees && removedWorktrees.length > 0 && onRemovedWorktrees) {
-              onRemovedWorktrees(removedWorktrees);
-            }
-          }}
-          disabled={isLoading}
-          title="Refresh worktrees"
-        >
-          <RefreshCw
-            className={cn("w-3.5 h-3.5", isLoading && "animate-spin")}
+      <div className="flex items-center gap-2">
+        {mainWorktree && (
+          <WorktreeTab
+            key={mainWorktree.path}
+            worktree={mainWorktree}
+            cardCount={branchCardCounts?.[mainWorktree.branch]}
+            hasChanges={mainWorktree.hasChanges}
+            changedFilesCount={mainWorktree.changedFilesCount}
+            isSelected={isWorktreeSelected(mainWorktree)}
+            isRunning={hasRunningFeatures(mainWorktree)}
+            isActivating={isActivating}
+            isDevServerRunning={isDevServerRunning(mainWorktree)}
+            devServerInfo={getDevServerInfo(mainWorktree)}
+            defaultEditorName={defaultEditorName}
+            branches={branches}
+            filteredBranches={filteredBranches}
+            branchFilter={branchFilter}
+            isLoadingBranches={isLoadingBranches}
+            isSwitching={isSwitching}
+            isPulling={isPulling}
+            isPushing={isPushing}
+            isStartingDevServer={isStartingDevServer}
+            aheadCount={aheadCount}
+            behindCount={behindCount}
+            onSelectWorktree={handleSelectWorktree}
+            onBranchDropdownOpenChange={handleBranchDropdownOpenChange(
+              mainWorktree
+            )}
+            onActionsDropdownOpenChange={handleActionsDropdownOpenChange(
+              mainWorktree
+            )}
+            onBranchFilterChange={setBranchFilter}
+            onSwitchBranch={handleSwitchBranch}
+            onCreateBranch={onCreateBranch}
+            onPull={handlePull}
+            onPush={handlePush}
+            onOpenInEditor={handleOpenInEditor}
+            onCommit={onCommit}
+            onCreatePR={onCreatePR}
+            onAddressPRComments={onAddressPRComments}
+            onResolveConflicts={onResolveConflicts}
+            onDeleteWorktree={onDeleteWorktree}
+            onStartDevServer={handleStartDevServer}
+            onStopDevServer={handleStopDevServer}
+            onOpenDevServerUrl={handleOpenDevServerUrl}
           />
-        </Button>
+        )}
       </div>
+
+      {/* Worktrees section - only show if enabled */}
+      {useWorktreesEnabled && (
+        <>
+          <div className="w-px h-5 bg-border mx-2" />
+          <GitBranch className="w-4 h-4 text-muted-foreground" />
+          <span className="text-sm text-muted-foreground mr-2">Worktrees:</span>
+
+          <div className="flex items-center gap-2 flex-wrap">
+            {nonMainWorktrees.map((worktree) => {
+              const cardCount = branchCardCounts?.[worktree.branch];
+              return (
+                <WorktreeTab
+                  key={worktree.path}
+                  worktree={worktree}
+                  cardCount={cardCount}
+                  hasChanges={worktree.hasChanges}
+                  changedFilesCount={worktree.changedFilesCount}
+                  isSelected={isWorktreeSelected(worktree)}
+                  isRunning={hasRunningFeatures(worktree)}
+                  isActivating={isActivating}
+                  isDevServerRunning={isDevServerRunning(worktree)}
+                  devServerInfo={getDevServerInfo(worktree)}
+                  defaultEditorName={defaultEditorName}
+                  branches={branches}
+                  filteredBranches={filteredBranches}
+                  branchFilter={branchFilter}
+                  isLoadingBranches={isLoadingBranches}
+                  isSwitching={isSwitching}
+                  isPulling={isPulling}
+                  isPushing={isPushing}
+                  isStartingDevServer={isStartingDevServer}
+                  aheadCount={aheadCount}
+                  behindCount={behindCount}
+                  onSelectWorktree={handleSelectWorktree}
+                  onBranchDropdownOpenChange={handleBranchDropdownOpenChange(
+                    worktree
+                  )}
+                  onActionsDropdownOpenChange={handleActionsDropdownOpenChange(
+                    worktree
+                  )}
+                  onBranchFilterChange={setBranchFilter}
+                  onSwitchBranch={handleSwitchBranch}
+                  onCreateBranch={onCreateBranch}
+                  onPull={handlePull}
+                  onPush={handlePush}
+                  onOpenInEditor={handleOpenInEditor}
+                  onCommit={onCommit}
+                  onCreatePR={onCreatePR}
+                  onAddressPRComments={onAddressPRComments}
+                  onResolveConflicts={onResolveConflicts}
+                  onDeleteWorktree={onDeleteWorktree}
+                  onStartDevServer={handleStartDevServer}
+                  onStopDevServer={handleStopDevServer}
+                  onOpenDevServerUrl={handleOpenDevServerUrl}
+                />
+              );
+            })}
+
+            <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>
+
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
+              onClick={async () => {
+                const removedWorktrees = await fetchWorktrees();
+                if (
+                  removedWorktrees &&
+                  removedWorktrees.length > 0 &&
+                  onRemovedWorktrees
+                ) {
+                  onRemovedWorktrees(removedWorktrees);
+                }
+              }}
+              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/settings-view.tsx

@@ -43,6 +43,9 @@ export function SettingsView() {
     setDefaultPlanningMode,
     defaultRequirePlanApproval,
     setDefaultRequirePlanApproval,
+    defaultAIProfileId,
+    setDefaultAIProfileId,
+    aiProfiles,
   } = useAppStore();
 
   // Convert electron Project to settings-view Project type
@@ -127,12 +130,15 @@ export function SettingsView() {
             useWorktrees={useWorktrees}
             defaultPlanningMode={defaultPlanningMode}
             defaultRequirePlanApproval={defaultRequirePlanApproval}
+            defaultAIProfileId={defaultAIProfileId}
+            aiProfiles={aiProfiles}
             onShowProfilesOnlyChange={setShowProfilesOnly}
             onDefaultSkipTestsChange={setDefaultSkipTests}
             onEnableDependencyBlockingChange={setEnableDependencyBlocking}
             onUseWorktreesChange={setUseWorktrees}
             onDefaultPlanningModeChange={setDefaultPlanningMode}
             onDefaultRequirePlanApprovalChange={setDefaultRequirePlanApproval}
+            onDefaultAIProfileIdChange={setDefaultAIProfileId}
           />
         );
       case "danger":

apps/ui/src/components/views/settings-view/feature-defaults/feature-defaults-section.tsx

@@ -2,7 +2,7 @@ import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
   FlaskConical, Settings2, TestTube, GitBranch, AlertCircle,
-  Zap, ClipboardList, FileText, ScrollText, ShieldCheck
+  Zap, ClipboardList, FileText, ScrollText, ShieldCheck, User
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import {
@@ -12,6 +12,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import type { AIProfile } from "@/store/app-store";
 
 type PlanningMode = 'skip' | 'lite' | 'spec' | 'full';
 
@@ -22,12 +23,15 @@ interface FeatureDefaultsSectionProps {
   useWorktrees: boolean;
   defaultPlanningMode: PlanningMode;
   defaultRequirePlanApproval: boolean;
+  defaultAIProfileId: string | null;
+  aiProfiles: AIProfile[];
   onShowProfilesOnlyChange: (value: boolean) => void;
   onDefaultSkipTestsChange: (value: boolean) => void;
   onEnableDependencyBlockingChange: (value: boolean) => void;
   onUseWorktreesChange: (value: boolean) => void;
   onDefaultPlanningModeChange: (value: PlanningMode) => void;
   onDefaultRequirePlanApprovalChange: (value: boolean) => void;
+  onDefaultAIProfileIdChange: (value: string | null) => void;
 }
 
 export function FeatureDefaultsSection({
@@ -37,13 +41,20 @@ export function FeatureDefaultsSection({
   useWorktrees,
   defaultPlanningMode,
   defaultRequirePlanApproval,
+  defaultAIProfileId,
+  aiProfiles,
   onShowProfilesOnlyChange,
   onDefaultSkipTestsChange,
   onEnableDependencyBlockingChange,
   onUseWorktreesChange,
   onDefaultPlanningModeChange,
   onDefaultRequirePlanApprovalChange,
+  onDefaultAIProfileIdChange,
 }: FeatureDefaultsSectionProps) {
+  // Find the selected profile name for display
+  const selectedProfile = defaultAIProfileId
+    ? aiProfiles.find((p) => p.id === defaultAIProfileId)
+    : null;
   return (
     <div
       className={cn(
@@ -169,6 +180,49 @@ export function FeatureDefaultsSection({
         {/* Separator */}
         {defaultPlanningMode === 'skip' && <div className="border-t border-border/30" />}
 
+        {/* Default AI Profile */}
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <div className="w-10 h-10 mt-0.5 rounded-xl flex items-center justify-center shrink-0 bg-brand-500/10">
+            <User className="w-5 h-5 text-brand-500" />
+          </div>
+          <div className="flex-1 space-y-2">
+            <div className="flex items-center justify-between">
+              <Label className="text-foreground font-medium">
+                Default AI Profile
+              </Label>
+              <Select
+                value={defaultAIProfileId ?? "none"}
+                onValueChange={(v: string) => onDefaultAIProfileIdChange(v === "none" ? null : v)}
+              >
+                <SelectTrigger
+                  className="w-[180px] h-8"
+                  data-testid="default-ai-profile-select"
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">
+                    <span className="text-muted-foreground">None (pick manually)</span>
+                  </SelectItem>
+                  {aiProfiles.map((profile) => (
+                    <SelectItem key={profile.id} value={profile.id}>
+                      <span>{profile.name}</span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              {selectedProfile
+                ? `New features will use the "${selectedProfile.name}" profile (${selectedProfile.model}, ${selectedProfile.thinkingLevel} thinking).`
+                : "Pre-select an AI profile when creating new features. Choose \"None\" to pick manually each time."}
+            </p>
+          </div>
+        </div>
+
+        {/* Separator */}
+        <div className="border-t border-border/30" />
+
         {/* Profiles Only Setting */}
         <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
           <Checkbox

apps/ui/src/components/views/setup-view.tsx

@@ -1,8 +1,8 @@
-
 import { useSetupStore } from "@/store/setup-store";
 import { StepIndicator } from "./setup-view/components";
 import {
   WelcomeStep,
+  ThemeStep,
   CompleteStep,
   ClaudeSetupStep,
   GitHubSetupStep,
@@ -11,20 +11,17 @@ import { useNavigate } from "@tanstack/react-router";
 
 // Main Setup View
 export function SetupView() {
-  const {
-    currentStep,
-    setCurrentStep,
-    completeSetup,
-    setSkipClaudeSetup,
-  } = useSetupStore();
+  const { currentStep, setCurrentStep, completeSetup, setSkipClaudeSetup } =
+    useSetupStore();
   const navigate = useNavigate();
 
-  const steps = ["welcome", "claude", "github", "complete"] as const;
+  const steps = ["welcome", "theme", "claude", "github", "complete"] as const;
   type StepName = (typeof steps)[number];
   const getStepName = (): StepName => {
     if (currentStep === "claude_detect" || currentStep === "claude_auth")
       return "claude";
     if (currentStep === "welcome") return "welcome";
+    if (currentStep === "theme") return "theme";
     if (currentStep === "github") return "github";
     return "complete";
   };
@@ -39,6 +36,10 @@ export function SetupView() {
     );
     switch (from) {
       case "welcome":
+        console.log("[Setup Flow] Moving to theme step");
+        setCurrentStep("theme");
+        break;
+      case "theme":
         console.log("[Setup Flow] Moving to claude_detect step");
         setCurrentStep("claude_detect");
         break;
@@ -56,9 +57,12 @@ export function SetupView() {
   const handleBack = (from: string) => {
     console.log("[Setup Flow] handleBack called from:", from);
     switch (from) {
-      case "claude":
+      case "theme":
         setCurrentStep("welcome");
         break;
+      case "claude":
+        setCurrentStep("theme");
+        break;
       case "github":
         setCurrentStep("claude_detect");
         break;
@@ -98,42 +102,47 @@ export function SetupView() {
       </div>
 
       {/* Content */}
-      <div className="flex-1 overflow-y-auto min-h-0">
-        <div className="p-8">
-          <div className="w-full max-w-2xl mx-auto">
-            <div className="mb-8">
-              <StepIndicator
-                currentStep={currentIndex}
-                totalSteps={steps.length}
+      <div className="flex-1 overflow-y-auto min-h-0 flex items-center justify-center">
+        <div className="w-full max-w-2xl mx-auto px-8">
+          <div className="mb-8">
+            <StepIndicator
+              currentStep={currentIndex}
+              totalSteps={steps.length}
+            />
+          </div>
+
+          <div>
+            {currentStep === "welcome" && (
+              <WelcomeStep onNext={() => handleNext("welcome")} />
+            )}
+
+            {currentStep === "theme" && (
+              <ThemeStep
+                onNext={() => handleNext("theme")}
+                onBack={() => handleBack("theme")}
               />
-            </div>
+            )}
 
-            <div className="py-8">
-              {currentStep === "welcome" && (
-                <WelcomeStep onNext={() => handleNext("welcome")} />
-              )}
+            {(currentStep === "claude_detect" ||
+              currentStep === "claude_auth") && (
+              <ClaudeSetupStep
+                onNext={() => handleNext("claude")}
+                onBack={() => handleBack("claude")}
+                onSkip={handleSkipClaude}
+              />
+            )}
 
-              {(currentStep === "claude_detect" ||
-                currentStep === "claude_auth") && (
-                <ClaudeSetupStep
-                  onNext={() => handleNext("claude")}
-                  onBack={() => handleBack("claude")}
-                  onSkip={handleSkipClaude}
-                />
-              )}
+            {currentStep === "github" && (
+              <GitHubSetupStep
+                onNext={() => handleNext("github")}
+                onBack={() => handleBack("github")}
+                onSkip={handleSkipGithub}
+              />
+            )}
 
-              {currentStep === "github" && (
-                <GitHubSetupStep
-                  onNext={() => handleNext("github")}
-                  onBack={() => handleBack("github")}
-                  onSkip={handleSkipGithub}
-                />
-              )}
-
-              {currentStep === "complete" && (
-                <CompleteStep onFinish={handleFinish} />
-              )}
-            </div>
+            {currentStep === "complete" && (
+              <CompleteStep onFinish={handleFinish} />
+            )}
           </div>
         </div>
       </div>

apps/ui/src/components/views/setup-view/steps/index.ts

@@ -1,5 +1,6 @@
 // Re-export all setup step components for easier imports
 export { WelcomeStep } from "./welcome-step";
+export { ThemeStep } from "./theme-step";
 export { CompleteStep } from "./complete-step";
 export { ClaudeSetupStep } from "./claude-setup-step";
 export { GitHubSetupStep } from "./github-setup-step";

apps/ui/src/components/views/setup-view/steps/theme-step.tsx

@@ -0,0 +1,90 @@
+import { Button } from "@/components/ui/button";
+import { ArrowRight, ArrowLeft, Check } from "lucide-react";
+import { themeOptions } from "@/config/theme-options";
+import { useAppStore } from "@/store/app-store";
+import { cn } from "@/lib/utils";
+
+interface ThemeStepProps {
+  onNext: () => void;
+  onBack: () => void;
+}
+
+export function ThemeStep({ onNext, onBack }: ThemeStepProps) {
+  const { theme, setTheme, setPreviewTheme } = useAppStore();
+
+  const handleThemeHover = (themeValue: string) => {
+    setPreviewTheme(themeValue as typeof theme);
+  };
+
+  const handleThemeLeave = () => {
+    setPreviewTheme(null);
+  };
+
+  const handleThemeClick = (themeValue: string) => {
+    setTheme(themeValue as typeof theme);
+    setPreviewTheme(null);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center">
+        <h2 className="text-3xl font-bold text-foreground mb-3">
+          Choose Your Theme
+        </h2>
+        <p className="text-muted-foreground max-w-md mx-auto">
+          Pick a theme that suits your style. Hover to preview, click to select.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+        {themeOptions.map((option) => {
+          const Icon = option.Icon;
+          const isSelected = theme === option.value;
+
+          return (
+            <button
+              key={option.value}
+              data-testid={option.testId}
+              onMouseEnter={() => handleThemeHover(option.value)}
+              onMouseLeave={handleThemeLeave}
+              onClick={() => handleThemeClick(option.value)}
+              className={cn(
+                "relative flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all duration-200",
+                "hover:scale-105 hover:shadow-lg",
+                isSelected
+                  ? "border-brand-500 bg-brand-500/10"
+                  : "border-border hover:border-brand-400 bg-card"
+              )}
+            >
+              {isSelected && (
+                <div className="absolute top-2 right-2">
+                  <Check className="w-4 h-4 text-brand-500" />
+                </div>
+              )}
+              <Icon className="w-6 h-6 text-foreground" />
+              <span className="text-sm font-medium text-foreground">
+                {option.label}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="flex justify-between pt-4">
+        <Button variant="ghost" onClick={onBack}>
+          <ArrowLeft className="w-4 h-4 mr-2" />
+          Back
+        </Button>
+        <Button
+          size="lg"
+          className="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white"
+          onClick={onNext}
+          data-testid="theme-continue-button"
+        >
+          Continue
+          <ArrowRight className="w-4 h-4 ml-2" />
+        </Button>
+      </div>
+    </div>
+  );
+}