feat(demo-01): Add expandable breakdowns and fix GUI loading

Rule Breakdown improvements:
- Make "Found X keyword(s)" clickable to expand and show all
  keywords with their ranks and pattern counts
- Make "Tested X pattern(s)" clickable to expand and show all
  patterns tested with match results and captures
- Add styling for expandable headers with hover effects

Live Rule Editor fix:
- Fix GUI not loading rules by parsing directly from textarea
  instead of using getContent() which caused circular dependency

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

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: jeremymanning

demos/01-eliza/css/eliza.css

@@ -400,6 +400,30 @@
   font-style: italic;
 }
 
+/* Pattern tests header - clickable to expand */
+.pattern-tests-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--surface-color);
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  font-size: 0.9rem;
+  transition: var(--eliza-transition);
+}
+
+.pattern-tests-header:hover {
+  background: var(--surface-hover);
+  border-color: var(--primary-color);
+}
+
+.pattern-toggle-icon {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  transition: transform 0.2s ease;
+}
+
 .pattern-test {
   background: var(--surface-color);
   padding: 10px;

demos/01-eliza/index.html

@@ -490,31 +490,44 @@ <h3>Synonyms</h3>
         }
 
         // Add details (but not for template selection since we add custom details)
+        // For Keyword Detection, make it expandable
         if (step.details && step.name !== 'Template Selection') {
-          stepHTML += `<div class="step-details">${step.details}</div>`;
+          if (step.name === 'Keyword Detection' && step.keywordsFound && step.keywordsFound.length > 0) {
+            const keywordStepId = `keywords-${index}`;
+            stepHTML += `<div class="pattern-tests-header" onclick="togglePatternTests('${keywordStepId}')" style="cursor: pointer; color: var(--primary-color); margin-bottom: 8px;">
+              <span class="pattern-toggle-icon" id="${keywordStepId}-icon">▶</span>
+              Found ${step.keywordsFound.length} keyword(s) - <em>click to show details</em>
+            </div>`;
+            stepHTML += `<div class="step-content" id="${keywordStepId}" style="display: none;">`;
+            step.keywordsFound.forEach(kw => {
+              stepHTML += `
+                <div class="pattern-test" style="opacity: 1;">
+                  <strong>${escapeHtml(kw.keyword)}</strong> (rank: ${kw.rank}) - ${kw.patternCount} pattern(s)
+                </div>
+              `;
+            });
+            stepHTML += '</div>';
+          } else {
+            stepHTML += `<div class="step-details">${step.details}</div>`;
+          }
         }
 
         // Add pattern tests if available
         if (step.patternTests && step.patternTests.length > 0) {
-          stepHTML += '<div class="step-content">';
+          const stepId = `pattern-tests-${index}`;
+          const totalPatterns = step.patternTests.length;
 
-          // Find the index of the matched pattern (if any)
-          const matchedIndex = step.patternTests.findIndex(t => t.matched);
+          // Add clickable header showing total patterns tested
+          stepHTML += `<div class="pattern-tests-header" onclick="togglePatternTests('${stepId}')" style="cursor: pointer; color: var(--primary-color); margin-bottom: 8px;">
+            <span class="pattern-toggle-icon" id="${stepId}-icon">▶</span>
+            Tested ${totalPatterns} pattern(s) - <em>click to ${totalPatterns > 5 ? 'show all' : 'toggle'}</em>
+          </div>`;
 
-          // Display logic: show up to 5 patterns, but always include the matched one
-          const maxToShow = 5;
-          let displayedCount = 0;
-          let stoppedEarly = false;
+          stepHTML += `<div class="step-content" id="${stepId}" style="display: none;">`;
 
+          // Show ALL patterns when expanded
           for (let i = 0; i < step.patternTests.length; i++) {
             const test = step.patternTests[i];
-
-            // Stop after maxToShow patterns if we've already shown the match
-            if (displayedCount >= maxToShow && matchedIndex !== -1 && i > matchedIndex) {
-              stoppedEarly = true;
-              break;
-            }
-
             const testClass = test.matched ? 'matched' : 'not-matched';
             const capturesHtml = test.captures && test.captures.length > 0
               ? `<br>Captures: ${test.captures.map((c, j) => {
@@ -530,13 +543,6 @@ <h3>Synonyms</h3>
                 ${capturesHtml}
               </div>
             `;
-            displayedCount++;
-          }
-
-          // Show remaining count only if we actually stopped early
-          const remaining = step.patternTests.length - displayedCount;
-          if (stoppedEarly && remaining > 0) {
-            stepHTML += `<div class="step-details">... and ${remaining} more pattern(s) tested</div>`;
           }
 
           stepHTML += '</div>';
@@ -661,6 +667,19 @@ <h3>Synonyms</h3>
       return div.innerHTML;
     }
 
+    // Toggle pattern tests visibility (exposed globally for onclick handler)
+    window.togglePatternTests = function(stepId) {
+      const content = document.getElementById(stepId);
+      const icon = document.getElementById(stepId + '-icon');
+      if (content.style.display === 'none') {
+        content.style.display = 'block';
+        icon.textContent = '▼';
+      } else {
+        content.style.display = 'none';
+        icon.textContent = '▶';
+      }
+    };
+
     // Editor Functions
     function updateEditorStats() {
       const stats = ruleEditor.getStatistics();

demos/01-eliza/js/pattern-matcher.js

@@ -443,7 +443,12 @@ export class PatternMatcher {
       description: 'Finding relevant keywords in input',
       input: processedInput,
       output: keywordsFound.map(k => `"${k.keyword}" (rank: ${k.rank})`).join(', ') || 'No keywords found',
-      details: `Found ${keywordsFound.length} keyword(s), testing in priority order`
+      details: `Found ${keywordsFound.length} keyword(s), testing in priority order`,
+      keywordsFound: keywordsFound.map(k => ({
+        keyword: k.keyword,
+        rank: k.rank,
+        patternCount: k.rule.patterns.length
+      }))
     });
 
     // Step 3: Pattern matching (specific patterns first, then catch-all)

demos/01-eliza/js/rule-editor.js

@@ -164,9 +164,14 @@ class RuleEditor {
    * Populate GUI with current rules data
    */
   populateGUI() {
-    const validation = this.validate();
-    if (!validation.valid) return;
-    const data = validation.data;
+    // Always parse from the JSON textarea, not from getContent() which may recurse
+    let data;
+    try {
+      data = JSON.parse(this.editor.value);
+    } catch (e) {
+      console.error('Failed to parse rules JSON for GUI:', e);
+      return;
+    }
     this.renderSubstitutions('pre-sub', data.preSubstitutions || {});
     this.renderSubstitutions('post-sub', data.postSubstitutions || {});
     this.renderSynonyms(data.synonyms || {});