Improve settings hierarchy conciseness

core/templates/pages/ai-execution-log.html

@@ -1,13 +1,11 @@
 {% extends "base.html" %}
 
 {% block content %}
-  <section class="section">
-    <div class="container">
       <div class="level">
         <div class="level-left">
           <div class="level-item">
             <div>
-              <h1 class="title is-4">AI Execution Log</h1>
+              <h1 class="title is-4">Traces</h1>
               <p class="subtitle is-6">Tracked model calls and usage metrics for this account.</p>
             </div>
           </div>
@@ -159,6 +157,7 @@
             <table class="table is-fullwidth is-size-7 is-striped is-hoverable">
               <thead>
                 <tr>
+                  <th></th>
                   <th>Started</th>
                   <th>Status</th>
                   <th>Operation</th>
@@ -173,6 +172,22 @@
               <tbody>
                 {% for run in runs %}
                   <tr>
+                    <td>
+                      <button
+                        class="button is-small is-light trace-run-expand"
+                        type="button"
+                        data-detail-row="trace-run-detail-{{ run.id }}"
+                        data-detail-content="trace-run-detail-content-{{ run.id }}"
+                        data-expanded-label="Hide"
+                        data-collapsed-label="Show"
+                        hx-get="{% url 'ai_execution_run_detail' run_id=run.id %}"
+                        hx-target="#trace-run-detail-content-{{ run.id }}"
+                        hx-swap="innerHTML"
+                        hx-trigger="click once"
+                      >
+                        Show
+                      </button>
+                    </td>
                     <td>{{ run.started_at }}</td>
                     <td>
                       {% if run.status == "ok" %}
@@ -197,14 +212,90 @@
                       {% endif %}
                     </td>
                   </tr>
+                  <tr id="trace-run-detail-{{ run.id }}" class="is-hidden">
+                    <td colspan="10">
+                      <div id="trace-run-detail-content-{{ run.id }}" class="trace-run-detail-shell is-size-7 has-text-grey">
+                        Click Show to load run details.
+                      </div>
+                    </td>
+                  </tr>
                 {% empty %}
-                  <tr><td colspan="9">No runs yet.</td></tr>
+                  <tr><td colspan="10">No runs yet.</td></tr>
                 {% endfor %}
               </tbody>
             </table>
           </div>
         </div>
       </article>
-    </div>
-  </section>
+<script>
+  (function () {
+    document.querySelectorAll(".trace-run-expand").forEach(function (button) {
+      button.addEventListener("click", function () {
+        const rowId = String(button.getAttribute("data-detail-row") || "");
+        const row = rowId ? document.getElementById(rowId) : null;
+        if (!row) {
+          return;
+        }
+        const isHidden = row.classList.contains("is-hidden");
+        row.classList.toggle("is-hidden", !isHidden);
+        button.textContent = isHidden
+          ? String(button.getAttribute("data-expanded-label") || "Hide")
+          : String(button.getAttribute("data-collapsed-label") || "Show");
+      });
+    });
+
+    document.addEventListener("click", function (event) {
+      const trigger = event.target.closest(".trace-run-tab-trigger");
+      if (!trigger) {
+        return;
+      }
+      event.preventDefault();
+      const shell = trigger.closest(".trace-run-detail-tabs");
+      if (!shell) {
+        return;
+      }
+      const targetName = String(trigger.getAttribute("data-tab-target") || "");
+      if (!targetName) {
+        return;
+      }
+      shell.querySelectorAll(".trace-run-tab-trigger").forEach(function (item) {
+        item.parentElement.classList.toggle("is-active", item === trigger);
+      });
+      shell.querySelectorAll(".trace-run-tab-panel").forEach(function (panel) {
+        const isActive = panel.getAttribute("data-tab-panel") === targetName;
+        panel.classList.toggle("is-hidden", !isActive);
+      });
+
+      const lazyUrl = String(trigger.getAttribute("data-lazy-url") || "");
+      if (!lazyUrl) {
+        return;
+      }
+      const panel = shell.querySelector(
+        '.trace-run-tab-panel[data-tab-panel="' + targetName + '"]'
+      );
+      if (!panel || panel.getAttribute("data-loaded") === "1") {
+        return;
+      }
+      panel.setAttribute("data-loaded", "1");
+      panel.classList.add("is-loading");
+      fetch(lazyUrl, { credentials: "same-origin" })
+        .then(function (response) {
+          if (!response.ok) {
+            throw new Error("tab load failed");
+          }
+          return response.text();
+        })
+        .then(function (html) {
+          panel.innerHTML = html;
+        })
+        .catch(function () {
+          panel.innerHTML =
+            '<p class="has-text-danger">Unable to load this tab.</p>';
+        })
+        .finally(function () {
+          panel.classList.remove("is-loading");
+        });
+    });
+  })();
+</script>
 {% endblock %}