WIP: Lesson 5

Author: ofriw

website/docs/methodology/lesson-5-grounding.md

@@ -48,7 +48,11 @@ function getTrustIndicator(level: 'high' | 'medium' | 'low'): {
 } {
   switch (level) {
     case 'high':
-      return { icon: '✅', label: 'Reliable', color: 'var(--visual-capability)' };
+      return {
+        icon: '✅',
+        label: 'Reliable',
+        color: 'var(--visual-capability)',
+      };
     case 'medium':
       return { icon: '⚠️', label: 'Verify', color: 'var(--visual-limitation)' };
     case 'low':
@@ -111,13 +115,15 @@ export default function CapabilityMatrix(): JSX.Element {
         <div className={styles.legendItem}>
           <span className={styles.legendIcon}>⚠️</span>
           <span className={styles.legendText}>
-            <strong>Verify:</strong> Likely 80% correct, thorough review required
+            <strong>Verify:</strong> Likely 80% correct, thorough review
+            required
           </span>
         </div>
         <div className={styles.legendItem}>
           <span className={styles.legendIcon}>❌</span>
           <span className={styles.legendText}>
-            <strong>Check docs:</strong> High hallucination risk, verify against source
+            <strong>Check docs:</strong> High hallucination risk, verify against
+            source
           </span>
         </div>
       </div>

website/src/components/VisualElements/CapabilityMatrix.tsx

@@ -48,20 +48,33 @@
 }
 
 .meterFillNormal {
-  background: linear-gradient(90deg, var(--visual-capability), var(--visual-workflow));
+  background: linear-gradient(
+    90deg,
+    var(--visual-capability),
+    var(--visual-workflow)
+  );
 }
 
 .meterFillWarning {
-  background: linear-gradient(90deg, var(--visual-limitation), var(--gradient-warning-end));
+  background: linear-gradient(
+    90deg,
+    var(--visual-limitation),
+    var(--gradient-warning-end)
+  );
 }
 
 .meterFillCritical {
-  background: linear-gradient(90deg, var(--visual-error), var(--gradient-critical-end));
+  background: linear-gradient(
+    90deg,
+    var(--visual-error),
+    var(--gradient-critical-end)
+  );
   animation: pulse 2s infinite;
 }
 
 @keyframes pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
   }
   50% {

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

@@ -67,15 +67,19 @@ export default function ContextWindowMeter({
         >
           + Add 50K Context
         </button>
-        <button className={`${styles.button} ${styles.buttonReset}`} onClick={reset}>
+        <button
+          className={`${styles.button} ${styles.buttonReset}`}
+          onClick={reset}
+        >
           Reset
         </button>
       </div>
 
       <div className={styles.statusMessage}>
         {isCritical && (
           <div className={styles.alertCritical}>
-            ⚠️ Context window nearly full. Model may start dropping early messages.
+            ⚠️ Context window nearly full. Model may start dropping early
+            messages.
           </div>
         )}
         {isWarning && !isCritical && (