From 6cf5c0a28b5724ce1c444e8970a406a87a6f19ab Mon Sep 17 00:00:00 2001
From: Tomas Kracmar <tomas.kracmar@cqre.net>
Date: Mon, 20 Apr 2026 18:17:09 +0200
Subject: [PATCH] ui: move filters section before ask section

---
 backend/frontend/index.html | 86 ++++++++++++++++++-------------------
 1 file changed, 43 insertions(+), 43 deletions(-)

diff --git a/backend/frontend/index.html b/backend/frontend/index.html
index a46a2dd..020e1ba 100644
--- a/backend/frontend/index.html
+++ b/backend/frontend/index.html
@@ -38,49 +38,6 @@
       </div>
     </section>
 
-    <section class="panel" x-show="aiFeaturesEnabled">
-      <h3>Ask a question</h3>
-      <form class="ask-form" @submit.prevent="askQuestion()">
-        <div class="ask-row">
-          <input
-            type="text"
-            placeholder="What happened to device ABC123 in the last 3 days?"
-            x-model="askQuestionText"
-            class="ask-input"
-          />
-          <button type="submit" :disabled="askLoading" x-text="askLoading ? 'Thinking…' : 'Ask'">Ask</button>
-        </div>
-        <div x-show="hasActiveFilters()" class="ask-filter-hint">
-          <small>Respecting active filters: <span x-text="activeFilterSummary()"></span></small>
-        </div>
-      </form>
-      <template x-if="askAnswer">
-        <div class="ask-result">
-          <div x-show="askLlmError" class="ask-error" x-text="askLlmError"></div>
-          <div class="ask-answer" x-html="askAnswerHtml"></div>
-          <template x-if="askEvents.length">
-            <div class="ask-events">
-              <h4>Referenced events</h4>
-              <template x-for="(evt, idx) in askEvents" :key="evt.id || idx">
-                <article class="event event--compact">
-                  <div class="event__meta">
-                    <span class="pill" x-text="evt.display_category || evt.service || '—'"></span>
-                    <span class="pill" :class="['success','succeeded','ok','passed'].includes((evt.result || '').toLowerCase()) ? 'pill--ok' : 'pill--warn'" x-text="evt.result || '—'"></span>
-                  </div>
-                  <h3 x-text="evt.operation || '—'"></h3>
-                  <p class="event__detail" x-show="evt.display_summary"><strong>Summary:</strong> <span x-text="evt.display_summary"></span></p>
-                  <p class="event__detail"><strong>Actor:</strong> <span x-text="evt.actor_display || '—'"></span></p>
-                  <p class="event__detail"><strong>Target:</strong> <span x-text="Array.isArray(evt.target_displays) ? evt.target_displays.join(', ') : '—'"></span></p>
-                  <p class="event__detail"><strong>When:</strong> <span x-text="evt.timestamp ? new Date(evt.timestamp).toLocaleString() : '—'"></span></p>
-                </article>
-              </template>
-            </div>
-          </template>
-          <button type="button" class="ghost" @click="clearAsk()">Clear</button>
-        </div>
-      </template>
-    </section>
-
     <section class="panel">
       <form id="filters" class="filters" @submit.prevent="resetPagination(); loadEvents()">
         <div class="filter-row">
@@ -163,6 +120,49 @@
       </form>
     </section>
 
+    <section class="panel" x-show="aiFeaturesEnabled">
+      <h3>Ask a question</h3>
+      <form class="ask-form" @submit.prevent="askQuestion()">
+        <div class="ask-row">
+          <input
+            type="text"
+            placeholder="What happened to device ABC123 in the last 3 days?"
+            x-model="askQuestionText"
+            class="ask-input"
+          />
+          <button type="submit" :disabled="askLoading" x-text="askLoading ? 'Thinking…' : 'Ask'">Ask</button>
+        </div>
+        <div x-show="hasActiveFilters()" class="ask-filter-hint">
+          <small>Respecting active filters: <span x-text="activeFilterSummary()"></span></small>
+        </div>
+      </form>
+      <template x-if="askAnswer">
+        <div class="ask-result">
+          <div x-show="askLlmError" class="ask-error" x-text="askLlmError"></div>
+          <div class="ask-answer" x-html="askAnswerHtml"></div>
+          <template x-if="askEvents.length">
+            <div class="ask-events">
+              <h4>Referenced events</h4>
+              <template x-for="(evt, idx) in askEvents" :key="evt.id || idx">
+                <article class="event event--compact">
+                  <div class="event__meta">
+                    <span class="pill" x-text="evt.display_category || evt.service || '—'"></span>
+                    <span class="pill" :class="['success','succeeded','ok','passed'].includes((evt.result || '').toLowerCase()) ? 'pill--ok' : 'pill--warn'" x-text="evt.result || '—'"></span>
+                  </div>
+                  <h3 x-text="evt.operation || '—'"></h3>
+                  <p class="event__detail" x-show="evt.display_summary"><strong>Summary:</strong> <span x-text="evt.display_summary"></span></p>
+                  <p class="event__detail"><strong>Actor:</strong> <span x-text="evt.actor_display || '—'"></span></p>
+                  <p class="event__detail"><strong>Target:</strong> <span x-text="Array.isArray(evt.target_displays) ? evt.target_displays.join(', ') : '—'"></span></p>
+                  <p class="event__detail"><strong>When:</strong> <span x-text="evt.timestamp ? new Date(evt.timestamp).toLocaleString() : '—'"></span></p>
+                </article>
+              </template>
+            </div>
+          </template>
+          <button type="button" class="ghost" @click="clearAsk()">Clear</button>
+        </div>
+      </template>
+    </section>
+
     <section class="panel">
       <div class="panel-header">
         <h2>Events</h2>