Merge branch 'podcast'

Author: ofriw

scripts/generate-presentation.js

@@ -155,13 +155,27 @@ Examples you will see:
 **MANDATORY RULE:** When you encounter a [VISUAL_COMPONENT: X] marker, you MUST:
 1. Generate a "visual" slide type (NOT a "concept" slide)
 2. Set "component" field to the exact component name from the marker
-3. Use the surrounding context to write a descriptive caption
+3. Use the surrounding context to write a VALUE-FOCUSED caption
+
+**CAPTION REQUIREMENTS:**
+
+CRITICAL: Captions must be EXACTLY ONE SHORT SENTENCE capturing the core essence.
+- Length: 8-15 words maximum
+- No statistics, percentages, or numerical data
+- Less is more—distill to the single most important insight
+
+✓ Capture the core conceptual essence in one breath
+✓ Be direct and concise—what's the ONE key insight?
+✓ Focus on impact or principle, not detailed explanation
+✗ Don't include multiple points or list consequences
+✗ Don't use numbers, statistics, or percentages
+✗ Don't just describe what's shown (that's the title's job)
 
 Example:
 {
   "type": "visual",
   "component": "AbstractShapesVisualization",
-  "caption": "Visual comparison showing cluttered vs clean context"
+  "caption": "Clean context prevents agent hallucinations"
 }
 
 **DO NOT:**

website/docs/methodology/lesson-3-high-level-methodology.md

@@ -5,6 +5,7 @@ title: 'Four-Phase Workflow'
 ---
 
 import WorkflowCircle from '@site/src/components/VisualElements/WorkflowCircle';
+import PlanningStrategyComparison from '@site/src/components/VisualElements/PlanningStrategyComparison';
 
 The hardest part of working with AI agents isn't learning new tools or writing better prompts. It's letting go.
 
@@ -78,6 +79,8 @@ For domain knowledge, ArguSeek pulls information from Google directly and effici
 
 With research complete, you now plan the change. Planning isn't a single approach—it's a strategic choice based on whether you know the solution or need to discover it.
 
+<PlanningStrategyComparison />
+
 **Exploration Planning:** Use this when the solution space is unclear or you need to discover the best approach. Rather than dictating a solution, frame the problem space and steer the agent to research your codebase patterns (via ChunkHound) and domain knowledge (via ArguSeek), explore alternatives, and iterate with you through reasoning-action cycles. You're discovering the approach together.
 
 This approach has higher cost and time investment, but it discovers better solutions, catches architectural issues early, and helps you build a clearer mental model before committing to implementation.

website/src/components/PresentationMode/RevealSlideshow.module.css

@@ -43,11 +43,14 @@
 }
 
 .objectives {
-  margin-top: 2em;
+  margin-top: 0;
   text-align: left;
   max-width: 90%;
   margin-left: auto;
   margin-right: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .objectives h3 {
@@ -79,10 +82,13 @@
   text-align: left;
   font-size: clamp(1rem, 2vw, 1.2em);
   line-height: 1.6;
-  margin: 1em 0;
+  margin: 0;
   max-width: 90%;
   margin-left: auto;
   margin-right: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .bulletList li {
@@ -92,30 +98,38 @@
 .codeBlock {
   font-size: 0.8em;
   line-height: 1.4;
-  margin: 1em 0;
+  margin: 0;
   border-radius: 8px;
   background: #1e1e1e;
   padding: 1em;
   text-align: left;
+  overflow: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
 }
 
 .codeBlock code {
   font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
 }
 
 .caption {
-  font-size: 0.9em;
-  color: #999;
-  margin-top: 1em;
+  font-size: clamp(0.8rem, 1.5vw, 0.95em);
+  line-height: 1.4;
+  color: #e0e0e0;
+  margin-top: 0.5em;
   font-style: italic;
+  font-weight: 500;
 }
 
 .comparison {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(1em, 2vw, 1.5em);
-  margin: 1em 0;
-  max-height: 400px;
+  margin: 1.5em 0 0.5em 0;
+  flex: 1;
+  min-height: 0;
+  max-height: none;
 }
 
 .comparisonLeft,
@@ -151,13 +165,13 @@
 
 .comparison ul {
   text-align: left;
-  font-size: clamp(0.65rem, 1.3vw, 0.75em);
+  font-size: clamp(0.85rem, 1.6vw, 0.95em);
   list-style: none;
   padding: 0;
 }
 
 .comparison li {
-  margin: 0.35em 0;
+  margin: 0.45em 0;
   padding-left: 1.2em;
   position: relative;
   line-height: 1.4;
@@ -182,8 +196,9 @@
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(1em, 2vw, 1.5em);
-  margin: 1em 0;
-  max-height: 400px;
+  margin: 0;
+  height: 100%;
+  max-height: none;
 }
 
 .metaphorColumn,
@@ -241,22 +256,33 @@
 }
 
 .visualContainer {
-  margin: 2em 0;
   display: flex;
   justify-content: center;
   align-items: center;
+  overflow: visible;
+  width: 100%;
+  height: 85%;
+  transform: scale(1.5);
+  transform-origin: center center;
+}
+
+.visualContainer > * {
+  object-fit: contain;
 }
 
 .takeawayList {
   text-align: left;
   font-size: clamp(0.9rem, 1.8vw, 1.1em);
   line-height: 1.6;
-  margin: 1em 0;
+  margin: 0;
   list-style: none;
   padding: 0;
   max-width: 90%;
   margin-left: auto;
   margin-right: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .takeawayList li {
@@ -277,9 +303,9 @@
 .executionFlow {
   text-align: left;
   max-width: 90%;
-  margin: 1em auto;
+  margin: 0 auto;
   padding: 0.5em;
-  max-height: 450px;
+  height: 100%;
   overflow-y: auto;
 }
 
@@ -427,7 +453,7 @@
 }
 
 :global(.reveal h1) {
-  font-size: clamp(1.8rem, 3.5vw, 2.2em);
+  font-size: clamp(2.5rem, 4.5vw, 3.0em);
   color: var(--ifm-color-primary);
   max-width: 90%;
   margin-left: auto;
@@ -464,11 +490,49 @@
   background: var(--ifm-color-primary);
 }
 
-/* Ensure slide content fits within viewport */
+/* Fixed layout structure for consistent positioning across slides */
 :global(.reveal .slides section) {
   max-width: 95%;
   margin-left: auto;
   margin-right: auto;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: 1em 0 2.5em 0;
+  box-sizing: border-box;
+}
+
+/* Title area - fixed height and position */
+:global(.reveal .slides section > h2) {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  flex-shrink: 0;
+}
+
+/* Title slides have h1 instead */
+:global(.reveal .slides section > h1) {
+  margin-top: 2em;
+  margin-bottom: 1em;
+  flex-shrink: 0;
+}
+
+/* Content area - fills remaining space */
+:global(.reveal .slides section) > *:not(h1):not(h2):not(.slideCaption):not(.comparison):not(.marketingReality):not(.executionFlow) {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 0;
+}
+
+/* Caption area - fixed at bottom when present */
+.slideCaption {
+  margin-top: auto;
+  margin-bottom: 0;
+  flex-shrink: 0;
+  padding-top: 0.5em;
+  padding-bottom: 0;
 }
 
 :global(.reveal p),

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>
         );