feat(web): SessionDrawer + Sessions tab in AttackerDetail

Adds asciinema-player dependency, SessionDrawer.tsx that pages the
transcripts API (500 events per request) and rebuilds a v2 .cast blob
for playback, and a Session Transcripts section in AttackerDetail that
deep-links into the drawer. Truncation banner surfaces the 10 MB
per-session cap when it's been hit.

decnet_web/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "asciinema-player": "^3.8.0",
     "axios": "^1.14.0",
     "lucide-react": "^1.7.0",
     "react": "^19.2.4",

decnet_web/src/components/AttackerDetail.tsx

@@ -3,6 +3,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { Activity, ArrowLeft, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Crosshair, Fingerprint, Shield, Clock, Wifi, Lock, FileKey, Radio, Timer, Paperclip } from 'lucide-react';
 import api from '../utils/api';
 import ArtifactDrawer from './ArtifactDrawer';
+import SessionDrawer from './SessionDrawer';
 import './Dashboard.css';
 
 interface AttackerBehavior {
@@ -707,6 +708,7 @@ const AttackerDetail: React.FC = () => {
     commands: true,
     fingerprints: true,
     artifacts: true,
+    sessions: true,
   });
 
   // Captured file-drop artifacts (ssh inotify farm) for this attacker.
@@ -719,6 +721,17 @@ const AttackerDetail: React.FC = () => {
   };
   const [artifacts, setArtifacts] = useState<ArtifactLog[]>([]);
   const [artifact, setArtifact] = useState<{ decky: string; storedAs: string; fields: Record<string, any> } | null>(null);
+
+  // PTY session transcripts (sessrec) for this attacker.
+  type SessionLog = {
+    id: number;
+    timestamp: string;
+    decky: string;
+    service: string;
+    fields: string;
+  };
+  const [sessions, setSessions] = useState<SessionLog[]>([]);
+  const [session, setSession] = useState<{ decky: string; sid: string; fields: Record<string, any> } | null>(null);
   const toggle = (key: string) => setOpenSections((prev) => ({ ...prev, [key]: !prev[key] }));
 
   // Commands pagination state
@@ -785,6 +798,19 @@ const AttackerDetail: React.FC = () => {
     fetchArtifacts();
   }, [id]);
 
+  useEffect(() => {
+    if (!id) return;
+    const fetchSessions = async () => {
+      try {
+        const res = await api.get(`/attackers/${id}/transcripts`);
+        setSessions(res.data.data ?? []);
+      } catch {
+        setSessions([]);
+      }
+    };
+    fetchSessions();
+  }, [id]);
+
   if (loading) {
     return (
       <div className="dashboard">
@@ -1166,6 +1192,87 @@ const AttackerDetail: React.FC = () => {
         />
       )}
 
+      {/* Recorded PTY Sessions (SSH / Telnet) */}
+      <Section
+        title={<>SESSION TRANSCRIPTS ({sessions.length})</>}
+        open={openSections.sessions}
+        onToggle={() => toggle('sessions')}
+      >
+        {sessions.length > 0 ? (
+          <div className="logs-table-container">
+            <table className="logs-table">
+              <thead>
+                <tr>
+                  <th>TIMESTAMP</th>
+                  <th>DECKY</th>
+                  <th>SERVICE</th>
+                  <th>DURATION</th>
+                  <th>BYTES</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {sessions.map((row) => {
+                  let fields: Record<string, any> = {};
+                  try { fields = JSON.parse(row.fields || '{}'); } catch {}
+                  const sid = fields.sid ? String(fields.sid) : null;
+                  const dur = fields.duration_s;
+                  const bytes = fields.bytes;
+                  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">{fields.service ?? row.service}</td>
+                      <td className="matrix-text" style={{ fontFamily: 'monospace' }}>
+                        {dur ? `${dur}s` : '—'}
+                      </td>
+                      <td className="matrix-text" style={{ fontFamily: 'monospace' }}>
+                        {bytes ? `${bytes} B` : '—'}
+                      </td>
+                      <td>
+                        {sid && (
+                          <button
+                            onClick={() => setSession({ decky: row.decky, sid, fields })}
+                            title="Replay recorded session"
+                            style={{
+                              display: 'flex', alignItems: 'center', gap: '6px',
+                              fontSize: '0.7rem',
+                              backgroundColor: 'rgba(0, 200, 255, 0.1)',
+                              padding: '2px 8px',
+                              borderRadius: '4px',
+                              border: '1px solid rgba(0, 200, 255, 0.5)',
+                              color: '#00c8ff',
+                              cursor: 'pointer',
+                            }}
+                          >
+                            REPLAY
+                          </button>
+                        )}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div style={{ padding: '24px', textAlign: 'center', opacity: 0.5 }}>
+            NO SESSION TRANSCRIPTS RECORDED FROM THIS ATTACKER
+          </div>
+        )}
+      </Section>
+
+      {session && (
+        <SessionDrawer
+          decky={session.decky}
+          sid={session.sid}
+          fields={session.fields}
+          onClose={() => setSession(null)}
+        />
+      )}
+
       {/* UUID footer */}
       <div style={{ textAlign: 'right', fontSize: '0.65rem', opacity: 0.3, marginTop: '8px' }}>
         UUID: {attacker.uuid}

decnet_web/src/components/SessionDrawer.tsx

@@ -0,0 +1,209 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { X, AlertTriangle } from 'lucide-react';
+import api from '../utils/api';
+// @ts-expect-error -- ships without type defs; 3.x CJS build is used directly
+import * as AsciinemaPlayer from 'asciinema-player';
+import 'asciinema-player/dist/bundle/asciinema-player.css';
+
+interface SessionDrawerProps {
+  decky: string;
+  sid: string;
+  fields: Record<string, any>;
+  onClose: () => void;
+}
+
+interface TranscriptPage {
+  sid: string;
+  service: string;
+  header: Record<string, any>;
+  events: [number, string, string][];
+  offset: number;
+  limit: number;
+  total: number;
+  has_more: boolean;
+  truncated: boolean;
+}
+
+const PAGE_SIZE = 500;
+
+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>
+);
+
+function buildCastBlob(header: Record<string, any>, events: [number, string, string][]): string {
+  const headerLine = JSON.stringify({
+    version: 2,
+    width: header.width ?? 80,
+    height: header.height ?? 24,
+    timestamp: header.timestamp,
+    env: header.env,
+  });
+  const eventLines = events.map(([t, ch, d]) => JSON.stringify([t, ch, d]));
+  return [headerLine, ...eventLines].join('\n') + '\n';
+}
+
+const SessionDrawer: React.FC<SessionDrawerProps> = ({ decky, sid, fields, onClose }) => {
+  const [header, setHeader] = useState<Record<string, any> | null>(null);
+  const [events, setEvents] = useState<[number, string, string][]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [truncated, setTruncated] = useState(false);
+  const playerContainer = useRef<HTMLDivElement | null>(null);
+  const playerInstance = useRef<any>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const fetchAll = async () => {
+      setLoading(true);
+      setError(null);
+      let offset = 0;
+      let hdr: Record<string, any> | null = null;
+      const allEvents: [number, string, string][] = [];
+      let truncFlag = false;
+      try {
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+          const res = await api.get<TranscriptPage>(
+            `/transcripts/${encodeURIComponent(decky)}/${encodeURIComponent(sid)}`,
+            { params: { offset, limit: PAGE_SIZE } },
+          );
+          if (cancelled) return;
+          if (!hdr) hdr = res.data.header;
+          truncFlag = truncFlag || res.data.truncated;
+          allEvents.push(...res.data.events);
+          if (offset === 0) {
+            setHeader(hdr);
+            setEvents([...allEvents]);
+            setLoading(false);
+          } else {
+            setEvents([...allEvents]);
+          }
+          if (!res.data.has_more) break;
+          offset += PAGE_SIZE;
+          setLoadingMore(true);
+        }
+        setTruncated(truncFlag);
+        setLoadingMore(false);
+      } catch (err: any) {
+        if (cancelled) return;
+        const status = err?.response?.status;
+        setError(
+          status === 403 ? 'Admin role required to view transcripts.' :
+          status === 404 ? 'Transcript not found (shard may have rotated).' :
+          'Failed to load transcript — see console.'
+        );
+        console.error('transcript fetch failed', err);
+        setLoading(false);
+      }
+    };
+    fetchAll();
+    return () => { cancelled = true; };
+  }, [decky, sid]);
+
+  // Re-mount the player whenever the event window grows. asciinema-player
+  // doesn't expose a public feed() API in v3, so we rebuild from the full
+  // in-memory blob each time — cheap for v1-scale sessions (≤ 10 MB cap).
+  useEffect(() => {
+    if (!header || !playerContainer.current || events.length === 0) return;
+    if (playerInstance.current) {
+      try { playerInstance.current.dispose(); } catch { /* ignore */ }
+      playerInstance.current = null;
+    }
+    const cast = buildCastBlob(header, events);
+    const blob = new Blob([cast], { type: 'application/x-asciicast' });
+    const url = URL.createObjectURL(blob);
+    playerInstance.current = AsciinemaPlayer.create(url, playerContainer.current, {
+      fit: 'width',
+      terminalFontSize: '12px',
+    });
+    return () => {
+      URL.revokeObjectURL(url);
+      if (playerInstance.current) {
+        try { playerInstance.current.dispose(); } catch { /* ignore */ }
+        playerInstance.current = null;
+      }
+    };
+  }, [header, events]);
+
+  const service = fields.service;
+  const srcIp = fields.src_ip;
+  const duration = fields.duration_s;
+  const bytes = fields.bytes;
+
+  return (
+    <div
+      onClick={onClose}
+      style={{
+        position: 'fixed', inset: 0,
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        display: 'flex', justifyContent: 'flex-end',
+        zIndex: 1000,
+      }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          width: 'min(920px, 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' }}>
+              SESSION TRANSCRIPT · {decky}
+            </div>
+            <div style={{ fontSize: '1rem', fontWeight: 'bold', marginTop: '4px', fontFamily: 'monospace' }}>
+              {sid}
+            </div>
+          </div>
+          <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--text-color)', cursor: 'pointer' }}>
+            <X size={20} />
+          </button>
+        </div>
+
+        {truncated && (
+          <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} />
+            Session exceeded 10 MB cap — playback is truncated.
+          </div>
+        )}
+
+        {error && (
+          <div style={{ color: '#ff5555', fontSize: '0.8rem', marginBottom: '16px' }}>{error}</div>
+        )}
+
+        <section style={{ marginBottom: '16px' }}>
+          <div ref={playerContainer} style={{ background: '#000', minHeight: '340px' }} />
+          {loading && <div style={{ opacity: 0.5, fontSize: '0.75rem', marginTop: '8px' }}>LOADING TRANSCRIPT…</div>}
+          {loadingMore && <div style={{ opacity: 0.5, fontSize: '0.75rem', marginTop: '8px' }}>loading more events…</div>}
+        </section>
+
+        <section>
+          <h3 style={{ fontSize: '0.8rem', letterSpacing: '0.1em', color: 'var(--dim-color)', marginBottom: '8px' }}>
+            METADATA
+          </h3>
+          <Row label="Service" value={service} />
+          <Row label="Src IP" value={srcIp} />
+          <Row label="Duration" value={duration ? `${duration}s` : null} />
+          <Row label="Bytes" value={bytes ? `${bytes}` : null} />
+          <Row label="Events" value={events.length} />
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default SessionDrawer;