From fd1306a2ad2587ab3c3357e6a59bd4245e7d9804 Mon Sep 17 00:00:00 2001
From: Aliyu Habibu <aliyuhabibu111@gmail.com>
Date: Thu, 18 Jun 2026 00:44:49 +0100
Subject: [PATCH 1/3] feat(threat-hunting): implement proactive threat hunting
 workspace

- Add ThreatHuntingSearch with text search and filters
- Add EventExplorer with severity stats and detail panel
- Add InvestigationWorkspace with notes and close flow
- Add types, mock data, tests, and styling
- Update jest config to include apps/web tests
---
 apps/web/app/threat-hunting/EventExplorer.css | 300 ++++++++++++++++++
 apps/web/app/threat-hunting/EventExplorer.tsx | 154 +++++++++
 .../threat-hunting/InvestigationWorkspace.css | 248 +++++++++++++++
 .../threat-hunting/InvestigationWorkspace.tsx | 159 ++++++++++
 .../threat-hunting/ThreatHuntingSearch.css    | 278 ++++++++++++++++
 .../threat-hunting/ThreatHuntingSearch.tsx    | 179 +++++++++++
 apps/web/app/threat-hunting/page.spec.tsx     |  78 +++++
 apps/web/app/threat-hunting/page.tsx          | 122 +++++++
 .../web/app/threat-hunting/threat-hunting.css |  75 +++++
 apps/web/app/threat-hunting/types.ts          | 172 ++++++++++
 jest.dashboard.config.js                      |   7 +-
 11 files changed, 1771 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/app/threat-hunting/EventExplorer.css
 create mode 100644 apps/web/app/threat-hunting/EventExplorer.tsx
 create mode 100644 apps/web/app/threat-hunting/InvestigationWorkspace.css
 create mode 100644 apps/web/app/threat-hunting/InvestigationWorkspace.tsx
 create mode 100644 apps/web/app/threat-hunting/ThreatHuntingSearch.css
 create mode 100644 apps/web/app/threat-hunting/ThreatHuntingSearch.tsx
 create mode 100644 apps/web/app/threat-hunting/page.spec.tsx
 create mode 100644 apps/web/app/threat-hunting/page.tsx
 create mode 100644 apps/web/app/threat-hunting/threat-hunting.css
 create mode 100644 apps/web/app/threat-hunting/types.ts

diff --git a/apps/web/app/threat-hunting/EventExplorer.css b/apps/web/app/threat-hunting/EventExplorer.css
new file mode 100644
index 0000000..d92dde8
--- /dev/null
+++ b/apps/web/app/threat-hunting/EventExplorer.css
@@ -0,0 +1,300 @@
+.ee-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.ee-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.ee-header-left {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.ee-section-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #f1f5f9;
+  margin: 0;
+}
+
+.ee-section-desc {
+  font-size: 0.8125rem;
+  color: #64748b;
+  margin: 0;
+}
+
+.ee-stats-row {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.ee-stat {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 0.5rem;
+  font-size: 0.8125rem;
+}
+
+.ee-stat-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.ee-stat-dot--critical { background: #ef4444; }
+.ee-stat-dot--high { background: #f97316; }
+.ee-stat-dot--medium { background: #f59e0b; }
+.ee-stat-dot--low { background: #3b82f6; }
+
+.ee-stat-count {
+  font-weight: 600;
+  color: #f1f5f9;
+}
+
+.ee-stat-label {
+  color: #94a3b8;
+}
+
+.ee-table-card {
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+
+.ee-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+
+.ee-table th {
+  padding: 0.875rem 1.25rem;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #94a3b8;
+  font-weight: 600;
+  border-bottom: 1px solid #334155;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.ee-table td {
+  padding: 0.875rem 1.25rem;
+  font-size: 0.875rem;
+  border-bottom: 1px solid rgba(51, 65, 85, 0.3);
+  vertical-align: middle;
+}
+
+.ee-table tbody tr {
+  transition: background 0.15s ease;
+  cursor: pointer;
+}
+
+.ee-table tbody tr:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.ee-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.ee-table tbody tr.ee-row--selected {
+  background: rgba(99, 102, 241, 0.1);
+  border-left: 3px solid #6366f1;
+}
+
+.ee-severity-badge {
+  display: inline-block;
+  padding: 0.2rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.ee-severity-badge--critical {
+  background: rgba(239, 68, 68, 0.15);
+  color: #fca5a5;
+}
+
+.ee-severity-badge--high {
+  background: rgba(249, 115, 22, 0.15);
+  color: #fdba74;
+}
+
+.ee-severity-badge--medium {
+  background: rgba(245, 158, 11, 0.15);
+  color: #fcd34d;
+}
+
+.ee-severity-badge--low {
+  background: rgba(59, 130, 246, 0.15);
+  color: #93c5fd;
+}
+
+.ee-status-badge {
+  display: inline-block;
+  padding: 0.2rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.ee-status-badge--open {
+  background: rgba(34, 197, 94, 0.15);
+  color: #86efac;
+}
+
+.ee-status-badge--investigating {
+  background: rgba(251, 191, 36, 0.15);
+  color: #fcd34d;
+}
+
+.ee-status-badge--resolved {
+  background: rgba(99, 102, 241, 0.15);
+  color: #a5b4fc;
+}
+
+.ee-status-badge--dismissed {
+  background: rgba(100, 116, 139, 0.15);
+  color: #94a3b8;
+}
+
+.ee-signature-cell {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 0.8125rem;
+  color: #e2e8f0;
+}
+
+.ee-chain-badge {
+  display: inline-block;
+  padding: 0.2rem 0.5rem;
+  background: #0f172a;
+  border: 1px solid #334155;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  color: #94a3b8;
+}
+
+.ee-risk-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ee-risk-track {
+  width: 60px;
+  height: 6px;
+  background: #0f172a;
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.ee-risk-fill {
+  height: 100%;
+  border-radius: 9999px;
+  transition: width 0.4s ease;
+}
+
+.ee-risk-fill--critical { background: #ef4444; }
+.ee-risk-fill--high { background: #f97316; }
+.ee-risk-fill--medium { background: #f59e0b; }
+.ee-risk-fill--low { background: #3b82f6; }
+
+.ee-risk-score {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #e2e8f0;
+  min-width: 2rem;
+}
+
+.ee-detail-panel {
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+}
+
+.ee-detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+
+.ee-detail-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #f1f5f9;
+  margin: 0;
+}
+
+.ee-detail-investigate-btn {
+  padding: 0.5rem 1rem;
+  background: #6366f1;
+  color: #fff;
+  border: none;
+  border-radius: 0.5rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  font-family: inherit;
+}
+
+.ee-detail-investigate-btn:hover {
+  background: #4f46e5;
+}
+
+.ee-detail-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.ee-detail-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.ee-detail-field-label {
+  font-size: 0.75rem;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-weight: 500;
+}
+
+.ee-detail-field-value {
+  font-size: 0.875rem;
+  color: #e2e8f0;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.ee-empty {
+  text-align: center;
+  padding: 4rem 1rem;
+  color: #64748b;
+}
+
+.ee-empty-icon {
+  font-size: 2.5rem;
+  margin-bottom: 0.75rem;
+  opacity: 0.4;
+}
diff --git a/apps/web/app/threat-hunting/EventExplorer.tsx b/apps/web/app/threat-hunting/EventExplorer.tsx
new file mode 100644
index 0000000..3564ff1
--- /dev/null
+++ b/apps/web/app/threat-hunting/EventExplorer.tsx
@@ -0,0 +1,154 @@
+import React, { useMemo } from 'react';
+import { ThreatEvent, Severity } from './types';
+import './EventExplorer.css';
+
+interface Props {
+  events: ThreatEvent[];
+  onInvestigate: (event: ThreatEvent) => void;
+  selectedEvent: ThreatEvent | null;
+  onSelectEvent: (event: ThreatEvent | null) => void;
+}
+
+function riskLevel(score: number): Severity {
+  if (score >= 85) return 'critical';
+  if (score >= 70) return 'high';
+  if (score >= 50) return 'medium';
+  return 'low';
+}
+
+export const EventExplorer: React.FC<Props> = ({ events, onInvestigate, selectedEvent, onSelectEvent }) => {
+  const stats = useMemo(() => {
+    const counts = { critical: 0, high: 0, medium: 0, low: 0 };
+    events.forEach(e => {
+      if (e.severity === 'critical') counts.critical++;
+      else if (e.severity === 'high') counts.high++;
+      else if (e.severity === 'medium') counts.medium++;
+      else counts.low++;
+    });
+    return counts;
+  }, [events]);
+
+  const sorted = useMemo(
+    () => [...events].sort((a, b) => b.riskScore - a.riskScore),
+    [events],
+  );
+
+  return (
+    <div className="ee-container">
+      <div className="ee-header">
+        <div className="ee-header-left">
+          <h2 className="ee-section-title">Event Explorer</h2>
+          <p className="ee-section-desc">Browse and analyze detected security events ({events.length} total)</p>
+        </div>
+        <div className="ee-stats-row">
+          {(Object.entries(stats) as [Severity, number][]).map(([severity, count]) => (
+            <div key={severity} className="ee-stat">
+              <span className={`ee-stat-dot ee-stat-dot--${severity}`} />
+              <span className="ee-stat-count">{count}</span>
+              <span className="ee-stat-label">{severity}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="ee-table-card">
+        <table className="ee-table">
+          <thead>
+            <tr>
+              <th>Timestamp</th>
+              <th>Severity</th>
+              <th>Signature</th>
+              <th>Chain</th>
+              <th>Risk</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {sorted.map(event => (
+              <tr
+                key={event.id}
+                className={selectedEvent?.id === event.id ? 'ee-row--selected' : ''}
+                onClick={() => onSelectEvent(selectedEvent?.id === event.id ? null : event)}
+              >
+                <td>{event.timestamp}</td>
+                <td>
+                  <span className={`ee-severity-badge ee-severity-badge--${event.severity}`}>
+                    {event.severity}
+                  </span>
+                </td>
+                <td className="ee-signature-cell">{event.signature}</td>
+                <td>
+                  <span className="ee-chain-badge">{event.chain}</span>
+                </td>
+                <td>
+                  <div className="ee-risk-bar">
+                    <div className="ee-risk-track">
+                      <div
+                        className={`ee-risk-fill ee-risk-fill--${riskLevel(event.riskScore)}`}
+                        style={{ width: `${event.riskScore}%` }}
+                      />
+                    </div>
+                    <span className="ee-risk-score">{event.riskScore}</span>
+                  </div>
+                </td>
+                <td>
+                  <span className={`ee-status-badge ee-status-badge--${event.status}`}>
+                    {event.status}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {selectedEvent ? (
+        <div className="ee-detail-panel">
+          <div className="ee-detail-header">
+            <h3 className="ee-detail-title">
+              {selectedEvent.signature} &mdash; {selectedEvent.chain}
+            </h3>
+            <button className="ee-detail-investigate-btn" onClick={() => onInvestigate(selectedEvent)}>
+              Start Investigation
+            </button>
+          </div>
+          <div className="ee-detail-grid">
+            <div className="ee-detail-field">
+              <span className="ee-detail-field-label">Transaction Hash</span>
+              <span className="ee-detail-field-value">{selectedEvent.transactionHash}</span>
+            </div>
+            <div className="ee-detail-field">
+              <span className="ee-detail-field-label">From Address</span>
+              <span className="ee-detail-field-value">{selectedEvent.fromAddress}</span>
+            </div>
+            <div className="ee-detail-field">
+              <span className="ee-detail-field-label">To Address</span>
+              <span className="ee-detail-field-value">{selectedEvent.toAddress}</span>
+            </div>
+            <div className="ee-detail-field">
+              <span className="ee-detail-field-label">Risk Score</span>
+              <span className="ee-detail-field-value">{selectedEvent.riskScore}/100</span>
+            </div>
+            <div className="ee-detail-field">
+              <span className="ee-detail-field-label">Status</span>
+              <span className="ee-detail-field-value">{selectedEvent.status}</span>
+            </div>
+            <div className="ee-detail-field">
+              <span className="ee-detail-field-label">Description</span>
+              <span className="ee-detail-field-value">{selectedEvent.description}</span>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="ee-empty">
+          <div className="ee-empty-icon">
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            </svg>
+          </div>
+          <p>Select an event to view details</p>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/web/app/threat-hunting/InvestigationWorkspace.css b/apps/web/app/threat-hunting/InvestigationWorkspace.css
new file mode 100644
index 0000000..e28f965
--- /dev/null
+++ b/apps/web/app/threat-hunting/InvestigationWorkspace.css
@@ -0,0 +1,248 @@
+.iw-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.iw-header-text {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #f1f5f9;
+  margin: 0 0 0.25rem;
+}
+
+.iw-header-desc {
+  font-size: 0.8125rem;
+  color: #64748b;
+  margin: 0;
+}
+
+.iw-empty {
+  text-align: center;
+  padding: 4rem 1rem;
+  color: #64748b;
+}
+
+.iw-empty-icon {
+  font-size: 2.5rem;
+  margin-bottom: 0.75rem;
+  opacity: 0.4;
+}
+
+.iw-empty-text {
+  font-size: 0.9375rem;
+  margin: 0 0 0.25rem;
+}
+
+.iw-empty-hint {
+  font-size: 0.8125rem;
+  margin: 0;
+}
+
+.iw-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.iw-item {
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  transition: border-color 0.2s ease;
+}
+
+.iw-item:hover {
+  border-color: #475569;
+}
+
+.iw-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  cursor: pointer;
+  gap: 1rem;
+}
+
+.iw-item-title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: #f1f5f9;
+  margin: 0;
+}
+
+.iw-item-badges {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.iw-item-badge {
+  padding: 0.2rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.iw-item-badge--open {
+  background: rgba(34, 197, 94, 0.15);
+  color: #86efac;
+}
+
+.iw-item-badge--closed {
+  background: rgba(100, 116, 139, 0.15);
+  color: #94a3b8;
+}
+
+.iw-item-meta {
+  font-size: 0.75rem;
+  color: #64748b;
+}
+
+.iw-item-chevron {
+  color: #64748b;
+  transition: transform 0.2s ease;
+  display: flex;
+}
+
+.iw-item-chevron--open {
+  transform: rotate(180deg);
+}
+
+.iw-item-body {
+  padding: 0 1.25rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.iw-events-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.iw-event-ref {
+  padding: 0.25rem 0.5rem;
+  background: rgba(99, 102, 241, 0.1);
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  color: #a5b4fc;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+}
+
+.iw-notes-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.iw-notes-title {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #94a3b8;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin: 0;
+}
+
+.iw-note {
+  background: #0f172a;
+  border: 1px solid #334155;
+  border-radius: 0.5rem;
+  padding: 0.875rem;
+}
+
+.iw-note-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.375rem;
+}
+
+.iw-note-author {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #e2e8f0;
+}
+
+.iw-note-time {
+  font-size: 0.6875rem;
+  color: #64748b;
+}
+
+.iw-note-content {
+  font-size: 0.875rem;
+  color: #cbd5e1;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.iw-add-note {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.iw-note-input {
+  flex: 1;
+  padding: 0.625rem 0.875rem;
+  background: #0f172a;
+  border: 1px solid #334155;
+  border-radius: 0.5rem;
+  color: #f8fafc;
+  font-size: 0.8125rem;
+  font-family: inherit;
+  outline: none;
+  resize: vertical;
+  min-height: 2.5rem;
+}
+
+.iw-note-input:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+}
+
+.iw-note-btn {
+  padding: 0.5rem 1rem;
+  background: #6366f1;
+  color: #fff;
+  border: none;
+  border-radius: 0.5rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  font-family: inherit;
+  align-self: flex-end;
+}
+
+.iw-note-btn:hover {
+  background: #4f46e5;
+}
+
+.iw-note-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.iw-close-btn {
+  padding: 0.375rem 0.75rem;
+  background: transparent;
+  border: 1px solid #ef4444;
+  color: #f87171;
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: inherit;
+}
+
+.iw-close-btn:hover {
+  background: rgba(239, 68, 68, 0.1);
+}
diff --git a/apps/web/app/threat-hunting/InvestigationWorkspace.tsx b/apps/web/app/threat-hunting/InvestigationWorkspace.tsx
new file mode 100644
index 0000000..fa84e70
--- /dev/null
+++ b/apps/web/app/threat-hunting/InvestigationWorkspace.tsx
@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+import { Investigation, ThreatEvent } from './types';
+import './InvestigationWorkspace.css';
+
+interface Props {
+  investigations: Investigation[];
+  events: ThreatEvent[];
+  onAddNote: (investigationId: string, content: string) => void;
+  onCloseInvestigation: (investigationId: string) => void;
+}
+
+export const InvestigationWorkspace: React.FC<Props> = ({
+  investigations,
+  events,
+  onAddNote,
+  onCloseInvestigation,
+}) => {
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [noteInputs, setNoteInputs] = useState<Record<string, string>>({});
+
+  const toggleExpand = (id: string) => {
+    setExpandedId(prev => (prev === id ? null : id));
+  };
+
+  const getEventById = (eventId: string): ThreatEvent | undefined => {
+    return events.find(e => e.id === eventId);
+  };
+
+  const handleAddNote = (investigationId: string) => {
+    const content = noteInputs[investigationId]?.trim();
+    if (!content) return;
+    onAddNote(investigationId, content);
+    setNoteInputs(prev => ({ ...prev, [investigationId]: '' }));
+  };
+
+  const handleNoteKeyDown = (e: React.KeyboardEvent, investigationId: string) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleAddNote(investigationId);
+    }
+  };
+
+  if (investigations.length === 0) {
+    return (
+      <div className="iw-container">
+        <div className="iw-empty">
+          <div className="iw-empty-icon">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+            </svg>
+          </div>
+          <p className="iw-empty-text">No investigations yet</p>
+          <p className="iw-empty-hint">Select an event and start an investigation to begin tracking threats</p>
+        </div>
+      </div>
+    );
+  }
+
+  const sorted = [...investigations].sort(
+    (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
+  );
+
+  return (
+    <div className="iw-container">
+      <h2 className="iw-header-text">Investigation Workspace</h2>
+      <p className="iw-header-desc">Track and manage your security investigations ({investigations.length} total)</p>
+
+      <div className="iw-list">
+        {sorted.map(inv => {
+          const isExpanded = expandedId === inv.id;
+          return (
+            <div key={inv.id} className="iw-item">
+              <div className="iw-item-header" onClick={() => toggleExpand(inv.id)} role="button" tabIndex={0} onKeyDown={e => e.key === 'Enter' && toggleExpand(inv.id)}>
+                <div>
+                  <h3 className="iw-item-title">{inv.title}</h3>
+                  <div className="iw-item-meta">
+                    Created {new Date(inv.createdAt).toLocaleString()} &middot; {inv.notes.length} note{inv.notes.length !== 1 ? 's' : ''}
+                  </div>
+                </div>
+                <div className="iw-item-badges">
+                  <span className={`iw-item-badge iw-item-badge--${inv.status}`}>{inv.status}</span>
+                  <span className={`iw-item-chevron ${isExpanded ? 'iw-item-chevron--open' : ''}`}>
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M6 9l6 6 6-6" />
+                    </svg>
+                  </span>
+                </div>
+              </div>
+
+              {isExpanded && (
+                <div className="iw-item-body">
+                  <div>
+                    <span className="iw-notes-title">Related Events</span>
+                    <div className="iw-events-list">
+                      {inv.eventIds.map(eventId => {
+                        const evt = getEventById(eventId);
+                        return (
+                          <span key={eventId} className="iw-event-ref" title={evt?.description}>
+                            {evt ? `${evt.signature} (${evt.chain})` : eventId}
+                          </span>
+                        );
+                      })}
+                    </div>
+                  </div>
+
+                  <div className="iw-notes-section">
+                    <span className="iw-notes-title">Investigation Notes</span>
+                    {inv.notes.map(note => (
+                      <div key={note.id} className="iw-note">
+                        <div className="iw-note-header">
+                          <span className="iw-note-author">{note.author}</span>
+                          <span className="iw-note-time">{new Date(note.createdAt).toLocaleString()}</span>
+                        </div>
+                        <p className="iw-note-content">{note.content}</p>
+                      </div>
+                    ))}
+                    {inv.notes.length === 0 && (
+                      <p style={{ fontSize: '0.8125rem', color: '#64748b', margin: 0 }}>
+                        No notes yet. Add your first observation below.
+                      </p>
+                    )}
+                  </div>
+
+                  <div className="iw-add-note">
+                    <textarea
+                      className="iw-note-input"
+                      placeholder="Add an investigation note..."
+                      value={noteInputs[inv.id] ?? ''}
+                      onChange={e =>
+                        setNoteInputs(prev => ({ ...prev, [inv.id]: e.target.value }))
+                      }
+                      onKeyDown={e => handleNoteKeyDown(e, inv.id)}
+                      rows={2}
+                    />
+                    <button
+                      className="iw-note-btn"
+                      disabled={!noteInputs[inv.id]?.trim()}
+                      onClick={() => handleAddNote(inv.id)}
+                    >
+                      Add Note
+                    </button>
+                  </div>
+
+                  {inv.status === 'open' && (
+                    <div>
+                      <button className="iw-close-btn" onClick={() => onCloseInvestigation(inv.id)}>
+                        Close Investigation
+                      </button>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web/app/threat-hunting/ThreatHuntingSearch.css b/apps/web/app/threat-hunting/ThreatHuntingSearch.css
new file mode 100644
index 0000000..9328e31
--- /dev/null
+++ b/apps/web/app/threat-hunting/ThreatHuntingSearch.css
@@ -0,0 +1,278 @@
+.ths-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.ths-search-card {
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+}
+
+.ths-search-row {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.ths-input-wrapper {
+  flex: 1;
+  position: relative;
+}
+
+.ths-input-icon {
+  position: absolute;
+  left: 0.875rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #64748b;
+  pointer-events: none;
+}
+
+.ths-input {
+  width: 100%;
+  padding: 0.75rem 1rem 0.75rem 2.75rem;
+  background: #0f172a;
+  border: 1px solid #334155;
+  border-radius: 0.5rem;
+  color: #f8fafc;
+  font-size: 0.9375rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  box-sizing: border-box;
+}
+
+.ths-input::placeholder {
+  color: #64748b;
+}
+
+.ths-input:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+}
+
+.ths-filter-select {
+  padding: 0.75rem 2.25rem 0.75rem 1rem;
+  background: #0f172a;
+  border: 1px solid #334155;
+  border-radius: 0.5rem;
+  color: #e2e8f0;
+  font-size: 0.875rem;
+  font-family: inherit;
+  cursor: pointer;
+  outline: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+  background-size: 1rem;
+  min-width: 120px;
+}
+
+.ths-filter-select:focus {
+  border-color: #6366f1;
+}
+
+.ths-search-btn {
+  padding: 0.75rem 1.5rem;
+  background: #6366f1;
+  color: #fff;
+  border: none;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  font-family: inherit;
+  white-space: nowrap;
+}
+
+.ths-search-btn:hover {
+  background: #4f46e5;
+}
+
+.ths-filters-row {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1rem;
+  flex-wrap: wrap;
+  padding-top: 1rem;
+  border-top: 1px solid #334155;
+}
+
+.ths-filter-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ths-filter-label {
+  font-size: 0.8125rem;
+  color: #94a3b8;
+  font-weight: 500;
+}
+
+.ths-filter-chip {
+  padding: 0.25rem 0.75rem;
+  background: #0f172a;
+  border: 1px solid #334155;
+  border-radius: 9999px;
+  color: #e2e8f0;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: inherit;
+}
+
+.ths-filter-chip:hover {
+  border-color: #6366f1;
+}
+
+.ths-filter-chip--active {
+  background: rgba(99, 102, 241, 0.15);
+  border-color: #6366f1;
+  color: #a5b4fc;
+}
+
+.ths-results-card {
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+}
+
+.ths-results-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.ths-results-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #f1f5f9;
+  margin: 0;
+}
+
+.ths-results-count {
+  font-size: 0.8125rem;
+  color: #64748b;
+}
+
+.ths-results-empty {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: #64748b;
+}
+
+.ths-results-empty-icon {
+  font-size: 2rem;
+  margin-bottom: 0.75rem;
+  opacity: 0.5;
+}
+
+.ths-results-empty-text {
+  font-size: 0.9375rem;
+  margin: 0 0 0.25rem;
+}
+
+.ths-results-empty-hint {
+  font-size: 0.8125rem;
+  margin: 0;
+}
+
+.ths-result-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 0.875rem 0;
+  border-bottom: 1px solid rgba(51, 65, 85, 0.5);
+  cursor: pointer;
+  transition: background 0.2s ease;
+  border-radius: 0.375rem;
+}
+
+.ths-result-item:last-child {
+  border-bottom: none;
+}
+
+.ths-result-item:hover {
+  background: rgba(255, 255, 255, 0.03);
+  margin: 0 -1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.ths-result-type-badge {
+  flex-shrink: 0;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  min-width: 5rem;
+  text-align: center;
+}
+
+.ths-result-type-badge--transaction {
+  background: rgba(99, 102, 241, 0.15);
+  color: #a5b4fc;
+}
+
+.ths-result-type-badge--address {
+  background: rgba(52, 211, 153, 0.15);
+  color: #6ee7b7;
+}
+
+.ths-result-type-badge--event {
+  background: rgba(251, 191, 36, 0.15);
+  color: #fcd34d;
+}
+
+.ths-result-type-badge--contract {
+  background: rgba(248, 113, 113, 0.15);
+  color: #fca5a5;
+}
+
+.ths-result-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.ths-result-label {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: #f1f5f9;
+  margin: 0 0 0.125rem;
+}
+
+.ths-result-desc {
+  font-size: 0.8125rem;
+  color: #94a3b8;
+  margin: 0;
+}
+
+.ths-result-meta {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.ths-result-chain {
+  font-size: 0.75rem;
+  color: #64748b;
+  padding: 0.2rem 0.5rem;
+  background: #0f172a;
+  border-radius: 0.25rem;
+}
+
+.ths-result-time {
+  font-size: 0.75rem;
+  color: #64748b;
+}
diff --git a/apps/web/app/threat-hunting/ThreatHuntingSearch.tsx b/apps/web/app/threat-hunting/ThreatHuntingSearch.tsx
new file mode 100644
index 0000000..78156f0
--- /dev/null
+++ b/apps/web/app/threat-hunting/ThreatHuntingSearch.tsx
@@ -0,0 +1,179 @@
+import React, { useState, useMemo } from 'react';
+import { SearchResult, MOCK_SEARCH_RESULTS } from './types';
+import './ThreatHuntingSearch.css';
+
+interface Props {
+  onInvestigate: (event: any) => void;
+}
+
+const SEVERITY_FILTERS = ['all', 'critical', 'high', 'medium', 'low'] as const;
+const CHAIN_FILTERS = ['all', 'Ethereum', 'Soroban', 'Polygon'] as const;
+
+export const ThreatHuntingSearch: React.FC<Props> = ({ onInvestigate }) => {
+  const [query, setQuery] = useState('');
+  const [typeFilter, setTypeFilter] = useState<string>('all');
+  const [severityFilter, setSeverityFilter] = useState<string>('all');
+  const [chainFilter, setChainFilter] = useState<string>('all');
+  const [hasSearched, setHasSearched] = useState(false);
+
+  const filteredResults = useMemo(() => {
+    if (!hasSearched) return [];
+
+    let results = [...MOCK_SEARCH_RESULTS];
+
+    if (query.trim()) {
+      const q = query.toLowerCase();
+      results = results.filter(
+        r =>
+          r.label.toLowerCase().includes(q) ||
+          r.description.toLowerCase().includes(q) ||
+          r.chain.toLowerCase().includes(q) ||
+          r.type.toLowerCase().includes(q),
+      );
+    }
+
+    if (typeFilter !== 'all') {
+      results = results.filter(r => r.type === typeFilter);
+    }
+
+    return results;
+  }, [query, typeFilter, hasSearched]);
+
+  const handleSearch = () => {
+    setHasSearched(true);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  const handleResultClick = (result: SearchResult) => {
+    if (result.type === 'event') {
+      onInvestigate({ id: result.id, signature: result.label, chain: result.chain });
+    }
+  };
+
+  return (
+    <div className="ths-container">
+      <div className="ths-search-card">
+        <div className="ths-search-row">
+          <div className="ths-input-wrapper">
+            <span className="ths-input-icon">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="11" cy="11" r="8" />
+                <path d="M21 21l-4.35-4.35" />
+              </svg>
+            </span>
+            <input
+              className="ths-input"
+              type="text"
+              placeholder="Search transactions, addresses, events, contracts..."
+              value={query}
+              onChange={e => setQuery(e.target.value)}
+              onKeyDown={handleKeyDown}
+              aria-label="Search threats"
+            />
+          </div>
+          <select
+            className="ths-filter-select"
+            value={typeFilter}
+            onChange={e => setTypeFilter(e.target.value)}
+            aria-label="Filter by type"
+          >
+            <option value="all">All Types</option>
+            <option value="transaction">Transaction</option>
+            <option value="address">Address</option>
+            <option value="event">Event</option>
+            <option value="contract">Contract</option>
+          </select>
+          <button className="ths-search-btn" onClick={handleSearch}>
+            Search
+          </button>
+        </div>
+
+        <div className="ths-filters-row">
+          <div className="ths-filter-group">
+            <span className="ths-filter-label">Severity:</span>
+            {SEVERITY_FILTERS.map(s => (
+              <button
+                key={s}
+                className={`ths-filter-chip ${severityFilter === s ? 'ths-filter-chip--active' : ''}`}
+                onClick={() => setSeverityFilter(s)}
+              >
+                {s.charAt(0).toUpperCase() + s.slice(1)}
+              </button>
+            ))}
+          </div>
+          <div className="ths-filter-group">
+            <span className="ths-filter-label">Chain:</span>
+            {CHAIN_FILTERS.map(c => (
+              <button
+                key={c}
+                className={`ths-filter-chip ${chainFilter === c ? 'ths-filter-chip--active' : ''}`}
+                onClick={() => setChainFilter(c)}
+              >
+                {c === 'all' ? 'All' : c}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="ths-results-card">
+        <div className="ths-results-header">
+          <h2 className="ths-results-title">
+            {hasSearched ? 'Search Results' : 'Ready to Search'}
+          </h2>
+          {hasSearched && (
+            <span className="ths-results-count">{filteredResults.length} result{filteredResults.length !== 1 ? 's' : ''}</span>
+          )}
+        </div>
+
+        {!hasSearched ? (
+          <div className="ths-results-empty">
+            <div className="ths-results-empty-icon">
+              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="11" cy="11" r="8" />
+                <path d="M21 21l-4.35-4.35" />
+              </svg>
+            </div>
+            <p className="ths-results-empty-text">Enter a search query to find threats</p>
+            <p className="ths-results-empty-hint">Search by transaction hash, contract address, event type, or chain</p>
+          </div>
+        ) : filteredResults.length === 0 ? (
+          <div className="ths-results-empty">
+            <p className="ths-results-empty-text">No results found</p>
+            <p className="ths-results-empty-hint">Try adjusting your search query or filters</p>
+          </div>
+        ) : (
+          <div>
+            {filteredResults.map(result => (
+              <div
+                key={result.id}
+                className="ths-result-item"
+                onClick={() => handleResultClick(result)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={e => e.key === 'Enter' && handleResultClick(result)}
+              >
+                <span className={`ths-result-type-badge ths-result-type-badge--${result.type}`}>
+                  {result.type}
+                </span>
+                <div className="ths-result-body">
+                  <p className="ths-result-label">{result.label}</p>
+                  <p className="ths-result-desc">{result.description}</p>
+                </div>
+                <div className="ths-result-meta">
+                  <span className="ths-result-chain">{result.chain}</span>
+                  <span className="ths-result-time">{result.timestamp}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web/app/threat-hunting/page.spec.tsx b/apps/web/app/threat-hunting/page.spec.tsx
new file mode 100644
index 0000000..9dcad53
--- /dev/null
+++ b/apps/web/app/threat-hunting/page.spec.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ThreatHuntingWorkspace } from './page';
+import { MOCK_EVENTS } from './types';
+
+describe('ThreatHuntingWorkspace', () => {
+  beforeEach(() => {
+    render(<ThreatHuntingWorkspace />);
+  });
+
+  it('renders the workspace title', () => {
+    expect(screen.getByRole('heading', { name: /threat hunting/i })).toBeInTheDocument();
+  });
+
+  it('renders all three tab navigation buttons', () => {
+    expect(screen.getByRole('button', { name: /^search$/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^events$/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', /investigations/i)).toBeInTheDocument();
+  });
+
+  it('shows Search tab as active by default', () => {
+    const searchTab = screen.getByRole('button', { name: /^search$/i });
+    expect(searchTab.className).toContain('th-tab--active');
+  });
+
+  it('switches to Events tab on click', () => {
+    fireEvent.click(screen.getByRole('button', { name: /^events$/i }));
+    expect(screen.getByText(/event explorer/i)).toBeInTheDocument();
+  });
+
+  it('switches to Investigations tab on click', () => {
+    fireEvent.click(screen.getByRole('button', /investigations/i));
+    expect(screen.getByText(/no investigations yet/i)).toBeInTheDocument();
+  });
+
+  it('displays stats for each severity in Events tab', () => {
+    fireEvent.click(screen.getByRole('button', { name: /^events$/i }));
+    const criticalCount = MOCK_EVENTS.filter(e => e.severity === 'critical').length;
+    const highCount = MOCK_EVENTS.filter(e => e.severity === 'high').length;
+    expect(screen.getByText(criticalCount)).toBeInTheDocument();
+    expect(screen.getByText(highCount)).toBeInTheDocument();
+  });
+
+  it('shows all events in the explorer table', () => {
+    fireEvent.click(screen.getByRole('button', { name: /^events$/i }));
+    MOCK_EVENTS.forEach(event => {
+      expect(screen.getByText(event.signature)).toBeInTheDocument();
+    });
+  });
+
+  it('shows event detail when an event row is clicked', () => {
+    fireEvent.click(screen.getByRole('button', { name: /^events$/i }));
+    fireEvent.click(screen.getByText(MOCK_EVENTS[0].signature));
+    expect(screen.getByText(/start investigation/i)).toBeInTheDocument();
+    expect(screen.getByText(MOCK_EVENTS[0].transactionHash)).toBeInTheDocument();
+  });
+});
+
+describe('ThreatHuntingWorkspace - Search', () => {
+  it('has a search input and search button', () => {
+    render(<ThreatHuntingWorkspace />);
+    expect(screen.getByLabelText(/search threats/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^search$/i })).toBeInTheDocument();
+  });
+
+  it('shows ready state before searching', () => {
+    render(<ThreatHuntingWorkspace />);
+    expect(screen.getByText(/ready to search/i)).toBeInTheDocument();
+  });
+});
+
+describe('ThreatHuntingWorkspace - Workspace', () => {
+  it('shows subtitle describing the feature', () => {
+    render(<ThreatHuntingWorkspace />);
+    expect(screen.getByText(/proactively search for threats/i)).toBeInTheDocument();
+  });
+});
diff --git a/apps/web/app/threat-hunting/page.tsx b/apps/web/app/threat-hunting/page.tsx
new file mode 100644
index 0000000..35dc994
--- /dev/null
+++ b/apps/web/app/threat-hunting/page.tsx
@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import { ThreatHuntingSearch } from './ThreatHuntingSearch';
+import { EventExplorer } from './EventExplorer';
+import { InvestigationWorkspace } from './InvestigationWorkspace';
+import { ThreatEvent, Investigation, MOCK_EVENTS } from './types';
+import './threat-hunting.css';
+
+type Tab = 'search' | 'events' | 'investigations';
+
+export const ThreatHuntingWorkspace: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<Tab>('search');
+  const [events] = useState<ThreatEvent[]>(MOCK_EVENTS);
+  const [investigations, setInvestigations] = useState<Investigation[]>([]);
+  const [selectedEvent, setSelectedEvent] = useState<ThreatEvent | null>(null);
+
+  const handleInvestigate = (event: ThreatEvent) => {
+    const newInvestigation: Investigation = {
+      id: `inv-${Date.now()}`,
+      title: `Investigation: ${event.signature} on ${event.chain}`,
+      eventIds: [event.id],
+      notes: [],
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+      status: 'open',
+    };
+    setInvestigations(prev => [newInvestigation, ...prev]);
+    setSelectedEvent(event);
+    setActiveTab('investigations');
+  };
+
+  const handleAddNote = (investigationId: string, content: string) => {
+    setInvestigations(prev =>
+      prev.map(inv =>
+        inv.id === investigationId
+          ? {
+              ...inv,
+              notes: [
+                ...inv.notes,
+                {
+                  id: `note-${Date.now()}`,
+                  content,
+                  author: 'Analyst',
+                  createdAt: new Date().toISOString(),
+                },
+              ],
+              updatedAt: new Date().toISOString(),
+            }
+          : inv,
+      ),
+    );
+  };
+
+  const handleCloseInvestigation = (investigationId: string) => {
+    setInvestigations(prev =>
+      prev.map(inv =>
+        inv.id === investigationId
+          ? { ...inv, status: 'closed' as const, updatedAt: new Date().toISOString() }
+          : inv,
+      ),
+    );
+  };
+
+  const tabs: { key: Tab; label: string }[] = [
+    { key: 'search', label: 'Search' },
+    { key: 'events', label: 'Events' },
+    { key: 'investigations', label: `Investigations (${investigations.length})` },
+  ];
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case 'search':
+        return <ThreatHuntingSearch onInvestigate={handleInvestigate} />;
+      case 'events':
+        return (
+          <EventExplorer
+            events={events}
+            onInvestigate={handleInvestigate}
+            selectedEvent={selectedEvent}
+            onSelectEvent={setSelectedEvent}
+          />
+        );
+      case 'investigations':
+        return (
+          <InvestigationWorkspace
+            investigations={investigations}
+            events={events}
+            onAddNote={handleAddNote}
+            onCloseInvestigation={handleCloseInvestigation}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="th-container">
+      <header className="th-header">
+        <div className="th-header-left">
+          <h1 className="th-title">Threat Hunting</h1>
+          <p className="th-subtitle">
+            Proactively search for threats, explore security events, and manage investigations
+          </p>
+        </div>
+        <nav className="th-tabs">
+          {tabs.map(tab => (
+            <button
+              key={tab.key}
+              className={`th-tab ${activeTab === tab.key ? 'th-tab--active' : ''}`}
+              onClick={() => setActiveTab(tab.key)}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </nav>
+      </header>
+      <div className="th-content">{renderContent()}</div>
+    </div>
+  );
+};
+
+export default ThreatHuntingWorkspace;
diff --git a/apps/web/app/threat-hunting/threat-hunting.css b/apps/web/app/threat-hunting/threat-hunting.css
new file mode 100644
index 0000000..8321ab9
--- /dev/null
+++ b/apps/web/app/threat-hunting/threat-hunting.css
@@ -0,0 +1,75 @@
+.th-container {
+  padding: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
+  font-family: system-ui, sans-serif;
+  color: #e2e8f0;
+  background: #0f172a;
+  min-height: 100vh;
+}
+
+.th-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.th-header-left {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.th-title {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: #f8fafc;
+  margin: 0;
+}
+
+.th-subtitle {
+  font-size: 0.875rem;
+  color: #94a3b8;
+  margin: 0;
+}
+
+.th-tabs {
+  display: flex;
+  gap: 0.5rem;
+  background: #1e293b;
+  border-radius: 0.5rem;
+  padding: 0.25rem;
+  border: 1px solid #334155;
+}
+
+.th-tab {
+  padding: 0.5rem 1.25rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: #94a3b8;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: inherit;
+}
+
+.th-tab:hover {
+  color: #e2e8f0;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.th-tab--active {
+  background: #334155;
+  color: #f8fafc;
+}
+
+.th-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
diff --git a/apps/web/app/threat-hunting/types.ts b/apps/web/app/threat-hunting/types.ts
new file mode 100644
index 0000000..831ed1d
--- /dev/null
+++ b/apps/web/app/threat-hunting/types.ts
@@ -0,0 +1,172 @@
+export type Severity = 'low' | 'medium' | 'high' | 'critical';
+
+export type EventStatus = 'open' | 'investigating' | 'resolved' | 'dismissed';
+
+export interface ThreatEvent {
+  id: string;
+  timestamp: string;
+  chain: string;
+  severity: Severity;
+  signature: string;
+  description: string;
+  transactionHash: string;
+  fromAddress: string;
+  toAddress: string;
+  riskScore: number;
+  status: EventStatus;
+}
+
+export interface SearchResult {
+  type: 'transaction' | 'address' | 'event' | 'contract';
+  id: string;
+  label: string;
+  description: string;
+  chain: string;
+  timestamp: string;
+}
+
+export interface InvestigationNote {
+  id: string;
+  content: string;
+  author: string;
+  createdAt: string;
+}
+
+export interface Investigation {
+  id: string;
+  title: string;
+  eventIds: string[];
+  notes: InvestigationNote[];
+  createdAt: string;
+  updatedAt: string;
+  status: 'open' | 'closed';
+}
+
+export const MOCK_EVENTS: ThreatEvent[] = [
+  {
+    id: 'evt-001',
+    timestamp: '2026-06-17 08:32:01 UTC',
+    chain: 'Ethereum',
+    severity: 'critical',
+    signature: 'renounceOwnership',
+    description: 'Ownership renouncement detected on Vault contract 0x1a2b...3c4d — possible rug pull precursor',
+    transactionHash: '0xabcd...ef01',
+    fromAddress: '0x1a2b...3c4d',
+    toAddress: '0x0000...0000',
+    riskScore: 95,
+    status: 'open',
+  },
+  {
+    id: 'evt-002',
+    timestamp: '2026-06-17 06:15:45 UTC',
+    chain: 'Soroban',
+    severity: 'high',
+    signature: 'set_admin',
+    description: 'Unauthorized set_admin call on Soroban treasury contract',
+    transactionHash: '0x2345...6789',
+    fromAddress: '0x4e5f...6a7b',
+    toAddress: '0x8c9d...0e1f',
+    riskScore: 82,
+    status: 'investigating',
+  },
+  {
+    id: 'evt-003',
+    timestamp: '2026-06-16 22:10:33 UTC',
+    chain: 'Polygon',
+    severity: 'high',
+    signature: 'drainLiquidity',
+    description: 'Sudden large-scale liquidity drain — 25% of pool removed in single transaction',
+    transactionHash: '0x3456...7890',
+    fromAddress: '0x5f6a...7b8c',
+    toAddress: '0x9d0e...1f2a',
+    riskScore: 88,
+    status: 'open',
+  },
+  {
+    id: 'evt-004',
+    timestamp: '2026-06-16 14:05:12 UTC',
+    chain: 'Ethereum',
+    severity: 'medium',
+    signature: 'emergencyPause',
+    description: 'Emergency pause triggered by multisig on LendingPool',
+    transactionHash: '0x4567...8901',
+    fromAddress: '0x6a7b...8c9d',
+    toAddress: '0x0e1f...2a3b',
+    riskScore: 65,
+    status: 'resolved',
+  },
+  {
+    id: 'evt-005',
+    timestamp: '2026-06-16 09:45:22 UTC',
+    chain: 'Soroban',
+    severity: 'medium',
+    signature: 'upgrade',
+    description: 'Unexpected contract upgrade detected on Soroban DEX',
+    transactionHash: '0x5678...9012',
+    fromAddress: '0x7b8c...9d0e',
+    toAddress: '0x1f2a...3b4c',
+    riskScore: 70,
+    status: 'open',
+  },
+  {
+    id: 'evt-006',
+    timestamp: '2026-06-15 18:30:00 UTC',
+    chain: 'Ethereum',
+    severity: 'low',
+    signature: 'mint',
+    description: 'Unusual high-frequency minting pattern detected on Token contract',
+    transactionHash: '0x6789...0123',
+    fromAddress: '0x8c9d...0e1f',
+    toAddress: '0x2a3b...4c5d',
+    riskScore: 30,
+    status: 'dismissed',
+  },
+  {
+    id: 'evt-007',
+    timestamp: '2026-06-15 11:20:15 UTC',
+    chain: 'Polygon',
+    severity: 'critical',
+    signature: 'transfer',
+    description: 'Large transfer from treasury to unknown address — 500k USDC',
+    transactionHash: '0x7890...1234',
+    fromAddress: '0x9d0e...1f2a',
+    toAddress: '0x3b4c...5d6e',
+    riskScore: 92,
+    status: 'investigating',
+  },
+];
+
+export const MOCK_SEARCH_RESULTS: SearchResult[] = [
+  {
+    type: 'transaction',
+    id: 'tx-001',
+    label: '0xabcd...ef01',
+    description: 'Critical — renounceOwnership on Vault',
+    chain: 'Ethereum',
+    timestamp: '2026-06-17 08:32 UTC',
+  },
+  {
+    type: 'address',
+    id: 'addr-001',
+    label: '0x1a2b...3c4d',
+    description: 'Vault Contract — 3 alerts in last 24h',
+    chain: 'Ethereum',
+    timestamp: '2026-06-17 08:32 UTC',
+  },
+  {
+    type: 'event',
+    id: 'evt-002',
+    label: 'set_admin on Soroban Treasury',
+    description: 'Unauthorized admin change — investigating',
+    chain: 'Soroban',
+    timestamp: '2026-06-17 06:15 UTC',
+  },
+  {
+    type: 'contract',
+    id: 'contract-001',
+    label: 'LendingPool (0x6a7b...8c9d)',
+    description: 'Paused — contains known vulnerability',
+    chain: 'Ethereum',
+    timestamp: '2026-06-16 14:05 UTC',
+  },
+];
diff --git a/jest.dashboard.config.js b/jest.dashboard.config.js
index 04bc8d0..6379cee 100644
--- a/jest.dashboard.config.js
+++ b/jest.dashboard.config.js
@@ -3,7 +3,12 @@ module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jest-environment-jsdom',
   rootDir: '.',
-  testMatch: ['<rootDir>/apps/dashboard/**/*.spec.tsx', '<rootDir>/apps/dashboard/**/*.spec.ts'],
+  testMatch: [
+    '<rootDir>/apps/dashboard/**/*.spec.tsx',
+    '<rootDir>/apps/dashboard/**/*.spec.ts',
+    '<rootDir>/apps/web/**/*.spec.tsx',
+    '<rootDir>/apps/web/**/*.spec.ts',
+  ],
   transform: {
     '^.+\\.(ts|tsx)$': ['ts-jest', {
       tsconfig: {

From 2c6793cf5d14bd937a76c5eb441cea46440a3559 Mon Sep 17 00:00:00 2001
From: Aliyu Habibu <aliyuhabibu111@gmail.com>
Date: Thu, 18 Jun 2026 17:07:04 +0100
Subject: [PATCH 2/3] fix: resolve CI test, lint, and Docker build failures

- Scoped getByRole tab queries with within(nav) and fixed
  getByRole options syntax in page.spec.tsx
- Added --ignore-scripts to production npm ci in Dockerfile
  to prevent husky prepare script failure
- Added apps/web/** to ESLint override to avoid tsconfig
  mismatch errors on threat-hunting workspace files
---
 .eslintrc.js                              |  2 +-
 Dockerfile                                |  2 +-
 apps/web/app/threat-hunting/page.spec.tsx | 20 ++++++++++++--------
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 6e9d29e..01bd710 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -23,7 +23,7 @@ module.exports = {
   overrides: [
     {
       // Files outside all tsconfigs — lint without type-aware rules
-      files: ['observability/**/*.ts', 'prisma/**/*.ts', 'src/**/*.ts', 'env.d.ts'],
+      files: ['observability/**/*.ts', 'prisma/**/*.ts', 'src/**/*.ts', 'apps/web/**/*.ts', 'apps/web/**/*.tsx', 'env.d.ts'],
       parserOptions: {
         project: null,
       },
diff --git a/Dockerfile b/Dockerfile
index 75550fc..444b9f2 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -32,7 +32,7 @@ COPY package*.json ./
 COPY prisma ./prisma/
 
 # Install production dependencies only
-RUN npm ci --only=production && \
+RUN npm ci --only=production --ignore-scripts && \
     npm cache clean --force
 
 # Copy built application from builder
diff --git a/apps/web/app/threat-hunting/page.spec.tsx b/apps/web/app/threat-hunting/page.spec.tsx
index 9dcad53..900839e 100644
--- a/apps/web/app/threat-hunting/page.spec.tsx
+++ b/apps/web/app/threat-hunting/page.spec.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, within } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { ThreatHuntingWorkspace } from './page';
 import { MOCK_EVENTS } from './types';
@@ -9,18 +9,21 @@ describe('ThreatHuntingWorkspace', () => {
     render(<ThreatHuntingWorkspace />);
   });
 
+  const getNav = () => screen.getByRole('navigation');
+
   it('renders the workspace title', () => {
     expect(screen.getByRole('heading', { name: /threat hunting/i })).toBeInTheDocument();
   });
 
   it('renders all three tab navigation buttons', () => {
-    expect(screen.getByRole('button', { name: /^search$/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^events$/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', /investigations/i)).toBeInTheDocument();
+    const nav = getNav();
+    expect(within(nav).getByRole('button', { name: /^search$/i })).toBeInTheDocument();
+    expect(within(nav).getByRole('button', { name: /^events$/i })).toBeInTheDocument();
+    expect(within(nav).getByRole('button', { name: /investigations/i })).toBeInTheDocument();
   });
 
   it('shows Search tab as active by default', () => {
-    const searchTab = screen.getByRole('button', { name: /^search$/i });
+    const searchTab = within(getNav()).getByRole('button', { name: /^search$/i });
     expect(searchTab.className).toContain('th-tab--active');
   });
 
@@ -30,7 +33,7 @@ describe('ThreatHuntingWorkspace', () => {
   });
 
   it('switches to Investigations tab on click', () => {
-    fireEvent.click(screen.getByRole('button', /investigations/i));
+    fireEvent.click(screen.getByRole('button', { name: /investigations/i }));
     expect(screen.getByText(/no investigations yet/i)).toBeInTheDocument();
   });
 
@@ -60,8 +63,9 @@ describe('ThreatHuntingWorkspace', () => {
 describe('ThreatHuntingWorkspace - Search', () => {
   it('has a search input and search button', () => {
     render(<ThreatHuntingWorkspace />);
-    expect(screen.getByLabelText(/search threats/i)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^search$/i })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: /search threats/i })).toBeInTheDocument();
+    const searchButtons = screen.getAllByRole('button', { name: /^search$/i });
+    expect(searchButtons.length).toBeGreaterThanOrEqual(1);
   });
 
   it('shows ready state before searching', () => {

From e5bdf727f5ccbf25b17021a3070f548de4e8dd5a Mon Sep 17 00:00:00 2001
From: Aliyu Habibu <aliyuhabibu111@gmail.com>
Date: Fri, 19 Jun 2026 08:09:11 +0100
Subject: [PATCH 3/3] fix: resolve Prettier, type and test failures in
 threat-hunting workspace

---
 apps/web/app/threat-hunting/EventExplorer.tsx | 32 +++++++++---
 .../threat-hunting/InvestigationWorkspace.tsx | 49 +++++++++++++++----
 .../threat-hunting/ThreatHuntingSearch.tsx    | 38 +++++++++++---
 apps/web/app/threat-hunting/page.spec.tsx     | 10 +++-
 apps/web/app/threat-hunting/page.tsx          |  8 ++-
 apps/web/app/threat-hunting/types.ts          |  4 +-
 6 files changed, 111 insertions(+), 30 deletions(-)

diff --git a/apps/web/app/threat-hunting/EventExplorer.tsx b/apps/web/app/threat-hunting/EventExplorer.tsx
index 3564ff1..ee98e69 100644
--- a/apps/web/app/threat-hunting/EventExplorer.tsx
+++ b/apps/web/app/threat-hunting/EventExplorer.tsx
@@ -16,7 +16,12 @@ function riskLevel(score: number): Severity {
   return 'low';
 }
 
-export const EventExplorer: React.FC<Props> = ({ events, onInvestigate, selectedEvent, onSelectEvent }) => {
+export const EventExplorer: React.FC<Props> = ({
+  events,
+  onInvestigate,
+  selectedEvent,
+  onSelectEvent,
+}) => {
   const stats = useMemo(() => {
     const counts = { critical: 0, high: 0, medium: 0, low: 0 };
     events.forEach(e => {
@@ -28,17 +33,16 @@ export const EventExplorer: React.FC<Props> = ({ events, onInvestigate, selected
     return counts;
   }, [events]);
 
-  const sorted = useMemo(
-    () => [...events].sort((a, b) => b.riskScore - a.riskScore),
-    [events],
-  );
+  const sorted = useMemo(() => [...events].sort((a, b) => b.riskScore - a.riskScore), [events]);
 
   return (
     <div className="ee-container">
       <div className="ee-header">
         <div className="ee-header-left">
           <h2 className="ee-section-title">Event Explorer</h2>
-          <p className="ee-section-desc">Browse and analyze detected security events ({events.length} total)</p>
+          <p className="ee-section-desc">
+            Browse and analyze detected security events ({events.length} total)
+          </p>
         </div>
         <div className="ee-stats-row">
           {(Object.entries(stats) as [Severity, number][]).map(([severity, count]) => (
@@ -108,7 +112,10 @@ export const EventExplorer: React.FC<Props> = ({ events, onInvestigate, selected
             <h3 className="ee-detail-title">
               {selectedEvent.signature} &mdash; {selectedEvent.chain}
             </h3>
-            <button className="ee-detail-investigate-btn" onClick={() => onInvestigate(selectedEvent)}>
+            <button
+              className="ee-detail-investigate-btn"
+              onClick={() => onInvestigate(selectedEvent)}
+            >
               Start Investigation
             </button>
           </div>
@@ -142,7 +149,16 @@ export const EventExplorer: React.FC<Props> = ({ events, onInvestigate, selected
       ) : (
         <div className="ee-empty">
           <div className="ee-empty-icon">
-            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <svg
+              width="40"
+              height="40"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
             </svg>
           </div>
diff --git a/apps/web/app/threat-hunting/InvestigationWorkspace.tsx b/apps/web/app/threat-hunting/InvestigationWorkspace.tsx
index fa84e70..cc05300 100644
--- a/apps/web/app/threat-hunting/InvestigationWorkspace.tsx
+++ b/apps/web/app/threat-hunting/InvestigationWorkspace.tsx
@@ -45,12 +45,23 @@ export const InvestigationWorkspace: React.FC<Props> = ({
       <div className="iw-container">
         <div className="iw-empty">
           <div className="iw-empty-icon">
-            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <svg
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
               <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
             </svg>
           </div>
           <p className="iw-empty-text">No investigations yet</p>
-          <p className="iw-empty-hint">Select an event and start an investigation to begin tracking threats</p>
+          <p className="iw-empty-hint">
+            Select an event and start an investigation to begin tracking threats
+          </p>
         </div>
       </div>
     );
@@ -63,24 +74,42 @@ export const InvestigationWorkspace: React.FC<Props> = ({
   return (
     <div className="iw-container">
       <h2 className="iw-header-text">Investigation Workspace</h2>
-      <p className="iw-header-desc">Track and manage your security investigations ({investigations.length} total)</p>
+      <p className="iw-header-desc">
+        Track and manage your security investigations ({investigations.length} total)
+      </p>
 
       <div className="iw-list">
         {sorted.map(inv => {
           const isExpanded = expandedId === inv.id;
           return (
             <div key={inv.id} className="iw-item">
-              <div className="iw-item-header" onClick={() => toggleExpand(inv.id)} role="button" tabIndex={0} onKeyDown={e => e.key === 'Enter' && toggleExpand(inv.id)}>
+              <div
+                className="iw-item-header"
+                onClick={() => toggleExpand(inv.id)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={e => e.key === 'Enter' && toggleExpand(inv.id)}
+              >
                 <div>
                   <h3 className="iw-item-title">{inv.title}</h3>
                   <div className="iw-item-meta">
-                    Created {new Date(inv.createdAt).toLocaleString()} &middot; {inv.notes.length} note{inv.notes.length !== 1 ? 's' : ''}
+                    Created {new Date(inv.createdAt).toLocaleString()} &middot; {inv.notes.length}{' '}
+                    note{inv.notes.length !== 1 ? 's' : ''}
                   </div>
                 </div>
                 <div className="iw-item-badges">
                   <span className={`iw-item-badge iw-item-badge--${inv.status}`}>{inv.status}</span>
                   <span className={`iw-item-chevron ${isExpanded ? 'iw-item-chevron--open' : ''}`}>
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
                       <path d="M6 9l6 6 6-6" />
                     </svg>
                   </span>
@@ -109,7 +138,9 @@ export const InvestigationWorkspace: React.FC<Props> = ({
                       <div key={note.id} className="iw-note">
                         <div className="iw-note-header">
                           <span className="iw-note-author">{note.author}</span>
-                          <span className="iw-note-time">{new Date(note.createdAt).toLocaleString()}</span>
+                          <span className="iw-note-time">
+                            {new Date(note.createdAt).toLocaleString()}
+                          </span>
                         </div>
                         <p className="iw-note-content">{note.content}</p>
                       </div>
@@ -126,9 +157,7 @@ export const InvestigationWorkspace: React.FC<Props> = ({
                       className="iw-note-input"
                       placeholder="Add an investigation note..."
                       value={noteInputs[inv.id] ?? ''}
-                      onChange={e =>
-                        setNoteInputs(prev => ({ ...prev, [inv.id]: e.target.value }))
-                      }
+                      onChange={e => setNoteInputs(prev => ({ ...prev, [inv.id]: e.target.value }))}
                       onKeyDown={e => handleNoteKeyDown(e, inv.id)}
                       rows={2}
                     />
diff --git a/apps/web/app/threat-hunting/ThreatHuntingSearch.tsx b/apps/web/app/threat-hunting/ThreatHuntingSearch.tsx
index 78156f0..c9be524 100644
--- a/apps/web/app/threat-hunting/ThreatHuntingSearch.tsx
+++ b/apps/web/app/threat-hunting/ThreatHuntingSearch.tsx
@@ -1,9 +1,9 @@
 import React, { useState, useMemo } from 'react';
-import { SearchResult, MOCK_SEARCH_RESULTS } from './types';
+import { ThreatEvent, SearchResult, MOCK_SEARCH_RESULTS } from './types';
 import './ThreatHuntingSearch.css';
 
 interface Props {
-  onInvestigate: (event: any) => void;
+  onInvestigate: (event: Pick<ThreatEvent, 'id' | 'signature' | 'chain'>) => void;
 }
 
 const SEVERITY_FILTERS = ['all', 'critical', 'high', 'medium', 'low'] as const;
@@ -61,7 +61,16 @@ export const ThreatHuntingSearch: React.FC<Props> = ({ onInvestigate }) => {
         <div className="ths-search-row">
           <div className="ths-input-wrapper">
             <span className="ths-input-icon">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
                 <circle cx="11" cy="11" r="8" />
                 <path d="M21 21l-4.35-4.35" />
               </svg>
@@ -99,7 +108,9 @@ export const ThreatHuntingSearch: React.FC<Props> = ({ onInvestigate }) => {
             {SEVERITY_FILTERS.map(s => (
               <button
                 key={s}
-                className={`ths-filter-chip ${severityFilter === s ? 'ths-filter-chip--active' : ''}`}
+                className={`ths-filter-chip ${
+                  severityFilter === s ? 'ths-filter-chip--active' : ''
+                }`}
                 onClick={() => setSeverityFilter(s)}
               >
                 {s.charAt(0).toUpperCase() + s.slice(1)}
@@ -127,20 +138,33 @@ export const ThreatHuntingSearch: React.FC<Props> = ({ onInvestigate }) => {
             {hasSearched ? 'Search Results' : 'Ready to Search'}
           </h2>
           {hasSearched && (
-            <span className="ths-results-count">{filteredResults.length} result{filteredResults.length !== 1 ? 's' : ''}</span>
+            <span className="ths-results-count">
+              {filteredResults.length} result{filteredResults.length !== 1 ? 's' : ''}
+            </span>
           )}
         </div>
 
         {!hasSearched ? (
           <div className="ths-results-empty">
             <div className="ths-results-empty-icon">
-              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <svg
+                width="48"
+                height="48"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
                 <circle cx="11" cy="11" r="8" />
                 <path d="M21 21l-4.35-4.35" />
               </svg>
             </div>
             <p className="ths-results-empty-text">Enter a search query to find threats</p>
-            <p className="ths-results-empty-hint">Search by transaction hash, contract address, event type, or chain</p>
+            <p className="ths-results-empty-hint">
+              Search by transaction hash, contract address, event type, or chain
+            </p>
           </div>
         ) : filteredResults.length === 0 ? (
           <div className="ths-results-empty">
diff --git a/apps/web/app/threat-hunting/page.spec.tsx b/apps/web/app/threat-hunting/page.spec.tsx
index 900839e..ca1b214 100644
--- a/apps/web/app/threat-hunting/page.spec.tsx
+++ b/apps/web/app/threat-hunting/page.spec.tsx
@@ -41,8 +41,14 @@ describe('ThreatHuntingWorkspace', () => {
     fireEvent.click(screen.getByRole('button', { name: /^events$/i }));
     const criticalCount = MOCK_EVENTS.filter(e => e.severity === 'critical').length;
     const highCount = MOCK_EVENTS.filter(e => e.severity === 'high').length;
-    expect(screen.getByText(criticalCount)).toBeInTheDocument();
-    expect(screen.getByText(highCount)).toBeInTheDocument();
+    const criticalLabel = screen
+      .getAllByText('critical')
+      .find(el => el.classList.contains('ee-stat-label'))!;
+    const highLabel = screen
+      .getAllByText('high')
+      .find(el => el.classList.contains('ee-stat-label'))!;
+    expect(within(criticalLabel.parentElement!).getByText(criticalCount)).toBeInTheDocument();
+    expect(within(highLabel.parentElement!).getByText(highCount)).toBeInTheDocument();
   });
 
   it('shows all events in the explorer table', () => {
diff --git a/apps/web/app/threat-hunting/page.tsx b/apps/web/app/threat-hunting/page.tsx
index 35dc994..0eacafc 100644
--- a/apps/web/app/threat-hunting/page.tsx
+++ b/apps/web/app/threat-hunting/page.tsx
@@ -13,7 +13,9 @@ export const ThreatHuntingWorkspace: React.FC = () => {
   const [investigations, setInvestigations] = useState<Investigation[]>([]);
   const [selectedEvent, setSelectedEvent] = useState<ThreatEvent | null>(null);
 
-  const handleInvestigate = (event: ThreatEvent) => {
+  const handleInvestigate = (
+    event: ThreatEvent | Pick<ThreatEvent, 'id' | 'signature' | 'chain'>,
+  ) => {
     const newInvestigation: Investigation = {
       id: `inv-${Date.now()}`,
       title: `Investigation: ${event.signature} on ${event.chain}`,
@@ -24,7 +26,9 @@ export const ThreatHuntingWorkspace: React.FC = () => {
       status: 'open',
     };
     setInvestigations(prev => [newInvestigation, ...prev]);
-    setSelectedEvent(event);
+    if ('timestamp' in event) {
+      setSelectedEvent(event);
+    }
     setActiveTab('investigations');
   };
 
diff --git a/apps/web/app/threat-hunting/types.ts b/apps/web/app/threat-hunting/types.ts
index 831ed1d..d15c0c4 100644
--- a/apps/web/app/threat-hunting/types.ts
+++ b/apps/web/app/threat-hunting/types.ts
@@ -49,7 +49,9 @@ export const MOCK_EVENTS: ThreatEvent[] = [
     chain: 'Ethereum',
     severity: 'critical',
     signature: 'renounceOwnership',
-    description: 'Ownership renouncement detected on Vault contract 0x1a2b...3c4d — possible rug pull precursor',
+    description:
+      'Ownership renouncement detected on Vault contract 0x1a2b...3c4d' +
+      ' — possible rug pull precursor',
     transactionHash: '0xabcd...ef01',
     fromAddress: '0x1a2b...3c4d',
     toAddress: '0x0000...0000',