feat: natural language query + production hardening

Features:
- Add /api/ask endpoint for plain-language audit log queries
- Regex-based time/entity extraction (no LLM required for parsing)
- LLM-powered narrative summarisation with OpenAI-compatible APIs
- Graceful fallback to structured bullet lists when LLM is unavailable
- Frontend ask panel with markdown rendering and cited events

Production:
- Harden Dockerfile: non-root user, gunicorn+uvicorn workers
- Add docker-compose.prod.yml with internal networks and health checks
- Add nginx reverse proxy with security headers
- MongoDB no longer exposed externally in production

Tests:
- 29 new tests for ask parsing, query building, and endpoint behaviour
- Fix conftest monkeypatch for routes.ask events collection

Bump version to 1.1.0

backend/frontend/index.html

@@ -38,6 +38,45 @@
       </div>
     </section>
 
+    <section class="panel">
+      <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>
+      </form>
+      <template x-if="askAnswer">
+        <div class="ask-result">
+          <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">
@@ -200,6 +239,12 @@
           actor: '', selectedServices: [], search: '', operation: '', result: '', start: '', end: '', limit: 100, includeTags: '', excludeTags: '',
         },
         options: { actors: [], services: [], operations: [], results: [] },
+        askQuestionText: '',
+        askLoading: false,
+        askAnswer: '',
+        askAnswerHtml: '',
+        askEvents: [],
+        askLlmUsed: false,
 
         async initApp() {
           await this.initAuth();
@@ -437,6 +482,52 @@
           this.loadEvents();
         },
 
+        async askQuestion() {
+          const q = this.askQuestionText.trim();
+          if (!q) return;
+          this.askLoading = true;
+          this.askAnswer = '';
+          this.askAnswerHtml = '';
+          this.askEvents = [];
+          try {
+            const res = await fetch('/api/ask', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json', ...this.authHeader() },
+              body: JSON.stringify({ question: q }),
+            });
+            if (!res.ok) throw new Error(await res.text());
+            const body = await res.json();
+            this.askAnswer = body.answer;
+            this.askAnswerHtml = this._mdToHtml(body.answer);
+            this.askEvents = body.events || [];
+            this.askLlmUsed = body.llm_used;
+          } catch (err) {
+            this.askAnswer = 'Sorry, something went wrong: ' + (err.message || 'Unknown error');
+            this.askAnswerHtml = this.askAnswer;
+          } finally {
+            this.askLoading = false;
+          }
+        },
+
+        clearAsk() {
+          this.askQuestionText = '';
+          this.askAnswer = '';
+          this.askAnswerHtml = '';
+          this.askEvents = [];
+          this.askLlmUsed = false;
+        },
+
+        _mdToHtml(text) {
+          // Very lightweight markdown-to-HTML for LLM answers
+          return text
+            .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+            .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+            .replace(/\*(.+?)\*/g, '<em>$1</em>')
+            .replace(/`([^`]+)`/g, '<code>$1</code>')
+            .replace(/Event #(\d+)/g, '<strong>Event #$1</strong>')
+            .replace(/\n/g, '<br>');
+        },
+
         async bulkTagMatching() {
           const tag = prompt('Enter tag to apply to all matching events:');
           if (!tag || !tag.trim()) return;

backend/frontend/style.css

@@ -377,6 +377,84 @@ input {
   margin: 0;
 }
 
+/* Ask / Natural Language Query */
+.ask-form {
+  margin-top: 10px;
+}
+
+.ask-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.ask-input {
+  flex: 1;
+  padding: 12px 14px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--text);
+  font-size: 15px;
+}
+
+.ask-result {
+  margin-top: 16px;
+}
+
+.ask-answer {
+  background: rgba(125, 211, 252, 0.06);
+  border: 1px solid rgba(125, 211, 252, 0.2);
+  border-radius: 12px;
+  padding: 16px;
+  line-height: 1.55;
+  margin-bottom: 14px;
+}
+
+.ask-answer code {
+  background: rgba(255,255,255,0.06);
+  padding: 2px 6px;
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.ask-events {
+  margin-bottom: 14px;
+}
+
+.ask-events h4 {
+  margin: 0 0 10px;
+  color: var(--muted);
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.event--compact {
+  padding: 12px;
+  margin-bottom: 10px;
+}
+
+.event--compact h3 {
+  font-size: 15px;
+}
+
+.source-health {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+  gap: 10px;
+}
+
+.health-card {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px 12px;
+  background: rgba(255, 255, 255, 0.02);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
 @media (max-width: 640px) {
   .hero {
     flex-direction: column;
@@ -386,4 +464,9 @@ input {
     flex-direction: column;
     align-items: stretch;
   }
+
+  .ask-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
 }