jontsai_command-center/public/partials/sidebar.html

<!-- Shared Sidebar Partial -->
<nav class="sidebar" id="sidebar">
  <div class="sidebar-header">
    <span class="sidebar-logo">🦞</span>
    <span class="sidebar-title" data-i18n="sidebar.title">Command Center</span>
    <button
      class="sidebar-toggle"
      id="sidebar-toggle-btn"
      onclick="toggleSidebar()"
      title="Toggle sidebar"
    >
      ◀
    </button>
  </div>
  <div class="sidebar-nav">
    <div class="nav-section">
      <div class="nav-section-title" data-i18n="sidebar.navigation">Navigation</div>
      <a
        href="#vitals-section"
        class="nav-item"
        data-section="vitals"
        data-page="/"
        data-tooltip="System Vitals"
      >
        <span class="nav-icon">🖥️</span>
        <span data-i18n="sidebar.systemVitals">System Vitals</span>
      </a>
      <a
        href="#llm-section"
        class="nav-item"
        data-section="llm"
        data-page="/"
        data-tooltip="LLM Fuel Gauges"
      >
        <span class="nav-icon">⛽</span>
        <span data-i18n="sidebar.llmUsage">LLM Usage</span>
      </a>
      <a
        href="#sessions-section"
        class="nav-item"
        data-section="sessions"
        data-page="/"
        data-tooltip="Sessions"
      >
        <span class="nav-icon">📡</span>
        <span data-i18n="sidebar.sessions">Sessions</span>
        <span class="nav-badge" id="nav-session-count">-</span>
      </a>
      <a
        href="#cron-section"
        class="nav-item"
        data-section="cron"
        data-page="/"
        data-tooltip="Cron Jobs"
      >
        <span class="nav-icon">⏰</span>
        <span data-i18n="sidebar.cronJobs">Cron Jobs</span>
        <span class="nav-badge" id="nav-cron-count">-</span>
      </a>
      <a href="/jobs.html" class="nav-item" data-page="/jobs.html" data-tooltip="AI Jobs Dashboard">
        <span class="nav-icon">🤖</span>
        <span data-i18n="sidebar.aiJobs">AI Jobs</span>
        <span class="nav-badge" id="nav-jobs-count">-</span>
      </a>
      <a
        href="#memory-section"
        class="nav-item"
        data-section="memory"
        data-page="/"
        data-tooltip="Memory"
      >
        <span class="nav-icon">🧠</span>
        <span data-i18n="sidebar.memory">Memory</span>
        <span class="nav-badge" id="nav-memory-count">-</span>
      </a>
      <a
        href="#cerebro-section"
        class="nav-item"
        data-section="cerebro"
        data-page="/"
        data-tooltip="Cerebro"
      >
        <span class="nav-icon">🔮</span>
        <span data-i18n="sidebar.cerebro">Cerebro</span>
        <span class="nav-badge" id="nav-cerebro-count">-</span>
      </a>
      <a
        href="#operators-section"
        class="nav-item"
        data-section="operators"
        data-page="/"
        data-tooltip="Operators"
      >
        <span class="nav-icon">👥</span>
        <span data-i18n="sidebar.operators">Operators</span>
        <span class="nav-badge" id="nav-operator-count">-</span>
      </a>
    </div>
    <div class="nav-section">
      <div class="nav-section-title" data-i18n="sidebar.settings">Settings</div>
      <a
        href="#"
        class="nav-item"
        onclick="
          window.openPrivacyModal && openPrivacyModal();
          return false;
        "
        data-tooltip="Privacy Settings"
      >
        <span class="nav-icon">🔒</span>
        <span data-i18n="sidebar.privacy">Privacy</span>
      </a>
      <a
        href="#about-section"
        class="nav-item"
        data-section="about"
        data-page="/"
        data-tooltip="About"
      >
        <span class="nav-icon">ℹ️</span>
        <span data-i18n="sidebar.about">About</span>
      </a>
    </div>
    <div class="nav-section">
      <div class="nav-section-title" data-i18n="sidebar.quickStats">Quick Stats</div>
      <div class="nav-item" style="cursor: default" data-tooltip="Total tokens (24h)">
        <span class="nav-icon">🎫</span>
        <span data-i18n="sidebar.tokens">Tokens</span>
        <span class="nav-badge" id="nav-tokens">-</span>
      </div>
      <div
        class="nav-item"
        style="cursor: pointer"
        onclick="window.openCostModal && openCostModal()"
        data-tooltip="Click for breakdown"
      >
        <span class="nav-icon">💰</span>
        <span data-i18n="sidebar.estDaily">Est. Daily</span>
        <span class="nav-badge" id="nav-cost">-</span>
      </div>
      <div
        class="nav-item"
        style="cursor: pointer"
        onclick="window.openCostModal && openCostModal()"
        data-tooltip="Projected monthly cost"
      >
        <span class="nav-icon">📅</span>
        <span data-i18n="sidebar.estMonthly">Est. Monthly</span>
        <span class="nav-badge" id="nav-monthly-cost">-</span>
      </div>
      <div class="nav-item" style="cursor: default" data-tooltip="Average tokens per session">
        <span class="nav-icon">📊</span>
        <span data-i18n="sidebar.avgTokSess">Avg Tok/Sess</span>
        <span class="nav-badge" id="nav-avg-tokens">-</span>
      </div>
      <div class="nav-item" style="cursor: default" data-tooltip="Average cost per session">
        <span class="nav-icon">💵</span>
        <span data-i18n="sidebar.avgCostSess">Avg $/Sess</span>
        <span class="nav-badge" id="nav-avg-cost">-</span>
      </div>
    </div>
  </div>
  <div class="sidebar-footer">
    <span data-i18n="sidebar.autoRefresh">Auto-refresh: 30s</span><br />
    <span id="sidebar-updated">-</span>
  </div>
</nav>