{{ liveDocumentStart "Settings — Pi Sessions" (settingsPreload) (settingsStylesheets) }}
{{ liveThemeBootScript }}
<div class="settings-page">
  <div class="settings-header">
    <a class="settings-back" href="/" data-settings-back><span aria-hidden="true">←</span><span data-settings-back-label>Sessions</span></a>
    <h1>Settings</h1>
  </div>

  <section class="settings-section">
    <div class="settings-section-title">Appearance</div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Theme</span>
        <span class="hint">Applies to every browser pointed at this instance.</span>
      </div>
      <div class="settings-control">
        <select data-setting="pi-web-theme" data-setting-theme>
          <option value="dark">Dark</option>
          <option value="light">Light</option>
          <option value="nord">Nord</option>
          <option value="dracula">Dracula</option>
          <option value="custom">Custom</option>
        </select>
      </div>
    </div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Interface font</span>
        <span class="hint">Font for the app UI — menus, lists, headers.</span>
      </div>
      <div class="settings-control settings-font-control">
        <select data-font-select="ui">
          <optgroup label="Built-in">
            <option value="mono">Monospace</option>
            <option value="system">System</option>
            <option value="sans">Sans-serif</option>
            <option value="serif">Serif</option>
          </optgroup>
          <optgroup label="Actions">
            <option value="__detect__">Detect installed fonts…</option>
            <option value="__custom__">Custom…</option>
          </optgroup>
        </select>
        <input type="text" class="settings-font-custom" data-font-custom="ui" placeholder="Font family name" hidden>
      </div>
    </div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Interface font size</span>
        <span class="hint">Size of the app UI text (px).</span>
      </div>
      <div class="settings-control">
        <input type="number" min="8" max="32" data-setting="pi-web:v1:font-ui-size" data-setting-size="ui">
      </div>
    </div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Content font</span>
        <span class="hint">Font for rendered message content. Code stays monospace.</span>
      </div>
      <div class="settings-control settings-font-control">
        <select data-font-select="content">
          <optgroup label="Built-in">
            <option value="mono">Monospace</option>
            <option value="system">System</option>
            <option value="sans">Sans-serif</option>
            <option value="serif">Serif</option>
          </optgroup>
          <optgroup label="Actions">
            <option value="__detect__">Detect installed fonts…</option>
            <option value="__custom__">Custom…</option>
          </optgroup>
        </select>
        <input type="text" class="settings-font-custom" data-font-custom="content" placeholder="Font family name" hidden>
      </div>
    </div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Content font size</span>
        <span class="hint">Size of rendered message text (px).</span>
      </div>
      <div class="settings-control">
        <input type="number" min="8" max="32" data-setting="pi-web:v1:font-content-size" data-setting-size="content">
      </div>
    </div>
  </section>

  <section class="settings-section">
    <div class="settings-section-title">Sessions List</div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Spinner style</span>
        <span class="hint">Animation shown next to running sessions.</span>
      </div>
      <div class="settings-control">
        <select data-setting="pi-sessions:spinner-style">
          <option value="runcat">Runcat</option>
          <option value="braille">Braille</option>
        </select>
      </div>
    </div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Default layout</span>
        <span class="hint">How the sessions list is grouped on load.</span>
      </div>
      <div class="settings-control">
        <select data-setting="pi-sessions:view-layout">
          <option value="timeline">Timeline</option>
          <option value="projects">Projects</option>
        </select>
      </div>
    </div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Show btw chats in list</span>
        <span class="hint">Include the throwaway btw scratch-chats in the sessions list. Hidden by default.</span>
      </div>
      <div class="settings-control">
        <label class="settings-toggle">
          <input type="checkbox" data-setting="pi-web:v1:show-btw-in-index" data-setting-bool>
          <span class="slider"></span>
        </label>
      </div>
    </div>
  </section>

  <section class="settings-section">
    <div class="settings-section-title">Session Titles</div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Auto-generate titles</span>
        <span class="hint">Let pi-web name sessions automatically from the first message.</span>
      </div>
      <div class="settings-control">
        <label class="settings-toggle">
          <input type="checkbox" data-setting="pi-web:v1:auto-title:enabled" data-setting-bool>
          <span class="slider"></span>
        </label>
      </div>
    </div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">When to title</span>
        <span class="hint">Title a session once, or refresh it as the focus shifts.</span>
      </div>
      <div class="settings-control">
        <select data-setting="pi-web:v1:auto-title:mode">
          <option value="once">Once per session</option>
          <option value="each-turn">Every new message</option>
        </select>
      </div>
    </div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Title model</span>
        <span class="hint">Built-in is a free, instant word heuristic (no AI). Pick a model for smarter titles — a small, fast one is ideal.</span>
      </div>
      <div class="settings-control">
        <select data-setting="pi-web:v1:auto-title:model" data-auto-title-model>
          <option value="">Built-in heuristic (no AI)</option>
        </select>
      </div>
    </div>
  </section>

  <section class="settings-section">
    <div class="settings-section-title">Notifications</div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Notify when a response is ready</span>
        <span class="hint">Plays a sound and shows a notification when chat completes.</span>
      </div>
      <div class="settings-control">
        <label class="settings-toggle">
          <input type="checkbox" data-setting="pi-share:v1:notify-on-done" data-setting-bool data-setting-notify>
          <span class="slider"></span>
        </label>
      </div>
    </div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Done sound</span>
        <span class="hint">Sound played when a response is ready.</span>
      </div>
      <div class="settings-control">
        <select data-setting="pi-share:v1:done-sound" data-setting-sound></select>
      </div>
    </div>
  </section>

  <section class="settings-section">
    <div class="settings-section-title">Cat Gatekeeper</div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Enable Cat Gatekeeper</span>
        <span class="hint">A cat appears when it is time to rest.</span>
      </div>
      <div class="settings-control">
        <label class="settings-toggle">
          <input type="checkbox" data-setting="pi-web:v1:cat:enabled" data-setting-bool>
          <span class="slider"></span>
        </label>
      </div>
    </div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Focus time (minutes)</span>
        <span class="hint">Uninterrupted work before the cat appears.</span>
      </div>
      <div class="settings-control">
        <input type="number" min="1" max="240" data-setting="pi-web:v1:cat:focus-min">
      </div>
    </div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Break time (minutes)</span>
        <span class="hint">How long the cat keeps you away.</span>
      </div>
      <div class="settings-control">
        <input type="number" min="1" max="120" data-setting="pi-web:v1:cat:break-min">
      </div>
    </div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Bedtime</span>
        <span class="hint">When the cat says goodnight.</span>
      </div>
      <div class="settings-control">
        <input type="time" data-setting="pi-web:v1:cat:bedtime">
      </div>
    </div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Wakeup</span>
        <span class="hint">When the cat lets you back in.</span>
      </div>
      <div class="settings-control">
        <input type="time" data-setting="pi-web:v1:cat:wakeup">
      </div>
    </div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Sleep reminder (minutes)</span>
        <span class="hint">How long the sleepy cat stays before locking.</span>
      </div>
      <div class="settings-control">
        <input type="number" min="1" max="60" data-setting="pi-web:v1:cat:sleep-min">
      </div>
    </div>
  </section>

  <section class="settings-section">
    <div class="settings-section-title">About</div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Documentation</span>
        <span class="hint">Guides and architecture docs for pi-web.</span>
      </div>
      <div class="settings-control">
        <a class="settings-link" href="https://github.com/ygncode/pi-web/tree/main/docs" target="_blank" rel="noreferrer">Open docs</a>
      </div>
    </div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">GitHub</span>
        <span class="hint">If pi-web is useful to you, please give the repo a ⭐.</span>
      </div>
      <div class="settings-control">
        <a class="settings-link" href="https://github.com/ygncode/pi-web" target="_blank" rel="noreferrer">Star on GitHub</a>
      </div>
    </div>
    <div class="settings-row">
      <div class="settings-row-label">
        <span class="name">Sponsor</span>
        <span class="hint">Support continued development of pi-web by sponsoring the creator.</span>
      </div>
      <div class="settings-control">
        <a class="settings-link" href="https://github.com/sponsors/setkyar" target="_blank" rel="noreferrer">Become a sponsor</a>
      </div>
    </div>
  </section>

  <div class="settings-saved-hint" data-settings-saved>Saved</div>
</div>

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