Add compact mode support to visual components for presentations

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

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

Author: ofriw

website/src/components/PresentationMode/RevealSlideshow.tsx

@@ -11,6 +11,7 @@ import WorkflowCircle from '../VisualElements/WorkflowCircle';
 import GroundingComparison from '../VisualElements/GroundingComparison';
 import ContextWindowMeter from '../VisualElements/ContextWindowMeter';
 import AbstractShapesVisualization from '../VisualElements/AbstractShapesVisualization';
+import PlanningStrategyComparison from '../VisualElements/PlanningStrategyComparison';
 
 interface SpeakerNotes {
   talkingPoints: string;
@@ -66,6 +67,7 @@ const VISUAL_COMPONENTS = {
   GroundingComparison,
   ContextWindowMeter,
   AbstractShapesVisualization,
+  PlanningStrategyComparison,
 };
 
 export default function RevealSlideshow({ presentation, onClose }: RevealSlideshowProps) {
@@ -85,7 +87,7 @@ export default function RevealSlideshow({ presentation, onClose }: RevealSlidesh
       // Display controls
       controls: true,
       progress: true,
-      center: true,
+      center: false,
       hash: true,
       slideNumber: 'c/t',
 
@@ -197,7 +199,7 @@ export default function RevealSlideshow({ presentation, onClose }: RevealSlidesh
               </code>
             </pre>
             {slide.caption && (
-              <p className={styles.caption}>{slide.caption}</p>
+              <p className={`${styles.caption} ${styles.slideCaption}`}>{slide.caption}</p>
             )}
           </section>
         );
@@ -266,13 +268,16 @@ export default function RevealSlideshow({ presentation, onClose }: RevealSlidesh
           <section key={key} data-notes={formatSpeakerNotes(slide.speakerNotes)}>
             <h2>{slide.title}</h2>
             <div className={styles.visualContainer}>
-              {VisualComponent && <VisualComponent />}
+              {VisualComponent && <VisualComponent compact={true} />}
               {!VisualComponent && (
                 <p className={styles.error}>Visual component '{slide.component}' not found</p>
               )}
             </div>
             {slide.caption && (
-              <p className={styles.caption}>{slide.caption}</p>
+              <p className={`${styles.caption} ${styles.slideCaption}`}>{slide.caption}</p>
+            )}
+            {slide.subtitle && (
+              <p className={`${styles.subtitle} ${styles.slideCaption}`}>{slide.subtitle}</p>
             )}
           </section>
         );

website/src/components/VisualElements/WorkflowCircle.module.css

@@ -8,6 +8,14 @@
   animation: fadeIn 0.6s ease-in-out;
 }
 
+/* Compact mode for presentations - maximize diagram size for prominence */
+.container.compact {
+  padding: 0;
+  margin: 0 auto;
+  max-width: 1000px;
+  max-height: none;
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;

website/src/components/VisualElements/WorkflowCircle.tsx

@@ -15,11 +15,15 @@ interface Connection {
   endY: number;
 }
 
-export default function WorkflowCircle() {
+interface WorkflowCircleProps {
+  compact?: boolean;
+}
+
+export default function WorkflowCircle({ compact = false }: WorkflowCircleProps) {
   const centerX = 250;
   const centerY = 250;
-  const radius = 140;
-  const nodeRadius = 50;
+  const radius = 170;
+  const nodeRadius = 60;
 
   // Calculate positions for each phase (clockwise starting from top)
   const phases: Phase[] = [
@@ -67,7 +71,7 @@ export default function WorkflowCircle() {
 
     // Calculate control points for curved arrows on the outer ring
     // Use the midpoint between start and end angles, pushed outward
-    const outerRadius = radius + 60;
+    const outerRadius = radius + 50;
 
     // Calculate angles for start and end points
     const startAngle = Math.atan2(startY - centerY, startX - centerX);
@@ -94,7 +98,7 @@ export default function WorkflowCircle() {
 
   return (
     <div
-      className={styles.container}
+      className={`${styles.container} ${compact ? styles.compact : ''}`}
       role="img"
       aria-label="Four-phase iterative workflow diagram showing Research, Plan, Execute, and Validate phases in a continuous cycle"
     >
@@ -183,10 +187,12 @@ export default function WorkflowCircle() {
       </svg>
 
       {/* Text description for additional context */}
-      <p className={styles.description}>
-        Each phase flows into the next in a continuous cycle. After validation,
-        iterate back to research as needed to refine and improve.
-      </p>
+      {!compact && (
+        <p className={styles.description}>
+          Each phase flows into the next in a continuous cycle. After validation,
+          iterate back to research as needed to refine and improve.
+        </p>
+      )}
     </div>
   );
 }