feat(web): SMTP victim-domain + stored-mail panels on attacker detail

Adds GET /attackers/{uuid}/smtp-targets (viewer) and GET /attackers/{uuid}/mail
(admin) endpoints, plus two new sections on the attacker detail page:
VICTIM DOMAINS rollup (aggregate-only, federation-gossip-safe) and STORED MAIL
with a drawer that decodes headers, lists attachments, and downloads the raw
.eml via the existing artifact endpoint (?service=smtp).

decnet_web/src/components/AttackerDetail.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { Activity, ArrowLeft, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Crosshair, Fingerprint, Shield, Clock, Wifi, Lock, FileKey, Radio, Timer, Paperclip, Terminal, Package, FileText } from 'lucide-react';
+import { Activity, ArrowLeft, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Crosshair, Fingerprint, Shield, Clock, Wifi, Lock, FileKey, Radio, Timer, Paperclip, Terminal, Package, FileText, Mail, AtSign } from 'lucide-react';
 import api from '../utils/api';
 import ArtifactDrawer from './ArtifactDrawer';
+import MailDrawer from './MailDrawer';
 import SessionDrawer from './SessionDrawer';
 import EmptyState from './EmptyState/EmptyState';
 import './Dashboard.css';
@@ -710,6 +711,8 @@ const AttackerDetail: React.FC = () => {
     fingerprints: true,
     artifacts: true,
     sessions: true,
+    smtpTargets: true,
+    mail: true,
   });
 
   // Captured file-drop artifacts (ssh inotify farm) for this attacker.
@@ -733,6 +736,28 @@ const AttackerDetail: React.FC = () => {
   };
   const [sessions, setSessions] = useState<SessionLog[]>([]);
   const [session, setSession] = useState<{ decky: string; sid: string; fields: Record<string, any> } | null>(null);
+
+  // SMTP victim-domain rollup (viewer-safe: domains only, no local parts).
+  type SmtpTargetRow = {
+    domain: string;
+    count: number;
+    first_seen: string;
+    last_seen: string;
+  };
+  const [smtpTargets, setSmtpTargets] = useState<SmtpTargetRow[]>([]);
+
+  // Stored SMTP messages (admin-gated: full attacker-controlled bodies).
+  type MailLog = {
+    id: number;
+    timestamp: string;
+    decky: string;
+    service: string;
+    fields: string;
+  };
+  const [mail, setMail] = useState<MailLog[]>([]);
+  const [mailForbidden, setMailForbidden] = useState(false);
+  const [mailItem, setMailItem] = useState<{ decky: string; storedAs: string; fields: Record<string, any> } | null>(null);
+
   const toggle = (key: string) => setOpenSections((prev) => ({ ...prev, [key]: !prev[key] }));
 
   // Commands pagination state
@@ -799,6 +824,34 @@ const AttackerDetail: React.FC = () => {
     fetchArtifacts();
   }, [id]);
 
+  useEffect(() => {
+    if (!id) return;
+    const fetchSmtpTargets = async () => {
+      try {
+        const res = await api.get(`/attackers/${id}/smtp-targets`);
+        setSmtpTargets(res.data.data ?? []);
+      } catch {
+        setSmtpTargets([]);
+      }
+    };
+    fetchSmtpTargets();
+  }, [id]);
+
+  useEffect(() => {
+    if (!id) return;
+    const fetchMail = async () => {
+      try {
+        const res = await api.get(`/attackers/${id}/mail`);
+        setMail(res.data.data ?? []);
+        setMailForbidden(false);
+      } catch (err: any) {
+        setMail([]);
+        setMailForbidden(err?.response?.status === 403);
+      }
+    };
+    fetchMail();
+  }, [id]);
+
   useEffect(() => {
     if (!id) return;
     const fetchSessions = async () => {
@@ -1200,6 +1253,141 @@ const AttackerDetail: React.FC = () => {
         />
       )}
 
+      {/* SMTP Victim Domains (viewer-safe rollup) */}
+      <Section
+        title={<>SMTP VICTIM DOMAINS ({smtpTargets.length})</>}
+        open={openSections.smtpTargets}
+        onToggle={() => toggle('smtpTargets')}
+      >
+        {smtpTargets.length > 0 ? (
+          <div className="logs-table-container">
+            <table className="logs-table">
+              <thead>
+                <tr>
+                  <th>DOMAIN</th>
+                  <th>COUNT</th>
+                  <th>FIRST SEEN</th>
+                  <th>LAST SEEN</th>
+                </tr>
+              </thead>
+              <tbody>
+                {smtpTargets.map((row) => (
+                  <tr key={row.domain}>
+                    <td className="matrix-text" style={{ fontFamily: 'monospace', wordBreak: 'break-all' }}>
+                      {row.domain}
+                    </td>
+                    <td className="matrix-text" style={{ fontFamily: 'monospace' }}>
+                      {row.count}
+                    </td>
+                    <td className="dim" style={{ fontSize: '0.75rem', whiteSpace: 'nowrap' }}>
+                      {new Date(row.first_seen).toLocaleString()}
+                    </td>
+                    <td className="dim" style={{ fontSize: '0.75rem', whiteSpace: 'nowrap' }}>
+                      {new Date(row.last_seen).toLocaleString()}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <EmptyState
+            icon={AtSign}
+            title="NO SMTP VICTIMS OBSERVED"
+            size="compact"
+          />
+        )}
+      </Section>
+
+      {/* Stored Mail (admin only — bodies are attacker-controlled) */}
+      <Section
+        title={<>STORED MAIL ({mail.length})</>}
+        open={openSections.mail}
+        onToggle={() => toggle('mail')}
+      >
+        {mailForbidden ? (
+          <EmptyState
+            icon={Mail}
+            title="ADMIN ROLE REQUIRED"
+            size="compact"
+          />
+        ) : mail.length > 0 ? (
+          <div className="logs-table-container">
+            <table className="logs-table">
+              <thead>
+                <tr>
+                  <th>TIMESTAMP</th>
+                  <th>DECKY</th>
+                  <th>SUBJECT</th>
+                  <th>FROM</th>
+                  <th>SIZE</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {mail.map((row) => {
+                  let fields: Record<string, any> = {};
+                  try { fields = JSON.parse(row.fields || '{}'); } catch {}
+                  const storedAs = fields.stored_as ? String(fields.stored_as) : null;
+                  return (
+                    <tr key={row.id}>
+                      <td className="dim" style={{ fontSize: '0.75rem', whiteSpace: 'nowrap' }}>
+                        {new Date(row.timestamp).toLocaleString()}
+                      </td>
+                      <td className="violet-accent">{row.decky}</td>
+                      <td className="matrix-text" style={{ fontFamily: 'monospace', wordBreak: 'break-all' }}>
+                        {fields.subject || '—'}
+                      </td>
+                      <td className="matrix-text" style={{ fontFamily: 'monospace', wordBreak: 'break-all' }}>
+                        {fields.from_addr || fields.mail_from || '—'}
+                      </td>
+                      <td className="matrix-text" style={{ fontFamily: 'monospace' }}>
+                        {fields.size ? `${fields.size} B` : '—'}
+                      </td>
+                      <td>
+                        {storedAs && (
+                          <button
+                            onClick={() => setMailItem({ decky: row.decky, storedAs, fields })}
+                            title="Inspect stored message"
+                            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',
+                            }}
+                          >
+                            <Mail size={11} /> OPEN
+                          </button>
+                        )}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <EmptyState
+            icon={Mail}
+            title="NO MAIL STORED"
+            size="compact"
+          />
+        )}
+      </Section>
+
+      {mailItem && (
+        <MailDrawer
+          decky={mailItem.decky}
+          storedAs={mailItem.storedAs}
+          fields={mailItem.fields}
+          onClose={() => setMailItem(null)}
+        />
+      )}
+
       {/* Recorded PTY Sessions (SSH / Telnet) */}
       <Section
         title={<>SESSION TRANSCRIPTS ({sessions.length})</>}

decnet_web/src/components/MailDrawer.tsx

@@ -0,0 +1,216 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { X, Download, AlertTriangle, Paperclip } from 'lucide-react';
+import api from '../utils/api';
+import { useEscapeKey } from '../hooks/useEscapeKey';
+import { useFocusTrap } from '../hooks/useFocusTrap';
+
+interface MailDrawerProps {
+  decky: string;
+  storedAs: string;
+  fields: Record<string, any>;
+  onClose: () => void;
+}
+
+interface AttachmentManifest {
+  filename?: string | null;
+  content_type?: string | null;
+  size?: number | null;
+  sha256?: string | null;
+}
+
+function parseAttachments(fields: Record<string, any>): AttachmentManifest[] {
+  const raw = fields.attachments_json;
+  if (typeof raw !== 'string' || !raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch (err) {
+    console.error('mail: failed to parse attachments_json', err);
+    return [];
+  }
+}
+
+const Row: React.FC<{ label: string; value: React.ReactNode }> = ({ label, value }) => (
+  <div style={{ display: 'flex', gap: '12px', padding: '6px 0', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
+    <div style={{ minWidth: '140px', color: 'var(--dim-color)', fontSize: '0.75rem', textTransform: 'uppercase' }}>{label}</div>
+    <div style={{ flex: 1, fontSize: '0.85rem', wordBreak: 'break-all' }}>{value ?? <span style={{ opacity: 0.4 }}>—</span>}</div>
+  </div>
+);
+
+const MailDrawer: React.FC<MailDrawerProps> = ({ decky, storedAs, fields, onClose }) => {
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  useEscapeKey(onClose, true);
+  useFocusTrap(panelRef, true);
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => { document.body.style.overflow = prev; };
+  }, []);
+
+  const [downloading, setDownloading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const attachments = parseAttachments(fields);
+
+  const handleDownload = async () => {
+    setDownloading(true);
+    setError(null);
+    try {
+      const res = await api.get(
+        `/artifacts/${encodeURIComponent(decky)}/${encodeURIComponent(storedAs)}?service=smtp`,
+        { responseType: 'blob' },
+      );
+      const blobUrl = URL.createObjectURL(res.data);
+      const a = document.createElement('a');
+      a.href = blobUrl;
+      a.download = storedAs;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(blobUrl);
+    } catch (err: any) {
+      const status = err?.response?.status;
+      setError(
+        status === 403 ? 'Admin role required to download mail.' :
+        status === 404 ? 'Message not found on disk (may have been purged).' :
+        status === 400 ? 'Server rejected the request (invalid parameters).' :
+        'Download failed — see console.'
+      );
+      console.error('mail download failed', err);
+    } finally {
+      setDownloading(false);
+    }
+  };
+
+  const recipients = Array.isArray(fields.rcpts)
+    ? fields.rcpts.join(', ')
+    : (typeof fields.rcpts === 'string' ? fields.rcpts : null);
+
+  return (
+    <div
+      onClick={onClose}
+      style={{
+        position: 'fixed', inset: 0,
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        display: 'flex', justifyContent: 'flex-end',
+        zIndex: 1000,
+      }}
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          width: 'min(620px, 100%)', height: '100%',
+          backgroundColor: 'var(--bg-color, #0d1117)',
+          borderLeft: '1px solid var(--border-color, #30363d)',
+          padding: '24px', overflowY: 'auto',
+          color: 'var(--text-color)',
+        }}
+      >
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
+          <div>
+            <div style={{ fontSize: '0.7rem', color: 'var(--dim-color)', letterSpacing: '0.1em' }}>
+              STORED MESSAGE · {decky}
+            </div>
+            <div style={{ fontSize: '1rem', fontWeight: 'bold', marginTop: '4px', wordBreak: 'break-all' }}>
+              {fields.subject || storedAs}
+            </div>
+          </div>
+          <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--text-color)', cursor: 'pointer' }}>
+            <X size={20} />
+          </button>
+        </div>
+
+        <div style={{
+          display: 'flex', alignItems: 'center', gap: '8px',
+          padding: '8px 12px', marginBottom: '16px',
+          border: '1px solid rgba(255, 170, 0, 0.3)',
+          backgroundColor: 'rgba(255, 170, 0, 0.05)',
+          fontSize: '0.75rem', color: '#ffaa00',
+        }}>
+          <AlertTriangle size={14} />
+          Attacker-controlled content. Phishing kits / malware likely.
+        </div>
+
+        <button
+          onClick={handleDownload}
+          disabled={downloading}
+          style={{
+            display: 'flex', alignItems: 'center', gap: '8px',
+            padding: '8px 14px', marginBottom: '20px',
+            border: '1px solid var(--text-color)',
+            background: 'transparent', color: 'var(--text-color)',
+            cursor: downloading ? 'wait' : 'pointer',
+            opacity: downloading ? 0.5 : 1,
+          }}
+        >
+          <Download size={14} /> {downloading ? 'DOWNLOADING…' : 'DOWNLOAD .EML'}
+        </button>
+        {error && (
+          <div style={{ color: '#ff5555', fontSize: '0.8rem', marginBottom: '16px' }}>{error}</div>
+        )}
+
+        <section style={{ marginBottom: '24px' }}>
+          <h3 style={{ fontSize: '0.8rem', letterSpacing: '0.1em', color: 'var(--dim-color)', marginBottom: '8px' }}>
+            HEADERS
+          </h3>
+          <Row label="Subject" value={fields.subject} />
+          <Row label="From" value={fields.from_addr ?? fields.from} />
+          <Row label="To" value={recipients} />
+          <Row label="Date" value={fields.date} />
+          <Row label="Message-ID" value={fields.message_id} />
+          <Row label="Mail from" value={fields.mail_from} />
+        </section>
+
+        <section style={{ marginBottom: '24px' }}>
+          <h3 style={{ fontSize: '0.8rem', letterSpacing: '0.1em', color: 'var(--dim-color)', marginBottom: '8px' }}>
+            BODY
+          </h3>
+          <Row label="Size" value={fields.size ? `${fields.size} bytes` : null} />
+          <Row label="SHA-256" value={fields.sha256} />
+          <Row label="Truncated" value={fields.truncated ? 'yes (10 MB cap)' : 'no'} />
+          <Row label="Stored as" value={storedAs} />
+        </section>
+
+        {attachments.length > 0 && (
+          <section>
+            <h3 style={{ fontSize: '0.8rem', letterSpacing: '0.1em', color: 'var(--dim-color)', marginBottom: '8px' }}>
+              ATTACHMENTS ({attachments.length})
+            </h3>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+              {attachments.map((att, idx) => (
+                <div
+                  key={idx}
+                  style={{
+                    padding: '8px 12px',
+                    border: '1px solid rgba(255,255,255,0.08)',
+                    background: 'rgba(255,255,255,0.02)',
+                    fontSize: '0.8rem',
+                  }}
+                >
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
+                    <Paperclip size={12} />
+                    <span style={{ fontFamily: 'monospace', wordBreak: 'break-all' }}>
+                      {att.filename || '(unnamed)'}
+                    </span>
+                  </div>
+                  <div style={{ fontSize: '0.7rem', color: 'var(--dim-color)', fontFamily: 'monospace' }}>
+                    {att.content_type ?? '?'} · {att.size != null ? `${att.size} B` : '? B'}
+                  </div>
+                  {att.sha256 && (
+                    <div style={{ fontSize: '0.7rem', color: 'var(--dim-color)', fontFamily: 'monospace', wordBreak: 'break-all' }}>
+                      {att.sha256}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MailDrawer;