.

web/superball-builder.html

@@ -478,7 +478,7 @@
       bounceSection.id = `bounce-${bounceId}`;
       
       bounceSection.innerHTML = `
-        <h2>🏀 Bounce ${bounceId} (Kind 22222 Routing Event)</h2>
+        <h2 id="bounce-${bounceId}-header">🏀 Bounce ${bounceId} (Kind 22222 Routing Event)</h2>
         <div class="input-group">
           <label for="superball-pubkey-${bounceId}">Superball Pubkey:</label>
           <div style="display: flex; gap: 10px;">
@@ -506,7 +506,7 @@
           <label for="audit-tag-${bounceId}">Audit Tag (auto-generated):</label>
           <input type="text" id="audit-tag-${bounceId}" readonly style="background: #f5f5f5;">
         </div>
-        <button onclick="createBounce(${bounceId})">Create Bounce ${bounceId}</button>
+        <button onclick="createBounce(${bounceId})" id="create-bounce-btn-${bounceId}">Create Bounce ${bounceId}</button>
         
         <div id="bounce-${bounceId}-display" class="json-display"></div>
         <div style="text-align: right; margin-top: 5px;">
@@ -524,8 +524,37 @@
       // Automatically generate and fill in the audit tag
       const auditTag = generateAuditTag();
       document.getElementById(`audit-tag-${bounceId}`).value = auditTag;
+      
+      // Update bounce labels to reflect execution order
+      updateBounceLabels();
     }
 
+    // Update bounce labels to reflect execution order (newest bounce is Bounce 1, oldest is Bounce N)
+    function updateBounceLabels() {
+      // Get all existing bounce sections
+      const bounceContainer = document.getElementById('bounces-container');
+      const bounceSections = bounceContainer.querySelectorAll('.bounce-section');
+      
+      // Update labels in reverse order (newest first gets Bounce 1)
+      bounceSections.forEach((section, index) => {
+        const bounceId = section.id.replace('bounce-', '');
+        const executionOrder = bounceSections.length - index; // Reverse the index
+        
+        // Update the header
+        const header = document.getElementById(`bounce-${bounceId}-header`);
+        if (header) {
+          header.textContent = `🏀 Bounce ${executionOrder} (Kind 22222 Routing Event)`;
+        }
+        
+        // Update the create button text
+        const createBtn = document.getElementById(`create-bounce-btn-${bounceId}`);
+        if (createBtn) {
+          createBtn.textContent = `Create Bounce ${executionOrder}`;
+        }
+      });
+      
+      console.log('INFO: Updated bounce labels for execution order');
+    }
 
     // Update all timeline absolute times continuously
     function updateAllTimelineTimes() {
@@ -634,10 +663,11 @@
 
         // Only add 'p' field if this isn't the last bounce
         if (!isLastBounce) {
-          // Get the superball pubkey from the previous bounce
+          // Get the superball pubkey from the previous bounce (the next hop in the chain)
           const prevBounce = bounces[bounces.length - 1];
           routingInstructions.p = prevBounce.superballPubkey;
         }
+        // Note: If this IS the last bounce (first one created), no 'p' field means final posting
 
         // Create the payload to encrypt
         const payload = {
@@ -712,6 +742,9 @@
         generateVisualization();
         
         console.log('SUCCESS', `Bounce ${bounceId} created successfully`);
+        
+        // Update bounce labels after creation to reflect execution order
+        updateBounceLabels();
 
       } catch (error) {
         console.log('ERROR', `Failed to create bounce ${bounceId}: ${error.message}`);
@@ -779,12 +812,12 @@
       }
 
       try {
-        // Get the first (outermost) bounce to publish
-        const firstBounce = bounces[0];
-        const routingEvent = firstBounce.routingEvent;
+        // Get the last (outermost) bounce to publish - the most recently created bounce
+        const outermostBounce = bounces[bounces.length - 1];
+        const routingEvent = outermostBounce.routingEvent;
         
-        // Get relays to publish to - use the first bounce's target relays
-        const targetRelays = firstBounce.payload.routing.relays;
+        // Get relays to publish to - use the outermost bounce's target relays
+        const targetRelays = outermostBounce.payload.routing.relays;
         
         if (!targetRelays || targetRelays.length === 0) {
           alert('No target relays configured for the first bounce');