page.html

<div class="page-head">
  <div>
    <p class="eyebrow">PREFERENCES &amp; ACCESS</p><h2>Settings</h2>
    <p>Engine, network paths, device tokens, and browser tools for this gateway.</p>
  </div>
</div>

<div class="card" id="engine-settings-card">
  <div class="section-heading">
    <h2>Speech engine</h2>
  </div>
  <p class="muted">Local engine that transcribes audio. Choosing a model under
     Models usually sets this for you. Only engines this machine can run are listed.</p>
  <form hx-put="/ui/partials/config" hx-target="#engine-result" hx-swap="innerHTML">
    <div class="settings-grid">
      <label class="settings-field">
        <span>Engine</span>
        <select name="engine">
          {% for value, label in engine_options %}
          <option value="{{ value }}"{% if value == config.engine %} selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </label>
      <label class="settings-field">
        <span>Compute device</span>
        <select name="compute_device">
          {% for value, label in device_options %}
          <option value="{{ value }}"{% if value == config.compute_device %} selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </label>
      <label class="settings-field">
        <span>Precision</span>
        <select name="compute_type">
          {% for value, label in precision_options %}
          <option value="{{ value }}"{% if value == config.compute_type %} selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </label>
      <label class="settings-field">
        <span>CPU threads</span>
        <input name="cpu_threads" type="number" min="0" max="256"
               value="{{ config.cpu_threads }}" aria-describedby="threads-hint" />
      </label>
    </div>
    <p id="threads-hint" class="muted small settings-hint">0 means automatic
       thread count. INT8 is usually fastest on Linux CPUs. VocaMac and Handy
       reuse those Mac apps and their own models.</p>
    <div class="memory-policy">
      <label class="memory-policy-toggle" for="idle-offload-enabled">
        <input id="idle-offload-enabled" name="idle_offload_enabled" type="checkbox"
               value="true"{% if config.idle_offload_enabled %} checked{% endif %} />
        <span>
          <strong>Offload model when idle</strong>
          <small>Release supported resident models from memory after no transcription activity.</small>
        </span>
      </label>
      <label class="settings-field memory-policy-timeout">
        <span>Idle time</span>
        <select name="idle_offload_minutes">
          {% for value, label in idle_offload_options %}
          <option value="{{ value }}"{% if value == config.idle_offload_minutes %} selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </label>
    </div>
    <p class="muted small settings-hint">The next transcription loads an offloaded model again.
       One-shot engines such as Handy do not keep a model resident.</p>
    <div class="row settings-actions">
      <button type="submit" class="primary">Save settings</button>
    </div>
  </form>
  <p id="engine-result" class="muted settings-engine-result">{{ engine_hint }}</p>
</div>

<div class="card" id="network-settings-card">
  <div class="section-heading">
    <h2>Network and storage</h2>
  </div>
  <p class="muted">Where this process listens and where it keeps config and
     models on disk.</p>
  <dl class="facts settings-facts">
    <dt>Listener</dt><dd><code>{{ listener }}</code></dd>
    <dt>On this host</dt><dd><code>{{ local_url }}</code></dd>
    {% for label, value in paths %}
    <dt>{{ label }}</dt><dd>{{ value }}</dd>
    {% endfor %}
  </dl>
</div>

{{ tokens_html }}

<div class="card" id="browser-settings-card">
  <div class="section-heading">
    <h2>This browser</h2>
  </div>
  <p class="muted">Diagnostics are a redacted snapshot for bug reports
     (setup, dependencies, hardware, counters). No token, recordings, or
     transcripts. The gateway token lives only in this browser&rsquo;s storage.</p>
  <div class="row settings-actions">
    <button id="download-diagnostics" type="button" class="ghost">
      Download diagnostics
    </button>
    <button id="forget-token" type="button" class="ghost danger">Forget token</button>
  </div>
</div>