Integrate ThreeContextWorkflow component into lesson 8

- Add component import and usage in lesson-8 documentation
- Register component in RevealSlideshow registry
- Add presentation style overrides for large visual component
- Update presentation manifest with revised slide content and count

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

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

Author: ofriw

website/docs/practical-techniques/lesson-8-tests-as-guardrails.md

@@ -4,6 +4,8 @@ sidebar_label: 'Lesson 8: Tests as Guardrails'
 title: 'Lesson 8: Tests as Guardrails'
 ---
 
+import ThreeContextWorkflow from '@site/src/components/VisualElements/ThreeContextWorkflow';
+
 AI agents can refactor half your codebase in minutes. They'll rename functions, restructure modules, and update dozens of files—all while you grab coffee. This velocity is powerful, but dangerous. Small logic errors compound fast when changes happen at scale.
 
 Tests are your constraint system. They define operational boundaries agents cannot cross. More importantly, they're living documentation that agents read to understand intent, edge cases, and the gotchas that tribal knowledge usually covers.
@@ -52,7 +54,9 @@ When tests become the optimization target, agents optimize for passing tests rat
 
 Apply the same planning and execution methodology from [Lesson 7](./lesson-7-planning-execution.md) to each step—writing code, writing tests, and triaging failures. Each follows the same pattern: research requirements, plan approach, execute, verify. The critical difference: use **fresh contexts** for each step. This leverages the stateless nature from [Lessons 1](../understanding-the-tools/lesson-1-intro.md) and [2](../understanding-the-tools/lesson-2-understanding-agents.md)—the agent doesn't carry assumptions or defend prior decisions between contexts.
 
-**The three-context workflow:**
+## The three-context workflow:
+
+<ThreeContextWorkflow />
 
 1. **Write code** in Context A—research existing patterns using [grounding from Lesson 5](../methodology/lesson-5-grounding.md), plan implementation, execute, verify correctness
 2. **Write tests** in fresh Context B—research requirements and edge cases, plan test coverage, execute (agent doesn't remember writing implementation, so tests derive independently from requirements), verify tests fail initially

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

@@ -310,6 +310,13 @@
   max-height: 100%;
 }
 
+/* Override constraints for large visual components */
+.visualContainer > :global(.three-context-workflow) {
+  max-width: none;
+  max-height: none;
+  min-width: 85%;
+}
+
 .takeawayList {
   text-align: left;
   font-size: clamp(0.9rem, 1.8vw, 1.1em);

website/src/components/PresentationMode/RevealSlideshow.tsx

@@ -18,6 +18,7 @@ import styles from './RevealSlideshow.module.css';
 import CapabilityMatrix from '../VisualElements/CapabilityMatrix';
 import UShapeAttentionCurve from '../VisualElements/UShapeAttentionCurve';
 import WorkflowCircle from '../VisualElements/WorkflowCircle';
+import ThreeContextWorkflow from '../VisualElements/ThreeContextWorkflow';
 import GroundingComparison from '../VisualElements/GroundingComparison';
 import ContextWindowMeter from '../VisualElements/ContextWindowMeter';
 import AbstractShapesVisualization from '../VisualElements/AbstractShapesVisualization';
@@ -85,6 +86,7 @@ const VISUAL_COMPONENTS = {
   CapabilityMatrix,
   UShapeAttentionCurve,
   WorkflowCircle,
+  ThreeContextWorkflow,
   GroundingComparison,
   ContextWindowMeter,
   AbstractShapesVisualization,

website/static/presentations/manifest.json

@@ -50,10 +50,10 @@
   },
   "practical-techniques/lesson-8-tests-as-guardrails.md": {
     "presentationUrl": "/presentations/practical-techniques/lesson-8-tests-as-guardrails.json",
-    "slideCount": 11,
-    "estimatedDuration": "40-50 minutes",
-    "title": "Lesson 8: Tests as Guardrails",
-    "generatedAt": "2025-11-09T06:39:21.041Z"
+    "slideCount": 14,
+    "estimatedDuration": "35-40 minutes",
+    "title": "Tests as Guardrails",
+    "generatedAt": "2025-11-10T17:57:08.835Z"
   },
   "practical-techniques/lesson-9-reviewing-code.md": {
     "presentationUrl": "/presentations/practical-techniques/lesson-9-reviewing-code.json",