Add compact mapping health indicator

public/app.js

@@ -22,6 +22,7 @@ const suggestedTitle = document.querySelector("#suggestedTitle");
 const suggestedList = document.querySelector("#suggestedList");
 const suggestedCloseButton = document.querySelector("#suggestedCloseButton");
 const mappingState = document.querySelector("#mappingState");
+const mappingStatusText = document.querySelector("#mappingStatusText");
 const mappingList = document.querySelector("#mappingList");
 const mappingDetails = document.querySelector("#mappingDetails");
 const findSourcesButton = document.querySelector("#findSourcesButton");
@@ -386,8 +387,7 @@ async function loadMappingSources() {
         renderMappingSources({ mapped: false, items: [], message: "Select manufacturer." });
         return;
     }
-    mappingState.textContent = "Loading mapping...";
+    setMappingStatus("Loading mapping...", "is-loading");
-    mappingState.className = "mapping-state";
     mappingList.replaceChildren();
     try {
         const params = new URLSearchParams({ manufacturerId, check: "1" });
@@ -409,8 +409,7 @@ async function loadMappingSources() {
 function renderMappingSources(data) {
     const items = data.items || [];
     if (!data.mapped || !items.length) {
-        mappingState.textContent = data.message || "Mapping missing";
+        setMappingStatus(data.message || "Mapping missing", "is-missing");
-        mappingState.className = "mapping-state is-missing";
         mappingList.replaceChildren();
         mappingDetails.open = true;
         return;
@@ -419,10 +418,10 @@ function renderMappingSources(data) {
     const failedCount = items.filter((item) => item.enabled && item.health && item.health !== "ok").length;
     const testedCount = items.filter((item) => item.enabled && item.health === "ok").length;
     const ready = enabledCount > 0 && failedCount === 0;
-    mappingState.textContent = ready
+    const statusText = ready
         ? `Sources OK ✓ (${testedCount}/${enabledCount})`
         : data.message || `Sources problem (${testedCount}/${enabledCount})`;
-    mappingState.className = ready ? "mapping-state is-ready" : "mapping-state is-missing";
+    setMappingStatus(statusText, ready ? "is-ready" : testedCount > 0 ? "is-warning" : "is-missing");
     mappingDetails.open = !ready || failedCount > 0;
     mappingList.replaceChildren(...items.map((item) => {
         const row = document.createElement("div");
@@ -437,6 +436,12 @@ function renderMappingSources(data) {
         return row;
     }));
 }
+function setMappingStatus(text, stateClass) {
+    mappingState.textContent = "";
+    mappingState.className = `mapping-state-dot ${stateClass}`;
+    mappingState.setAttribute("aria-label", text);
+    mappingStatusText.textContent = text;
+}
 function getMappingHealthText(item) {
     if (!item.enabled)
         return "off";

public/app.ts

@@ -22,6 +22,7 @@ const suggestedTitle = document.querySelector("#suggestedTitle");
 const suggestedList = document.querySelector("#suggestedList");
 const suggestedCloseButton = document.querySelector("#suggestedCloseButton");
 const mappingState = document.querySelector("#mappingState");
+const mappingStatusText = document.querySelector("#mappingStatusText");
 const mappingList = document.querySelector("#mappingList");
 const mappingDetails = document.querySelector("#mappingDetails");
 const findSourcesButton = document.querySelector("#findSourcesButton");
@@ -407,8 +408,7 @@ async function loadMappingSources() {
     return;
   }
 
-  mappingState.textContent = "Loading mapping...";
+  setMappingStatus("Loading mapping...", "is-loading");
-  mappingState.className = "mapping-state";
   mappingList.replaceChildren();
 
   try {
@@ -434,8 +434,7 @@ function renderMappingSources(data) {
   const items = data.items || [];
 
   if (!data.mapped || !items.length) {
-    mappingState.textContent = data.message || "Mapping missing";
+    setMappingStatus(data.message || "Mapping missing", "is-missing");
-    mappingState.className = "mapping-state is-missing";
     mappingList.replaceChildren();
     mappingDetails.open = true;
     return;
@@ -445,10 +444,10 @@ function renderMappingSources(data) {
   const failedCount = items.filter((item) => item.enabled && item.health && item.health !== "ok").length;
   const testedCount = items.filter((item) => item.enabled && item.health === "ok").length;
   const ready = enabledCount > 0 && failedCount === 0;
-  mappingState.textContent = ready
+  const statusText = ready
     ? `Sources OK ✓ (${testedCount}/${enabledCount})`
     : data.message || `Sources problem (${testedCount}/${enabledCount})`;
-  mappingState.className = ready ? "mapping-state is-ready" : "mapping-state is-missing";
+  setMappingStatus(statusText, ready ? "is-ready" : testedCount > 0 ? "is-warning" : "is-missing");
   mappingDetails.open = !ready || failedCount > 0;
 
   mappingList.replaceChildren(
@@ -470,6 +469,13 @@ function renderMappingSources(data) {
   );
 }
 
+function setMappingStatus(text, stateClass) {
+  mappingState.textContent = "";
+  mappingState.className = `mapping-state-dot ${stateClass}`;
+  mappingState.setAttribute("aria-label", text);
+  mappingStatusText.textContent = text;
+}
+
 function getMappingHealthText(item) {
   if (!item.enabled) return "off";
   if (item.health === "ok") return `${item.httpStatus || 200} OK`;

public/index.html

@@ -85,10 +85,13 @@
               <summary class="mapping-summary">
                 <svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#layers"></use></svg>
                 <span class="mapping-title">Mapping</span>
-                <span class="mapping-state is-missing" id="mappingState">Mapping not loaded</span>
+                <span class="mapping-state-dot is-missing" id="mappingState" role="status" aria-label="Mapping not loaded"></span>
                 <span class="mapping-toggle" aria-hidden="true"></span>
               </summary>
+              <div class="mapping-panel" role="status">
+                <div class="mapping-detail-status" id="mappingStatusText">Mapping not loaded</div>
                 <div class="mapping-list" id="mappingList"></div>
+              </div>
             </details>
           </div>
           <div class="app-status">

src/tailwind.css

@@ -118,15 +118,18 @@
   .sidebar-mapping-box { @apply overflow-hidden border-slate-700 bg-slate-900; }
   .mapping-summary { @apply flex min-h-8 items-center justify-center gap-1.5 rounded bg-slate-800 px-2 text-center text-[11px] font-semibold text-slate-100; }
   .mapping-title { @apply shrink-0; }
-  .mapping-summary .mapping-state { @apply min-w-0 flex-1 truncate bg-transparent text-center text-[10px] font-normal text-slate-300; }
+  .mapping-state-dot { @apply inline-block h-3 w-3 shrink-0 rounded-full border border-slate-500 shadow-sm; }
+  .mapping-state-dot.is-ready { @apply border-emerald-300 bg-emerald-500; }
+  .mapping-state-dot.is-warning { @apply border-amber-300 bg-amber-400; }
+  .mapping-state-dot.is-missing { @apply border-red-300 bg-red-500; }
+  .mapping-state-dot.is-loading { @apply border-slate-300 bg-slate-400; }
+  .mapping-panel { @apply border-t border-slate-700 bg-slate-950/20; }
+  .mapping-detail-status { @apply truncate px-2 py-1 text-center text-[10px] font-normal text-slate-300; }
   .mapping-summary .mapping-toggle { @apply ml-auto shrink-0; }
   .mapping-details summary { @apply grid cursor-pointer grid-cols-[auto_auto_minmax(0,1fr)_22px] items-center px-1 py-1 list-none; }
   .mapping-details summary::-webkit-details-marker { display: none; }
   .mapping-toggle::before { content: "›"; @apply inline-block text-center text-lg leading-none text-slate-100; }
   .mapping-details[open] .mapping-toggle::before { content: "⌄"; }
-  .mapping-state { @apply block truncate rounded px-1 py-0.5 text-[10px] font-normal; }
-  .mapping-state.is-ready { @apply bg-slate-100 text-slate-800; }
-  .mapping-state.is-missing { @apply bg-red-100 text-red-700; }
   .mapping-list { @apply grid gap-0.5 px-1 pb-1; }
   .mapping-source-row { @apply grid grid-cols-[minmax(0,1fr)_auto] items-center gap-1 rounded bg-slate-100 px-1 py-0.5 text-[10px] text-slate-800; }
   .mapping-source-row.is-disabled { @apply opacity-50; }
@@ -277,7 +280,6 @@
   html:not(.dark) .app-status { @apply border-slate-300 bg-white text-slate-700; }
   html:not(.dark) .sidebar-mapping-box { @apply border-slate-300 bg-slate-100; }
   html:not(.dark) .mapping-summary { @apply border border-slate-300 bg-white text-slate-700; }
-  html:not(.dark) .mapping-summary .mapping-state { @apply text-slate-600; }
   html:not(.dark) .manufacturer-trigger { @apply border-slate-300 bg-white text-slate-700; }
   html:not(.dark) .manufacturer-trigger:hover { @apply border-slate-400 bg-slate-200; }
   html.contrast-light-high:not(.dark) .control-panel { @apply bg-slate-200 text-slate-900; }