components/status-indicator.js

class StatusIndicator extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.status = 'connecting';
  }

  static get observedAttributes() {
    return ['status'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'status' && oldValue !== newValue) {
      this.status = newValue;
      this.render();
    }
  }

  render() {
    const statusColors = {
      online: 'bg-green-500',
      offline: 'bg-red-500',
      connecting: 'bg-yellow-500',
      error: 'bg-red-500 animate-pulse'
    };

    const statusText = {
      online: 'Online',
      offline: 'Offline',
      connecting: 'Connecting...',
      error: 'Connection Error'
    };

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 0.875rem;
        }
        
        .status-dot {
          width: 0.75rem;
          height: 0.75rem;
          border-radius: 9999px;
        }
      </style>
      <div class="status-dot ${statusColors[this.status]}"></div>
      <span>${statusText[this.status]}</span>
    `;
  }

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

customElements.define('status-indicator', StatusIndicator);