Root Cause

When using combat abilities (like "smite"), the web frontend was calling GET /api/v1/abilities/{ability_id} to fetch ability details for display, but this endpoint didn't exist, causing a 404 error.
  Additionally, after fixing that, the ability would execute but:

  1. Modal onclick issue: The onclick="closeModal()" on ability buttons was removing the button from the DOM before HTMX could fire the request
  2. Field name mismatch: The API returns mana_cost but the frontend expected mp_cost
  3. Duplicate text in combat log: The web view was adding "You" as actor and damage separately, but the API message already contained both
  4. Page not auto-refreshing: Various attempts to use HX-Trigger headers failed due to HTMX overwriting them

  Fixes Made

  1. Created /api/app/api/abilities.py - New abilities API endpoint with GET /api/v1/abilities and GET /api/v1/abilities/<ability_id>
  2. Modified /api/app/__init__.py - Registered the new abilities blueprint
  3. Modified /public_web/templates/game/partials/ability_modal.html - Changed onclick="closeModal()" to hx-on::before-request="closeModal()" so HTMX captures the request before modal closes
  4. Modified /public_web/app/views/combat_views.py:
    - Fixed mp_cost → mana_cost field name lookup
    - Removed duplicate actor/damage from combat log entries (API message is self-contained)
    - Added inline script to trigger page refresh after combat actions
  5. Modified /public_web/templates/game/combat.html - Updated JavaScript for combat action handling (though final fix was server-side script injection)

public_web/templates/game/combat.html

@@ -263,16 +263,23 @@
         }, 1000);
     }
 
-    // Handle player action triggering enemy turn
+    // Handle player action - refresh page to update UI
     document.body.addEventListener('htmx:afterRequest', function(event) {
         const response = event.detail.xhr;
         if (!response) return;
 
-        const triggers = response.getResponseHeader('HX-Trigger') || '';
+        // Check response status - only refresh on success
+        if (response.status !== 200) return;
 
-        // Only trigger enemy turn from player actions (not from our fetch calls)
-        if (triggers.includes('enemyTurn') && !enemyTurnPending) {
-            triggerEnemyTurn();
+        // Check custom header for combat refresh signal
+        const shouldRefresh = response.getResponseHeader('X-Combat-Refresh');
+        console.log('X-Combat-Refresh header:', shouldRefresh);
+
+        if (shouldRefresh === 'true') {
+            // Short delay to let user see their action result
+            setTimeout(function() {
+                window.location.reload();
+            }, 1000);
         }
     });
 

public_web/templates/game/partials/ability_modal.html

@@ -16,8 +16,8 @@
                         hx-target="#combat-log"
                         hx-swap="beforeend"
                         hx-disabled-elt="this"
-                        {% if not ability.available %}disabled{% endif %}
-                        onclick="closeModal()">
+                        hx-on::before-request="closeModal()"
+                        {% if not ability.available %}disabled{% endif %}>
                     <span class="ability-icon">
                         {% if ability.damage_type == 'fire' %}&#128293;
                         {% elif ability.damage_type == 'ice' %}&#10052;