Implement compact mode in all visual components

Add PresentationAwareProps support to all visual components (CapabilityMatrix, UShapeAttentionCurve, WorkflowCircle, GroundingComparison, PlanningStrategyComparison, AbstractShapesVisualization, ContextWindowMeter). Each component now accepts compact prop to maximize content area within 1280x720 presentation viewport.

Improvements:
- Reduce padding/margins in compact mode (max-width: 95%, padding: 0.5rem)
- Fix sizing constraints (max-width/max-height: 100% in visualContainer)
- Reduce min-heights for tighter layouts (180px → 120px in AbstractShapes)
- Use color-mix() with CSS variables for theme-aware shadows
- Add --visual-bg-error CSS variable for consistent error styling

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

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

Author: ofriw

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

@@ -6,6 +6,12 @@
   border: 1px solid var(--visual-decision);
 }
 
+.container.compact {
+  margin: 0 auto;
+  padding: 0.5rem;
+  max-width: 95%;
+}
+
 .comparison {
   display: flex;
   gap: 3rem;
@@ -28,7 +34,7 @@
 }
 
 .shapes {
-  min-height: 180px;
+  min-height: 120px;
   display: flex;
   align-items: center;
   justify-content: center;

website/src/components/VisualElements/AbstractShapesVisualization.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
+import type { PresentationAwareProps } from '../PresentationMode/types';
 import styles from './AbstractShapesVisualization.module.css';
 
-export default function AbstractShapesVisualization() {
+export default function AbstractShapesVisualization({ compact = false }: PresentationAwareProps = {}) {
+  const containerClassName = compact
+    ? `${styles.container} ${styles.compact}`
+    : styles.container;
+
   return (
     <div
-      className={styles.container}
+      className={containerClassName}
       role="img"
       aria-label="Comparison of cluttered context with multiple squares versus clean context with single circle, demonstrating how context density affects agent solutions"
     >

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

@@ -6,6 +6,13 @@
   border: 1px solid var(--visual-capability);
 }
 
+/* Compact mode for presentations - maximize table size */
+.container.compact {
+  margin: 0 auto;
+  padding: 0.5rem;
+  max-width: 95%;
+}
+
 .tableWrapper {
   overflow-x: auto;
   margin-bottom: 1.5rem;

website/src/components/VisualElements/CapabilityMatrix.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { PresentationAwareProps } from '../PresentationMode/types';
 import styles from './CapabilityMatrix.module.css';
 
 interface Capability {
@@ -60,9 +61,13 @@ function getTrustIndicator(level: 'high' | 'medium' | 'low'): {
   }
 }
 
-export default function CapabilityMatrix() {
+export default function CapabilityMatrix({ compact = false }: PresentationAwareProps = {}) {
+  const containerClassName = compact
+    ? `${styles.container} ${styles.compact}`
+    : styles.container;
+
   return (
-    <div className={styles.container}>
+    <div className={containerClassName}>
       <div className={styles.tableWrapper}>
         <table className={styles.table}>
           <thead>

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

@@ -6,6 +6,13 @@
   border: 1px solid var(--visual-workflow);
 }
 
+/* Compact mode for presentations - maximize content area */
+.container.compact {
+  margin: 0 auto;
+  padding: 0.5rem;
+  max-width: 95%;
+}
+
 .header {
   display: flex;
   justify-content: space-between;
@@ -114,7 +121,7 @@
   background: var(--visual-workflow);
   color: white;
   transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
 }
 
 .button:disabled {
@@ -130,7 +137,7 @@
 .buttonReset:hover:not(:disabled) {
   background: var(--visual-neutral);
   color: white;
-  box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3);
+  box-shadow: 0 2px 8px rgba(100, 116, 139, 0.3);
 }
 
 .statusMessage {
@@ -159,7 +166,7 @@
 }
 
 .alertCritical {
-  background: rgba(239, 68, 68, 0.1);
+  background: var(--visual-bg-error, rgba(225, 29, 72, 0.1));
   border: 1px solid var(--visual-error);
   color: var(--visual-error);
 }

website/src/components/VisualElements/ContextWindowMeter.tsx

@@ -1,15 +1,20 @@
 import React, { useState } from 'react';
+import type { PresentationAwareProps } from '../PresentationMode/types';
 import styles from './ContextWindowMeter.module.css';
 
-interface ContextWindowMeterProps {
+interface ContextWindowMeterProps extends PresentationAwareProps {
   initialTokens?: number;
   maxTokens?: number;
 }
 
 export default function ContextWindowMeter({
   initialTokens = 2000,
   maxTokens = 200000,
+  compact = false,
 }: ContextWindowMeterProps) {
+  const containerClassName = compact
+    ? `${styles.container} ${styles.compact}`
+    : styles.container;
   const [tokens, setTokens] = useState(initialTokens);
 
   const percentage = (tokens / maxTokens) * 100;
@@ -29,7 +34,7 @@ export default function ContextWindowMeter({
   };
 
   return (
-    <div className={styles.container}>
+    <div className={containerClassName}>
       <div className={styles.header}>
         <h4 className={styles.title}>Context Window Usage</h4>
         <span className={styles.stats}>

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

@@ -18,6 +18,12 @@
   }
 }
 
+.container.compact {
+  margin: 0 auto;
+  padding: 0.5rem;
+  max-width: 95%;
+}
+
 .header {
   padding: 1.5rem;
   text-align: center;
@@ -81,7 +87,7 @@
 .comparisonWrapper {
   position: relative;
   display: flex;
-  min-height: 400px;
+  height: 100%;
   overflow: hidden;
 }
 
@@ -281,7 +287,7 @@
 }
 
 .phaseDetailsExpanded {
-  max-height: 800px;
+  max-height: 100vh;
 }
 
 .phaseDetailsContent {

website/src/components/VisualElements/GroundingComparison.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import type { PresentationAwareProps } from '../PresentationMode/types';
 import styles from './GroundingComparison.module.css';
 
 // Import icons
@@ -167,7 +168,10 @@ function PhaseCard({ phase, side, isExpanded, onToggle }: PhaseCardProps) {
   );
 }
 
-export default function GroundingComparison() {
+export default function GroundingComparison({ compact = false }: PresentationAwareProps = {}) {
+  const containerClassName = compact
+    ? `${styles.container} ${styles.compact}`
+    : styles.container;
   const [expandedPhases, setExpandedPhases] = useState<Set<string>>(new Set());
 
   const togglePhase = (phaseId: number, side: 'without' | 'with') => {
@@ -198,7 +202,7 @@ export default function GroundingComparison() {
 
   return (
     <div
-      className={styles.container}
+      className={containerClassName}
       role="region"
       aria-label="Grounding comparison visualization"
     >

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

@@ -8,6 +8,13 @@
   animation: fadeIn 0.6s ease-in-out;
 }
 
+/* Compact mode for presentations - maximize content area */
+.container.compact {
+  margin: 0 auto;
+  padding: 0.5rem;
+  max-width: 95%;
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;

website/src/components/VisualElements/PlanningStrategyComparison.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
+import type { PresentationAwareProps } from '../PresentationMode/types';
 import styles from './PlanningStrategyComparison.module.css';
 
-export default function PlanningStrategyComparison() {
+export default function PlanningStrategyComparison({ compact = false }: PresentationAwareProps = {}) {
+  const containerClassName = compact
+    ? `${styles.container} ${styles.compact}`
+    : styles.container;
+
   return (
     <div
-      className={styles.container}
+      className={containerClassName}
       role="img"
       aria-label="Abstract visualization comparing exploration planning approach with scattered discovery pattern versus exact planning with direct linear path"
     >