{{.LiveDocumentStart}}  <script>try{const c=localStorage.getItem('pi-share:v1:sidebar-collapsed');if(c==='true')document.body.classList.add('sidebar-collapsed');}catch(e){}try{const lw=Number(localStorage.getItem('pi-share:v1:sidebar-width'));if(isFinite(lw)&&lw>0)document.documentElement.style.setProperty('--sidebar-width',Math.round(lw)+'px');}catch(e){}try{const rc=localStorage.getItem('pi-web:v1:right-sidebar-collapsed');const mobile=window.matchMedia&&window.matchMedia('(max-width: 900px)').matches;if(rc==='true'||mobile)document.body.classList.add('right-sidebar-collapsed');}catch(e){}try{const w=Number(localStorage.getItem('pi-web:v1:right-sidebar-width'));if(isFinite(w)&&w>0)document.documentElement.style.setProperty('--right-sidebar-width',Math.round(w)+'px');}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">
    <div class="session-header-left">
      <a href="/" class="session-header-back"><span>←</span> Sessions</a>
      <button id="tree-toggle" class="session-header-actions session-header-tree-toggle" title="Toggle session tree" aria-label="Toggle session tree" aria-pressed="true">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="3" y="3" width="18" height="18" rx="2"></rect>
          <path d="M9 3v18"></path>
        </svg>
      </button>
    </div>
    <span class="session-header-title" id="session-header-title">{{.Title}}</span>
    <div class="session-header-right">
      <button id="new-session-header-btn" class="session-header-new" title="New Session (⌘T)" aria-label="Start a new session">
        <span aria-hidden="true">+</span><span class="session-header-new-label">New</span>
      </button>
      <button id="shortcuts-help-btn" class="session-header-shortcuts-help" title="Show keyboard shortcuts (⌘/)">⌘/</button>
      <button id="toggle-right-sidebar-btn" class="session-header-actions" title="Toggle scratchpad (⌘⇧N)" aria-label="Toggle scratchpad">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
        </svg>
      </button>
      <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>
  </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>
          <button id="sidebar-close" class="sidebar-close" title="Close" aria-label="Close session tree">✕</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>
    <div id="content-container" class="content-container">
      <main id="content">
        <div id="header-container"></div>
        <div id="messages">{{.FirstMessageStub}}</div>
      </main>
      {{if .IsLive}}{{.ChatComposer}}{{end}}
    </div>
    {{if .IsLive}}
    <div id="right-sidebar-resizer" class="right-sidebar-resizer" role="separator" aria-orientation="vertical" aria-label="Resize scratchpad sidebar"></div>
    <aside id="right-sidebar" class="right-sidebar">
      <div class="right-sidebar-header">
        <h3>Scratchpad</h3>
        <div class="right-sidebar-actions">
          <button id="expand-right-sidebar" class="right-sidebar-btn" title="Expand scratchpad">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
            </svg>
          </button>
          <button id="close-right-sidebar" class="right-sidebar-btn" title="Hide scratchpad (⌘⇧N)">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>
      </div>
      <div class="right-sidebar-content">
        <textarea id="scratchpad-textarea" class="scratchpad-textarea" placeholder="Write project-level notes, scratchpad, tasks...">{{.Scratchpad}}</textarea>
      </div>
      <div class="right-sidebar-footer">
        <span id="scratchpad-status" class="scratchpad-status">Saved</span>
      </div>
    </aside>
    <div id="right-sidebar-backdrop" class="right-sidebar-backdrop"></div>
    {{end}}
    <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}}
{{.LiveDocumentEnd}}