{{ liveDocumentStart "Pi Sessions" (indexPreload) (indexStylesheets) }}
{{ liveThemeBootScript }}
<script>
(function(){
  try{
    var savedLayout = localStorage.getItem('pi-sessions:view-layout');
    document.documentElement.dataset.sessionLayout = savedLayout === 'projects' ? 'projects' : 'timeline';
  }catch(e){ document.documentElement.dataset.sessionLayout = 'timeline'; }
})();
</script>
<div class="header">
  <div class="header-inner">
    <div class="header-top">
      <h1><span class="pi-logo-mark" aria-hidden="true"></span><span>Sessions</span></h1>
      <div class="header-actions">
        <button class="nav-search-btn" id="open-search" type="button" aria-haspopup="dialog" aria-controls="sessionPalette"><span>Search sessions...</span><kbd>⌘K</kbd></button>
        <button class="nav-menu-btn" id="web-menu-btn" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="web-menu">⋯</button>
      </div>
    </div>
    <div class="workspace-summary">
      <div class="workspace-stats">
        <span>{{ len . }} sessions</span>
        <span class="stat-running" id="statRunning" data-running-stat><span class="status-dot" aria-hidden="true"></span><span data-running-count>0</span><span class="stat-running-label"> active</span></span>
      </div>
      <div class="layout-toggle" aria-label="Session layout">
        <button type="button" data-layout-btn="timeline" aria-pressed="true">Timeline</button>
        <button type="button" data-layout-btn="projects">Projects</button>
      </div>
    </div>
  </div>
</div>

<div id="web-menu-backdrop" class="mobile-command-backdrop" style="display: none;"></div>
{{ homeMenu }}

<button class="new-session-btn new-session-btn-mobile" id="newSessionBtn" type="button" data-new-session-btn aria-label="Start a new session" title="Start new session">+</button>

{{ paletteHTML }}
<div class="content" data-sessions-content>
  {{ if eq (len .) 0 }}
  <div class="empty-state">
    <h3>No sessions to show</h3>
    <p>Enable projects from the menu (⋯ → Manage Projects) to see their sessions.</p>
  </div>
  {{ end }}
  {{ $currentProject := "" }}
  {{ range . }}
    {{ if ne .Project $currentProject }}
      {{ if ne $currentProject "" }}</div></div>{{ end }}
      <div class="project-group" data-project="{{ .Project | html }}">
        <button class="project-toggle" type="button" aria-expanded="true">
          <svg class="project-chevron" viewBox="0 0 12 12" aria-hidden="true"><path fill="currentColor" d="M3 4 L9 4 L6 8 Z"/></svg>
          <span class="project-name">{{ .Project | html }}</span>
          <span class="project-count" data-project-count data-running="0">0</span>
        </button>
        <div class="session-grid">
      {{ $currentProject = .Project }}
    {{ end }}
    <a class="session-card" href="/session?id={{ .ID }}" data-id="{{ .ID }}" data-session-id="{{ .ID }}" data-search="{{ .Name | html }} {{ .Project | html }}">
      <div class="session-title-row">
        <div class="session-title">{{ .Name | html }}</div>
        <div class="session-card-flags">
          {{ if not .ChatAvailable }}<span class="session-card-badge" title="This session can be viewed, but chat is disabled because its working directory no longer exists.">View only</span>{{ end }}
        </div>
      </div>
      <div class="session-project">{{ .Project | html }}</div>
      <div class="session-model" data-session-model>{{ if .Model }}{{ if .ModelProvider }}{{ .ModelProvider | html }}/{{ end }}{{ .Model | html }}{{ end }}</div>
      <div class="session-meta">
        <span class="session-active-status" data-running-status><span aria-hidden="true">●</span> active</span>
        <span class="session-time" data-timestamp="{{ .LastActivity }}" title="{{ .LastActivity }}">{{ fmtRelativeTime .LastActivity }}</span>
        <span class="session-run-model" data-running-model></span>
      </div>
    </a>
  {{ end }}
  {{ if ne $currentProject "" }}</div></div>{{ end }}
</div>
<div class="modal-overlay" id="modalOverlay">
  <div class="modal">
    <div class="modal-sheet-header">
      <button class="modal-sheet-back" id="modalBackBtn" type="button" aria-label="Close Start a new session">
        <span aria-hidden="true">←</span>
        <span>Start a new session</span>
      </button>
    </div>
    <h2>Start a new session</h2>
    <div class="recent-locations" id="recentLocations"></div>
    <input type="text" id="sessionPath"
           placeholder="/path/to/project or ~/project">
    <div class="modal-actions">
      <button class="btn-secondary" id="cancelBtn">Cancel</button>
      <button class="btn-primary" id="createBtn">Create</button>
    </div>
    <div class="modal-error" id="modalError"></div>
  </div>
</div>
<div class="modal-overlay" id="projectsModalOverlay">
  <div class="modal">
    <div class="modal-sheet-header">
      <button class="modal-sheet-back" id="projectsModalBackBtn" type="button" aria-label="Close Manage projects">
        <span aria-hidden="true">←</span>
        <span>Manage projects</span>
      </button>
    </div>
    <h2>Manage projects</h2>
    <label class="projects-filter-switch">
      <span class="projects-filter-text">
        <span class="projects-filter-title">Filter projects</span>
        <span class="projects-filter-desc" id="projectsFilterDesc">All projects are shown.</span>
      </span>
      <span class="switch"><input type="checkbox" id="projectsFilterToggle"><span class="switch-slider"></span></span>
    </label>
    <div class="projects-config" id="projectsConfig">
      <div class="projects-toolbar">
        <input type="search" id="projectsSearch" class="projects-search" placeholder="Search projects…" autocomplete="off">
        <button class="projects-bulk-btn" id="projectsToggleAllBtn" type="button">Deselect all</button>
      </div>
      <div class="projects-list" id="projectsList" data-projects-list></div>
    </div>
    <div class="projects-footer">
      <label class="projects-footer-label" for="projectsAddPath">Register a folder</label>
      <input type="text" id="projectsAddPath" placeholder="/path/to/project or ~/project">
      <div class="modal-error" id="projectsModalError"></div>
      <div class="modal-actions">
        <button class="btn-secondary" id="projectsDoneBtn" type="button">Done</button>
        <button class="btn-primary" id="projectsAddBtn" type="button">Add</button>
      </div>
    </div>
  </div>
</div>

{{ liveServiceWorkerScript }}
<script type="module" src="{{ indexScript }}"></script>
{{ liveDocumentEnd }}