import React, { Suspense, lazy, useEffect, useMemo, useRef, useState, useCallback } from "react";

// Configuration and constants
import { AGENTS, INITIAL_TICKERS } from './config/constants';

// Services
import { ReadOnlyClient } from './services/websocket';

// Hooks
import { useFeedProcessor } from './hooks/useFeedProcessor';

// Styles
import GlobalStyles from './styles/GlobalStyles';

// Components
import NetValueChart from './components/NetValueChart';
import StockLogo from './components/StockLogo';
import Header from './components/Header.jsx';
import WatchlistPanel from './components/WatchlistPanel.jsx';
import RuntimeSettingsPanel from './components/RuntimeSettingsPanel.jsx';

// Utils
import { formatNumber, formatTickerPrice } from './utils/formatters';

const RoomView = lazy(() => import('./components/RoomView'));
const AgentFeed = lazy(() => import('./components/AgentFeed'));
const StatisticsView = lazy(() => import('./components/StatisticsView'));
const StockExplainView = lazy(() => import('./components/StockExplainView.jsx'));
const TraderView = lazy(() => import('./components/TraderView.jsx'));
const EDITABLE_AGENT_WORKSPACE_FILES = ['SOUL.md', 'PROFILE.md', 'AGENTS.md', 'MEMORY.md', 'POLICY.md', 'HEARTBEAT.md', 'ROLE.md', 'STYLE.md'];

function ViewLoadingFallback({ label = '加载中...' }) {
  return (
    <div
      style={{
        minHeight: 240,
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        border: '1px solid #000000',
        background: '#ffffff',
        fontSize: 12,
        fontWeight: 700,
        letterSpacing: 0.4
      }}
    >
      {label}
    </div>
  );
}

/**
 * Live Trading Intelligence Platform - Read-Only Dashboard
 * Geek Style - Terminal-inspired, minimal, monochrome
 *
 */

export default function LiveTradingApp() {
  const [isConnected, setIsConnected] = useState(false);
  const [connectionStatus, setConnectionStatus] = useState('connecting'); // 'connecting' | 'connected' | 'disconnected'
  const [systemStatus, setSystemStatus] = useState('initializing'); // 'initializing' | 'running' | 'completed'
  const [currentDate, setCurrentDate] = useState(null);
  const [progress, setProgress] = useState({ current: 0, total: 0 });
  const [now, setNow] = useState(() => new Date());

  // View toggle: 'traders' | 'room' | 'explain' | 'chart' | 'statistics'
  const [currentView, setCurrentView] = useState('traders');
  const [isInitialAnimating, setIsInitialAnimating] = useState(true);
  const [lastUpdate, setLastUpdate] = useState(new Date());
  const [isUpdating, setIsUpdating] = useState(false);

  // Chart data
  const [chartTab, setChartTab] = useState('all');
  const [portfolioData, setPortfolioData] = useState({
    netValue: 10000,
    pnl: 0,
    equity: [],
    baseline: [], // Baseline strategy (Buy & Hold - Equal Weight)
    baseline_vw: [], // Baseline strategy (Buy & Hold - Value Weighted)
    momentum: [], // Momentum strategy
    strategies: [] // Other strategies
  });

  // Feed data (using hook for simplified processing)
  const { feed, processHistoricalFeed, processFeedEvent, addSystemMessage } = useFeedProcessor();

  // Statistics data
  const [holdings, setHoldings] = useState([]);
  const [trades, setTrades] = useState([]);
  const [stats, setStats] = useState(null);
  const [leaderboard, setLeaderboard] = useState([]);

  // Ticker prices (now from real-time data)
  const [tickers, setTickers] = useState(INITIAL_TICKERS);
  const [rollingTickers, setRollingTickers] = useState({});
  const [priceHistoryByTicker, setPriceHistoryByTicker] = useState({});
  const [ohlcHistoryByTicker, setOhlcHistoryByTicker] = useState({});
  const [explainEventsByTicker, setExplainEventsByTicker] = useState({});
  const [newsByTicker, setNewsByTicker] = useState({});
  const [selectedExplainSymbol, setSelectedExplainSymbol] = useState('');
  const [historySourceByTicker, setHistorySourceByTicker] = useState({});

  // Room bubbles
  const [bubbles, setBubbles] = useState({});

  // Resizable panels
  const [leftWidth, setLeftWidth] = useState(70); // percentage
  const [isResizing, setIsResizing] = useState(false);

  // Market status
  const [serverMode, setServerMode] = useState(null); // 'live' | 'backtest' | null
  const [marketStatus, setMarketStatus] = useState(null); // { status, status_text, ... }
  const [virtualTime, setVirtualTime] = useState(null); // Virtual time from server (for mock mode)
  const [dataSources, setDataSources] = useState(null);
  const [runtimeConfig, setRuntimeConfig] = useState(null);
  const [isWatchlistPanelOpen, setIsWatchlistPanelOpen] = useState(false);
  const [isRuntimeSettingsOpen, setIsRuntimeSettingsOpen] = useState(false);
  const [watchlistDraftSymbols, setWatchlistDraftSymbols] = useState([]);
  const [watchlistInputValue, setWatchlistInputValue] = useState('');
  const [watchlistFeedback, setWatchlistFeedback] = useState(null);
  const [isWatchlistSaving, setIsWatchlistSaving] = useState(false);
  const [scheduleModeDraft, setScheduleModeDraft] = useState('daily');
  const [intervalMinutesDraft, setIntervalMinutesDraft] = useState('60');
  const [triggerTimeDraft, setTriggerTimeDraft] = useState('09:30');
  const [maxCommCyclesDraft, setMaxCommCyclesDraft] = useState('2');
  const [runtimeConfigFeedback, setRuntimeConfigFeedback] = useState(null);
  const [isRuntimeConfigSaving, setIsRuntimeConfigSaving] = useState(false);
  const [selectedSkillAgentId, setSelectedSkillAgentId] = useState(AGENTS[0]?.id || 'portfolio_manager');
  const [agentProfilesByAgent, setAgentProfilesByAgent] = useState({});
  const [agentSkillsByAgent, setAgentSkillsByAgent] = useState({});
  const [skillDetailsByName, setSkillDetailsByName] = useState({});
  const [localSkillDraftsByKey, setLocalSkillDraftsByKey] = useState({});
  const [isAgentSkillsLoading, setIsAgentSkillsLoading] = useState(false);
  const [skillDetailLoadingKey, setSkillDetailLoadingKey] = useState(null);
  const [agentSkillsSavingKey, setAgentSkillsSavingKey] = useState(null);
  const [agentSkillsFeedback, setAgentSkillsFeedback] = useState(null);
  const [selectedWorkspaceFile, setSelectedWorkspaceFile] = useState(EDITABLE_AGENT_WORKSPACE_FILES[0]);
  const [workspaceFilesByAgent, setWorkspaceFilesByAgent] = useState({});
  const [workspaceDraftContent, setWorkspaceDraftContent] = useState('');
  const [isWorkspaceFileLoading, setIsWorkspaceFileLoading] = useState(false);
  const [workspaceFileSavingKey, setWorkspaceFileSavingKey] = useState(null);
  const [workspaceFileFeedback, setWorkspaceFileFeedback] = useState(null);

  const clientRef = useRef(null);
  const containerRef = useRef(null);
  const agentFeedRef = useRef(null);
  const isWatchlistSavingRef = useRef(false);
  const isRuntimeConfigSavingRef = useRef(false);
  const requestedStockHistoryRef = useRef(new Set());

  // Track last virtual time update to calculate increment
  const lastVirtualTimeRef = useRef(null);
  const virtualTimeOffsetRef = useRef(0);

  // Last day history for replay
  const [lastDayHistory, setLastDayHistory] = useState([]);

  const buildTickersFromSymbols = useCallback((symbols, previousTickers = []) => {
    if (!Array.isArray(symbols) || symbols.length === 0) {
      return previousTickers;
    }

    return symbols
      .filter((symbol) => typeof symbol === 'string' && symbol.trim())
      .map((symbol) => {
        const normalized = symbol.trim().toUpperCase();
        const existing = previousTickers.find((ticker) => ticker.symbol === normalized);
        return existing || {
          symbol: normalized,
          price: null,
          change: null
        };
      });
  }, []);

  const normalizePriceHistory = useCallback((payload) => {
    if (!payload || typeof payload !== 'object') {
      return {};
    }

    const normalized = {};
    Object.entries(payload).forEach(([symbol, points]) => {
      const ticker = String(symbol || '').trim().toUpperCase();
      if (!ticker || !Array.isArray(points)) {
        return;
      }

      normalized[ticker] = points
        .map((point) => {
          if (Array.isArray(point) && point.length >= 2) {
            const [label, value] = point;
            const price = Number(value);
            if (!label || !Number.isFinite(price)) return null;
            return {
              timestamp: String(label),
              label: String(label),
              price
            };
          }

          if (point && typeof point === 'object') {
            const rawTimestamp = point.timestamp ?? point.t ?? point.date ?? point.label;
            const price = Number(point.price ?? point.v ?? point.value ?? point.close);
            if (!rawTimestamp || !Number.isFinite(price)) return null;
            return {
              timestamp: String(rawTimestamp),
              label: String(rawTimestamp),
              price
            };
          }

          return null;
        })
        .filter(Boolean)
        .slice(-120);
    });

    return normalized;
  }, []);

  // Determine if LIVE tab should be enabled
  const isLiveEnabled = useMemo(() => {
    if (!marketStatus) return false;
    return marketStatus.status === 'open';
  }, [marketStatus]);

  const displayTickers = useMemo(() => {
    const symbols = runtimeConfig?.tickers;
    if (Array.isArray(symbols) && symbols.length > 0) {
      return buildTickersFromSymbols(symbols, tickers);
    }
    return tickers;
  }, [buildTickersFromSymbols, runtimeConfig, tickers]);

  const runtimeWatchlistSymbols = useMemo(() => {
    const symbols = runtimeConfig?.tickers;
    if (Array.isArray(symbols) && symbols.length > 0) {
      return symbols
        .filter((symbol) => typeof symbol === 'string' && symbol.trim())
        .map((symbol) => symbol.trim().toUpperCase());
    }

    return displayTickers
      .map((ticker) => ticker.symbol)
      .filter((symbol) => typeof symbol === 'string' && symbol.trim());
  }, [displayTickers, runtimeConfig]);

  const runtimeSummaryLabel = useMemo(() => {
    if (!runtimeConfig) {
      return null;
    }

    const scheduleMode = String(runtimeConfig.schedule_mode || 'daily');
    const intervalMinutes = Number(runtimeConfig.interval_minutes || 60);
    const triggerTime = String(runtimeConfig.trigger_time || '09:30');
    const maxCommCycles = Number(runtimeConfig.max_comm_cycles || 2);

    if (scheduleMode === 'intraday') {
      return `调度 intraday / ${intervalMinutes}m / 讨论 ${maxCommCycles} 轮`;
    }

    return `调度 daily / ${triggerTime} ET / 讨论 ${maxCommCycles} 轮`;
  }, [runtimeConfig]);

  const selectedAgentSkills = useMemo(
    () => agentSkillsByAgent[selectedSkillAgentId] || [],
    [agentSkillsByAgent, selectedSkillAgentId]
  );

  const selectedAgentProfile = useMemo(
    () => agentProfilesByAgent[selectedSkillAgentId] || null,
    [agentProfilesByAgent, selectedSkillAgentId]
  );

  const selectedWorkspaceContent = useMemo(
    () => workspaceFilesByAgent[selectedSkillAgentId]?.[selectedWorkspaceFile] || '',
    [selectedSkillAgentId, selectedWorkspaceFile, workspaceFilesByAgent]
  );

  useEffect(() => {
    const symbols = displayTickers
      .map((ticker) => ticker.symbol)
      .filter((symbol) => typeof symbol === 'string' && symbol.trim());

    if (!symbols.length) {
      setSelectedExplainSymbol('');
      return;
    }

    if (!selectedExplainSymbol || !symbols.includes(selectedExplainSymbol)) {
      setSelectedExplainSymbol(symbols[0]);
    }
  }, [displayTickers, selectedExplainSymbol]);

  useEffect(() => {
    if (!runtimeConfig) {
      return;
    }

    setScheduleModeDraft(String(runtimeConfig.schedule_mode || 'daily'));
    setIntervalMinutesDraft(String(runtimeConfig.interval_minutes || 60));
    setTriggerTimeDraft(String(runtimeConfig.trigger_time || '09:30'));
    setMaxCommCyclesDraft(String(runtimeConfig.max_comm_cycles || 2));
  }, [runtimeConfig]);

  const watchlistSuggestions = useMemo(
    () => INITIAL_TICKERS.map((ticker) => ticker.symbol).filter((symbol, index, list) => list.indexOf(symbol) === index),
    []
  );

  const isWatchlistDraftDirty = useMemo(() => {
    if (watchlistInputValue.trim()) {
      return true;
    }

    if (watchlistDraftSymbols.length !== runtimeWatchlistSymbols.length) {
      return true;
    }

    return watchlistDraftSymbols.some((symbol, index) => symbol !== runtimeWatchlistSymbols[index]);
  }, [runtimeWatchlistSymbols, watchlistDraftSymbols, watchlistInputValue]);

  const marketStatusLabel = useMemo(() => {
    if (!marketStatus) {
      return null;
    }

    const raw = typeof marketStatus.status_text === 'string' ? marketStatus.status_text.trim() : '';
    const normalized = raw.toLowerCase();
    const byStatus = {
      open: '开盘',
      closed: '休市',
      premarket: '盘前',
      afterhours: '盘后',
    };
    const byText = {
      'market closed (non-trading day)': '休市',
      'market open': '开盘',
      'market closed': '收盘',
      'pre-market': '盘前',
      'after-hours': '盘后',
      'after hours': '盘后',
      'backtest mode': '回测模式',
    };
    if (normalized && byText[normalized]) {
      return byText[normalized];
    }
    if (marketStatus.status && byStatus[marketStatus.status]) {
      return byStatus[marketStatus.status];
    }
    return raw || '状态未知';
  }, [marketStatus]);

  const providerLabelMap = useMemo(() => ({
    yfinance: 'YFinance',
    finnhub: 'Finnhub',
    financial_datasets: 'Financial Datasets',
    local_csv: 'CSV',
    polygon: 'Polygon',
    mock: 'Mock',
    backtest: 'Backtest'
  }), []);

  const livePriceSourceLabel = useMemo(() => {
    const source = marketStatus?.live_quote_provider;
    if (!source) {
      return null;
    }

    const normalized = String(source).trim().toLowerCase();
    return `实时 ${providerLabelMap[normalized] || String(source).trim()}`;
  }, [marketStatus, providerLabelMap]);

  const historicalPriceSourceLabel = useMemo(() => {
    const source = dataSources?.last_success?.prices;
    if (!source) {
      return null;
    }

    const normalized = String(source).trim().toLowerCase();
    return `历史 ${providerLabelMap[normalized] || String(source).trim()}`;
  }, [dataSources, providerLabelMap]);

  const parseWatchlistInput = useCallback((value) => {
    if (typeof value !== 'string') {
      return [];
    }

    return Array.from(
      new Set(
        value
          .split(/[\s,]+/)
          .map((symbol) => symbol.trim().toUpperCase())
          .filter(Boolean)
      )
    );
  }, []);

  const commitWatchlistInput = useCallback((value) => {
    const parsed = parseWatchlistInput(value);
    if (parsed.length === 0) {
      return [];
    }

    setWatchlistDraftSymbols((prev) => Array.from(new Set([...prev, ...parsed])));
    setWatchlistInputValue('');
    if (watchlistFeedback) {
      setWatchlistFeedback(null);
    }
    return parsed;
  }, [parseWatchlistInput, watchlistFeedback]);

  const handleWatchlistRemove = useCallback((symbolToRemove) => {
    setWatchlistDraftSymbols((prev) => prev.filter((symbol) => symbol !== symbolToRemove));
    if (watchlistFeedback) {
      setWatchlistFeedback(null);
    }
  }, [watchlistFeedback]);

  const handleWatchlistPanelToggle = useCallback(() => {
    setIsRuntimeSettingsOpen(false);
    setIsWatchlistPanelOpen((open) => {
      const nextOpen = !open;
      if (nextOpen) {
        setWatchlistDraftSymbols(runtimeWatchlistSymbols);
        setWatchlistInputValue('');
        setWatchlistFeedback(null);
      }
      return nextOpen;
    });
  }, [runtimeWatchlistSymbols]);

  const handleWatchlistInputChange = useCallback((value) => {
    setWatchlistInputValue(value);
    if (watchlistFeedback) {
      setWatchlistFeedback(null);
    }
  }, [watchlistFeedback]);

  const handleWatchlistInputKeyDown = useCallback((e) => {
    if (e.key === 'Enter' || e.key === ',') {
      e.preventDefault();
      commitWatchlistInput(watchlistInputValue);
    }
  }, [commitWatchlistInput, watchlistInputValue]);

  const handleWatchlistSuggestionClick = useCallback((symbol) => {
    if (watchlistDraftSymbols.includes(symbol)) {
      return;
    }
    setWatchlistDraftSymbols((prev) => [...prev, symbol]);
    if (watchlistFeedback) {
      setWatchlistFeedback(null);
    }
  }, [watchlistDraftSymbols, watchlistFeedback]);

  const handleWatchlistRestoreCurrent = useCallback(() => {
    setWatchlistDraftSymbols(runtimeWatchlistSymbols);
    setWatchlistInputValue('');
    setWatchlistFeedback(null);
  }, [runtimeWatchlistSymbols]);

  const handleWatchlistRestoreDefault = useCallback(() => {
    setWatchlistDraftSymbols(watchlistSuggestions);
    setWatchlistInputValue('');
    setWatchlistFeedback(null);
  }, [watchlistSuggestions]);

  const handleWatchlistSave = useCallback(() => {
    const pendingTickers = parseWatchlistInput(watchlistInputValue);
    const nextTickers = Array.from(new Set([...watchlistDraftSymbols, ...pendingTickers]));
    if (nextTickers.length === 0) {
      setWatchlistFeedback({ type: 'error', text: '至少输入 1 个有效股票代码' });
      return;
    }

    if (!clientRef.current) {
      setWatchlistFeedback({ type: 'error', text: '连接未就绪，稍后重试' });
      return;
    }

    setIsWatchlistSaving(true);
    setWatchlistFeedback(null);
    setWatchlistDraftSymbols(nextTickers);
    setWatchlistInputValue('');
    const success = clientRef.current.send({
      type: 'update_watchlist',
      tickers: nextTickers
    });

    if (!success) {
      setIsWatchlistSaving(false);
      setWatchlistFeedback({ type: 'error', text: '发送失败，请检查连接状态' });
    }
  }, [parseWatchlistInput, watchlistDraftSymbols, watchlistInputValue]);

  const handleManualTrigger = useCallback(() => {
    if (!clientRef.current) {
      addSystemMessage('连接未就绪，无法手动触发');
      return;
    }

    const success = clientRef.current.send({
      type: 'trigger_strategy'
    });

    if (!success) {
      addSystemMessage('手动触发发送失败，请检查连接状态');
      return;
    }

    addSystemMessage('已发送手动触发请求');
  }, [addSystemMessage]);

  const handleRuntimeConfigSave = useCallback(() => {
    if (!clientRef.current) {
      setRuntimeConfigFeedback({ type: 'error', text: '连接未就绪，稍后重试' });
      return;
    }

    const interval = Number(intervalMinutesDraft);
    const maxCommCycles = Number(maxCommCyclesDraft);
    if (!Number.isInteger(interval) || interval <= 0) {
      setRuntimeConfigFeedback({ type: 'error', text: '间隔必须是正整数分钟' });
      return;
    }
    if (!Number.isInteger(maxCommCycles) || maxCommCycles <= 0) {
      setRuntimeConfigFeedback({ type: 'error', text: '讨论轮数必须是正整数' });
      return;
    }

    setIsRuntimeConfigSaving(true);
    setRuntimeConfigFeedback(null);
    const success = clientRef.current.send({
      type: 'update_runtime_config',
      schedule_mode: scheduleModeDraft,
      interval_minutes: interval,
      trigger_time: triggerTimeDraft,
      max_comm_cycles: maxCommCycles
    });

    if (!success) {
      setIsRuntimeConfigSaving(false);
      setRuntimeConfigFeedback({ type: 'error', text: '发送失败，请检查连接状态' });
    }
  }, [intervalMinutesDraft, maxCommCyclesDraft, scheduleModeDraft, triggerTimeDraft]);

  const handleRuntimeDefaultsRestore = useCallback(() => {
    setScheduleModeDraft('daily');
    setIntervalMinutesDraft('60');
    setTriggerTimeDraft('09:30');
    setMaxCommCyclesDraft('2');
    setRuntimeConfigFeedback(null);
  }, []);

  const handleRuntimeSettingsToggle = useCallback(() => {
    setRuntimeConfigFeedback(null);
    setAgentSkillsFeedback(null);
    setWorkspaceFileFeedback(null);
    setIsRuntimeSettingsOpen((prev) => !prev);
    setIsWatchlistPanelOpen(false);
  }, []);

  const requestAgentSkills = useCallback((agentId) => {
    const normalized = typeof agentId === 'string' ? agentId.trim() : '';
    if (!normalized || !clientRef.current) {
      return false;
    }
    setIsAgentSkillsLoading(true);
    setAgentSkillsFeedback(null);
    return clientRef.current.send({
      type: 'get_agent_skills',
      agent_id: normalized
    });
  }, []);

  const requestAgentProfile = useCallback((agentId) => {
    const normalized = typeof agentId === 'string' ? agentId.trim() : '';
    if (!normalized || !clientRef.current) {
      return false;
    }
    return clientRef.current.send({
      type: 'get_agent_profile',
      agent_id: normalized
    });
  }, []);

  const requestSkillDetail = useCallback((skillName) => {
    const normalized = typeof skillName === 'string' ? skillName.trim() : '';
    if (!normalized || !clientRef.current) {
      return false;
    }
    const detailKey = `${selectedSkillAgentId}:${normalized}`;
    setSkillDetailLoadingKey(detailKey);
    return clientRef.current.send({
      type: 'get_skill_detail',
      agent_id: selectedSkillAgentId,
      skill_name: normalized
    });
  }, [selectedSkillAgentId]);

  const handleCreateLocalSkill = useCallback((skillName) => {
    const normalized = typeof skillName === 'string' ? skillName.trim() : '';
    if (!normalized) {
      setAgentSkillsFeedback({ type: 'error', text: '技能名称不能为空' });
      return;
    }
    if (!clientRef.current) {
      setAgentSkillsFeedback({ type: 'error', text: '连接未就绪，稍后重试' });
      return;
    }
    setAgentSkillsSavingKey(`${selectedSkillAgentId}:${normalized}:create`);
    setAgentSkillsFeedback(null);
    const success = clientRef.current.send({
      type: 'create_agent_local_skill',
      agent_id: selectedSkillAgentId,
      skill_name: normalized
    });
    if (!success) {
      setAgentSkillsSavingKey(null);
      setAgentSkillsFeedback({ type: 'error', text: '发送失败，请检查连接状态' });
    }
  }, [selectedSkillAgentId]);

  const handleLocalSkillDraftChange = useCallback((skillName, content) => {
    const detailKey = `${selectedSkillAgentId}:${skillName}`;
    setLocalSkillDraftsByKey((prev) => ({
      ...prev,
      [detailKey]: content
    }));
  }, [selectedSkillAgentId]);

  const handleLocalSkillSave = useCallback((skillName) => {
    if (!clientRef.current) {
      setAgentSkillsFeedback({ type: 'error', text: '连接未就绪，稍后重试' });
      return;
    }
    const detailKey = `${selectedSkillAgentId}:${skillName}`;
    const content = localSkillDraftsByKey[detailKey];
    if (typeof content !== 'string') {
      return;
    }
    setAgentSkillsSavingKey(`${selectedSkillAgentId}:${skillName}:content`);
    setAgentSkillsFeedback(null);
    const success = clientRef.current.send({
      type: 'update_agent_local_skill',
      agent_id: selectedSkillAgentId,
      skill_name: skillName,
      content
    });
    if (!success) {
      setAgentSkillsSavingKey(null);
      setAgentSkillsFeedback({ type: 'error', text: '发送失败，请检查连接状态' });
    }
  }, [localSkillDraftsByKey, selectedSkillAgentId]);

  const handleLocalSkillDelete = useCallback((skillName) => {
    if (!clientRef.current) {
      setAgentSkillsFeedback({ type: 'error', text: '连接未就绪，稍后重试' });
      return;
    }
    setAgentSkillsSavingKey(`${selectedSkillAgentId}:${skillName}:delete`);
    setAgentSkillsFeedback(null);
    const success = clientRef.current.send({
      type: 'delete_agent_local_skill',
      agent_id: selectedSkillAgentId,
      skill_name: skillName
    });
    if (!success) {
      setAgentSkillsSavingKey(null);
      setAgentSkillsFeedback({ type: 'error', text: '发送失败，请检查连接状态' });
    }
  }, [selectedSkillAgentId]);

  const handleRemoveSharedSkill = useCallback((skillName) => {
    if (!clientRef.current) {
      setAgentSkillsFeedback({ type: 'error', text: '连接未就绪，稍后重试' });
      return;
    }
    setAgentSkillsSavingKey(`${selectedSkillAgentId}:${skillName}:remove`);
    setAgentSkillsFeedback(null);
    const success = clientRef.current.send({
      type: 'remove_agent_skill',
      agent_id: selectedSkillAgentId,
      skill_name: skillName
    });
    if (!success) {
      setAgentSkillsSavingKey(null);
      setAgentSkillsFeedback({ type: 'error', text: '发送失败，请检查连接状态' });
    }
  }, [selectedSkillAgentId]);

  const requestWorkspaceFile = useCallback((agentId, filename) => {
    const normalizedAgentId = typeof agentId === 'string' ? agentId.trim() : '';
    const normalizedFilename = typeof filename === 'string' ? filename.trim() : '';
    if (!normalizedAgentId || !normalizedFilename || !clientRef.current) {
      return false;
    }
    setIsWorkspaceFileLoading(true);
    setWorkspaceFileFeedback(null);
    return clientRef.current.send({
      type: 'get_agent_workspace_file',
      agent_id: normalizedAgentId,
      filename: normalizedFilename
    });
  }, []);

  const handleAgentSkillToggle = useCallback((skillName, enabled) => {
    if (!clientRef.current) {
      setAgentSkillsFeedback({ type: 'error', text: '连接未就绪，稍后重试' });
      return;
    }

    const agentId = selectedSkillAgentId;
    setAgentSkillsSavingKey(`${agentId}:${skillName}`);
    setAgentSkillsFeedback(null);
    const success = clientRef.current.send({
      type: 'update_agent_skill',
      agent_id: agentId,
      skill_name: skillName,
      enabled
    });

    if (!success) {
      setAgentSkillsSavingKey(null);
      setAgentSkillsFeedback({ type: 'error', text: '发送失败，请检查连接状态' });
    }
  }, [selectedSkillAgentId]);

  const handleSkillAgentChange = useCallback((agentId) => {
    setSelectedSkillAgentId(agentId);
    requestAgentProfile(agentId);
    requestAgentSkills(agentId);
    requestWorkspaceFile(agentId, selectedWorkspaceFile);
  }, [requestAgentProfile, requestAgentSkills, requestWorkspaceFile, selectedWorkspaceFile]);

  const handleWorkspaceFileChange = useCallback((filename) => {
    setSelectedWorkspaceFile(filename);
    requestWorkspaceFile(selectedSkillAgentId, filename);
  }, [requestWorkspaceFile, selectedSkillAgentId]);

  const handleWorkspaceFileSave = useCallback(() => {
    if (!clientRef.current) {
      setWorkspaceFileFeedback({ type: 'error', text: '连接未就绪，稍后重试' });
      return;
    }
    const key = `${selectedSkillAgentId}:${selectedWorkspaceFile}`;
    setWorkspaceFileSavingKey(key);
    setWorkspaceFileFeedback(null);
    const success = clientRef.current.send({
      type: 'update_agent_workspace_file',
      agent_id: selectedSkillAgentId,
      filename: selectedWorkspaceFile,
      content: workspaceDraftContent
    });
    if (!success) {
      setWorkspaceFileSavingKey(null);
      setWorkspaceFileFeedback({ type: 'error', text: '发送失败，请检查连接状态' });
    }
  }, [selectedSkillAgentId, selectedWorkspaceFile, workspaceDraftContent]);

  useEffect(() => {
    setWorkspaceDraftContent(selectedWorkspaceContent);
  }, [selectedWorkspaceContent]);

  useEffect(() => {
    if (currentView !== 'traders' || !isConnected) {
      return;
    }
    AGENTS.forEach((agent) => {
      if (!agentProfilesByAgent[agent.id]) {
        requestAgentProfile(agent.id);
      }
      if (!agentSkillsByAgent[agent.id]) {
        requestAgentSkills(agent.id);
      }
      if (!workspaceFilesByAgent[agent.id]?.['MEMORY.md']) {
        requestWorkspaceFile(agent.id, 'MEMORY.md');
      }
    });
  }, [agentProfilesByAgent, agentSkillsByAgent, currentView, isConnected, requestAgentProfile, requestAgentSkills, requestWorkspaceFile, workspaceFilesByAgent]);

  const requestStockHistory = useCallback((symbol, { force = false } = {}) => {
    const normalized = typeof symbol === 'string' ? symbol.trim().toUpperCase() : '';
    if (!normalized || !clientRef.current) {
      return false;
    }

    if (!force && requestedStockHistoryRef.current.has(normalized)) {
      return false;
    }

    const success = clientRef.current.send({
      type: 'get_stock_history',
      ticker: normalized,
      lookback_days: 120
    });

    if (success) {
      requestedStockHistoryRef.current.add(normalized);
    }

    return success;
  }, []);

  const requestStockExplainEvents = useCallback((symbol) => {
    const normalized = typeof symbol === 'string' ? symbol.trim().toUpperCase() : '';
    if (!normalized || !clientRef.current) {
      return false;
    }
    return clientRef.current.send({
      type: 'get_stock_explain_events',
      ticker: normalized
    });
  }, []);

  const requestStockNews = useCallback((symbol) => {
    const normalized = typeof symbol === 'string' ? symbol.trim().toUpperCase() : '';
    if (!normalized || !clientRef.current) {
      return false;
    }
    return clientRef.current.send({
      type: 'get_stock_news',
      ticker: normalized,
      lookback_days: 45,
      limit: 12
    });
  }, []);

  const requestStockNewsForDate = useCallback((symbol, date) => {
    const normalized = typeof symbol === 'string' ? symbol.trim().toUpperCase() : '';
    if (!normalized || !date || !clientRef.current) {
      return false;
    }
    return clientRef.current.send({
      type: 'get_stock_news_for_date',
      ticker: normalized,
      date,
      limit: 20
    });
  }, []);

  const requestStockNewsTimeline = useCallback((symbol) => {
    const normalized = typeof symbol === 'string' ? symbol.trim().toUpperCase() : '';
    if (!normalized || !clientRef.current) {
      return false;
    }
    return clientRef.current.send({
      type: 'get_stock_news_timeline',
      ticker: normalized,
      lookback_days: 90
    });
  }, []);

  const requestStockNewsCategories = useCallback((symbol) => {
    const normalized = typeof symbol === 'string' ? symbol.trim().toUpperCase() : '';
    if (!normalized || !clientRef.current) {
      return false;
    }
    return clientRef.current.send({
      type: 'get_stock_news_categories',
      ticker: normalized,
      lookback_days: 90
    });
  }, []);

  const requestStockRangeExplain = useCallback((symbol, startDate, endDate, articleIds = []) => {
    const normalized = typeof symbol === 'string' ? symbol.trim().toUpperCase() : '';
    if (!normalized || !startDate || !endDate || !clientRef.current) {
      return false;
    }
    return clientRef.current.send({
      type: 'get_stock_range_explain',
      ticker: normalized,
      start_date: startDate,
      end_date: endDate,
      article_ids: Array.isArray(articleIds) ? articleIds : []
    });
  }, []);

  const requestStockStory = useCallback((symbol, asOfDate = null) => {
    const normalized = typeof symbol === 'string' ? symbol.trim().toUpperCase() : '';
    if (!normalized || !clientRef.current) {
      return false;
    }
    return clientRef.current.send({
      type: 'get_stock_story',
      ticker: normalized,
      as_of_date: asOfDate
    });
  }, []);

  const requestStockSimilarDays = useCallback((symbol, date, topK = 8) => {
    const normalized = typeof symbol === 'string' ? symbol.trim().toUpperCase() : '';
    if (!normalized || !date || !clientRef.current) {
      return false;
    }
    return clientRef.current.send({
      type: 'get_stock_similar_days',
      ticker: normalized,
      date,
      top_k: topK
    });
  }, []);

  const requestStockEnrich = useCallback((symbol, options = {}) => {
    const normalized = typeof symbol === 'string' ? symbol.trim().toUpperCase() : '';
    if (!normalized || !clientRef.current) {
      return false;
    }
    const startDate = typeof options.startDate === 'string' ? options.startDate.trim() : '';
    const endDate = typeof options.endDate === 'string' ? options.endDate.trim() : '';
    if (!startDate || !endDate) {
      return false;
    }
    setNewsByTicker((prev) => ({
      ...prev,
      [normalized]: {
        ...(prev[normalized] || {}),
        maintenanceStatus: {
          running: true,
          error: null,
          updatedAt: new Date().toISOString(),
          stats: null
        }
      }
    }));
    return clientRef.current.send({
      type: 'run_stock_enrich',
      ticker: normalized,
      start_date: startDate,
      end_date: endDate,
      force: Boolean(options.force),
      only_local_to_llm: Boolean(options.onlyLocalToLlm),
      rebuild_story: Boolean(options.rebuildStory),
      rebuild_similar_days: Boolean(options.rebuildSimilarDays),
      story_date: options.storyDate || null,
      target_date: options.targetDate || null
    });
  }, []);

  // Switch away from LIVE tab when market closes
  useEffect(() => {
    if (!isLiveEnabled && chartTab === 'live') {
      setChartTab('all');
    }
  }, [isLiveEnabled, chartTab]);

  useEffect(() => {
    if (!isWatchlistPanelOpen || !isWatchlistDraftDirty) {
      setWatchlistDraftSymbols(runtimeWatchlistSymbols);
      if (!isWatchlistPanelOpen) {
        setWatchlistInputValue('');
      }
    }
  }, [isWatchlistDraftDirty, isWatchlistPanelOpen, runtimeWatchlistSymbols]);

  useEffect(() => {
    isWatchlistSavingRef.current = isWatchlistSaving;
  }, [isWatchlistSaving]);

  useEffect(() => {
    isRuntimeConfigSavingRef.current = isRuntimeConfigSaving;
  }, [isRuntimeConfigSaving]);

  useEffect(() => {
    if (currentView !== 'explain' || !selectedExplainSymbol) {
      return;
    }
    requestStockHistory(selectedExplainSymbol);
    requestStockExplainEvents(selectedExplainSymbol);
    requestStockNews(selectedExplainSymbol);
    requestStockNewsTimeline(selectedExplainSymbol);
    requestStockNewsCategories(selectedExplainSymbol);
    requestStockStory(selectedExplainSymbol, currentDate);
  }, [
    currentDate,
    currentView,
    requestStockExplainEvents,
    requestStockHistory,
    requestStockNews,
    requestStockNewsCategories,
    requestStockNewsTimeline,
    requestStockStory,
    selectedExplainSymbol
  ]);

  // Clock - use virtual time if available (for mock mode)
  useEffect(() => {
    if (virtualTime) {
      // In mock mode, calculate offset from real time
      const virtualTimeMs = new Date(virtualTime).getTime();
      const realTimeMs = Date.now();
      virtualTimeOffsetRef.current = virtualTimeMs - realTimeMs;
      lastVirtualTimeRef.current = virtualTimeMs;
      setNow(new Date(virtualTime));

      // Update clock every second based on offset
      const id = setInterval(() => {
        const currentRealTime = Date.now();
        const currentVirtualTime = currentRealTime + virtualTimeOffsetRef.current;
        setNow(new Date(currentVirtualTime));
      }, 1000);

      return () => clearInterval(id);
    } else {
      // In live mode, use real time
      const id = setInterval(() => setNow(new Date()), 1000);
      return () => clearInterval(id);
    }
  }, [virtualTime]);

  // Update clock when virtual time changes (recalculate offset)
  useEffect(() => {
    if (virtualTime) {
      const virtualTimeMs = new Date(virtualTime).getTime();
      const realTimeMs = Date.now();
      virtualTimeOffsetRef.current = virtualTimeMs - realTimeMs;
      lastVirtualTimeRef.current = virtualTimeMs;
      setNow(new Date(virtualTime));
    }
  }, [virtualTime]);

  // Track updates with visual feedback
  useEffect(() => {
    setLastUpdate(new Date());
    setIsUpdating(true);
    const timer = setTimeout(() => setIsUpdating(false), 500);
    return () => clearTimeout(timer);
  }, [holdings, stats, trades, portfolioData.netValue]);

  // Initial animation flag for slider speed
  useEffect(() => {
    const completeTimer = setTimeout(() => {
      setIsInitialAnimating(false);
    }, 1800);

    return () => {
      clearTimeout(completeTimer);
    };
  }, []);


  // Helper to check if bubble should still be visible
  // Bubbles persist until replaced by ANY new message (cross-role)
  // When any agent sends a new message, all previous bubbles are cleared
  // Can search by agentId or agentName
  const bubbleFor = (idOrName) => {
    // First try direct lookup by id
    let b = bubbles[idOrName];
    if (b) {
      return b;
    }

    // If not found, search by agentName
    const agent = AGENTS.find(a => a.name === idOrName || a.id === idOrName);
    if (agent) {
      b = bubbles[agent.id];
      if (b) {
        return b;
      }
    }

    return null;
  };

  // Handle jump to message in feed
  const handleJumpToMessage = useCallback((bubble) => {
    // Switch to room tab (if not already there) for better context
    // Then scroll AgentFeed to the message
    if (agentFeedRef.current && agentFeedRef.current.scrollToMessage) {
      agentFeedRef.current.scrollToMessage(bubble);
    }
  }, []);

  // Auto-connect to server on mount
  useEffect(() => {
    // Define pushEvent inside useEffect to avoid dependency issues
    const handlePushEvent = (evt) => {
      if (!evt) return;

      try {
        handleEventInternal(evt);
      } catch (error) {
        console.error('[Event Handler] Error:', error);
      }
    };

    const handleEventInternal = (evt) => {
      if (evt?.type && evt.type !== 'pong') {
        setConnectionStatus('connected');
        setIsConnected(true);
      }

      // Helper: Update tickers from realtime prices
      const updateTickersFromPrices = (realtimePrices) => {
        try {
          setTickers(prevTickers => {
            return prevTickers.map(ticker => {
              const realtimeData = realtimePrices[ticker.symbol];
              if (realtimeData && realtimeData.price !== null && realtimeData.price !== undefined) {
                // Use 'ret' from realtime data (relative to open price) if available
                const newChange = (realtimeData.ret !== null && realtimeData.ret !== undefined)
                  ? realtimeData.ret
                  : (ticker.change !== null && ticker.change !== undefined ? ticker.change : 0);

                return {
                  ...ticker,
                  price: realtimeData.price,
                  change: newChange,
                  open: realtimeData.open || ticker.open
                };
              }
              return ticker;
            });
          });
        } catch (error) {
          console.error('Error updating tickers from prices:', error);
        }
      };

      const handlers = {
        // Error response (for fast forward errors)
        error: (e) => {
          const message = typeof e.message === 'string' ? e.message : '请求失败';
          console.error('[Error]', message);
          setIsAgentSkillsLoading(false);
          setSkillDetailLoadingKey(null);
          setAgentSkillsSavingKey(null);
          setIsWorkspaceFileLoading(false);
          setWorkspaceFileSavingKey(null);
          if (isWatchlistSavingRef.current) {
            setIsWatchlistSaving(false);
            setWatchlistFeedback({ type: 'error', text: message || '更新 watchlist 失败' });
          }
          if (isRuntimeConfigSavingRef.current) {
            setIsRuntimeConfigSaving(false);
            setRuntimeConfigFeedback({ type: 'error', text: message });
          }
          if (message.includes('skill') || message.includes('agent_id')) {
            setAgentSkillsFeedback({ type: 'error', text: message || '更新技能失败' });
          }
          if (message.includes('workspace_file') || message.includes('filename')) {
            setWorkspaceFileFeedback({ type: 'error', text: message || '更新工作区文件失败' });
          }

          // Handle fast forward errors
          if (message.includes('fast forward')) {
            console.warn(`⚠️ ${message}`);
            handlePushEvent({
              type: 'system',
              content: `⚠️ ${message}`,
              timestamp: Date.now()
            });
          }
          addSystemMessage(message);
        },

        // Connection events
        system: (e) => {
          console.log('[System]', e.content);
          if (
            e.content.includes('Connected')
            || e.content.includes('已连接')
          ) {
            setConnectionStatus('connected');
            setIsConnected(true);
          } else if (
            e.content.includes('Disconnected')
            || e.content.includes('断开')
          ) {
            setConnectionStatus('disconnected');
            setIsConnected(false);
          }
          processFeedEvent(e);
        },

        // Pong response from server
        pong: (e) => {
          console.log('[Heartbeat] Pong received');
        },

        // Initial state from server
        initial_state: (e) => {
          try {
            const state = e.state;
            if (!state) return;

            setConnectionStatus('connected');
            setIsConnected(true);
            setSystemStatus(state.status || 'initializing');
            setCurrentDate(state.current_date);

            // 设置服务器模式和市场状态
            if (state.server_mode) {
              setServerMode(state.server_mode);
            }
            if (state.data_sources) {
              setDataSources(state.data_sources);
            }
            if (state.runtime_config) {
              setRuntimeConfig(state.runtime_config);
            }
            if (Array.isArray(state.tickers) && state.tickers.length > 0) {
              setTickers(prevTickers => buildTickersFromSymbols(state.tickers, prevTickers));
            }
            // 检查是否是mock模式
            const isMockMode = state.is_mock_mode === true;
            if (state.market_status) {
              setMarketStatus(state.market_status);
              // 只在Mock模式下，如果市场状态包含虚拟时间，才保存它
              if (isMockMode && state.market_status.current_time) {
                try {
                  const virtualTimeDate = new Date(state.market_status.current_time);
                  setVirtualTime(virtualTimeDate);
                } catch (error) {
                  console.error('Error parsing virtual time from market_status:', error);
                }
              } else {
                // 非Mock模式下清除virtualTime
                setVirtualTime(null);
              }
            }

            if (state.trading_days_total) {
              setProgress({
                current: state.trading_days_completed || 0,
                total: state.trading_days_total
              });
            }

            if (state.portfolio) {
              setPortfolioData(prev => ({
                ...prev,
                netValue: state.portfolio.total_value || prev.netValue,
                pnl: state.portfolio.pnl_percent || 0,
                equity: state.portfolio.equity || prev.equity,
                baseline: state.portfolio.baseline || prev.baseline,
                baseline_vw: state.portfolio.baseline_vw || prev.baseline_vw,
                momentum: state.portfolio.momentum || prev.momentum,
                strategies: state.portfolio.strategies || prev.strategies,
                equity_return: state.portfolio.equity_return || prev.equity_return,
                baseline_return: state.portfolio.baseline_return || prev.baseline_return,
                baseline_vw_return: state.portfolio.baseline_vw_return || prev.baseline_vw_return,
                momentum_return: state.portfolio.momentum_return || prev.momentum_return
              }));
            }

            if (state.dashboard) {
              if (state.dashboard.holdings) setHoldings(state.dashboard.holdings);
              if (state.dashboard.trades) setTrades(state.dashboard.trades);
              if (state.dashboard.stats) setStats(state.dashboard.stats);
              if (state.dashboard.leaderboard) setLeaderboard(state.dashboard.leaderboard);
            }
            if (state.realtime_prices) updateTickersFromPrices(state.realtime_prices);
            if (state.price_history) {
              setPriceHistoryByTicker(normalizePriceHistory(state.price_history));
            }

            // Load and process historical feed data
            if (state.feed_history && Array.isArray(state.feed_history)) {
              console.log(`✅ Loading ${state.feed_history.length} historical events`);
              processHistoricalFeed(state.feed_history);
            }

            // Load last day history for replay
            if (state.last_day_history && Array.isArray(state.last_day_history)) {
              setLastDayHistory(state.last_day_history);
              console.log(`✅ Loaded ${state.last_day_history.length} last day events for replay`);
            }

            console.log('Initial state loaded');
          } catch (error) {
            console.error('Error loading initial state:', error);
          }
        },

        // Market status update
        market_status_update: (e) => {
          if (e.market_status) {
            setMarketStatus(e.market_status);
          }
        },

        data_sources_update: (e) => {
          if (e.data_sources) {
            setDataSources(e.data_sources);
          }
        },

        runtime_assets_reloaded: (e) => {
          if (e.runtime_config_applied) {
            setRuntimeConfig(e.runtime_config_applied);
          }
          if (Array.isArray(e.runtime_config_applied?.tickers)) {
            setTickers(prevTickers => buildTickersFromSymbols(e.runtime_config_applied.tickers, prevTickers));
            setWatchlistDraftSymbols(e.runtime_config_applied.tickers.map((symbol) => String(symbol).trim().toUpperCase()));
            setWatchlistInputValue('');
          }
          if (isWatchlistSavingRef.current) {
            setIsWatchlistSaving(false);
          }
          if (isRuntimeConfigSavingRef.current) {
            setIsRuntimeConfigSaving(false);
            setRuntimeConfigFeedback({ type: 'success', text: '运行配置已保存并生效' });
          }
          const warnings = Array.isArray(e.runtime_config_warnings) ? e.runtime_config_warnings : [];
          warnings.forEach((warning) => addSystemMessage(warning));
          addSystemMessage('运行时配置已热更新');
        },

        agent_skills_loaded: (e) => {
          const agentId = typeof e.agent_id === 'string' ? e.agent_id.trim() : '';
          if (!agentId) {
            setIsAgentSkillsLoading(false);
            return;
          }
          setAgentSkillsByAgent((prev) => ({
            ...prev,
            [agentId]: Array.isArray(e.skills) ? e.skills : []
          }));
          setIsAgentSkillsLoading(false);
          setAgentSkillsSavingKey(null);
        },

        agent_profile_loaded: (e) => {
          const agentId = typeof e.agent_id === 'string' ? e.agent_id.trim() : '';
          if (!agentId) {
            return;
          }
          setAgentProfilesByAgent((prev) => ({
            ...prev,
            [agentId]: e.profile && typeof e.profile === 'object' ? e.profile : {}
          }));
        },

        skill_detail_loaded: (e) => {
          const skillName = typeof e.skill?.skill_name === 'string' ? e.skill.skill_name.trim() : '';
          const agentId = typeof e.agent_id === 'string' ? e.agent_id.trim() : selectedSkillAgentId;
          if (!skillName) {
            setSkillDetailLoadingKey(null);
            return;
          }
          const detailKey = `${agentId}:${skillName}`;
          setSkillDetailsByName((prev) => ({
            ...prev,
            [detailKey]: e.skill
          }));
          setLocalSkillDraftsByKey((prev) => ({
            ...prev,
            [detailKey]: typeof e.skill?.content === 'string' ? e.skill.content : ''
          }));
          setSkillDetailLoadingKey(null);
        },

        agent_skill_updated: (e) => {
          const agentId = typeof e.agent_id === 'string' ? e.agent_id.trim() : '';
          const skillName = typeof e.skill_name === 'string' ? e.skill_name.trim() : '';
          if (!agentId || !skillName) {
            return;
          }
          setAgentSkillsFeedback({
            type: 'success',
            text: `${agentId} ${e.enabled ? '已启用' : '已禁用'} ${skillName}`
          });
        },

        agent_local_skill_created: (e) => {
          const agentId = typeof e.agent_id === 'string' ? e.agent_id.trim() : '';
          const skillName = typeof e.skill_name === 'string' ? e.skill_name.trim() : '';
          setAgentSkillsSavingKey(null);
          if (!agentId || !skillName) {
            return;
          }
          setAgentSkillsFeedback({
            type: 'success',
            text: `${agentId} 已创建本地技能 ${skillName}`
          });
        },

        agent_local_skill_updated: (e) => {
          const agentId = typeof e.agent_id === 'string' ? e.agent_id.trim() : '';
          const skillName = typeof e.skill_name === 'string' ? e.skill_name.trim() : '';
          setAgentSkillsSavingKey(null);
          if (!agentId || !skillName) {
            return;
          }
          setAgentSkillsFeedback({
            type: 'success',
            text: `${agentId} 的本地技能 ${skillName} 已保存`
          });
        },

        agent_local_skill_deleted: (e) => {
          const agentId = typeof e.agent_id === 'string' ? e.agent_id.trim() : '';
          const skillName = typeof e.skill_name === 'string' ? e.skill_name.trim() : '';
          setAgentSkillsSavingKey(null);
          if (!agentId || !skillName) {
            return;
          }
          setSkillDetailsByName((prev) => {
            const next = { ...prev };
            delete next[`${agentId}:${skillName}`];
            return next;
          });
          setLocalSkillDraftsByKey((prev) => {
            const next = { ...prev };
            delete next[`${agentId}:${skillName}`];
            return next;
          });
          setAgentSkillsFeedback({
            type: 'success',
            text: `${agentId} 的本地技能 ${skillName} 已删除`
          });
        },

        agent_skill_removed: (e) => {
          const agentId = typeof e.agent_id === 'string' ? e.agent_id.trim() : '';
          const skillName = typeof e.skill_name === 'string' ? e.skill_name.trim() : '';
          setAgentSkillsSavingKey(null);
          if (!agentId || !skillName) {
            return;
          }
          setAgentSkillsFeedback({
            type: 'success',
            text: `${agentId} 已移除共享技能 ${skillName}`
          });
        },

        agent_workspace_file_loaded: (e) => {
          const agentId = typeof e.agent_id === 'string' ? e.agent_id.trim() : '';
          const filename = typeof e.filename === 'string' ? e.filename.trim() : '';
          if (!agentId || !filename) {
            setIsWorkspaceFileLoading(false);
            return;
          }
          setWorkspaceFilesByAgent((prev) => ({
            ...prev,
            [agentId]: {
              ...(prev[agentId] || {}),
              [filename]: typeof e.content === 'string' ? e.content : ''
            }
          }));
          setIsWorkspaceFileLoading(false);
          setWorkspaceFileSavingKey(null);
        },

        agent_workspace_file_updated: (e) => {
          const agentId = typeof e.agent_id === 'string' ? e.agent_id.trim() : '';
          const filename = typeof e.filename === 'string' ? e.filename.trim() : '';
          if (!agentId || !filename) {
            return;
          }
          setWorkspaceFileFeedback({
            type: 'success',
            text: `${agentId} 的 ${filename} 已保存`
          });
        },

        watchlist_updated: (e) => {
          if (Array.isArray(e.tickers)) {
            const normalizedTickers = e.tickers.map((symbol) => String(symbol).trim().toUpperCase());
            requestedStockHistoryRef.current = new Set(
              Array.from(requestedStockHistoryRef.current).filter((symbol) => normalizedTickers.includes(symbol))
            );
            setRuntimeConfig((prev) => ({
              ...(prev || {}),
              tickers: normalizedTickers
            }));
            setTickers((prevTickers) => buildTickersFromSymbols(normalizedTickers, prevTickers));
            setWatchlistDraftSymbols(normalizedTickers);
            setWatchlistInputValue('');
          }
          setIsWatchlistSaving(false);
          setWatchlistFeedback({
            type: 'success',
            text: `已更新为 ${Array.isArray(e.tickers) ? e.tickers.join(', ') : '最新列表'}`
          });
        },

        stock_history_loaded: (e) => {
          const symbol = typeof e.ticker === 'string' ? e.ticker.trim().toUpperCase() : '';
          if (!symbol) {
            return;
          }

          if (Array.isArray(e.prices)) {
            setOhlcHistoryByTicker((prev) => ({
              ...prev,
              [symbol]: e.prices
            }));
            setHistorySourceByTicker((prev) => ({
              ...prev,
              [symbol]: e.source || null
            }));
          }
        },

        stock_explain_events_loaded: (e) => {
          const symbol = typeof e.ticker === 'string' ? e.ticker.trim().toUpperCase() : '';
          if (!symbol) {
            return;
          }
          setExplainEventsByTicker((prev) => ({
            ...prev,
            [symbol]: {
              events: Array.isArray(e.events) ? e.events : [],
              signals: Array.isArray(e.signals) ? e.signals : [],
              trades: Array.isArray(e.trades) ? e.trades : []
            }
          }));
        },

        stock_news_loaded: (e) => {
          const symbol = typeof e.ticker === 'string' ? e.ticker.trim().toUpperCase() : '';
          if (!symbol) {
            return;
          }
          setNewsByTicker((prev) => ({
            ...prev,
            [symbol]: {
              ...(prev[symbol] || {}),
              items: Array.isArray(e.news) ? e.news : [],
              source: e.source || null,
              startDate: e.start_date || null,
              endDate: e.end_date || null
            }
          }));
          requestStockNewsTimeline(symbol);
        },

        stock_news_for_date_loaded: (e) => {
          const symbol = typeof e.ticker === 'string' ? e.ticker.trim().toUpperCase() : '';
          const date = typeof e.date === 'string' ? e.date.trim() : '';
          if (!symbol || !date) {
            return;
          }
          setNewsByTicker((prev) => ({
            ...prev,
            [symbol]: {
              ...(prev[symbol] || {}),
              byDate: {
                ...((prev[symbol] && prev[symbol].byDate) || {}),
                [date]: Array.isArray(e.news) ? e.news : []
              }
            }
          }));
        },

        stock_news_timeline_loaded: (e) => {
          const symbol = typeof e.ticker === 'string' ? e.ticker.trim().toUpperCase() : '';
          if (!symbol) {
            return;
          }
          setNewsByTicker((prev) => ({
            ...prev,
            [symbol]: {
              ...(prev[symbol] || {}),
              timeline: Array.isArray(e.timeline) ? e.timeline : [],
              timelineStartDate: e.start_date || null,
              timelineEndDate: e.end_date || null
            }
          }));
        },

        stock_news_categories_loaded: (e) => {
          const symbol = typeof e.ticker === 'string' ? e.ticker.trim().toUpperCase() : '';
          if (!symbol) {
            return;
          }
          setNewsByTicker((prev) => ({
            ...prev,
            [symbol]: {
              ...(prev[symbol] || {}),
              categories: e.categories || {},
              categoriesStartDate: e.start_date || null,
              categoriesEndDate: e.end_date || null
            }
          }));
        },

        stock_range_explain_loaded: (e) => {
          const symbol = typeof e.ticker === 'string' ? e.ticker.trim().toUpperCase() : '';
          if (!symbol) {
            return;
          }
          const result = e.result && typeof e.result === 'object' ? e.result : null;
          if (!result?.start_date || !result?.end_date) {
            return;
          }
          const cacheKey = `${result.start_date}:${result.end_date}`;
          setNewsByTicker((prev) => ({
            ...prev,
            [symbol]: {
              ...(prev[symbol] || {}),
              rangeExplainCache: {
                ...((prev[symbol] && prev[symbol].rangeExplainCache) || {}),
                [cacheKey]: result
              }
            }
          }));
        },

        stock_story_loaded: (e) => {
          const symbol = typeof e.ticker === 'string' ? e.ticker.trim().toUpperCase() : '';
          const asOfDate = typeof e.as_of_date === 'string' ? e.as_of_date.trim() : '';
          if (!symbol || !asOfDate) {
            return;
          }
          setNewsByTicker((prev) => ({
            ...prev,
            [symbol]: {
              ...(prev[symbol] || {}),
              storyCache: {
                ...((prev[symbol] && prev[symbol].storyCache) || {}),
                [asOfDate]: {
                  story: e.story || '',
                  source: e.source || null,
                  asOfDate
                }
              }
            }
          }));
        },

        stock_similar_days_loaded: (e) => {
          const symbol = typeof e.ticker === 'string' ? e.ticker.trim().toUpperCase() : '';
          const date = typeof e.target_date === 'string'
            ? e.target_date.trim()
            : typeof e.date === 'string'
              ? e.date.trim()
              : '';
          if (!symbol || !date) {
            return;
          }
          setNewsByTicker((prev) => ({
            ...prev,
            [symbol]: {
              ...(prev[symbol] || {}),
              similarDaysCache: {
                ...((prev[symbol] && prev[symbol].similarDaysCache) || {}),
                [date]: {
                  target_features: e.target_features || {},
                  items: Array.isArray(e.items) ? e.items : [],
                  error: e.error || null
                }
              }
            }
          }));
        },

        stock_enrich_completed: (e) => {
          const symbol = typeof e.ticker === 'string' ? e.ticker.trim().toUpperCase() : '';
          if (!symbol) {
            return;
          }
          const completedAt = new Date().toISOString();
          const historyEntry = {
            timestamp: completedAt,
            startDate: e.start_date || '',
            endDate: e.end_date || '',
            force: Boolean(e.force),
            onlyLocalToLlm: Boolean(e.only_local_to_llm),
            error: e.error || null,
            stats: e.stats || null,
            storyStatus: e.story_status || null,
            similarStatus: e.similar_status || null
          };
          setNewsByTicker((prev) => ({
            ...prev,
            [symbol]: {
              ...(prev[symbol] || {}),
              items: [],
              byDate: {},
              timeline: [],
              categories: {},
              rangeExplainCache: {},
              storyCache: {},
              similarDaysCache: {},
              maintenanceStatus: {
                running: false,
                error: e.error || null,
                updatedAt: completedAt,
                stats: e.stats || null,
                storyStatus: e.story_status || null,
                similarStatus: e.similar_status || null
              },
              maintenanceHistory: [
                historyEntry,
                ...(((prev[symbol] && prev[symbol].maintenanceHistory) || []).slice(0, 7))
              ]
            }
          }));
          if (!e.error) {
            requestStockNews(symbol);
            requestStockNewsTimeline(symbol);
            requestStockNewsCategories(symbol);
          }
        },

        // Real-time price updates
        price_update: (e) => {
          try {
            const { symbol, price, ret, open, portfolio, realtime_prices } = e;

            if (!symbol || !price) {
              console.warn('[Price Update] Missing symbol or price:', e);
              return;
            }

            setConnectionStatus('connected');
            setIsConnected(true);
            console.log(`[Price Update] ${symbol}: $${price} (ret: ${ret !== undefined ? ret.toFixed(2) : 'N/A'}%)`);

            setPriceHistoryByTicker((prev) => {
              const ticker = String(symbol).trim().toUpperCase();
              const nextPoint = {
                timestamp: new Date().toISOString(),
                label: now.toISOString(),
                price: Number(price)
              };
              const existing = Array.isArray(prev[ticker]) ? prev[ticker] : [];
              const lastPoint = existing[existing.length - 1];
              if (lastPoint && Number(lastPoint.price) === Number(nextPoint.price)) {
                return prev;
              }
              return {
                ...prev,
                [ticker]: [...existing, nextPoint].slice(-120)
              };
            });

            // Update ticker price with animation
            setTickers(prevTickers => {
              return prevTickers.map(ticker => {
                if (ticker.symbol === symbol) {
                  const oldPrice = ticker.price;

                  // Use 'ret' from server (relative to open price) if available
                  // Otherwise fallback to calculating change from previous price
                  let newChange = ticker.change;
                  if (ret !== null && ret !== undefined) {
                    // Use server-provided ret (relative to open price)
                    newChange = ret;
                  } else if (oldPrice !== null && oldPrice !== undefined && isFinite(oldPrice)) {
                    // Fallback: calculate change from previous price
                    const priceChange = ((price - oldPrice) / oldPrice) * 100;
                    newChange = (newChange !== null && newChange !== undefined)
                      ? newChange + priceChange
                      : priceChange;
                  } else {
                    // First price received, set change to 0
                    newChange = 0;
                  }

                  // Trigger rolling animation only if price actually changed
                  if (oldPrice !== price) {
                    setRollingTickers(prev => ({ ...prev, [symbol]: true }));
                    setTimeout(() => {
                      setRollingTickers(prev => ({ ...prev, [symbol]: false }));
                    }, 500);
                  }

                  return {
                    ...ticker,
                    price: price,
                    change: newChange,
                    open: open || ticker.open  // Store open price
                  };
                }
                return ticker;
              });
            });

            // Update all tickers from realtime_prices if provided
            if (realtime_prices) {
              updateTickersFromPrices(realtime_prices);
            }

            // Update portfolio value if provided
            if (portfolio && portfolio.total_value) {
              setPortfolioData(prev => ({
                ...prev,
                netValue: portfolio.total_value,
                pnl: portfolio.pnl_percent || 0,
                equity: portfolio.equity || prev.equity  // Update equity curve
              }));
            }
          } catch (error) {
            console.error('[Price Update] Error:', error);
          }
        },

        // Day progress events
        day_start: (e) => {
          setCurrentDate(e.date);
          if (e.progress !== undefined) {
            setProgress(prev => ({
              ...prev,
              current: Math.floor(e.progress * (prev.total || 1))
            }));
          }
          setSystemStatus('running');
          processFeedEvent(e);
        },

        day_complete: (e) => {
          // Update from day result
          const result = e.result;
          if (result && typeof result === 'object') {
            // Update portfolio equity if available
            if (result.portfolio_summary) {
              const summary = result.portfolio_summary;
              setPortfolioData(prev => {
                const newEquity = [...prev.equity];
                // Add new data point
                const dateObj = new Date(e.date);
                newEquity.push({
                  t: dateObj.getTime(),
                  v: summary.total_value || summary.cash || prev.netValue
                });

                return {
                  ...prev,
                  netValue: summary.total_value || summary.cash || prev.netValue,
                  pnl: summary.pnl_percent || 0,
                  equity: newEquity
                };
              });
            }
          }
          processFeedEvent(e);
        },

        day_error: (e) => {
          console.error('Day error:', e.date, e.error);
          processFeedEvent(e);
        },

        conference_start: (e) => {
          processFeedEvent(e);
        },

        conference_end: (e) => {
          processFeedEvent(e);
        },

        agent_message: (e) => {
          const agent = AGENTS.find(a => a.id === e.agentId);

          // Update bubbles for room view
          setBubbles({
            [e.agentId]: {
              text: e.content,
              ts: Date.now(),
              agentName: agent?.name || e.agentName || e.agentId
            }
          });

          processFeedEvent(e);
        },

        conference_message: (e) => {
          const agent = AGENTS.find(a => a.id === e.agentId);

          // Update bubbles for room view
          setBubbles({
            [e.agentId]: {
              text: e.content,
              ts: Date.now(),
              agentName: agent?.name || e.agentName || e.agentId
            }
          });

          processFeedEvent(e);
        },

        memory: (e) => {
          processFeedEvent(e);
        },

        team_summary: (e) => {
          // Update portfolio data silently without creating feed messages
          setPortfolioData(prev => ({
            ...prev,
            netValue: e.balance || prev.netValue,
            pnl: e.pnlPct || 0,
            equity: e.equity || prev.equity,
            baseline: e.baseline || prev.baseline,
            baseline_vw: e.baseline_vw || prev.baseline_vw,
            momentum: e.momentum || prev.momentum,
            equity_return: e.equity_return || prev.equity_return,
            baseline_return: e.baseline_return || prev.baseline_return,
            baseline_vw_return: e.baseline_vw_return || prev.baseline_vw_return,
            momentum_return: e.momentum_return || prev.momentum_return
          }));

          // Portfolio updates are shown in the ticker bar, no need for feed messages
        },

        team_portfolio: (e) => {
          if (e.holdings) setHoldings(e.holdings);
        },

        // ✅ 监听 holdings 更新（服务器广播的事件名）
        team_holdings: (e) => {
          if (e.data && Array.isArray(e.data)) {
            setHoldings(e.data);
            console.log(`✅ Holdings updated: ${e.data.length} positions`);
          }
        },

        team_trades: (e) => {
          // 支持两种格式：完整列表或单笔交易
          if (e.mode === 'full' && e.data && Array.isArray(e.data)) {
            setTrades(e.data);
            console.log(`✅ Trades updated (full): ${e.data.length} trades`);
          } else if (Array.isArray(e.trades)) {
            setTrades(e.trades);
          } else if (e.trade) {
            setTrades(prev => [e.trade, ...prev].slice(0, 100));
          }
        },

        team_stats: (e) => {
          if (e.data) {
            setStats(e.data);
            console.log('✅ Stats updated');
          } else if (e.stats) {
            setStats(e.stats);
          }
        },

        team_leaderboard: (e) => {
          // 服务器发送的格式: { type: 'team_leaderboard', data: [...], timestamp: ... }
          if (Array.isArray(e.data)) {
            setLeaderboard(e.data);
            console.log('✅ Leaderboard updated:', e.data.length, 'agents');
          } else if (Array.isArray(e.rows)) {
            setLeaderboard(e.rows);
          } else if (Array.isArray(e.leaderboard)) {
            setLeaderboard(e.leaderboard);
          }
        },

        // 虚拟时间更新（Mock模式下的时间广播）
        time_update: (e) => {
          if (e.beijing_time_str) {
            const statusEmoji = {
              'market_open': '📊',
              'off_market': '⏸️',
              'non_trading_day': '📅',
              'trade_execution': '💼'
            };

            const emoji = statusEmoji[e.status] || '⏰';
            const isMockMode = e.is_mock_mode === true;
            let logMessage = `${emoji} ${isMockMode ? '虚拟时间' : '时间'}: ${e.beijing_time_str} | 状态: ${e.status}`;

            if (e.hours_to_open !== undefined) {
              logMessage += ` | 距离开盘: ${e.hours_to_open}小时`;
            }
            if (e.hours_to_trade !== undefined) {
              logMessage += ` | 距离交易: ${e.hours_to_trade}小时`;
            }
            if (e.trading_date) {
              logMessage += ` | 交易日: ${e.trading_date}`;
            }

            console.log(logMessage);

            // 只在Mock模式下保存虚拟时间（用于图表过滤和UI显示）
            if (isMockMode && e.beijing_time) {
              try {
                const virtualTimeDate = new Date(e.beijing_time);
                setVirtualTime(virtualTimeDate);
              } catch (error) {
                console.error('Error parsing virtual time:', error);
              }
            } else {
              // 非Mock模式下清除virtualTime
              setVirtualTime(null);
            }
          }

          // 更新市场状态（如果包含在time_update中）
          if (e.market_status) {
            setMarketStatus(e.market_status);
          }
        },

        // 时间快进事件（Mock模式）
        time_fast_forwarded: (e) => {
          console.log(`⏩ 时间已快进 ${e.minutes} 分钟: ${e.old_time_str} → ${e.new_time_str}`);

          // 更新虚拟时间
          if (e.new_time) {
            try {
              const virtualTimeDate = new Date(e.new_time);
              setVirtualTime(virtualTimeDate);

              // 添加到feed显示
              handlePushEvent({
                type: 'system',
                content: `⏩ 时间快进 ${e.minutes} 分钟: ${e.old_time_str} → ${e.new_time_str}`,
                timestamp: Date.now()
              });
            } catch (error) {
              console.error('Error parsing fast forwarded time:', error);
            }
          }
        },

        // 快进成功响应
        fast_forward_success: (e) => {
          console.log(`✅ ${e.message}`);
        },
      };

      // Call handler or do nothing
      try {
        const handler = handlers[evt.type];
        if (handler) {
          handler(evt);
        } else {
          console.log('[handleEvent] Unknown event type:', evt.type);
        }
      } catch (error) {
        console.error('[handleEvent] Error handling event:', evt.type, error);
      }
    };

    // Create and connect WebSocket client
    const client = new ReadOnlyClient(handlePushEvent);
    clientRef.current = client;
    client.connect();
    setConnectionStatus('connecting');

    return () => {
      // Cleanup on unmount
      if (clientRef.current) {
        clientRef.current.disconnect();
      }
    };
  }, [
    addSystemMessage,
    buildTickersFromSymbols,
    processFeedEvent,
    processHistoricalFeed,
    requestStockNewsCategories,
    requestStockNewsTimeline
  ]); // Only reconnect if handlers change

  // Resizing handlers
  const handleMouseDown = (e) => {
    e.preventDefault();
    setIsResizing(true);
  };

  useEffect(() => {
    if (!isResizing) return;

    const handleMouseMove = (e) => {
      if (!containerRef.current) return;
      const containerRect = containerRef.current.getBoundingClientRect();
      const newLeftWidth = ((e.clientX - containerRect.left) / containerRect.width) * 100;

      // Limit between 30% and 85%
      if (newLeftWidth >= 30 && newLeftWidth <= 85) {
        setLeftWidth(newLeftWidth);
      }
    };

    const handleMouseUp = () => {
      setIsResizing(false);
    };

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, [isResizing]);

  return (
    <div className="app">
      <GlobalStyles />

      {/* Header */}
      <div className="header">
        <Header />

        <div className="header-right" style={{ display: 'flex', alignItems: 'center', gap: 24, marginLeft: 'auto', flexWrap: 'wrap', minWidth: 0 }}>
          {/* Mock Mode Indicator */}
          {virtualTime && (
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: 6,
              padding: '4px 10px',
              borderRadius: 4,
              background: '#FF9800',
              border: '1px solid #FFB74D'
            }}>
              <span style={{ fontSize: '14px' }}></span>
              <span style={{
                fontSize: '11px',
                fontWeight: 600,
                color: '#FFFFFF',
                fontFamily: '"Courier New", monospace',
                letterSpacing: '0.5px'
              }}>
                模拟模式
              </span>
            </div>
          )}


          {/* Clock Display (only in Mock mode) */}
          {virtualTime && (
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: 8
            }}>
              <div style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'flex-end',
                gap: 2,
                padding: '4px 12px',
                borderRadius: 4,
                background: '#1A237E',
                border: '1px solid #3F51B5'
              }}>
                <span style={{
                  fontSize: '11px',
                  color: '#999',
                  fontFamily: '"Courier New", monospace',
                  textTransform: 'uppercase',
                  letterSpacing: '0.5px'
                }}>
                  虚拟时间
                </span>
                <span style={{
                  fontSize: '14px',
                  fontWeight: 700,
                  color: '#FFFFFF',
                  fontFamily: '"Courier New", monospace',
                  letterSpacing: '1px'
                }}>
                  {now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })}
                </span>
                <span style={{
                  fontSize: '10px',
                  color: '#999',
                  fontFamily: '"Courier New", monospace'
                }}>
                  {now.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
                </span>
              </div>

              {/* Fast Forward Button (only in Mock mode) */}
              <button
                onClick={() => {
                  if (clientRef.current) {
                    const success = clientRef.current.send({
                      type: 'fast_forward_time',
                      minutes: 30
                    });
                    if (!success) {
                      console.error('Failed to send fast forward request');
                    }
                  }
                }}
                style={{
                  padding: '6px 12px',
                  borderRadius: 4,
                  background: '#3F51B5',
                  border: '1px solid #5C6BC0',
                  color: '#FFFFFF',
                  fontSize: '12px',
                  fontFamily: '"Courier New", monospace',
                  fontWeight: 600,
                  cursor: 'pointer',
                  transition: 'all 0.2s',
                  display: 'flex',
                  alignItems: 'center',
                  gap: 4,
                  textTransform: 'uppercase',
                  letterSpacing: '0.5px'
                }}
                onMouseEnter={(e) => {
                  e.target.style.background = '#5C6BC0';
                  e.target.style.borderColor = '#7986CB';
                }}
                onMouseLeave={(e) => {
                  e.target.style.background = '#3F51B5';
                  e.target.style.borderColor = '#5C6BC0';
                }}
                title="快进30分钟 (Mock模式)"
              >
                ⏩ +30min
              </button>
            </div>
          )}

          {/* Unified Status Indicator */}
          <div className="header-status-inline">
            <span className={`status-dot ${isConnected ? (isUpdating ? 'updating' : 'live') : 'offline'}`} />
            <span className={`status-text ${isConnected ? 'live' : 'offline'}`}>
              {isConnected ? (isUpdating ? '同步中' : '在线') : '离线'}
            </span>
            {marketStatus && (
              <>
                <span className="status-sep">·</span>
                <span className={`market-text ${serverMode === 'backtest' ? 'backtest' : (marketStatus.status === 'open' ? 'open' : 'closed')}`}>
                  {marketStatusLabel}
                </span>
              </>
            )}
            {livePriceSourceLabel && (
              <>
                <span className="status-sep">·</span>
                <span className="market-text backtest">
                  {livePriceSourceLabel}
                </span>
              </>
            )}
            {historicalPriceSourceLabel && (
              <>
                <span className="status-sep">·</span>
                <span className="market-text backtest">
                  {historicalPriceSourceLabel}
                </span>
              </>
            )}
            {runtimeSummaryLabel && (
              <>
                <span className="status-sep">·</span>
                <span className="market-text backtest" title="当前运行配置">
                  {runtimeSummaryLabel}
                </span>
              </>
            )}
            <span className="status-sep">·</span>
            <span className="time-text">{now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })}</span>
          </div>

          {serverMode !== 'backtest' && (
            <button
              onClick={handleManualTrigger}
              disabled={!isConnected}
              style={{
                padding: '6px 12px',
                borderRadius: 4,
                background: isConnected ? '#111111' : '#8a8a8a',
                border: '1px solid #111111',
                color: '#FFFFFF',
                fontSize: '11px',
                fontFamily: '"Courier New", monospace',
                fontWeight: 700,
                cursor: isConnected ? 'pointer' : 'not-allowed',
                letterSpacing: '0.4px',
                textTransform: 'uppercase'
              }}
              title="手动触发一轮分析与交易决策"
            >
              手动运行
            </button>
          )}

          <WatchlistPanel
            isOpen={isWatchlistPanelOpen}
            isConnected={isConnected}
            isSaving={isWatchlistSaving}
            draftSymbols={watchlistDraftSymbols}
            inputValue={watchlistInputValue}
            feedback={watchlistFeedback}
            suggestions={watchlistSuggestions}
            onToggle={handleWatchlistPanelToggle}
            onClose={() => setIsWatchlistPanelOpen(false)}
            onInputChange={handleWatchlistInputChange}
            onInputKeyDown={handleWatchlistInputKeyDown}
            onAdd={() => commitWatchlistInput(watchlistInputValue)}
            onRemove={handleWatchlistRemove}
            onRestoreCurrent={handleWatchlistRestoreCurrent}
            onRestoreDefault={handleWatchlistRestoreDefault}
            onSuggestionClick={handleWatchlistSuggestionClick}
            onSave={handleWatchlistSave}
          />

          <RuntimeSettingsPanel
            isOpen={isRuntimeSettingsOpen}
            isConnected={isConnected}
            isSaving={isRuntimeConfigSaving}
            feedback={runtimeConfigFeedback}
            runtimeConfig={runtimeConfig}
            scheduleMode={scheduleModeDraft}
            intervalMinutes={intervalMinutesDraft}
            triggerTime={triggerTimeDraft}
            maxCommCycles={maxCommCyclesDraft}
            onToggle={handleRuntimeSettingsToggle}
            onClose={() => setIsRuntimeSettingsOpen(false)}
            onScheduleModeChange={setScheduleModeDraft}
            onIntervalMinutesChange={setIntervalMinutesDraft}
            onTriggerTimeChange={setTriggerTimeDraft}
            onMaxCommCyclesChange={setMaxCommCyclesDraft}
            onSave={handleRuntimeConfigSave}
            onRestoreDefaults={handleRuntimeDefaultsRestore}
          />
        </div>
      </div>

      {/* Main Content */}
      <>
        {/* Ticker Bar */}
        <div className="ticker-bar">
          <div className="ticker-track">
            {[0, 1].map((groupIdx) => (
              <div key={groupIdx} className="ticker-group">
                {displayTickers.map(ticker => (
                  <div key={`${ticker.symbol}-${groupIdx}`} className="ticker-item">
                    <StockLogo ticker={ticker.symbol} size={16} />
                    <span className="ticker-symbol">{ticker.symbol}</span>
                    <span className="ticker-price">
                      <span className={`ticker-price-value ${rollingTickers[ticker.symbol] ? 'rolling' : ''}`}>
                        {ticker.price !== null && ticker.price !== undefined
                          ? `$${formatTickerPrice(ticker.price)}`
                          : '-'}
                      </span>
                    </span>
                    <span className={`ticker-change ${
                      ticker.change === null || ticker.change === undefined
                        ? ''
                        : ticker.change >= 0 ? 'positive' : 'negative'
                    }`}>
                      {ticker.change !== null && ticker.change !== undefined
                        ? `${ticker.change >= 0 ? '+' : ''}${ticker.change.toFixed(2)}%`
                        : '-'}
                    </span>
                  </div>
                ))}
              </div>
            ))}
          </div>
          <div className="portfolio-value">
            <span className="portfolio-label">投资组合</span>
            <span className="portfolio-amount">${formatNumber(portfolioData.netValue)}</span>
          </div>
        </div>

        <div className="main-container" ref={containerRef}>
          {/* Left Panel: Three-View Toggle (Room/Chart/Statistics) */}
          <div className="left-panel" style={{ width: `${leftWidth}%` }}>
            <div className="chart-section">
              <div className="view-container">
                <div className="view-nav-bar">
                  <button
                    className={`view-nav-btn ${currentView === 'traders' ? 'active' : ''}`}
                    onClick={() => setCurrentView('traders')}
                  >
                    交易员
                  </button>

                  <button
                    className={`view-nav-btn ${currentView === 'room' ? 'active' : ''}`}
                    onClick={() => setCurrentView('room')}
                  >
                    交易室
                  </button>

                  <button
                    className={`view-nav-btn ${currentView === 'explain' ? 'active' : ''}`}
                    onClick={() => setCurrentView('explain')}
                  >
                    个股分析
                  </button>

                  <button
                    className={`view-nav-btn ${currentView === 'chart' ? 'active' : ''}`}
                    onClick={() => setCurrentView('chart')}
                  >
                    业绩图表
                  </button>

                  <button
                    className={`view-nav-btn ${currentView === 'statistics' ? 'active' : ''}`}
                    onClick={() => setCurrentView('statistics')}
                  >
                    统计
                  </button>
                </div>

                <div className={`view-slider-five ${
                  currentView === 'traders'
                    ? 'show-traders'
                    : currentView === 'room'
                    ? 'show-room'
                    : currentView === 'explain'
                      ? 'show-explain'
                      : currentView === 'statistics'
                        ? 'show-statistics'
                        : 'show-chart'
                } ${!isInitialAnimating ? 'normal-speed' : ''}`}>
                  <div className="view-panel">
                    <Suspense fallback={<ViewLoadingFallback label="加载交易员视图..." />}>
                      <TraderView
                        agents={AGENTS}
                        agentProfilesByAgent={agentProfilesByAgent}
                        agentSkillsByAgent={agentSkillsByAgent}
                        workspaceFilesByAgent={workspaceFilesByAgent}
                        selectedAgentId={selectedSkillAgentId}
                        selectedAgentProfile={selectedAgentProfile}
                        selectedAgentSkills={selectedAgentSkills}
                        skillDetailsByName={skillDetailsByName}
                        localSkillDraftsByKey={localSkillDraftsByKey}
                        skillDetailLoadingKey={skillDetailLoadingKey}
                        editableFiles={EDITABLE_AGENT_WORKSPACE_FILES}
                        selectedWorkspaceFile={selectedWorkspaceFile}
                        workspaceFileContent={selectedWorkspaceContent}
                        workspaceDraftContent={workspaceDraftContent}
                        isConnected={isConnected}
                        isAgentSkillsLoading={isAgentSkillsLoading}
                        agentSkillsSavingKey={agentSkillsSavingKey}
                        agentSkillsFeedback={agentSkillsFeedback}
                        isWorkspaceFileLoading={isWorkspaceFileLoading}
                        workspaceFileSavingKey={workspaceFileSavingKey}
                        workspaceFileFeedback={workspaceFileFeedback}
                        onAgentChange={handleSkillAgentChange}
                        onCreateLocalSkill={handleCreateLocalSkill}
                        onSkillDetailRequest={requestSkillDetail}
                        onLocalSkillDraftChange={handleLocalSkillDraftChange}
                        onLocalSkillDelete={handleLocalSkillDelete}
                        onLocalSkillSave={handleLocalSkillSave}
                        onRemoveSharedSkill={handleRemoveSharedSkill}
                        onSkillToggle={handleAgentSkillToggle}
                        onWorkspaceFileChange={handleWorkspaceFileChange}
                        onWorkspaceDraftChange={setWorkspaceDraftContent}
                        onWorkspaceFileSave={handleWorkspaceFileSave}
                      />
                    </Suspense>
                  </div>

                  {/* Room View Panel */}
                  <div className="view-panel">
                    <Suspense fallback={<ViewLoadingFallback label="加载交易室..." />}>
                      <RoomView
                        bubbles={bubbles}
                        bubbleFor={bubbleFor}
                        leaderboard={leaderboard}
                        feed={feed}
                        onJumpToMessage={handleJumpToMessage}
                      />
                    </Suspense>
                  </div>

                  {/* Stock Explain View Panel */}
                  <div className="view-panel">
                    <Suspense fallback={<ViewLoadingFallback label="加载个股分析..." />}>
                      <StockExplainView
                        tickers={displayTickers}
                        holdings={holdings}
                        trades={trades}
                        leaderboard={leaderboard}
                        feed={feed}
                        priceHistoryByTicker={priceHistoryByTicker}
                        ohlcHistoryByTicker={ohlcHistoryByTicker}
                        selectedSymbol={selectedExplainSymbol}
                        onSelectedSymbolChange={setSelectedExplainSymbol}
                        selectedHistorySource={historySourceByTicker[selectedExplainSymbol] || null}
                        explainEventsSnapshot={explainEventsByTicker[selectedExplainSymbol] || null}
                        newsSnapshot={newsByTicker[selectedExplainSymbol] || null}
                        onRequestRangeExplain={requestStockRangeExplain}
                        onRequestNewsForDate={requestStockNewsForDate}
                        onRequestStory={requestStockStory}
                        currentDate={currentDate}
                        onRequestSimilarDays={requestStockSimilarDays}
                        onRequestStockEnrich={requestStockEnrich}
                      />
                    </Suspense>
                  </div>

                  {/* Chart View Panel */}
                  <div className="view-panel">
                    <div className="chart-container">
                      {/* Floating Timeframe Tabs */}
                      <div className="chart-tabs-floating">
                        <button
                          className={`chart-tab ${chartTab === 'all' ? 'active' : ''}`}
                          onClick={() => setChartTab('all')}
                        >
                          日线
                        </button>
                        {/* <button
                          className={`chart-tab ${chartTab === 'live' ? 'active' : ''} ${!isLiveEnabled ? 'disabled' : ''}`}
                          onClick={() => isLiveEnabled && setChartTab('live')}
                          disabled={!isLiveEnabled}
                          title={!isLiveEnabled ? 'Live chart available during market hours only' : ''}
                        >
                          LIVE
                        </button> */}
                      </div>

                      <NetValueChart
                        equity={portfolioData.equity}
                        baseline={portfolioData.baseline}
                        baseline_vw={portfolioData.baseline_vw}
                        momentum={portfolioData.momentum}
                        strategies={portfolioData.strategies}
                        equity_return={portfolioData.equity_return}
                        baseline_return={portfolioData.baseline_return}
                        baseline_vw_return={portfolioData.baseline_vw_return}
                        momentum_return={portfolioData.momentum_return}
                        chartTab={chartTab}
                        virtualTime={virtualTime}
                      />
                    </div>
                  </div>

                  {/* Statistics View Panel */}
                  <div className="view-panel">
                    <Suspense fallback={<ViewLoadingFallback label="加载统计视图..." />}>
                      <StatisticsView
                        trades={trades}
                        holdings={holdings}
                        stats={stats}
                        baseline_vw={portfolioData.baseline_vw}
                        equity={portfolioData.equity}
                        leaderboard={leaderboard}
                      />
                    </Suspense>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Resizer */}
          <div
            className={`resizer ${isResizing ? 'resizing' : ''}`}
            onMouseDown={handleMouseDown}
          />

          {/* Right Panel: Agent Feed */}
          <div className="right-panel" style={{ width: `${100 - leftWidth}%` }}>
            <Suspense fallback={<ViewLoadingFallback label="加载消息流..." />}>
              <AgentFeed ref={agentFeedRef} feed={feed} leaderboard={leaderboard} />
            </Suspense>
          </div>
        </div>
      </>
    </div>
  );
}