Add compact mapping health indicator

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...";
-  mappingState.className = "mapping-state";
+  setMappingStatus("Loading mapping...", "is-loading");
   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";
-    mappingState.className = "mapping-state is-missing";
+    setMappingStatus(data.message || "Mapping missing", "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`;