{{.LiveDocumentStart}}
  {{.ThemeBoot}}

  <button id="theme-toggle" class="theme-toggle-btn" title="Toggle light/dark theme" style="position:fixed;top:10px;right:10px;z-index:102;padding:4px 10px;font-size:11px;font-family:inherit;background:var(--container-bg);color:var(--muted);border:1px solid var(--dim);border-radius:3px;cursor:pointer;"><span data-theme-icon></span>Theme</button>
  <div class="session-header-bar export-only">
    <span class="session-header-title" id="session-header-title">{{.Title}}</span>
  </div>
  <button id="hamburger" title="Open sidebar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2" /><path d="M9 3v18" /></svg></button>

  <div id="sidebar-overlay"></div>
  <div id="app">
    <aside id="sidebar">
      <div class="sidebar-header">
        <div class="sidebar-controls">
          <input type="text" class="sidebar-search" id="tree-search" placeholder="Search...">
          <button id="hide-sidebar" class="hide-sidebar" title="Hide sidebar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2" /><path d="M9 3v18" /><path d="m16 15-3-3 3-3" /></svg></button>
          <button id="sidebar-close" class="sidebar-close" title="Close" aria-label="Close session tree"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg></button>
        </div>
        <div class="sidebar-filters">
          <button class="filter-btn active" data-filter="default" title="Hide settings entries">Default</button>
          <button class="filter-btn" data-filter="no-tools" title="Default minus tool results">No-tools</button>
          <button class="filter-btn" data-filter="user-only" title="Only user messages">User</button>
          <button class="filter-btn" data-filter="labeled-only" title="Only labeled entries">Labeled</button>
          <button class="filter-btn" data-filter="all" title="Show everything">All</button>
        </div>
      </div>
      <!-- #tree-container / #tree-status are rendered by the Svelte
           <SessionTreeNodes> component mounted into #sidebar by export.js. -->
    </aside>
    <div id="sidebar-resizer" role="separator" aria-orientation="vertical" aria-label="Resize session tree sidebar"></div>
    <div id="content-container" class="content-container">
      <main id="content">
        <div id="header-container"></div>
        <div id="messages"></div>
      </main>
    </div>
    <div id="image-modal-host"></div>
  </div>

  <script id="session-data" type="application/json">{{.SessionData}}</script>

{{.SessionScript}}
{{.LiveDocumentEnd}}