fix(weather): sky uses the site (Bangkok) clock and strict HH:MM rise/set (codex P2)

- phase, sun position and the hero clock read UTC+7 like lib/format.ts, so a viewer
  abroad sees the site's sky; rise/set that aren't HH:MM (e.g. the '—' placeholder)
  give no sun and a plain-clock phase instead of being read as 00:00
- tests: timezone-independent phases/arc (run under America/New_York too), placeholder
  and out-of-range strings, heat-index thresholds, TMD code mapping

Author: botnick

src/components/WeatherHero.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import type { Weather } from "../lib/api";
+import { bkkClock } from "../lib/format";
 import { condText, feelsLike, skyPhase, skyWx, sunPos, solarInfo, type SkyPhase, type SkyWx } from "../lib/weather";
 
 /* Live sky for the weather tab: the real time of day (from the location's sunrise/sunset),
@@ -78,7 +79,7 @@ export function WeatherHero({ weather: w, force }: { weather: Weather; force?: {
 
   // sun on its real arc (east→west mapped onto the right of the card so it never sits under the temperature), height from elevation vs today's noon
   const sunStyle = sun ? { left: `${(36 + sun.x * 58).toFixed(1)}%`, top: `${(70 - Math.min(1, sun.elev / noon) * 56).toFixed(1)}%` } : undefined;
-  const clock = now.toLocaleTimeString("th-TH", { hour: "2-digit", minute: "2-digit", hour12: false });
+  const clock = bkkClock(now.getTime() / 1000); // site clock (Bangkok), whatever the viewer's timezone
 
   return (
     <div className={`wxhero p-${phase} x-${wx}`} role="img" aria-label={`${condText(w.cond, night)} ${Math.round(w.temp!)} องศา`}>
@@ -118,7 +119,7 @@ export function WeatherHero({ weather: w, force }: { weather: Weather; force?: {
         </div>
 
         {night ? (
-          <div className="wh-pv"><span>กลางคืน · แผงพักการผลิต</span><span className="dim">รอแดด {w.sun?.rise ? `${w.sun.rise} น.` : "พรุ่งนี้"}</span></div>
+          <div className="wh-pv"><span>กลางคืน · แผงพักการผลิต</span><span className="dim">รอแดด {/^\d{1,2}:\d{2}$/.test(w.sun?.rise || "") ? `${w.sun!.rise} น.` : "พรุ่งนี้"}</span></div>
         ) : (
           <div className="wh-pv">
             <span>แสงแดดวันนี้ · {solar.label}</span><span>{solar.pct}%</span>

src/lib/__tests__/sky.test.ts

@@ -0,0 +1,50 @@
+import { describe, it, expect } from "vitest";
+import { skyPhase, sunPos, siteMinutes, feelsLike, skyWx } from "../weather";
+
+// 2026-10-08 12:05 Bangkok = 05:05Z. The Date's local zone must not matter.
+const at = (bkkHHMM: string) => { const [h, m] = bkkHHMM.split(":").map(Number); return new Date(Date.UTC(2026, 9, 8, h - 7, m)); };
+const SUN = { rise: "06:07", set: "18:03", arc: [0, 30, 60, 30, 0] };
+
+describe("sky — site (Bangkok) clock, never the viewer's", () => {
+  it("siteMinutes reads UTC+7 regardless of the runtime TZ", () => {
+    expect(siteMinutes(at("00:00"))).toBe(0);
+    expect(siteMinutes(at("12:05"))).toBe(12 * 60 + 5);
+    expect(siteMinutes(at("23:59"))).toBe(23 * 60 + 59);
+  });
+  it("phases from sunrise/sunset", () => {
+    expect(skyPhase(at("03:00"), SUN.rise, SUN.set)).toBe("night");
+    expect(skyPhase(at("06:20"), SUN.rise, SUN.set)).toBe("dawn");
+    expect(skyPhase(at("12:00"), SUN.rise, SUN.set)).toBe("day");
+    expect(skyPhase(at("17:15"), SUN.rise, SUN.set)).toBe("golden");
+    expect(skyPhase(at("18:10"), SUN.rise, SUN.set)).toBe("dusk");
+    expect(skyPhase(at("19:00"), SUN.rise, SUN.set)).toBe("night");
+  });
+  it("sun on its arc: noon at the top, down outside rise→set", () => {
+    const noon = sunPos(at("12:05"), SUN)!;
+    expect(noon.x).toBeCloseTo(0.5, 2); expect(noon.elev).toBeCloseTo(60, 0);
+    expect(sunPos(at("05:00"), SUN)).toBeNull();
+    expect(sunPos(at("19:00"), SUN)).toBeNull();
+  });
+});
+
+describe("sky — invalid rise/set never becomes 00:00", () => {
+  it("placeholder '—' → no sun, clock-default phases", () => {
+    expect(sunPos(at("12:00"), { rise: "—", set: "18:00", arc: SUN.arc })).toBeNull();
+    expect(sunPos(at("12:00"), { rise: "06:00", set: "" })).toBeNull();
+    expect(skyPhase(at("03:00"), "—", "18:00")).toBe("night");
+    expect(skyPhase(at("12:00"), "—", "—")).toBe("day");
+    expect(skyPhase(at("12:00"), "25:00", "18:00")).toBe("day");
+  });
+});
+
+describe("feelsLike / skyWx", () => {
+  it("heat index only when warm and humid", () => {
+    expect(feelsLike(25, 90)).toBe(25);
+    expect(feelsLike(32, 30)).toBe(32);
+    expect(feelsLike(32, 70)).toBeGreaterThan(38);
+    expect(feelsLike(32, 70)).toBeLessThan(42);
+  });
+  it("TMD codes → sky weather", () => {
+    expect([1, 2, 3, 5, 8, 12].map(skyWx)).toEqual(["clear", "partly", "cloud", "rain", "storm", "clear"]);
+  });
+});

src/lib/weather.ts

@@ -33,10 +33,25 @@ export function feelsLike(t: number, rh: number): number {
 
 // Sky phase from the location's real sunrise/sunset ("HH:MM", local) — falls back to the clock.
 export type SkyPhase = "night" | "dawn" | "day" | "golden" | "dusk";
-const hm = (s: string) => { const [h, m] = s.split(":").map(Number); return (h || 0) * 60 + (m || 0); };
+// Site-local minutes since midnight. The site is in Thailand (UTC+7, no DST) and rise/set
+// strings are site-local, so "now" is read on the Bangkok clock too — a viewer abroad
+// must still see the site's sky, not their own (same contract as lib/format.ts).
+const SITE_OFFSET_MIN = 7 * 60;
+export const siteMinutes = (now: Date) => {
+  const m = Math.floor(now.getTime() / 60000) + SITE_OFFSET_MIN;
+  return ((m % 1440) + 1440) % 1440;
+};
+// strict "HH:MM" → minutes; anything else (e.g. the "—" placeholder) → null, never 00:00
+const hm = (s?: string | null): number | null => {
+  const m = /^(\d{1,2}):(\d{2})$/.exec(String(s ?? "").trim());
+  if (!m) return null;
+  const h = +m[1], mi = +m[2];
+  return h < 24 && mi < 60 ? h * 60 + mi : null;
+};
 export function skyPhase(now: Date, rise?: string, set?: string): SkyPhase {
-  const t = now.getHours() * 60 + now.getMinutes();
-  const r = rise ? hm(rise) : 6 * 60, s = set ? hm(set) : 18 * 60;
+  const t = siteMinutes(now);
+  let r = hm(rise), s = hm(set);
+  if (r == null || s == null || s <= r) { r = 6 * 60; s = 18 * 60; } // unknown/invalid → plain clock fallback
   if (t < r - 35 || t >= s + 30) return "night";
   if (t < r + 40) return "dawn";
   if (t >= s) return "dusk";
@@ -45,11 +60,10 @@ export function skyPhase(now: Date, rise?: string, set?: string): SkyPhase {
 }
 // Sun position on today's arc: x 0..1 across the sky, elevation in degrees (0 when down).
 export function sunPos(now: Date, sun?: { rise?: string; set?: string; arc?: number[] }): { x: number; elev: number } | null {
-  if (!sun?.rise || !sun?.set) return null;
-  const r = hm(sun.rise), s = hm(sun.set), t = now.getHours() * 60 + now.getMinutes();
-  if (s <= r || t < r || t > s) return null;
+  const r = hm(sun?.rise), s = hm(sun?.set), t = siteMinutes(now);
+  if (r == null || s == null || s <= r || t < r || t > s) return null;
   const x = (t - r) / (s - r);
-  const arc = sun.arc || [];
+  const arc = sun?.arc || [];
   if (arc.length < 2) return { x, elev: Math.sin(Math.PI * x) * 60 };
   const i = x * (arc.length - 1), lo = Math.floor(i), hi = Math.min(arc.length - 1, lo + 1);
   return { x, elev: arc[lo] + (arc[hi] - arc[lo]) * (i - lo) };