components/phoenix-ghost-protocol.js

/**
 * Phoenix Ghost Protocol
 * Autonomous countermeasures, deception, self-healing
 * Native active defense without external orchestration
 */
class PhoenixGhostProtocol extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.deception = [
      { name: 'Honeypot-FINANCE', status: 'ACTIVE', intrusions: 3, type: 'Database' },
      { name: 'Honeypot-SSH-DEV', status: 'ACTIVE', intrusions: 12, type: 'Service' },
      { name: 'Honeypot-AD-01', status: 'ACTIVE', intrusions: 0, type: 'Identity' },
      { name: 'CanaryToken-DOCS', status: 'TRIGGERED', intrusions: 1, type: 'Document' }
    ];
    this.healing = [
      { target: 'Memory Integrity', status: 'HEALTHY', lastHeal: '34s ago', auto: true },
      { target: 'Neural Weights', status: 'OPTIMIZING', lastHeal: '12s ago', auto: true },
      { target: 'Firewall Topology', status: 'HEALTHY', lastHeal: '2m ago', auto: true },
      { target: 'Federation Link', status: 'HEALTHY', lastHeal: '8s ago', auto: true }
    ];
    this.countermeasures = [
      { threat: 'Port Scan Recon', response: 'Dynamic Blackhole + TCP-ACK Flood Mirror', level: 'PROPORTIONAL' },
      { threat: 'Brute Force RDP', response: 'Infinite Sandbox Redirect', level: 'ENTRAPMENT' },
      { threat: 'SQL Injection', response: 'Query Poisoning + WAF Cognitive Update', level: 'SUBVERSION' }
    ];
    this.responseLevel = 'CALIBRATED';
  }

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

  startGhostLoop() {
    setInterval(() => {
      this.deception.forEach(h => {
        if (Math.random() > 0.88) h.intrusions += 1;
      });
      this.healing.forEach(h => {
        if (Math.random() > 0.9) h.lastHeal = 'Just now';
      });
      this.updateView();
    }, 4000);
  }

  updateView() {
    const grid = this.shadowRoot.getElementById('decoy-grid');
    if (grid) grid.innerHTML = this.renderDecoys();
  }

  renderDecoys() {
    return this.deception.map(d => `
      <div class="decoy">
        <div class="decoy-top">
          <span class="decoy-name">${d.name}</span>
          <span class="decoy-tag ${d.status === 'TRIGGERED' ? 'tag-alert' : 'tag-ok'}">${d.status}</span>
        </div>
        <div class="decoy-meta">
          <span>Type: ${d.type}</span>
          <span>Intrusions: ${d.intrusions}</span>
        </div>
      </div>
    `).join('');
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host { display: block; font-family: 'Rajdhani', sans-serif; }
        .container {
          background: linear-gradient(135deg, rgba(249,115,22,0.08) 0%, rgba(2,6,23,0.95) 100%);
          border: 1px solid rgba(249,115,22,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: #fb923c; 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(249,115,22,0.15); color: #fb923c; border: 1px solid rgba(249,115,22,0.3); }
        .level-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: 0.5rem 0.75rem; background: rgba(15,23,42,0.5); border: 1px solid rgba(249,115,22,0.2); border-radius: 0.5rem; }
        .level-lbl { font-size: 0.7rem; color: rgba(251,146,60,0.8); }
        .level-val { font-family: 'Orbitron', sans-serif; font-size: 1rem; color: #f97316; margin-left: auto; }
        .section-title { font-size: 0.7rem; color: rgba(251,146,60,0.8); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; margin-top: 1rem; }
        .decoy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 1.25rem; }
        .decoy { background: rgba(15,23,42,0.4); border: 1px solid rgba(249,115,22,0.15); border-radius: 0.5rem; padding: 0.6rem; }
        .decoy-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
        .decoy-name { font-size: 0.7rem; color: #fb923c; font-weight: 600; }
        .decoy-tag { font-size: 0.6rem; padding: 0.1rem 0.35rem; border-radius: 0.25rem; font-weight: 700; }
        .tag-ok { background: rgba(74,222,128,0.2); color: #4ade80; }
        .tag-alert { background: rgba(248,113,113,0.2); color: #f87171; }
        .decoy-meta { display: flex; justify-content: space-between; font-size: 0.6rem; color: rgba(251,146,60,0.6); }
        .heal-item { display: flex; align-items: center; justify-content: space-between; background: rgba(15,23,42,0.4); border: 1px solid rgba(249,115,22,0.1); border-radius: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.75rem; margin-bottom: 0.4rem; }
        .heal-name { color: rgba(251,146,60,0.9); font-weight: 600; }
        .heal-status { font-size: 0.65rem; padding: 0.1rem 0.35rem; border-radius: 0.25rem; }
        .status-HEALTHY { background: rgba(74,222,128,0.2); color: #4ade80; }
        .status-OPTIMIZING { background: rgba(251,191,36,0.2); color: #fbbf24; }
        .heal-time { color: rgba(251,146,60,0.5); font-family: 'Monaco', monospace; font-size: 0.65rem; }
        .counter { background: rgba(15,23,42,0.5); border: 1px solid rgba(249,115,22,0.15); border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 0.5rem; }
        .counter-threat { font-size: 0.75rem; color: #fb923c; font-weight: 600; }
        .counter-resp { font-size: 0.7rem; color: rgba(251,146,60,0.85); margin-top: 0.25rem; }
        .counter-lvl { display: inline-block; font-size: 0.6rem; padding: 0.1rem 0.4rem; border-radius: 0.25rem; background: rgba(249,115,22,0.2); color: #f97316; margin-top: 0.25rem; }
        @media (max-width: 640px) { .decoy-grid { grid-template-columns: 1fr; } }
      </style>
      <div class="container">
        <div class="header">
          <div class="title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fb923c" stroke-width="2">
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
            </svg>
            Ghost Protocol
          </div>
          <span class="badge">ACTIVE DEFENSE</span>
        </div>
        <div class="level-row">
          <span class="level-lbl">Autonomous Response Level</span>
          <span class="level-val">${this.responseLevel}</span>
        </div>
        <div class="section-title">Deception Grid</div>
        <div class="decoy-grid" id="decoy-grid">
          ${this.renderDecoys()}
        </div>
        <div class="section-title">Self-Healing Matrix</div>
        ${this.healing.map(h => `
          <div class="heal-item">
            <span class="heal-name">${h.target}</span>
            <span class="heal-status status-${h.status}">${h.status}</span>
            <span class="heal-time">${h.lastHeal}</span>
          </div>
        `).join('')}
        <div class="section-title">Cognitive Countermeasures</div>
        ${this.countermeasures.map(c => `
          <div class="counter">
            <div class="counter-threat">${c.threat}</div>
            <div class="counter-resp">${c.response}</div>
            <span class="counter-lvl">${c.level}</span>
          </div>
        `).join('')}
      </div>
    `;
  }
}
customElements.define('phoenix-ghost-protocol', PhoenixGhostProtocol);