Add live air-quality (US EPA AQI) chip and forecast-card row

Reuses the saved weather location's lat/lon to fetch us_aqi from
Open-Meteo's air-quality API (no key), folded into the existing 2h
forecast cache (bumped v1->v2). AQI is best-effort: a failed fetch
never sinks the forecast. Shows as a header chip and a colored row
on the forecast card; both self-hide when there is no reading.

internal/web/static/js/weather-forecast.js

@@ -9,7 +9,7 @@
 // pages) doesn't re-hit Open-Meteo.
 (function () {
   var LOC_KEY = "pete.weather.loc.v1";       // {country, postal, lat, lon, name, unit}
-  var CACHE_KEY = "pete.weather.cache.v1";    // {key, fetchedAt, current, daily}
+  var CACHE_KEY = "pete.weather.cache.v2";    // {key, fetchedAt, current, daily, aqi}
   var TTL_MS = 2 * 60 * 60 * 1000;            // 2 hours
 
   // ---- storage helpers -----------------------------------------------------
@@ -62,6 +62,18 @@
     return r("clouds", "medium", "—", "☁️", "☁️");
   }
 
+  // ---- US EPA AQI → label + color -----------------------------------------
+  // https://www.airnow.gov/aqi/aqi-basics/ — standard six-band scale.
+  function describeAqi(v) {
+    if (v == null) return null;
+    if (v <= 50)  return { label: "Good",                    color: "#16a34a" };
+    if (v <= 100) return { label: "Moderate",                color: "#ca8a04" };
+    if (v <= 150) return { label: "Unhealthy for sensitive", color: "#ea580c" };
+    if (v <= 200) return { label: "Unhealthy",               color: "#dc2626" };
+    if (v <= 300) return { label: "Very unhealthy",          color: "#9333ea" };
+    return { label: "Hazardous", color: "#7f1d1d" };
+  }
+
   // ---- API calls -----------------------------------------------------------
   function geocode(country, postal) {
     var url = "https://api.zippopotam.us/" + encodeURIComponent(country.toLowerCase()) +
@@ -94,6 +106,18 @@
     });
   }
 
+  // Air quality rides on the same lat/lon. Separate Open-Meteo host, no key,
+  // returns a pre-computed US EPA AQI so we don't reimplement the breakpoints.
+  function fetchAqi(loc) {
+    var url = "https://air-quality-api.open-meteo.com/v1/air-quality" +
+      "?latitude=" + loc.lat + "&longitude=" + loc.lon +
+      "&current=us_aqi&timezone=auto";
+    return fetch(url).then(function (res) {
+      if (!res.ok) throw new Error("AQI unavailable");
+      return res.json();
+    });
+  }
+
   // Cache key ties a forecast to one location; changing location invalidates it.
   function cacheKey(loc) { return loc.country + ":" + loc.postal + ":" + (loc.unit || "celsius"); }
 
@@ -103,13 +127,18 @@
     var fresh = cached && cached.key === key && cached.fetchedAt &&
                 (nowMs() - cached.fetchedAt) < TTL_MS;
     if (fresh && !force) return Promise.resolve(cached);
-    return fetchForecast(loc).then(function (data) {
+    return Promise.all([
+      fetchForecast(loc),
+      fetchAqi(loc).catch(function () { return null; })   // AQI is best-effort
+    ]).then(function (results) {
+      var data = results[0], air = results[1];
       var entry = {
         key: key,
         fetchedAt: nowMs(),
         current: data.current,
         daily: data.daily,
-        unitSymbol: (data.current_units && data.current_units.temperature_2m) || "°"
+        unitSymbol: (data.current_units && data.current_units.temperature_2m) || "°",
+        aqi: (air && air.current && typeof air.current.us_aqi === "number") ? air.current.us_aqi : null
       };
       writeJSON(CACHE_KEY, entry);
       return entry;
@@ -125,6 +154,7 @@
   // ---- rendering -----------------------------------------------------------
   var chipEl = document.querySelector("[data-weather-chip]");
   var chipBtn = document.querySelector("[data-weather-loc]");
+  var aqiChipEl = document.querySelector("[data-aqi-chip]");
   var cardMount = document.querySelector("[data-weather-card]");
 
   function setChip(html, title) {
@@ -132,6 +162,20 @@
     if (chipBtn && title) chipBtn.title = title;
   }
 
+  // The AQI chip hides itself when there's no reading (no location, or the
+  // air-quality fetch failed) so it never shows an empty pill.
+  function setAqiChip(aqi) {
+    if (!aqiChipEl) return;
+    var air = describeAqi(aqi);
+    if (!air) { aqiChipEl.classList.add("hidden"); aqiChipEl.classList.remove("inline-flex"); return; }
+    aqiChipEl.innerHTML =
+      '<span class="inline-block w-2.5 h-2.5 rounded-full" style="background:' + air.color + '"></span>' +
+      'AQI ' + aqi;
+    aqiChipEl.title = "Air quality · " + air.label;
+    aqiChipEl.classList.remove("hidden");
+    aqiChipEl.classList.add("inline-flex");
+  }
+
   function temp(v, sym) { return Math.round(v) + (sym || "°"); }
 
   function weekday(iso) {
@@ -158,8 +202,17 @@
 
     setChip(desc.emoji + " <span class=\"tabular-nums\">" + temp(cur.temperature_2m, sym) + "</span>",
             loc.name + " · " + desc.label);
+    setAqiChip(entry.aqi);
 
     if (!cardMount) return;
+    var air = describeAqi(entry.aqi);
+    var aqiRow = air
+      ? '<div class="flex items-center gap-2 border-t border-[color:var(--ink)]/10 px-5 py-3 text-sm">' +
+          '<span class="inline-block w-2.5 h-2.5 rounded-full shrink-0" style="background:' + air.color + '"></span>' +
+          '<span class="font-bold tabular-nums">AQI ' + entry.aqi + '</span>' +
+          '<span class="text-[color:var(--ink)]/60">' + air.label + '</span>' +
+        '</div>'
+      : '';
     var daily = entry.daily;
     var days = "";
     for (var i = 0; i < daily.time.length; i++) {
@@ -188,6 +241,7 @@
           '<button type="button" data-weather-loc class="shrink-0 rounded-full px-3 py-1.5 text-xs font-semibold text-[color:var(--ink)]/60 hover:bg-[color:var(--ink)]/5 border-2 border-[color:var(--ink)]/10 transition">Change location</button>' +
         '</div>' +
         '<div class="grid grid-cols-5 gap-1 border-t border-[color:var(--ink)]/10 bg-[color:var(--ink)]/[0.03] px-2 py-3">' + days + '</div>' +
+        aqiRow +
       '</div>';
     // The injected "Change location" button needs the same handler.
     var changeBtn = cardMount.querySelector("[data-weather-loc]");
@@ -202,6 +256,7 @@
 
   function showError(msg) {
     setChip("📍 Weather", "Set your location");
+    setAqiChip(null);
     if (cardMount && getLoc()) {
       cardMount.innerHTML =
         '<div class="rounded-3xl bg-[color:var(--card)] border-2 border-dashed border-[color:var(--ink)]/15 p-5 text-center text-sm text-[color:var(--ink)]/60">' +
@@ -296,6 +351,7 @@
       // Hand the background back to the server's seasonal default.
       if (window.PeteWeather) window.PeteWeather.set(seasonalDefault.variant, seasonalDefault.intensity);
       setChip("📍 Weather", "Set your location");
+      setAqiChip(null);
       if (cardMount) cardMount.innerHTML = "";
     });
     dlg.querySelectorAll("[data-loc-unit]").forEach(function (b) {

internal/web/templates/layout.html

@@ -65,6 +65,8 @@
               class="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-[color:var(--card)] px-3 py-2 text-sm font-semibold shadow-pete border-2 border-[color:var(--ink)]/10 hover:bg-[color:var(--ink)]/5 transition">
         <span data-weather-chip class="tabular-nums">📍 Weather</span>
       </button>
+      <span data-aqi-chip
+            class="hidden shrink-0 items-center gap-1.5 rounded-full bg-[color:var(--card)] px-3 py-2 text-sm font-semibold shadow-pete border-2 border-[color:var(--ink)]/10 tabular-nums"></span>
       {{if .AuthEnabled}}
         {{if .User}}
         <a href="/auth/logout" data-account