feat: implement ScanTerminalDashboard with AI-driven city streaming and analysis features

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

@@ -0,0 +1,594 @@
+"use client";
+
+import clsx from "clsx";
+import { ChevronDown, RefreshCw, X } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ModelForecast } from "@/components/dashboard/PanelSections";
+import { AiCityTemperatureChart } from "@/components/dashboard/scan-terminal/AiCityTemperatureChart";
+import { buildMarketDecisionView, buildWeatherDecisionView } from "@/components/dashboard/scan-terminal/city-card-decision-utils";
+import { findDetailForCity } from "@/components/dashboard/scan-terminal/city-detail-utils";
+import { findRowForCity, getPeakWindowLabel, normalizeCityKey } from "@/components/dashboard/scan-terminal/decision-utils";
+import { LoadingSignal } from "@/components/dashboard/scan-terminal/LoadingSignal";
+import type { AiPinnedCity } from "@/components/dashboard/scan-terminal/types";
+import {
+  useAiCityForecast,
+  useCityMarketScan,
+} from "@/components/dashboard/scan-terminal/use-ai-city-card-data";
+import type { CityDetail, ScanOpportunityRow } from "@/lib/dashboard-types";
+import { formatTemperatureValue, getModelView, getTodayPaceView } from "@/lib/dashboard-utils";
+
+function AiPinnedCityCard({
+  item,
+  detail,
+  row,
+  locale,
+  collapsed,
+  removing,
+  onRemove,
+  onToggleCollapsed,
+}: {
+  item: AiPinnedCity;
+  detail: CityDetail | null;
+  row: ScanOpportunityRow | null;
+  locale: string;
+  collapsed: boolean;
+  removing?: boolean;
+  onRemove: () => void;
+  onToggleCollapsed: () => void;
+}) {
+  const isEn = locale === "en-US";
+  const displayName =
+    detail?.display_name ||
+    row?.city_display_name ||
+    row?.display_name ||
+    item.displayName ||
+    item.cityName;
+  const tempSymbol = detail?.temp_symbol || row?.temp_symbol || "°C";
+  const modelView = detail ? getModelView(detail, detail.local_date) : null;
+  const modelEntries = modelView
+    ? Object.entries(modelView.models || {})
+        .map(([name, value]) => [name, Number(value)] as const)
+        .filter(([, value]) => Number.isFinite(value))
+    : [];
+  const modelValues = modelEntries.map(([, value]) => value);
+  const modelMin = modelValues.length ? Math.min(...modelValues) : null;
+  const modelMax = modelValues.length ? Math.max(...modelValues) : null;
+  const paceView = detail ? getTodayPaceView(detail, locale as "zh-CN" | "en-US") : null;
+  const peakWindow =
+    paceView?.peakWindowText ||
+    (row ? getPeakWindowLabel(row) : null) ||
+    "--";
+  const deb = detail?.deb?.prediction ?? row?.deb_prediction ?? null;
+  const currentTemp =
+    detail?.airport_primary?.temp ??
+    detail?.airport_current?.temp ??
+    detail?.current?.temp ??
+    row?.current_temp ??
+    null;
+  const modelRange =
+    modelMin != null && modelMax != null
+      ? `${formatTemperatureValue(modelMin, tempSymbol, { digits: 1 })} ~ ${formatTemperatureValue(modelMax, tempSymbol, { digits: 1 })}`
+      : "--";
+  const paceTone = paceView?.biasTone || "neutral";
+  const paceText =
+    paceView?.summary ||
+    (isEn
+      ? "Waiting for intraday observations to compare against the DEB path."
+      : "等待更多日内实测，用来对照 DEB 预测路径。");
+  const report = detail?.current?.raw_metar || detail?.airport_current?.raw_metar || "";
+  const airportStation =
+    detail?.risk?.icao ||
+    detail?.current?.station_code ||
+    detail?.airport_current?.station_code ||
+    detail?.airport_primary?.station_code ||
+    "";
+  const detailCityName = detail?.name || item.cityName;
+  const { aiForecast, refreshAiForecast } = useAiCityForecast({
+    detail,
+    detailCityName,
+    isEn,
+    locale,
+    report,
+  });
+  const { marketScan, marketStatus } = useCityMarketScan({
+    detail,
+    detailCityName,
+  });
+
+  const aiCityForecast = aiForecast.payload?.city_forecast || null;
+  const localizedFinalJudgment =
+    (isEn ? aiCityForecast?.final_judgment_en : aiCityForecast?.final_judgment_zh) ||
+    (isEn ? aiCityForecast?.reasoning_en : aiCityForecast?.reasoning_zh) ||
+    "";
+  const localizedMetarRead =
+    (isEn ? aiCityForecast?.metar_read_en : aiCityForecast?.metar_read_zh) ||
+    "";
+  const localizedReasoning =
+    (isEn ? aiCityForecast?.reasoning_en : aiCityForecast?.reasoning_zh) ||
+    "";
+  const localizedModelNote =
+    (isEn
+      ? aiCityForecast?.model_cluster_note_en
+      : aiCityForecast?.model_cluster_note_zh) || "";
+  const modelPreview = modelEntries
+    .slice(0, 4)
+    .map(([name, value]) => `${name} ${formatTemperatureValue(value, tempSymbol, { digits: 1 })}`)
+    .join(isEn ? " / " : " / ");
+  const localModelSupportNote = modelEntries.length
+    ? isEn
+      ? modelEntries.length <= 2
+        ? `Model support is sparse: only ${modelEntries.length} sources are available${modelPreview ? ` (${modelPreview})` : ""}, so the read should lean more on DEB path and METAR.`
+        : `Model support: ${modelEntries.length} sources cluster between ${modelRange}; ${modelPreview}.`
+      : modelEntries.length <= 2
+        ? `多模型支撑偏少：当前只有 ${modelEntries.length} 个模型${modelPreview ? `（${modelPreview}）` : ""}，需要更重视 DEB 路径和 METAR 实测。`
+        : `多模型支撑：${modelEntries.length} 个模型集中在 ${modelRange}，代表模型为 ${modelPreview}。`
+    : isEn
+      ? "Model support is unavailable, so this city must rely on DEB path and METAR observations."
+      : "暂无可用多模型支撑，需要主要参考 DEB 路径和 METAR 实测。";
+  const aiPredictedMax = Number(aiCityForecast?.predicted_max);
+  const decisionExpectedHighNumber = Number.isFinite(aiPredictedMax)
+    ? aiPredictedMax
+    : paceView?.paceAdjustedHigh != null
+      ? paceView.paceAdjustedHigh
+      : deb;
+  const decisionView = buildWeatherDecisionView({
+    aiCityForecast,
+    currentTemp,
+    deb,
+    isEn,
+    localModelSupportNote,
+    modelEntries,
+    modelMax,
+    modelMin,
+    paceTone,
+    paceView,
+    peakWindow,
+    tempSymbol,
+  });
+  const marketDecisionView = buildMarketDecisionView({
+    expectedHigh: decisionExpectedHighNumber,
+    isEn,
+    marketScan,
+    marketStatus,
+    tempSymbol,
+  });
+  const localizedRisksRaw =
+    (isEn ? aiCityForecast?.risks_en : aiCityForecast?.risks_zh) || [];
+  const localizedRisks = Array.isArray(localizedRisksRaw)
+    ? localizedRisksRaw
+    : localizedRisksRaw
+      ? [String(localizedRisksRaw)]
+      : [];
+  const aiBullets = [
+    localizedMetarRead,
+    localizedReasoning !== localizedFinalJudgment ? localizedReasoning : "",
+    localizedModelNote || localModelSupportNote,
+    ...localizedRisks,
+  ].filter((line) => String(line || "").trim());
+  const fallbackAiReason =
+    (isEn ? aiForecast.payload?.reason_en : aiForecast.payload?.reason_zh) ||
+    aiForecast.payload?.reason ||
+    "";
+
+  const collapseId = `ai-city-body-${normalizeCityKey(item.cityName) || item.addedAt}`;
+
+  return (
+    <article className={clsx("scan-ai-city-card", collapsed && "collapsed", removing && "removing")}>
+      <header className="scan-ai-city-hero">
+        <div>
+          <span className="scan-ai-city-kicker">
+            {isEn ? "Deep analysis" : "城市深度分析"}
+          </span>
+          <h3>{displayName}</h3>
+          <div className="scan-ai-city-pills">
+            <span>{detail?.local_time || row?.local_time || "--"}</span>
+            <span>
+              DEB{" "}
+              {deb != null
+                ? formatTemperatureValue(deb, tempSymbol, { digits: 1 })
+                : "--"}
+            </span>
+            <span>{isEn ? "Model" : "模型"} {modelRange}</span>
+            <span>{isEn ? "Peak" : "峰值"} {peakWindow}</span>
+          </div>
+        </div>
+        <div className="scan-ai-city-hero-side">
+          <span>{isEn ? "Expected high" : "预计最高温"}</span>
+          <strong>
+            {paceView?.paceAdjustedHigh != null
+              ? formatTemperatureValue(paceView.paceAdjustedHigh, tempSymbol, { digits: 1 })
+              : deb != null
+                ? formatTemperatureValue(deb, tempSymbol, { digits: 1 })
+                : "--"}
+          </strong>
+          <div className="scan-ai-city-actions">
+            <button
+              type="button"
+              className="scan-ai-city-icon-button"
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                refreshAiForecast();
+              }}
+              aria-label={isEn ? `Refresh ${displayName} analysis` : `刷新 ${displayName} 深度分析`}
+              title={isEn ? "Refresh analysis" : "刷新深度分析"}
+              disabled={aiForecast.status === "loading"}
+            >
+              <RefreshCw size={15} className={aiForecast.status === "loading" ? "spin" : undefined} />
+            </button>
+            <button
+              type="button"
+              className="scan-ai-city-icon-button danger"
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                onRemove();
+              }}
+              aria-label={isEn ? `Remove ${displayName}` : `移除 ${displayName}`}
+              title={isEn ? "Remove city" : "移除城市"}
+              disabled={removing}
+            >
+              <X size={15} />
+            </button>
+            <button
+              type="button"
+              className="scan-ai-city-collapse"
+              onClick={onToggleCollapsed}
+              aria-expanded={!collapsed}
+              aria-controls={collapseId}
+            >
+              <ChevronDown size={15} />
+              {collapsed ? (isEn ? "Expand" : "展开") : (isEn ? "Collapse" : "收起")}
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {detail && !collapsed ? (
+        <div className="scan-ai-city-body" id={collapseId}>
+          <section className={clsx("scan-ai-decision-band", decisionView.tone)}>
+            <div className="scan-ai-decision-main">
+              <span>{decisionView.kicker}</span>
+              <strong>{decisionView.action}</strong>
+              <p>{localizedFinalJudgment || paceText}</p>
+              <div className="scan-ai-decision-reasons">
+                {decisionView.reasons.map((reason, index) => (
+                  <small key={`${reason}-${index}`}>{reason}</small>
+                ))}
+              </div>
+              <p className="scan-ai-decision-risk">{decisionView.risk}</p>
+              <div className={clsx("scan-ai-market-decision", marketDecisionView.tone)}>
+                <div>
+                  <span>
+                    {isEn ? "Polymarket price layer" : "Polymarket 价格层"}
+                  </span>
+                  <strong>{marketDecisionView.title}</strong>
+                  <p>{marketDecisionView.reason}</p>
+                </div>
+                <div className="scan-ai-market-decision-stats">
+                  <small>
+                    {isEn ? "Bucket" : "温度桶"} <b>{marketDecisionView.bucketLabel}</b>
+                  </small>
+                  <small>
+                    {isEn ? "YES" : "YES 买入"} <b>{marketDecisionView.priceText}</b>
+                  </small>
+                  <small>
+                    {isEn ? "Edge" : "概率差"} <b>{marketDecisionView.edgeText}</b>
+                  </small>
+                </div>
+                {marketDecisionView.marketUrl ? (
+                  <a
+                    className="scan-ai-market-link"
+                    href={marketDecisionView.marketUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {isEn ? "Open market" : "打开市场"}
+                  </a>
+                ) : null}
+              </div>
+            </div>
+            <div className="scan-ai-decision-metrics">
+              <span>
+                {isEn ? "Expected high" : "预计高点"}
+                <b>{decisionView.expectedHigh}</b>
+              </span>
+              <span>
+                {isEn ? "Weather range" : "天气区间"}
+                <b>{decisionView.targetRange}</b>
+              </span>
+              <span>
+                {isEn ? "Confidence" : "信心"}
+                <b>{decisionView.confidence}</b>
+              </span>
+              <span>
+                {isEn ? "Observed" : "实测"}
+                <b>
+                  {currentTemp != null
+                    ? formatTemperatureValue(currentTemp, tempSymbol, { digits: 1 })
+                    : "--"}
+                </b>
+              </span>
+              <span>
+                {isEn ? "Path delta" : "路径偏差"} <b>{paceView?.deltaText || "--"}</b>
+              </span>
+              <span>
+                {isEn ? "Peak window" : "峰值窗口"} <b>{peakWindow}</b>
+              </span>
+              <span>
+                {isEn ? "Market implied" : "市场隐含"} <b>{marketDecisionView.impliedText}</b>
+              </span>
+              <span>
+                {isEn ? "Model prob" : "模型概率"} <b>{marketDecisionView.modelText}</b>
+              </span>
+              <span>
+                {isEn ? "Quote status" : "报价状态"} <b>{marketDecisionView.status === "ready" ? (isEn ? "Ready" : "已同步") : marketDecisionView.status === "loading" ? (isEn ? "Loading" : "同步中") : (isEn ? "Unavailable" : "不可用")}</b>
+              </span>
+            </div>
+          </section>
+
+          <div className="scan-ai-city-analysis-grid">
+            <AiCityTemperatureChart detail={detail} />
+            <section className="scan-ai-city-section">
+              <div className="scan-ai-city-section-title">
+                {isEn ? "Evidence · AI airport read" : "证据 · AI 机场报文解读"}
+              </div>
+              {aiForecast.status === "loading" ? (
+                <>
+                  <p className={aiForecast.streamText ? "scan-ai-weather-summary" : undefined}>
+                    {aiForecast.streamText ||
+                      (isEn
+                        ? "Deepseek V4 pro is reading the latest airport bulletin..."
+                        : "Deepseek V4 pro 正在解读最新机场报文...")}
+                  </p>
+                  {aiForecast.streamText ? (
+                    <p className="scan-ai-city-muted">
+                      {isEn
+                        ? "Streaming airport read; final forecast is still being completed..."
+                        : "机场报文解读正在流式输出，最终预报结论仍在补全..."}
+                    </p>
+                  ) : null}
+                </>
+              ) : aiForecast.status === "ready" && aiCityForecast ? (
+                <>
+                  <p className="scan-ai-weather-summary">
+                    {localizedFinalJudgment ||
+                      (isEn ? "AI read returned without a final sentence." : "AI 已返回，但缺少最终判断。")}
+                  </p>
+                  <ul className="scan-ai-weather-bullets">
+                    {aiBullets.map((line, index) => (
+                      <li key={`${line}-${index}`}>{line}</li>
+                    ))}
+                  </ul>
+                  <p className="scan-ai-raw-metar">
+                    {report
+                      ? `${isEn ? "Raw METAR" : "原始 METAR"}：${`${airportStation} ${report}`.trim()}`
+                      : isEn
+                        ? "Raw METAR: unavailable."
+                        : "原始 METAR：暂无。"}
+                  </p>
+                </>
+              ) : aiForecast.status === "ready" ? (
+                <>
+                  <p>
+                    {aiForecast.payload?.status === "timeout"
+                      ? isEn
+                        ? "Deepseek V4-Pro timed out. You can retry; city data and the right briefing were not refreshed."
+                        : "Deepseek V4-Pro 本次解读超时，可稍后重试；城市数据和右侧简报不会被刷新。"
+                      : fallbackAiReason ||
+                        (isEn
+                          ? "AI read is unavailable for this city right now."
+                          : "该城市暂时没有可用的 AI 解读。")}
+                  </p>
+                  <ul className="scan-ai-weather-bullets">
+                    <li>{localModelSupportNote}</li>
+                    <li>
+                      {report
+                        ? `${isEn ? "Raw METAR" : "原始 METAR"}：${`${airportStation} ${report}`.trim()}`
+                        : isEn
+                          ? "Raw METAR is unavailable."
+                          : "暂无原始 METAR。"}
+                    </li>
+                  </ul>
+                </>
+              ) : aiForecast.status === "failed" ? (
+                <>
+                  <p>
+                    {isEn
+                      ? "AI read failed. Model support and the raw METAR remain as fallback context."
+                      : "AI 解读失败。下方保留多模型支撑和原始 METAR 作为兜底上下文。"}
+                    {aiForecast.error ? ` ${aiForecast.error}` : ""}
+                  </p>
+                  <ul className="scan-ai-weather-bullets">
+                    <li>{localModelSupportNote}</li>
+                    <li>
+                      {report
+                        ? `${isEn ? "Raw METAR" : "原始 METAR"}：${`${airportStation} ${report}`.trim()}`
+                        : isEn
+                          ? "Raw METAR is unavailable."
+                          : "暂无原始 METAR。"}
+                    </li>
+                  </ul>
+                </>
+              ) : (
+                <p>
+                  {isEn
+                    ? "Waiting for AI to read the latest airport bulletin."
+                    : "等待 AI 解读最新机场报文。"}
+                </p>
+              )}
+            </section>
+          </div>
+
+          <section className="scan-ai-city-section models">
+            <div className="scan-ai-city-section-title">
+              {isEn ? "Evidence · multi-model support" : "证据 · 多模型支撑"}
+            </div>
+            <ModelForecast detail={detail} targetDate={detail.local_date} hideTitle />
+          </section>
+
+        </div>
+      ) : !detail ? (
+        <div className="scan-ai-city-loading">
+          <LoadingSignal
+            title={isEn ? "Loading city decision data" : "正在加载城市决策数据"}
+            description={
+              isEn
+                ? "Hydrating today’s model stack, METAR context and market layer."
+                : "正在补全今日模型、机场报文和市场价格层。"
+            }
+            compact
+          />
+        </div>
+      ) : null}
+    </article>
+  );
+}
+
+export function AiPinnedForecastView({
+  items,
+  rows,
+  detailsByName,
+  locale,
+  onRemoveCity,
+}: {
+  items: AiPinnedCity[];
+  rows: ScanOpportunityRow[];
+  detailsByName: Record<string, CityDetail>;
+  locale: string;
+  onRemoveCity: (cityName: string) => void;
+}) {
+  const isEn = locale === "en-US";
+  const [collapsedCities, setCollapsedCities] = useState<Set<string>>(
+    () => new Set(),
+  );
+  const [removingCities, setRemovingCities] = useState<Set<string>>(
+    () => new Set(),
+  );
+  const knownCityKeysRef = useRef<Set<string>>(new Set());
+  const removeTimersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
+
+  useEffect(() => {
+    const activeKeys = new Set(
+      items.map((item) => normalizeCityKey(item.cityName) || item.cityName),
+    );
+    setCollapsedCities((current) => {
+      const next = new Set<string>();
+      let changed = false;
+      current.forEach((key) => {
+        if (activeKeys.has(key)) {
+          next.add(key);
+        } else {
+          changed = true;
+        }
+      });
+      items.forEach((item) => {
+        const stableKey = normalizeCityKey(item.cityName) || item.cityName;
+        if (!knownCityKeysRef.current.has(stableKey)) {
+          next.add(stableKey);
+          changed = true;
+        }
+      });
+      return changed ? next : current;
+    });
+    knownCityKeysRef.current = activeKeys;
+  }, [items]);
+
+  useEffect(() => {
+    return () => {
+      removeTimersRef.current.forEach((timer) => clearTimeout(timer));
+      removeTimersRef.current.clear();
+    };
+  }, []);
+
+  const removeCityWithMotion = useCallback(
+    (item: AiPinnedCity, stableKey: string) => {
+      if (removeTimersRef.current.has(stableKey)) return;
+      setRemovingCities((current) => {
+        const next = new Set(current);
+        next.add(stableKey);
+        return next;
+      });
+      const timer = setTimeout(() => {
+        onRemoveCity(item.cityName);
+        setRemovingCities((current) => {
+          const next = new Set(current);
+          next.delete(stableKey);
+          return next;
+        });
+        removeTimersRef.current.delete(stableKey);
+      }, 260);
+      removeTimersRef.current.set(stableKey, timer);
+    },
+    [onRemoveCity],
+  );
+
+  if (!items.length) {
+    return (
+      <div className="scan-ai-workspace empty">
+        <div className="scan-empty-state">
+          <div className="scan-empty-title">
+            {isEn ? "Click a city on the map" : "从分布视图点击城市"}
+          </div>
+          <div className="scan-empty-copy">
+            {isEn
+              ? "Selected cities will appear here as deep analysis blocks."
+              : "被点击的城市会加入深度分析页，并保留为城市分析区块。"}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="scan-ai-workspace">
+      <div className="scan-ai-workspace-head">
+        <div>
+          <span>{isEn ? "Selected city workspace" : "城市分析工作区"}</span>
+          <strong>
+            {isEn
+              ? `${items.length} cities under deep analysis`
+              : `${items.length} 个城市正在深度分析`}
+          </strong>
+        </div>
+        <p>
+          {isEn
+            ? "Map clicks add cities here. City analysis stays here until you remove it."
+            : "地图点击会把城市加入这里；城市分析会保留，直到你手动移除。"}
+        </p>
+      </div>
+      <div className="scan-ai-city-stack">
+        {items.map((item) => {
+          const detail = findDetailForCity(detailsByName, item.cityName);
+          const row = findRowForCity(rows, item.cityName);
+          const key = normalizeCityKey(item.cityName);
+          const stableKey = key || item.cityName;
+          const isKnownCity = knownCityKeysRef.current.has(stableKey);
+          return (
+            <AiPinnedCityCard
+              key={stableKey}
+              item={item}
+              detail={detail}
+              row={row}
+              locale={locale}
+              collapsed={!isKnownCity || collapsedCities.has(stableKey)}
+              removing={removingCities.has(stableKey)}
+              onRemove={() => removeCityWithMotion(item, stableKey)}
+              onToggleCollapsed={() => {
+                setCollapsedCities((current) => {
+                  const next = new Set(current);
+                  if (next.has(stableKey)) {
+                    next.delete(stableKey);
+                  } else {
+                    next.add(stableKey);
+                  }
+                  return next;
+                });
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}