Lesson 5

Author: ofriw

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

@@ -60,7 +60,7 @@ function getTrustIndicator(level: 'high' | 'medium' | 'low'): {
   }
 }
 
-export default function CapabilityMatrix(): JSX.Element {
+export default function CapabilityMatrix() {
   return (
     <div className={styles.container}>
       <div className={styles.tableWrapper}>

website/src/components/VisualElements/CapabilityMatrix.tsx

@@ -9,7 +9,7 @@ interface ContextWindowMeterProps {
 export default function ContextWindowMeter({
   initialTokens = 2000,
   maxTokens = 200000,
-}: ContextWindowMeterProps): JSX.Element {
+}: ContextWindowMeterProps) {
   const [tokens, setTokens] = useState(initialTokens);
 
   const percentage = (tokens / maxTokens) * 100;

website/src/components/VisualElements/ContextWindowMeter.tsx

@@ -113,12 +113,7 @@ interface PhaseCardProps {
   onToggle: () => void;
 }
 
-function PhaseCard({
-  phase,
-  side,
-  isExpanded,
-  onToggle,
-}: PhaseCardProps): JSX.Element {
+function PhaseCard({ phase, side, isExpanded, onToggle }: PhaseCardProps) {
   const data =
     side === 'without' ? phase.withoutGrounding : phase.withGrounding;
   const Icon = iconMap[data.icon];
@@ -158,7 +153,7 @@ function PhaseCard({
         className={`${styles.phaseDetails} ${isExpanded ? styles.phaseDetailsExpanded : ''}`}
       >
         <pre className={styles.phaseDetailsContent}>{data.details}</pre>
-        {isWithGrounding && data.tools && data.tools.length > 0 && (
+        {isWithGrounding && 'tools' in data && data.tools.length > 0 && (
           <div className={styles.toolBadges}>
             {data.tools.map((tool) => (
               <span key={tool} className={styles.toolBadge}>
@@ -172,7 +167,7 @@ function PhaseCard({
   );
 }
 
-export default function GroundingComparison(): JSX.Element {
+export default function GroundingComparison() {
   const [expandedPhases, setExpandedPhases] = useState<Set<string>>(new Set());
 
   const togglePhase = (phaseId: number, side: 'without' | 'with') => {

website/src/components/VisualElements/GroundingComparison.tsx

@@ -6,8 +6,8 @@ interface UShapeAttentionCurveProps {
 }
 
 export default function UShapeAttentionCurve({
-  initialContextFill = 60,
-}: UShapeAttentionCurveProps): JSX.Element {
+  initialContextFill = 30,
+}: UShapeAttentionCurveProps) {
   const [contextFill, setContextFill] = useState(initialContextFill);
   const [animatedPath, setAnimatedPath] = useState<string>('');
   const previousPathRef = useRef<string>('');

website/src/components/VisualElements/UShapeAttentionCurve.tsx

@@ -15,7 +15,7 @@ interface Connection {
   endY: number;
 }
 
-export default function WorkflowCircle(): JSX.Element {
+export default function WorkflowCircle() {
   const centerX = 250;
   const centerY = 250;
   const radius = 140;

website/src/components/VisualElements/WorkflowCircle.tsx

@@ -5,10 +5,7 @@ interface IconProps {
   size?: number;
 }
 
-export default function CheckIcon({
-  className,
-  size = 24,
-}: IconProps): JSX.Element {
+export default function CheckIcon({ className, size = 24 }: IconProps) {
   return (
     <svg
       width={size}

website/src/components/VisualElements/icons/CheckIcon.tsx

@@ -5,10 +5,7 @@ interface IconProps {
   size?: number;
 }
 
-export default function ConnectedIcon({
-  className,
-  size = 24,
-}: IconProps): JSX.Element {
+export default function ConnectedIcon({ className, size = 24 }: IconProps) {
   return (
     <svg
       width={size}

website/src/components/VisualElements/icons/ConnectedIcon.tsx

@@ -5,10 +5,7 @@ interface IconProps {
   size?: number;
 }
 
-export default function DisconnectedIcon({
-  className,
-  size = 24,
-}: IconProps): JSX.Element {
+export default function DisconnectedIcon({ className, size = 24 }: IconProps) {
   return (
     <svg
       width={size}

website/src/components/VisualElements/icons/DisconnectedIcon.tsx

@@ -5,10 +5,7 @@ interface IconProps {
   size?: number;
 }
 
-export default function QuestionIcon({
-  className,
-  size = 24,
-}: IconProps): JSX.Element {
+export default function QuestionIcon({ className, size = 24 }: IconProps) {
   return (
     <svg
       width={size}