feat(demo-01): Handle goto statements in Rule Breakdown

The Rule Breakdown now properly handles "goto" response templates:

- Detects when a template starts with "goto <keyword>"
- Follows the goto chain to find the target keyword's rule
- Shows a new "Goto Resolution" step with:
  - The original goto statement (highlighted)
  - The target keyword and its available templates
  - A dropdown to see all target templates
- Continues processing with the resolved template
- Handles chained gotos (up to 10 levels deep)

Example: "apologise" → "goto sorry" → "Please don't apologise."

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

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

Author: jeremymanning

demos/01-eliza/index.html

@@ -472,6 +472,24 @@ <h3>Synonyms</h3>
             </div>
           `;
           stepHTML += `<div class="step-details">Select a different template to see how it changes the response</div>`;
+        } else if (step.name === 'Goto Resolution' && step.targetTemplates && step.targetTemplates.length > 0) {
+          // Special handling for Goto Resolution - show the chain and target templates
+          stepHTML += `
+            <div class="step-io">
+              <div style="flex: 1;">
+                <div class="io-label">Goto Statement</div>
+                <div class="io-box" style="background: var(--warning-bg, #fff3cd); border-color: var(--warning-border, #ffc107);">${escapeHtml(step.input)}</div>
+              </div>
+              <div class="arrow" style="color: var(--warning-color, #856404);">↪</div>
+              <div style="flex: 1;">
+                <div class="io-label">Target: "${escapeHtml(step.targetKeyword)}" (${step.targetTemplates.length} template(s))</div>
+                <select class="template-dropdown" id="goto-template-selector" style="width: 100%; padding: 10px; border: 2px solid var(--border-color); border-radius: 6px; font-size: 0.9rem; background: var(--surface-color); color: var(--text-primary); cursor: pointer;">
+                  ${step.targetTemplates.map((t, i) => `<option value="${i}" ${escapeHtml(t) === escapeHtml(step.output.replace(/^"|"$/g, '')) ? 'selected' : ''}>${escapeHtml(t)}</option>`).join('')}
+                </select>
+              </div>
+            </div>
+          `;
+          stepHTML += `<div class="step-details">${step.details}</div>`;
         } else if (step.input !== undefined && step.output !== undefined) {
           // Add input/output visualization for other steps
           stepHTML += `
@@ -489,9 +507,9 @@ <h3>Synonyms</h3>
           `;
         }
 
-        // Add details (but not for template selection since we add custom details)
+        // Add details (but not for template selection or goto resolution since we add custom details)
         // For Keyword Detection, make it expandable
-        if (step.details && step.name !== 'Template Selection') {
+        if (step.details && step.name !== 'Template Selection' && step.name !== 'Goto Resolution') {
           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;">

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

@@ -544,10 +544,10 @@ export class PatternMatcher {
 
     // Step 5: Response template selection
     const allTemplates = matchedPattern ? matchedPattern.responses : [];
-    const selectedTemplateIndex = matchedPattern
+    let selectedTemplateIndex = matchedPattern
       ? Math.floor(Math.random() * matchedPattern.responses.length)
       : 0;
-    const selectedTemplate = allTemplates[selectedTemplateIndex] || null;
+    let selectedTemplate = allTemplates[selectedTemplateIndex] || null;
 
     if (matchedPattern && allTemplates.length > 0) {
       breakdown.steps.push({
@@ -561,6 +561,54 @@ export class PatternMatcher {
       });
     }
 
+    // Step 5b: Handle "goto" statements - follow the reference to another keyword
+    let gotoChain = [];
+    let finalTemplate = selectedTemplate;
+    let gotoTargetRule = null;
+    let gotoTargetPattern = null;
+
+    while (finalTemplate && finalTemplate.startsWith('goto ')) {
+      const targetKeyword = finalTemplate.substring(5).trim();
+      gotoChain.push(targetKeyword);
+
+      // Find the target rule
+      const targetRule = rules.find(r => r.keyword === targetKeyword);
+      if (targetRule && targetRule.patterns && targetRule.patterns.length > 0) {
+        gotoTargetRule = targetRule;
+        gotoTargetPattern = targetRule.patterns[0];
+        const targetTemplates = gotoTargetPattern.responses;
+        const targetTemplateIndex = Math.floor(Math.random() * targetTemplates.length);
+        finalTemplate = targetTemplates[targetTemplateIndex];
+      } else {
+        // Target not found, break out
+        break;
+      }
+
+      // Prevent infinite loops (max 10 gotos)
+      if (gotoChain.length >= 10) break;
+    }
+
+    // Add goto resolution step if we followed any gotos
+    if (gotoChain.length > 0) {
+      breakdown.steps.push({
+        name: 'Goto Resolution',
+        description: 'Following reference to another keyword',
+        input: `"${selectedTemplate}"`,
+        output: gotoTargetRule ? `"${finalTemplate}"` : 'Target not found',
+        details: gotoChain.length === 1
+          ? `Redirected to keyword "${gotoChain[0]}"`
+          : `Followed chain: ${gotoChain.map(k => `"${k}"`).join(' → ')}`,
+        gotoChain: gotoChain,
+        targetKeyword: gotoChain[gotoChain.length - 1],
+        targetRule: gotoTargetRule,
+        targetPattern: gotoTargetPattern,
+        targetTemplates: gotoTargetPattern ? gotoTargetPattern.responses : []
+      });
+
+      // Update selected template to the resolved one
+      selectedTemplate = finalTemplate;
+    }
+
     // Step 6: Assembly with post-substitutions
     if (selectedTemplate && matchResult) {
       const postSubSteps = [];