partials_models_browser.html

{{define "models_browser"}}
<div id="models-browser">
  <div class="catalog-toolbar">
    <div class="catalog-tabs">
    <button type="button" class="btn btn--small {{if eq .CatalogProvider "openrouter"}}btn--primary{{else}}btn--ghost{{end}}"
            hx-get="/models?provider=openrouter&full=1&view={{.Filters.View}}{{if .Filters.ActivePreset}}&preset={{.Filters.ActivePreset}}{{end}}"
            hx-target="#models-browser"
            hx-swap="outerHTML">OpenRouter</button>
    <button type="button" class="btn btn--small {{if eq .CatalogProvider "gemini"}}btn--primary{{else}}btn--ghost{{end}}"
            hx-get="/models?provider=gemini&full=1&view={{.Filters.View}}{{if .Filters.ActivePreset}}&preset={{.Filters.ActivePreset}}{{end}}"
            hx-target="#models-browser"
            hx-swap="outerHTML">Gemini</button>
    </div>
    <div class="catalog-view-toggle" role="group" aria-label="Catalog view">
      <button type="button" class="btn btn--small {{if ne .Filters.View "table"}}btn--primary{{else}}btn--ghost{{end}}"
              hx-get="/models?full=1"
              hx-target="#models-browser"
              hx-swap="outerHTML"
              hx-include="#models-filters"
              hx-vals='{"view":"cards"}'>Cards</button>
      <button type="button" class="btn btn--small {{if eq .Filters.View "table"}}btn--primary{{else}}btn--ghost{{end}}"
              hx-get="/models?full=1"
              hx-target="#models-browser"
              hx-swap="outerHTML"
              hx-include="#models-filters"
              hx-vals='{"view":"table"}'>Audit table</button>
    </div>
  </div>
  <form id="models-filters" class="filters"
        hx-get="/models"
        hx-target="#models-content"
        hx-swap="outerHTML"
        hx-trigger="input delay:300ms, change">
    <input type="hidden" name="provider" value="{{.CatalogProvider}}">
    <input type="hidden" name="view" value="{{.Filters.View}}">
    {{if .Filters.ActivePreset}}<input type="hidden" name="preset" value="{{.Filters.ActivePreset}}">{{end}}
    <input class="form-input" type="search" name="q" placeholder="Search model id…"
           value="{{.Filters.Search}}" style="flex:1;min-width:12rem;">
    <label><input type="checkbox" name="free"      {{if .Filters.Free}}checked{{end}}> Free</label>
    <label><input type="checkbox" name="vision"    {{if .Filters.Vision}}checked{{end}}> Vision</label>
    <label><input type="checkbox" name="tools"     {{if .Filters.Tools}}checked{{end}}> Tools</label>
    <label><input type="checkbox" name="reasoning" {{if .Filters.Reasoning}}checked{{end}}> Reasoning</label>
    <select class="form-input catalog-sort" name="sort" title="Sort models">
      <option value="prompt" {{if eq .Filters.Sort "prompt"}}selected{{end}}>Prompt price</option>
      <option value="completion" {{if eq .Filters.Sort "completion"}}selected{{end}}>Completion price</option>
      <option value="effective" {{if eq .Filters.Sort "effective"}}selected{{end}}>Effective price</option>
      <option value="score" {{if eq .Filters.Sort "score"}}selected{{end}}>Intel</option>
      <option value="coding" {{if eq .Filters.Sort "coding"}}selected{{end}}>Coding</option>
      <option value="agentic" {{if eq .Filters.Sort "agentic"}}selected{{end}}>Agentic</option>
      <option value="speed" {{if eq .Filters.Sort "speed"}}selected{{end}}>Speed</option>
      <option value="ttft" {{if eq .Filters.Sort "ttft"}}selected{{end}}>TTFT</option>
      <option value="context" {{if eq .Filters.Sort "context"}}selected{{end}}>Context</option>
      <option value="market" {{if eq .Filters.Sort "market"}}selected{{end}}>Market</option>
      <option value="value" {{if eq .Filters.Sort "value"}}selected{{end}}>Value</option>
      <option value="id" {{if eq .Filters.Sort "id"}}selected{{end}}>Model id</option>
    </select>
    <select class="form-input catalog-sort-dir" name="dir" title="Sort direction">
      <option value="asc" {{if eq .Filters.SortDir "asc"}}selected{{end}}>Asc</option>
      <option value="desc" {{if eq .Filters.SortDir "desc"}}selected{{end}}>Desc</option>
    </select>
  </form>
  {{template "models_content" .}}
</div>
{{end}}

{{define "models_content"}}
<div id="models-content">
  {{if .Filters.ActivePreset}}
  <div class="preset-banner">
    <div>
      <strong>Suggesting for role:</strong> <code>{{.Filters.ActivePreset}}</code>
      <span style="color:var(--text-secondary);margin-left:0.5rem;">— {{len .Models}} candidates</span>
      <div class="preset-meta">{{.Filters.PresetDescription}}</div>
      {{if .Filters.ValueLeaderID}}
      <div class="preset-meta" style="margin-top:0.25rem;">
        <strong>Best value:</strong> <code>{{.Filters.ValueLeaderID}}</code>
        <span style="color:var(--text-secondary);">— {{.Filters.ValueLeaderHint}}</span>
      </div>
      {{end}}
      <details>
        <summary>How recommendations work</summary>
        <div class="formula">
          <strong>Pareto frontier:</strong> a model is kept iff no other candidate has both higher quality AND lower price. Frontier is then sorted by quality descending, so the top row is the best achievable quality under the filters.
          <br><br>
          <strong>Best value (knee point):</strong> among frontier models with quality ≥ 50% of the top, pick the one that maximises <code>quality / price</code>. Shown separately only when it's <em>not</em> the top-quality model — i.e., when there's a real trade-off to make.
          <br><br>
          <strong>Price axis</strong> uses blended 3:1 input/output cost for chat roles and completion cost for compaction.
          <br><br>
          <strong>Effective prompt</strong> (Eff$ column) accounts for capability fallback:
          for <code>simple</code>/<code>default</code>/<code>complex</code>, non-vision candidates are charged
          <code>0.9 × prompt + 0.1 × multimodal_slot.prompt</code> because image messages route to the multimodal slot. Assumes 10% of messages contain images. Vision-capable models pay nominal price.
          <br><br>
          <strong>Quality axis</strong> is role-specific:
          <code>default</code>/<code>complex</code> → best available AA Agentic/Coding/Intelligence signal;
          <code>multimodal</code>/<code>compaction</code> → best available AA Intelligence/Coding signal;
          <code>simple</code>/<code>classifier</code> → TTFT, throughput, then AA quality.
        </div>
      </details>
    </div>
    <button class="btn btn--ghost btn--small"
            hx-get="/models?provider={{.CatalogProvider}}&view={{.Filters.View}}&full=1"
            hx-target="#models-browser"
            hx-swap="outerHTML">
      × Clear preset
    </button>
  </div>
  {{end}}

  {{if eq .Filters.View "table"}}
    {{template "models_table" .}}
  {{else}}
    {{template "models_cards" .}}
  {{end}}
</div>
{{end}}

{{define "models_table"}}
<div class="table-wrap catalog-audit-table">
  <table>
    <thead>
      <tr>
        {{- $s := .Filters.Sort}}{{- $d := .Filters.SortDir}}
        <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters"
              hx-vals='{"sort":"id","dir":"{{if and (eq $s "id") (eq $d "asc")}}desc{{else}}asc{{end}}"}'
              style="cursor:pointer" title="Model identifier on OpenRouter (provider/model)">Model{{if eq $s "id"}} {{if eq $d "asc"}}↑{{else}}↓{{end}}{{end}}</th>
          <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters"
              hx-vals='{"sort":"prompt","dir":"{{if and (eq $s "prompt") (eq $d "asc")}}desc{{else}}asc{{end}}"}'
              style="cursor:pointer" title="USD per 1M prompt (input) tokens on OpenRouter">Prompt{{if eq $s "prompt"}} {{if eq $d "asc"}}↑{{else}}↓{{end}}{{end}}</th>
          <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters"
              hx-vals='{"sort":"completion","dir":"{{if and (eq $s "completion") (eq $d "asc")}}desc{{else}}asc{{end}}"}'
              style="cursor:pointer" title="USD per 1M completion (output) tokens on OpenRouter">Completion{{if eq $s "completion"}} {{if eq $d "asc"}}↑{{else}}↓{{end}}{{end}}</th>
          <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters"
              hx-vals='{"sort":"effective","dir":"{{if and (eq $s "effective") (eq $d "asc")}}desc{{else}}asc{{end}}"}'
              style="cursor:pointer" title="Effective prompt price including vision fallback. For non-vision candidates under simple/default/complex: 0.9 × prompt + 0.1 × multimodal_slot.prompt. Equal to Prompt for vision-capable models.">Eff${{if eq $s "effective"}} {{if eq $d "asc"}}↑{{else}}↓{{end}}{{end}}</th>
          <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters"
              hx-vals='{"sort":"markup","dir":"{{if and (eq $s "markup") (eq $d "asc")}}desc{{else}}asc{{end}}"}'
              style="cursor:pointer" title="(OR blended - AA blended) / AA blended × 100, where blended = (3 × prompt + completion) / 4. Negative = OR cheaper than AA reference (usually routes to a budget upstream). Positive = OR charges a margin.">Markup{{if eq $s "markup"}} {{if eq $d "asc"}}↑{{else}}↓{{end}}{{end}}</th>
          <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters"
              hx-vals='{"sort":"context","dir":"{{if and (eq $s "context") (eq $d "desc")}}asc{{else}}desc{{end}}"}'
              style="cursor:pointer" title="Maximum context window size (tokens)">Context{{if eq $s "context"}} {{if eq $d "asc"}}↑{{else}}↓{{end}}{{end}}</th>
          <th title="Capabilities: V=Vision, T=Tools, R=Reasoning, FREE=no-cost tier">Caps</th>
          <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters"
              hx-vals='{"sort":"score","dir":"{{if and (eq $s "score") (eq $d "desc")}}asc{{else}}desc{{end}}"}'
              style="cursor:pointer" title="Artificial Analysis Intelligence Index — composite quality benchmark (0-100)">Intel{{if eq $s "score"}} {{if eq $d "asc"}}↑{{else}}↓{{end}}{{end}}</th>
          <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters"
              hx-vals='{"sort":"coding","dir":"{{if and (eq $s "coding") (eq $d "desc")}}asc{{else}}desc{{end}}"}'
              style="cursor:pointer" title="AA Coding Index — performance on coding benchmarks (0-100)">Code{{if eq $s "coding"}} {{if eq $d "asc"}}↑{{else}}↓{{end}}{{end}}</th>
          <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters"
              hx-vals='{"sort":"agentic","dir":"{{if and (eq $s "agentic") (eq $d "desc")}}asc{{else}}desc{{end}}"}'
              style="cursor:pointer" title="AA Agentic Index — tool-use performance in agentic loops (0-100). Suggest mode uses the best role-specific AA signal, not this column alone.">Agent{{if eq $s "agentic"}} {{if eq $d "asc"}}↑{{else}}↓{{end}}{{end}}</th>
          <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters"
              hx-vals='{"sort":"speed","dir":"{{if and (eq $s "speed") (eq $d "desc")}}asc{{else}}desc{{end}}"}'
              style="cursor:pointer" title="Median output tokens per second — throughput after first token">Speed{{if eq $s "speed"}} {{if eq $d "asc"}}↑{{else}}↓{{end}}{{end}}</th>
          <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters"
              hx-vals='{"sort":"ttft","dir":"{{if and (eq $s "ttft") (eq $d "asc")}}desc{{else}}asc{{end}}"}'
              style="cursor:pointer" title="Median time to first token (seconds) — startup latency. Primary metric for simple/classifier roles when available.">TTFT{{if eq $s "ttft"}} {{if eq $d "asc"}}↑{{else}}↓{{end}}{{end}}</th>
          <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters"
              hx-vals='{"sort":"think","dir":"{{if and (eq $s "think") (eq $d "asc")}}desc{{else}}asc{{end}}"}'
              style="cursor:pointer" title="TTFA - TTFT: seconds spent streaming thinking trace before the answer begins. 0 for non-reasoners.">Think{{if eq $s "think"}} {{if eq $d "asc"}}↑{{else}}↓{{end}}{{end}}</th>
          <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters"
              hx-vals='{"sort":"market","dir":"{{if and (eq $s "market") (eq $d "desc")}}asc{{else}}desc{{end}}"}'
              style="cursor:pointer" title="OpenRouter rankings market signal. Advisory usage/popularity signal only; not used as a quality benchmark.">Market{{if eq $s "market"}} {{if eq $d "asc"}}↑{{else}}↓{{end}}{{end}}</th>
          <th hx-get="/models" hx-target="#models-content" hx-swap="outerHTML" hx-include="#models-filters"
              hx-vals='{"sort":"value","dir":"{{if and (eq $s "value") (eq $d "desc")}}asc{{else}}desc{{end}}"}'
              style="cursor:pointer" title="Quality per $ (higher = more bang per buck). Role-specific in Suggest mode (uses role's Pareto axes); generic agentic/prompt in browse mode.">Value{{if eq $s "value"}} {{if eq $d "asc"}}↑{{else}}↓{{end}}{{end}}</th>
      </tr>
    </thead>
    {{template "models_tbody" .}}
  </table>
</div>
{{end}}