fix: queue panel showed 12 of 17 models, in alphabetical not run order

renderQueue capped the list at 12 with no overflow hint, and every PENDING row tied in the status sort so the panel fell back to repo file order. The two deep-analysis-research/D2IL models sort last alphabetically and were among the 5 cut — despite being #2 and #3 in the actual run order — which read as 'they were never queued'. Now renders every active row, tie-broken by submitted_time (the field the worker itself orders by), numbered, with a count in the heading.

index.html

@@ -152,6 +152,9 @@ table.board tbody tr:hover td:nth-child(1),table.board tbody tr:hover td:nth-chi
 .panel h3 .k{font:600 11px "IBM Plex Sans";letter-spacing:.06em;color:var(--gold);text-transform:uppercase}
 .qrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--border);font-size:13px}
 .qrow:last-child{border-bottom:0}
+.qcount{float:right;font-family:"IBM Plex Mono";font-size:12px;color:var(--ink-mute);font-weight:400}
+.qnum{font-family:"IBM Plex Mono";font-size:11.5px;color:var(--ink-mute);min-width:22px;text-align:right;flex:0 0 auto}
+.qrow a{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .badge{font:600 10.5px "IBM Plex Sans";letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
 .b-pending{background:rgba(201,154,63,.16);color:var(--gold)}
 .b-running{background:rgba(16,185,129,.16);color:var(--accent)}
@@ -253,7 +256,7 @@ footer{margin-top:30px;text-align:center;color:var(--ink-mute);font-size:12px}
 
   <div class="grid2 one">
     <div class="panel">
-      <h3><span class="k">Queue</span> Evaluation status</h3>
+      <h3><span class="k">Queue</span> Evaluation status<span id="queueCount" class="qcount"></span></h3>
       <div id="queue"><div class="qrow" style="color:var(--ink-mute)">Loading queue…</div></div>
     </div>
   </div>
@@ -504,13 +507,25 @@ function render(){
 function renderQueue(requests){
   const q=document.getElementById("queue");
   const active=requests.filter(r=>r&&["PENDING","RUNNING","RERUN","FAILED"].includes((r.status||"").toUpperCase()));
-  if(!active.length){q.innerHTML='<div class="qrow" style="color:var(--ink-mute)">No pending or running evaluations.</div>';return;}
+  if(!active.length){
+    const c0=document.getElementById("queueCount"); if(c0)c0.textContent="";
+    q.innerHTML='<div class="qrow" style="color:var(--ink-mute)">No pending or running evaluations.</div>';return;}
   const order={RUNNING:0,PENDING:1,RERUN:1,FAILED:2};
-  active.sort((a,b)=>(order[a.status?.toUpperCase()]??3)-(order[b.status?.toUpperCase()]??3));
-  q.innerHTML=active.slice(0,12).map(r=>{
+  // Within a status group, order by submitted_time — that is precisely how the
+  // worker chooses its next job (auto_hf_queue.list_requests sorts oldest-first
+  // and next_todo takes todo[0]), so the panel reads as the real run order.
+  // Without this tiebreak every PENDING row ties and the list falls back to
+  // repo file order, which is alphabetical and tells you nothing.
+  active.sort((a,b)=>(order[a.status?.toUpperCase()]??3)-(order[b.status?.toUpperCase()]??3)
+    ||String(a.submitted_time||"").localeCompare(String(b.submitted_time||"")));
+  const cnt=document.getElementById("queueCount");
+  if(cnt)cnt.textContent=`${active.length} in queue`;
+  // No cap: truncating here once hid 5 of 17 queued models and read as "they
+  // were never queued". A long list is better than a silently short one.
+  q.innerHTML=active.map((r,i)=>{
     const s=(r.status||"").toUpperCase();
     const cls=s==="RUNNING"?"b-running":s==="FAILED"?"b-failed":"b-pending";
-    return `<div class="qrow"><a href="https://huggingface.co/${r.model}" target="_blank" rel="noopener">${r.model}</a><span class="badge ${cls}">${s}</span></div>`;
+    return `<div class="qrow"><span class="qnum">${i+1}</span><a href="https://huggingface.co/${r.model}" target="_blank" rel="noopener" title="${r.model}">${r.model}</a><span class="badge ${cls}">${s}</span></div>`;
   }).join("");
 }