merge: testing → main (reconcile 2-week divergence)

decnet_web/src/components/Bounty.tsx

@@ -1,8 +1,15 @@
-import React, { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { Archive, Search, ChevronLeft, ChevronRight, Filter } from 'lucide-react';
+import React, { useEffect, useRef, useState } from 'react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import {
+  Archive, Search, ChevronLeft, ChevronRight, Filter, Key, Package, ChevronRight as ChevR,
+  Target,
+} from '../icons';
 import api from '../utils/api';
+import BountyInspector from './BountyInspector';
+import EmptyState from './EmptyState/EmptyState';
+import { useFocusSearch } from '../hooks/useFocusSearch';
 import './Dashboard.css';
+import './Bounty.css';
 
 interface BountyEntry {
   id: number;
@@ -14,7 +21,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 FingerprintPreview: React.FC<{ payload: any }> = ({ payload }) => {
+  if (!payload || typeof payload !== 'object') {
+    return <span className="data-preview">{JSON.stringify(payload)}</span>;
+  }
+  const keys = Object.keys(payload);
+  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>;
+  }
+  return (
+    <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') || '';
@@ -24,7 +58,10 @@ const Bounty: React.FC = () => {
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(true);
   const [searchInput, setSearchInput] = useState(query);
-  
+  const searchRef = useRef<HTMLInputElement | null>(null);
+  useFocusSearch(searchRef);
+  const [selected, setSelected] = useState<BountyEntry | null>(null);
+
   const limit = 50;
 
   const fetchBounties = async () => {
@@ -34,7 +71,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);
@@ -45,85 +81,81 @@ 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="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>
 
+      <form className="controls-row" onSubmit={handleSearch}>
+        <div className="search-container">
+          <Search size={14} className="search-icon" />
+          <input
+            ref={searchRef}
+            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 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 className="section-header">
+          <div className="section-title">
+            <Filter size={14} />
+            <span>{total.toLocaleString()} ARTIFACTS CAPTURED</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} />
+          <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>
@@ -133,50 +165,71 @@ 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>
+                      ) : 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}>
+                    <EmptyState
+                      icon={Target}
+                      title={loading ? 'RETRIEVING ARTIFACTS…' : 'THE VAULT IS EMPTY'}
+                      hint={loading ? undefined : 'attacker-dropped artifacts will land here'}
+                    />
                   </td>
                 </tr>
               )}
@@ -184,6 +237,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>
   );
 };