Havre: sort the model picker by price (#250)

Havre: sort the model picker by price (#250)

The model picker gets a sort beside its search: name (the one in use first, then A to Z), cheapest first, priciest first, kept in this browser. Sorted by price, the price column says which way; a text model goes by its price in, then out. Clips, which Venice prices one at a time, have no sort.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KjyFZEJivqQMhhCyyQau49

ventures/havre/index.html

@@ -301,7 +301,7 @@
         <tr><th scope="row">a remix</th><td>two short calls; five more for a venice character</td></tr>
       </tbody>
     </table>
-    <p class="mono">the model pickers show venice's prices, what you ask for shows its price before you pay, and your balance shows next to your key.</p>
+    <p class="mono">the model pickers show venice's prices and can sort by them, what you ask for shows its price before you pay, and your balance shows next to your key.</p>
   </div>
 </section>
 
@@ -371,8 +371,15 @@
     <h2 id="model-h">MODEL</h2>
     <div class="dlgbody">
       <p class="mono" id="model-for"></p>
-      <label class="sr" for="msearch">Search models</label>
-      <input id="msearch" type="search" placeholder="search models: a name, private, uncensored…" autocomplete="off">
+      <div class="mfind">
+        <label class="sr" for="msearch">Search models</label>
+        <input id="msearch" type="search" placeholder="search models: a name, private, uncensored…" autocomplete="off">
+        <label class="pick" id="msortpick">sort <select id="msort">
+          <option value="name" selected>name</option>
+          <option value="cheapest">cheapest first</option>
+          <option value="priciest">priciest first</option>
+        </select></label>
+      </div>
       <div class="mtable">
         <table class="table models">
           <thead id="mhead"><tr><th scope="col">MODEL</th><th scope="col">PRIVACY</th><th scope="col">CAN</th><th scope="col">$ IN / OUT</th><th scope="col">CONTEXT</th></tr></thead>