P2-2: Dynamic Slide Generation

[ib823]

🎯 Summary

Implements P2-2: Dynamic Slide Generation - Adaptive presentation slides based on project data.

Per Roadmap: Sprint 3 (P2-2) - Dynamic Slide Generation

---

📦 What's Included

1. Slide Generator (src/lib/presentation/slide-generator.ts)

• Conditional slide logic based on project data
• Slide count varies by complexity (5-8 range)
• Utilities for reordering and visibility toggle
• Slide validation and recommendations

Conditional Logic:

{
  id: 'phase-breakdown',
  title: 'Phase Breakdown',
  type: 'phase-breakdown',
  enabled: phases.length > 3,  // Only if >3 phases
  order: 3,
}

2. Slide Components (src/components/project-v2/modes/slides/SlideComponents.tsx)

• Modular, reusable slide components
• Data-driven rendering
• Framer Motion animations
• 8 slide types:
  • Cover (always)
  • Requirements (if chips exist)
  • Timeline (if phases exist)
  • Phase Breakdown (if >3 phases)
  • RICEFW (if items exist - placeholder)
  • Team Structure (if resources exist)
  • Milestones (uses phases)
  • Summary (always)

3. PresentModeV2 (src/components/project-v2/modes/PresentModeV2.tsx)

• Dynamic slide rendering
• Slide management panel (press 'S')
• Hide/show individual slides
• Reorder slides (UI ready, drag TBD)
• Keyboard navigation (arrows, Escape, 'S')

---

🎨 Features

Conditional Slide Inclusion

Slide	Condition	Purpose
Cover	Always	Project overview
Requirements	chips.length > 0	Show captured requirements
Timeline	phases.length > 0	Show implementation timeline
Phase Breakdown	phases.length > 3	Detailed phase info for complex projects
RICEFW	ricefwItems.length > 0	Custom objects (placeholder)
Team Structure	Resources exist	Team composition
Milestones	Phases exist	Key deliverables
Summary	Always	Project summary

Slide Management UI

• Settings Panel: Press 'S' to toggle
• Hide/Show: Eye icon to toggle visibility
• Reorder: Drag handle (UI ready, drag logic TBD)
• Visual Feedback: Disabled slides grayed out

Navigation

• Keyboard: ← → arrows, Escape to exit, 'S' for settings
• Mouse: Navigation buttons, slide dots, settings button
• Counter: Shows current/total (e.g., "3 / 7")

---

✅ Definition of Done (from Roadmap)

• Slides generated based on project data
• RICEFW slide only if items exist (placeholder for now)
• Phase breakdown only if >3 phases
• Slide count varies by project (5-8 range)
• User can reorder slides (UI ready, drag TBD)
• User can hide/show slides

---

🔧 Technical Details

Slide Generation Flow

1. Generate slide configs based on project data
2. Filter enabled slides
3. Sort by order
4. Render components dynamically

Type-Safe Slide System

export type SlideType = 
  | 'cover' 
  | 'requirements' 
  | 'timeline'
  | 'phase-breakdown'
  | 'ricefw'
  | 'team'
  | 'milestones'
  | 'summary';

Validation

• Cover must be first
• Summary must be last
• No duplicate IDs
• Min 3 slides (cover + summary + 1 content)

---

📝 Files Changed

Created:

• src/lib/presentation/slide-generator.ts (180 lines)
• src/components/project-v2/modes/slides/SlideComponents.tsx (260 lines)
• src/components/project-v2/modes/PresentModeV2.tsx (260 lines)

Modified:

• tsconfig.tsbuildinfo (auto-generated)

---

🚀 Next Steps

1. Drag-and-Drop: Implement actual drag reordering (use @dnd-kit or react-beautiful-dnd)
2. RICEFW Integration: Connect to actual RICEFW data when available
3. Replace PresentMode: Swap PresentMode with PresentModeV2 in ProjectShell
4. Persistence: Save user's slide preferences to localStorage
5. Export: Ensure PDF export works with dynamic slides

---

🔗 Related

• Addresses: Roadmap P2-2 (Dynamic Slide Generation)
• Builds on: PresentMode enhancements (P1-2)
• Complements: P2-1 (Unified Store - in review P2-1: Unified Project Store with Auto-Migration #22)

---

🤖 AI Context

Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
cockpit	Ready	Preview	Comment	Oct 7, 2025 2:55am