improve section headers

static/script.js

@@ -91,6 +91,7 @@ function initializeEventListeners() {
     // Model management
     document.getElementById('btn-install').addEventListener('click', openInstallModal);
     document.getElementById('btn-refresh-models').addEventListener('click', loadModels);
+    document.getElementById('btn-collapse-all').addEventListener('click', toggleAllFamilies);
     
     // Install options
     document.querySelectorAll('.install-option').forEach(option => {
@@ -270,6 +271,8 @@ function renderModels(models) {
     // Render grouped models
     container.innerHTML = sortedFamilies.map(family => {
         const familyModels = grouped[family];
+        const installedCount = familyModels.filter(m => m.installed).length;
+        const notInstalledCount = familyModels.length - installedCount;
         const familyId = `family-${family.replace(/[^a-zA-Z0-9]/g, '-')}`;
         
         return `
@@ -278,7 +281,7 @@ function renderModels(models) {
                     <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>
+                        <span class="model-family-count">(<span class="count-installed">${installedCount} installed</span> / <span class="count-not-installed">${notInstalledCount} not installed</span>)</span>
                     </div>
                 </div>
                 <div class="model-family-content" id="${familyId}">
@@ -391,6 +394,30 @@ function toggleModelFamily(familyId) {
     }
 }
 
+function toggleAllFamilies() {
+    const allContents = document.querySelectorAll('.model-family-content');
+    const button = document.getElementById('btn-collapse-all');
+    
+    // Check if any are expanded
+    const anyExpanded = Array.from(allContents).some(content => !content.classList.contains('collapsed'));
+    
+    allContents.forEach(content => {
+        const header = content.previousElementSibling;
+        const icon = header.querySelector('.model-family-icon');
+        
+        if (anyExpanded) {
+            content.classList.add('collapsed');
+            icon.textContent = '▶';
+        } else {
+            content.classList.remove('collapsed');
+            icon.textContent = '▼';
+        }
+    });
+    
+    // Update button text
+    button.textContent = anyExpanded ? 'Expand All' : 'Collapse All';
+}
+
 async function deleteModel(modelName) {
     if (!confirm(`Are you sure you want to delete "${modelName}"?`)) {
         return;

static/style.css

@@ -347,6 +347,14 @@ body {
     font-weight: 400;
 }
 
+.count-installed {
+    color: var(--success);
+}
+
+.count-not-installed {
+    color: var(--warning);
+}
+
 .model-family-content {
     display: grid;
     gap: 15px;

templates/index.html

@@ -63,6 +63,7 @@
                 <div class="tab-header">
                     <h2>Available Models</h2>
                     <div class="tab-actions">
+                        <button class="btn btn-secondary" id="btn-collapse-all">Collapse All</button>
                         <button class="btn btn-primary" id="btn-install">Import Model</button>
                         <button class="btn btn-secondary" id="btn-refresh-models">Refresh</button>
                     </div>