components/forensics.js

/**
 * Phoenix Digital Forensics Suite
 * Evidence Chain, Timeline Analysis, Hash Verification
 */

class PhoenixForensics extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.evidence = [
            { id: 'EV-001', type: 'Memory Dump', size: '8.4 GB', hash: 'a1b2c3d4e5f6789...', status: 'VERIFIED', time: Date.now() - 3600000 },
            { id: 'EV-002', type: 'Disk Image', size: '512 GB', hash: 'd4e5f6a1b2c3789...', status: 'ANALYZING', progress: 67, time: Date.now() - 7200000 },
            { id: 'EV-003', type: 'Network PCAP', size: '2.1 GB', hash: 'g7h8i9j0k1l2789...', status: 'QUEUED', progress: 0, time: Date.now() - 10800000 },
            { id: 'EV-004', type: 'Windows Logs', size: '124 MB', hash: 'm3n4o5p6q7r8789...', status: 'VERIFIED', time: Date.now() - 14400000 }
        ];
        this.timeline = [
            { time: '14:32:15', event: 'Initial Compromise', source: 'Proxy Logs', confidence: 99 },
            { time: '14:35:42', event: 'Privilege Escalation', source: 'EDR Alert', confidence: 97 },
            { time: '14:41:08', event: 'Lateral Movement', source: 'NetFlow', confidence: 94 },
            { time: '14:48:33', event: 'Data Staging', source: 'DLP', confidence: 91 },
            { time: '14:55:17', event: 'Exfiltration Attempt', source: 'Firewall', confidence: 88 }
        ];
    }

    connectedCallback() {
        this.render();
        this.startAnalysisSimulation();
    }

    startAnalysisSimulation() {
        setInterval(() => {
            const analyzing = this.evidence.find(e => e.status === 'ANALYZING');
            if (analyzing && analyzing.progress < 100) {
                analyzing.progress = Math.min(100, analyzing.progress + Math.floor(Math.random() * 5));
                this.updateEvidence();
            }
        }, 3000);
    }

    updateEvidence() {
        const container = this.shadowRoot.getElementById('evidence-list');
        if (container) container.innerHTML = this.renderEvidenceItems();
    }

    timeAgo(ms) {
        const m = Math.floor((Date.now() - ms) / 60000);
        if (m < 60) return `${m}m ago`;
        return `${Math.floor(m / 60)}h ago`;
    }

    renderEvidenceItems() {
        return this.evidence.map(ev => `
            <div class="ev-item">
                <div class="ev-left">
                    <div class="ev-icon">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            ${ev.type === 'Memory Dump' ? '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>' :
                              ev.type === 'Disk Image' ? '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/>' :
                              ev.type === 'Network PCAP' ? '<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>' :
                              '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>'}
                        </svg>
                    </div>
                    <div>
                        <div class="ev-name">${ev.id} • ${ev.type}</div>
                        <div class="ev-hash">${ev.hash}</div>
                    </div>
                </div>
                <div class="ev-right">
                    <span class="ev-size">${ev.size}</span>
                    ${ev.status === 'ANALYZING' ? `
                        <div class="ev-progress">
                            <div class="ev-bar-bg"><div class="ev-bar-fill" style="width:${ev.progress}%"></div></div>
                            <span class="ev-pct">${ev.progress}%</span>
                        </div>
                    ` : `<span class="ev-status status-${ev.status.toLowerCase()}">${ev.status}</span>`}
                    <span class="ev-time">${this.timeAgo(ev.time)}</span>
                </div>
            </div>
        `).join('');
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host { display: block; font-family: 'Rajdhani', sans-serif; }
                .container {
                    background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(2,6,23,0.95) 100%);
                    border: 1px solid rgba(99,102,241,0.25);
                    border-radius: 1rem;
                    padding: 1.5rem;
                    height: 100%;
                }
                .header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 1.25rem;
                }
                .title {
                    font-family: 'Orbitron', sans-serif;
                    font-size: 1.125rem;
                    font-weight: 700;
                    color: #a5b4fc;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }
                .badge {
                    padding: 0.25rem 0.75rem;
                    border-radius: 9999px;
                    font-size: 0.65rem;
                    font-weight: 600;
                    background: rgba(99,102,241,0.15);
                    color: #a5b4fc;
                    border: 1px solid rgba(99,102,241,0.3);
                }
                .section-title {
                    font-size: 0.7rem;
                    color: rgba(165,180,252,0.8);
                    text-transform: uppercase;
                    letter-spacing: 0.1em;
                    margin-bottom: 0.75rem;
                    margin-top: 1rem;
                }
                .evidence-list {
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;
                    margin-bottom: 1rem;
                }
                .ev-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 0.75rem;
                    background: rgba(15,23,42,0.4);
                    border: 1px solid rgba(99,102,241,0.1);
                    border-radius: 0.5rem;
                    padding: 0.6rem 0.75rem;
                    flex-wrap: wrap;
                }
                .ev-left {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                    flex: 1;
                    min-width: 0;
                }
                .ev-icon {
                    width: 28px;
                    height: 28px;
                    border-radius: 0.375rem;
                    background: rgba(99,102,241,0.15);
                    color: #a5b4fc;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                }
                .ev-name {
                    font-size: 0.8rem;
                    color: #a5b4fc;
                    font-weight: 600;
                }
                .ev-hash {
                    font-size: 0.65rem;
                    color: rgba(165,180,252,0.5);
                    font-family: 'Monaco', monospace;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 200px;
                }
                .ev-right {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                    flex-shrink: 0;
                }
                .ev-size {
                    font-size: 0.7rem;
                    color: rgba(165,180,252,0.7);
                    font-family: 'Monaco', monospace;
                }
                .ev-status {
                    padding: 0.2rem 0.5rem;
                    border-radius: 0.25rem;
                    font-size: 0.6rem;
                    font-weight: 700;
                }
                .status-verified { background: rgba(74,222,128,0.2); color: #4ade80; }
                .status-queued { background: rgba(148,163,184,0.2); color: #94a3b8; }
                .ev-time {
                    font-size: 0.6rem;
                    color: rgba(165,180,252,0.4);
                    font-family: 'Monaco', monospace;
                }
                .ev-progress {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }
                .ev-bar-bg {
                    width: 60px;
                    height: 4px;
                    background: rgba(15,23,42,0.6);
                    border-radius: 2px;
                    overflow: hidden;
                }
                .ev-bar-fill {
                    height: 100%;
                    background: linear-gradient(90deg, #6366f1, #a5b4fc);
                    border-radius: 2px;
                    transition: width 0.3s ease;
                }
                .ev-pct {
                    font-size: 0.65rem;
                    color: #a5b4fc;
                    font-family: 'Monaco', monospace;
                    min-width: 28px;
                }
                .timeline {
                    display: flex;
                    flex-direction: column;
                    gap: 0;
                    position: relative;
                    padding-left: 1rem;
                }
                .timeline::before {
                    content: '';
                    position: absolute;
                    left: 0.35rem;
                    top: 0.5rem;
                    bottom: 0.5rem;
                    width: 2px;
                    background: linear-gradient(to bottom, rgba(99,102,241,0.5), rgba(99,102,241,0.1));
                }
                .tl-item {
                    position: relative;
                    padding: 0.5rem 0 0.75rem 1rem;
                }
                .tl-dot {
                    position: absolute;
                    left: -0.65rem;
                    top: 0.65rem;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background: #6366f1;
                    box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
                }
                .tl-time {
                    font-size: 0.65rem;
                    color: rgba(165,180,252,0.6);
                    font-family: 'Monaco', monospace;
                }
                .tl-event {
                    font-size: 0.8rem;
                    color: #a5b4fc;
                    font-weight: 600;
                }
                .tl-meta {
                    display: flex;
                    gap: 0.75rem;
                    font-size: 0.65rem;
                    color: rgba(165,180,252,0.5);
                    margin-top: 0.15rem;
                }
                @media (max-width: 640px) {
                    .ev-item { flex-direction: column; align-items: flex-start; }
                    .ev-right { width: 100%; justify-content: space-between; }
                }
            </style>
            <div class="container">
                <div class="header">
                    <div class="title">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#a5b4fc" stroke-width="2">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                            <polyline points="14 2 14 8 20 8"/>
                            <line x1="16" y1="13" x2="8" y2="13"/>
                            <line x1="16" y1="17" x2="8" y2="17"/>
                        </svg>
                        Digital Forensics
                    </div>
                    <span class="badge">CHAIN VERIFIED</span>
                </div>
                <div class="section-title">Evidence Collection</div>
                <div class="evidence-list" id="evidence-list">
                    ${this.renderEvidenceItems()}
                </div>
                <div class="section-title">Kill Chain Timeline</div>
                <div class="timeline">
                    ${this.timeline.map((t, i) => `
                        <div class="tl-item">
                            <div class="tl-dot" style="opacity:${1 - i * 0.15}"></div>
                            <div class="tl-time">${t.time}</div>
                            <div class="tl-event">${t.event}</div>
                            <div class="tl-meta">
                                <span>Source: ${t.source}</span>
                                <span>Confidence: ${t.confidence}%</span>
                            </div>
                        </div>
                    `).join('')}
                </div>
            </div>
        `;
    }
}

customElements.define('phoenix-forensics', PhoenixForensics);