{{.LiveDocumentStart}}  <script>try{const c=localStorage.getItem('pi-share:v1:sidebar-collapsed');if(c==='true')document.body.classList.add('sidebar-collapsed');}catch(e){}</script>
  {{.ThemeBoot}}
  {{.ServiceWorker}}

  {{if .IsLive}}
  <!-- Hidden buttons for backward-compat JS handlers -->
  <div style="display:none">
    <button id="theme-toggle" title="Toggle light/dark theme">Theme</button>
    <button id="notify-toggle" title="Notify when response is ready" aria-pressed="false">Notify</button>
    <button id="resume-btn" title="Copy pi --session command to clipboard">Terminal</button>
    <button id="new-btn" title="New Session">Session</button>
    <button id="share-btn" title="Share session as GitHub Gist">Share</button>
  </div>

  <div class="session-header-bar">
    <a href="/" class="session-header-back"><span>←</span> Sessions</a>
    <span class="session-header-title" id="session-header-title">{{.Title}}</span>
    <button id="command-menu-btn" class="session-header-actions" aria-label="Session actions" aria-haspopup="menu" aria-expanded="false" aria-controls="command-menu-popover">⋯</button>
  </div>

  <!-- Desktop popover menu -->
  {{.SessionCommandMenu}}

  <!-- Mobile dropdown menu -->
  <div id="mobile-command-backdrop" class="mobile-command-backdrop" style="display: none;"></div>
  {{.MobileCommandMenu}}

  {{.SessionPalette}}
  {{else}}
  <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 width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="12" r="2.5"/><rect x="5" y="6" width="2" height="12"/><path d="M6 12h10c1 0 2 0 2-2V8"/></svg></button>
  {{end}}

  <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 width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none">
                <circle cx="18" cy="6" r="2.5"></circle>
                <circle cx="18" cy="18" r="2.5"></circle>
                <circle cx="6" cy="12" r="2.5"></circle>

                <rect x="17" y="6" width="2" height="12"></rect>

                <path d="M18 12H8c-1 0-2 0-2-2V8"></path>
              </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>
      <div class="tree-container" id="tree-container"></div>
      <div class="tree-status" id="tree-status"></div>
    </aside>
    <div id="sidebar-resizer" role="separator" aria-orientation="vertical" aria-label="Resize session tree sidebar"></div>
    <main id="content">
      <div id="header-container"></div>
      <div id="messages">{{.FirstMessageStub}}</div>
    </main>
    <div id="image-modal" class="image-modal">
      <img id="modal-image" src="" alt="">
    </div>
  </div>

  <div id="share-overlay" class="share-overlay-backdrop" style="display: none;">
    <div id="share-dialog" class="share-dialog">
      <h3 id="share-title"></h3>
      <div id="share-fields">
        <div class="share-field"><label>Gist URL</label><input id="share-gist-url" readonly class="share-url-input" onclick="this.select()"></div>
        <div class="share-field"><label>Preview URL</label><input id="share-preview-url" readonly class="share-url-input" onclick="this.select()"></div>
      </div>
      <p id="share-error-message" class="share-error-message" style="display: none;"></p>
      <div class="share-actions">
        <button id="share-copy-gist" class="share-btn-primary" data-copy-label="Gist">Copy Gist</button>
        <button id="share-copy-preview" class="share-btn-secondary" data-copy-label="Preview">Copy Preview</button>
        <button id="share-close" class="share-btn-secondary">Close</button>
      </div>
    </div>
  </div>
  <div id="share-copy-notice" class="toast-notice"></div>

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

{{.SessionScript}}
{{if .IsLive}}
{{.ChatComposer}}
{{end}}
{{.LiveDocumentEnd}}