feat: implement SSE architecture for real-time temperature updates with componentized dashboard charts and validation tests

frontend/components/dashboard/scan-terminal/LiveTemperatureThresholdChart.tsx

@@ -2,22 +2,14 @@
 
 import clsx from "clsx";
 import { useEffect, useMemo, useRef, useState } from "react";
-import {
-  CartesianGrid,
-  Line,
-  Area,
-  ComposedChart as ReComposedChart,
-  ReferenceLine,
-  ReferenceArea,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
 import type { ScanOpportunityRow } from "@/lib/dashboard-types";
 import { useLatestPatch, useSseResyncVersion } from "@/hooks/use-sse-patches";
 import { Panel } from "@/components/dashboard/scan-terminal/Panel";
-import { rowName, temp } from "@/components/dashboard/scan-terminal/utils";
+import { ModelCurvesSummary } from "@/components/dashboard/scan-terminal/ModelCurvesSummary";
+import { TemperatureChartCanvas } from "@/components/dashboard/scan-terminal/TemperatureChartCanvas";
+import { TemperatureRunwayDetails } from "@/components/dashboard/scan-terminal/TemperatureRunwayDetails";
+import { TemperatureStatsBars } from "@/components/dashboard/scan-terminal/TemperatureStatsBars";
+import { rowName } from "@/components/dashboard/scan-terminal/utils";
 
 import {
   HOURLY_CACHE_TTL_MS,
@@ -25,7 +17,6 @@ import {
   buildChartDomain,
   buildFullDayChartData,
   buildIntDegreeTicks,
-  buildModelSummaryCards,
   buildRunwayPlates,
   fetchHourlyForecastForCity,
   getActiveTemperatureSeries,
@@ -36,85 +27,14 @@ import {
   isTemperatureSeriesVisibleByDefault,
   mergePatchIntoHourly,
   normObs,
-  normalizeCityKey,
   readSessionCache,
   seedHourlyForecastFromRow,
-  seriesStats,
   shouldPollLiveChart,
   validNumber,
   type HourlyForecast,
 } from "@/components/dashboard/scan-terminal/temperature-chart-logic";
 export { clearCityDetailCache } from "@/components/dashboard/scan-terminal/temperature-chart-logic";
 
-type TooltipSeries = {
-  key: string;
-  label: string;
-  color: string;
-};
-
-function nearestSeriesValue(
-  data: Array<Record<string, any>>,
-  seriesKey: string,
-  activeIndex: number,
-) {
-  if (!data.length || activeIndex < 0) return null;
-  for (let offset = 0; offset < data.length; offset += 1) {
-    const left = activeIndex - offset;
-    if (left >= 0) {
-      const value = validNumber(data[left]?.[seriesKey]);
-      if (value !== null) return value;
-    }
-    const right = activeIndex + offset;
-    if (right < data.length) {
-      const value = validNumber(data[right]?.[seriesKey]);
-      if (value !== null) return value;
-    }
-  }
-  return null;
-}
-
-function TemperatureTooltipContent({
-  active,
-  label,
-  payload,
-  data,
-  series,
-}: {
-  active?: boolean;
-  label?: string | number;
-  payload?: ReadonlyArray<{ payload?: Record<string, any> }>;
-  data: Array<Record<string, any>>;
-  series: TooltipSeries[];
-}) {
-  if (!active || !payload?.length || !series.length) return null;
-  const activePoint = payload[0]?.payload || {};
-  const activeIndex = data.findIndex((point) => point.ts === activePoint.ts);
-  const rows = series
-    .map((item) => {
-      const directValue = validNumber(activePoint[item.key]);
-      const value = directValue ?? nearestSeriesValue(data, item.key, activeIndex);
-      return value === null ? null : { ...item, value };
-    })
-    .filter((item): item is TooltipSeries & { value: number } => item !== null);
-  if (!rows.length) return null;
-
-  return (
-    <div className="rounded border border-slate-200 bg-white px-2.5 py-2 text-[11px] shadow-lg">
-      <div className="mb-1 font-mono text-slate-500">{label}</div>
-      <div className="grid gap-1">
-        {rows.slice(0, 8).map((item) => (
-          <div key={item.key} className="flex min-w-[140px] items-center justify-between gap-4">
-            <span className="inline-flex items-center gap-1.5 text-slate-700">
-              <span className="h-2 w-2 rounded-full" style={{ backgroundColor: item.color }} />
-              <span className="font-semibold">{item.label}</span>
-            </span>
-            <strong className="font-mono text-slate-900">{item.value.toFixed(2)}°</strong>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
 // ── Main component ─────────────────────────────────────────────────────
 
 export function LiveTemperatureThresholdChart({
@@ -368,8 +288,6 @@ export function LiveTemperatureThresholdChart({
   }, [chartSeries, userToggledKeys, city, showRunwayDetails]);
 
   const {
-    isHKO,
-    isParis,
     isShenzhen,
     metarHeaderLabel,
     metarHighLabel,
@@ -586,393 +504,65 @@ export function LiveTemperatureThresholdChart({
   return (
     <Panel title={panelTitle} actions={timeframeActions}>
       <div className="flex h-full min-h-[300px] flex-col">
-        {/* Compact stats bar */}
+        <TemperatureStatsBars
-        {compact ? (
+          isEn={isEn}
-          <div className="shrink-0 border-b border-slate-200 bg-white px-3 py-1.5 flex items-center justify-between">
+          compact={compact}
-            {timeframe === "1D" ? (
+          timeframe={timeframe}
-              <div className="flex items-center gap-4 text-[11px]">
+          runwayHeaderLabel={runwayHeaderLabel}
-                <span className="font-semibold text-slate-500">
+          metarHeaderLabel={metarHeaderLabel}
-                  {isEn ? "Runway" : runwayHeaderLabel}:{" "}
+          runwayHighLabel={runwayHighLabel}
-                  <strong className="text-[#009688] font-mono">{temp(displayRunwayTemp)}</strong>
+          metarHighLabel={metarHighLabel}
-                </span>
+          isShenzhen={isShenzhen}
-                <span className="text-slate-300">|</span>
+          displayRunwayTemp={displayRunwayTemp}
-                <span className="font-semibold text-slate-500">
+          observedHighMetar={observedHighMetar}
-                  {isEn ? "METAR" : (isShenzhen ? "当日最高" : metarHeaderLabel)}:{" "}
+          observedHighRunway={observedHighRunway}
-                  <strong className="text-blue-600 font-mono">{temp(observedHighMetar)}</strong>
+          wundergroundDailyHigh={wundergroundDailyHigh}
-                </span>
+          debVal={debVal}
-              </div>
+          modelMin={modelMin}
-            ) : (
+          modelMax={modelMax}
-              <div className="flex items-center gap-4 text-[11px]">
+          spread={spread}
-                <span className="font-semibold text-slate-500">
+          spreadLabel={spreadLabel}
-                  DEB: <strong className="text-orange-600 font-mono">{temp(debVal)}</strong>
+          spreadLabelEn={spreadLabelEn}
-                </span>
+          formattedUpdateTime={formattedUpdateTime}
-                {modelMin !== null && modelMax !== null && (
+        />
-                  <>
-                    <span className="text-slate-300">|</span>
-                    <span className="font-semibold text-slate-500">
-                      {isEn ? "Models" : "多模型"}:{" "}
-                      <strong className="text-slate-700 font-mono">
-                        {temp(modelMin)} - {temp(modelMax)}
-                      </strong>
-                    </span>
-                  </>
-                )}
-              </div>
-            )}
-            <div className="text-[10px] text-slate-400 font-mono">
-              {timeframe === "1D" && formattedUpdateTime.includes(" ") ? formattedUpdateTime.split(" ")[1].slice(0, 5) : ""}
-            </div>
-          </div>
-        ) : (
-          /* Normal detailed stats bar */
-          <div className="shrink-0 border-b border-slate-200 bg-white px-4 py-3">
-            {/* Top Row: Large temperatures */}
-            <div className="flex justify-between items-center gap-6 mb-3">
-              {timeframe === "1D" ? (
-                <div className="flex items-center gap-12">
-                  <div className="flex flex-col">
-                    <span className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">
-                      {isEn ? "Runway Live (1m)" : `${runwayHeaderLabel}`}
-                    </span>
-                    <span className="text-2xl font-bold font-mono text-[#009688] mt-1">
-                      {temp(displayRunwayTemp)}
-                    </span>
-                  </div>
-                  <div className="flex flex-col">
-                    <span className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">
-                      {isEn ? "METAR Settlement · Daily High" : `${metarHeaderLabel} · 当日最高`}
-                    </span>
-                    <span className="text-2xl font-bold font-mono text-blue-600 mt-1">
-                      {temp(observedHighMetar)}
-                    </span>
-                  </div>
-                </div>
-              ) : (
-                <div className="flex items-center gap-12">
-                  <div className="flex flex-col">
-                    <span className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">
-                      DEB Max
-                    </span>
-                    <span className="text-2xl font-bold font-mono text-orange-600 mt-1">
-                      {temp(debVal)}
-                    </span>
-                  </div>
-                  <div className="flex flex-col">
-                    <span className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">
-                      {isEn ? "Model Range" : "多模型区间"}
-                    </span>
-                    <span className="text-2xl font-bold font-mono text-slate-700 mt-1">
-                      {modelMin !== null && modelMax !== null ? `${temp(modelMin)} - ${temp(modelMax)}` : "--"}
-                    </span>
-                  </div>
-                </div>
-              )}
-              
-              <div className="hidden sm:flex flex-col items-end text-right">
-                <span className="text-[10px] text-slate-400 uppercase font-semibold">
-                  {isEn ? "Daily Peak" : "当日最高气温"}
-                </span>
-                <div className="mt-1 flex items-center gap-2 text-xs font-mono text-slate-600">
-                  <span>{isEn ? "Runway" : runwayHighLabel}: <strong className="text-[#009688]">{temp(observedHighRunway)}</strong></span>
-                  <span>|</span>
-                  <span>{isEn ? "METAR" : metarHighLabel}: <strong className="text-blue-600">{temp(observedHighMetar)}</strong></span>
-                  {wundergroundDailyHigh !== null && (
-                    <>
-                      <span>|</span>
-                      <span>WU: <strong className="text-purple-600">{temp(wundergroundDailyHigh)}</strong></span>
-                    </>
-                  )}
-                </div>
-              </div>
-            </div>
 
-            {/* Bottom Row: Model Range Panel (Only for 1D mode) */}
+        {timeframe === "1D" && !compact && (
-            {timeframe === "1D" && (
+          <TemperatureRunwayDetails isEn={isEn} plates={runwayPlates} />
-              <div className="grid grid-cols-4 gap-4 border-t border-slate-100 pt-3 text-xs font-mono text-slate-700 bg-slate-50/50 -mx-4 px-4 rounded-b-md">
-                <div className="flex flex-col gap-0.5">
-                  <span className="text-[10px] text-slate-400 uppercase font-semibold">
-                    {isEn ? "Model Range" : "模型区间"}
-                  </span>
-                  <strong className="text-slate-800 font-bold">
-                    {modelMin !== null && modelMax !== null ? `${temp(modelMin)} - ${temp(modelMax)}` : "--"}
-                  </strong>
-                </div>
-                <div className="flex flex-col gap-0.5">
-                  <span className="text-[10px] text-slate-400 uppercase font-semibold">
-                    DEB
-                  </span>
-                  <strong className="text-blue-600 font-bold">
-                    {temp(debVal)}
-                  </strong>
-                </div>
-                <div className="flex flex-col gap-0.5">
-                  <span className="text-[10px] text-slate-400 uppercase font-semibold">
-                    {isEn ? "Spread" : "分歧"}
-                  </span>
-                  <strong className={clsx("font-bold", spreadLabel === "高分歧" ? "text-amber-600" : "text-slate-600")}>
-                    {spread !== null ? `${spread.toFixed(1)}°C` : "--"}
-                    {spreadLabel && ` · ${isEn ? spreadLabelEn : spreadLabel}`}
-                  </strong>
-                </div>
-                <div className="flex flex-col gap-0.5">
-                  <span className="text-[10px] text-slate-400 uppercase font-semibold">
-                    {isEn ? "Updated" : "更新时间"}
-                  </span>
-                  <strong className="text-slate-800 font-bold">
-                    {formattedUpdateTime}
-                  </strong>
-                </div>
-              </div>
-            )}
-          </div>
         )}
 
-        {/* Runway observations (Only for 1D mode and when not compact) */}
+        {timeframe === "1D" && !compact && (
-        {timeframe === "1D" && !compact && runwayPlates.length > 0 && (
+          <ModelCurvesSummary isEn={isEn} activeSeries={activeSeries} />
-          <div className="shrink-0 border-b border-slate-200 bg-[#f8fafc] px-3 py-2">
-            <div className="flex items-center justify-between text-[11px] font-black text-slate-700 mb-1.5 uppercase">
-              <span>{isEn ? "Runway Observations" : "跑道观测"}</span>
-              {runwayPlates.some((p) => p.trend_15m !== null && p.trend_15m > 0 && !p.isSettlement) && (
-                <span className="text-[10px] bg-amber-50 text-amber-700 border border-amber-200 px-1.5 py-0.5 rounded font-sans">
-                  {isEn ? "Non-settlement Runway Warming Alert" : "非结算跑道升温提醒"}
-                </span>
-              )}
-            </div>
-            <div className="grid gap-1">
-              {runwayPlates.map((plate) => (
-                <div
-                  key={plate.rwy}
-                  className={clsx(
-                    "grid grid-cols-7 gap-2 items-center border rounded px-2.5 py-1 text-[11px] font-mono",
-                    plate.isSettlement
-                      ? "border-emerald-200 bg-emerald-50/50 text-emerald-950 font-bold"
-                      : "border-slate-200 bg-white text-slate-600"
-                  )}
-                >
-                  <div className="flex items-center gap-1.5 font-sans font-bold text-slate-800">
-                    {plate.isSettlement && <span className="h-1.5 w-1.5 rounded-full bg-emerald-600 animate-pulse" />}
-                    <span>{plate.rwy}</span>
-                    {plate.isSettlement && (
-                      <span className="text-[9px] bg-teal-200 text-teal-800 px-1 rounded font-normal">
-                        {isEn ? "Settlement" : "结算"}
-                      </span>
-                    )}
-                  </div>
-                  <div>TDZ: <strong>{plate.tdzTemp !== null ? `${plate.tdzTemp.toFixed(1)}°C` : "--"}</strong></div>
-                  <div>MID: <strong>{plate.midTemp !== null ? `${plate.midTemp.toFixed(1)}°C` : "--"}</strong></div>
-                  <div>END: <strong>{plate.endTemp !== null ? `${plate.endTemp.toFixed(1)}°C` : "--"}</strong></div>
-                  <div>max: <strong>{plate.maxTemp !== null ? `${plate.maxTemp.toFixed(1)}°C` : "--"}</strong></div>
-                  <div>high: <strong>{plate.dailyHigh !== null ? `${plate.dailyHigh.toFixed(1)}°C` : "--"}</strong></div>
-                  <div className={clsx(plate.trend_15m !== null && plate.trend_15m > 0 ? "text-orange-600 font-bold" : "text-slate-500")}>
-                    15m: <strong>{plate.trend_15m !== null ? `${plate.trend_15m >= 0 ? "+" : ""}${plate.trend_15m.toFixed(1)}°C` : "--"}</strong>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
         )}
 
-        {/* Multi-model list (Only in 1D mode and when not compact) */}
+        <TemperatureChartCanvas
-        {timeframe === "1D" && !compact && activeSeries.some((s) => s.key.startsWith("model_curve_")) && (
+          isEn={isEn}
-          <div className="shrink-0 border-b border-slate-200 bg-white px-4 py-2">
+          compact={compact}
-            <div className="flex flex-wrap gap-x-6 gap-y-1 text-[11px]">
+          timeframe={timeframe}
-              <span className="font-black text-slate-500 uppercase mr-2">
+          row={row}
-                {isEn ? "Models:" : "多模型:"}
+          cityThresholds={cityThresholds}
-              </span>
+          chartSeries={chartSeries}
-              {activeSeries
+          activeSeries={activeSeries}
-                .filter((s) => s.key.startsWith("model_curve_"))
+          zoomedData={zoomedData}
-                .map((s) => {
+          chartDomain={chartDomain}
-                  const stats = seriesStats(s.values);
+          intDegreeTicks={intDegreeTicks}
-                  return (
+          hasRunwayData={hasRunwayData}
-                    <span key={s.key} className="inline-flex items-center gap-1.5 font-mono">
+          showRunwayDetails={showRunwayDetails}
-                      <span className="h-2 w-2 rounded-full shrink-0" style={{ backgroundColor: s.color }} />
+          isHourlyLoading={isHourlyLoading}
-                      <span className="text-slate-700 font-bold">{s.label}</span>
+          refAreaLeft={refAreaLeft}
-                      <span className="text-slate-500">{temp(stats.latest)}</span>
+          refAreaRight={refAreaRight}
-                    </span>
+          onMouseDown={handleMouseDown}
-                  );
+          onMouseMove={handleMouseMove}
-                })}
+          onMouseUp={handleMouseUp}
-            </div>
+          onZoomReset={() => setZoomRange(null)}
-          </div>
+          isSeriesVisible={isSeriesVisible}
-        )}
+          onSeriesToggle={(seriesKey) => {
-
+            setUserToggledKeys((prev) => ({
-        {/* Chart */}
+              ...prev,
-        <div className="relative min-h-[240px] flex-1 p-2">
+              [seriesKey]: !isSeriesVisible(seriesKey),
-          {/* Interactive legend */}
+            }));
-          <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 px-3 py-1.5 text-[11px] border-b border-[#e2e8f0] bg-white">
+          }}
-            {chartSeries.length > 1 &&
+          onShowRunwayDetailsChange={setShowRunwayDetails}
-              chartSeries
+        />
-                .filter((s) => {
-                  const isIndividualRunway = s.key.startsWith("runway_") && s.key !== "runway_max";
-                  if (showRunwayDetails) {
-                    return s.key !== "runway_max";
-                  } else {
-                    return !isIndividualRunway;
-                  }
-                })
-                .map((s) => (
-                  <button
-                    key={s.key}
-                    type="button"
-                    onClick={() => {
-                      setUserToggledKeys((prev) => ({
-                        ...prev,
-                        [s.key]: !isSeriesVisible(s.key),
-                      }));
-                    }}
-                    className={clsx(
-                      "inline-flex items-center gap-1.5 font-mono cursor-pointer transition-opacity hover:opacity-80",
-                      !isSeriesVisible(s.key) && "opacity-40 line-through"
-                    )}
-                  >
-                    <span className="h-2 w-2 rounded-full shrink-0" style={{ backgroundColor: s.color }} />
-                    <span className="text-slate-700 font-bold">{s.label}</span>
-                  </button>
-                ))}
-
-            {/* "Show Runway Details" toggle switch */}
-            {hasRunwayData && (
-              <label className="inline-flex items-center gap-1.5 ml-auto cursor-pointer text-slate-600 hover:text-slate-800 font-semibold select-none">
-                <input
-                  type="checkbox"
-                  checked={showRunwayDetails}
-                  onChange={(e) => setShowRunwayDetails(e.target.checked)}
-                  className="rounded border-slate-300 text-teal-600 focus:ring-teal-500 h-3.5 w-3.5 cursor-pointer"
-                />
-                <span>{isEn ? "Show Runway Details" : "显示跑道明细"}</span>
-              </label>
-            )}
-          </div>
-          <ResponsiveContainer
-            width="100%"
-            height="100%"
-            minWidth={1}
-            minHeight={220}
-            initialDimension={{ width: 1, height: 220 }}
-          >
-            <ReComposedChart
-              data={zoomedData}
-              margin={{ top: 16, right: compact ? 20 : 44, left: 4, bottom: 8 }}
-              onMouseDown={handleMouseDown}
-              onMouseMove={handleMouseMove}
-              onMouseUp={handleMouseUp}
-              onDoubleClick={() => setZoomRange(null)}
-            >
-              <CartesianGrid stroke="#dbe6ef" strokeDasharray="2 2" />
-              <XAxis
-                dataKey="label"
-                tick={{ fontSize: 9, fill: "#64748b" }}
-                tickLine={false}
-                axisLine={{ stroke: "#cbd5e1" }}
-                interval={Math.max(0, Math.floor(zoomedData.length / (compact ? 6 : 10)))}
-                minTickGap={compact ? 24 : 32}
-              />
-              <YAxis
-                orientation="right"
-                tick={{ fontSize: 9, fill: "#64748b" }}
-                tickFormatter={(v) => `${Number(v).toFixed(0)}°`}
-                axisLine={{ stroke: "#cbd5e1" }}
-                tickLine={false}
-                domain={chartDomain}
-                ticks={intDegreeTicks ?? undefined}
-              />
-              {timeframe === "1D" && cityThresholds.map((t, idx) => {
-                const isSelected = row && (Number(row.target_threshold ?? row.target_value) === t.threshold);
-                const labelText = isEn
-                  ? `${t.kind === "gte" ? "≥" : "≤"} ${t.threshold.toFixed(1)}° [${t.isBreached ? "Excluded" : "Active"}]`
-                  : `${t.kind === "gte" ? "≥" : "≤"} ${t.threshold.toFixed(1)}° [${t.isBreached ? "已排除" : "活跃"}]`;
-
-                return (
-                  <ReferenceLine
-                    key={idx}
-                    y={t.threshold}
-                    stroke={isSelected ? "#3b82f6" : t.isBreached ? "#ef4444" : "#f97316"}
-                    strokeDasharray={isSelected ? undefined : "4 4"}
-                    strokeWidth={isSelected ? 2 : 1}
-                    label={{
-                      value: compact ? undefined : labelText,
-                      fill: isSelected ? "#3b82f6" : t.isBreached ? "#ef4444" : "#f97316",
-                      fontSize: 9,
-                      position: isSelected ? "left" : "insideBottomRight",
-                    }}
-                  />
-                );
-              })}
-              <Tooltip
-                filterNull={false}
-                cursor={{ stroke: "#94a3b8", strokeWidth: 1 }}
-                contentStyle={{
-                  border: "1px solid #cbd5e1",
-                  borderRadius: 4,
-                  fontSize: 11,
-                  boxShadow: "0 8px 24px rgba(15,23,42,.12)",
-                }}
-                content={(props) => (
-                  <TemperatureTooltipContent
-                    active={props.active}
-                    label={props.label}
-                    payload={props.payload as ReadonlyArray<{ payload?: Record<string, any> }> | undefined}
-                    data={zoomedData}
-                    series={activeSeries}
-                  />
-                )}
-                formatter={(value: unknown) => {
-                  if (Array.isArray(value)) {
-                    const [low, high] = value;
-                    if (typeof low === "number" && typeof high === "number") {
-                      return `${low.toFixed(1)}° - ${high.toFixed(1)}°`;
-                    }
-                  }
-                  const num = Number(value);
-                  return Number.isFinite(num) ? `${num.toFixed(2)}°` : String(value);
-                }}
-              />
-              {/* Runway Temperature Band (low-high range area) */}
-              {hasRunwayData && (
-                <Area
-                  dataKey="runway_band"
-                  name={isEn ? "Runway Range" : "跑道区间"}
-                  stroke="none"
-                  fill="#009688"
-                  fillOpacity={showRunwayDetails ? 0.08 : 0.18}
-                  connectNulls={true}
-                  isAnimationActive={false}
-                />
-              )}
-              {refAreaLeft !== null && refAreaRight !== null && zoomedData[refAreaLeft] && zoomedData[refAreaRight] && (
-                <ReferenceArea
-                  x1={zoomedData[refAreaLeft].label}
-                  x2={zoomedData[refAreaRight].label}
-                  strokeOpacity={0.3}
-                  fill="#3b82f6"
-                  fillOpacity={0.15}
-                />
-              )}
-              {activeSeries.map((item) => (
-                <Line
-                  key={item.key}
-                  type={item.curve ?? (item.smooth ? "monotone" : "linear")}
-                  dataKey={item.key}
-                  name={item.label}
-                  stroke={item.color}
-                  strokeWidth={item.featured ? 2.8 : 1.2}
-                  strokeDasharray={item.dashed ? "4 3" : undefined}
-                  dot={item.showDot ? { r: item.featured ? 3 : 2, fill: item.color, strokeWidth: 0 } : false}
-                  activeDot={{ r: item.featured ? 6 : 4 }}
-                  connectNulls={true}
-                  isAnimationActive={false}
-                />
-              ))}
-            </ReComposedChart>
-          </ResponsiveContainer>
-          {isHourlyLoading && (
-            <div className="pointer-events-none absolute inset-2 z-10 grid place-items-center bg-white/65 backdrop-blur-[1px]">
-              <div className="flex items-center gap-2 rounded border border-slate-200 bg-white px-3 py-2 text-[11px] font-semibold text-slate-600 shadow-sm">
-                <span className="h-3 w-3 animate-spin rounded-full border-2 border-slate-300 border-t-blue-500" />
-                <span>{isEn ? "Loading chart" : "加载图表"}</span>
-              </div>
-            </div>
-          )}
-        </div>
       </div>
     </Panel>
   );

frontend/components/dashboard/scan-terminal/ModelCurvesSummary.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { seriesStats, type EvidenceSeries } from "@/components/dashboard/scan-terminal/temperature-chart-logic";
+import { temp } from "@/components/dashboard/scan-terminal/utils";
+
+export function ModelCurvesSummary({
+  isEn,
+  activeSeries,
+}: {
+  isEn: boolean;
+  activeSeries: EvidenceSeries[];
+}) {
+  const modelSeries = activeSeries.filter((s) => s.key.startsWith("model_curve_"));
+  if (!modelSeries.length) return null;
+
+  return (
+    <div className="shrink-0 border-b border-slate-200 bg-white px-4 py-2">
+      <div className="flex flex-wrap gap-x-6 gap-y-1 text-[11px]">
+        <span className="font-black text-slate-500 uppercase mr-2">
+          {isEn ? "Models:" : "多模型:"}
+        </span>
+        {modelSeries.map((s) => {
+          const stats = seriesStats(s.values);
+          return (
+            <span key={s.key} className="inline-flex items-center gap-1.5 font-mono">
+              <span className="h-2 w-2 rounded-full shrink-0" style={{ backgroundColor: s.color }} />
+              <span className="text-slate-700 font-bold">{s.label}</span>
+              <span className="text-slate-500">{temp(stats.latest)}</span>
+            </span>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

frontend/components/dashboard/scan-terminal/TemperatureChartCanvas.tsx

@@ -0,0 +1,285 @@
+"use client";
+
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
+import {
+  Area,
+  CartesianGrid,
+  ComposedChart as ReComposedChart,
+  Line,
+  ReferenceArea,
+  ReferenceLine,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import type { ScanOpportunityRow } from "@/lib/dashboard-types";
+import { TemperatureTooltipContent } from "@/components/dashboard/scan-terminal/TemperatureTooltipContent";
+import type { EvidenceSeries } from "@/components/dashboard/scan-terminal/temperature-chart-logic";
+
+type CityThreshold = {
+  threshold: number;
+  label: string;
+  isBreached: boolean;
+  kind: "gte" | "lte";
+};
+
+export function TemperatureChartCanvas({
+  isEn,
+  compact,
+  timeframe,
+  row,
+  cityThresholds,
+  chartSeries,
+  activeSeries,
+  zoomedData,
+  chartDomain,
+  intDegreeTicks,
+  hasRunwayData,
+  showRunwayDetails,
+  isHourlyLoading,
+  refAreaLeft,
+  refAreaRight,
+  onMouseDown,
+  onMouseMove,
+  onMouseUp,
+  onZoomReset,
+  isSeriesVisible,
+  onSeriesToggle,
+  onShowRunwayDetailsChange,
+}: {
+  isEn: boolean;
+  compact: boolean;
+  timeframe: string;
+  row: ScanOpportunityRow | null;
+  cityThresholds: CityThreshold[];
+  chartSeries: EvidenceSeries[];
+  activeSeries: EvidenceSeries[];
+  zoomedData: Array<Record<string, any>>;
+  chartDomain: [number, number] | ["auto", "auto"];
+  intDegreeTicks: number[] | null;
+  hasRunwayData: boolean;
+  showRunwayDetails: boolean;
+  isHourlyLoading: boolean;
+  refAreaLeft: number | null;
+  refAreaRight: number | null;
+  onMouseDown: (event: any) => void;
+  onMouseMove: (event: any) => void;
+  onMouseUp: () => void;
+  onZoomReset: () => void;
+  isSeriesVisible: (seriesKey: string) => boolean;
+  onSeriesToggle: (seriesKey: string) => void;
+  onShowRunwayDetailsChange: (value: boolean) => void;
+}) {
+  const chartHostRef = useRef<HTMLDivElement | null>(null);
+  const [chartSize, setChartSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const host = chartHostRef.current;
+    if (!host) return;
+
+    let frame = 0;
+    const measure = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        const rect = host.getBoundingClientRect();
+        const width = Math.floor(rect.width);
+        const height = Math.floor(rect.height);
+        setChartSize((prev) => {
+          if (prev.width === width && prev.height === height) return prev;
+          return { width, height };
+        });
+      });
+    };
+
+    measure();
+
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(measure);
+      observer.observe(host);
+      return () => {
+        cancelAnimationFrame(frame);
+        observer.disconnect();
+      };
+    }
+
+    window.addEventListener("resize", measure);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("resize", measure);
+    };
+  }, []);
+
+  const canRenderChart = chartSize.width > 0 && chartSize.height > 0;
+  const chartWidth = Math.max(1, chartSize.width);
+  const chartHeight = Math.max(220, chartSize.height);
+
+  return (
+    <div className="relative flex min-h-[240px] flex-1 flex-col p-2">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 px-3 py-1.5 text-[11px] border-b border-[#e2e8f0] bg-white">
+        {chartSeries.length > 1 &&
+          chartSeries
+            .filter((s) => {
+              const isIndividualRunway = s.key.startsWith("runway_") && s.key !== "runway_max";
+              if (showRunwayDetails) {
+                return s.key !== "runway_max";
+              }
+              return !isIndividualRunway;
+            })
+            .map((s) => (
+              <button
+                key={s.key}
+                type="button"
+                onClick={() => onSeriesToggle(s.key)}
+                className={clsx(
+                  "inline-flex items-center gap-1.5 font-mono cursor-pointer transition-opacity hover:opacity-80",
+                  !isSeriesVisible(s.key) && "opacity-40 line-through"
+                )}
+              >
+                <span className="h-2 w-2 rounded-full shrink-0" style={{ backgroundColor: s.color }} />
+                <span className="text-slate-700 font-bold">{s.label}</span>
+              </button>
+            ))}
+
+        {hasRunwayData && (
+          <label className="inline-flex items-center gap-1.5 ml-auto cursor-pointer text-slate-600 hover:text-slate-800 font-semibold select-none">
+            <input
+              type="checkbox"
+              checked={showRunwayDetails}
+              onChange={(e) => onShowRunwayDetailsChange(e.target.checked)}
+              className="rounded border-slate-300 text-teal-600 focus:ring-teal-500 h-3.5 w-3.5 cursor-pointer"
+            />
+            <span>{isEn ? "Show Runway Details" : "显示跑道明细"}</span>
+          </label>
+        )}
+      </div>
+      <div ref={chartHostRef} className="relative min-h-[220px] flex-1">
+        {canRenderChart && (
+          <ReComposedChart
+            width={chartWidth}
+            height={chartHeight}
+            data={zoomedData}
+            margin={{ top: 16, right: compact ? 20 : 44, left: 4, bottom: 8 }}
+            onMouseDown={onMouseDown}
+            onMouseMove={onMouseMove}
+            onMouseUp={onMouseUp}
+            onDoubleClick={onZoomReset}
+          >
+            <CartesianGrid stroke="#dbe6ef" strokeDasharray="2 2" />
+            <XAxis
+              dataKey="label"
+              tick={{ fontSize: 9, fill: "#64748b" }}
+              tickLine={false}
+              axisLine={{ stroke: "#cbd5e1" }}
+              interval={Math.max(0, Math.floor(zoomedData.length / (compact ? 6 : 10)))}
+              minTickGap={compact ? 24 : 32}
+            />
+            <YAxis
+              orientation="right"
+              tick={{ fontSize: 9, fill: "#64748b" }}
+              tickFormatter={(v) => `${Number(v).toFixed(0)}°`}
+              axisLine={{ stroke: "#cbd5e1" }}
+              tickLine={false}
+              domain={chartDomain}
+              ticks={intDegreeTicks ?? undefined}
+            />
+            {timeframe === "1D" && cityThresholds.map((t, idx) => {
+              const isSelected = row && (Number(row.target_threshold ?? row.target_value) === t.threshold);
+              const labelText = isEn
+                ? `${t.kind === "gte" ? "≥" : "≤"} ${t.threshold.toFixed(1)}° [${t.isBreached ? "Excluded" : "Active"}]`
+                : `${t.kind === "gte" ? "≥" : "≤"} ${t.threshold.toFixed(1)}° [${t.isBreached ? "已排除" : "活跃"}]`;
+
+              return (
+                <ReferenceLine
+                  key={idx}
+                  y={t.threshold}
+                  stroke={isSelected ? "#3b82f6" : t.isBreached ? "#ef4444" : "#f97316"}
+                  strokeDasharray={isSelected ? undefined : "4 4"}
+                  strokeWidth={isSelected ? 2 : 1}
+                  label={{
+                    value: compact ? undefined : labelText,
+                    fill: isSelected ? "#3b82f6" : t.isBreached ? "#ef4444" : "#f97316",
+                    fontSize: 9,
+                    position: isSelected ? "left" : "insideBottomRight",
+                  }}
+                />
+              );
+            })}
+            <Tooltip
+              filterNull={false}
+              cursor={{ stroke: "#94a3b8", strokeWidth: 1 }}
+              contentStyle={{
+                border: "1px solid #cbd5e1",
+                borderRadius: 4,
+                fontSize: 11,
+                boxShadow: "0 8px 24px rgba(15,23,42,.12)",
+              }}
+              content={(props) => (
+                <TemperatureTooltipContent
+                  active={props.active}
+                  label={props.label}
+                  payload={props.payload as ReadonlyArray<{ payload?: Record<string, any> }> | undefined}
+                  data={zoomedData}
+                  series={activeSeries}
+                />
+              )}
+              formatter={(value: unknown) => {
+                if (Array.isArray(value)) {
+                  const [low, high] = value;
+                  if (typeof low === "number" && typeof high === "number") {
+                    return `${low.toFixed(1)}° - ${high.toFixed(1)}°`;
+                  }
+                }
+                const num = Number(value);
+                return Number.isFinite(num) ? `${num.toFixed(2)}°` : String(value);
+              }}
+            />
+            {hasRunwayData && (
+              <Area
+                dataKey="runway_band"
+                name={isEn ? "Runway Range" : "跑道区间"}
+                stroke="none"
+                fill="#009688"
+                fillOpacity={showRunwayDetails ? 0.08 : 0.18}
+                connectNulls={true}
+                isAnimationActive={false}
+              />
+            )}
+            {refAreaLeft !== null && refAreaRight !== null && zoomedData[refAreaLeft] && zoomedData[refAreaRight] && (
+              <ReferenceArea
+                x1={zoomedData[refAreaLeft].label}
+                x2={zoomedData[refAreaRight].label}
+                strokeOpacity={0.3}
+                fill="#3b82f6"
+                fillOpacity={0.15}
+              />
+            )}
+            {activeSeries.map((item) => (
+              <Line
+                key={item.key}
+                type={item.curve ?? (item.smooth ? "monotone" : "linear")}
+                dataKey={item.key}
+                name={item.label}
+                stroke={item.color}
+                strokeWidth={item.featured ? 2.8 : 1.2}
+                strokeDasharray={item.dashed ? "4 3" : undefined}
+                dot={item.showDot ? { r: item.featured ? 3 : 2, fill: item.color, strokeWidth: 0 } : false}
+                activeDot={{ r: item.featured ? 6 : 4 }}
+                connectNulls={true}
+                isAnimationActive={false}
+              />
+            ))}
+          </ReComposedChart>
+        )}
+      </div>
+      {isHourlyLoading && (
+        <div className="pointer-events-none absolute inset-2 z-10 grid place-items-center bg-white/65 backdrop-blur-[1px]">
+          <div className="flex items-center gap-2 rounded border border-slate-200 bg-white px-3 py-2 text-[11px] font-semibold text-slate-600 shadow-sm">
+            <span className="h-3 w-3 animate-spin rounded-full border-2 border-slate-300 border-t-blue-500" />
+            <span>{isEn ? "Loading chart" : "加载图表"}</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/components/dashboard/scan-terminal/TemperatureRunwayDetails.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import clsx from "clsx";
+
+type RunwayPlate = {
+  rwy: string;
+  isSettlement: boolean;
+  tdzTemp: number | null;
+  midTemp: number | null;
+  endTemp: number | null;
+  maxTemp: number | null;
+  dailyHigh: number | null;
+  trend_15m: number | null;
+};
+
+export function TemperatureRunwayDetails({
+  isEn,
+  plates,
+}: {
+  isEn: boolean;
+  plates: RunwayPlate[];
+}) {
+  if (!plates.length) return null;
+
+  return (
+    <div className="shrink-0 border-b border-slate-200 bg-[#f8fafc] px-3 py-2">
+      <div className="flex items-center justify-between text-[11px] font-black text-slate-700 mb-1.5 uppercase">
+        <span>{isEn ? "Runway Observations" : "跑道观测"}</span>
+        {plates.some((p) => p.trend_15m !== null && p.trend_15m > 0 && !p.isSettlement) && (
+          <span className="text-[10px] bg-amber-50 text-amber-700 border border-amber-200 px-1.5 py-0.5 rounded font-sans">
+            {isEn ? "Non-settlement Runway Warming Alert" : "非结算跑道升温提醒"}
+          </span>
+        )}
+      </div>
+      <div className="grid gap-1">
+        {plates.map((plate) => (
+          <div
+            key={plate.rwy}
+            className={clsx(
+              "grid grid-cols-7 gap-2 items-center border rounded px-2.5 py-1 text-[11px] font-mono",
+              plate.isSettlement
+                ? "border-emerald-200 bg-emerald-50/50 text-emerald-950 font-bold"
+                : "border-slate-200 bg-white text-slate-600"
+            )}
+          >
+            <div className="flex items-center gap-1.5 font-sans font-bold text-slate-800">
+              {plate.isSettlement && <span className="h-1.5 w-1.5 rounded-full bg-emerald-600 animate-pulse" />}
+              <span>{plate.rwy}</span>
+              {plate.isSettlement && (
+                <span className="text-[9px] bg-teal-200 text-teal-800 px-1 rounded font-normal">
+                  {isEn ? "Settlement" : "结算"}
+                </span>
+              )}
+            </div>
+            <div>TDZ: <strong>{plate.tdzTemp !== null ? `${plate.tdzTemp.toFixed(1)}°C` : "--"}</strong></div>
+            <div>MID: <strong>{plate.midTemp !== null ? `${plate.midTemp.toFixed(1)}°C` : "--"}</strong></div>
+            <div>END: <strong>{plate.endTemp !== null ? `${plate.endTemp.toFixed(1)}°C` : "--"}</strong></div>
+            <div>max: <strong>{plate.maxTemp !== null ? `${plate.maxTemp.toFixed(1)}°C` : "--"}</strong></div>
+            <div>high: <strong>{plate.dailyHigh !== null ? `${plate.dailyHigh.toFixed(1)}°C` : "--"}</strong></div>
+            <div className={clsx(plate.trend_15m !== null && plate.trend_15m > 0 ? "text-orange-600 font-bold" : "text-slate-500")}>
+              15m: <strong>{plate.trend_15m !== null ? `${plate.trend_15m >= 0 ? "+" : ""}${plate.trend_15m.toFixed(1)}°C` : "--"}</strong>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/components/dashboard/scan-terminal/TemperatureStatsBars.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import clsx from "clsx";
+import { temp } from "@/components/dashboard/scan-terminal/utils";
+
+export function TemperatureStatsBars({
+  isEn,
+  compact,
+  timeframe,
+  runwayHeaderLabel,
+  metarHeaderLabel,
+  runwayHighLabel,
+  metarHighLabel,
+  isShenzhen,
+  displayRunwayTemp,
+  observedHighMetar,
+  observedHighRunway,
+  wundergroundDailyHigh,
+  debVal,
+  modelMin,
+  modelMax,
+  spread,
+  spreadLabel,
+  spreadLabelEn,
+  formattedUpdateTime,
+}: {
+  isEn: boolean;
+  compact: boolean;
+  timeframe: string;
+  runwayHeaderLabel: string;
+  metarHeaderLabel: string;
+  runwayHighLabel: string;
+  metarHighLabel: string;
+  isShenzhen: boolean;
+  displayRunwayTemp: number | null;
+  observedHighMetar: number | null;
+  observedHighRunway: number | null;
+  wundergroundDailyHigh: number | null;
+  debVal: number | null;
+  modelMin: number | null;
+  modelMax: number | null;
+  spread: number | null;
+  spreadLabel: string;
+  spreadLabelEn: string;
+  formattedUpdateTime: string;
+}) {
+  if (compact) {
+    return (
+      <div className="shrink-0 border-b border-slate-200 bg-white px-3 py-1.5 flex items-center justify-between">
+        {timeframe === "1D" ? (
+          <div className="flex items-center gap-4 text-[11px]">
+            <span className="font-semibold text-slate-500">
+              {isEn ? "Runway" : runwayHeaderLabel}:{" "}
+              <strong className="text-[#009688] font-mono">{temp(displayRunwayTemp)}</strong>
+            </span>
+            <span className="text-slate-300">|</span>
+            <span className="font-semibold text-slate-500">
+              {isEn ? "METAR" : (isShenzhen ? "当日最高" : metarHeaderLabel)}:{" "}
+              <strong className="text-blue-600 font-mono">{temp(observedHighMetar)}</strong>
+            </span>
+          </div>
+        ) : (
+          <div className="flex items-center gap-4 text-[11px]">
+            <span className="font-semibold text-slate-500">
+              DEB: <strong className="text-orange-600 font-mono">{temp(debVal)}</strong>
+            </span>
+            {modelMin !== null && modelMax !== null && (
+              <>
+                <span className="text-slate-300">|</span>
+                <span className="font-semibold text-slate-500">
+                  {isEn ? "Models" : "多模型"}:{" "}
+                  <strong className="text-slate-700 font-mono">
+                    {temp(modelMin)} - {temp(modelMax)}
+                  </strong>
+                </span>
+              </>
+            )}
+          </div>
+        )}
+        <div className="text-[10px] text-slate-400 font-mono">
+          {timeframe === "1D" && formattedUpdateTime.includes(" ") ? formattedUpdateTime.split(" ")[1].slice(0, 5) : ""}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="shrink-0 border-b border-slate-200 bg-white px-4 py-3">
+      <div className="flex justify-between items-center gap-6 mb-3">
+        {timeframe === "1D" ? (
+          <div className="flex items-center gap-12">
+            <div className="flex flex-col">
+              <span className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">
+                {isEn ? "Runway Live (1m)" : `${runwayHeaderLabel}`}
+              </span>
+              <span className="text-2xl font-bold font-mono text-[#009688] mt-1">
+                {temp(displayRunwayTemp)}
+              </span>
+            </div>
+            <div className="flex flex-col">
+              <span className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">
+                {isEn ? "METAR Settlement · Daily High" : `${metarHeaderLabel} · 当日最高`}
+              </span>
+              <span className="text-2xl font-bold font-mono text-blue-600 mt-1">
+                {temp(observedHighMetar)}
+              </span>
+            </div>
+          </div>
+        ) : (
+          <div className="flex items-center gap-12">
+            <div className="flex flex-col">
+              <span className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">
+                DEB Max
+              </span>
+              <span className="text-2xl font-bold font-mono text-orange-600 mt-1">
+                {temp(debVal)}
+              </span>
+            </div>
+            <div className="flex flex-col">
+              <span className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider">
+                {isEn ? "Model Range" : "多模型区间"}
+              </span>
+              <span className="text-2xl font-bold font-mono text-slate-700 mt-1">
+                {modelMin !== null && modelMax !== null ? `${temp(modelMin)} - ${temp(modelMax)}` : "--"}
+              </span>
+            </div>
+          </div>
+        )}
+
+        <div className="hidden sm:flex flex-col items-end text-right">
+          <span className="text-[10px] text-slate-400 uppercase font-semibold">
+            {isEn ? "Daily Peak" : "当日最高气温"}
+          </span>
+          <div className="mt-1 flex items-center gap-2 text-xs font-mono text-slate-600">
+            <span>{isEn ? "Runway" : runwayHighLabel}: <strong className="text-[#009688]">{temp(observedHighRunway)}</strong></span>
+            <span>|</span>
+            <span>{isEn ? "METAR" : metarHighLabel}: <strong className="text-blue-600">{temp(observedHighMetar)}</strong></span>
+            {wundergroundDailyHigh !== null && (
+              <>
+                <span>|</span>
+                <span>WU: <strong className="text-purple-600">{temp(wundergroundDailyHigh)}</strong></span>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {timeframe === "1D" && (
+        <div className="grid grid-cols-4 gap-4 border-t border-slate-100 pt-3 text-xs font-mono text-slate-700 bg-slate-50/50 -mx-4 px-4 rounded-b-md">
+          <div className="flex flex-col gap-0.5">
+            <span className="text-[10px] text-slate-400 uppercase font-semibold">
+              {isEn ? "Model Range" : "模型区间"}
+            </span>
+            <strong className="text-slate-800 font-bold">
+              {modelMin !== null && modelMax !== null ? `${temp(modelMin)} - ${temp(modelMax)}` : "--"}
+            </strong>
+          </div>
+          <div className="flex flex-col gap-0.5">
+            <span className="text-[10px] text-slate-400 uppercase font-semibold">
+              DEB
+            </span>
+            <strong className="text-blue-600 font-bold">
+              {temp(debVal)}
+            </strong>
+          </div>
+          <div className="flex flex-col gap-0.5">
+            <span className="text-[10px] text-slate-400 uppercase font-semibold">
+              {isEn ? "Spread" : "分歧"}
+            </span>
+            <strong className={clsx("font-bold", spreadLabel === "高分歧" ? "text-amber-600" : "text-slate-600")}>
+              {spread !== null ? `${spread.toFixed(1)}°C` : "--"}
+              {spreadLabel && ` · ${isEn ? spreadLabelEn : spreadLabel}`}
+            </strong>
+          </div>
+          <div className="flex flex-col gap-0.5">
+            <span className="text-[10px] text-slate-400 uppercase font-semibold">
+              {isEn ? "Updated" : "更新时间"}
+            </span>
+            <strong className="text-slate-800 font-bold">
+              {formattedUpdateTime}
+            </strong>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/components/dashboard/scan-terminal/TemperatureTooltipContent.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { validNumber, type EvidenceSeries } from "@/components/dashboard/scan-terminal/temperature-chart-logic";
+
+type TooltipSeries = Pick<EvidenceSeries, "key" | "label" | "color">;
+
+function nearestSeriesValue(
+  data: Array<Record<string, any>>,
+  seriesKey: string,
+  activeIndex: number,
+) {
+  if (!data.length || activeIndex < 0) return null;
+  for (let offset = 0; offset < data.length; offset += 1) {
+    const left = activeIndex - offset;
+    if (left >= 0) {
+      const value = validNumber(data[left]?.[seriesKey]);
+      if (value !== null) return value;
+    }
+    const right = activeIndex + offset;
+    if (right < data.length) {
+      const value = validNumber(data[right]?.[seriesKey]);
+      if (value !== null) return value;
+    }
+  }
+  return null;
+}
+
+export function TemperatureTooltipContent({
+  active,
+  label,
+  payload,
+  data,
+  series,
+}: {
+  active?: boolean;
+  label?: string | number;
+  payload?: ReadonlyArray<{ payload?: Record<string, any> }>;
+  data: Array<Record<string, any>>;
+  series: TooltipSeries[];
+}) {
+  if (!active || !payload?.length || !series.length) return null;
+  const activePoint = payload[0]?.payload || {};
+  const activeIndex = data.findIndex((point) => point.ts === activePoint.ts);
+  const rows = series
+    .map((item) => {
+      const directValue = validNumber(activePoint[item.key]);
+      const value = directValue ?? nearestSeriesValue(data, item.key, activeIndex);
+      return value === null ? null : { ...item, value };
+    })
+    .filter((item): item is TooltipSeries & { value: number } => item !== null);
+  if (!rows.length) return null;
+
+  return (
+    <div className="rounded border border-slate-200 bg-white px-2.5 py-2 text-[11px] shadow-lg">
+      <div className="mb-1 font-mono text-slate-500">{label}</div>
+      <div className="grid gap-1">
+        {rows.slice(0, 8).map((item) => (
+          <div key={item.key} className="flex min-w-[140px] items-center justify-between gap-4">
+            <span className="inline-flex items-center gap-1.5 text-slate-700">
+              <span className="h-2 w-2 rounded-full" style={{ backgroundColor: item.color }} />
+              <span className="font-semibold">{item.label}</span>
+            </span>
+            <strong className="font-mono text-slate-900">{item.value.toFixed(2)}°</strong>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/components/dashboard/scan-terminal/__tests__/ssePatchArchitecture.test.ts

@@ -87,6 +87,16 @@ export function runTests() {
   assert(bffEventsRoute.includes("searchParams"), "Next.js SSE proxy must forward query parameters to FastAPI");
 
   const chart = readFrontendFile("components", "dashboard", "scan-terminal", "LiveTemperatureThresholdChart.tsx");
+  const chartCanvasPath = path.join(process.cwd(), "components", "dashboard", "scan-terminal", "TemperatureChartCanvas.tsx");
+  const chartStatsPath = path.join(process.cwd(), "components", "dashboard", "scan-terminal", "TemperatureStatsBars.tsx");
+  const chartRunwayPath = path.join(process.cwd(), "components", "dashboard", "scan-terminal", "TemperatureRunwayDetails.tsx");
+  const chartTooltipPath = path.join(process.cwd(), "components", "dashboard", "scan-terminal", "TemperatureTooltipContent.tsx");
+  assert(fs.existsSync(chartCanvasPath), "temperature chart Recharts canvas must live in TemperatureChartCanvas.tsx");
+  assert(fs.existsSync(chartStatsPath), "temperature chart stat bars must live in TemperatureStatsBars.tsx");
+  assert(fs.existsSync(chartRunwayPath), "temperature chart runway detail panel must live in TemperatureRunwayDetails.tsx");
+  assert(fs.existsSync(chartTooltipPath), "temperature chart tooltip must live in TemperatureTooltipContent.tsx");
+  const chartCanvas = fs.readFileSync(chartCanvasPath, "utf8");
+  const chartTooltip = fs.readFileSync(chartTooltipPath, "utf8");
   const chartLogicPath = path.join(process.cwd(), "components", "dashboard", "scan-terminal", "temperature-chart-logic.ts");
   assert(fs.existsSync(chartLogicPath), "temperature chart pure data logic must live in temperature-chart-logic.ts");
   const chartLogic = fs.readFileSync(chartLogicPath, "utf8");
@@ -99,11 +109,16 @@ export function runTests() {
   assert(chart.includes("useSseResyncVersion"), "temperature chart must resync full detail when SSE replay is incomplete");
   assert(chartLogic.includes("runway_points"), "temperature chart must merge v1 runway_points into runway history");
   assert(chart.includes("2 * 60_000"), "temperature chart must wait two minutes without patches before full-fetch fallback");
-  assert(chart.includes("TemperatureTooltipContent"), "temperature chart must use a custom tooltip content component");
+  assert(chart.includes("TemperatureChartCanvas"), "temperature chart shell must compose the extracted chart canvas");
-  assert(chart.includes("filterNull={false}"), "temperature chart tooltip must keep null-slot payload so hover works between sparse points");
+  assert(chart.includes("TemperatureStatsBars"), "temperature chart shell must compose the extracted stat bars");
-  assert(chart.includes("nearestSeriesValue"), "temperature chart tooltip must fall back to nearest non-null value for connected sparse lines");
+  assert(chart.includes("TemperatureRunwayDetails"), "temperature chart shell must compose the extracted runway panel");
+  assert(!chart.includes("from \"recharts\""), "LiveTemperatureThresholdChart.tsx must not import Recharts directly");
+  assert(!chart.includes("function TemperatureTooltipContent"), "LiveTemperatureThresholdChart.tsx must not define tooltip content inline");
+  assert(chartCanvas.includes("TemperatureTooltipContent"), "temperature chart canvas must use a custom tooltip content component");
+  assert(chartCanvas.includes("filterNull={false}"), "temperature chart tooltip must keep null-slot payload so hover works between sparse points");
+  assert(chartTooltip.includes("nearestSeriesValue"), "temperature chart tooltip must fall back to nearest non-null value for connected sparse lines");
   assert(chart.includes("isHourlyLoading"), "temperature chart must keep a per-panel hourly loading state");
-  assert(chart.includes("加载图表") && chart.includes("absolute inset-2"), "temperature chart must render an in-chart loading overlay");
+  assert(chartCanvas.includes("加载图表") && chartCanvas.includes("absolute inset-2"), "temperature chart must render an in-chart loading overlay");
   assert(chart.includes("hasLoadedHourlyDetailRef"), "temperature chart must distinguish first load from background refreshes");
   const fallbackRefreshBlock = chart.match(/const refreshFullDetail = \(\) => \{[\s\S]*?\n    \};/)?.[0] || "";
   assert(
@@ -122,9 +137,15 @@ export function runTests() {
     chart.includes("targetResolution !== nextTargetResolution"),
     "temperature chart must guard target-resolution state updates to prevent render/update loops",
   );
+  assert(!chartCanvas.includes("ResponsiveContainer"), "temperature chart canvas must not mount Recharts through ResponsiveContainer at 0x0");
+  assert(chartCanvas.includes("ResizeObserver"), "temperature chart canvas must measure its host with ResizeObserver");
   assert(
-    chart.includes("initialDimension") && chart.includes("minHeight={"),
+    chartCanvas.includes("chartSize.width > 0") && chartCanvas.includes("chartSize.height > 0"),
-    "temperature chart ResponsiveContainer must have stable initial/min dimensions to avoid zero-size resize loops",
+    "temperature chart canvas must render Recharts only after positive host dimensions are measured",
+  );
+  assert(
+    chartCanvas.includes("width={chartWidth}") && chartCanvas.includes("height={chartHeight}"),
+    "temperature chart canvas must pass explicit positive width/height to Recharts",
   );
   assert(!chart.includes("3D"), "temperature chart UI must not expose a 3D/future-forecast mode");
   assert(!chart.includes("build3DayChartData"), "temperature chart component must not render future prediction curves");