Show Gaussian probability buckets in model summary

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

@@ -6,11 +6,14 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import type { ScanOpportunityRow } from "@/lib/dashboard-types";
 import {
   MODEL_SUMMARY_MODEL_COLUMNS,
+  buildModelSummaryProbabilityColumns,
   buildModelSummaryRows,
   filterModelSummaryRows,
+  formatModelSummaryProbability,
   formatModelSummaryLocalTime,
   formatModelSummaryTemp,
   hasModelSummaryForecastData,
+  type ModelSummaryProbabilityColumn,
   type ModelSummaryRow,
 } from "@/lib/model-summary";
 
@@ -30,6 +33,7 @@ const SUMMARY_TEXT = {
   city: { en: "City", zh: "城市" },
   region: { en: "Region", zh: "区域" },
   localTime: { en: "Local Time", zh: "当地时间" },
+  gaussianMu: { en: "Gaussian μ", zh: "高斯 μ" },
   median: { en: "Median", zh: "模型中位数" },
   spread: { en: "Spread", zh: "分歧范围" },
   empty: { en: "No model summary rows match the current filters.", zh: "当前筛选下没有模型汇总数据。" },
@@ -97,9 +101,11 @@ function FilterToggle({
 function ModelSummaryRowView({
   row,
   nowMs,
+  probabilityColumns,
 }: {
   row: ModelSummaryRow;
   nowMs: number | null;
+  probabilityColumns: ModelSummaryProbabilityColumn[];
 }) {
   return (
     <tr className="group border-b border-slate-100 hover:bg-blue-50/40">
@@ -109,7 +115,7 @@ function ModelSummaryRowView({
       >
         <span className="block truncate">{row.cityName}</span>
       </th>
-      <td className="min-w-[150px] px-3 py-2 text-xs font-semibold text-slate-600">
+      <td className="min-w-[96px] max-w-[112px] px-2 py-2 text-xs font-semibold text-slate-600">
         <span className="block truncate">{row.regionLabel}</span>
       </td>
       <td className="min-w-[96px] px-3 py-2 text-right font-mono text-[11px] font-bold text-slate-700">
@@ -129,6 +135,29 @@ function ModelSummaryRowView({
       <td className="min-w-[100px] px-3 py-2 text-right">
         <TemperatureCell value={row.modelSpread} symbol={row.tempSymbol} />
       </td>
+      <td className="min-w-[92px] px-3 py-2 text-right">
+        <TemperatureCell value={row.gaussianMu} symbol={row.tempSymbol} emphasis="median" />
+      </td>
+      {probabilityColumns.map((column) => {
+        const bucket = row.probabilityBucketMap[column.key] || null;
+        const isTopBucket = bucket?.key === row.topProbabilityBucketKey;
+        return (
+          <td key={column.key} className="min-w-[86px] px-2 py-2 text-right">
+            <span
+              className={clsx(
+                "inline-flex min-w-[42px] justify-end rounded px-1.5 py-0.5 font-mono tabular-nums",
+                bucket == null
+                  ? "font-semibold text-slate-300"
+                  : isTopBucket
+                    ? "bg-violet-50 font-black text-violet-800 ring-1 ring-violet-200"
+                    : "font-bold text-violet-700",
+              )}
+            >
+              {formatModelSummaryProbability(bucket?.probability)}
+            </span>
+          </td>
+        );
+      })}
     </tr>
   );
 }
@@ -204,6 +233,11 @@ export function ModelSummaryDashboard({
     }
   }, [incomingSummaryRows, incomingHasForecastData]);
 
+  const probabilityColumns = useMemo(
+    () => buildModelSummaryProbabilityColumns(summaryRows),
+    [summaryRows],
+  );
+
   const visibleRows = useMemo(
     () =>
       filterModelSummaryRows(summaryRows, {
@@ -259,13 +293,16 @@ export function ModelSummaryDashboard({
       </header>
 
       <div className="min-h-0 flex-1 overflow-auto">
-        <table className="w-full min-w-[1460px] border-collapse text-xs">
+        <table
+          className="w-full border-collapse text-xs"
+          style={{ minWidth: `${1560 + probabilityColumns.length * 86}px` }}
+        >
           <thead className="sticky top-0 z-20 bg-slate-50 text-[10px] font-black uppercase tracking-wide text-slate-500 shadow-[0_1px_0_0_#e2e8f0]">
             <tr>
               <th className="sticky left-0 z-30 w-[160px] min-w-[160px] border-r border-slate-200 bg-slate-50 px-3 py-2 text-left">
                 {copy("city", isEn)}
               </th>
-              <th className="min-w-[150px] px-3 py-2 text-left">{copy("region", isEn)}</th>
+              <th className="min-w-[96px] max-w-[112px] px-2 py-2 text-left">{copy("region", isEn)}</th>
               <th className="min-w-[96px] px-3 py-2 text-right">{copy("localTime", isEn)}</th>
               <th className="min-w-[90px] px-3 py-2 text-right text-orange-600">DEB</th>
               {MODEL_SUMMARY_MODEL_COLUMNS.map((column) => (
@@ -277,11 +314,28 @@ export function ModelSummaryDashboard({
                 {copy("median", isEn)}
               </th>
               <th className="min-w-[100px] px-3 py-2 text-right">{copy("spread", isEn)}</th>
+              <th className="min-w-[92px] px-3 py-2 text-right text-violet-700">
+                {copy("gaussianMu", isEn)}
+              </th>
+              {probabilityColumns.map((column) => (
+                <th
+                  key={column.key}
+                  className="min-w-[86px] px-2 py-2 text-right text-violet-700"
+                  title={column.label}
+                >
+                  {column.label}
+                </th>
+              ))}
             </tr>
           </thead>
           <tbody className="divide-y divide-slate-100 bg-white">
             {visibleRows.map((row) => (
-              <ModelSummaryRowView key={row.cityKey} row={row} nowMs={nowMs} />
+              <ModelSummaryRowView
+                key={row.cityKey}
+                row={row}
+                nowMs={nowMs}
+                probabilityColumns={probabilityColumns}
+              />
             ))}
           </tbody>
         </table>

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

@@ -2,8 +2,10 @@ import fs from "node:fs";
 import path from "node:path";
 import {
   MODEL_SUMMARY_MODEL_COLUMNS,
+  buildModelSummaryProbabilityColumns,
   buildModelSummaryRows,
   filterModelSummaryRows,
+  formatModelSummaryProbability,
   formatModelSummaryLocalTime,
   formatModelSummaryTemp,
   hasModelSummaryForecastData,
@@ -52,6 +54,12 @@ export function runTests() {
         JMA: 30.9,
         "AROME HD": 32.1,
       },
+      distribution_full: [
+        { value: 31, model_probability: 0.16, range: "[30.5~31.5)" },
+        { value: 32, model_probability: 0.42, range: "[31.5~32.5)" },
+        { value: 33, model_probability: 0.31, range: "[32.5~33.5)" },
+      ],
+      probability_engine: "legacy",
     },
     {
       city: "madrid",
@@ -67,6 +75,10 @@ export function runTests() {
         ECMWF: 37,
         GFS: 38.2,
       },
+      distribution_preview: [
+        { value: 35, probability: 0.18 },
+        { value: 36, probability: 0.52 },
+      ],
     },
     {
       city: "amsterdam",
@@ -112,6 +124,22 @@ export function runTests() {
   assert(parisRow.models.HRRR === null, "missing models should be normalized to null");
   assert(parisRow.modelMedian === 32.1, "model median should use available model values only");
   assert(parisRow.modelSpread === 2.5, "model spread should use available model min/max only");
+  assert(parisRow.gaussianMu === 32.2, "model summary should compute Gaussian mu from probability buckets");
+  assert(parisRow.probabilityEngine === "legacy", "model summary should preserve probability engine metadata");
+  assert(parisRow.probabilityBuckets.length === 3, "model summary should keep every probability bucket");
+  assert(
+    parisRow.probabilityBucketMap["31.5-32.5°C"]?.probability === 0.42 &&
+      parisRow.topProbabilityBucketKey === "31.5-32.5°C",
+    "model summary should map probability buckets and identify the top bucket",
+  );
+  const probabilityColumns = buildModelSummaryProbabilityColumns(summaryRows);
+  assert(
+    probabilityColumns.map((column) => column.key).join("|") ===
+      "30.5-31.5°C|31.5-32.5°C|32.5-33.5°C|34.5-35.5°C|35.5-36.5°C",
+    "model summary should expose dynamic probability bucket columns sorted by temperature",
+  );
+  assert(formatModelSummaryProbability(null) === "—", "missing probability should render as an em dash");
+  assert(formatModelSummaryProbability(0.424) === "42%", "probability buckets should render as rounded percentages");
   assert(formatModelSummaryTemp(null, "°C") === "—", "missing model temperatures should render as an em dash");
   assert(formatModelSummaryTemp(32.16, "°C") === "32.2°C", "model temperatures should render to one decimal");
   assert(hasModelSummaryForecastData(summaryRows), "model summary should recognize populated forecast rows");
@@ -176,6 +204,11 @@ export function runTests() {
     modelSummarySource.includes("MODEL_SUMMARY_MODEL_COLUMNS") &&
       modelSummarySource.includes("lastGoodSummaryRowsRef") &&
       modelSummarySource.includes("hasModelSummaryForecastData") &&
+      modelSummarySource.includes("buildModelSummaryProbabilityColumns") &&
+      modelSummarySource.includes("Gaussian μ") &&
+      modelSummarySource.includes("高斯 μ") &&
+      modelSummarySource.includes("topProbabilityBucketKey") &&
+      modelSummarySource.includes("min-w-[96px]") &&
       modelSummarySource.includes("Local Time") &&
       modelSummarySource.includes("当地时间") &&
       !modelSummarySource.includes("Current High") &&