🌍 多模型支援
diff --git a/frontend/components/AgentFlowDiagram.tsx b/frontend/components/AgentFlowDiagram.tsx
new file mode 100644
index 00000000..54fd83ae
--- /dev/null
+++ b/frontend/components/AgentFlowDiagram.tsx
@@ -0,0 +1,433 @@
+/**
+ * Agent Flow Diagram Component
+ * Visualizes the complete data flow through all 12 agents
+ */
+"use client";
+
+import { Card } from "@/components/ui/card";
+import {
+ ArrowDown,
+ Database,
+ MessageSquare,
+ Newspaper,
+ DollarSign,
+ TrendingUp,
+ TrendingDown,
+ Shield,
+ ShieldAlert,
+ ShieldCheck,
+ Users,
+ Target,
+ BarChart3
+} from "lucide-react";
+
+export function AgentFlowDiagram() {
+ return (
+
+ {/* Data Sources Layer */}
+
+
+ 📥 第一層：資料來源
+
+
+ }
+ name="yfinance"
+ description="股價數據"
+ color="blue"
+ />
+ }
+ name="Reddit API"
+ description="社群情緒"
+ color="orange"
+ />
+ }
+ name="RSS Feed"
+ description="新聞資訊"
+ color="green"
+ />
+ }
+ name="Alpha Vantage"
+ description="財務數據"
+ color="purple"
+ />
+
+
+
+ {/* Arrow */}
+
+
+ {/* Analysts Layer - 4 agents */}
+
+
+ 🤖 第二層：分析師代理 (4位)
+
+
+
}
+ gradient="from-blue-500 to-cyan-500"
+ description="技術面分析"
+ tasks={["RSI 指標", "MACD 動能", "價格走勢"]}
+ />
+
}
+ gradient="from-orange-500 to-red-500"
+ description="情緒面分析"
+ tasks={["NLP 情緒", "討論熱度", "投資者信心"]}
+ />
+
}
+ gradient="from-green-500 to-emerald-500"
+ description="新聞面分析"
+ tasks={["新聞摘要", "事件評估", "影響預測"]}
+ />
+
}
+ gradient="from-purple-500 to-pink-500"
+ description="基本面分析"
+ tasks={["財報分析", "估值指標", "盈利評估"]}
+ />
+
+
+
+ {/* Arrow */}
+
+
+ {/* Researchers Layer - 2 agents */}
+
+
+ 🔍 第三層：研究員代理 (2位)
+
+
+
}
+ gradient="from-green-500 to-emerald-500"
+ description="看多觀點研究"
+ tasks={["正面因素分析", "成長機會評估", "買入理由整理"]}
+ />
+
}
+ gradient="from-red-500 to-rose-500"
+ description="看空觀點研究"
+ tasks={["負面因素分析", "風險評估", "賣出理由整理"]}
+ />
+
+
+
+ {/* Arrow */}
+
+
+ {/* Research Manager */}
+
+ }
+ gradient="from-indigo-500 to-purple-500"
+ description="整合多空研究觀點"
+ tasks={["平衡雙方論點", "綜合投資建議", "制定初步策略"]}
+ />
+
+
+ {/* Arrow */}
+
+
+ {/* Risk Debators Layer - 3 agents */}
+
+
+ ⚖️ 第四層：風險辯論者 (3位)
+
+
+
}
+ gradient="from-red-500 to-orange-500"
+ description="高風險高報酬"
+ tasks={["積極投資策略", "最大化收益", "承擔計算風險"]}
+ />
+
}
+ gradient="from-blue-500 to-indigo-500"
+ description="平衡風險報酬"
+ tasks={["穩健投資策略", "風險平衡", "理性決策"]}
+ />
+
}
+ gradient="from-green-500 to-teal-500"
+ description="低風險低波動"
+ tasks={["保守投資策略", "資本保護", "降低風險"]}
+ />
+
+
+
+ {/* Arrow */}
+
+
+ {/* Risk Manager */}
+
+ }
+ gradient="from-red-500 to-pink-500"
+ description="整合風險辯論結果"
+ tasks={["風險等級評定", "止損止盈設定", "最終風險控制"]}
+ />
+
+
+ {/* Arrow */}
+
+
+ {/* Trader */}
+
+ }
+ gradient="from-blue-600 via-purple-600 to-pink-600"
+ description="執行最終交易決策"
+ outputs={["交易訊號 (BUY/SELL/HOLD)", "目標價位", "交易數量", "風險參數"]}
+ />
+
+
+ {/* Final Arrow */}
+
+
+ {/* Output Layer */}
+
+
+ 📊 最終輸出：12 份詳細報告
+
+
+
+
+
+
+
完整分析報告集合
+
+ 整合 12 位專業代理的深度分析，提供全方位投資決策支援
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function DataSourceCard({
+ icon,
+ name,
+ description,
+ color,
+}: {
+ icon: React.ReactNode;
+ name: string;
+ description: string;
+ color: "blue" | "orange" | "green" | "purple";
+}) {
+ const colorClasses = {
+ blue: "from-blue-500 to-cyan-500 border-blue-300 dark:border-blue-700",
+ orange: "from-orange-500 to-red-500 border-orange-300 dark:border-orange-700",
+ green: "from-green-500 to-emerald-500 border-green-300 dark:border-green-700",
+ purple: "from-purple-500 to-pink-500 border-purple-300 dark:border-purple-700",
+ };
+
+ return (
+
+
+ {icon}
+
+ {name}
+ {description}
+
+ );
+}
+
+function AgentCard({
+ name,
+ icon,
+ gradient,
+ description,
+ tasks,
+}: {
+ name: string;
+ icon: React.ReactNode;
+ gradient: string;
+ description: string;
+ tasks: string[];
+}) {
+ return (
+
+
+
+
+
+
+ {icon}
+
+
{name}
+
{description}
+
+
+
+ {tasks.map((task, index) => (
+
+ •
+ {task}
+
+ ))}
+
+
+ );
+}
+
+function ManagerCard({
+ name,
+ icon,
+ gradient,
+ description,
+ tasks,
+}: {
+ name: string;
+ icon: React.ReactNode;
+ gradient: string;
+ description: string;
+ tasks: string[];
+}) {
+ return (
+
+
+
+ {icon}
+
+
{name}
+
{description}
+
+ {tasks.map((task, index) => (
+
+ ✓
+ {task}
+
+ ))}
+
+ );
+}
+
+function TraderCard({
+ name,
+ icon,
+ gradient,
+ description,
+ outputs,
+}: {
+ name: string;
+ icon: React.ReactNode;
+ gradient: string;
+ description: string;
+ outputs: string[];
+}) {
+ return (
+
+
+
+
+
+
+ {icon}
+
+
{name}
+
{description}
+
+
+
+
最終輸出:
+ {outputs.map((output, index) => (
+
+ ▸
+ {output}
+
+ ))}
+
+
+ );
+}
+
+function FlowArrow({ label, color }: { label: string; color: string }) {
+ const colorClasses = {
+ blue: "text-blue-500 dark:text-blue-400",
+ purple: "text-purple-500 dark:text-purple-400",
+ green: "text-green-500 dark:text-green-400",
+ orange: "text-orange-500 dark:text-orange-400",
+ red: "text-red-500 dark:text-red-400",
+ };
+
+ return (
+
+ );
+}
+
+function ReportSection({
+ title,
+ items,
+ color,
+}: {
+ title: string;
+ items: string[];
+ color: "blue" | "green" | "red";
+}) {
+ const colorClasses = {
+ blue: "bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800",
+ green: "bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800",
+ red: "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800",
+ };
+
+ return (
+
+
{title}
+
+ {items.map((item, index) => (
+
+ •
+ {item}
+
+ ))}
+
+
+ );
+}