Add vendor grouping and clean model names

Improvements:
- Added subtle visual grouping by vendor in table
- Light blue gradient on first row of each vendor group
- Thin blue border separating vendor groups
- Vendor names highlighted in primary color
- Cleaned up redundant vendor prefixes from model names
- "Moonshot AI: Kimi K2" → "Kimi K2"
- "Qwen: Qwen3 Max" → "Qwen3 Max"
- Easier to scan and compare models
- Vendor grouping visible when sorting by vendor
- Maintains all color coding for cost/context tiers

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app.js

@@ -261,7 +261,36 @@ function getContextTier(context) {
     return 'context-ultra';
 }
 
-// Populate data table with color coding
+// Clean up model name by removing redundant vendor prefix
+function cleanModelName(modelName, vendor) {
+    // Common patterns to remove
+    const patterns = [
+        new RegExp(`^${vendor}:\\s*`, 'i'),
+        /^Qwen:\s*/i,
+        /^Meta:\s*/i,
+        /^Google:\s*/i,
+        /^OpenAI:\s*/i,
+        /^Anthropic:\s*/i,
+        /^DeepSeek:\s*/i,
+        /^Mistral:\s*/i,
+        /^NVIDIA:\s*/i,
+        /^Amazon:\s*/i,
+        /^Microsoft:\s*/i,
+        /^xAI:\s*/i,
+        /^Zhipu AI:\s*/i,
+        /^MoonshotAI:\s*/i,
+        /^Moonshot AI:\s*/i,
+        /^Alibaba:\s*/i
+    ];
+
+    let cleaned = modelName;
+    for (const pattern of patterns) {
+        cleaned = cleaned.replace(pattern, '');
+    }
+    return cleaned;
+}
+
+// Populate data table with color coding and vendor grouping
 function populateTable(models = filteredModels) {
     const tbody = document.getElementById('table-body');
 
@@ -283,10 +312,16 @@ function populateTable(models = filteredModels) {
         }
     });
 
-    tbody.innerHTML = sortedModels.map(m => `
-        <tr>
-            <td>${m.model_name}</td>
-            <td>${m.displayVendor}</td>
+    let lastVendor = null;
+    tbody.innerHTML = sortedModels.map((m, index) => {
+        const isNewVendor = m.displayVendor !== lastVendor;
+        lastVendor = m.displayVendor;
+        const vendorClass = isNewVendor ? 'vendor-group-start' : '';
+
+        return `
+        <tr class="${vendorClass}" data-vendor="${m.displayVendor}">
+            <td>${cleanModelName(m.model_name, m.displayVendor)}</td>
+            <td class="vendor-cell">${m.displayVendor}</td>
             <td class="${getContextTier(m.context_length)}" style="font-weight: 600;">
                 ${(m.context_length / 1000).toFixed(0)}K
             </td>
@@ -298,7 +333,8 @@ function populateTable(models = filteredModels) {
             </td>
             <td><span class="quadrant-badge">${m.quadrant}</span></td>
         </tr>
-    `).join('');
+    `;
+    }).join('');
 }
 
 // Setup sorting functionality

style.css

@@ -490,14 +490,28 @@ tbody tr {
     transition: background-color 0.2s;
 }
 
+tbody tr.vendor-group-start {
+    border-top: 2px solid var(--primary);
+    background: linear-gradient(to bottom, rgba(37, 99, 235, 0.05) 0%, transparent 100%);
+}
+
 tbody tr:hover {
     background: var(--bg);
 }
 
+tbody tr.vendor-group-start:hover {
+    background: linear-gradient(to bottom, rgba(37, 99, 235, 0.08) 0%, var(--bg) 100%);
+}
+
 td {
     padding: 1rem;
 }
 
+td.vendor-cell {
+    font-weight: 600;
+    color: var(--primary);
+}
+
 .quadrant-badge {
     display: inline-block;
     padding: 0.25rem 0.75rem;