feat: Vibration Events sub-tab + last-event on location cards

Two additions to the project Vibration tab:

- Events sub-tab (next to Locations): a project-wide events table across all
  vibration locations. New GET /api/projects/{id}/vibration-events fans
  events_for_location across the project's vibration locations, tags each event
  with its location, and merges newest-first (From/To date filters, Real/FT
  filter, limit). Table columns Timestamp/Location/Serial/Tran/Vert/Long/PVS/
  Mic/Flags; rows open the shared event-detail modal (Chart.js + event-modal.js
  come from the modal partial). Lazy-loads on first open; refreshes on
  sfm-event-review-saved.
- Last event per location card: thread last_event (already in
  events_for_location stats) through the locations endpoint and show
  "Last event: …" on vibration cards.

Reuses the same event source + modal as the per-location Events tab.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

templates/partials/projects/location_list.html

@@ -74,6 +74,9 @@
                                 {% else %}
                                     <span class="italic text-gray-400 dark:text-gray-500">No active assignment</span>
                                 {% endif %}
+                                {% if item.last_event %}
+                                    <span>Last event: <span class="text-gray-700 dark:text-gray-300">{{ item.last_event[:16] }}</span></span>
+                                {% endif %}
                             </div>
                         </div>
                     </div>

templates/projects/detail.html

@@ -137,7 +137,10 @@
                     class="vib-sub-tab px-4 py-2 text-sm font-medium border-b-2 border-seismo-orange text-seismo-orange -mb-px transition-colors whitespace-nowrap">
                 Locations
             </button>
-            <!-- Future sub-tabs: Sessions, Data Files -->
+            <button id="vib-sub-events-btn" onclick="switchVibSubTab('events')"
+                    class="vib-sub-tab px-4 py-2 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 -mb-px transition-colors whitespace-nowrap">
+                Events
+            </button>
         </div>
 
         <!-- Vibration Locations sub-panel -->
@@ -183,6 +186,50 @@
                 </div>
             </div>
         </div>
+
+        <!-- Vibration Events sub-panel — project-wide events across all locations -->
+        <div id="vib-sub-events" class="vib-sub-panel hidden">
+            <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
+                <div class="flex flex-wrap items-end gap-3 mb-4">
+                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mr-auto">Project Events</h2>
+                    <div class="flex flex-col gap-1">
+                        <label class="text-xs text-gray-500 dark:text-gray-400">From</label>
+                        <input type="date" id="pve-from" onchange="loadProjectVibrationEvents()"
+                               class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                    </div>
+                    <div class="flex flex-col gap-1">
+                        <label class="text-xs text-gray-500 dark:text-gray-400">To</label>
+                        <input type="date" id="pve-to" onchange="loadProjectVibrationEvents()"
+                               class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                    </div>
+                    <div class="flex flex-col gap-1">
+                        <label class="text-xs text-gray-500 dark:text-gray-400">Events</label>
+                        <select id="pve-ft" onchange="loadProjectVibrationEvents()"
+                                class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                            <option value="">All</option>
+                            <option value="false">Real Only</option>
+                            <option value="true">FT Only</option>
+                        </select>
+                    </div>
+                    <div class="flex flex-col gap-1">
+                        <label class="text-xs text-gray-500 dark:text-gray-400">Limit</label>
+                        <select id="pve-limit" onchange="loadProjectVibrationEvents()"
+                                class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
+                            <option value="250">250</option>
+                            <option value="500" selected>500</option>
+                            <option value="1000">1000</option>
+                        </select>
+                    </div>
+                    <button onclick="clearProjectEventFilters()"
+                            class="px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
+                        Clear
+                    </button>
+                </div>
+                <div id="pve-container" class="overflow-x-auto">
+                    <div class="text-center py-12 text-gray-500 dark:text-gray-400 text-sm">Loading events…</div>
+                </div>
+            </div>
+        </div>
     </div>
 
     <!-- Sound Tab -->
@@ -985,6 +1032,98 @@ function switchVibSubTab(name) {
         btn.classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400');
         btn.classList.add('border-seismo-orange', 'text-seismo-orange');
     }
+    // Lazy-load the Events table on first open.
+    if (name === 'events' && !_projectEventsLoaded) {
+        _projectEventsLoaded = true;
+        loadProjectVibrationEvents();
+    }
+}
+
+// ── Vibration Events sub-tab ─────────────────────────────────────────────
+let _projectEventsLoaded = false;
+
+function clearProjectEventFilters() {
+    document.getElementById('pve-from').value = '';
+    document.getElementById('pve-to').value = '';
+    document.getElementById('pve-ft').value = '';
+    loadProjectVibrationEvents();
+}
+
+function _pveFmtPPV(v) { return (v === null || v === undefined) ? '—' : Number(v).toFixed(4); }
+function _pvePPVClass(v) {
+    if (v == null) return 'text-gray-400';
+    if (v >= 0.5) return 'text-red-500';
+    if (v >= 0.2) return 'text-amber-500';
+    return 'text-green-600 dark:text-green-400';
+}
+
+async function loadProjectVibrationEvents() {
+    const container = document.getElementById('pve-container');
+    if (!container) return;
+    container.innerHTML = '<div class="text-center py-12 text-gray-500 dark:text-gray-400"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-seismo-orange mx-auto mb-3"></div>Loading events…</div>';
+
+    const params = new URLSearchParams();
+    const from = document.getElementById('pve-from').value;
+    const to   = document.getElementById('pve-to').value;
+    const ft   = document.getElementById('pve-ft').value;
+    const limit = document.getElementById('pve-limit').value;
+    if (from)  params.set('from_dt', from + ' 00:00:00');
+    if (to)    params.set('to_dt',   to + ' 23:59:59');
+    if (ft)    params.set('false_trigger', ft);
+    params.set('limit', limit);
+
+    try {
+        const r = await fetch(`/api/projects/${projectId}/vibration-events?${params.toString()}`);
+        if (!r.ok) throw new Error('HTTP ' + r.status);
+        const d = await r.json();
+        _renderProjectEvents(d.events || [], d.count || 0, container);
+    } catch (e) {
+        container.innerHTML = `<div class="text-center py-12 text-red-500 text-sm">Failed to load events: ${lsEsc(e.message)}</div>`;
+    }
+}
+
+function _renderProjectEvents(events, total, container) {
+    if (!events.length) {
+        container.innerHTML = '<div class="text-center py-12 text-gray-500 dark:text-gray-400 text-sm">No events for the current filter.</div>';
+        return;
+    }
+    const rows = events.map(ev => {
+        const ts = ev.timestamp ? ev.timestamp.replace('T', ' ').slice(0, 19) : '—';
+        const mic = ev.mic_ppv != null ? Number(ev.mic_ppv).toFixed(3) : '—';
+        const ft = ev.false_trigger
+            ? '<span class="px-2 py-0.5 rounded text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">FT</span>' : '';
+        return `<tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50 cursor-pointer" onclick="showEventDetail('${lsEsc(ev.id)}')">
+            <td class="px-4 py-2.5 text-sm text-gray-900 dark:text-white whitespace-nowrap">${ts}</td>
+            <td class="px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300">${lsEsc(ev.location_name || '—')}</td>
+            <td class="px-4 py-2.5 text-sm font-mono text-seismo-orange">
+                <a href="/unit/${lsEsc(ev.serial)}" class="hover:text-seismo-navy" onclick="event.stopPropagation()">${lsEsc(ev.serial)}</a>
+            </td>
+            <td class="px-4 py-2.5 text-sm font-mono ${_pvePPVClass(ev.tran_ppv)}">${_pveFmtPPV(ev.tran_ppv)}</td>
+            <td class="px-4 py-2.5 text-sm font-mono ${_pvePPVClass(ev.vert_ppv)}">${_pveFmtPPV(ev.vert_ppv)}</td>
+            <td class="px-4 py-2.5 text-sm font-mono ${_pvePPVClass(ev.long_ppv)}">${_pveFmtPPV(ev.long_ppv)}</td>
+            <td class="px-4 py-2.5 text-sm font-mono font-semibold ${_pvePPVClass(ev.peak_vector_sum)}">${_pveFmtPPV(ev.peak_vector_sum)}</td>
+            <td class="px-4 py-2.5 text-sm font-mono text-gray-600 dark:text-gray-400">${mic}</td>
+            <td class="px-4 py-2.5 text-sm">${ft}</td>
+        </tr>`;
+    }).join('');
+    container.innerHTML = `
+        <div class="text-xs text-gray-500 dark:text-gray-400 px-1 pb-2">Showing ${events.length} of ${total.toLocaleString()} events</div>
+        <table class="w-full text-left">
+            <thead class="bg-gray-50 dark:bg-slate-700 border-b border-gray-200 dark:border-gray-600">
+                <tr>
+                    <th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Timestamp</th>
+                    <th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Location</th>
+                    <th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Serial</th>
+                    <th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Tran</th>
+                    <th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Vert</th>
+                    <th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Long</th>
+                    <th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">PVS</th>
+                    <th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Mic</th>
+                    <th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Flags</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">${rows}</tbody>
+        </table>`;
 }
 
 function switchSoundSubTab(name) {
@@ -2413,4 +2552,15 @@ async function regeneratePassword() {
     } catch (e) { paToast('Could not generate a password.'); }
 }
 </script>
+
+<!-- Shared SFM event-detail modal, for the Vibration Events sub-tab rows. -->
+{% include 'partials/event_detail_modal.html' %}
+<script src="/static/event-modal.js"></script>
+<script>
+    // When an event's review (FT flag / notes) is saved in the modal, refresh
+    // the project events table so the FT badge updates without a full reload.
+    window.addEventListener('sfm-event-review-saved', () => {
+        if (_projectEventsLoaded) loadProjectVibrationEvents();
+    });
+</script>
 {% endblock %}