feat: copy raw event and AI explain in modal

- Add POST /api/events/{id}/explain endpoint that fetches event + related events
  and asks the LLM for a plain-language explanation with security context
- Add 'Copy' button to raw event modal (uses navigator.clipboard)
- Add 'Explain' button to raw event modal (only when AI_FEATURES_ENABLED)
- Show explanation in modal with markdown rendering
- Add CSS for modal actions and explanation panel
- Add tests for explain endpoint (404, no LLM key, mocked LLM success)

backend/frontend/index.html

@@ -214,7 +214,15 @@
       <div class="modal__content">
         <div class="modal__header">
           <h3 id="modalTitle">Raw Event</h3>
-          <button type="button" id="closeModal" class="ghost" @click="modalOpen = false">Close</button>
+          <div class="modal__actions">
+            <button type="button" class="ghost" @click="copyRawEvent()">Copy</button>
+            <button type="button" class="ghost" x-show="aiFeaturesEnabled" :disabled="modalExplainLoading" @click="explainEvent()" x-text="modalExplainLoading ? 'Explaining…' : 'Explain'">Explain</button>
+            <button type="button" id="closeModal" class="ghost" @click="modalOpen = false">Close</button>
+          </div>
+        </div>
+        <div x-show="modalExplanation || modalExplainError" class="modal__explanation">
+          <div x-show="modalExplainError" class="ask-error" x-text="modalExplainError"></div>
+          <div x-show="modalExplanation" class="ask-answer" x-html="_mdToHtml(modalExplanation)"></div>
         </div>
         <pre id="modalBody" x-text="modalBody"></pre>
       </div>
@@ -233,6 +241,10 @@
         currentCursor: null,
         modalOpen: false,
         modalBody: '',
+        modalEventId: '',
+        modalExplanation: '',
+        modalExplainLoading: false,
+        modalExplainError: '',
         authBtnText: 'Login',
         authConfig: null,
         msalInstance: null,
@@ -672,9 +684,44 @@
           } catch (err) {
             this.modalBody = `Error serializing event:\n${err.message}\n\nEvent ID: ${e.id || 'N/A'}`;
           }
+          this.modalEventId = e.id || '';
+          this.modalExplanation = '';
+          this.modalExplainError = '';
           this.modalOpen = true;
         },
 
+        async copyRawEvent() {
+          if (!this.modalBody) return;
+          try {
+            await navigator.clipboard.writeText(this.modalBody);
+            this.statusText = 'Raw event copied to clipboard.';
+            setTimeout(() => { if (this.statusText === 'Raw event copied to clipboard.') this.statusText = ''; }, 2000);
+          } catch (err) {
+            this.statusText = 'Failed to copy to clipboard.';
+          }
+        },
+
+        async explainEvent() {
+          if (!this.modalEventId) return;
+          this.modalExplainLoading = true;
+          this.modalExplanation = '';
+          this.modalExplainError = '';
+          try {
+            const res = await fetch(`/api/events/${this.modalEventId}/explain`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json', ...this.authHeader() },
+            });
+            if (!res.ok) throw new Error(await res.text());
+            const body = await res.json();
+            this.modalExplanation = body.explanation;
+            this.modalExplainError = body.llm_error || '';
+          } catch (err) {
+            this.modalExplainError = err.message || 'Failed to explain event.';
+          } finally {
+            this.modalExplainLoading = false;
+          }
+        },
+
         async addTag(e, tag) {
           if (!tag.trim()) return;
           const tags = [...(e.tags || []), tag.trim()];

backend/frontend/style.css

@@ -364,6 +364,22 @@ input {
   margin-bottom: 10px;
 }
 
+.modal__actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.modal__explanation {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 12px;
+  margin-bottom: 10px;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
 .modal pre {
   background: rgba(255, 255, 255, 0.02);
   color: var(--text);