Add family markers before model names.

Show a color-coded circle/diamond marker per retriever in the table so family identity matches the plot color scheme.

Made-with: Cursor

main.js

@@ -111,6 +111,14 @@ const FAMILY_COLORS = {
   'BM25': '#969696', 'Fusion': '#e6550d', 'Other': '#9e9e9e'
 };
 
+function familyMarkerHtml(name, type) {
+  const family = inferFamily(name);
+  const color = FAMILY_COLORS[family] || '#9e9e9e';
+  // Shape by model type; color by model family
+  const symbol = type === 'proprietary' ? '◆' : '●';
+  return `<span class="family-marker" title="${family}" aria-label="${family}" style="color:${color}">${symbol}</span>`;
+}
+
 function mapRow(item) {
   return {
     name: item.info.name,
@@ -193,6 +201,7 @@ function renderBody() {
     <tr>
       <td>${idx + 1}</td>
       <td class="model-cell">
+        ${familyMarkerHtml(r.name, r.type)}
         ${r.link ? `<a href="${r.link}" target="_blank">${r.name}</a>` : r.name}
         ${isNewModel(r.date) ? '<span class="new-badge">🆕</span>' : ''}
       </td>

style.css

@@ -104,6 +104,13 @@ tbody tr:hover { background: #f8fbff; }
 .model-cell { font-weight: 600; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
 .model-cell a { color: #1d4ed8; text-decoration: none; }
 .model-cell a:hover { text-decoration: underline; }
+.family-marker {
+  display: inline-block;
+  margin-right: 8px;
+  font-size: 0.95rem;
+  line-height: 1;
+  vertical-align: middle;
+}
 .new-badge { margin-left: 6px; font-size: 0.9em; vertical-align: middle; }
 .avg-score { color: #1d4ed8; font-weight: 700; }
 .type-pill {