class SiteHeader extends HTMLElement {
  connectedCallback() {
    // Avoid double-rendering
    if (this._initialized) return;
    this._initialized = true;
    this.className = 'site-header';
    this.innerHTML = `
      <div class="header-content">
        <div class="logo-mark">TelosDB</div>
        <div class="header-info">
          <div id="model-name-top" class="model-name-top" title="現在使用中のモデル">判定中...</div>
          
          <div class="status-badge">
            <span id="llama-status-dot-top" class="status-dot idle"></span>
            <span id="llama-status-text-top">LSA Search</span>
          </div>

          <div class="status-badge">
            <span style="color:var(--accent-purple)">◆</span>
            <span id="doc-count-value">--</span> docs
          </div>

          <div class="header-actions" style="display:flex; gap:8px; margin-left:8px; border-left: 1px solid var(--border-base); padding-left:16px;">
            <button id="show-mcp-btn" class="secondary-btn" style="padding: 2px 10px; font-size: 0.7rem;">MCP CONFIG</button>
            <button id="reindex-btn" class="secondary-btn warning-btn" onclick="reindex()" style="padding: 2px 10px; font-size: 0.7rem;">RE-INDEX</button>
          </div>
        </div>
      </div>
    `;
  }
}

customElements.define('site-header', SiteHeader);