diff --git a/frontend/components/dashboard/scan-terminal/MarketOverviewBanner.module.css b/frontend/components/dashboard/scan-terminal/MarketOverviewBanner.module.css
new file mode 100644
index 00000000..3de641b0
--- /dev/null
+++ b/frontend/components/dashboard/scan-terminal/MarketOverviewBanner.module.css
@@ -0,0 +1,192 @@
+.root {
+ display: flex;
+ flex-direction: column;
+ border: 1px solid var(--color-border-default, rgba(159, 178, 199, 0.16));
+ border-radius: var(--radius-md, 10px);
+ background: var(--color-bg-card, rgba(17, 26, 46, 0.88));
+ backdrop-filter: var(--glass-blur-1, blur(10px));
+ margin: 0 0 var(--space-3, 12px) 0;
+ transition: background 0.2s;
+}
+
+.root.loading {
+ opacity: 0.7;
+ flex-direction: row;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 14px;
+ font-size: 13px;
+ color: var(--color-text-secondary, #9FB2C7);
+}
+
+.icon {
+ color: var(--color-accent-primary, #4DA3FF);
+ flex-shrink: 0;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 14px;
+ cursor: pointer;
+ border: none;
+ background: transparent;
+ color: var(--color-text-primary, #E6EDF3);
+ font-size: 13px;
+ font-family: inherit;
+ text-align: left;
+ width: 100%;
+}
+
+.header:hover {
+ background: rgba(77, 163, 255, 0.04);
+}
+
+.badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ color: var(--color-accent-primary, #4DA3FF);
+ font-weight: 700;
+ font-size: 12px;
+ letter-spacing: 0.03em;
+ flex-shrink: 0;
+}
+
+.preview {
+ flex: 1;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: var(--color-text-secondary, #9FB2C7);
+ font-size: 12px;
+}
+
+.toggle {
+ flex-shrink: 0;
+ color: var(--color-text-muted, #7D8FA3);
+}
+
+.body {
+ padding: 0 14px 14px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.summary {
+ margin: 0;
+ font-size: 13px;
+ line-height: 1.65;
+ color: var(--color-text-primary, #E6EDF3);
+}
+
+.highlights {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.highlightItem {
+ display: inline-flex;
+ align-items: baseline;
+ gap: 5px;
+ padding: 5px 10px;
+ border-radius: var(--radius-sm, 6px);
+ background: rgba(77, 163, 255, 0.08);
+ border: 1px solid rgba(77, 163, 255, 0.14);
+ font-size: 12px;
+ line-height: 1.5;
+ color: var(--color-text-secondary, #9FB2C7);
+ max-width: 100%;
+}
+
+.highlightItem strong {
+ color: var(--color-accent-primary, #4DA3FF);
+ font-weight: 700;
+ flex-shrink: 0;
+}
+
+.time {
+ font-size: 11px;
+ color: var(--color-text-muted, #7D8FA3);
+}
+
+/* Mobile < 768px */
+@media (max-width: 768px) {
+ .header {
+ padding: 8px 10px;
+ font-size: 12px;
+ }
+
+ .body {
+ padding: 0 10px 10px;
+ }
+
+ .summary {
+ font-size: 12px;
+ }
+
+ .highlights {
+ flex-direction: column;
+ gap: 6px;
+ }
+
+ .highlightItem {
+ font-size: 11px;
+ padding: 4px 8px;
+ }
+
+ .badge {
+ font-size: 11px;
+ }
+}
+
+/* Mobile < 640px */
+@media (max-width: 640px) {
+ .header {
+ padding: 6px 8px;
+ }
+
+ .preview {
+ display: none;
+ }
+
+ .body {
+ padding: 0 8px 8px;
+ }
+
+ .summary {
+ font-size: 11px;
+ line-height: 1.55;
+ }
+}
+
+/* Light theme */
+:global(.scan-terminal.light) .root {
+ background: rgba(255, 255, 255, 0.78);
+ border-color: rgba(15, 23, 42, 0.1);
+}
+
+:global(.scan-terminal.light) .summary {
+ color: #0F172A;
+}
+
+:global(.scan-terminal.light) .preview,
+:global(.scan-terminal.light) .highlightItem {
+ color: #475569;
+}
+
+:global(.scan-terminal.light) .highlightItem {
+ background: rgba(77, 163, 255, 0.06);
+ border-color: rgba(77, 163, 255, 0.18);
+}
+
+:global(.scan-terminal.light) .header:hover {
+ background: rgba(77, 163, 255, 0.05);
+}
diff --git a/frontend/components/dashboard/scan-terminal/MarketOverviewBanner.tsx b/frontend/components/dashboard/scan-terminal/MarketOverviewBanner.tsx
new file mode 100644
index 00000000..527c56cd
--- /dev/null
+++ b/frontend/components/dashboard/scan-terminal/MarketOverviewBanner.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import clsx from "clsx";
+import { ChevronDown, ChevronUp, Sparkles } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import styles from "./MarketOverviewBanner.module.css";
+import type { ScanOpportunityRow } from "@/lib/dashboard-types";
+
+interface OverviewPayload {
+ overview_zh: string;
+ overview_en: string;
+ highlights: Array<{ city: string; note_zh: string; note_en: string }>;
+ generated_at: string | null;
+}
+
+export function MarketOverviewBanner({
+ isEn,
+ isPro,
+ rows,
+}: {
+ isEn: boolean;
+ isPro: boolean;
+ rows: ScanOpportunityRow[];
+}) {
+ const [collapsed, setCollapsed] = useState(true);
+ const [data, setData] = useState
(null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(false);
+ const fetchedRef = useRef(false);
+
+ const fetchOverview = useCallback(async () => {
+ if (!isPro || !rows.length || fetchedRef.current) return;
+ fetchedRef.current = true;
+ setLoading(true);
+ setError(false);
+ try {
+ const resp = await fetch("/api/scan/terminal/overview", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ rows: rows.slice(0, 40).map((row) => ({
+ city: row.city ?? row.display_name ?? "",
+ display_name: row.display_name ?? row.city ?? "",
+ local_date: row.local_date ?? "",
+ deb_prediction: row.deb_prediction ?? null,
+ current_temp: row.current_temp ?? null,
+ current_max_so_far: row.current_max_so_far ?? null,
+ risk_level: row.risk_level ?? "",
+ temp_symbol: row.temp_symbol ?? "°C",
+ })),
+ }),
+ });
+ if (resp.ok) {
+ const json = await resp.json();
+ setData(json);
+ } else {
+ setError(true);
+ }
+ } catch {
+ setError(true);
+ } finally {
+ setLoading(false);
+ }
+ }, [isPro, rows]);
+
+ useEffect(() => {
+ if (isPro && rows.length > 0 && !fetchedRef.current) {
+ fetchOverview();
+ }
+ }, [isPro, rows.length, fetchOverview]);
+
+ if (!isPro || rows.length === 0) return null;
+ if (loading && !data) {
+ return (
+
+
+ {isEn ? "AI is generating market overview…" : "AI 正在生成市场概览…"}
+
+ );
+ }
+ if (error && !data) return null;
+
+ const overviewText = data ? (isEn ? data.overview_en : data.overview_zh) : "";
+ const highlights = data?.highlights ?? [];
+
+ return (
+
+
+
+ {!collapsed && (
+
+
{overviewText}
+ {highlights.length > 0 && (
+
+ {highlights.map((h) => (
+ -
+ {h.city}
+ {isEn ? h.note_en : h.note_zh}
+
+ ))}
+
+ )}
+ {data?.generated_at && (
+
+ )}
+
+ )}
+