fix(web): stop presenting an unscored case as a failed analysis, and four smaller things

From clicking through the redesigned UI:

- scoring a case without a model registry painted a red failure across a case that had in
  fact analysed fine. It is now a quiet note saying the model term contributes 0, because
  scoring is an optional fourth of the rank, not the analysis.
- the MLflow default moves to port 5001. On macOS, AirPlay Receiver owns 5000, which is why
  the registry answered "403" rather than refusing the connection; docker-compose publishes
  5001 to match.
- a funnel step that kept nothing drew a visible bar. Zero now draws zero.
- "1 candidates".
- the funnel's fixed grid columns forced a horizontal scrollbar on the report.

The report also lists the top undecided candidates now: the first thing anyone opens has no
decisions in it, and "Shortlisted (0)" alone said nothing about what the tool found.

Tests: api 77, web 32; ruff, mypy, svelte-check clean.

web/src/app.css

@@ -63,7 +63,8 @@ td.coord, td.hgvs { font-family: var(--mono); font-size: 0.85rem; }  /* aligned
 
 /* The funnel is the headline: thousands of variants down to a handful. */
 .funnel { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.35rem; }
-.funnel li { display: grid; grid-template-columns: 5rem 16rem 1fr; align-items: center; gap: 0.75rem; }
+.funnel li { display: grid; grid-template-columns: 4.5rem minmax(6rem, 14rem) minmax(0, 1fr);
+  align-items: center; gap: 0.75rem; }
 .funnel-value { font-family: var(--mono); font-size: 1.05rem; text-align: right; font-variant-numeric: tabular-nums; }
 .funnel-label { color: var(--ink-soft); font-size: 0.9rem; }
 .funnel-track { background: white; border: 1px solid var(--line); height: 0.75rem; border-radius: 2px; }
@@ -126,3 +127,5 @@ td.coord, td.hgvs { font-family: var(--mono); font-size: 0.85rem; }  /* aligned
 .disclaimer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line);
   color: var(--ink-soft); font-size: 0.85rem; }
 @media print { .noprint, nav { display: none; } .report { border: none; padding: 0; } }
+.note { color: var(--ink-soft); font-size: 0.88rem; border-left: 3px solid var(--line);
+  padding: 0.35rem 0 0.35rem 0.6rem; margin: 0.5rem 0 1rem; }

web/src/lib/api.ts

@@ -59,6 +59,7 @@ export type Report = {
   };
   shortlisted: Candidate[];
   dismissed: Candidate[];
+  top: Candidate[];
 };
 
 async function req<T>(path: string, init?: RequestInit): Promise<T> {

web/src/lib/candidates.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { candidateQuery, evidenceChips, funnelSteps, scoreBarPercent } from './candidates';
+import { barWidth, candidateQuery, evidenceChips, funnelSteps, plural, scoreBarPercent } from './candidates';
 import type { Candidate, Funnel } from './api';
 
 const candidate = (over: Partial<Candidate> = {}): Candidate => ({
@@ -86,3 +86,30 @@ describe('candidateQuery', () => {
     expect(candidateQuery({ maxAf: 0.01 })).toBe('max_af=0.01');
   });
 });
+
+describe('barWidth', () => {
+  it('draws nothing for a step that kept nothing', () => {
+    expect(barWidth(0, 13)).toBe(0);
+  });
+
+  it('keeps a sliver visible for a small non-zero step', () => {
+    expect(barWidth(1, 1000)).toBeGreaterThan(0);
+    expect(barWidth(1, 1000)).toBeLessThan(3);
+  });
+
+  it('fills the track for the first step', () => {
+    expect(barWidth(13, 13)).toBe(100);
+  });
+
+  it('copes with an empty case', () => {
+    expect(barWidth(0, 0)).toBe(0);
+  });
+});
+
+describe('plural', () => {
+  it('does not say "1 candidates"', () => {
+    expect(plural(1, 'candidate')).toBe('1 candidate');
+    expect(plural(0, 'candidate')).toBe('0 candidates');
+    expect(plural(12, 'candidate')).toBe('12 candidates');
+  });
+});

web/src/lib/candidates.ts

@@ -68,3 +68,11 @@ export function candidateQuery(filters: CandidateFilters): string {
   if (filters.offset !== undefined) q.set('offset', String(filters.offset));
   return q.toString();
 }
+
+/** Bar width for one funnel step. A step that kept nothing draws nothing. */
+export function barWidth(value: number, total: number): number {
+  if (!total || value <= 0) return 0;
+  return Math.max(1.5, (value / total) * 100);
+}
+
+export const plural = (n: number, noun: string): string => `${n} ${noun}${n === 1 ? '' : 's'}`;

web/src/lib/components/Funnel.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import type { Funnel } from '$lib/api';
-  import { funnelSteps } from '$lib/candidates';
+  import { barWidth, funnelSteps } from '$lib/candidates';
 
   let { funnel }: { funnel: Funnel } = $props();
   const steps = $derived(funnelSteps(funnel));
-  const width = (value: number) => (funnel.total ? Math.max(1.5, (value / funnel.total) * 100) : 0);
 </script>
 
 <ol class="funnel">
@@ -12,7 +11,7 @@
     <li>
       <span class="funnel-value">{step.value.toLocaleString('en-GB')}</span>
       <span class="funnel-label">{step.label}</span>
-      <span class="funnel-track"><span class="funnel-bar" style="width: {width(step.value)}%"></span></span>
+      <span class="funnel-track"><span class="funnel-bar" style="width: {barWidth(step.value, funnel.total)}%"></span></span>
     </li>
   {/each}
 </ol>

web/src/routes/cases/[id]/+page.svelte

@@ -3,6 +3,7 @@
   import { api, type Candidate, type CandidatePage, type Case, type Job, type VariantDetail } from '$lib/api';
   import { poll } from '$lib/poll';
   import { formatElapsed, latestStep } from '$lib/progress';
+  import { plural } from '$lib/candidates';
   import CandidateRow from '$lib/components/CandidateRow.svelte';
   import Funnel from '$lib/components/Funnel.svelte';
   import VariantPanel from '$lib/components/VariantPanel.svelte';
@@ -22,6 +23,7 @@
   let busy = $state(false);
   let scoring = $state(false);
   let error = $state<string | null>(null);
+  let scoreNote = $state<string | null>(null);
   let now = $state(Date.now());
   let stopPolling: (() => void) | null = null;
 
@@ -82,8 +84,10 @@
     scoring = true;
     try {
       await api.score(data.caseId);
+      scoreNote = null;
     } catch (e) {
-      error = `Scoring failed: ${(e as Error).message}`;
+      // Scoring is optional: without a model the rank simply loses one of its four terms.
+      scoreNote = (e as Error).message;
     } finally {
       scoring = false;
     }
@@ -138,6 +142,9 @@
 </div>
 
 {#if error}<p role="alert">{error}</p>{/if}
+{#if scoreNote}
+  <p class="note">Variants are unscored, so the model term contributes 0 to every rank. {scoreNote}</p>
+{/if}
 
 {#if running}
   <p class="progress" aria-live="polite">
@@ -177,7 +184,7 @@
 
   <div class="triage">
     <div class="candidates">
-      <p class="muted">{page.total} candidates ranked by phenotype fit, rarity, consequence and model score</p>
+      <p class="muted">{plural(page.total, 'candidate')} ranked by phenotype fit, rarity, consequence and model score</p>
       {#each page.items as candidate, i (candidate.variant.id)}
         <CandidateRow
           {candidate}

web/src/routes/cases/[id]/report/+page.svelte

@@ -57,6 +57,16 @@
       <p class="muted">Nothing shortlisted yet.</p>
     {/each}
 
+    {#if report.top.length}
+      <h2>Top candidates, not yet decided ({report.top.length})</h2>
+      {#each report.top as item (item.variant.id)}
+        <div class="reportitem">
+          <h3>{item.variant.gene ?? 'intergenic'} <span class="coord">{item.variant.chrom}:{item.variant.pos} {item.variant.ref}&gt;{item.variant.alt}</span></h3>
+          <Chips chips={evidenceChips(item, termCount)} />
+        </div>
+      {/each}
+    {/if}
+
     {#if report.dismissed.length}
       <h2>Dismissed ({report.dismissed.length})</h2>
       <ul class="dismissed">