feat: attacker profiles — UUID model, API routes, list/detail frontend

Migrate Attacker model from IP-based to UUID-based primary key with
auto-migration for old schema. Add GET /attackers (paginated, search,
sort) and GET /attackers/{uuid} API routes. Rewrite Attackers.tsx as
a card grid with full threat info and create AttackerDetail.tsx as a
dedicated detail page with back navigation, stats, commands table,
and fingerprints.

decnet_web/src/App.tsx

@@ -6,6 +6,7 @@ import Dashboard from './components/Dashboard';
 import DeckyFleet from './components/DeckyFleet';
 import LiveLogs from './components/LiveLogs';
 import Attackers from './components/Attackers';
+import AttackerDetail from './components/AttackerDetail';
 import Config from './components/Config';
 import Bounty from './components/Bounty';
 
@@ -61,6 +62,7 @@ function App() {
           <Route path="/live-logs" element={<LiveLogs />} />
           <Route path="/bounty" element={<Bounty />} />
           <Route path="/attackers" element={<Attackers />} />
+          <Route path="/attackers/:id" element={<AttackerDetail />} />
           <Route path="/config" element={<Config />} />
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>

decnet_web/src/components/AttackerDetail.tsx

@@ -0,0 +1,258 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { ArrowLeft, Crosshair } from 'lucide-react';
+import api from '../utils/api';
+import './Dashboard.css';
+
+interface AttackerData {
+  uuid: string;
+  ip: string;
+  first_seen: string;
+  last_seen: string;
+  event_count: number;
+  service_count: number;
+  decky_count: number;
+  services: string[];
+  deckies: string[];
+  traversal_path: string | null;
+  is_traversal: boolean;
+  bounty_count: number;
+  credential_count: number;
+  fingerprints: any[];
+  commands: { service: string; decky: string; command: string; timestamp: string }[];
+  updated_at: string;
+}
+
+const AttackerDetail: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [attacker, setAttacker] = useState<AttackerData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchAttacker = async () => {
+      setLoading(true);
+      try {
+        const res = await api.get(`/attackers/${id}`);
+        setAttacker(res.data);
+      } catch (err: any) {
+        if (err.response?.status === 404) {
+          setError('ATTACKER NOT FOUND');
+        } else {
+          setError('FAILED TO LOAD ATTACKER PROFILE');
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchAttacker();
+  }, [id]);
+
+  if (loading) {
+    return (
+      <div className="dashboard">
+        <div style={{ textAlign: 'center', padding: '80px', opacity: 0.5, letterSpacing: '4px' }}>
+          LOADING THREAT PROFILE...
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !attacker) {
+    return (
+      <div className="dashboard">
+        <button onClick={() => navigate('/attackers')} className="back-button">
+          <ArrowLeft size={18} />
+          <span>BACK TO PROFILES</span>
+        </button>
+        <div style={{ textAlign: 'center', padding: '80px', opacity: 0.5, letterSpacing: '4px' }}>
+          {error || 'ATTACKER NOT FOUND'}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="dashboard">
+      {/* Back Button */}
+      <button onClick={() => navigate('/attackers')} className="back-button">
+        <ArrowLeft size={18} />
+        <span>BACK TO PROFILES</span>
+      </button>
+
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+        <Crosshair size={32} className="violet-accent" />
+        <h1 className="matrix-text" style={{ fontSize: '1.8rem', letterSpacing: '2px' }}>
+          {attacker.ip}
+        </h1>
+        {attacker.is_traversal && (
+          <span className="traversal-badge" style={{ fontSize: '0.8rem' }}>TRAVERSAL</span>
+        )}
+      </div>
+
+      {/* Stats Row */}
+      <div className="stats-grid" style={{ gridTemplateColumns: 'repeat(5, 1fr)' }}>
+        <div className="stat-card">
+          <div className="stat-value matrix-text">{attacker.event_count}</div>
+          <div className="stat-label">EVENTS</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value violet-accent">{attacker.bounty_count}</div>
+          <div className="stat-label">BOUNTIES</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value violet-accent">{attacker.credential_count}</div>
+          <div className="stat-label">CREDENTIALS</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value matrix-text">{attacker.service_count}</div>
+          <div className="stat-label">SERVICES</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value matrix-text">{attacker.decky_count}</div>
+          <div className="stat-label">DECKIES</div>
+        </div>
+      </div>
+
+      {/* Timestamps */}
+      <div className="logs-section">
+        <div className="section-header">
+          <h2>TIMELINE</h2>
+        </div>
+        <div style={{ padding: '16px', display: 'flex', gap: '32px', fontSize: '0.85rem' }}>
+          <div>
+            <span className="dim">FIRST SEEN: </span>
+            <span className="matrix-text">{new Date(attacker.first_seen).toLocaleString()}</span>
+          </div>
+          <div>
+            <span className="dim">LAST SEEN: </span>
+            <span className="matrix-text">{new Date(attacker.last_seen).toLocaleString()}</span>
+          </div>
+          <div>
+            <span className="dim">UPDATED: </span>
+            <span className="dim">{new Date(attacker.updated_at).toLocaleString()}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Services */}
+      <div className="logs-section">
+        <div className="section-header">
+          <h2>SERVICES TARGETED</h2>
+        </div>
+        <div style={{ padding: '16px', display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+          {attacker.services.length > 0 ? attacker.services.map((svc) => (
+            <span key={svc} className="service-badge" style={{ fontSize: '0.85rem', padding: '4px 12px' }}>
+              {svc.toUpperCase()}
+            </span>
+          )) : (
+            <span className="dim">No services recorded</span>
+          )}
+        </div>
+      </div>
+
+      {/* Deckies & Traversal */}
+      <div className="logs-section">
+        <div className="section-header">
+          <h2>DECKY INTERACTIONS</h2>
+        </div>
+        <div style={{ padding: '16px', fontSize: '0.85rem' }}>
+          {attacker.traversal_path ? (
+            <div>
+              <span className="dim">TRAVERSAL PATH: </span>
+              <span className="violet-accent">{attacker.traversal_path}</span>
+            </div>
+          ) : (
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+              {attacker.deckies.map((d) => (
+                <span key={d} className="service-badge" style={{ borderColor: 'var(--accent-color)', color: 'var(--accent-color)' }}>
+                  {d}
+                </span>
+              ))}
+              {attacker.deckies.length === 0 && <span className="dim">No deckies recorded</span>}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Commands */}
+      <div className="logs-section">
+        <div className="section-header">
+          <h2>COMMANDS ({attacker.commands.length})</h2>
+        </div>
+        {attacker.commands.length > 0 ? (
+          <div className="logs-table-container">
+            <table className="logs-table">
+              <thead>
+                <tr>
+                  <th>TIMESTAMP</th>
+                  <th>SERVICE</th>
+                  <th>DECKY</th>
+                  <th>COMMAND</th>
+                </tr>
+              </thead>
+              <tbody>
+                {attacker.commands.map((cmd, i) => (
+                  <tr key={i}>
+                    <td className="dim" style={{ fontSize: '0.75rem', whiteSpace: 'nowrap' }}>
+                      {cmd.timestamp ? new Date(cmd.timestamp).toLocaleString() : '-'}
+                    </td>
+                    <td>{cmd.service}</td>
+                    <td className="violet-accent">{cmd.decky}</td>
+                    <td className="matrix-text" style={{ fontFamily: 'monospace' }}>{cmd.command}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div style={{ padding: '24px', textAlign: 'center', opacity: 0.5 }}>
+            NO COMMANDS CAPTURED
+          </div>
+        )}
+      </div>
+
+      {/* Fingerprints */}
+      <div className="logs-section">
+        <div className="section-header">
+          <h2>FINGERPRINTS ({attacker.fingerprints.length})</h2>
+        </div>
+        {attacker.fingerprints.length > 0 ? (
+          <div className="logs-table-container">
+            <table className="logs-table">
+              <thead>
+                <tr>
+                  <th>TYPE</th>
+                  <th>VALUE</th>
+                </tr>
+              </thead>
+              <tbody>
+                {attacker.fingerprints.map((fp, i) => (
+                  <tr key={i}>
+                    <td className="violet-accent">{fp.type || fp.bounty_type || 'unknown'}</td>
+                    <td className="dim" style={{ fontSize: '0.8rem', wordBreak: 'break-all' }}>
+                      {typeof fp === 'object' ? JSON.stringify(fp) : String(fp)}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div style={{ padding: '24px', textAlign: 'center', opacity: 0.5 }}>
+            NO FINGERPRINTS CAPTURED
+          </div>
+        )}
+      </div>
+
+      {/* UUID footer */}
+      <div style={{ textAlign: 'right', fontSize: '0.65rem', opacity: 0.3, marginTop: '8px' }}>
+        UUID: {attacker.uuid}
+      </div>
+    </div>
+  );
+};
+
+export default AttackerDetail;

decnet_web/src/components/Attackers.tsx

@@ -1,17 +1,233 @@
-import React from 'react';
-import { Activity } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import { Crosshair, Search, ChevronLeft, ChevronRight, Filter } from 'lucide-react';
+import api from '../utils/api';
 import './Dashboard.css';
 
+interface AttackerEntry {
+  uuid: string;
+  ip: string;
+  first_seen: string;
+  last_seen: string;
+  event_count: number;
+  service_count: number;
+  decky_count: number;
+  services: string[];
+  deckies: string[];
+  traversal_path: string | null;
+  is_traversal: boolean;
+  bounty_count: number;
+  credential_count: number;
+  fingerprints: any[];
+  commands: any[];
+  updated_at: string;
+}
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  return `${days}d ago`;
+}
+
 const Attackers: React.FC = () => {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const query = searchParams.get('q') || '';
+  const sortBy = searchParams.get('sort_by') || 'recent';
+  const page = parseInt(searchParams.get('page') || '1');
+
+  const [attackers, setAttackers] = useState<AttackerEntry[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [searchInput, setSearchInput] = useState(query);
+
+  const limit = 50;
+
+  const fetchAttackers = async () => {
+    setLoading(true);
+    try {
+      const offset = (page - 1) * limit;
+      let url = `/attackers?limit=${limit}&offset=${offset}&sort_by=${sortBy}`;
+      if (query) url += `&search=${encodeURIComponent(query)}`;
+
+      const res = await api.get(url);
+      setAttackers(res.data.data);
+      setTotal(res.data.total);
+    } catch (err) {
+      console.error('Failed to fetch attackers', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchAttackers();
+  }, [query, sortBy, page]);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    setSearchParams({ q: searchInput, sort_by: sortBy, page: '1' });
+  };
+
+  const setPage = (p: number) => {
+    setSearchParams({ q: query, sort_by: sortBy, page: p.toString() });
+  };
+
+  const setSort = (s: string) => {
+    setSearchParams({ q: query, sort_by: s, page: '1' });
+  };
+
+  const totalPages = Math.ceil(total / limit);
+
   return (
-    <div className="logs-section">
-      <div className="section-header">
-        <Activity size={20} />
-        <h2>ATTACKER PROFILES</h2>
+    <div className="dashboard">
+      {/* Page Header */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+          <Crosshair size={32} className="violet-accent" />
+          <h1 style={{ fontSize: '1.5rem', letterSpacing: '4px' }}>ATTACKER PROFILES</h1>
+        </div>
+
+        <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', border: '1px solid var(--border-color)', padding: '4px 12px' }}>
+            <Filter size={16} className="dim" />
+            <select
+              value={sortBy}
+              onChange={(e) => setSort(e.target.value)}
+              style={{ background: 'transparent', border: 'none', color: 'inherit', fontSize: '0.8rem', outline: 'none' }}
+            >
+              <option value="recent">RECENT</option>
+              <option value="active">MOST ACTIVE</option>
+              <option value="traversals">TRAVERSALS</option>
+            </select>
+          </div>
+
+          <form onSubmit={handleSearch} style={{ display: 'flex', alignItems: 'center', border: '1px solid var(--border-color)', padding: '4px 12px' }}>
+            <Search size={18} style={{ opacity: 0.5, marginRight: '8px' }} />
+            <input
+              type="text"
+              placeholder="Search by IP..."
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              style={{ background: 'transparent', border: 'none', padding: '4px', fontSize: '0.8rem', width: '200px' }}
+            />
+          </form>
+        </div>
       </div>
-      <div style={{ padding: '40px', textAlign: 'center', opacity: 0.5 }}>
-        <p>NO ACTIVE THREATS PROFILED YET.</p>
-        <p style={{ marginTop: '10px', fontSize: '0.8rem' }}>(Attackers view placeholder)</p>
+
+      {/* Summary & Pagination */}
+      <div className="logs-section">
+        <div className="section-header" style={{ justifyContent: 'space-between' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+            <span className="matrix-text" style={{ fontSize: '0.8rem' }}>{total} THREATS PROFILED</span>
+          </div>
+
+          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+            <span className="dim" style={{ fontSize: '0.8rem' }}>
+              Page {page} of {totalPages || 1}
+            </span>
+            <div style={{ display: 'flex', gap: '8px' }}>
+              <button
+                disabled={page <= 1}
+                onClick={() => setPage(page - 1)}
+                style={{ padding: '4px', border: '1px solid var(--border-color)', opacity: page <= 1 ? 0.3 : 1 }}
+              >
+                <ChevronLeft size={16} />
+              </button>
+              <button
+                disabled={page >= totalPages}
+                onClick={() => setPage(page + 1)}
+                style={{ padding: '4px', border: '1px solid var(--border-color)', opacity: page >= totalPages ? 0.3 : 1 }}
+              >
+                <ChevronRight size={16} />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Card Grid */}
+        {loading ? (
+          <div style={{ textAlign: 'center', padding: '60px', opacity: 0.5, letterSpacing: '4px' }}>
+            SCANNING THREAT PROFILES...
+          </div>
+        ) : attackers.length === 0 ? (
+          <div style={{ textAlign: 'center', padding: '60px', opacity: 0.5, letterSpacing: '4px' }}>
+            NO ACTIVE THREATS PROFILED YET
+          </div>
+        ) : (
+          <div className="attacker-grid">
+            {attackers.map((a) => {
+              const lastCmd = a.commands.length > 0
+                ? a.commands[a.commands.length - 1]
+                : null;
+
+              return (
+                <div
+                  key={a.uuid}
+                  className="attacker-card"
+                  onClick={() => navigate(`/attackers/${a.uuid}`)}
+                >
+                  {/* Header row */}
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+                    <span className="matrix-text" style={{ fontSize: '1.1rem', fontWeight: 'bold' }}>{a.ip}</span>
+                    {a.is_traversal && (
+                      <span className="traversal-badge">TRAVERSAL</span>
+                    )}
+                  </div>
+
+                  {/* Timestamps */}
+                  <div style={{ display: 'flex', gap: '16px', marginBottom: '8px', fontSize: '0.75rem' }}>
+                    <span className="dim">First: {new Date(a.first_seen).toLocaleDateString()}</span>
+                    <span className="dim">Last: {timeAgo(a.last_seen)}</span>
+                  </div>
+
+                  {/* Counts */}
+                  <div style={{ display: 'flex', gap: '16px', marginBottom: '10px', fontSize: '0.8rem' }}>
+                    <span>Events: <span className="matrix-text">{a.event_count}</span></span>
+                    <span>Bounties: <span className="violet-accent">{a.bounty_count}</span></span>
+                    <span>Creds: <span className="violet-accent">{a.credential_count}</span></span>
+                  </div>
+
+                  {/* Services */}
+                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px', marginBottom: '8px' }}>
+                    {a.services.map((svc) => (
+                      <span key={svc} className="service-badge">{svc.toUpperCase()}</span>
+                    ))}
+                  </div>
+
+                  {/* Deckies / Traversal Path */}
+                  {a.traversal_path ? (
+                    <div style={{ fontSize: '0.75rem', marginBottom: '8px', opacity: 0.7 }}>
+                      Path: {a.traversal_path}
+                    </div>
+                  ) : a.deckies.length > 0 ? (
+                    <div style={{ fontSize: '0.75rem', marginBottom: '8px', opacity: 0.7 }}>
+                      Deckies: {a.deckies.join(', ')}
+                    </div>
+                  ) : null}
+
+                  {/* Commands & Fingerprints */}
+                  <div style={{ display: 'flex', gap: '16px', fontSize: '0.75rem', marginBottom: '6px' }}>
+                    <span>Cmds: <span className="matrix-text">{a.commands.length}</span></span>
+                    <span>Fingerprints: <span className="matrix-text">{a.fingerprints.length}</span></span>
+                  </div>
+
+                  {/* Last command preview */}
+                  {lastCmd && (
+                    <div style={{ fontSize: '0.7rem', opacity: 0.6, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                      Last cmd: <span className="matrix-text">{lastCmd.command}</span>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
       </div>
     </div>
   );

decnet_web/src/components/Dashboard.css

@@ -127,3 +127,61 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+/* Attacker Profiles */
+.attacker-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 16px;
+  padding: 16px;
+}
+
+.attacker-card {
+  background: var(--secondary-color);
+  border: 1px solid var(--border-color);
+  padding: 16px;
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+}
+
+.attacker-card:hover {
+  transform: translateY(-2px);
+  border-color: var(--text-color);
+  box-shadow: var(--matrix-green-glow);
+}
+
+.traversal-badge {
+  font-size: 0.65rem;
+  padding: 2px 8px;
+  border: 1px solid var(--accent-color);
+  background: rgba(238, 130, 238, 0.1);
+  color: var(--accent-color);
+  letter-spacing: 2px;
+}
+
+.service-badge {
+  font-size: 0.7rem;
+  padding: 2px 8px;
+  border: 1px solid var(--text-color);
+  background: rgba(0, 255, 65, 0.05);
+  color: var(--text-color);
+}
+
+.back-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border: 1px solid var(--border-color);
+  background: transparent;
+  color: var(--text-color);
+  cursor: pointer;
+  font-size: 0.8rem;
+  letter-spacing: 2px;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.back-button:hover {
+  border-color: var(--text-color);
+  box-shadow: var(--matrix-green-glow);
+}