Render score-distribution metric picker as chips, not a dropdown

The slice picker is already a dropdown ('Slice: Overall / Arabic /
...'), so making the score-distribution metric picker also a dropdown
makes the two controls easy to confuse — especially on a benchmark
like Fibble where the metrics ('Score', 'Win Rate', 'Mean Response
Time') *and* the splits both deserve a top-level switch. Render the
metric picker as ec-pill chips so the visual contract is: chips for
'pick which metric you're looking at', dropdown for 'pick which
slice/split you're filtering to'.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/score-distribution.tsx

@@ -208,19 +208,30 @@ export function ScoreDistribution({
               Score distribution
             </div>
             {showPicker ? (
-              <select
-                className="ec-select"
-                value={active.key}
-                onChange={(event) => setActiveKey(event.target.value)}
-                style={{ minWidth: 200, maxWidth: "100%" }}
-              >
-                {seriesList.map((s) => (
-                  <option key={s.key} value={s.key}>
-                    {s.label}
-                    {s.caption ? ` · ${s.caption}` : ""}
-                  </option>
-                ))}
-              </select>
+              <div className="flex flex-wrap items-center gap-1.5">
+                {seriesList.map((s) => {
+                  const on = s.key === active.key
+                  return (
+                    <button
+                      key={s.key}
+                      type="button"
+                      className={`ec-pill${on ? " on" : ""}`}
+                      onClick={() => setActiveKey(s.key)}
+                      title={s.caption ? `${s.label} · ${s.caption}` : s.label}
+                    >
+                      {s.label}
+                      {s.caption ? (
+                        <span
+                          className="ml-1.5"
+                          style={{ color: on ? undefined : "var(--fg-subtle)" }}
+                        >
+                          · {s.caption}
+                        </span>
+                      ) : null}
+                    </button>
+                  )
+                })}
+              </div>
             ) : (
               <span
                 className="font-mono uppercase truncate"