refactor: streamline debug tab from 6 to 4 sections with toggle UI

crossword-app/frontend/src/components/DebugTab.jsx

@@ -26,6 +26,7 @@ const DebugTab = ({ debugData }) => {
   const [activeSection, setActiveSection] = useState('overview');
   const [sortBy, setSortBy] = useState('similarity');
   const [sortDirection, setSortDirection] = useState('desc');
+  const [wordPoolView, setWordPoolView] = useState('all'); // 'all' or 'candidates'
 
   if (!debugData || !debugData.enabled) {
     return (
@@ -37,11 +38,9 @@ const DebugTab = ({ debugData }) => {
 
   const sections = [
     { id: 'overview', label: 'Overview' },
-    { id: 'thematic-pool', label: 'Thematic Pool' },
-    { id: 'candidates', label: 'Candidates' },
-    { id: 'selection', label: 'Selection' },
-    { id: 'probabilities', label: 'Probabilities' },
-    { id: 'selected', label: 'Selected Words' }
+    { id: 'word-pool', label: 'Word Pool' },
+    { id: 'probability-analysis', label: 'Probability Analysis' },
+    { id: 'final-selection', label: 'Final Selection' }
   ];
 
   const renderOverview = () => (
@@ -62,10 +61,24 @@ const DebugTab = ({ debugData }) => {
       <h3>Selection Algorithm</h3>
       <div className="debug-grid">
         <div><strong>Method:</strong> {debugData.selection_method}</div>
-        <div><strong>Temperature:</strong> {debugData.selection_params.similarity_temperature}</div>
-        <div><strong>Difficulty Weight:</strong> {debugData.selection_params.difficulty_weight}</div>
+        <div><strong>Temperature:</strong> {debugData.selection_params.similarity_temperature} (lower = more deterministic)</div>
+        <div><strong>Difficulty Weight:</strong> {debugData.selection_params.difficulty_weight} (balance between similarity and frequency)</div>
         <div><strong>Use Softmax:</strong> {debugData.selection_params.use_softmax_selection ? 'Yes' : 'No'}</div>
       </div>
+      
+      <h4>How it works:</h4>
+      <ul>
+        <li><strong>Composite Score</strong> = (1 - difficulty_weight) × similarity + difficulty_weight × frequency_alignment</li>
+        <li><strong>Frequency Alignment</strong>: Gaussian distribution favoring target percentiles by difficulty</li>
+        <li><strong>Softmax Selection</strong>: Probabilistic selection based on composite scores with temperature control</li>
+      </ul>
+
+      <h4>Difficulty Targets:</h4>
+      <ul>
+        <li><strong>Easy:</strong> 90th percentile (common words like CAT, DOG)</li>
+        <li><strong>Medium:</strong> 50th percentile (balanced selection)</li>
+        <li><strong>Hard:</strong> 20th percentile (rare words like QUETZAL, PLATYPUS)</li>
+      </ul>
 
       <h3>Results Summary</h3>
       <div className="debug-grid">
@@ -216,6 +229,62 @@ const DebugTab = ({ debugData }) => {
     );
   };
 
+  const renderWordPool = () => {
+    const pool = debugData.thematic_pool || [];
+    const candidates = debugData.candidate_words || [];
+    
+    const isAllView = wordPoolView === 'all';
+    const currentData = isAllView ? pool : candidates;
+    
+    return (
+      <div className="debug-section">
+        <h3>Word Pool</h3>
+        
+        {/* Toggle buttons */}
+        <div className="pool-view-toggle" style={{ marginBottom: '15px' }}>
+          <button
+            className={`toggle-btn ${isAllView ? 'active' : ''}`}
+            onClick={() => setWordPoolView('all')}
+            style={{
+              padding: '8px 16px',
+              marginRight: '8px',
+              backgroundColor: isAllView ? '#4CAF50' : '#f0f0f0',
+              color: isAllView ? 'white' : '#333',
+              border: '1px solid #ccc',
+              borderRadius: '4px',
+              cursor: 'pointer'
+            }}
+          >
+            All Words ({pool.length})
+          </button>
+          <button
+            className={`toggle-btn ${!isAllView ? 'active' : ''}`}
+            onClick={() => setWordPoolView('candidates')}
+            style={{
+              padding: '8px 16px',
+              backgroundColor: !isAllView ? '#4CAF50' : '#f0f0f0',
+              color: !isAllView ? 'white' : '#333',
+              border: '1px solid #ccc',
+              borderRadius: '4px',
+              cursor: 'pointer'
+            }}
+          >
+            With Clues ({candidates.length})
+          </button>
+        </div>
+        
+        <p>
+          {isAllView 
+            ? 'All words generated thematically. Click column headers to sort.' 
+            : 'Words that passed filtering and got clues generated.'
+          }
+        </p>
+        
+        {isAllView ? renderSortableThematicPool() : renderWordTable(candidates, true)}
+      </div>
+    );
+  };
+
   const renderSelection = () => (
     <div className="debug-section">
       <h3>Selection Process</h3>
@@ -613,11 +682,9 @@ const DebugTab = ({ debugData }) => {
   const renderSection = () => {
     switch (activeSection) {
       case 'overview': return renderOverview();
-      case 'thematic-pool': return renderThematicPool();
-      case 'candidates': return renderCandidates();
-      case 'selection': return renderSelection();
-      case 'probabilities': return renderProbabilities();
-      case 'selected': return renderSelected();
+      case 'word-pool': return renderWordPool();
+      case 'probability-analysis': return renderProbabilities();
+      case 'final-selection': return renderSelected();
       default: return renderOverview();
     }
   };