<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{{TITLE}}</title>
    <style>{{STYLE}}</style>
  </head>
  <body>
    <header class="page-header">
      <h1>Session Export</h1>
      <p><strong>Session ID:</strong> {{SESSION_ID}}</p>
      <p><strong>Name:</strong> {{SESSION_NAME}}</p>
    </header>
    <div class="export-layout">
    <aside class="sidebar">
      <h2>Navigate</h2>
      <a href="#context-usage">Context Usage</a>
      <a href="#session-tree">Session Tree</a>
      <a href="#tool-calls">Tool Calls</a>
      <a href="#tool-results">Tool Results</a>
      <a href="#transcript">Transcript</a>
    </aside>
    <main>
      <section>
        <h2 id="context-usage">Context Usage</h2>
        <ul>
          <li>Entries: {{ENTRY_COUNT}}</li>
          <li>Messages: {{MESSAGE_COUNT}}</li>
          <li>Active Tools: {{ACTIVE_TOOL_COUNT}}</li>
          <li>Estimated Context Tokens: {{ESTIMATED_CONTEXT_TOKENS}}</li>
        </ul>
      </section>
      <section>
        <h2 id="session-tree">Session Tree</h2>
        <div class="tree-summary">{{SESSION_TREE}}</div>
      </section>
      {{TOOL_SECTIONS}}
      <section>
        <h2 id="transcript">Transcript</h2>
        <div class="transcript-controls">
          <label>Search <input id="transcript-search" type="search" placeholder="Search transcript" /></label>
          <label>Type
            <select id="message-type-filter">
              <option value="">All</option>
              <option value="user">User</option>
              <option value="assistant">Assistant</option>
              <option value="tool-result">Tool Result</option>
              <option value="branch-summary">Branch Summary</option>
              <option value="compaction-summary">Compaction Summary</option>
              <option value="custom">Custom</option>
            </select>
          </label>
          <span id="transcript-count"></span>
        </div>
        <div class="timeline">{{TRANSCRIPT}}</div>
      </section>
    </main>
    </div>
    <script id="session-data" type="application/json">{{SESSION_DATA}}</script>
    <script>{{SCRIPT}}</script>
  </body>
</html>
