model grouping

static/script.js

@@ -254,7 +254,43 @@ function renderModels(models) {
         return;
     }
     
-    container.innerHTML = models.map(model => `
+    // Group models by family (everything before the colon)
+    const grouped = {};
+    models.forEach(model => {
+        const family = model.name.includes(':') ? model.name.split(':')[0] : 'other';
+        if (!grouped[family]) {
+            grouped[family] = [];
+        }
+        grouped[family].push(model);
+    });
+    
+    // Sort families alphabetically
+    const sortedFamilies = Object.keys(grouped).sort();
+    
+    // Render grouped models
+    container.innerHTML = sortedFamilies.map(family => {
+        const familyModels = grouped[family];
+        const familyId = `family-${family.replace(/[^a-zA-Z0-9]/g, '-')}`;
+        
+        return `
+            <div class="model-family-group">
+                <div class="model-family-header" onclick="toggleModelFamily('${familyId}')">
+                    <div class="model-family-title">
+                        <span class="model-family-icon">▼</span>
+                        <span class="model-family-name">${escapeHtml(family)}</span>
+                        <span class="model-family-count">(${familyModels.length})</span>
+                    </div>
+                </div>
+                <div class="model-family-content" id="${familyId}">
+                    ${familyModels.map(model => renderModelCard(model)).join('')}
+                </div>
+            </div>
+        `;
+    }).join('');
+}
+
+function renderModelCard(model) {
+    return `
         <div class="model-card ${!model.installed ? 'model-not-installed' : ''}" data-model-name="${escapeHtml(model.name)}">
             <div class="model-header">
                 <div class="model-name">
@@ -338,7 +374,21 @@ function renderModels(models) {
                 ${model.capabilities.map(cap => `<span class="badge badge-capability">${escapeHtml(cap)}</span>`).join('')}
             </div>
         </div>
-    `).join('');
+    `;
+}
+
+function toggleModelFamily(familyId) {
+    const content = document.getElementById(familyId);
+    const header = content.previousElementSibling;
+    const icon = header.querySelector('.model-family-icon');
+    
+    if (content.classList.contains('collapsed')) {
+        content.classList.remove('collapsed');
+        icon.textContent = '▼';
+    } else {
+        content.classList.add('collapsed');
+        icon.textContent = '▶';
+    }
 }
 
 async function deleteModel(modelName) {