feat: accordion layout for model show details modal

app/web/static/js/app.js

@@ -302,12 +302,19 @@ class LLMMonitorApp {
         detailsModal.setAttribute("aria-hidden", "false");
 
         if (!showData) {
-            detailsContent.textContent = "Loading show details...";
+            detailsContent.innerHTML = `
+                <div class="flex items-center gap-2 text-gray-400 text-sm py-4">
+                    <svg class="animate-spin w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
+                    </svg>
+                    Loading details…
+                </div>`;
             this.loadModelShowDetails(modelName, detailsContent);
             return;
         }
 
-        detailsContent.textContent = JSON.stringify(showData, null, 2);
+        detailsContent.innerHTML = this.buildAccordionHTML(showData);
     }
 
     async loadModelShowDetails(modelName, detailsContent) {
@@ -329,16 +336,171 @@ class LLMMonitorApp {
             this.lastData.models.showByModel[modelName] = showData;
 
             if (this.selectedModelName === modelName) {
-                detailsContent.textContent = JSON.stringify(showData, null, 2);
+                detailsContent.innerHTML = this.buildAccordionHTML(showData);
             }
         } catch (error) {
             console.error(error);
             if (this.selectedModelName === modelName) {
-                detailsContent.textContent = "Show details are not available for this model.";
+                detailsContent.innerHTML = '<p class="text-gray-400 text-sm py-2">Show details are not available for this model.</p>';
             }
         }
     }
 
+    // ── Accordion helpers ────────────────────────────────────────────────────
+
+    buildAccordionHTML(showData) {
+        if (!showData || typeof showData !== "object") {
+            return '<p class="text-gray-400 text-sm py-2">No details available.</p>';
+        }
+
+        const sectionOrder = ["details", "model_info", "parameters", "template", "modelfile", "license"];
+        const allKeys = Object.keys(showData);
+        const orderedKeys = [
+            ...sectionOrder.filter(k => k in showData),
+            ...allKeys.filter(k => !sectionOrder.includes(k))
+        ];
+
+        let html = '<div class="space-y-2">';
+
+        orderedKeys.forEach((key, index) => {
+            const value = showData[key];
+            const isFirst = index === 0;
+            const contentId = `acc-${key.replace(/[^a-z0-9]/gi, "-")}`;
+            const label = this.formatAccordionLabel(key);
+            const body = this.renderAccordionBody(key, value);
+
+            html += `
+            <div class="border border-gray-700 rounded-lg overflow-hidden">
+                <button type="button"
+                    class="accordion-header w-full flex items-center justify-between px-4 py-2.5 bg-gray-800 hover:bg-gray-700 text-left transition-colors duration-150"
+                    onclick="app.toggleAccordion('${contentId}', this)"
+                    aria-expanded="${isFirst}">
+                    <span class="font-semibold text-sm text-gray-200">${label}</span>
+                    <svg class="accordion-chevron w-4 h-4 text-gray-400 transition-transform duration-200 ${isFirst ? "rotate-180" : ""}"
+                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                    </svg>
+                </button>
+                <div id="${contentId}" class="accordion-content bg-gray-900 border-t border-gray-700 ${isFirst ? "" : "hidden"}">
+                    <div class="px-4 py-3">${body}</div>
+                </div>
+            </div>`;
+        });
+
+        html += "</div>";
+        return html;
+    }
+
+    formatAccordionLabel(key) {
+        const labels = {
+            details: "Details",
+            model_info: "Model Info",
+            parameters: "Parameters",
+            template: "Template",
+            modelfile: "Modelfile",
+            license: "License"
+        };
+        const icons = {
+            details: "▦",
+            model_info: "🧠",
+            parameters: "⚙",
+            template: "📄",
+            modelfile: "📦",
+            license: "📜"
+        };
+        const icon = icons[key] || "▸";
+        const text = labels[key] || key.replace(/_/g, " ").replace(/\b\w/g, c => c.toUpperCase());
+        return `<span class="mr-2 text-base">${icon}</span>${text}`;
+    }
+
+    renderAccordionBody(key, value) {
+        if (key === "details" && value && typeof value === "object" && !Array.isArray(value)) {
+            return this.renderDetailsGrid(value);
+        }
+        if (key === "model_info" && value && typeof value === "object" && !Array.isArray(value)) {
+            return this.renderModelInfoTable(value);
+        }
+        if (typeof value === "string") {
+            return `<pre class="text-xs text-gray-300 whitespace-pre-wrap font-mono leading-relaxed max-h-60 overflow-y-auto">${this.escapeHtml(value)}</pre>`;
+        }
+        if (value && typeof value === "object") {
+            return this.renderKeyValueList(value);
+        }
+        return `<span class="text-sm text-gray-300">${this.escapeHtml(String(value))}</span>`;
+    }
+
+    renderDetailsGrid(details) {
+        const labelMap = {
+            family: "Family",
+            families: "Families",
+            parameter_size: "Parameters",
+            quantization_level: "Quantization",
+            format: "Format",
+            parent_model: "Parent Model"
+        };
+        let html = '<div class="grid grid-cols-2 gap-x-6 gap-y-3">';
+        for (const [k, v] of Object.entries(details)) {
+            const label = labelMap[k] || k.replace(/_/g, " ").replace(/\b\w/g, c => c.toUpperCase());
+            const display = Array.isArray(v) ? v.join(", ") : String(v);
+            html += `
+            <div class="flex flex-col">
+                <span class="text-xs text-gray-500 uppercase tracking-wide">${this.escapeHtml(label)}</span>
+                <span class="text-sm text-gray-200 font-medium mt-0.5">${this.escapeHtml(display)}</span>
+            </div>`;
+        }
+        html += "</div>";
+        return html;
+    }
+
+    renderModelInfoTable(modelInfo) {
+        let html = '<dl class="space-y-1.5">';
+        for (const [k, v] of Object.entries(modelInfo)) {
+            const display = typeof v === "object" ? JSON.stringify(v) : String(v);
+            html += `
+            <div class="flex gap-3 text-xs">
+                <dt class="text-gray-500 font-mono shrink-0 w-5/12 truncate" title="${this.escapeHtml(k)}">${this.escapeHtml(k)}</dt>
+                <dd class="text-gray-300 break-all">${this.escapeHtml(display)}</dd>
+            </div>`;
+        }
+        html += "</dl>";
+        return html;
+    }
+
+    renderKeyValueList(obj) {
+        let html = '<dl class="space-y-1.5">';
+        for (const [k, v] of Object.entries(obj)) {
+            const display = typeof v === "object" ? JSON.stringify(v) : String(v);
+            html += `
+            <div class="flex gap-3 text-xs">
+                <dt class="text-gray-500 shrink-0 w-1/3">${this.escapeHtml(k)}</dt>
+                <dd class="text-gray-300 break-all">${this.escapeHtml(display)}</dd>
+            </div>`;
+        }
+        html += "</dl>";
+        return html;
+    }
+
+    escapeHtml(str) {
+        return String(str)
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#39;");
+    }
+
+    toggleAccordion(contentId, btn) {
+        const content = document.getElementById(contentId);
+        if (!content) return;
+        const isHidden = content.classList.contains("hidden");
+        content.classList.toggle("hidden", !isHidden);
+        const chevron = btn.querySelector(".accordion-chevron");
+        if (chevron) chevron.classList.toggle("rotate-180", isHidden);
+        btn.setAttribute("aria-expanded", String(isHidden));
+    }
+
+    // ── Fine accordion helpers ───────────────────────────────────────────────
+
     hideModelDetails() {
         const detailsModal = document.getElementById("model-details-modal");
         const detailsDialog = document.getElementById("model-details-dialog");

app/web/templates/index.html

@@ -140,8 +140,8 @@
                     </div>
                     <button id="model-details-close" type="button" class="text-gray-300 hover:text-white text-2xl leading-none px-2" aria-label="Close modal">×</button>
                 </div>
-                <div class="modal-body">
+                <div class="modal-body overflow-y-auto max-h-[75vh]">
-                    <pre id="model-details-content" class="bg-gray-900 text-gray-200 text-xs p-4 rounded-lg whitespace-pre-wrap"></pre>
+                    <div id="model-details-content"></div>
                 </div>
             </div>
         </div>