Add plain-language summary + umbrella tip for today

Neither Met Office's Global Spot API nor Open-Meteo return a narrative text
summary -- both are purely numeric/coded. New lib/summary.js derives one
rule-based from today's already-fetched hourly points (icon + precip_prob),
no extra API call, no LLM:
- Headline: "Scattered showers today", "Rain likely later", "Heavy rain
  today", "Dry today", etc. -- compares rain distribution across the whole
  day vs specifically the hours still ahead of "now".
- Note: "Thunderstorms possible", appended when a thunder icon shows up.
- Umbrella nudge: shown when there's a real rain chance now or later today.

Computed fresh per-request (not cached at fetch time), since "later" means
later than whoever's looking at the screen right now, not later than the
last hourly refresh.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/index.css

@@ -73,10 +73,27 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
 .wx-now {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: clamp(10px, 1.8vw, 24px);
 }
 .wx-now-temp { font-size: clamp(2.4rem, 5.5vw, 4.6rem); font-weight: 700; line-height: 1; }
 .wx-now-meta { display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); font-size: clamp(0.8rem, 1.05vw, 1.05rem); }
+.wx-summary-headline { color: var(--text); font-weight: 600; font-size: clamp(0.95rem, 1.3vw, 1.3rem); }
+.wx-summary-note { color: #fbbf24; }
+.wx-umbrella-tip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  padding: clamp(6px, 0.9vh, 10px) clamp(12px, 1.4vw, 18px);
+  border-radius: 999px;
+  background: rgba(125, 211, 252, 0.14);
+  border: 1px solid rgba(125, 211, 252, 0.35);
+  color: #7dd3fc;
+  font-weight: 600;
+  font-size: clamp(0.75rem, 0.95vw, 0.95rem);
+  white-space: nowrap;
+}
 
 .wx-section-label {
   font-size: clamp(0.7rem, 0.95vw, 0.9rem);

frontend/src/pages/Display.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { CloudOff, Sunrise, Sunset } from 'lucide-react'
+import { CloudOff, Sunrise, Sunset, Umbrella } from 'lucide-react'
 import { fetchForecast, fetchDisplayConfig } from '../api'
 import { WeatherIcon } from '../lib/icons'
 import type { ForecastPayload, ForecastPoint, Astro } from '../types'
@@ -155,9 +155,20 @@ export default function Display() {
           <WeatherIcon icon={currentPoint.icon} size={72} />
           <div className="wx-now-temp">{roundTemp(currentPoint.temp_c)}</div>
           <div className="wx-now-meta">
-            {currentPoint.feels_like_c != null && <span>Feels like {roundTemp(currentPoint.feels_like_c)}</span>}
-            {currentPoint.precip_prob != null && <span>{Math.round(currentPoint.precip_prob)}% chance of rain</span>}
+            {data.summary && <span className="wx-summary-headline">{data.summary.headline}</span>}
+            <span>
+              {currentPoint.feels_like_c != null && <>Feels like {roundTemp(currentPoint.feels_like_c)}</>}
+              {currentPoint.feels_like_c != null && currentPoint.precip_prob != null && ' · '}
+              {currentPoint.precip_prob != null && <>{Math.round(currentPoint.precip_prob)}% chance of rain</>}
+            </span>
+            {data.summary?.note && <span className="wx-summary-note">{data.summary.note}</span>}
           </div>
+          {data.summary?.umbrella && (
+            <span className="wx-umbrella-tip">
+              <Umbrella size={18} strokeWidth={1.75} />
+              Don't forget your umbrella
+            </span>
+          )}
         </div>
       )}
 

frontend/src/types.ts

@@ -23,11 +23,18 @@ export interface Astro {
   sunset: string | null
 }
 
+export interface Summary {
+  headline: string        // "Scattered showers today", "Rain likely later", ...
+  note: string | null     // e.g. "Thunderstorms possible", alongside the headline
+  umbrella: boolean        // real rain chance now or later today
+}
+
 export interface ForecastPayload {
   hourly: ForecastPoint[]      // today, full day
   threeHourly: ForecastPoint[] // next 2 days
   daily: ForecastPoint[]       // days 4-7
   astro: Record<string, Astro> // keyed by YYYY-MM-DD (London-local) — today + next 2 days
+  summary: Summary | null      // null only if there's no hourly data yet
   meta: {
     fetched_at: string | null
     provider: 'met_office' | 'open_meteo' | null