feat: enhance spec regeneration management by project

- Refactored spec regeneration status tracking to support multiple projects using a Map for running states and abort controllers.
- Updated `getSpecRegenerationStatus` to accept a project path, allowing retrieval of status specific to a project.
- Modified `setRunningState` to manage running states and abort controllers per project.
- Adjusted related route handlers to utilize project-specific status checks and updates.
- Introduced a new Graph View page and integrated it into the routing structure.
- Enhanced UI components to reflect the current project’s spec generation state.

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

@@ -1,16 +1,12 @@
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { ImageIcon, Archive, Columns3, Network } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { BoardViewMode } from '@/store/app-store';
+import { ImageIcon, Archive } from 'lucide-react';
 
 interface BoardControlsProps {
   isMounted: boolean;
   onShowBoardBackground: () => void;
   onShowCompletedModal: () => void;
   completedCount: number;
-  boardViewMode: BoardViewMode;
-  onBoardViewModeChange: (mode: BoardViewMode) => void;
 }
 
 export function BoardControls({
@@ -18,59 +14,12 @@ export function BoardControls({
   onShowBoardBackground,
   onShowCompletedModal,
   completedCount,
-  boardViewMode,
-  onBoardViewModeChange,
 }: BoardControlsProps) {
   if (!isMounted) return null;
 
   return (
     <TooltipProvider>
       <div className="flex items-center gap-2">
-        {/* View Mode Toggle - Kanban / Graph */}
-        <div
-          className="flex items-center rounded-lg bg-secondary border border-border"
-          data-testid="view-mode-toggle"
-        >
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => onBoardViewModeChange('kanban')}
-                className={cn(
-                  'p-2 rounded-l-lg transition-colors',
-                  boardViewMode === 'kanban'
-                    ? 'bg-brand-500/20 text-brand-500'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
-                )}
-                data-testid="view-mode-kanban"
-              >
-                <Columns3 className="w-4 h-4" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Kanban Board View</p>
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => onBoardViewModeChange('graph')}
-                className={cn(
-                  'p-2 rounded-r-lg transition-colors',
-                  boardViewMode === 'graph'
-                    ? 'bg-brand-500/20 text-brand-500'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
-                )}
-                data-testid="view-mode-graph"
-              >
-                <Network className="w-4 h-4" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Dependency Graph View</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
-
         {/* Board Background Button */}
         <Tooltip>
           <TooltipTrigger asChild>

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

@@ -6,7 +6,7 @@ import { Label } from '@/components/ui/label';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Bot, Wand2, Settings2, GitBranch } from 'lucide-react';
 import { UsagePopover } from '@/components/usage-popover';
-import { useAppStore, BoardViewMode } from '@/store/app-store';
+import { useAppStore } from '@/store/app-store';
 import { useSetupStore } from '@/store/setup-store';
 import { AutoModeSettingsDialog } from './dialogs/auto-mode-settings-dialog';
 import { getHttpApiClient } from '@/lib/http-api-client';
@@ -31,8 +31,6 @@ interface BoardHeaderProps {
   onShowBoardBackground: () => void;
   onShowCompletedModal: () => void;
   completedCount: number;
-  boardViewMode: BoardViewMode;
-  onBoardViewModeChange: (mode: BoardViewMode) => void;
 }
 
 // Shared styles for header control containers
@@ -55,8 +53,6 @@ export function BoardHeader({
   onShowBoardBackground,
   onShowCompletedModal,
   completedCount,
-  boardViewMode,
-  onBoardViewModeChange,
 }: BoardHeaderProps) {
   const [showAutoModeSettings, setShowAutoModeSettings] = useState(false);
   const apiKeys = useAppStore((state) => state.apiKeys);
@@ -117,8 +113,6 @@ export function BoardHeader({
           onShowBoardBackground={onShowBoardBackground}
           onShowCompletedModal={onShowCompletedModal}
           completedCount={completedCount}
-          boardViewMode={boardViewMode}
-          onBoardViewModeChange={onBoardViewModeChange}
         />
       </div>
       <div className="flex gap-2 items-center">

apps/ui/src/components/views/board-view/dialogs/add-edit-pipeline-step-dialog.tsx

@@ -0,0 +1,254 @@
+import { useState, useRef, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Upload } from 'lucide-react';
+import { toast } from 'sonner';
+import type { PipelineStep } from '@automaker/types';
+import { cn } from '@/lib/utils';
+import { STEP_TEMPLATES } from './pipeline-step-templates';
+
+// Color options for pipeline columns
+const COLOR_OPTIONS = [
+  { value: 'bg-blue-500/20', label: 'Blue', preview: 'bg-blue-500' },
+  { value: 'bg-purple-500/20', label: 'Purple', preview: 'bg-purple-500' },
+  { value: 'bg-green-500/20', label: 'Green', preview: 'bg-green-500' },
+  { value: 'bg-orange-500/20', label: 'Orange', preview: 'bg-orange-500' },
+  { value: 'bg-red-500/20', label: 'Red', preview: 'bg-red-500' },
+  { value: 'bg-pink-500/20', label: 'Pink', preview: 'bg-pink-500' },
+  { value: 'bg-cyan-500/20', label: 'Cyan', preview: 'bg-cyan-500' },
+  { value: 'bg-amber-500/20', label: 'Amber', preview: 'bg-amber-500' },
+  { value: 'bg-indigo-500/20', label: 'Indigo', preview: 'bg-indigo-500' },
+];
+
+interface AddEditPipelineStepDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (step: Omit<PipelineStep, 'id' | 'createdAt' | 'updatedAt'> & { id?: string }) => void;
+  existingStep?: PipelineStep | null;
+  defaultOrder: number;
+}
+
+export function AddEditPipelineStepDialog({
+  open,
+  onClose,
+  onSave,
+  existingStep,
+  defaultOrder,
+}: AddEditPipelineStepDialogProps) {
+  const isEditing = !!existingStep;
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [name, setName] = useState('');
+  const [instructions, setInstructions] = useState('');
+  const [colorClass, setColorClass] = useState(COLOR_OPTIONS[0].value);
+  const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null);
+
+  // Reset form when dialog opens/closes or existingStep changes
+  useEffect(() => {
+    if (open) {
+      if (existingStep) {
+        setName(existingStep.name);
+        setInstructions(existingStep.instructions);
+        setColorClass(existingStep.colorClass);
+        setSelectedTemplate(null);
+      } else {
+        setName('');
+        setInstructions('');
+        setColorClass(COLOR_OPTIONS[defaultOrder % COLOR_OPTIONS.length].value);
+        setSelectedTemplate(null);
+      }
+    }
+  }, [open, existingStep, defaultOrder]);
+
+  const handleTemplateClick = (templateId: string) => {
+    const template = STEP_TEMPLATES.find((t) => t.id === templateId);
+    if (template) {
+      setName(template.name);
+      setInstructions(template.instructions);
+      setColorClass(template.colorClass);
+      setSelectedTemplate(templateId);
+      toast.success(`Loaded "${template.name}" template`);
+    }
+  };
+
+  const handleFileUpload = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    try {
+      const content = await file.text();
+      setInstructions(content);
+      toast.success('Instructions loaded from file');
+    } catch {
+      toast.error('Failed to load file');
+    }
+
+    // Reset the input so the same file can be selected again
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleSave = () => {
+    if (!name.trim()) {
+      toast.error('Step name is required');
+      return;
+    }
+
+    if (!instructions.trim()) {
+      toast.error('Step instructions are required');
+      return;
+    }
+
+    onSave({
+      id: existingStep?.id,
+      name: name.trim(),
+      instructions: instructions.trim(),
+      colorClass,
+      order: existingStep?.order ?? defaultOrder,
+    });
+
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent className="max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
+        {/* Hidden file input for loading instructions from .md files */}
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".md,.txt"
+          className="hidden"
+          onChange={handleFileInputChange}
+        />
+
+        <DialogHeader>
+          <DialogTitle>{isEditing ? 'Edit Pipeline Step' : 'Add Pipeline Step'}</DialogTitle>
+          <DialogDescription>
+            {isEditing
+              ? 'Modify the step configuration below.'
+              : 'Configure a new step for your pipeline. Choose a template to get started quickly, or create from scratch.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto py-4 space-y-6">
+          {/* Template Quick Start - Only show for new steps */}
+          {!isEditing && (
+            <div className="space-y-3">
+              <Label className="text-sm font-medium">Quick Start from Template</Label>
+              <div className="flex flex-wrap gap-2">
+                {STEP_TEMPLATES.map((template) => (
+                  <button
+                    key={template.id}
+                    type="button"
+                    onClick={() => handleTemplateClick(template.id)}
+                    className={cn(
+                      'flex items-center gap-2 px-3 py-2 rounded-lg border transition-all text-sm',
+                      selectedTemplate === template.id
+                        ? 'border-primary bg-primary/10 ring-1 ring-primary'
+                        : 'border-border hover:border-primary/50 hover:bg-muted/50'
+                    )}
+                  >
+                    <div
+                      className={cn('w-2 h-2 rounded-full', template.colorClass.replace('/20', ''))}
+                    />
+                    {template.name}
+                  </button>
+                ))}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Click a template to pre-fill the form, then customize as needed.
+              </p>
+            </div>
+          )}
+
+          {/* Divider */}
+          {!isEditing && <div className="border-t" />}
+
+          {/* Step Name */}
+          <div className="space-y-2">
+            <Label htmlFor="step-name">
+              Step Name <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="step-name"
+              placeholder="e.g., Code Review, Testing, Documentation"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              autoFocus={isEditing}
+            />
+          </div>
+
+          {/* Color Selection */}
+          <div className="space-y-2">
+            <Label>Column Color</Label>
+            <div className="flex flex-wrap gap-2">
+              {COLOR_OPTIONS.map((color) => (
+                <button
+                  key={color.value}
+                  type="button"
+                  className={cn(
+                    'w-8 h-8 rounded-full transition-all',
+                    color.preview,
+                    colorClass === color.value
+                      ? 'ring-2 ring-offset-2 ring-primary'
+                      : 'opacity-60 hover:opacity-100'
+                  )}
+                  onClick={() => setColorClass(color.value)}
+                  title={color.label}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Agent Instructions */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="step-instructions">
+                Agent Instructions <span className="text-destructive">*</span>
+              </Label>
+              <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={handleFileUpload}>
+                <Upload className="h-3 w-3 mr-1" />
+                Load from file
+              </Button>
+            </div>
+            <Textarea
+              id="step-instructions"
+              placeholder="Instructions for the agent to follow during this pipeline step. Use markdown formatting for best results."
+              value={instructions}
+              onChange={(e) => setInstructions(e.target.value)}
+              rows={10}
+              className="font-mono text-sm"
+            />
+            <p className="text-xs text-muted-foreground">
+              These instructions will be sent to the agent when this step runs. Be specific about
+              what you want the agent to review, check, or modify.
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave}>{isEditing ? 'Update Step' : 'Add to Pipeline'}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -8,34 +8,11 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Plus, Trash2, ChevronUp, ChevronDown, Upload, Pencil, X } from 'lucide-react';
+import { Plus, Trash2, ChevronUp, ChevronDown, Pencil } from 'lucide-react';
 import { toast } from 'sonner';
 import type { PipelineConfig, PipelineStep } from '@automaker/types';
 import { cn } from '@/lib/utils';
-import { STEP_TEMPLATES } from './pipeline-step-templates';
-
-// Color options for pipeline columns
-const COLOR_OPTIONS = [
-  { value: 'bg-blue-500/20', label: 'Blue', preview: 'bg-blue-500' },
-  { value: 'bg-purple-500/20', label: 'Purple', preview: 'bg-purple-500' },
-  { value: 'bg-green-500/20', label: 'Green', preview: 'bg-green-500' },
-  { value: 'bg-orange-500/20', label: 'Orange', preview: 'bg-orange-500' },
-  { value: 'bg-red-500/20', label: 'Red', preview: 'bg-red-500' },
-  { value: 'bg-pink-500/20', label: 'Pink', preview: 'bg-pink-500' },
-  { value: 'bg-cyan-500/20', label: 'Cyan', preview: 'bg-cyan-500' },
-  { value: 'bg-amber-500/20', label: 'Amber', preview: 'bg-amber-500' },
-  { value: 'bg-indigo-500/20', label: 'Indigo', preview: 'bg-indigo-500' },
-];
+import { AddEditPipelineStepDialog } from './add-edit-pipeline-step-dialog';
 
 interface PipelineSettingsDialogProps {
   open: boolean;
@@ -45,14 +22,6 @@ interface PipelineSettingsDialogProps {
   onSave: (config: PipelineConfig) => Promise<void>;
 }
 
-interface EditingStep {
-  id?: string;
-  name: string;
-  instructions: string;
-  colorClass: string;
-  order: number;
-}
-
 export function PipelineSettingsDialog({
   open,
   onClose,
@@ -73,9 +42,11 @@ export function PipelineSettingsDialog({
   };
 
   const [steps, setSteps] = useState<PipelineStep[]>(() => validateSteps(pipelineConfig?.steps));
-  const [editingStep, setEditingStep] = useState<EditingStep | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Sub-dialog state
+  const [addEditDialogOpen, setAddEditDialogOpen] = useState(false);
+  const [editingStep, setEditingStep] = useState<PipelineStep | null>(null);
 
   // Sync steps when dialog opens or pipelineConfig changes
   useEffect(() => {
@@ -87,22 +58,13 @@ export function PipelineSettingsDialog({
   const sortedSteps = [...steps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
 
   const handleAddStep = () => {
-    setEditingStep({
-      name: '',
-      instructions: '',
-      colorClass: COLOR_OPTIONS[steps.length % COLOR_OPTIONS.length].value,
-      order: steps.length,
-    });
+    setEditingStep(null);
+    setAddEditDialogOpen(true);
   };
 
   const handleEditStep = (step: PipelineStep) => {
-    setEditingStep({
-      id: step.id,
-      name: step.name,
-      instructions: step.instructions,
-      colorClass: step.colorClass,
-      order: step.order,
-    });
+    setEditingStep(step);
+    setAddEditDialogOpen(true);
   };
 
   const handleDeleteStep = (stepId: string) => {
@@ -134,53 +96,21 @@ export function PipelineSettingsDialog({
     setSteps(newSteps);
   };
 
-  const handleFileUpload = () => {
-    fileInputRef.current?.click();
-  };
-
-  const handleFileInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    try {
-      const content = await file.text();
-      setEditingStep((prev) => (prev ? { ...prev, instructions: content } : null));
-      toast.success('Instructions loaded from file');
-    } catch {
-      toast.error('Failed to load file');
-    }
-
-    // Reset the input so the same file can be selected again
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-  };
-
-  const handleSaveStep = () => {
-    if (!editingStep) return;
-
-    if (!editingStep.name.trim()) {
-      toast.error('Step name is required');
-      return;
-    }
-
-    if (!editingStep.instructions.trim()) {
-      toast.error('Step instructions are required');
-      return;
-    }
-
+  const handleSaveStep = (
+    stepData: Omit<PipelineStep, 'id' | 'createdAt' | 'updatedAt'> & { id?: string }
+  ) => {
     const now = new Date().toISOString();
 
-    if (editingStep.id) {
+    if (stepData.id) {
       // Update existing step
       setSteps((prev) =>
         prev.map((s) =>
-          s.id === editingStep.id
+          s.id === stepData.id
             ? {
                 ...s,
-                name: editingStep.name,
-                instructions: editingStep.instructions,
-                colorClass: editingStep.colorClass,
+                name: stepData.name,
+                instructions: stepData.instructions,
+                colorClass: stepData.colorClass,
                 updatedAt: now,
               }
             : s
@@ -190,90 +120,21 @@ export function PipelineSettingsDialog({
       // Add new step
       const newStep: PipelineStep = {
         id: `step_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 8)}`,
-        name: editingStep.name,
-        instructions: editingStep.instructions,
-        colorClass: editingStep.colorClass,
+        name: stepData.name,
+        instructions: stepData.instructions,
+        colorClass: stepData.colorClass,
         order: steps.length,
         createdAt: now,
         updatedAt: now,
       };
       setSteps((prev) => [...prev, newStep]);
     }
-
-    setEditingStep(null);
   };
 
   const handleSaveConfig = async () => {
     setIsSubmitting(true);
     try {
-      // If the user is currently editing a step and clicks "Save Configuration",
-      // include that step in the config (common expectation) instead of silently dropping it.
-      let effectiveSteps = steps;
-      if (editingStep) {
-        if (!editingStep.name.trim()) {
-          toast.error('Step name is required');
-          return;
-        }
-
-        if (!editingStep.instructions.trim()) {
-          toast.error('Step instructions are required');
-          return;
-        }
-
-        const now = new Date().toISOString();
-        if (editingStep.id) {
-          // Update existing (or add if missing for some reason)
-          const existingIdx = effectiveSteps.findIndex((s) => s.id === editingStep.id);
-          if (existingIdx >= 0) {
-            effectiveSteps = effectiveSteps.map((s) =>
-              s.id === editingStep.id
-                ? {
-                    ...s,
-                    name: editingStep.name,
-                    instructions: editingStep.instructions,
-                    colorClass: editingStep.colorClass,
-                    updatedAt: now,
-                  }
-                : s
-            );
-          } else {
-            effectiveSteps = [
-              ...effectiveSteps,
-              {
-                id: editingStep.id,
-                name: editingStep.name,
-                instructions: editingStep.instructions,
-                colorClass: editingStep.colorClass,
-                order: effectiveSteps.length,
-                createdAt: now,
-                updatedAt: now,
-              },
-            ];
-          }
-        } else {
-          // Add new step
-          effectiveSteps = [
-            ...effectiveSteps,
-            {
-              id: `step_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 8)}`,
-              name: editingStep.name,
-              instructions: editingStep.instructions,
-              colorClass: editingStep.colorClass,
-              order: effectiveSteps.length,
-              createdAt: now,
-              updatedAt: now,
-            },
-          ];
-        }
-
-        // Keep local UI state consistent with what we are saving.
-        setSteps(effectiveSteps);
-        setEditingStep(null);
-      }
-
-      const sortedEffectiveSteps = [...effectiveSteps].sort(
-        (a, b) => (a.order ?? 0) - (b.order ?? 0)
-      );
+      const sortedEffectiveSteps = [...steps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
       const config: PipelineConfig = {
         version: 1,
         steps: sortedEffectiveSteps.map((s, index) => ({ ...s, order: index })),
@@ -289,259 +150,121 @@ export function PipelineSettingsDialog({
   };
 
   return (
-    <Dialog open={open} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
-        {/* Hidden file input for loading instructions from .md files */}
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept=".md,.txt"
-          className="hidden"
-          onChange={handleFileInputChange}
-        />
-        <DialogHeader>
-          <DialogTitle>Pipeline Settings</DialogTitle>
-          <DialogDescription>
-            Configure custom pipeline steps that run after a feature completes "In Progress". Each
-            step will automatically prompt the agent with its instructions.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="flex-1 overflow-y-auto py-4 space-y-4">
-          {/* Steps List */}
-          {sortedSteps.length > 0 ? (
-            <div className="space-y-2">
-              {sortedSteps.map((step, index) => (
-                <div
-                  key={step.id}
-                  className="flex items-center gap-2 p-3 border rounded-lg bg-muted/30"
-                >
-                  <div className="flex flex-col gap-1">
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-5 w-5"
-                      onClick={() => handleMoveStep(step.id, 'up')}
-                      disabled={index === 0}
-                    >
-                      <ChevronUp className="h-3 w-3" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-5 w-5"
-                      onClick={() => handleMoveStep(step.id, 'down')}
-                      disabled={index === sortedSteps.length - 1}
-                    >
-                      <ChevronDown className="h-3 w-3" />
-                    </Button>
-                  </div>
+    <>
+      <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+        <DialogContent className="max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
+          <DialogHeader>
+            <DialogTitle>Pipeline Settings</DialogTitle>
+            <DialogDescription>
+              Configure custom pipeline steps that run after a feature completes "In Progress". Each
+              step will automatically prompt the agent with its instructions.
+            </DialogDescription>
+          </DialogHeader>
 
+          <div className="flex-1 overflow-y-auto py-4 space-y-4">
+            {/* Steps List */}
+            {sortedSteps.length > 0 ? (
+              <div className="space-y-2">
+                {sortedSteps.map((step, index) => (
                   <div
-                    className={cn(
-                      'w-3 h-8 rounded',
-                      (step.colorClass || 'bg-blue-500/20').replace('/20', '')
-                    )}
-                  />
+                    key={step.id}
+                    className="flex items-center gap-2 p-3 border rounded-lg bg-muted/30"
+                  >
+                    <div className="flex flex-col gap-1">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-5 w-5"
+                        onClick={() => handleMoveStep(step.id, 'up')}
+                        disabled={index === 0}
+                      >
+                        <ChevronUp className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-5 w-5"
+                        onClick={() => handleMoveStep(step.id, 'down')}
+                        disabled={index === sortedSteps.length - 1}
+                      >
+                        <ChevronDown className="h-3 w-3" />
+                      </Button>
+                    </div>
 
-                  <div className="flex-1 min-w-0">
-                    <div className="font-medium truncate">{step.name || 'Unnamed Step'}</div>
-                    <div className="text-xs text-muted-foreground truncate">
-                      {(step.instructions || '').substring(0, 100)}
-                      {(step.instructions || '').length > 100 ? '...' : ''}
+                    <div
+                      className={cn(
+                        'w-3 h-8 rounded',
+                        (step.colorClass || 'bg-blue-500/20').replace('/20', '')
+                      )}
+                    />
+
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">{step.name || 'Unnamed Step'}</div>
+                      <div className="text-xs text-muted-foreground truncate">
+                        {(step.instructions || '').substring(0, 100)}
+                        {(step.instructions || '').length > 100 ? '...' : ''}
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-1">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        onClick={() => handleEditStep(step)}
+                      >
+                        <Pencil className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-destructive hover:text-destructive"
+                        onClick={() => handleDeleteStep(step.id)}
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
                     </div>
                   </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-8 text-muted-foreground">
+                <p>No pipeline steps configured.</p>
+                <p className="text-sm">
+                  Add steps to create a custom workflow after features complete.
+                </p>
+              </div>
+            )}
 
-                  <div className="flex items-center gap-1">
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-7 w-7"
-                      onClick={() => handleEditStep(step)}
-                    >
-                      <Pencil className="h-3 w-3" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-7 w-7 text-destructive hover:text-destructive"
-                      onClick={() => handleDeleteStep(step.id)}
-                    >
-                      <Trash2 className="h-3 w-3" />
-                    </Button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <div className="text-center py-8 text-muted-foreground">
-              <p>No pipeline steps configured.</p>
-              <p className="text-sm">
-                Add steps to create a custom workflow after features complete.
-              </p>
-            </div>
-          )}
-
-          {/* Add Step Button */}
-          {!editingStep && (
+            {/* Add Step Button */}
             <Button variant="outline" className="w-full" onClick={handleAddStep}>
               <Plus className="h-4 w-4 mr-2" />
               Add Pipeline Step
             </Button>
-          )}
+          </div>
 
-          {/* Edit/Add Step Form */}
-          {editingStep && (
-            <div className="border rounded-lg p-4 space-y-4 bg-muted/20">
-              <div className="flex items-center justify-between">
-                <h4 className="font-medium">{editingStep.id ? 'Edit Step' : 'New Step'}</h4>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-6 w-6"
-                  onClick={() => setEditingStep(null)}
-                >
-                  <X className="h-4 w-4" />
-                </Button>
-              </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button onClick={handleSaveConfig} disabled={isSubmitting}>
+              {isSubmitting ? 'Saving...' : 'Save Pipeline'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
-              {/* Template Selector - only show for new steps */}
-              {!editingStep.id && (
-                <div className="space-y-2">
-                  <Label>Start from Template</Label>
-                  <Select
-                    onValueChange={(templateId) => {
-                      const template = STEP_TEMPLATES.find((t) => t.id === templateId);
-                      if (template) {
-                        setEditingStep((prev) =>
-                          prev
-                            ? {
-                                ...prev,
-                                name: template.name,
-                                instructions: template.instructions,
-                                colorClass: template.colorClass,
-                              }
-                            : null
-                        );
-                        toast.success(`Loaded "${template.name}" template`);
-                      }
-                    }}
-                  >
-                    <SelectTrigger className="w-full">
-                      <SelectValue placeholder="Choose a template (optional)" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {STEP_TEMPLATES.map((template) => (
-                        <SelectItem key={template.id} value={template.id}>
-                          <div className="flex items-center gap-2">
-                            <div
-                              className={cn(
-                                'w-2 h-2 rounded-full',
-                                template.colorClass.replace('/20', '')
-                              )}
-                            />
-                            {template.name}
-                          </div>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <p className="text-xs text-muted-foreground">
-                    Select a pre-built template to populate the form, or create your own from
-                    scratch.
-                  </p>
-                </div>
-              )}
-
-              <div className="space-y-2">
-                <Label htmlFor="step-name">Step Name</Label>
-                <Input
-                  id="step-name"
-                  placeholder="e.g., Code Review, Testing, Documentation"
-                  value={editingStep.name}
-                  onChange={(e) =>
-                    setEditingStep((prev) => (prev ? { ...prev, name: e.target.value } : null))
-                  }
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label>Color</Label>
-                <div className="flex flex-wrap gap-2">
-                  {COLOR_OPTIONS.map((color) => (
-                    <button
-                      key={color.value}
-                      type="button"
-                      className={cn(
-                        'w-8 h-8 rounded-full transition-all',
-                        color.preview,
-                        editingStep.colorClass === color.value
-                          ? 'ring-2 ring-offset-2 ring-primary'
-                          : 'opacity-60 hover:opacity-100'
-                      )}
-                      onClick={() =>
-                        setEditingStep((prev) =>
-                          prev ? { ...prev, colorClass: color.value } : null
-                        )
-                      }
-                      title={color.label}
-                    />
-                  ))}
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <Label htmlFor="step-instructions">Agent Instructions</Label>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-7 text-xs"
-                    onClick={handleFileUpload}
-                  >
-                    <Upload className="h-3 w-3 mr-1" />
-                    Load from .md file
-                  </Button>
-                </div>
-                <Textarea
-                  id="step-instructions"
-                  placeholder="Instructions for the agent to follow during this pipeline step..."
-                  value={editingStep.instructions}
-                  onChange={(e) =>
-                    setEditingStep((prev) =>
-                      prev ? { ...prev, instructions: e.target.value } : null
-                    )
-                  }
-                  rows={6}
-                  className="font-mono text-sm"
-                />
-              </div>
-
-              <div className="flex justify-end gap-2">
-                <Button variant="outline" onClick={() => setEditingStep(null)}>
-                  Cancel
-                </Button>
-                <Button onClick={handleSaveStep}>
-                  {editingStep.id ? 'Update Step' : 'Add Step'}
-                </Button>
-              </div>
-            </div>
-          )}
-        </div>
-
-        <DialogFooter>
-          <Button variant="outline" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button onClick={handleSaveConfig} disabled={isSubmitting}>
-            {isSubmitting
-              ? 'Saving...'
-              : editingStep
-                ? 'Save Step & Configuration'
-                : 'Save Configuration'}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+      {/* Sub-dialog for adding/editing steps */}
+      <AddEditPipelineStepDialog
+        open={addEditDialogOpen}
+        onClose={() => {
+          setAddEditDialogOpen(false);
+          setEditingStep(null);
+        }}
+        onSave={handleSaveStep}
+        existingStep={editingStep}
+        defaultOrder={steps.length}
+      />
+    </>
   );
 }