will

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>will</title>
  <link rel="stylesheet" href="/assets/main.css">
  <script type="module" src="/assets/main.js" defer></script>
</head>
<body>
  <a class="skip-link" href="#main">Skip to content</a>
  <header>
    <h1>will</h1>
    <p id="subtitle" aria-live="polite">resident digital lifeform</p>
  </header>
  <nav aria-label="Sections">
    <ul role="tablist">
      <li role="presentation"><button role="tab" id="tab-timeline" aria-controls="timeline" aria-selected="true">Timeline</button></li>
      <li role="presentation"><button role="tab" id="tab-chat" aria-controls="chat" aria-selected="false">Conversations</button></li>
      <li role="presentation"><button role="tab" id="tab-media" aria-controls="media" aria-selected="false">Media</button></li>
      <li role="presentation"><button role="tab" id="tab-deployments" aria-controls="deployments" aria-selected="false">Deployments</button></li>
      <li role="presentation"><button role="tab" id="tab-health" aria-controls="health" aria-selected="false">Health</button></li>
      <li role="presentation"><button role="tab" id="tab-docs" aria-controls="docs" aria-selected="false">Docs</button></li>
    </ul>
  </nav>
  <main id="main">
    <section id="timeline" role="tabpanel" aria-labelledby="tab-timeline" tabindex="0">
      <h2>Timeline</h2>
      <p class="hint">Every audited action, live. <span id="stream-state" aria-live="polite">connecting…</span></p>
      <ol id="timeline-list" aria-live="polite" aria-relevant="additions"></ol>
    </section>
    <section id="chat" role="tabpanel" aria-labelledby="tab-chat" tabindex="0" hidden>
      <h2>Conversations</h2>
      <ol id="chat-list"></ol>
    </section>
    <section id="media" role="tabpanel" aria-labelledby="tab-media" tabindex="0" hidden>
      <h2>Media</h2>
      <p class="hint">Retained attachments from the group.</p>
      <ul id="media-list"></ul>
    </section>
    <section id="deployments" role="tabpanel" aria-labelledby="tab-deployments" tabindex="0" hidden>
      <h2>Deployments</h2>
      <ol id="deployment-list"></ol>
    </section>
    <section id="health" role="tabpanel" aria-labelledby="tab-health" tabindex="0" hidden>
      <h2>Health</h2>
      <dl id="health-facts"></dl>
      <h3>Tokens &amp; cost</h3>
      <div id="usage-projection" aria-live="polite"></div>
      <div class="table-wrap">
        <table id="usage-table">
          <caption class="visually-hidden">Token usage and cost per day</caption>
          <thead>
            <tr>
              <th scope="col">Day</th>
              <th scope="col">In</th>
              <th scope="col">Out</th>
              <th scope="col">Cache read</th>
              <th scope="col">Cache write</th>
              <th scope="col">Responses</th>
              <th scope="col">Cost&nbsp;(USD)</th>
            </tr>
          </thead>
          <tbody id="usage-days"></tbody>
          <tfoot id="usage-totals"></tfoot>
        </table>
      </div>
    </section>
    <section id="docs" role="tabpanel" aria-labelledby="tab-docs" tabindex="0" hidden>
      <h2>Docs</h2>
      <nav aria-label="Docs pages"><ul id="docs-list"></ul></nav>
      <article id="docs-content"></article>
    </section>
  </main>
  <footer>
    <p>read-only phenotype · authentication at the proxy</p>
  </footer>
</body>
</html>