Add ThreeContextWorkflow visual component

ofriw · claude · ofriw · commit aef3c2d1474c · 2025-11-10T21:02:50.000+02:00
New visualization for lesson 8 showing independent context separation pattern. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/website/docs/practical-techniques/lesson-8-tests-as-guardrails.md b/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
@@ -177,7 +181,7 @@ When tests fail, apply the same four-phase workflow from [Lesson 3](../methodolo
 
 This diagnostic prompt applies techniques from [Lesson 4](../methodology/lesson-4-prompting-101.md): [Chain-of-Thought](../methodology/lesson-4-prompting-101.md#chain-of-thought-paving-a-clear-path) sequential steps, [constraints](../methodology/lesson-4-prompting-101.md#constraints-as-guardrails) requiring evidence, and [structured format](../methodology/lesson-4-prompting-101.md#applying-structure-to-prompts). Understanding why each element exists lets you adapt this pattern for other diagnostic tasks.
 
-``````markdown title="Diagnostic Prompt for Test Failures"
+````markdown title="Diagnostic Prompt for Test Failures"
 ```
 $FAILURE_DESCRIPTION
 ```
@@ -195,7 +199,7 @@ DETERMINE:
 Is this a test that needs updating or a real bug in the implementation?
 
 Provide your conclusion with evidence.
-``````
+````
 
 **Why this works:**
 
diff --git a/website/src/components/PresentationMode/RevealSlideshow.tsx b/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,
diff --git a/website/src/components/VisualElements/ThreeContextWorkflow.module.css b/website/src/components/VisualElements/ThreeContextWorkflow.module.css
@@ -0,0 +1,167 @@
+/* Container Styles */
+.container {
+  margin: 2rem 0;
+  padding: 1.5rem 0;
+}
+
+/* Compact mode for presentations - maximize content area */
+.container.compact {
+  margin: 0 auto;
+  padding: 0;
+  max-width: 100%;
+}
+
+/* SVG Sizing */
+.svg {
+  width: 100%;
+  height: auto;
+  display: block;
+  margin: 0 auto;
+}
+
+/* Context Box Animations */
+@keyframes fadeInSlide {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.contextGroup {
+  animation: fadeInSlide 0.6s ease-out forwards;
+  opacity: 0;
+}
+
+/* Reduce motion for accessibility */
+@media (prefers-reduced-motion: reduce) {
+  .contextGroup {
+    animation: none;
+    opacity: 1;
+  }
+}
+
+/* Context Boxes */
+.contextBox {
+  fill: var(--visual-bg-workflow);
+  stroke: var(--visual-workflow);
+  stroke-width: 3;
+  transition: all 0.3s ease;
+}
+
+.contextBox:hover {
+  fill: var(--visual-bg-decision);
+  stroke: var(--visual-decision);
+}
+
+/* Text Styles */
+.contextTitle {
+  fill: var(--ifm-color-emphasis-700);
+  font-size: 28px;
+  font-weight: 600;
+  font-family: var(--ifm-font-family-base);
+}
+
+.contextLabel {
+  fill: var(--ifm-font-color-base);
+  font-size: 44px;
+  font-weight: 700;
+  font-family: var(--ifm-font-family-base);
+}
+
+.contextDescription {
+  fill: var(--ifm-color-emphasis-600);
+  font-size: 22px;
+  font-family: var(--ifm-font-family-base);
+}
+
+/* Arrows */
+.arrow {
+  stroke: var(--visual-workflow);
+  stroke-width: 4;
+  fill: none;
+}
+
+.arrowMarker {
+  fill: var(--visual-workflow);
+}
+
+/* Separation Barriers */
+.barrier {
+  stroke: var(--visual-decision);
+  stroke-width: 2;
+  opacity: 0.3;
+}
+
+/* Description Text */
+.description {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+  font-size: 0.9rem;
+  color: var(--ifm-color-emphasis-700);
+  text-align: center;
+  line-height: 1.5;
+}
+
+/* Presentation Mode Adjustments */
+.container.compact .svg {
+  max-width: 100%;
+}
+
+.container.compact .contextTitle {
+  font-size: 32px;
+}
+
+.container.compact .contextLabel {
+  font-size: 52px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .container {
+    padding: 1rem 0;
+  }
+
+  .contextTitle {
+    font-size: 16px;
+  }
+
+  .contextLabel {
+    font-size: 24px;
+  }
+
+  .contextDescription {
+    font-size: 14px;
+  }
+}
+
+/* Dark mode specific adjustments for presentations */
+:global(.reveal) .contextBox {
+  fill: rgba(167, 139, 250, 0.2);
+  stroke: #a78bfa;
+  stroke-width: 3;
+}
+
+:global(.reveal) .arrow {
+  stroke: #a78bfa;
+  stroke-width: 5;
+}
+
+:global(.reveal) .arrowMarker {
+  fill: #a78bfa;
+}
+
+:global(.reveal) .barrier {
+  stroke: #c4b5fd;
+  opacity: 0.4;
+}
+
+:global(.reveal) .contextTitle,
+:global(.reveal) .contextLabel,
+:global(.reveal) .contextDescription {
+  fill: #e5e7eb;
+}
diff --git a/website/src/components/VisualElements/ThreeContextWorkflow.tsx b/website/src/components/VisualElements/ThreeContextWorkflow.tsx
