feat(web): reskin Attackers, Bounty, and LiveLogs pages

Each page gets its own scoped stylesheet and is rewritten around the shared design language: filter bars, paginated lists, empty-state blocks, BountyInspector drawer. Behavioural surface is unchanged — same API calls, same routes, same RBAC gating.
2026-04-22 17:15:35 -04:00
parent 1518475946
commit e14527b382
7 changed files with 1184 additions and 576 deletions
--- a/decnet_web/src/components/Attackers.css
+++ b/decnet_web/src/components/Attackers.css
@@ -0,0 +1,178 @@
+.attackers-root {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.attackers-root .controls-row {
+  display: flex;
+  gap: 12px;
+  align-items: stretch;
+}
+.attackers-root .controls-row .search-container { flex: 1; max-width: none; }
+
+.attackers-root .sort-select {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  color: var(--matrix);
+  padding: 8px 14px;
+  font-family: inherit;
+  font-size: 0.72rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+}
+.attackers-root .sort-select:focus { outline: none; border-color: var(--accent); }
+
+.attackers-root .service-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.7rem;
+  padding: 2px 10px;
+  letter-spacing: 1px;
+  border: 1px solid var(--violet);
+  color: var(--violet);
+  background: var(--violet-tint-10);
+  cursor: pointer;
+}
+
+/* Card grid — scoped to avoid colliding with global .attacker-card */
+.attackers-root .ak-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 14px;
+  padding: 16px;
+}
+
+.attackers-root .ak-card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  padding: 16px;
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.attackers-root .ak-card:hover {
+  transform: translateY(-2px);
+  border-color: var(--accent);
+  box-shadow: var(--accent-glow);
+}
+
+.attackers-root .ak-card .ak-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.attackers-root .ak-card .ak-ip {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--matrix);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 1px;
+}
+
+.attackers-root .ak-meta {
+  display: flex;
+  gap: 14px;
+  font-size: 0.72rem;
+  opacity: 0.7;
+}
+
+.attackers-root .ak-stats {
+  display: flex;
+  gap: 14px;
+  font-size: 0.78rem;
+}
+.attackers-root .ak-stats .n { font-weight: 700; }
+.attackers-root .ak-stats .n.violet { color: var(--violet); }
+.attackers-root .ak-stats .n.matrix { color: var(--matrix); }
+.attackers-root .ak-stats .lbl { opacity: 0.55; font-size: 0.65rem; margin-right: 4px; letter-spacing: 1px; }
+
+.attackers-root .ak-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.attackers-root .ak-path {
+  font-size: 0.72rem;
+  opacity: 0.65;
+  word-break: break-all;
+}
+.attackers-root .ak-path .lbl { opacity: 0.5; margin-right: 6px; letter-spacing: 1px; font-size: 0.62rem; }
+
+.attackers-root .ak-lastcmd {
+  font-size: 0.7rem;
+  opacity: 0.6;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.attackers-root .ak-lastcmd .cmd { color: var(--matrix); }
+
+/* Activity chip */
+.attackers-root .activity-chip {
+  font-size: 0.62rem;
+  letter-spacing: 1.5px;
+  padding: 2px 8px;
+  border-radius: 3px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+.attackers-root .activity-chip .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.attackers-root .activity-chip.active {
+  border: 1px solid var(--matrix);
+  color: var(--matrix);
+  background: var(--matrix-tint-10);
+}
+.attackers-root .activity-chip.active .dot {
+  background: var(--matrix);
+  box-shadow: 0 0 6px var(--matrix);
+  animation: decnet-pulse 1s infinite alternate;
+}
+.attackers-root .activity-chip.passive {
+  border: 1px solid rgba(238, 130, 238, 0.5);
+  color: var(--violet);
+  background: var(--violet-tint-10);
+}
+.attackers-root .activity-chip.passive .dot { background: var(--violet); }
+.attackers-root .activity-chip.inactive {
+  border: 1px solid var(--border);
+  color: rgba(0, 255, 65, 0.5);
+  background: transparent;
+}
+.attackers-root .activity-chip.inactive .dot { background: var(--border); }
+
+/* Empty / loading */
+.attackers-root .empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 50px 20px;
+  opacity: 0.45;
+}
+.attackers-root .empty-state .type-label { font-size: 0.7rem; letter-spacing: 2px; }
+
+/* Pagination — same as Bounty */
+.attackers-root .pager { display: flex; align-items: center; gap: 12px; font-size: 0.7rem; }
+.attackers-root .pager button {
+  padding: 4px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--matrix);
+  display: flex;
+  cursor: pointer;
+}
+.attackers-root .pager button:disabled { opacity: 0.3; cursor: not-allowed; }
+.attackers-root .pager button:hover:not(:disabled) { border-color: var(--accent); }
--- a/decnet_web/src/components/Attackers.tsx
+++ b/decnet_web/src/components/Attackers.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { useSearchParams, useNavigate } from 'react-router-dom';
-import { Crosshair, Search, ChevronLeft, ChevronRight, Filter } from 'lucide-react';
+import { Search, ChevronLeft, ChevronRight, UserX } from 'lucide-react';
 import api from '../utils/api';
 import './Dashboard.css';
+import './Attackers.css';

 interface AttackerEntry {
  uuid: string;
@@ -23,6 +24,21 @@ interface AttackerEntry {
  updated_at: string;
 }

+// Activity thresholds — tune here to adjust tier resolution.
+const ACTIVE_MIN_EVENTS = 50;
+const ACTIVE_MAX_AGE_MIN = 60;
+const PASSIVE_MIN_EVENTS = 5;
+const PASSIVE_MAX_AGE_HR = 24;
+
+type ActivityTier = 'active' | 'passive' | 'inactive';
+
+function deriveActivity(a: AttackerEntry): ActivityTier {
+  const ageMin = (Date.now() - new Date(a.last_seen).getTime()) / 60000;
+  if (a.event_count >= ACTIVE_MIN_EVENTS && ageMin <= ACTIVE_MAX_AGE_MIN) return 'active';
+  if (a.event_count >= PASSIVE_MIN_EVENTS && ageMin <= PASSIVE_MAX_AGE_HR * 60) return 'passive';
+  return 'inactive';
+}
+
 function timeAgo(dateStr: string): string {
  const diff = Date.now() - new Date(dateStr).getTime();
  const mins = Math.floor(diff / 60000);
@@ -56,7 +72,6 @@ const Attackers: React.FC = () => {
      let url = `/attackers?limit=${limit}&offset=${offset}&sort_by=${sortBy}`;
      if (query) url += `&search=${encodeURIComponent(query)}`;
      if (serviceFilter) url += `&service=${encodeURIComponent(serviceFilter)}`;
-
      const res = await api.get(url);
      setAttackers(res.data.data);
      setTotal(res.data.total);
@@ -67,9 +82,9 @@ const Attackers: React.FC = () => {
    }
  };

-  useEffect(() => {
-    fetchAttackers();
-  }, [query, sortBy, serviceFilter, page]);
+  useEffect(() => { fetchAttackers(); }, [query, sortBy, serviceFilter, page]);
+
+  useEffect(() => { setSearchInput(query); }, [query]);

  const _params = (overrides: Record<string, string> = {}) => {
    const base: Record<string, string> = { q: query, sort_by: sortBy, service: serviceFilter, page: '1' };
@@ -80,178 +95,143 @@ const Attackers: React.FC = () => {
    e.preventDefault();
    setSearchParams(_params({ q: searchInput }));
  };
+  const setPage = (p: number) => setSearchParams(_params({ page: p.toString() }));
+  const setSort = (s: string) => setSearchParams(_params({ sort_by: s }));
+  const clearService = () => setSearchParams(_params({ service: '' }));

-  const setPage = (p: number) => {
-    setSearchParams(_params({ page: p.toString() }));
-  };
+  const totalPages = Math.max(1, Math.ceil(total / limit));

-  const setSort = (s: string) => {
-    setSearchParams(_params({ sort_by: s }));
-  };
-
-  const clearService = () => {
-    setSearchParams(_params({ service: '' }));
-  };
-
-  const totalPages = Math.ceil(total / limit);
+  const activityCounts = attackers.reduce(
+    (acc, a) => { acc[deriveActivity(a)]++; return acc; },
+    { active: 0, passive: 0, inactive: 0 } as Record<ActivityTier, number>,
+  );

  return (
-    <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 className="attackers-root">
+      <div className="page-header">
+        <div className="page-title-group">
+          <h1>ATTACKERS</h1>
+          <span className="page-sub">
+            {total.toLocaleString()} UNIQUE SOURCES · {activityCounts.active} ACTIVE · {activityCounts.passive} PASSIVE · {activityCounts.inactive} INACTIVE
+          </span>
        </div>
      </div>

-      {/* Summary & Pagination */}
+      <form className="controls-row" onSubmit={handleSearch}>
+        <div className="search-container">
+          <Search size={14} className="search-icon" />
+          <input
+            type="text"
+            placeholder="Search by IP..."
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+          />
+        </div>
+        <select className="sort-select" value={sortBy} onChange={(e) => setSort(e.target.value)}>
+          <option value="recent">RECENT</option>
+          <option value="active">MOST ACTIVE</option>
+          <option value="traversals">TRAVERSALS</option>
+        </select>
+      </form>
+
      <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 className="section-header">
+          <div className="section-title">
+            <span>SOURCE INTEL</span>
            {serviceFilter && (
              <button
+                type="button"
+                className="service-filter-chip"
                onClick={clearService}
-                style={{
-                  display: 'inline-flex', alignItems: 'center', gap: '6px',
-                  fontSize: '0.75rem', padding: '2px 10px', letterSpacing: '1px',
-                  border: '1px solid var(--accent-color)', color: 'var(--accent-color)',
-                  background: 'rgba(238, 130, 238, 0.1)', cursor: 'pointer',
-                }}
+                style={{ marginLeft: 12 }}
              >
-                {serviceFilter.toUpperCase()} &times;
+                {serviceFilter.toUpperCase()} ×
              </button>
            )}
          </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} />
+          <div className="section-actions">
+            <div className="pager">
+              <span className="dim">Page {page} of {totalPages}</span>
+              <button disabled={page <= 1} onClick={() => setPage(page - 1)} aria-label="Previous page">
+                <ChevronLeft size={14} />
              </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 disabled={page >= totalPages} onClick={() => setPage(page + 1)} aria-label="Next page">
+                <ChevronRight size={14} />
              </button>
            </div>
          </div>
        </div>

-        {/* Card Grid */}
        {loading ? (
-          <div style={{ textAlign: 'center', padding: '60px', opacity: 0.5, letterSpacing: '4px' }}>
-            SCANNING THREAT PROFILES...
+          <div className="empty-state">
+            <span className="type-label">SCANNING THREAT PROFILES...</span>
          </div>
        ) : attackers.length === 0 ? (
-          <div style={{ textAlign: 'center', padding: '60px', opacity: 0.5, letterSpacing: '4px' }}>
-            NO ACTIVE THREATS PROFILED YET
+          <div className="empty-state">
+            <UserX size={28} />
+            <span className="type-label">NO ACTIVE THREATS PROFILED YET</span>
          </div>
        ) : (
-          <div className="attacker-grid">
-            {attackers.map((a) => {
-              const lastCmd = a.commands.length > 0
-                ? a.commands[a.commands.length - 1]
-                : null;
-
+          <div className="ak-grid">
+            {attackers.map(a => {
+              const activity = deriveActivity(a);
+              const lastCmd = a.commands.length > 0 ? a.commands[a.commands.length - 1] : null;
              return (
                <div
                  key={a.uuid}
-                  className="attacker-card"
+                  className="ak-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 className="ak-top">
+                    <span className="ak-ip">{a.ip}</span>
+                    <span className={`activity-chip ${activity}`}>
+                      <span className="dot" />
+                      {activity.toUpperCase()}
+                    </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 className="ak-meta">
+                    <span>First: {new Date(a.first_seen).toLocaleDateString()}</span>
+                    <span>Last: {timeAgo(a.last_seen)}</span>
+                    {a.is_traversal && <span className="chip violet" style={{ fontSize: '0.6rem' }}>TRAVERSAL</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 className="ak-stats">
+                    <span><span className="lbl">EVENTS</span><span className="n matrix">{a.event_count}</span></span>
+                    <span><span className="lbl">BOUNTIES</span><span className="n violet">{a.bounty_count}</span></span>
+                    <span><span className="lbl">CREDS</span><span className="n violet">{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"
-                        style={{ cursor: 'pointer' }}
-                        onClick={(e) => { e.stopPropagation(); setSearchParams(_params({ service: svc })); }}
-                      >
-                        {svc.toUpperCase()}
-                      </span>
-                    ))}
-                  </div>
+                  {a.services.length > 0 && (
+                    <div className="ak-chips">
+                      {a.services.map(svc => (
+                        <span
+                          key={svc}
+                          className="chip dim-chip"
+                          style={{ cursor: 'pointer' }}
+                          onClick={(e) => { e.stopPropagation(); setSearchParams(_params({ service: svc })); }}
+                        >
+                          {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>
+                    <div className="ak-path"><span className="lbl">PATH</span>{a.traversal_path}</div>
                  ) : a.deckies.length > 0 ? (
-                    <div style={{ fontSize: '0.75rem', marginBottom: '8px', opacity: 0.7 }}>
-                      Deckies: {a.deckies.join(', ')}
-                    </div>
+                    <div className="ak-path"><span className="lbl">DECKIES</span>{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 className="ak-stats">
+                    <span><span className="lbl">CMDS</span><span className="n matrix">{a.commands.length}</span></span>
+                    <span><span className="lbl">FPS</span><span className="n matrix">{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 className="ak-lastcmd">
+                      <span className="lbl" style={{ opacity: 0.5, marginRight: 6, fontSize: '0.62rem', letterSpacing: 1 }}>LAST</span>
+                      <span className="cmd">{lastCmd.command}</span>
                    </div>
                  )}
                </div>
--- a/decnet_web/src/components/Bounty.css
+++ b/decnet_web/src/components/Bounty.css
@@ -0,0 +1,238 @@
+.bounty-root {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Buttons scoped under root (mirrors DeckyFleet/LiveLogs pattern) */
+.bounty-root .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  font-family: inherit;
+  font-size: 0.72rem;
+  letter-spacing: 2px;
+  background: transparent;
+  border: 1px solid var(--matrix);
+  color: var(--matrix);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.bounty-root .btn:hover { background: var(--matrix); color: #000; box-shadow: var(--matrix-glow); }
+.bounty-root .btn.violet { border-color: var(--violet); color: var(--violet); }
+.bounty-root .btn.violet:hover { background: var(--violet); color: #000; box-shadow: var(--violet-glow); }
+.bounty-root .btn.ghost { border-color: var(--border); color: var(--matrix); opacity: 0.7; }
+.bounty-root .btn.ghost:hover { opacity: 1; border-color: var(--matrix); background: transparent; box-shadow: var(--matrix-glow); }
+.bounty-root .btn:disabled { opacity: 0.3; cursor: not-allowed; }
+
+/* Header controls */
+.bounty-root .controls-row {
+  display: flex;
+  gap: 12px;
+  align-items: stretch;
+}
+.bounty-root .controls-row .search-container { flex: 1; max-width: none; }
+
+/* Segmented type filter */
+.bounty-root .seg-group {
+  display: flex;
+  border: 1px solid var(--border);
+  background: var(--panel);
+}
+.bounty-root .seg-group button {
+  padding: 8px 14px;
+  font-size: 0.68rem;
+  letter-spacing: 1.5px;
+  border: none;
+  border-right: 1px solid var(--border);
+  background: transparent;
+  color: rgba(0, 255, 65, 0.6);
+  cursor: pointer;
+  font-family: inherit;
+}
+.bounty-root .seg-group button:last-child { border-right: none; }
+.bounty-root .seg-group button.active {
+  background: var(--violet-tint-10);
+  color: var(--violet);
+}
+.bounty-root .seg-group button:hover:not(.active) { color: var(--matrix); }
+
+/* Table row interactivity */
+.bounty-root .logs-table tr.clickable { cursor: pointer; }
+.bounty-root .logs-table tr.clickable:hover { background: rgba(238, 130, 238, 0.04); }
+.bounty-root .logs-table td .attacker-link {
+  text-decoration: underline dotted;
+  cursor: pointer;
+}
+.bounty-root .logs-table td .data-preview {
+  font-size: 0.74rem;
+  opacity: 0.7;
+  max-width: 400px;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bounty-root .logs-table td .cred-inline {
+  display: flex;
+  gap: 14px;
+  font-size: 0.8rem;
+}
+.bounty-root .logs-table td .cred-inline .k-small {
+  opacity: 0.6;
+  font-size: 0.65rem;
+  margin-right: 4px;
+}
+.bounty-root .logs-table td .cred-inline .matrix-text { color: var(--matrix); }
+
+/* Empty state */
+.bounty-root .empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 50px 20px;
+  opacity: 0.45;
+}
+.bounty-root .empty-state .type-label {
+  font-size: 0.7rem;
+  letter-spacing: 2px;
+}
+
+/* Pagination */
+.bounty-root .pager { display: flex; align-items: center; gap: 12px; font-size: 0.7rem; }
+.bounty-root .pager button {
+  padding: 4px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--matrix);
+  display: flex;
+  cursor: pointer;
+}
+.bounty-root .pager button:disabled { opacity: 0.3; cursor: not-allowed; }
+.bounty-root .pager button:hover:not(:disabled) { border-color: var(--accent); }
+
+/* ── Drawer ────────────────────────────────────────────── */
+.bounty-drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: flex-end;
+  z-index: 1000;
+  animation: bd-fade 0.15s ease;
+}
+@keyframes bd-fade { from { opacity: 0; } to { opacity: 1; } }
+
+.bounty-drawer {
+  width: min(620px, 100%);
+  height: 100%;
+  background: var(--bg);
+  border-left: 1px solid var(--violet);
+  box-shadow: -12px 0 40px rgba(238, 130, 238, 0.1);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  animation: bd-slide 0.2s ease;
+}
+@keyframes bd-slide { from { transform: translateX(30px); opacity: 0.6; } to { transform: none; opacity: 1; } }
+
+.bounty-drawer .bd-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+}
+.bounty-drawer .bd-head h3 {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.9rem;
+  letter-spacing: 3px;
+  color: var(--violet);
+  margin: 0;
+}
+.bounty-drawer .close-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--matrix);
+  display: flex;
+  padding: 4px;
+  cursor: pointer;
+}
+.bounty-drawer .close-btn:hover { border-color: var(--accent); }
+
+.bounty-drawer .bd-body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.bounty-drawer .kvs {
+  display: grid;
+  grid-template-columns: 130px 1fr;
+  gap: 10px 12px;
+  font-size: 0.8rem;
+}
+.bounty-drawer .kvs .k {
+  opacity: 0.55;
+  font-size: 0.7rem;
+  letter-spacing: 1.5px;
+}
+.bounty-drawer .kvs .v { word-break: break-all; }
+.bounty-drawer .kvs .attacker-link {
+  text-decoration: underline dotted;
+  cursor: pointer;
+  color: var(--matrix);
+}
+.bounty-drawer .violet-accent { color: var(--violet); }
+
+.bounty-drawer .type-label {
+  font-size: 0.68rem;
+  letter-spacing: 2px;
+  opacity: 0.6;
+  margin-bottom: 8px;
+}
+
+.bounty-drawer .code-block {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-left: 2px solid var(--violet);
+  padding: 12px 14px;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--matrix);
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+  overflow-x: auto;
+}
+.bounty-drawer .code-block .ck { color: rgba(238, 130, 238, 0.9); }
+.bounty-drawer .code-block .cs { color: var(--matrix); }
+
+.bounty-drawer .bd-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+/* Reuse .btn under drawer */
+.bounty-drawer .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  font-family: inherit;
+  font-size: 0.68rem;
+  letter-spacing: 2px;
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--matrix);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  opacity: 0.8;
+}
+.bounty-drawer .btn.ghost:hover { opacity: 1; border-color: var(--matrix); box-shadow: var(--matrix-glow); }
--- a/decnet_web/src/components/Bounty.tsx
+++ b/decnet_web/src/components/Bounty.tsx
@@ -1,8 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { Archive, Search, ChevronLeft, ChevronRight, Filter } from 'lucide-react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import {
+  Archive, Search, ChevronLeft, ChevronRight, Filter, Key, Package, ChevronRight as ChevR,
+  ArchiveX,
+} from 'lucide-react';
 import api from '../utils/api';
+import BountyInspector from './BountyInspector';
 import './Dashboard.css';
+import './Bounty.css';

 interface BountyEntry {
  id: number;
@@ -14,119 +19,34 @@ interface BountyEntry {
  payload: any;
 }

-const _FINGERPRINT_LABELS: Record<string, string> = {
-  fingerprint_type: 'TYPE',
-  ja3: 'JA3',
-  ja3s: 'JA3S',
-  ja4: 'JA4',
-  ja4s: 'JA4S',
-  ja4l: 'JA4L',
-  sni: 'SNI',
-  alpn: 'ALPN',
-  dst_port: 'PORT',
-  mechanisms: 'MECHANISM',
-  raw_ciphers: 'CIPHERS',
-  hash: 'HASH',
-  target_ip: 'TARGET',
-  target_port: 'PORT',
-  ssh_banner: 'BANNER',
-  kex_algorithms: 'KEX',
-  encryption_s2c: 'ENC (S→C)',
-  mac_s2c: 'MAC (S→C)',
-  compression_s2c: 'COMP (S→C)',
-  raw: 'RAW',
-  ttl: 'TTL',
-  window_size: 'WINDOW',
-  df_bit: 'DF',
-  mss: 'MSS',
-  window_scale: 'WSCALE',
-  sack_ok: 'SACK',
-  timestamp: 'TS',
-  options_order: 'OPTS ORDER',
+const FINGERPRINT_LABELS: Record<string, string> = {
+  fingerprint_type: 'TYPE', ja3: 'JA3', ja3s: 'JA3S', ja4: 'JA4', ja4s: 'JA4S', ja4l: 'JA4L',
+  sni: 'SNI', alpn: 'ALPN', dst_port: 'PORT', mechanisms: 'MECHANISM', raw_ciphers: 'CIPHERS',
+  hash: 'HASH', target_ip: 'TARGET', target_port: 'PORT', ssh_banner: 'BANNER',
+  kex_algorithms: 'KEX', encryption_s2c: 'ENC (S→C)', mac_s2c: 'MAC (S→C)',
+  compression_s2c: 'COMP (S→C)', raw: 'RAW', ttl: 'TTL', window_size: 'WINDOW', df_bit: 'DF',
+  mss: 'MSS', window_scale: 'WSCALE', sack_ok: 'SACK', timestamp: 'TS', options_order: 'OPTS ORDER',
 };

-const _TAG_STYLE: React.CSSProperties = {
-  fontSize: '0.65rem',
-  padding: '1px 6px',
-  borderRadius: '3px',
-  border: '1px solid rgba(238, 130, 238, 0.4)',
-  backgroundColor: 'rgba(238, 130, 238, 0.08)',
-  color: 'var(--accent-color)',
-  whiteSpace: 'nowrap',
-  flexShrink: 0,
-};
-
-const _HASH_STYLE: React.CSSProperties = {
-  fontSize: '0.75rem',
-  fontFamily: 'monospace',
-  opacity: 0.85,
-  wordBreak: 'break-all',
-};
-
-const FingerprintPayload: React.FC<{ payload: any }> = ({ payload }) => {
+const FingerprintPreview: React.FC<{ payload: any }> = ({ payload }) => {
  if (!payload || typeof payload !== 'object') {
-    return <span className="dim" style={{ fontSize: '0.8rem' }}>{JSON.stringify(payload)}</span>;
+    return <span className="data-preview">{JSON.stringify(payload)}</span>;
  }
-
-  // For simple payloads like tls_resumption with just type + mechanism
  const keys = Object.keys(payload);
-  const isSimple = keys.length <= 3;
-
-  if (isSimple) {
-    return (
-      <div style={{ display: 'flex', gap: '10px', alignItems: 'center', flexWrap: 'wrap' }}>
-        {keys.map((k) => {
-          const val = payload[k];
-          if (val === null || val === undefined) return null;
-          const label = _FINGERPRINT_LABELS[k] || k.toUpperCase();
-          return (
-            <span key={k} style={{ display: 'inline-flex', alignItems: 'center', gap: '5px' }}>
-              <span style={_TAG_STYLE}>{label}</span>
-              <span style={_HASH_STYLE}>{String(val)}</span>
-            </span>
-          );
-        })}
-      </div>
-    );
+  const priority = ['fingerprint_type', 'ja3', 'ja4', 'hash', 'sni', 'target_ip', 'ssh_banner'];
+  const show = priority.filter(k => payload[k] !== undefined && payload[k] !== null).slice(0, 2);
+  if (!show.length) {
+    return <span className="data-preview">{keys.slice(0, 3).join(', ')}</span>;
  }
-
-  // Full fingerprint — show priority fields as labeled rows
-  const priorityKeys = ['fingerprint_type', 'ja3', 'ja3s', 'ja4', 'ja4s', 'ja4l', 'sni', 'alpn', 'dst_port', 'mechanisms', 'hash', 'target_ip', 'target_port', 'ssh_banner', 'ttl', 'window_size', 'mss', 'options_order'];
-  const shown = priorityKeys.filter((k) => payload[k] !== undefined && payload[k] !== null);
-  const rest = keys.filter((k) => !priorityKeys.includes(k) && payload[k] !== null && payload[k] !== undefined);
-
  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-      {shown.map((k) => {
-        const label = _FINGERPRINT_LABELS[k] || k.toUpperCase();
-        const val = String(payload[k]);
-        return (
-          <div key={k} style={{ display: 'flex', alignItems: 'flex-start', gap: '6px' }}>
-            <span style={_TAG_STYLE}>{label}</span>
-            <span style={_HASH_STYLE}>{val}</span>
-          </div>
-        );
-      })}
-      {rest.length > 0 && (
-        <details style={{ marginTop: '2px' }}>
-          <summary className="dim" style={{ fontSize: '0.7rem', cursor: 'pointer', letterSpacing: '1px' }}>
-            +{rest.length} MORE FIELDS
-          </summary>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '3px', marginTop: '4px' }}>
-            {rest.map((k) => (
-              <div key={k} style={{ display: 'flex', alignItems: 'flex-start', gap: '6px' }}>
-                <span style={_TAG_STYLE}>{(_FINGERPRINT_LABELS[k] || k).toUpperCase()}</span>
-                <span style={{ ..._HASH_STYLE, fontSize: '0.7rem', opacity: 0.6 }}>{String(payload[k])}</span>
-              </div>
-            ))}
-          </div>
-        </details>
-      )}
-    </div>
+    <span className="data-preview">
+      {show.map(k => `${FINGERPRINT_LABELS[k] || k.toUpperCase()}: ${payload[k]}`).join(' · ')}
+    </span>
  );
 };

 const Bounty: React.FC = () => {
+  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q') || '';
  const typeFilter = searchParams.get('type') || '';
@@ -136,6 +56,7 @@ const Bounty: React.FC = () => {
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [searchInput, setSearchInput] = useState(query);
+  const [selected, setSelected] = useState<BountyEntry | null>(null);

  const limit = 50;

@@ -146,7 +67,6 @@ const Bounty: React.FC = () => {
      let url = `/bounty?limit=${limit}&offset=${offset}`;
      if (query) url += `&search=${encodeURIComponent(query)}`;
      if (typeFilter) url += `&bounty_type=${typeFilter}`;
-      
      const res = await api.get(url);
      setBounties(res.data.data);
      setTotal(res.data.total);
@@ -157,86 +77,80 @@ const Bounty: React.FC = () => {
    }
  };

-  useEffect(() => {
-    fetchBounties();
-  }, [query, typeFilter, page]);
+  useEffect(() => { fetchBounties(); }, [query, typeFilter, page]);

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    setSearchParams({ q: searchInput, type: typeFilter, page: '1' });
  };
+  const setPage = (p: number) => setSearchParams({ q: query, type: typeFilter, page: p.toString() });
+  const setType = (t: string) => setSearchParams({ q: query, type: t, page: '1' });

-  const setPage = (p: number) => {
-    setSearchParams({ q: query, type: typeFilter, page: p.toString() });
-  };
+  const totalPages = Math.max(1, Math.ceil(total / limit));

-  const setType = (t: string) => {
-    setSearchParams({ q: query, type: t, page: '1' });
-  };
+  const credCount = bounties.filter(b => b.bounty_type === 'credential').length;
+  const payCount = bounties.filter(b => b.bounty_type === 'payload').length;
+  const fpCount = bounties.filter(b => b.bounty_type === 'fingerprint').length;

-  const totalPages = Math.ceil(total / limit);
+  const SEGMENTS: [string, string][] = [
+    ['', 'ALL'],
+    ['credential', 'CREDENTIALS'],
+    ['payload', 'PAYLOADS'],
+    ['fingerprint', 'FINGERPRINTS'],
+  ];

  return (
-    <div className="dashboard">
-      {/* Page Header */}
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-          <Archive size={32} className="violet-accent" />
-          <h1 style={{ fontSize: '1.5rem', letterSpacing: '4px' }}>BOUNTY VAULT</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={typeFilter} 
-              onChange={(e) => setType(e.target.value)}
-              style={{ background: 'transparent', border: 'none', color: 'inherit', fontSize: '0.8rem', outline: 'none' }}
-            >
-              <option value="">ALL TYPES</option>
-              <option value="credential">CREDENTIALS</option>
-              <option value="fingerprint">FINGERPRINTS</option>
-              <option value="payload">PAYLOADS</option>
-            </select>
+    <div className="bounty-root">
+      <div className="page-header">
+        <div className="page-title-group">
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <Archive size={22} className="violet-accent" />
+            <h1>BOUNTY VAULT</h1>
          </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 bounty..." 
-              value={searchInput}
-              onChange={(e) => setSearchInput(e.target.value)}
-              style={{ background: 'transparent', border: 'none', padding: '4px', fontSize: '0.8rem', width: '200px' }}
-            />
-          </form>
+          <span className="page-sub">
+            {total.toLocaleString()} ARTIFACTS · {credCount} CREDENTIALS · {payCount} PAYLOADS · {fpCount} FINGERPRINTS
+          </span>
        </div>
      </div>

-      <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} ARTIFACTS CAPTURED</span>
-          </div>
+      <form className="controls-row" onSubmit={handleSearch}>
+        <div className="search-container">
+          <Search size={14} className="search-icon" />
+          <input
+            type="text"
+            placeholder="Filter by IP, decky, payload..."
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+          />
+        </div>
+        <div className="seg-group" role="tablist">
+          {SEGMENTS.map(([v, l]) => (
+            <button
+              key={v || 'all'}
+              type="button"
+              className={typeFilter === v ? 'active' : ''}
+              onClick={() => setType(v)}
+            >
+              {l}
+            </button>
+          ))}
+        </div>
+      </form>

-          <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} />
+      <div className="logs-section">
+        <div className="section-header">
+          <div className="section-title">
+            <Filter size={14} />
+            <span>{total.toLocaleString()} ARTIFACTS CAPTURED</span>
+          </div>
+          <div className="section-actions">
+            <div className="pager">
+              <span className="dim">Page {page} of {totalPages}</span>
+              <button disabled={page <= 1} onClick={() => setPage(page - 1)} aria-label="Previous page">
+                <ChevronLeft size={14} />
              </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 disabled={page >= totalPages} onClick={() => setPage(page + 1)} aria-label="Next page">
+                <ChevronRight size={14} />
              </button>
            </div>
          </div>
@@ -246,52 +160,72 @@ const Bounty: React.FC = () => {
          <table className="logs-table">
            <thead>
              <tr>
-                <th>TIMESTAMP</th>
+                <th>TIME</th>
                <th>DECKY</th>
-                <th>SERVICE</th>
+                <th>SVC</th>
                <th>ATTACKER</th>
                <th>TYPE</th>
                <th>DATA</th>
+                <th></th>
              </tr>
            </thead>
            <tbody>
-              {bounties.length > 0 ? bounties.map((b) => (
-                <tr key={b.id}>
-                  <td className="dim" style={{ fontSize: '0.75rem', whiteSpace: 'nowrap' }}>{new Date(b.timestamp).toLocaleString()}</td>
-                  <td className="violet-accent">{b.decky}</td>
-                  <td>{b.service}</td>
-                  <td className="matrix-text">{b.attacker_ip}</td>
-                  <td>
-                    <span style={{ 
-                      fontSize: '0.7rem', 
-                      padding: '2px 8px', 
-                      borderRadius: '4px', 
-                      border: `1px solid ${b.bounty_type === 'credential' ? 'var(--text-color)' : 'var(--accent-color)'}`,
-                      backgroundColor: b.bounty_type === 'credential' ? 'rgba(0, 255, 65, 0.1)' : 'rgba(238, 130, 238, 0.1)',
-                      color: b.bounty_type === 'credential' ? 'var(--text-color)' : 'var(--accent-color)'
-                    }}>
-                      {b.bounty_type.toUpperCase()}
-                    </span>
-                  </td>
-                  <td>
-                    <div style={{ fontSize: '0.9rem' }}>
-                      {b.bounty_type === 'credential' ? (
-                        <div style={{ display: 'flex', gap: '12px' }}>
-                          <span><span className="dim" style={{ marginRight: '4px' }}>user:</span>{b.payload.username}</span>
-                          <span><span className="dim" style={{ marginRight: '4px' }}>pass:</span>{b.payload.password}</span>
+              {bounties.length > 0 ? bounties.map(b => {
+                const isCred = b.bounty_type === 'credential';
+                const isFp = b.bounty_type === 'fingerprint';
+                const Icon = isCred ? Key : Package;
+                return (
+                  <tr key={b.id} className="clickable" onClick={() => setSelected(b)}>
+                    <td className="dim" style={{ fontSize: '0.72rem', whiteSpace: 'nowrap' }}>
+                      {new Date(b.timestamp).toLocaleTimeString()}
+                    </td>
+                    <td className="violet-accent">{b.decky}</td>
+                    <td><span className="chip dim-chip">{b.service}</span></td>
+                    <td>
+                      <span
+                        className="matrix-text attacker-link"
+                        onClick={(e) => { e.stopPropagation(); navigate(`/attackers?q=${encodeURIComponent(b.attacker_ip)}`); }}
+                      >
+                        {b.attacker_ip}
+                      </span>
+                    </td>
+                    <td>
+                      <span className={`chip ${isCred ? 'matrix' : 'violet'}`}>
+                        <Icon size={9} style={{ marginRight: 4 }} />
+                        {b.bounty_type.toUpperCase()}
+                      </span>
+                    </td>
+                    <td>
+                      {isCred ? (
+                        <div className="cred-inline">
+                          <span><span className="k-small">user:</span>{b.payload?.username ?? '—'}</span>
+                          <span>
+                            <span className="k-small">pass:</span>
+                            <span className="matrix-text">{b.payload?.password ?? '—'}</span>
+                          </span>
                        </div>
-                      ) : b.bounty_type === 'fingerprint' ? (
-                        <FingerprintPayload payload={b.payload} />
+                      ) : isFp ? (
+                        <FingerprintPreview payload={b.payload} />
                      ) : (
-                        <span className="dim" style={{ fontSize: '0.8rem' }}>{JSON.stringify(b.payload)}</span>
+                        <span className="data-preview">
+                          {b.payload?.query || b.payload?.body || b.payload?.command || JSON.stringify(b.payload)}
+                        </span>
                      )}
-                    </div>
-                  </td>
-                </tr>
-              )) : (
+                    </td>
+                    <td style={{ textAlign: 'right', opacity: 0.4 }}>
+                      <ChevR size={14} />
+                    </td>
+                  </tr>
+                );
+              }) : (
                <tr>
-                  <td colSpan={6} style={{ textAlign: 'center', padding: '60px', opacity: 0.5, letterSpacing: '4px' }}>
-                    {loading ? 'RETRIEVING ARTIFACTS...' : 'THE VAULT IS EMPTY'}
+                  <td colSpan={7}>
+                    <div className="empty-state">
+                      <ArchiveX size={30} />
+                      <span className="type-label">
+                        {loading ? 'RETRIEVING ARTIFACTS...' : 'THE VAULT IS EMPTY'}
+                      </span>
+                    </div>
                  </td>
                </tr>
              )}
@@ -299,6 +233,17 @@ const Bounty: React.FC = () => {
          </table>
        </div>
      </div>
+
+      {selected && (
+        <BountyInspector
+          bounty={selected}
+          onClose={() => setSelected(null)}
+          onSelectAttacker={(ip) => {
+            setSelected(null);
+            navigate(`/attackers?q=${encodeURIComponent(ip)}`);
+          }}
+        />
+      )}
    </div>
  );
 };
--- a/decnet_web/src/components/BountyInspector.tsx
+++ b/decnet_web/src/components/BountyInspector.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { X, Key, Package, Copy, Send, Ban } from 'lucide-react';
+import { useToast } from './Toasts/useToast';
+
+interface BountyEntry {
+  id: number;
+  timestamp: string;
+  decky: string;
+  service: string;
+  attacker_ip: string;
+  bounty_type: string;
+  payload: any;
+}
+
+interface Props {
+  bounty: BountyEntry;
+  onClose: () => void;
+  onSelectAttacker: (ip: string) => void;
+}
+
+const BountyInspector: React.FC<Props> = ({ bounty, onClose, onSelectAttacker }) => {
+  const { push } = useToast();
+  const isCred = bounty.bounty_type === 'credential';
+  const Icon = isCred ? Key : Package;
+  const p = bounty.payload || {};
+
+  const copyJson = async () => {
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(bounty, null, 2));
+      push({ text: 'JSON COPIED', tone: 'matrix', icon: 'copy' });
+    } catch {
+      push({ text: 'CLIPBOARD BLOCKED', tone: 'alert', icon: 'alert-triangle' });
+    }
+  };
+
+  const stubMisp = () => push({ text: 'MISP NOT CONFIGURED', tone: 'violet', icon: 'info' });
+  const stubBlocklist = () => push({ text: 'BLOCKLIST NOT WIRED', tone: 'violet', icon: 'info' });
+
+  return (
+    <div className="bounty-drawer-backdrop" onClick={onClose}>
+      <div className="bounty-drawer" onClick={(e) => e.stopPropagation()}>
+        <div className="bd-head">
+          <h3>
+            <Icon size={14} />
+            <span>ARTIFACT #{bounty.id}</span>
+          </h3>
+          <button className="close-btn" onClick={onClose} aria-label="Close">
+            <X size={16} />
+          </button>
+        </div>
+        <div className="bd-body">
+          <div className="kvs">
+            <div className="k">TYPE</div>
+            <div className="v">
+              <span className={`chip ${isCred ? 'matrix' : 'violet'}`}>{bounty.bounty_type.toUpperCase()}</span>
+            </div>
+            <div className="k">TIMESTAMP</div>
+            <div className="v">{new Date(bounty.timestamp).toLocaleString()}</div>
+            <div className="k">DECKY</div>
+            <div className="v violet-accent">{bounty.decky}</div>
+            <div className="k">SERVICE</div>
+            <div className="v"><span className="chip dim-chip">{bounty.service}</span></div>
+            <div className="k">ATTACKER</div>
+            <div className="v">
+              <span
+                className="attacker-link"
+                onClick={() => onSelectAttacker(bounty.attacker_ip)}
+              >
+                {bounty.attacker_ip}
+              </span>
+            </div>
+          </div>
+
+          <div>
+            <div className="type-label">{isCred ? 'CAPTURED CREDENTIAL' : 'CAPTURED PAYLOAD'}</div>
+            {isCred ? (
+              <pre className="code-block">
+                <span className="ck">username:</span> <span className="cs">{p.username}</span>{'\n'}
+                <span className="ck">password:</span> <span className="cs">{p.password}</span>
+              </pre>
+            ) : (
+              <pre className="code-block">{JSON.stringify(p, null, 2)}</pre>
+            )}
+          </div>
+
+          <div>
+            <div className="type-label">EXPORT</div>
+            <div className="bd-actions">
+              <button className="btn ghost" onClick={copyJson}><Copy size={12} /> COPY JSON</button>
+              <button className="btn ghost" onClick={stubMisp}><Send size={12} /> SEND TO MISP</button>
+              <button className="btn ghost" onClick={stubBlocklist}><Ban size={12} /> BLOCKLIST IP</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BountyInspector;
--- a/decnet_web/src/components/LiveLogs.css
+++ b/decnet_web/src/components/LiveLogs.css
@@ -0,0 +1,182 @@
+.logs-root {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Button system (mirrors DeckyFleet.css scoping) */
+.logs-root .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  font-family: inherit;
+  font-size: 0.72rem;
+  letter-spacing: 2px;
+  background: transparent;
+  border: 1px solid var(--matrix);
+  color: var(--matrix);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.logs-root .btn:hover {
+  background: var(--matrix);
+  color: #000;
+  box-shadow: var(--matrix-glow);
+}
+.logs-root .btn.violet { border-color: var(--violet); color: var(--violet); }
+.logs-root .btn.violet:hover { background: var(--violet); color: #000; box-shadow: var(--violet-glow); }
+.logs-root .btn.ghost { border-color: var(--border); color: var(--matrix); opacity: 0.7; }
+.logs-root .btn.ghost:hover { opacity: 1; border-color: var(--matrix); background: transparent; box-shadow: var(--matrix-glow); }
+.logs-root .btn:disabled { opacity: 0.3; cursor: not-allowed; }
+
+/* Control row */
+.logs-root .logs-controls {
+  display: flex;
+  gap: 12px;
+  align-items: stretch;
+}
+.logs-root .logs-controls .search-container { flex: 1; max-width: none; }
+.logs-root .time-select {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  color: var(--matrix);
+  padding: 8px 14px;
+  font-family: inherit;
+  font-size: 0.72rem;
+  letter-spacing: 2px;
+  cursor: pointer;
+}
+.logs-root .time-select:focus { outline: none; border-color: var(--accent); }
+
+/* Histogram */
+.logs-root .histogram-wrap {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  padding: 14px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.logs-root .histogram-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.65rem;
+  letter-spacing: 1.5px;
+  opacity: 0.75;
+}
+.logs-root .histogram-header .violet-accent {
+  color: var(--violet);
+  opacity: 1;
+}
+.logs-root .histogram-header .clear-sel {
+  cursor: pointer;
+  text-decoration: underline;
+  margin-left: 4px;
+}
+.logs-root .histogram {
+  display: flex;
+  align-items: flex-end;
+  gap: 3px;
+  height: 80px;
+}
+.logs-root .histogram .bar {
+  flex: 1;
+  min-height: 2px;
+  background: var(--accent);
+  opacity: 0.4;
+  cursor: pointer;
+  transition: opacity 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
+}
+.logs-root .histogram .bar:hover { opacity: 0.8; }
+.logs-root .histogram .bar.selected {
+  background: var(--violet);
+  opacity: 1;
+  box-shadow: var(--violet-glow);
+}
+.logs-root .histogram .bar.has-bounty { background: #ffaa00; opacity: 0.7; }
+.logs-root .histogram .bar.has-bounty.selected { background: var(--violet); }
+.logs-root .histogram-axis {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.6rem;
+  opacity: 0.5;
+  letter-spacing: 1px;
+}
+
+/* Table tweaks */
+.logs-root .logs-table td.t-time { font-size: 0.72rem; opacity: 0.55; white-space: nowrap; }
+.logs-root .logs-table td.t-decky { color: var(--violet); }
+.logs-root .logs-table td.t-svc { color: var(--matrix); }
+.logs-root .logs-table td.t-event .event-head {
+  font-weight: 700;
+  color: var(--matrix);
+  font-size: 0.85rem;
+}
+.logs-root .logs-table td.t-event .event-tail { font-weight: normal; opacity: 0.75; }
+.logs-root .logs-table td.t-event .badges {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 6px;
+}
+.logs-root .field-badge {
+  font-size: 0.68rem;
+  padding: 2px 8px;
+  border-radius: 3px;
+  background: var(--matrix-tint-10);
+  border: 1px solid var(--matrix-tint-30);
+  word-break: break-all;
+}
+.logs-root .field-badge .k { opacity: 0.6; margin-right: 4px; }
+.logs-root .artifact-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.68rem;
+  padding: 2px 8px;
+  border-radius: 3px;
+  background: rgba(255, 170, 0, 0.1);
+  border: 1px solid rgba(255, 170, 0, 0.5);
+  color: #ffaa00;
+  cursor: pointer;
+  font-family: inherit;
+}
+.logs-root .artifact-btn:hover {
+  background: rgba(255, 170, 0, 0.2);
+  box-shadow: 0 0 8px rgba(255, 170, 0, 0.4);
+}
+
+/* Empty state */
+.logs-root .empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 40px 20px;
+  opacity: 0.45;
+}
+.logs-root .empty-state .type-label {
+  font-size: 0.7rem;
+  letter-spacing: 2px;
+}
+
+/* Pagination */
+.logs-root .pager {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 0.7rem;
+}
+.logs-root .pager button {
+  padding: 4px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--matrix);
+  display: flex;
+  cursor: pointer;
+}
+.logs-root .pager button:disabled { opacity: 0.3; cursor: not-allowed; }
+.logs-root .pager button:hover:not(:disabled) { border-color: var(--accent); }
--- a/decnet_web/src/components/LiveLogs.tsx
+++ b/decnet_web/src/components/LiveLogs.tsx
@@ -1,16 +1,14 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import {
-  Terminal, Search, Activity,
-  ChevronLeft, ChevronRight, Play, Pause, Paperclip
+  Terminal, Search, BarChart3, ChevronLeft, ChevronRight,
+  Play, Pause, Paperclip, Download, SearchX, X as XIcon,
 } from 'lucide-react';
-import {
-  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell
-} from 'recharts';
 import api from '../utils/api';
 import { parseEventBody } from '../utils/parseEventBody';
 import ArtifactDrawer from './ArtifactDrawer';
 import './Dashboard.css';
+import './LiveLogs.css';

 interface LogEntry {
  id: number;
@@ -22,93 +20,64 @@ interface LogEntry {
  raw_line: string;
  fields: string;
  msg: string;
+  is_bounty?: boolean;
 }

-interface HistogramData {
-  time: string;
-  count: number;
-}
+const LIMIT = 50;

 const LiveLogs: React.FC = () => {
  const [searchParams, setSearchParams] = useSearchParams();

-  // URL-synced state
  const query = searchParams.get('q') || '';
  const timeRange = searchParams.get('time') || '1h';
  const isLive = searchParams.get('live') !== 'false';
  const page = parseInt(searchParams.get('page') || '1');

-  // Local state
  const [logs, setLogs] = useState<LogEntry[]>([]);
-  const [histogram, setHistogram] = useState<HistogramData[]>([]);
  const [totalLogs, setTotalLogs] = useState(0);
  const [loading, setLoading] = useState(true);
  const [streaming, setStreaming] = useState(isLive);
  const [searchInput, setSearchInput] = useState(query);
+  const [selectedHour, setSelectedHour] = useState<number | null>(null);

  const eventSourceRef = useRef<EventSource | null>(null);
-  const limit = 50;

-  // Open artifact drawer when a log row with stored_as is clicked.
  const [artifact, setArtifact] = useState<{ decky: string; storedAs: string; fields: Record<string, any> } | null>(null);

-  // Sync search input if URL changes (e.g. back button)
-  useEffect(() => {
-    setSearchInput(query);
-  }, [query]);
+  useEffect(() => { setSearchInput(query); }, [query]);
+
+  const startTimeParam = (): string | null => {
+    if (timeRange === 'all') return null;
+    const minutes = timeRange === '15m' ? 15 : timeRange === '1h' ? 60 : timeRange === '24h' ? 1440 : 0;
+    if (!minutes) return null;
+    return new Date(Date.now() - minutes * 60000).toISOString().replace('T', ' ').substring(0, 19);
+  };

  const fetchData = async () => {
-    if (streaming) return; // Don't fetch historical if streaming
-    
    setLoading(true);
    try {
-      const offset = (page - 1) * limit;
-      let url = `/logs?limit=${limit}&offset=${offset}&search=${encodeURIComponent(query)}`;
-      
-      // Calculate time bounds for historical fetch
-      const now = new Date();
-      let startTime: string | null = null;
-      if (timeRange !== 'all') {
-        const minutes = timeRange === '15m' ? 15 : timeRange === '1h' ? 60 : timeRange === '24h' ? 1440 : 0;
-        if (minutes > 0) {
-          startTime = new Date(now.getTime() - minutes * 60000).toISOString().replace('T', ' ').substring(0, 19);
-          url += `&start_time=${startTime}`;
-        }
-      }
-
+      const offset = (page - 1) * LIMIT;
+      let url = `/logs?limit=${LIMIT}&offset=${offset}&search=${encodeURIComponent(query)}`;
+      const startTime = startTimeParam();
+      if (startTime) url += `&start_time=${startTime}`;
      const res = await api.get(url);
      setLogs(res.data.data);
      setTotalLogs(res.data.total);
-
-      // Fetch histogram for historical view
-      let histUrl = `/logs/histogram?search=${encodeURIComponent(query)}`;
-      if (startTime) histUrl += `&start_time=${startTime}`;
-      const histRes = await api.get(histUrl);
-      setHistogram(histRes.data);
-
    } catch (err) {
-      console.error('Failed to fetch historical logs', err);
+      console.error('Failed to fetch logs', err);
    } finally {
      setLoading(false);
    }
  };

  const setupSSE = () => {
-    if (eventSourceRef.current) {
-      eventSourceRef.current.close();
-    }
+    if (eventSourceRef.current) eventSourceRef.current.close();

    const token = localStorage.getItem('token');
    const baseUrl = import.meta.env.VITE_API_URL || 'http://localhost:8000/api/v1';
    let url = `${baseUrl}/stream?token=${token}&search=${encodeURIComponent(query)}`;
-    
-    if (timeRange !== 'all') {
-      const minutes = timeRange === '15m' ? 15 : timeRange === '1h' ? 60 : timeRange === '24h' ? 1440 : 0;
-      if (minutes > 0) {
-        const startTime = new Date(Date.now() - minutes * 60000).toISOString().replace('T', ' ').substring(0, 19);
-        url += `&start_time=${startTime}`;
-      }
-    }
+    const startTime = startTimeParam();
+    if (startTime) url += `&start_time=${startTime}`;

    const es = new EventSource(url);
    eventSourceRef.current = es;
@@ -118,8 +87,6 @@ const LiveLogs: React.FC = () => {
        const payload = JSON.parse(event.data);
        if (payload.type === 'logs') {
          setLogs(prev => [...payload.data, ...prev].slice(0, 500));
-        } else if (payload.type === 'histogram') {
-          setHistogram(payload.data);
        } else if (payload.type === 'stats') {
          setTotalLogs(payload.data.total_logs);
        }
@@ -128,29 +95,29 @@ const LiveLogs: React.FC = () => {
      }
    };

-    es.onerror = () => {
-      console.error('SSE connection lost, reconnecting...');
-    };
+    es.onerror = () => console.error('SSE connection lost, reconnecting...');
  };

+  // Always seed with REST backlog on mount / filter changes.
+  useEffect(() => {
+    fetchData();
+  }, [query, timeRange, page]);
+
+  // SSE follows the streaming toggle independently.
  useEffect(() => {
    if (streaming) {
      setupSSE();
-      setLoading(false);
-    } else {
+    } else if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+      eventSourceRef.current = null;
+    }
+    return () => {
      if (eventSourceRef.current) {
        eventSourceRef.current.close();
        eventSourceRef.current = null;
      }
-      fetchData();
-    }
-
-    return () => {
-      if (eventSourceRef.current) {
-        eventSourceRef.current.close();
-      }
    };
-  }, [query, timeRange, streaming, page]);
+  }, [streaming, query, timeRange]);

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
@@ -171,135 +138,165 @@ const LiveLogs: React.FC = () => {
    setSearchParams({ q: query, time: timeRange, live: 'false', page: newPage.toString() });
  };

+  const buckets = useMemo(() => {
+    const b = Array.from({ length: 24 }, (_, i) => ({ i, count: 0, bounties: 0 }));
+    logs.forEach(l => {
+      const h = parseInt(String(l.timestamp).slice(11, 13), 10);
+      if (!isNaN(h) && h >= 0 && h < 24) {
+        b[h].count++;
+        if (l.is_bounty) b[h].bounties++;
+      }
+    });
+    return b;
+  }, [logs]);
+  const maxBar = Math.max(...buckets.map(b => b.count), 1);
+  const peakHour = buckets.findIndex(b => b.count === maxBar);
+
+  const filteredLogs = useMemo(() => {
+    if (selectedHour == null) return logs;
+    return logs.filter(l => parseInt(String(l.timestamp).slice(11, 13), 10) === selectedHour);
+  }, [logs, selectedHour]);
+
+  const handleExport = () => {
+    const header = 'timestamp,decky,service,attacker_ip,event_type,msg';
+    const rows = filteredLogs.map(l =>
+      [l.timestamp, l.decky, l.service, l.attacker_ip, l.event_type, (l.msg || '').replace(/"/g, '""')]
+        .map(v => `"${v ?? ''}"`).join(',')
+    );
+    const blob = new Blob([[header, ...rows].join('\n')], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `decnet-logs-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const totalPages = Math.max(1, Math.ceil(totalLogs / LIMIT));
+
  return (
-    <div className="dashboard">
-      {/* Control Bar */}
-      <div className="logs-section" style={{ border: 'none', background: 'transparent', padding: 0 }}>
-        <form onSubmit={handleSearch} style={{ display: 'flex', gap: '16px', marginBottom: '24px' }}>
-          <div className="search-container" style={{ flexGrow: 1, maxWidth: 'none' }}>
-            <Search className="search-icon" size={18} />
-            <input 
-              type="text" 
-              placeholder="Query logs (e.g. decky:decky-01 service:http attacker:192.168.1.5 status:failed)" 
-              value={searchInput}
-              onChange={(e) => setSearchInput(e.target.value)}
-            />
-          </div>
-          <select 
-            value={timeRange} 
-            onChange={(e) => handleTimeChange(e.target.value)}
-            className="search-container"
-            style={{ width: 'auto', color: 'var(--text-color)', cursor: 'pointer' }}
-          >
-            <option value="15m">LAST 15 MIN</option>
-            <option value="1h">LAST 1 HOUR</option>
-            <option value="24h">LAST 24 HOURS</option>
-            <option value="all">ALL TIME</option>
-          </select>
-          <button 
-            type="button"
-            onClick={handleToggleLive}
-            style={{ 
-              display: 'flex', alignItems: 'center', gap: '8px', 
-              border: `1px solid ${streaming ? 'var(--text-color)' : 'var(--accent-color)'}`,
-              color: streaming ? 'var(--text-color)' : 'var(--accent-color)',
-              minWidth: '120px', justifyContent: 'center'
-            }}
-          >
-            {streaming ? <><Play size={14} className="neon-blink" /> LIVE</> : <><Pause size={14} /> PAUSED</>}
-          </button>
-        </form>
-      </div>
-
-      {/* Histogram Chart */}
-      <div className="logs-section" style={{ height: '200px', padding: '20px', marginBottom: '24px', minWidth: 0 }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.7rem', color: 'var(--dim-color)' }}>
-            <Activity size={12} /> ATTACK VOLUME OVER TIME
-          </div>
-          <div style={{ fontSize: '0.7rem', color: 'var(--text-color)' }}>
-            MATCHES: {totalLogs.toLocaleString()}
-          </div>
+    <div className="logs-root">
+      <div className="page-header">
+        <div className="page-title-group">
+          <h1>LOGS</h1>
+          <span className="page-sub">
+            {filteredLogs.length.toLocaleString()} SHOWN · {totalLogs.toLocaleString()} MATCHES · STREAM {streaming ? 'LIVE' : 'PAUSED'}
+          </span>
+        </div>
+        <div className="actions">
+          <button className={`btn ${streaming ? '' : 'violet'}`} onClick={handleToggleLive}>
+            {streaming
+              ? <><Pause size={12} className="fx-blink" /> PAUSE</>
+              : <><Play size={12} /> GO LIVE</>}
+          </button>
+          <button className="btn ghost" onClick={handleExport} disabled={filteredLogs.length === 0}>
+            <Download size={12} /> EXPORT
+          </button>
        </div>
-        <ResponsiveContainer width="100%" height="100%">
-          <BarChart data={histogram}>
-            <CartesianGrid strokeDasharray="3 3" stroke="#30363d" vertical={false} />
-            <XAxis 
-              dataKey="time" 
-              hide 
-            />
-            <YAxis 
-              stroke="#30363d" 
-              fontSize={10} 
-              tickFormatter={(val) => Math.floor(val).toString()}
-            />
-            <Tooltip 
-              contentStyle={{ backgroundColor: '#0d1117', border: '1px solid #30363d', fontSize: '0.8rem' }}
-              itemStyle={{ color: 'var(--text-color)' }}
-              labelStyle={{ color: 'var(--dim-color)', marginBottom: '4px' }}
-              cursor={{ fill: 'rgba(0, 255, 65, 0.05)' }}
-            />
-            <Bar dataKey="count" fill="var(--text-color)" radius={[2, 2, 0, 0]}>
-              {histogram.map((entry, index) => (
-                <Cell key={`cell-${index}`} fillOpacity={0.6 + (entry.count / (Math.max(...histogram.map(h => h.count)) || 1)) * 0.4} />
-              ))}
-            </Bar>
-          </BarChart>
-        </ResponsiveContainer>
      </div>

-      {/* Logs Table */}
-      <div className="logs-section">
-        <div className="section-header" style={{ display: 'flex', justifyContent: 'space-between' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <Terminal size={20} />
-            <h2>LOG EXPLORER</h2>
-          </div>
-          {!streaming && (
-            <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-              <span className="dim" style={{ fontSize: '0.8rem' }}>
-                Page {page} of {Math.ceil(totalLogs / limit)}
-              </span>
-              <div style={{ display: 'flex', gap: '8px' }}>
-                <button 
-                  disabled={page === 1} 
-                  onClick={() => changePage(page - 1)}
-                  style={{ padding: '4px', border: '1px solid var(--border-color)', opacity: page === 1 ? 0.3 : 1 }}
-                >
-                  <ChevronLeft size={16} />
-                </button>
-                <button 
-                  disabled={page >= Math.ceil(totalLogs / limit)} 
-                  onClick={() => changePage(page + 1)}
-                  style={{ padding: '4px', border: '1px solid var(--border-color)', opacity: page >= Math.ceil(totalLogs / limit) ? 0.3 : 1 }}
-                >
-                  <ChevronRight size={16} />
-                </button>
-              </div>
-            </div>
+      <form className="logs-controls" onSubmit={handleSearch}>
+        <div className="search-container">
+          <Search size={14} className="search-icon" />
+          <input
+            type="text"
+            placeholder="Query (e.g. decky:decky-03 service:ssh attacker:89.248)"
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+          />
+          {searchInput && (
+            <button
+              type="button"
+              className="close-btn"
+              onClick={() => { setSearchInput(''); setSearchParams({ q: '', time: timeRange, live: streaming.toString(), page: '1' }); }}
+              style={{ background: 'transparent', border: 'none', color: 'inherit', cursor: 'pointer', padding: 0, display: 'flex' }}
+              aria-label="Clear search"
+            >
+              <XIcon size={12} />
+            </button>
          )}
        </div>
+        <select
+          className="time-select"
+          value={timeRange}
+          onChange={(e) => handleTimeChange(e.target.value)}
+        >
+          <option value="15m">LAST 15 MIN</option>
+          <option value="1h">LAST 1 HOUR</option>
+          <option value="24h">LAST 24 HOURS</option>
+          <option value="all">ALL TIME</option>
+        </select>
+      </form>

-        <div className="logs-table-container">
+      <div className="histogram-wrap">
+        <div className="histogram-header">
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <BarChart3 size={12} />
+            <span>ATTACK VOLUME — PAST 24 HOURS</span>
+            {selectedHour != null && (
+              <span className="violet-accent" style={{ marginLeft: 8 }}>
+                · {String(selectedHour).padStart(2, '0')}:00 SELECTED —
+                <span className="clear-sel" onClick={() => setSelectedHour(null)}>clear</span>
+              </span>
+            )}
+          </div>
+          <span>PEAK: {maxBar} @ HOUR {String(peakHour).padStart(2, '0')}</span>
+        </div>
+        <div className="histogram">
+          {buckets.map(b => (
+            <div
+              key={b.i}
+              className={`bar ${selectedHour === b.i ? 'selected' : ''} ${b.bounties > 0 ? 'has-bounty' : ''}`}
+              style={{ height: `${(b.count / maxBar) * 100}%` }}
+              title={`${String(b.i).padStart(2, '0')}:00 — ${b.count} events${b.bounties ? `, ${b.bounties} bounties` : ''}`}
+              onClick={() => setSelectedHour(selectedHour === b.i ? null : b.i)}
+            />
+          ))}
+        </div>
+        <div className="histogram-axis">
+          <span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>23:59</span>
+        </div>
+      </div>
+
+      <div className="logs-section">
+        <div className="section-header">
+          <div className="section-title">
+            <Terminal size={14} />
+            <span>LOG EXPLORER</span>
+          </div>
+          <div className="section-actions">
+            <span>SHOWING {filteredLogs.length} OF {totalLogs.toLocaleString()}</span>
+            {!streaming && (
+              <div className="pager" style={{ marginLeft: 16 }}>
+                <span className="dim">Page {page} of {totalPages}</span>
+                <button disabled={page === 1} onClick={() => changePage(page - 1)} aria-label="Previous page">
+                  <ChevronLeft size={14} />
+                </button>
+                <button disabled={page >= totalPages} onClick={() => changePage(page + 1)} aria-label="Next page">
+                  <ChevronRight size={14} />
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="logs-table-container" style={{ maxHeight: 520 }}>
          <table className="logs-table">
            <thead>
              <tr>
-                <th>TIMESTAMP</th>
+                <th>TIME</th>
                <th>DECKY</th>
-                <th>SERVICE</th>
+                <th>SVC</th>
                <th>ATTACKER</th>
                <th>EVENT</th>
              </tr>
            </thead>
            <tbody>
-              {logs.length > 0 ? logs.map(log => {
+              {filteredLogs.length > 0 ? filteredLogs.map(log => {
                let parsedFields: Record<string, any> = {};
                if (log.fields) {
-                  try {
-                    parsedFields = JSON.parse(log.fields);
-                  } catch (e) {}
+                  try { parsedFields = JSON.parse(log.fields); } catch { /* noop */ }
                }
-
                let msgHead: string | null = null;
                let msgTail: string | null = null;
                if (Object.keys(parsedFields).length === 0) {
@@ -310,75 +307,62 @@ const LiveLogs: React.FC = () => {
                } else if (log.msg && log.msg !== '-') {
                  msgTail = log.msg;
                }
+                const et = log.event_type && log.event_type !== '-' ? log.event_type : null;
+                const headParts = [et, msgHead].filter(Boolean) as string[];
+                const hasBadges = Object.keys(parsedFields).length > 0 || parsedFields.stored_as;

                return (
                  <tr key={log.id}>
-                    <td className="dim" style={{ fontSize: '0.75rem', whiteSpace: 'nowrap' }}>{new Date(log.timestamp).toLocaleString()}</td>
-                    <td className="violet-accent">{log.decky}</td>
-                    <td className="matrix-text">{log.service}</td>
+                    <td className="t-time">{new Date(log.timestamp).toLocaleString()}</td>
+                    <td className="t-decky">{log.decky}</td>
+                    <td className="t-svc">{log.service}</td>
                    <td>{log.attacker_ip}</td>
-                    <td>
-                      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                        <div style={{ fontWeight: 'bold', color: 'var(--text-color)', fontSize: '0.9rem' }}>
-                          {(() => {
-                            const et = log.event_type && log.event_type !== '-' ? log.event_type : null;
-                            const parts = [et, msgHead].filter(Boolean) as string[];
-                            return (
-                              <>
-                                {parts.join(' · ')}
-                                {msgTail && <span style={{ fontWeight: 'normal', opacity: 0.8 }}>{parts.length ? ' — ' : ''}{msgTail}</span>}
-                              </>
-                            );
-                          })()}
-                        </div>
-                        {(Object.keys(parsedFields).length > 0 || parsedFields.stored_as) && (
-                          <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-                            {parsedFields.stored_as && (
-                              <button
-                                onClick={() => setArtifact({
-                                  decky: log.decky,
-                                  storedAs: String(parsedFields.stored_as),
-                                  fields: parsedFields,
-                                })}
-                                title="Inspect captured artifact"
-                                style={{
-                                  display: 'flex', alignItems: 'center', gap: '6px',
-                                  fontSize: '0.7rem',
-                                  backgroundColor: 'rgba(255, 170, 0, 0.1)',
-                                  padding: '2px 8px',
-                                  borderRadius: '4px',
-                                  border: '1px solid rgba(255, 170, 0, 0.5)',
-                                  color: '#ffaa00',
-                                  cursor: 'pointer',
-                                }}
-                              >
-                                <Paperclip size={11} /> ARTIFACT
-                              </button>
-                            )}
-                            {Object.entries(parsedFields)
-                              .filter(([k]) => k !== 'meta_json_b64')
-                              .map(([k, v]) => (
-                              <span key={k} style={{
-                                fontSize: '0.7rem',
-                                backgroundColor: 'rgba(0, 255, 65, 0.1)',
-                                padding: '2px 8px',
-                                borderRadius: '4px',
-                                border: '1px solid rgba(0, 255, 65, 0.3)',
-                                wordBreak: 'break-all'
-                              }}>
-                                <span style={{ opacity: 0.6 }}>{k}:</span> {typeof v === 'object' ? JSON.stringify(v) : v}
-                              </span>
-                            ))}
-                          </div>
+                    <td className="t-event">
+                      <div className="event-head">
+                        {headParts.join(' · ')}
+                        {msgTail && (
+                          <span className="event-tail">
+                            {headParts.length ? ' — ' : ''}{msgTail}
+                          </span>
                        )}
                      </div>
+                      {hasBadges && (
+                        <div className="badges">
+                          {parsedFields.stored_as && (
+                            <button
+                              className="artifact-btn"
+                              onClick={() => setArtifact({
+                                decky: log.decky,
+                                storedAs: String(parsedFields.stored_as),
+                                fields: parsedFields,
+                              })}
+                              title="Inspect captured artifact"
+                            >
+                              <Paperclip size={11} /> ARTIFACT
+                            </button>
+                          )}
+                          {Object.entries(parsedFields)
+                            .filter(([k]) => k !== 'meta_json_b64' && k !== 'stored_as')
+                            .map(([k, v]) => (
+                              <span key={k} className="field-badge">
+                                <span className="k">{k}:</span>
+                                {typeof v === 'object' ? JSON.stringify(v) : String(v)}
+                              </span>
+                            ))}
+                        </div>
+                      )}
                    </td>
                  </tr>
                );
              }) : (
                <tr>
-                  <td colSpan={5} style={{ textAlign: 'center', padding: '40px', opacity: 0.5 }}>
-                    {loading ? 'RETRIEVING DATA...' : 'NO LOGS MATCHING CRITERIA'}
+                  <td colSpan={5}>
+                    <div className="empty-state">
+                      <SearchX size={28} />
+                      <span className="type-label">
+                        {loading ? 'RETRIEVING DATA...' : 'NO LOGS MATCHING CRITERIA'}
+                      </span>
+                    </div>
                  </td>
                </tr>
              )}
@@ -386,6 +370,7 @@ const LiveLogs: React.FC = () => {
          </table>
        </div>
      </div>
+
      {artifact && (
        <ArtifactDrawer
          decky={artifact.decky}