2.2

Add new quick summary panels and update layout to make space for them

assets/js/app.js

@@ -33,6 +33,7 @@ import { getCellTagEvents, getUpcomingEvents } from './events.js';
 import { POLLEN_TYPES, COL_DESCRIPTIONS, UTCI_ENVIRONMENTS } from './config.js';
 import { useAppState } from './hooks/useAppState.js';
 import { DayTabs } from './components/DayTabs.js';
+import { computeWhyFeelsLike, computeGlanceSummary } from './compute.js';
 
 const html = htm.bind(h);
 
@@ -166,6 +167,16 @@ export function UTCIForecast() {
     return raw.map(c => Math.min(255, Math.round(c + (255 - c) * 0.66)));
   };
 
+  // ─── 3b. PANEL COMPUTATIONS ──────────────────────────────────────────
+  // Derived from currentRow and the active day - no side effects.
+  const whyFeelsLike  = computeWhyFeelsLike(currentRow ?? null, UTCI_ENVIRONMENTS[utciEnv]);
+  const glanceSummary = computeGlanceSummary(
+    days[selectedDay]?.rows ?? [],
+    activeProfile,
+    outdoorsVariant,
+    skinType,
+  );
+
   // ─── 4. JSX RETURN ───────────────────────────────────────────────────
   // Everything below is the actual page markup, written as one big HTM
   // template. Search tips:
@@ -272,43 +283,13 @@ export function UTCIForecast() {
         </div>
 
         <div class="utci-header">
-          <div>
+          <div class="header-left">
             <h1 class="utci-title">
               <span class="title-sun">SUN</span><span class="title-scope">Scope</span>
             </h1>
             <div class="utci-tagline">See the sun the way your skin does.</div>
-          </div>
-
-          <div class="scope-col">
-            <${ScopeReticle}
-              value=${currentRow?.utciAdj ?? null}
-              cat=${currentCat}
-              loading=${loading}
-              elev=${currentRow?.elev ?? 0}
-              dt=${currentRow?.dt ?? new Date()}
-              glob=${currentRow?.glob ?? 0}
-              activeEvent=${lensEvent}
-              utciEnvShort=${UTCI_ENVIRONMENTS[utciEnv]?.shortLabel ?? null}
-            />
-            <div class="scope-env-row" data-env=${utciEnv}>
-              <span class="scope-env-label">Environment</span>
-              <${CustomSelect}
-                value=${utciEnv}
-                isOn=${true}
-                noHide=${true}
-                grpClass="grp-felt"
-                options=${Object.entries(UTCI_ENVIRONMENTS).map(([k, v]) => ({
-                  value: k,
-                  label: v.label,
-                }))}
-                onChange=${(v) => setUtciEnv(v)}
-              />
-            </div>
-          </div>
-
-          <div class="header-right">
             <div class="utci-search-wrap">
-<input
+              <input
                 class="utci-search"
                 type="text"
                 placeholder="Search any town or city…"
@@ -350,7 +331,63 @@ export function UTCIForecast() {
             ${fetchedAt && !loading && html`
               <div class="utci-fetch-time">Last update: ${fetchedAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>`}
           </div>
-        </div>
+
+          <div class="scope-col">
+            <${ScopeReticle}
+              value=${currentRow?.utciAdj ?? null}
+              cat=${currentCat}
+              loading=${loading}
+              elev=${currentRow?.elev ?? 0}
+              dt=${currentRow?.dt ?? new Date()}
+              glob=${currentRow?.glob ?? 0}
+              activeEvent=${lensEvent}
+              utciEnvShort=${UTCI_ENVIRONMENTS[utciEnv]?.shortLabel ?? null}
+            />
+          </div>
+
+          <div class="scope-env-bar">
+            <div class="scope-env-row" data-env=${utciEnv}>
+              <span class="scope-env-label">Environment</span>
+              <${CustomSelect}
+                value=${utciEnv}
+                isOn=${true}
+                noHide=${true}
+                grpClass="grp-felt"
+                options=${Object.entries(UTCI_ENVIRONMENTS).map(([k, v]) => ({
+                  value: k,
+                  label: v.label,
+                }))}
+                onChange=${(v) => setUtciEnv(v)}
+              />
+            </div>
+          </div>
+
+          <div class="header-right">
+            ${forecast && currentRow && whyFeelsLike && html`
+              <div class="insight-panel insight-panel--why">
+                <div class="insight-panel-title">Why it feels like this</div>
+                ${[
+                  { label: 'Sun and sky',    icon: '☀',  value: whyFeelsLike.sunAndSky },
+                  { label: 'Wind',           icon: '🌬',  value: whyFeelsLike.wind },
+                  { label: 'Humidity',       icon: '💧',  value: whyFeelsLike.humidity },
+                  ...(whyFeelsLike.environment !== 0 ? [
+                    { label: UTCI_ENVIRONMENTS[utciEnv]?.label ?? 'Environment', icon: '🌍', value: whyFeelsLike.environment }
+                  ] : []),
+                  ...(whyFeelsLike.precipitation !== 0 ? [
+                    { label: 'Precipitation', icon: '🌧', value: whyFeelsLike.precipitation }
+                  ] : []),
+                ].map(({ label, icon, value }) => html`
+                  <div class="insight-row" key=${label}>
+                    <span class="insight-icon">${icon}</span>
+                    <span class="insight-label">${label}</span>
+                    <span class=${`insight-delta ${value >= 0 ? 'delta-pos' : 'delta-neg'}`}>
+                      ${value >= 0 ? '+' : ''}${value.toFixed(1)}°
+                    </span>
+                  </div>
+                `)}
+              </div>`}
+          </div>
+		</div>
 
         ${error && html`
           <div class="utci-status" style=${{ borderColor: '#3a1010', color: '#c44a3a' }}>
@@ -385,32 +422,34 @@ export function UTCIForecast() {
         />`}
 
             
+            <div class="table-with-rail">
+            <div class="table-main">
             <div class="col-toggles">
                 <span class="col-toggles-label">Columns:</span>
                 ${(isPro ? (activeProfile === 'custom' || activeProfile === 'showall' || activeCols['utciP']) : activeCols['utciP']) && html`
-  <span class=${'col-toggle-group' + (visibleCols.utciP ? ' col-toggle-group--expanded' : '')}>
-    <${CustomSelect}
-      value=${utciEnv}
-      isOn=${visibleCols.utciP}
-      grpClass="grp-felt"
-      hideLabel="SunSoak"
-      hidingLabel="Hide SunSoak"
-      groupedLeft=${true}
-      isLastChild=${true}
-      options=${Object.entries(UTCI_ENVIRONMENTS).map(([k, v]) => ({
-        value: k,
-        label: v.label,
-      }))}
-      onChange=${(v) => {
-        if (v === 'off') {
-          setVisibleCols(prev => ({ ...prev, utciP: false }));
-        } else {
-          setUtciEnv(v);
-          setVisibleCols(prev => ({ ...prev, utciP: true }));
-        }
-      }}
-    />
-  </span>`}
+				  <span class=${'col-toggle-group' + (visibleCols.utciP ? ' col-toggle-group--expanded' : '')}>
+					<${CustomSelect}
+					  value=${utciEnv}
+					  isOn=${visibleCols.utciP}
+					  grpClass="grp-felt"
+					  hideLabel="SunSoak"
+					  hidingLabel="Hide SunSoak"
+					  groupedLeft=${true}
+					  isLastChild=${true}
+					  options=${Object.entries(UTCI_ENVIRONMENTS).map(([k, v]) => ({
+						value: k,
+						label: v.label,
+					  }))}
+					  onChange=${(v) => {
+						if (v === 'off') {
+						  setVisibleCols(prev => ({ ...prev, utciP: false }));
+						} else {
+						  setUtciEnv(v);
+						  setVisibleCols(prev => ({ ...prev, utciP: true }));
+						}
+					  }}
+					/>
+				  </span>`}
                 ${(isPro ? (activeProfile === 'custom' || activeProfile === 'showall' || activeCols['vehicleT']) : activeCols['vehicleT']) && html`
                   <span class=${'col-toggle-group' + (visibleCols.vehicleT ? ' col-toggle-group--expanded' : '')}>
                     <${CustomSelect}
@@ -862,6 +901,21 @@ export function UTCIForecast() {
                 </table>
               </div>
             </div>
+            </div>
+            ${forecast && glanceSummary && glanceSummary.length > 0 && html`
+              <aside class="glance-rail">
+                <div class="insight-panel insight-panel--glance">
+                  <div class="insight-panel-title">Today at a glance</div>
+                  ${glanceSummary.map(({ icon, label, value, alert }) => html`
+                    <div class=${`insight-row${alert ? ' insight-row--alert' : ''}`} key=${label}>
+                      <span class="insight-icon">${icon}</span>
+                      <span class="insight-label">${label}</span>
+                      <span class="insight-value">${value}</span>
+                    </div>
+                  `)}
+                </div>
+              </aside>`}
+            </div>
 
             ${colPopup && COL_DESCRIPTIONS[colPopup.key] && html`
               <div

assets/js/compute.js

@@ -15,7 +15,7 @@ import {
   calcConcreteTempPass, calcVehicleInteriorTemp,
   calcIndoorTempPass, calcManagedIndoorTempPass,
 } from './physics.js';
-import { windCompass8, uvSplit, cloudCategory, precipPenalty } from './utils.js';
+import { windCompass8, uvSplit, cloudCategory, precipPenalty, sunburnMinutes, burnLabel } from './utils.js';
 import { UTCI_ENVIRONMENTS } from './config.js';
 
 export function buildHourlyRows({ forecast, airQuality, location, vehicleType, vehicleVent, buildingType, utciEnv }) {
@@ -230,3 +230,318 @@ export function buildHourlyRows({ forecast, airQuality, location, vehicleType, v
 
   return { hourlyRows, days, utcOffsetMs };
 }
+
+// ------------------------------------------------------------------------
+//  computeWhyFeelsLike(row, env) - Break down the felt-temp delta into its
+//  contributing factors for the "Why it feels like this" panel.
+//
+//  Returns contributions in degrees C relative to plain air temperature.
+//  Positive = warmer than air temp, negative = cooler.
+//
+//  Attribution method - sequential isolation using utciApprox:
+//    sunAndSky     - Tmrt vs Ta. Mean radiant temp captures net heat from
+//                    direct sun, sky scatter, and ground reflection combined.
+//    wind          - UTCI with wind vs without (Tmrt = Ta, neutral RH 50%).
+//                    Almost always negative - wind cools.
+//    humidity      - UTCI at actual vapour pressure vs neutral RH 50%.
+//                    Positive when muggy, near-zero when dry.
+//    environment   - taOffset from the active UTCI environment modifier.
+//                    e.g. urban +2.5, forest -2.0, desert +3.5.
+//    precipitation - precipPenalty() - always 0 or negative.
+// ------------------------------------------------------------------------
+export function computeWhyFeelsLike(row, env) {
+  if (!row) return null;
+  const { Ta, Tmrt, va, eh, precip, snow } = row;
+  const r1 = (v) => Math.round(v * 10) / 10;
+
+  // Radiation - mean radiant temp above or below air temp.
+  const sunAndSky = r1(Tmrt - Ta);
+
+  // Wind - UTCI with actual wind vs calm, holding Tmrt = Ta and RH neutral.
+  const ehNeutral = vaporPressureHpa(Ta, 50);
+  const wind      = r1(utciApprox(Ta, Ta, va, ehNeutral) - utciApprox(Ta, Ta, 0, ehNeutral));
+
+  // Humidity - actual vapour pressure vs neutral RH 50%, no wind or sun.
+  const humidity  = r1(utciApprox(Ta, Ta, 0, eh) - utciApprox(Ta, Ta, 0, ehNeutral));
+
+  // Environment modifier - explicit temperature offset from the env config.
+  const environment = env ? r1(env.taOffset) : 0;
+
+  // Precipitation soak penalty - negative or zero.
+  const precipitation = precipPenalty(precip, snow, va);
+
+  return { sunAndSky, wind, humidity, environment, precipitation };
+}
+
+// ------------------------------------------------------------------------
+//  computeGlanceSummary(todayRows, profile, variant, skinType) - Build the
+//  environment-aware "Today at a Glance" items for the current day.
+//
+//  Returns an array of { icon, label, value, alert } objects (4-5 items).
+//  Content varies by profile and sub-variant so it stays relevant to
+//  whatever the user is actually doing.
+//
+//  Parameters:
+//    todayRows  - hourlyRows for the selected day
+//    profile    - active profile key e.g. "farming", "vehicle", "home"
+//    variant    - active sub-variant key e.g. "running", "beach" (or null)
+//    skinType   - Fitzpatrick skin type key for UV burn time
+// ------------------------------------------------------------------------
+export function computeGlanceSummary(todayRows, profile, variant, skinType) {
+  if (!todayRows || todayRows.length === 0) return [];
+
+  const hhmm   = (iso) => iso ? iso.slice(11, 16) : null;
+  const dayRows = todayRows.filter(r => r.elev > 0);
+
+  const peakRow = (field) => todayRows.reduce((best, r) =>
+    (r[field] != null && (best == null || r[field] > best[field])) ? r : best, null);
+
+  const maxRainProb = Math.max(0, ...todayRows.map(r => r.precipProb ?? 0));
+
+  // Longest run of rows that satisfy a predicate.
+  const longestWindow = (rows, cond) => {
+    let best = null, cur = null;
+    for (const r of rows) {
+      if (cond(r)) {
+        cur = cur ? { start: cur.start, end: r, len: cur.len + 1 } : { start: r, end: r, len: 1 };
+        if (!best || cur.len > best.len) best = { ...cur };
+      } else {
+        cur = null;
+      }
+    }
+    return best;
+  };
+
+  const pollenLabel = (v) => {
+    if (v == null || v < 0) return null;
+    if (v < 10)  return 'Low';
+    if (v < 50)  return 'Moderate';
+    if (v < 200) return 'High';
+    return 'Very High';
+  };
+
+  const aqiLabel = (v) => {
+    if (v == null) return null;
+    if (v < 20) return 'Good';
+    if (v < 40) return 'Fair';
+    if (v < 60) return 'Moderate';
+    return 'Poor';
+  };
+
+  const moistureLabel = (v) => {
+    if (v == null) return null;
+    if (v < 0.15) return 'Dry';
+    if (v < 0.30) return 'Slightly dry';
+    if (v < 0.45) return 'Moist';
+    return 'Saturated';
+  };
+
+  const rainItem = {
+    icon: '🌧',
+    label: 'Rain risk',
+    value: `${Math.round(maxRainProb)}%`,
+    alert: maxRainProb >= 60,
+  };
+
+  // ── Farming ────────────────────────────────────────────────────────────
+  if (profile === 'farming') {
+    const fieldWindow = longestWindow(dayRows, r =>
+      r.utciAdj >= 8 && r.utciAdj <= 32 && r.precipProb < 30 && r.va < 12
+    );
+    const soilWarmRow = todayRows.find(r => r.soilT0 != null && r.soilT0 >= 10);
+    const soilM       = todayRows.find(r => r.soilM != null)?.soilM ?? null;
+    const maxPollen   = Math.max(0, ...todayRows.map(r => r.grassPollen ?? 0));
+
+    return [
+      {
+        icon: '⏱',
+        label: 'Best field work',
+        value: fieldWindow
+          ? `${hhmm(fieldWindow.start.iso)} – ${hhmm(fieldWindow.end.iso)}`
+          : 'No suitable window',
+        alert: !fieldWindow,
+      },
+      {
+        icon: '🌱',
+        label: 'Soil warms to 10°C by',
+        value: soilWarmRow ? hhmm(soilWarmRow.iso) : 'Not today',
+        alert: !soilWarmRow,
+      },
+      rainItem,
+      {
+        icon: '💧',
+        label: 'Soil moisture',
+        value: moistureLabel(soilM) ?? '-',
+        alert: soilM != null && (soilM < 0.10 || soilM > 0.50),
+      },
+      ...(maxPollen >= 10 ? [{
+        icon: '🌿',
+        label: 'Grass pollen',
+        value: pollenLabel(maxPollen),
+        alert: maxPollen >= 50,
+      }] : []),
+    ];
+  }
+
+  // ── Vehicle ────────────────────────────────────────────────────────────
+  if (profile === 'vehicle') {
+    const peakCabin  = peakRow('vehicleT');
+    const dangerFrom = todayRows.find(r => r.vehicleT != null && r.vehicleT >= 35);
+
+    return [
+      {
+        icon: '🌡',
+        label: 'Peak cabin temp',
+        value: peakCabin ? `${Math.round(peakCabin.vehicleT)}° at ${hhmm(peakCabin.iso)}` : '-',
+        alert: !!(peakCabin && peakCabin.vehicleT >= 35),
+      },
+      {
+        icon: '🧒',
+        label: 'Children/pets in car',
+        value: dangerFrom ? `Unsafe from ${hhmm(dangerFrom.iso)}` : 'Safe all day',
+        alert: !!dangerFrom,
+      },
+      rainItem,
+      {
+        icon: '🌤',
+        label: 'Best travel comfort',
+        value: (() => {
+          const best = todayRows.reduce((b, r) =>
+            (b == null || r.utciAdj < b.utciAdj) ? r : b, null);
+          return best ? `${hhmm(best.iso)} (${Math.round(best.utciAdj)}° felt)` : '-';
+        })(),
+        alert: false,
+      },
+    ];
+  }
+
+  // ── Home ───────────────────────────────────────────────────────────────
+  if (profile === 'home') {
+    const peakIndoor  = peakRow('indoorT');
+    const peakManaged = peakRow('managedT');
+    const ventWindow  = longestWindow(todayRows, r =>
+      r.Ta != null && r.indoorT != null && r.Ta < r.indoorT && r.precipProb < 20
+    );
+    const peakAqi   = Math.max(0, ...todayRows.map(r => r.aqi ?? 0));
+    const maxPollen = Math.max(0, ...todayRows.map(r => r.grassPollen ?? 0));
+
+    return [
+      {
+        icon: '🌡',
+        label: 'Peak indoor (unmanaged)',
+        value: peakIndoor ? `${Math.round(peakIndoor.indoorT)}° at ${hhmm(peakIndoor.iso)}` : '-',
+        alert: !!(peakIndoor && peakIndoor.indoorT >= 28),
+      },
+      {
+        icon: '🌡',
+        label: 'Peak indoor (managed)',
+        value: peakManaged ? `${Math.round(peakManaged.managedT)}°` : '-',
+        alert: !!(peakManaged && peakManaged.managedT >= 28),
+      },
+      {
+        icon: '🪟',
+        label: 'Open windows',
+        value: ventWindow
+          ? `${hhmm(ventWindow.start.iso)} – ${hhmm(ventWindow.end.iso)}`
+          : 'Keep closed',
+        alert: false,
+      },
+      {
+        icon: '💨',
+        label: 'Air quality',
+        value: peakAqi > 0 ? aqiLabel(peakAqi) : '-',
+        alert: peakAqi >= 60,
+      },
+      ...(maxPollen >= 10 ? [{
+        icon: '🌼',
+        label: 'Pollen',
+        value: pollenLabel(maxPollen),
+        alert: maxPollen >= 50,
+      }] : []),
+    ];
+  }
+
+  // ── Activities - running / cycling ─────────────────────────────────────
+  if (variant === 'running' || variant === 'cycling') {
+    const coolWindow = longestWindow(dayRows, r =>
+      r.utciAdj >= 5 && r.utciAdj <= 22 && r.precipProb < 30
+    );
+    const peakUvRow  = peakRow('uv');
+    const peakAqi    = Math.max(0, ...todayRows.map(r => r.aqi ?? 0));
+    const maxPollen  = Math.max(0, ...todayRows.map(r => r.grassPollen ?? 0));
+    const burnMins   = peakUvRow && peakUvRow.uv > 0
+      ? burnLabel(sunburnMinutes(peakUvRow.uv, skinType))
+      : null;
+
+    return [
+      {
+        icon: '⏱',
+        label: `Best ${variant} window`,
+        value: coolWindow
+          ? `${hhmm(coolWindow.start.iso)} – ${hhmm(coolWindow.end.iso)}`
+          : 'No cool window today',
+        alert: !coolWindow,
+      },
+      rainItem,
+      ...(burnMins ? [{
+        icon: '☀',
+        label: 'UV burn time (peak)',
+        value: burnMins,
+        alert: !!(peakUvRow && peakUvRow.uv >= 6),
+      }] : []),
+      {
+        icon: '💨',
+        label: 'Air quality',
+        value: peakAqi > 0 ? aqiLabel(peakAqi) : '-',
+        alert: peakAqi >= 60,
+      },
+      ...(maxPollen >= 10 ? [{
+        icon: '🌿',
+        label: 'Pollen',
+        value: pollenLabel(maxPollen),
+        alert: maxPollen >= 50,
+      }] : []),
+    ];
+  }
+
+  // ── Outdoors - beach, park, events etc. (and fallback) ─────────────────
+  const comfortWindow = longestWindow(dayRows, r =>
+    r.utciAdj >= 9 && r.utciAdj <= 26 && r.precipProb < 30
+  );
+  const peakFelt   = peakRow('utciAdj');
+  const peakUvRow  = peakRow('uv');
+  const peakAqi    = Math.max(0, ...todayRows.map(r => r.aqi ?? 0));
+  const burnMins   = peakUvRow && peakUvRow.uv > 0
+    ? burnLabel(sunburnMinutes(peakUvRow.uv, skinType))
+    : null;
+
+  return [
+    {
+      icon: '🌤',
+      label: 'Comfortable window',
+      value: comfortWindow
+        ? `${hhmm(comfortWindow.start.iso)} – ${hhmm(comfortWindow.end.iso)}`
+        : 'No comfortable window',
+      alert: !comfortWindow,
+    },
+    {
+      icon: '🌡',
+      label: 'Peak felt temp',
+      value: peakFelt ? `${Math.round(peakFelt.utciAdj)}° at ${hhmm(peakFelt.iso)}` : '-',
+      alert: !!(peakFelt && (peakFelt.utciAdj >= 32 || peakFelt.utciAdj < 0)),
+    },
+    ...(burnMins ? [{
+      icon: '☀',
+      label: 'UV burn time (peak)',
+      value: burnMins,
+      alert: !!(peakUvRow && peakUvRow.uv >= 6),
+    }] : []),
+    rainItem,
+    {
+      icon: '💨',
+      label: 'Air quality',
+      value: peakAqi > 0 ? aqiLabel(peakAqi) : '-',
+      alert: peakAqi >= 60,
+    },
+  ];
+}