<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ambient Manager</title>
    <meta
      name="description"
      content="Hosted manager dashboard for Ambient jobs, workers, and operator telemetry."
    >
    <link rel="stylesheet" href="/static/styles.css">
    <script defer src="/static/manager.js"></script>
  </head>
  <body>
    <div class="shell">
      <header class="nav">
        <a class="brand" href="/">
          <span class="brand-mark">HC</span>
          <span>Ambient</span>
        </a>
        <nav class="nav-links">
          <a href="/download">Install Beta</a>
          <button class="ghost-button" id="logout-button" type="button">Sign out</button>
        </nav>
      </header>

      <main class="manager-grid">
        <section class="hero-copy">
          <div class="eyebrow">Manager dashboard</div>
          <h1 class="page-title" id="manager-greeting">Manager access</h1>
          <p class="lead" id="manager-subtitle">Loading current operator session...</p>
          <div class="status-banner" id="manager-status">Loading coordinator telemetry...</div>
        </section>

        <section class="stats-grid">
          <article class="stat">
            <strong>Jobs</strong>
            <span>Current status distribution</span>
          </article>
          <article class="stat">
            <strong>Workers</strong>
            <span>Fleet health snapshot</span>
          </article>
          <article class="stat">
            <strong>Totals</strong>
            <span>Manager, partner, and passkey counts</span>
          </article>
          <article class="stat">
            <strong>Live</strong>
            <span>Hosted through the same Fly coordinator</span>
          </article>
        </section>

        <section class="grid grid-3">
          <article class="panel">
            <h3>Jobs</h3>
            <div class="tableish" id="job-stats"></div>
          </article>
          <article class="panel">
            <h3>Workers</h3>
            <div class="tableish" id="worker-stats"></div>
          </article>
          <article class="panel">
            <h3>Totals</h3>
            <div class="tableish" id="manager-totals"></div>
          </article>
        </section>

        <section class="grid grid-1">
          <article class="panel">
            <h3>Partner balances</h3>
            <div class="tableish" id="partner-balances"></div>
          </article>
        </section>

        <section class="grid grid-2">
          <article class="panel">
            <h3>Recent jobs</h3>
            <div class="tableish" id="recent-jobs"></div>
          </article>
          <article class="panel">
            <h3>Recent coordinator events</h3>
            <div class="tableish" id="recent-events"></div>
          </article>
        </section>

        <section class="grid grid-1">
          <article class="panel">
            <h3>Worker health</h3>
            <p class="helper">
              The manager shows the latest poll, heartbeat, auth failure, and job failure context for each worker.
            </p>
            <div class="tableish" id="worker-health"></div>
          </article>
        </section>

        <section class="grid grid-2">
          <article class="panel">
            <h3>Recovery codes</h3>
            <p class="helper">
              Generate one-time recovery codes while you still have manager access. Store them offline.
            </p>
            <div class="inline-actions">
              <button class="button" id="recovery-generate-button" type="button">Generate recovery codes</button>
            </div>
            <pre class="code-panel" id="recovery-codes-output">No recovery codes generated in this session.</pre>
          </article>
        </section>

        <section class="grid grid-1">
          <article class="panel">
            <h3>Manager audit log</h3>
            <div class="tableish" id="audit-log"></div>
          </article>
        </section>
      </main>

      <footer class="footer">
        The manager is intentionally small: protected sign-in first, operational visibility second.
      </footer>
    </div>
  </body>
</html>
