refactor: Enhance project management features and UI components

- Updated create-pr.ts to improve commit error handling and logging.
- Enhanced project-switcher.tsx with new folder opening functionality and state management for project setup.
- Expanded icon-picker.tsx to include a comprehensive list of icons organized by category.
- Replaced dialog components with popover components for auto mode and plan settings, improving UI responsiveness.
- Refactored board-view components to streamline feature management and enhance user experience.
- Removed outdated dialog components and replaced them with popover alternatives for better accessibility.

These changes aim to improve the overall usability and functionality of the project management interface.

apps/ui/src/components/views/board-view/dialogs/auto-mode-settings-dialog.tsx

@@ -1,68 +0,0 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Label } from '@/components/ui/label';
-import { Switch } from '@/components/ui/switch';
-import { FastForward, Settings2 } from 'lucide-react';
-
-interface AutoModeSettingsDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  skipVerificationInAutoMode: boolean;
-  onSkipVerificationChange: (value: boolean) => void;
-}
-
-export function AutoModeSettingsDialog({
-  open,
-  onOpenChange,
-  skipVerificationInAutoMode,
-  onSkipVerificationChange,
-}: AutoModeSettingsDialogProps) {
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md" data-testid="auto-mode-settings-dialog">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Settings2 className="w-5 h-5" />
-            Auto Mode Settings
-          </DialogTitle>
-          <DialogDescription>
-            Configure how auto mode handles feature execution and dependencies.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4 py-4">
-          {/* Skip Verification Setting */}
-          <div className="flex items-start space-x-3 p-3 rounded-lg bg-secondary/50">
-            <div className="flex-1 space-y-1">
-              <div className="flex items-center justify-between">
-                <Label
-                  htmlFor="skip-verification-toggle"
-                  className="text-sm font-medium cursor-pointer flex items-center gap-2"
-                >
-                  <FastForward className="w-4 h-4 text-brand-500" />
-                  Skip verification requirement
-                </Label>
-                <Switch
-                  id="skip-verification-toggle"
-                  checked={skipVerificationInAutoMode}
-                  onCheckedChange={onSkipVerificationChange}
-                  data-testid="skip-verification-toggle"
-                />
-              </div>
-              <p className="text-xs text-muted-foreground leading-relaxed">
-                When enabled, auto mode will grab features even if their dependencies are not
-                verified, as long as they are not currently running. This allows faster pipeline
-                execution without waiting for manual verification.
-              </p>
-            </div>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

apps/ui/src/components/views/board-view/dialogs/auto-mode-settings-popover.tsx

@@ -0,0 +1,95 @@
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Slider } from '@/components/ui/slider';
+import { FastForward, Bot, Settings2 } from 'lucide-react';
+
+interface AutoModeSettingsPopoverProps {
+  skipVerificationInAutoMode: boolean;
+  onSkipVerificationChange: (value: boolean) => void;
+  maxConcurrency: number;
+  runningAgentsCount: number;
+  onConcurrencyChange: (value: number) => void;
+}
+
+export function AutoModeSettingsPopover({
+  skipVerificationInAutoMode,
+  onSkipVerificationChange,
+  maxConcurrency,
+  runningAgentsCount,
+  onConcurrencyChange,
+}: AutoModeSettingsPopoverProps) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          className="p-1 rounded hover:bg-accent/50 transition-colors"
+          title="Auto Mode Settings"
+          data-testid="auto-mode-settings-button"
+        >
+          <Settings2 className="w-4 h-4 text-muted-foreground" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-72" align="end" sideOffset={8}>
+        <div className="space-y-4">
+          <div>
+            <h4 className="font-medium text-sm mb-1">Auto Mode Settings</h4>
+            <p className="text-xs text-muted-foreground">
+              Configure auto mode execution and agent concurrency.
+            </p>
+          </div>
+
+          {/* Max Concurrent Agents */}
+          <div className="space-y-2 p-2 rounded-md bg-secondary/50">
+            <div className="flex items-center gap-2">
+              <Bot className="w-4 h-4 text-brand-500 shrink-0" />
+              <Label className="text-xs font-medium">Max Concurrent Agents</Label>
+              <span className="ml-auto text-xs text-muted-foreground">
+                {runningAgentsCount}/{maxConcurrency}
+              </span>
+            </div>
+            <div className="flex items-center gap-3">
+              <Slider
+                value={[maxConcurrency]}
+                onValueChange={(value) => onConcurrencyChange(value[0])}
+                min={1}
+                max={10}
+                step={1}
+                className="flex-1"
+                data-testid="concurrency-slider"
+              />
+              <span className="text-xs font-medium min-w-[2ch] text-right">{maxConcurrency}</span>
+            </div>
+            <p className="text-[10px] text-muted-foreground">
+              Higher values process more features in parallel but use more API resources.
+            </p>
+          </div>
+
+          {/* Skip Verification Setting */}
+          <div className="flex items-center justify-between gap-3 p-2 rounded-md bg-secondary/50">
+            <div className="flex items-center gap-2 flex-1 min-w-0">
+              <FastForward className="w-4 h-4 text-brand-500 shrink-0" />
+              <Label
+                htmlFor="skip-verification-toggle"
+                className="text-xs font-medium cursor-pointer"
+              >
+                Skip verification requirement
+              </Label>
+            </div>
+            <Switch
+              id="skip-verification-toggle"
+              checked={skipVerificationInAutoMode}
+              onCheckedChange={onSkipVerificationChange}
+              data-testid="skip-verification-toggle"
+            />
+          </div>
+
+          <p className="text-[10px] text-muted-foreground leading-relaxed">
+            When enabled, auto mode will grab features even if their dependencies are not verified,
+            as long as they are not currently running.
+          </p>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

apps/ui/src/components/views/board-view/dialogs/plan-settings-dialog.tsx

@@ -1,67 +0,0 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Label } from '@/components/ui/label';
-import { Switch } from '@/components/ui/switch';
-import { GitBranch, Settings2 } from 'lucide-react';
-
-interface PlanSettingsDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  planUseSelectedWorktreeBranch: boolean;
-  onPlanUseSelectedWorktreeBranchChange: (value: boolean) => void;
-}
-
-export function PlanSettingsDialog({
-  open,
-  onOpenChange,
-  planUseSelectedWorktreeBranch,
-  onPlanUseSelectedWorktreeBranchChange,
-}: PlanSettingsDialogProps) {
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md" data-testid="plan-settings-dialog">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Settings2 className="w-5 h-5" />
-            Plan Settings
-          </DialogTitle>
-          <DialogDescription>
-            Configure how the Plan feature creates and organizes new features.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4 py-4">
-          {/* Use Selected Worktree Branch Setting */}
-          <div className="flex items-start space-x-3 p-3 rounded-lg bg-secondary/50">
-            <div className="flex-1 space-y-1">
-              <div className="flex items-center justify-between">
-                <Label
-                  htmlFor="plan-worktree-branch-toggle"
-                  className="text-sm font-medium cursor-pointer flex items-center gap-2"
-                >
-                  <GitBranch className="w-4 h-4 text-brand-500" />
-                  Default to worktree mode
-                </Label>
-                <Switch
-                  id="plan-worktree-branch-toggle"
-                  checked={planUseSelectedWorktreeBranch}
-                  onCheckedChange={onPlanUseSelectedWorktreeBranchChange}
-                  data-testid="plan-worktree-branch-toggle"
-                />
-              </div>
-              <p className="text-xs text-muted-foreground leading-relaxed">
-                Planned features will automatically use isolated worktrees, keeping changes separate
-                from your main branch until you're ready to merge.
-              </p>
-            </div>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

apps/ui/src/components/views/board-view/dialogs/plan-settings-popover.tsx

@@ -0,0 +1,61 @@
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { GitBranch, Settings2 } from 'lucide-react';
+
+interface PlanSettingsPopoverProps {
+  planUseSelectedWorktreeBranch: boolean;
+  onPlanUseSelectedWorktreeBranchChange: (value: boolean) => void;
+}
+
+export function PlanSettingsPopover({
+  planUseSelectedWorktreeBranch,
+  onPlanUseSelectedWorktreeBranchChange,
+}: PlanSettingsPopoverProps) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          className="p-1 rounded hover:bg-accent/50 transition-colors"
+          title="Plan Settings"
+          data-testid="plan-settings-button"
+        >
+          <Settings2 className="w-4 h-4 text-muted-foreground" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-72" align="end" sideOffset={8}>
+        <div className="space-y-3">
+          <div>
+            <h4 className="font-medium text-sm mb-1">Plan Settings</h4>
+            <p className="text-xs text-muted-foreground">
+              Configure how Plan creates and organizes features.
+            </p>
+          </div>
+
+          <div className="flex items-center justify-between gap-3 p-2 rounded-md bg-secondary/50">
+            <div className="flex items-center gap-2 flex-1 min-w-0">
+              <GitBranch className="w-4 h-4 text-brand-500 shrink-0" />
+              <Label
+                htmlFor="plan-worktree-branch-toggle"
+                className="text-xs font-medium cursor-pointer"
+              >
+                Default to worktree mode
+              </Label>
+            </div>
+            <Switch
+              id="plan-worktree-branch-toggle"
+              checked={planUseSelectedWorktreeBranch}
+              onCheckedChange={onPlanUseSelectedWorktreeBranchChange}
+              data-testid="plan-worktree-branch-toggle"
+            />
+          </div>
+
+          <p className="text-[10px] text-muted-foreground leading-relaxed">
+            Planned features will automatically use isolated worktrees, keeping changes separate
+            from your main branch until you're ready to merge.
+          </p>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -1,67 +0,0 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Label } from '@/components/ui/label';
-import { Switch } from '@/components/ui/switch';
-import { GitBranch, Settings2 } from 'lucide-react';
-
-interface WorktreeSettingsDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  addFeatureUseSelectedWorktreeBranch: boolean;
-  onAddFeatureUseSelectedWorktreeBranchChange: (value: boolean) => void;
-}
-
-export function WorktreeSettingsDialog({
-  open,
-  onOpenChange,
-  addFeatureUseSelectedWorktreeBranch,
-  onAddFeatureUseSelectedWorktreeBranchChange,
-}: WorktreeSettingsDialogProps) {
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md" data-testid="worktree-settings-dialog">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Settings2 className="w-5 h-5" />
-            Worktree Settings
-          </DialogTitle>
-          <DialogDescription>
-            Configure how worktrees affect feature creation and organization.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4 py-4">
-          {/* Use Selected Worktree Branch Setting */}
-          <div className="flex items-start space-x-3 p-3 rounded-lg bg-secondary/50">
-            <div className="flex-1 space-y-1">
-              <div className="flex items-center justify-between">
-                <Label
-                  htmlFor="worktree-branch-toggle"
-                  className="text-sm font-medium cursor-pointer flex items-center gap-2"
-                >
-                  <GitBranch className="w-4 h-4 text-brand-500" />
-                  Default to worktree mode
-                </Label>
-                <Switch
-                  id="worktree-branch-toggle"
-                  checked={addFeatureUseSelectedWorktreeBranch}
-                  onCheckedChange={onAddFeatureUseSelectedWorktreeBranchChange}
-                  data-testid="worktree-branch-toggle"
-                />
-              </div>
-              <p className="text-xs text-muted-foreground leading-relaxed">
-                New features will automatically use isolated worktrees, keeping changes separate
-                from your main branch until you're ready to merge.
-              </p>
-            </div>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

apps/ui/src/components/views/board-view/dialogs/worktree-settings-popover.tsx

@@ -0,0 +1,61 @@
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { GitBranch, Settings2 } from 'lucide-react';
+
+interface WorktreeSettingsPopoverProps {
+  addFeatureUseSelectedWorktreeBranch: boolean;
+  onAddFeatureUseSelectedWorktreeBranchChange: (value: boolean) => void;
+}
+
+export function WorktreeSettingsPopover({
+  addFeatureUseSelectedWorktreeBranch,
+  onAddFeatureUseSelectedWorktreeBranchChange,
+}: WorktreeSettingsPopoverProps) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          className="p-1 rounded hover:bg-accent/50 transition-colors"
+          title="Worktree Settings"
+          data-testid="worktree-settings-button"
+        >
+          <Settings2 className="w-4 h-4 text-muted-foreground" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-72" align="end" sideOffset={8}>
+        <div className="space-y-3">
+          <div>
+            <h4 className="font-medium text-sm mb-1">Worktree Settings</h4>
+            <p className="text-xs text-muted-foreground">
+              Configure how worktrees affect feature creation.
+            </p>
+          </div>
+
+          <div className="flex items-center justify-between gap-3 p-2 rounded-md bg-secondary/50">
+            <div className="flex items-center gap-2 flex-1 min-w-0">
+              <GitBranch className="w-4 h-4 text-brand-500 shrink-0" />
+              <Label
+                htmlFor="worktree-branch-toggle"
+                className="text-xs font-medium cursor-pointer"
+              >
+                Default to worktree mode
+              </Label>
+            </div>
+            <Switch
+              id="worktree-branch-toggle"
+              checked={addFeatureUseSelectedWorktreeBranch}
+              onCheckedChange={onAddFeatureUseSelectedWorktreeBranchChange}
+              data-testid="worktree-branch-toggle"
+            />
+          </div>
+
+          <p className="text-[10px] text-muted-foreground leading-relaxed">
+            New features will automatically use isolated worktrees, keeping changes separate from
+            your main branch until you're ready to merge.
+          </p>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}