Merge branch 'AutoMaker-Org:main' into claude/task-dependency-graph-iPz1k

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

@@ -1,5 +1,5 @@
 import type { NavigateOptions } from '@tanstack/react-router';
-import { cn } from '@/lib/utils';
+import { cn, isMac } from '@/lib/utils';
 import { AutomakerLogo } from './automaker-logo';
 import { BugReportButton } from './bug-report-button';
 
@@ -20,7 +20,9 @@ export function SidebarHeader({ sidebarOpen, navigate }: SidebarHeaderProps) {
           // Background gradient for depth
           'bg-gradient-to-b from-transparent to-background/5',
           'flex items-center',
-          sidebarOpen ? 'px-3 lg:px-5 justify-start' : 'px-3 justify-center'
+          sidebarOpen ? 'px-3 lg:px-5 justify-start' : 'px-3 justify-center',
+          // Add left padding on macOS to avoid overlapping with traffic light buttons
+          isMac && 'pt-4 pl-20'
         )}
       >
         <AutomakerLogo sidebarOpen={sidebarOpen} navigate={navigate} />

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

@@ -51,7 +51,9 @@ export function SidebarNavigation({
                 return (
                   <button
                     key={item.id}
-                    onClick={() => navigate({ to: `/${item.id}` as const })}
+                    onClick={() => {
+                      navigate({ to: `/${item.id}` as const });
+                    }}
                     className={cn(
                       'group flex items-center w-full px-3 py-2.5 rounded-xl relative overflow-hidden titlebar-no-drag',
                       'transition-all duration-200 ease-out',

apps/ui/src/components/layout/sidebar/hooks/use-navigation.ts

@@ -1,9 +1,20 @@
-import { useMemo } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import type { NavigateOptions } from '@tanstack/react-router';
-import { FileText, LayoutGrid, Bot, BookOpen, UserCircle, Terminal } from 'lucide-react';
+import {
+  FileText,
+  LayoutGrid,
+  Bot,
+  BookOpen,
+  UserCircle,
+  Terminal,
+  CircleDot,
+  GitPullRequest,
+  Zap,
+} from 'lucide-react';
 import type { NavSection, NavItem } from '../types';
 import type { KeyboardShortcut } from '@/hooks/use-keyboard-shortcuts';
 import type { Project } from '@/lib/electron';
+import { getElectronAPI } from '@/lib/electron';
 
 interface UseNavigationProps {
   shortcuts: {
@@ -51,6 +62,30 @@ export function useNavigation({
   cyclePrevProject,
   cycleNextProject,
 }: UseNavigationProps) {
+  // Track if current project has a GitHub remote
+  const [hasGitHubRemote, setHasGitHubRemote] = useState(false);
+
+  useEffect(() => {
+    async function checkGitHubRemote() {
+      if (!currentProject?.path) {
+        setHasGitHubRemote(false);
+        return;
+      }
+
+      try {
+        const api = getElectronAPI();
+        if (api.github) {
+          const result = await api.github.checkRemote(currentProject.path);
+          setHasGitHubRemote(result.success && result.hasGitHubRemote === true);
+        }
+      } catch {
+        setHasGitHubRemote(false);
+      }
+    }
+
+    checkGitHubRemote();
+  }, [currentProject?.path]);
+
   // Build navigation sections
   const navSections: NavSection[] = useMemo(() => {
     const allToolsItems: NavItem[] = [
@@ -114,7 +149,7 @@ export function useNavigation({
       });
     }
 
-    return [
+    const sections: NavSection[] = [
       {
         label: 'Project',
         items: projectItems,
@@ -124,7 +159,28 @@ export function useNavigation({
         items: visibleToolsItems,
       },
     ];
-  }, [shortcuts, hideSpecEditor, hideContext, hideTerminal, hideAiProfiles]);
+
+    // Add GitHub section if project has a GitHub remote
+    if (hasGitHubRemote) {
+      sections.push({
+        label: 'GitHub',
+        items: [
+          {
+            id: 'github-issues',
+            label: 'Issues',
+            icon: CircleDot,
+          },
+          {
+            id: 'github-prs',
+            label: 'Pull Requests',
+            icon: GitPullRequest,
+          },
+        ],
+      });
+    }
+
+    return sections;
+  }, [shortcuts, hideSpecEditor, hideContext, hideTerminal, hideAiProfiles, hasGitHubRemote]);
 
   // Build keyboard shortcuts for navigation
   const navigationShortcuts: KeyboardShortcut[] = useMemo(() => {

apps/ui/src/components/layout/sidebar/hooks/use-project-creation.ts

@@ -40,7 +40,7 @@ export function useProjectCreation({
         // Write initial app_spec.txt with proper XML structure
         // Note: Must follow XML format as defined in apps/server/src/lib/app-spec-format.ts
         const api = getElectronAPI();
-        await api.fs.writeFile(
+        await api.writeFile(
           `${projectPath}/.automaker/app_spec.txt`,
           `<project_specification>
   <project_name>${projectName}</project_name>
@@ -103,7 +103,7 @@ export function useProjectCreation({
         const projectPath = `${parentDir}/${projectName}`;
 
         // Create project directory
-        await api.fs.createFolder(projectPath);
+        await api.mkdir(projectPath);
 
         // Finalize project setup
         await finalizeProjectCreation(projectPath, projectName);
@@ -127,16 +127,19 @@ export function useProjectCreation({
       setIsCreatingProject(true);
       try {
         const api = getElectronAPI();
-        const projectPath = `${parentDir}/${projectName}`;
 
         // Clone template repository
-        await api.git.clone(template.githubUrl, projectPath);
+        const cloneResult = await api.templates.clone(template.repoUrl, projectName, parentDir);
+        if (!cloneResult.success) {
+          throw new Error(cloneResult.error || 'Failed to clone template');
+        }
+        const projectPath = cloneResult.projectPath!;
 
         // Initialize .automaker directory structure
         await initializeProject(projectPath);
 
         // Write app_spec.txt with template-specific info
-        await api.fs.writeFile(
+        await api.writeFile(
           `${projectPath}/.automaker/app_spec.txt`,
           `<project_specification>
   <project_name>${projectName}</project_name>
@@ -196,16 +199,19 @@ export function useProjectCreation({
       setIsCreatingProject(true);
       try {
         const api = getElectronAPI();
-        const projectPath = `${parentDir}/${projectName}`;
 
         // Clone custom repository
-        await api.git.clone(repoUrl, projectPath);
+        const cloneResult = await api.templates.clone(repoUrl, projectName, parentDir);
+        if (!cloneResult.success) {
+          throw new Error(cloneResult.error || 'Failed to clone repository');
+        }
+        const projectPath = cloneResult.projectPath!;
 
         // Initialize .automaker directory structure
         await initializeProject(projectPath);
 
         // Write app_spec.txt with custom URL info
-        await api.fs.writeFile(
+        await api.writeFile(
           `${projectPath}/.automaker/app_spec.txt`,
           `<project_specification>
   <project_name>${projectName}</project_name>

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

@@ -426,7 +426,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
       interface DetectedFeature {
         category: string;
         description: string;
-        steps: string[];
         passes: boolean;
       }
 
@@ -453,11 +452,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
           detectedFeatures.push({
             category: 'Testing',
             description: 'Automated test suite',
-            steps: [
-              'Step 1: Tests directory exists',
-              'Step 2: Test files are present',
-              'Step 3: Run test suite',
-            ],
             passes: true,
           });
         }
@@ -471,11 +465,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
           detectedFeatures.push({
             category: 'UI/Design',
             description: 'Component-based UI architecture',
-            steps: [
-              'Step 1: Components directory exists',
-              'Step 2: UI components are defined',
-              'Step 3: Components are reusable',
-            ],
             passes: true,
           });
         }
@@ -485,11 +474,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
           detectedFeatures.push({
             category: 'Project Structure',
             description: 'Organized source code structure',
-            steps: [
-              'Step 1: Source directory exists',
-              'Step 2: Code is properly organized',
-              'Step 3: Follows best practices',
-            ],
             passes: true,
           });
         }
@@ -504,11 +488,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
               detectedFeatures.push({
                 category: 'Frontend',
                 description: 'React-based user interface',
-                steps: [
-                  'Step 1: React is installed',
-                  'Step 2: Components render correctly',
-                  'Step 3: State management works',
-                ],
                 passes: true,
               });
             }
@@ -517,11 +496,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
               detectedFeatures.push({
                 category: 'Framework',
                 description: 'Next.js framework integration',
-                steps: [
-                  'Step 1: Next.js is configured',
-                  'Step 2: Pages/routes are defined',
-                  'Step 3: Server-side rendering works',
-                ],
                 passes: true,
               });
             }
@@ -536,11 +510,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
               detectedFeatures.push({
                 category: 'Developer Experience',
                 description: 'TypeScript type safety',
-                steps: [
-                  'Step 1: TypeScript is configured',
-                  'Step 2: Type definitions exist',
-                  'Step 3: Code compiles without errors',
-                ],
                 passes: true,
               });
             }
@@ -550,11 +519,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
               detectedFeatures.push({
                 category: 'UI/Design',
                 description: 'Tailwind CSS styling',
-                steps: [
-                  'Step 1: Tailwind is configured',
-                  'Step 2: Styles are applied',
-                  'Step 3: Responsive design works',
-                ],
                 passes: true,
               });
             }
@@ -564,11 +528,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
               detectedFeatures.push({
                 category: 'Developer Experience',
                 description: 'Code quality tools',
-                steps: [
-                  'Step 1: Linter is configured',
-                  'Step 2: Code passes lint checks',
-                  'Step 3: Formatting is consistent',
-                ],
                 passes: true,
               });
             }
@@ -578,11 +537,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
               detectedFeatures.push({
                 category: 'Platform',
                 description: 'Electron desktop application',
-                steps: [
-                  'Step 1: Electron is configured',
-                  'Step 2: Main process runs',
-                  'Step 3: Renderer process loads',
-                ],
                 passes: true,
               });
             }
@@ -592,11 +546,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
               detectedFeatures.push({
                 category: 'Testing',
                 description: 'Playwright end-to-end testing',
-                steps: [
-                  'Step 1: Playwright is configured',
-                  'Step 2: E2E tests are defined',
-                  'Step 3: Tests pass successfully',
-                ],
                 passes: true,
               });
             }
@@ -610,11 +559,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
           detectedFeatures.push({
             category: 'Documentation',
             description: 'Project documentation',
-            steps: [
-              'Step 1: README exists',
-              'Step 2: Documentation is comprehensive',
-              'Step 3: Setup instructions are clear',
-            ],
             passes: true,
           });
         }
@@ -629,11 +573,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
           detectedFeatures.push({
             category: 'DevOps',
             description: 'CI/CD pipeline configuration',
-            steps: [
-              'Step 1: CI config exists',
-              'Step 2: Pipeline runs on push',
-              'Step 3: Automated checks pass',
-            ],
             passes: true,
           });
         }
@@ -647,11 +586,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
           detectedFeatures.push({
             category: 'Backend',
             description: 'API endpoints',
-            steps: [
-              'Step 1: API routes are defined',
-              'Step 2: Endpoints respond correctly',
-              'Step 3: Error handling is implemented',
-            ],
             passes: true,
           });
         }
@@ -669,11 +603,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
           detectedFeatures.push({
             category: 'Architecture',
             description: 'State management system',
-            steps: [
-              'Step 1: Store is configured',
-              'Step 2: State updates correctly',
-              'Step 3: Components access state',
-            ],
             passes: true,
           });
         }
@@ -683,11 +612,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
           detectedFeatures.push({
             category: 'Configuration',
             description: 'Project configuration files',
-            steps: [
-              'Step 1: Config files exist',
-              'Step 2: Configuration is valid',
-              'Step 3: Build process works',
-            ],
             passes: true,
           });
         }
@@ -700,11 +624,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
         detectedFeatures.push({
           category: 'Core',
           description: 'Basic project structure',
-          steps: [
-            'Step 1: Project directory exists',
-            'Step 2: Files are present',
-            'Step 3: Project can be loaded',
-          ],
           passes: true,
         });
       }
@@ -719,7 +638,6 @@ ${Object.entries(projectAnalysis.filesByExtension)
           id: crypto.randomUUID(),
           category: detectedFeature.category,
           description: detectedFeature.description,
-          steps: detectedFeature.steps,
           status: 'backlog',
         });
       }

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

@@ -436,9 +436,9 @@ export function BoardView() {
 
       // Create the feature
       const featureData = {
+        title: `Address PR #${prNumber} Review Comments`,
         category: 'PR Review',
         description,
-        steps: [],
         images: [],
         imagePaths: [],
         skipTests: defaultSkipTests,
@@ -478,9 +478,9 @@ export function BoardView() {
 
       // Create the feature
       const featureData = {
+        title: `Resolve Merge Conflicts`,
         category: 'Maintenance',
         description,
-        steps: [],
         images: [],
         imagePaths: [],
         skipTests: defaultSkipTests,

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

@@ -128,116 +128,130 @@ export function AgentInfoPanel({
   // 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 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>
-          )}
-        </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>
+            {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>
             )}
-            {!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
+          </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>
-                {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 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>
+            </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()}
+                      onMouseDown={(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>
+        {/* SummaryDialog must be rendered alongside the expand button */}
+        <SummaryDialog
+          feature={feature}
+          agentInfo={agentInfo}
+          summary={summary}
+          isOpen={isSummaryDialogOpen}
+          onOpenChange={setIsSummaryDialogOpen}
+        />
+      </>
     );
   }
 

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

@@ -1,17 +1,12 @@
 import { Feature } from '@/store/app-store';
-import { GitBranch, GitPullRequest, ExternalLink, CheckCircle2, Circle } from 'lucide-react';
+import { GitBranch, GitPullRequest, ExternalLink } from 'lucide-react';
 
 interface CardContentSectionsProps {
   feature: Feature;
   useWorktrees: boolean;
-  showSteps: boolean;
 }
 
-export function CardContentSections({
-  feature,
-  useWorktrees,
-  showSteps,
-}: CardContentSectionsProps) {
+export function CardContentSections({ feature, useWorktrees }: CardContentSectionsProps) {
   return (
     <>
       {/* Target Branch Display */}
@@ -50,30 +45,6 @@ export function CardContentSections({
             </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/kanban-card.tsx

@@ -61,9 +61,7 @@ export const KanbanCard = memo(function KanbanCard({
   cardBorderEnabled = true,
   cardBorderOpacity = 100,
 }: KanbanCardProps) {
-  const { kanbanCardDetailLevel, useWorktrees } = useAppStore();
-
-  const showSteps = kanbanCardDetailLevel === 'standard' || kanbanCardDetailLevel === 'detailed';
+  const { useWorktrees } = useAppStore();
 
   const isDraggable =
     feature.status === 'backlog' ||
@@ -152,7 +150,7 @@ export const KanbanCard = memo(function KanbanCard({
 
       <CardContent className="px-3 pt-0 pb-0">
         {/* Content Sections */}
-        <CardContentSections feature={feature} useWorktrees={useWorktrees} showSteps={showSteps} />
+        <CardContentSections feature={feature} useWorktrees={useWorktrees} />
 
         {/* Agent Info Panel */}
         <AgentInfoPanel

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

@@ -62,7 +62,6 @@ interface AddFeatureDialogProps {
     title: string;
     category: string;
     description: string;
-    steps: string[];
     images: FeatureImage[];
     imagePaths: DescriptionImagePath[];
     textFilePaths: DescriptionTextFilePath[];
@@ -105,7 +104,6 @@ export function AddFeatureDialog({
     title: '',
     category: '',
     description: '',
-    steps: [''],
     images: [] as FeatureImage[],
     imagePaths: [] as DescriptionImagePath[],
     textFilePaths: [] as DescriptionTextFilePath[],
@@ -193,7 +191,6 @@ export function AddFeatureDialog({
       title: newFeature.title,
       category,
       description: newFeature.description,
-      steps: newFeature.steps.filter((s) => s.trim()),
       images: newFeature.images,
       imagePaths: newFeature.imagePaths,
       textFilePaths: newFeature.textFilePaths,
@@ -211,7 +208,6 @@ export function AddFeatureDialog({
       title: '',
       category: '',
       description: '',
-      steps: [''],
       images: [],
       imagePaths: [],
       textFilePaths: [],
@@ -502,8 +498,6 @@ export function AddFeatureDialog({
             <TestingTabContent
               skipTests={newFeature.skipTests}
               onSkipTestsChange={(skipTests) => setNewFeature({ ...newFeature, skipTests })}
-              steps={newFeature.steps}
-              onStepsChange={(steps) => setNewFeature({ ...newFeature, steps })}
             />
           </TabsContent>
         </Tabs>

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

@@ -64,7 +64,6 @@ interface EditFeatureDialogProps {
       title: string;
       category: string;
       description: string;
-      steps: string[];
       skipTests: boolean;
       model: AgentModel;
       thinkingLevel: ThinkingLevel;
@@ -165,7 +164,6 @@ export function EditFeatureDialog({
       title: editingFeature.title ?? '',
       category: editingFeature.category,
       description: editingFeature.description,
-      steps: editingFeature.steps,
       skipTests: editingFeature.skipTests ?? false,
       model: selectedModel,
       thinkingLevel: normalizedThinking,
@@ -491,8 +489,6 @@ export function EditFeatureDialog({
             <TestingTabContent
               skipTests={editingFeature.skipTests ?? false}
               onSkipTestsChange={(skipTests) => setEditingFeature({ ...editingFeature, skipTests })}
-              steps={editingFeature.steps}
-              onStepsChange={(steps) => setEditingFeature({ ...editingFeature, steps })}
               testIdPrefix="edit"
             />
           </TabsContent>

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

@@ -245,7 +245,6 @@ export function FeatureSuggestionsDialog({
         id: `feature-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
         category: s.category,
         description: s.description,
-        steps: s.steps,
         status: 'backlog' as const,
         skipTests: true, // As specified, testing mode true
         priority: s.priority, // Preserve priority from suggestion
@@ -453,23 +452,9 @@ export function FeatureSuggestionsDialog({
                           {suggestion.description}
                         </Label>
 
-                        {isExpanded && (
-                          <div className="mt-3 space-y-2 text-sm">
-                            {suggestion.reasoning && (
-                              <p className="text-muted-foreground italic">{suggestion.reasoning}</p>
-                            )}
-                            {suggestion.steps.length > 0 && (
-                              <div>
-                                <p className="text-xs font-medium text-muted-foreground mb-1">
-                                  Implementation Steps:
-                                </p>
-                                <ul className="list-disc list-inside text-xs text-muted-foreground space-y-0.5">
-                                  {suggestion.steps.map((step, i) => (
-                                    <li key={i}>{step}</li>
-                                  ))}
-                                </ul>
-                              </div>
-                            )}
+                        {isExpanded && suggestion.reasoning && (
+                          <div className="mt-3 text-sm">
+                            <p className="text-muted-foreground italic">{suggestion.reasoning}</p>
                           </div>
                         )}
                       </div>

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

@@ -89,7 +89,6 @@ export function useBoardActions({
       title: string;
       category: string;
       description: string;
-      steps: string[];
       images: FeatureImage[];
       imagePaths: DescriptionImagePath[];
       skipTests: boolean;
@@ -208,7 +207,6 @@ export function useBoardActions({
         title: string;
         category: string;
         description: string;
-        steps: string[];
         skipTests: boolean;
         model: AgentModel;
         thinkingLevel: ThinkingLevel;

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

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

apps/ui/src/components/views/github-issues-view.tsx

@@ -0,0 +1,334 @@
+import { useState, useEffect, useCallback } from 'react';
+import { CircleDot, Loader2, RefreshCw, ExternalLink, CheckCircle2, Circle, X } from 'lucide-react';
+import { getElectronAPI, GitHubIssue } from '@/lib/electron';
+import { useAppStore } from '@/store/app-store';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+export function GitHubIssuesView() {
+  const [openIssues, setOpenIssues] = useState<GitHubIssue[]>([]);
+  const [closedIssues, setClosedIssues] = useState<GitHubIssue[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedIssue, setSelectedIssue] = useState<GitHubIssue | null>(null);
+  const { currentProject } = useAppStore();
+
+  const fetchIssues = useCallback(async () => {
+    if (!currentProject?.path) {
+      setError('No project selected');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setError(null);
+      const api = getElectronAPI();
+      if (api.github) {
+        const result = await api.github.listIssues(currentProject.path);
+        if (result.success) {
+          setOpenIssues(result.openIssues || []);
+          setClosedIssues(result.closedIssues || []);
+        } else {
+          setError(result.error || 'Failed to fetch issues');
+        }
+      }
+    } catch (err) {
+      console.error('[GitHubIssuesView] Error fetching issues:', err);
+      setError(err instanceof Error ? err.message : 'Failed to fetch issues');
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, [currentProject?.path]);
+
+  useEffect(() => {
+    fetchIssues();
+  }, [fetchIssues]);
+
+  const handleRefresh = useCallback(() => {
+    setRefreshing(true);
+    fetchIssues();
+  }, [fetchIssues]);
+
+  const handleOpenInGitHub = useCallback((url: string) => {
+    const api = getElectronAPI();
+    api.openExternalLink(url);
+  }, []);
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  if (loading) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center text-center p-6">
+        <div className="p-4 rounded-full bg-destructive/10 mb-4">
+          <CircleDot className="h-12 w-12 text-destructive" />
+        </div>
+        <h2 className="text-lg font-medium mb-2">Failed to Load Issues</h2>
+        <p className="text-muted-foreground max-w-md mb-4">{error}</p>
+        <Button variant="outline" onClick={handleRefresh}>
+          <RefreshCw className="h-4 w-4 mr-2" />
+          Try Again
+        </Button>
+      </div>
+    );
+  }
+
+  const totalIssues = openIssues.length + closedIssues.length;
+
+  return (
+    <div className="flex-1 flex overflow-hidden">
+      {/* Issues List */}
+      <div
+        className={cn(
+          'flex flex-col overflow-hidden border-r border-border',
+          selectedIssue ? 'w-80' : 'flex-1'
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-border">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-green-500/10">
+              <CircleDot className="h-5 w-5 text-green-500" />
+            </div>
+            <div>
+              <h1 className="text-lg font-bold">Issues</h1>
+              <p className="text-xs text-muted-foreground">
+                {totalIssues === 0
+                  ? 'No issues found'
+                  : `${openIssues.length} open, ${closedIssues.length} closed`}
+              </p>
+            </div>
+          </div>
+          <Button variant="outline" size="sm" onClick={handleRefresh} disabled={refreshing}>
+            <RefreshCw className={cn('h-4 w-4', refreshing && 'animate-spin')} />
+          </Button>
+        </div>
+
+        {/* Issues List */}
+        <div className="flex-1 overflow-auto">
+          {totalIssues === 0 ? (
+            <div className="flex flex-col items-center justify-center h-full text-center p-6">
+              <div className="p-4 rounded-full bg-muted/50 mb-4">
+                <CircleDot className="h-8 w-8 text-muted-foreground" />
+              </div>
+              <h2 className="text-base font-medium mb-2">No Issues</h2>
+              <p className="text-sm text-muted-foreground">This repository has no issues yet.</p>
+            </div>
+          ) : (
+            <div className="divide-y divide-border">
+              {/* Open Issues */}
+              {openIssues.map((issue) => (
+                <IssueRow
+                  key={issue.number}
+                  issue={issue}
+                  isSelected={selectedIssue?.number === issue.number}
+                  onClick={() => setSelectedIssue(issue)}
+                  onOpenExternal={() => handleOpenInGitHub(issue.url)}
+                  formatDate={formatDate}
+                />
+              ))}
+
+              {/* Closed Issues Section */}
+              {closedIssues.length > 0 && (
+                <>
+                  <div className="px-4 py-2 bg-muted/30 text-xs font-medium text-muted-foreground">
+                    Closed Issues ({closedIssues.length})
+                  </div>
+                  {closedIssues.map((issue) => (
+                    <IssueRow
+                      key={issue.number}
+                      issue={issue}
+                      isSelected={selectedIssue?.number === issue.number}
+                      onClick={() => setSelectedIssue(issue)}
+                      onOpenExternal={() => handleOpenInGitHub(issue.url)}
+                      formatDate={formatDate}
+                    />
+                  ))}
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Issue Detail Panel */}
+      {selectedIssue && (
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* Detail Header */}
+          <div className="flex items-center justify-between p-3 border-b border-border bg-muted/30">
+            <div className="flex items-center gap-2 min-w-0">
+              {selectedIssue.state === 'OPEN' ? (
+                <Circle className="h-4 w-4 text-green-500 flex-shrink-0" />
+              ) : (
+                <CheckCircle2 className="h-4 w-4 text-purple-500 flex-shrink-0" />
+              )}
+              <span className="text-sm font-medium truncate">
+                #{selectedIssue.number} {selectedIssue.title}
+              </span>
+            </div>
+            <div className="flex items-center gap-2 flex-shrink-0">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => handleOpenInGitHub(selectedIssue.url)}
+              >
+                <ExternalLink className="h-4 w-4 mr-1" />
+                Open in GitHub
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => setSelectedIssue(null)}>
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+
+          {/* Issue Detail Content */}
+          <div className="flex-1 overflow-auto p-6">
+            {/* Title */}
+            <h1 className="text-xl font-bold mb-2">{selectedIssue.title}</h1>
+
+            {/* Meta info */}
+            <div className="flex items-center gap-3 text-sm text-muted-foreground mb-4">
+              <span
+                className={cn(
+                  'px-2 py-0.5 rounded-full text-xs font-medium',
+                  selectedIssue.state === 'OPEN'
+                    ? 'bg-green-500/10 text-green-500'
+                    : 'bg-purple-500/10 text-purple-500'
+                )}
+              >
+                {selectedIssue.state === 'OPEN' ? 'Open' : 'Closed'}
+              </span>
+              <span>
+                #{selectedIssue.number} opened {formatDate(selectedIssue.createdAt)} by{' '}
+                <span className="font-medium text-foreground">{selectedIssue.author.login}</span>
+              </span>
+            </div>
+
+            {/* Labels */}
+            {selectedIssue.labels.length > 0 && (
+              <div className="flex items-center gap-2 mb-6 flex-wrap">
+                {selectedIssue.labels.map((label) => (
+                  <span
+                    key={label.name}
+                    className="px-2 py-0.5 text-xs font-medium rounded-full"
+                    style={{
+                      backgroundColor: `#${label.color}20`,
+                      color: `#${label.color}`,
+                      border: `1px solid #${label.color}40`,
+                    }}
+                  >
+                    {label.name}
+                  </span>
+                ))}
+              </div>
+            )}
+
+            {/* Body */}
+            {selectedIssue.body ? (
+              <div className="prose prose-sm dark:prose-invert max-w-none">
+                <div className="whitespace-pre-wrap text-sm">{selectedIssue.body}</div>
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground italic">No description provided.</p>
+            )}
+
+            {/* Open in GitHub CTA */}
+            <div className="mt-8 p-4 rounded-lg bg-muted/50 border border-border">
+              <p className="text-sm text-muted-foreground mb-3">
+                View comments, add reactions, and more on GitHub.
+              </p>
+              <Button onClick={() => handleOpenInGitHub(selectedIssue.url)}>
+                <ExternalLink className="h-4 w-4 mr-2" />
+                View Full Issue on GitHub
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface IssueRowProps {
+  issue: GitHubIssue;
+  isSelected: boolean;
+  onClick: () => void;
+  onOpenExternal: () => void;
+  formatDate: (date: string) => string;
+}
+
+function IssueRow({ issue, isSelected, onClick, onOpenExternal, formatDate }: IssueRowProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-start gap-3 p-3 cursor-pointer hover:bg-accent/50 transition-colors',
+        isSelected && 'bg-accent'
+      )}
+      onClick={onClick}
+    >
+      {issue.state === 'OPEN' ? (
+        <Circle className="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
+      ) : (
+        <CheckCircle2 className="h-4 w-4 text-purple-500 mt-0.5 flex-shrink-0" />
+      )}
+
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium truncate">{issue.title}</span>
+        </div>
+
+        <div className="flex items-center gap-2 mt-1 flex-wrap">
+          <span className="text-xs text-muted-foreground">
+            #{issue.number} opened {formatDate(issue.createdAt)} by {issue.author.login}
+          </span>
+        </div>
+
+        {issue.labels.length > 0 && (
+          <div className="flex items-center gap-1 mt-2 flex-wrap">
+            {issue.labels.map((label) => (
+              <span
+                key={label.name}
+                className="px-1.5 py-0.5 text-[10px] font-medium rounded-full"
+                style={{
+                  backgroundColor: `#${label.color}20`,
+                  color: `#${label.color}`,
+                  border: `1px solid #${label.color}40`,
+                }}
+              >
+                {label.name}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        className="flex-shrink-0 opacity-0 group-hover:opacity-100"
+        onClick={(e) => {
+          e.stopPropagation();
+          onOpenExternal();
+        }}
+      >
+        <ExternalLink className="h-3.5 w-3.5" />
+      </Button>
+    </div>
+  );
+}

apps/ui/src/components/views/github-prs-view.tsx

@@ -0,0 +1,421 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+  GitPullRequest,
+  Loader2,
+  RefreshCw,
+  ExternalLink,
+  GitMerge,
+  Circle,
+  X,
+  AlertCircle,
+} from 'lucide-react';
+import { getElectronAPI, GitHubPR } from '@/lib/electron';
+import { useAppStore } from '@/store/app-store';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+export function GitHubPRsView() {
+  const [openPRs, setOpenPRs] = useState<GitHubPR[]>([]);
+  const [mergedPRs, setMergedPRs] = useState<GitHubPR[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedPR, setSelectedPR] = useState<GitHubPR | null>(null);
+  const { currentProject } = useAppStore();
+
+  const fetchPRs = useCallback(async () => {
+    if (!currentProject?.path) {
+      setError('No project selected');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setError(null);
+      const api = getElectronAPI();
+      if (api.github) {
+        const result = await api.github.listPRs(currentProject.path);
+        if (result.success) {
+          setOpenPRs(result.openPRs || []);
+          setMergedPRs(result.mergedPRs || []);
+        } else {
+          setError(result.error || 'Failed to fetch pull requests');
+        }
+      }
+    } catch (err) {
+      console.error('[GitHubPRsView] Error fetching PRs:', err);
+      setError(err instanceof Error ? err.message : 'Failed to fetch pull requests');
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, [currentProject?.path]);
+
+  useEffect(() => {
+    fetchPRs();
+  }, [fetchPRs]);
+
+  const handleRefresh = useCallback(() => {
+    setRefreshing(true);
+    fetchPRs();
+  }, [fetchPRs]);
+
+  const handleOpenInGitHub = useCallback((url: string) => {
+    const api = getElectronAPI();
+    api.openExternalLink(url);
+  }, []);
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  const getReviewStatus = (pr: GitHubPR) => {
+    if (pr.isDraft) return { label: 'Draft', color: 'text-muted-foreground', bg: 'bg-muted' };
+    switch (pr.reviewDecision) {
+      case 'APPROVED':
+        return { label: 'Approved', color: 'text-green-500', bg: 'bg-green-500/10' };
+      case 'CHANGES_REQUESTED':
+        return { label: 'Changes requested', color: 'text-orange-500', bg: 'bg-orange-500/10' };
+      case 'REVIEW_REQUIRED':
+        return { label: 'Review required', color: 'text-yellow-500', bg: 'bg-yellow-500/10' };
+      default:
+        return null;
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center text-center p-6">
+        <div className="p-4 rounded-full bg-destructive/10 mb-4">
+          <GitPullRequest className="h-12 w-12 text-destructive" />
+        </div>
+        <h2 className="text-lg font-medium mb-2">Failed to Load Pull Requests</h2>
+        <p className="text-muted-foreground max-w-md mb-4">{error}</p>
+        <Button variant="outline" onClick={handleRefresh}>
+          <RefreshCw className="h-4 w-4 mr-2" />
+          Try Again
+        </Button>
+      </div>
+    );
+  }
+
+  const totalPRs = openPRs.length + mergedPRs.length;
+
+  return (
+    <div className="flex-1 flex overflow-hidden">
+      {/* PR List */}
+      <div
+        className={cn(
+          'flex flex-col overflow-hidden border-r border-border',
+          selectedPR ? 'w-80' : 'flex-1'
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-border">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-blue-500/10">
+              <GitPullRequest className="h-5 w-5 text-blue-500" />
+            </div>
+            <div>
+              <h1 className="text-lg font-bold">Pull Requests</h1>
+              <p className="text-xs text-muted-foreground">
+                {totalPRs === 0
+                  ? 'No pull requests found'
+                  : `${openPRs.length} open, ${mergedPRs.length} merged`}
+              </p>
+            </div>
+          </div>
+          <Button variant="outline" size="sm" onClick={handleRefresh} disabled={refreshing}>
+            <RefreshCw className={cn('h-4 w-4', refreshing && 'animate-spin')} />
+          </Button>
+        </div>
+
+        {/* PR List */}
+        <div className="flex-1 overflow-auto">
+          {totalPRs === 0 ? (
+            <div className="flex flex-col items-center justify-center h-full text-center p-6">
+              <div className="p-4 rounded-full bg-muted/50 mb-4">
+                <GitPullRequest className="h-8 w-8 text-muted-foreground" />
+              </div>
+              <h2 className="text-base font-medium mb-2">No Pull Requests</h2>
+              <p className="text-sm text-muted-foreground">
+                This repository has no pull requests yet.
+              </p>
+            </div>
+          ) : (
+            <div className="divide-y divide-border">
+              {/* Open PRs */}
+              {openPRs.map((pr) => (
+                <PRRow
+                  key={pr.number}
+                  pr={pr}
+                  isSelected={selectedPR?.number === pr.number}
+                  onClick={() => setSelectedPR(pr)}
+                  onOpenExternal={() => handleOpenInGitHub(pr.url)}
+                  formatDate={formatDate}
+                  getReviewStatus={getReviewStatus}
+                />
+              ))}
+
+              {/* Merged PRs Section */}
+              {mergedPRs.length > 0 && (
+                <>
+                  <div className="px-4 py-2 bg-muted/30 text-xs font-medium text-muted-foreground">
+                    Merged ({mergedPRs.length})
+                  </div>
+                  {mergedPRs.map((pr) => (
+                    <PRRow
+                      key={pr.number}
+                      pr={pr}
+                      isSelected={selectedPR?.number === pr.number}
+                      onClick={() => setSelectedPR(pr)}
+                      onOpenExternal={() => handleOpenInGitHub(pr.url)}
+                      formatDate={formatDate}
+                      getReviewStatus={getReviewStatus}
+                    />
+                  ))}
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* PR Detail Panel */}
+      {selectedPR && (
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* Detail Header */}
+          <div className="flex items-center justify-between p-3 border-b border-border bg-muted/30">
+            <div className="flex items-center gap-2 min-w-0">
+              {selectedPR.state === 'MERGED' ? (
+                <GitMerge className="h-4 w-4 text-purple-500 flex-shrink-0" />
+              ) : (
+                <GitPullRequest className="h-4 w-4 text-green-500 flex-shrink-0" />
+              )}
+              <span className="text-sm font-medium truncate">
+                #{selectedPR.number} {selectedPR.title}
+              </span>
+              {selectedPR.isDraft && (
+                <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-muted text-muted-foreground">
+                  Draft
+                </span>
+              )}
+            </div>
+            <div className="flex items-center gap-2 flex-shrink-0">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => handleOpenInGitHub(selectedPR.url)}
+              >
+                <ExternalLink className="h-4 w-4 mr-1" />
+                Open in GitHub
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => setSelectedPR(null)}>
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+
+          {/* PR Detail Content */}
+          <div className="flex-1 overflow-auto p-6">
+            {/* Title */}
+            <h1 className="text-xl font-bold mb-2">{selectedPR.title}</h1>
+
+            {/* Meta info */}
+            <div className="flex items-center gap-3 text-sm text-muted-foreground mb-4 flex-wrap">
+              <span
+                className={cn(
+                  'px-2 py-0.5 rounded-full text-xs font-medium',
+                  selectedPR.state === 'MERGED'
+                    ? 'bg-purple-500/10 text-purple-500'
+                    : selectedPR.isDraft
+                      ? 'bg-muted text-muted-foreground'
+                      : 'bg-green-500/10 text-green-500'
+                )}
+              >
+                {selectedPR.state === 'MERGED' ? 'Merged' : selectedPR.isDraft ? 'Draft' : 'Open'}
+              </span>
+              {getReviewStatus(selectedPR) && (
+                <span
+                  className={cn(
+                    'px-2 py-0.5 rounded-full text-xs font-medium',
+                    getReviewStatus(selectedPR)!.bg,
+                    getReviewStatus(selectedPR)!.color
+                  )}
+                >
+                  {getReviewStatus(selectedPR)!.label}
+                </span>
+              )}
+              <span>
+                #{selectedPR.number} opened {formatDate(selectedPR.createdAt)} by{' '}
+                <span className="font-medium text-foreground">{selectedPR.author.login}</span>
+              </span>
+            </div>
+
+            {/* Branch info */}
+            {selectedPR.headRefName && (
+              <div className="flex items-center gap-2 mb-4">
+                <span className="text-xs text-muted-foreground">Branch:</span>
+                <span className="text-xs font-mono bg-muted px-2 py-0.5 rounded">
+                  {selectedPR.headRefName}
+                </span>
+              </div>
+            )}
+
+            {/* Labels */}
+            {selectedPR.labels.length > 0 && (
+              <div className="flex items-center gap-2 mb-6 flex-wrap">
+                {selectedPR.labels.map((label) => (
+                  <span
+                    key={label.name}
+                    className="px-2 py-0.5 text-xs font-medium rounded-full"
+                    style={{
+                      backgroundColor: `#${label.color}20`,
+                      color: `#${label.color}`,
+                      border: `1px solid #${label.color}40`,
+                    }}
+                  >
+                    {label.name}
+                  </span>
+                ))}
+              </div>
+            )}
+
+            {/* Body */}
+            {selectedPR.body ? (
+              <div className="prose prose-sm dark:prose-invert max-w-none">
+                <div className="whitespace-pre-wrap text-sm">{selectedPR.body}</div>
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground italic">No description provided.</p>
+            )}
+
+            {/* Open in GitHub CTA */}
+            <div className="mt-8 p-4 rounded-lg bg-muted/50 border border-border">
+              <p className="text-sm text-muted-foreground mb-3">
+                View code changes, comments, and reviews on GitHub.
+              </p>
+              <Button onClick={() => handleOpenInGitHub(selectedPR.url)}>
+                <ExternalLink className="h-4 w-4 mr-2" />
+                View Full PR on GitHub
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface PRRowProps {
+  pr: GitHubPR;
+  isSelected: boolean;
+  onClick: () => void;
+  onOpenExternal: () => void;
+  formatDate: (date: string) => string;
+  getReviewStatus: (pr: GitHubPR) => { label: string; color: string; bg: string } | null;
+}
+
+function PRRow({
+  pr,
+  isSelected,
+  onClick,
+  onOpenExternal,
+  formatDate,
+  getReviewStatus,
+}: PRRowProps) {
+  const reviewStatus = getReviewStatus(pr);
+
+  return (
+    <div
+      className={cn(
+        'flex items-start gap-3 p-3 cursor-pointer hover:bg-accent/50 transition-colors',
+        isSelected && 'bg-accent'
+      )}
+      onClick={onClick}
+    >
+      {pr.state === 'MERGED' ? (
+        <GitMerge className="h-4 w-4 text-purple-500 mt-0.5 flex-shrink-0" />
+      ) : (
+        <GitPullRequest className="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
+      )}
+
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium truncate">{pr.title}</span>
+          {pr.isDraft && (
+            <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-muted text-muted-foreground flex-shrink-0">
+              Draft
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2 mt-1 flex-wrap">
+          <span className="text-xs text-muted-foreground">
+            #{pr.number} opened {formatDate(pr.createdAt)} by {pr.author.login}
+          </span>
+          {pr.headRefName && (
+            <span className="text-xs text-muted-foreground font-mono bg-muted px-1 rounded">
+              {pr.headRefName}
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2 mt-2 flex-wrap">
+          {/* Review Status */}
+          {reviewStatus && (
+            <span
+              className={cn(
+                'px-1.5 py-0.5 text-[10px] font-medium rounded',
+                reviewStatus.bg,
+                reviewStatus.color
+              )}
+            >
+              {reviewStatus.label}
+            </span>
+          )}
+
+          {/* Labels */}
+          {pr.labels.map((label) => (
+            <span
+              key={label.name}
+              className="px-1.5 py-0.5 text-[10px] font-medium rounded-full"
+              style={{
+                backgroundColor: `#${label.color}20`,
+                color: `#${label.color}`,
+                border: `1px solid #${label.color}40`,
+              }}
+            >
+              {label.name}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        className="flex-shrink-0 opacity-0 group-hover:opacity-100"
+        onClick={(e) => {
+          e.stopPropagation();
+          onOpenExternal();
+        }}
+      >
+        <ExternalLink className="h-3.5 w-3.5" />
+      </Button>
+    </div>
+  );
+}

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

@@ -345,11 +345,6 @@ export function InterviewView() {
         category: 'Core',
         description: 'Initial project setup',
         status: 'backlog' as const,
-        steps: [
-          'Step 1: Review app_spec.txt',
-          'Step 2: Set up development environment',
-          'Step 3: Start implementing features',
-        ],
         skipTests: true,
       };