From db9a4a46b79d7aa87107b813a9fcee6fd73162f6 Mon Sep 17 00:00:00 2001
From: Roger Deng <13251150+rogerdigital@users.noreply.github.com>
Date: Tue, 14 Apr 2026 12:21:36 +0800
Subject: [PATCH 1/4] feat(layout): add sidebar collapse toggle with
 localStorage persistence

---
 .../components/layout/ConsoleChrome.css.ts    | 36 +++++++++++
 .../src/components/layout/ConsoleChrome.tsx   | 62 ++++++++++++++-----
 2 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/components/layout/ConsoleChrome.css.ts b/apps/web/src/components/layout/ConsoleChrome.css.ts
index 3237622..8596dd6 100644
--- a/apps/web/src/components/layout/ConsoleChrome.css.ts
+++ b/apps/web/src/components/layout/ConsoleChrome.css.ts
@@ -11,6 +11,11 @@ export const appShell = style({
   minHeight: '100vh',
   gap: 0,
   padding: 0,
+  transition: 'grid-template-columns 0.25s ease',
+});
+
+export const appShellCollapsed = style({
+  gridTemplateColumns: '60px 1fr',
 });
 
 globalStyle(`${appShell}::before`, {
@@ -86,6 +91,37 @@ globalStyle(`${sidebar}::before`, {
   pointerEvents: 'none',
 });
 
+export const sidebarCollapsed = style({
+  width: '60px',
+  padding: '24px 10px',
+  alignItems: 'center',
+});
+
+export const sidebarToggle = style({
+  position: 'absolute',
+  top: '24px',
+  right: '-13px',
+  zIndex: 10,
+  width: '26px',
+  height: '26px',
+  borderRadius: '50%',
+  border: '1px solid var(--line-strong)',
+  background: 'var(--panel-2)',
+  color: 'var(--muted)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  fontSize: '12px',
+  transition: 'border-color 160ms ease, color 160ms ease, background 160ms ease',
+  flexShrink: 0,
+  ':hover': {
+    borderColor: 'var(--accent-live)',
+    color: 'var(--accent-live)',
+    background: 'rgba(0, 212, 255, 0.08)',
+  },
+});
+
 export const brand = style({
   display: 'flex',
   gap: '12px',
diff --git a/apps/web/src/components/layout/ConsoleChrome.tsx b/apps/web/src/components/layout/ConsoleChrome.tsx
index 8d859b4..04be061 100644
--- a/apps/web/src/components/layout/ConsoleChrome.tsx
+++ b/apps/web/src/components/layout/ConsoleChrome.tsx
@@ -17,6 +17,7 @@ import {
 import { useTradingSystem } from '../../store/trading-system/TradingSystemProvider.tsx';
 import {
   appShell,
+  appShellCollapsed,
   brand,
   brandMark,
   brandName,
@@ -30,7 +31,9 @@ import {
   navStack,
   sidebar,
   sidebarBlock,
+  sidebarCollapsed,
   sidebarLabel,
+  sidebarToggle,
   toolbarActions,
   toolbarCopy,
   toolbarKicker,
@@ -275,30 +278,50 @@ export function TopMeta({ items }: { items: TopMetaItem[] }) {
   );
 }
 
-function Sidebar() {
+function Sidebar({ collapsed, onToggle }: { collapsed: boolean; onToggle: () => void }) {
   const { locale } = useLocale();
   const routes = listSidebarRoutes();
 
   return (
-    <aside className={sidebar}>
-      <div className={brand}>
-        <div className={brandMark} />
-        <div>
-          <div className={brandName}>{copy[locale].product}</div>
-          <div className={brandSub}>{copy[locale].tagline}</div>
+    <aside className={`${sidebar}${collapsed ? ` ${sidebarCollapsed}` : ''}`} style={{ position: 'relative' }}>
+      <button
+        type="button"
+        className={sidebarToggle}
+        onClick={onToggle}
+        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+      >
+        {collapsed ? '›' : '‹'}
+      </button>
+
+      {!collapsed && (
+        <div className={brand}>
+          <div className={brandMark} />
+          <div>
+            <div className={brandName}>{copy[locale].product}</div>
+            <div className={brandSub}>{copy[locale].tagline}</div>
+          </div>
         </div>
-      </div>
+      )}
 
-      <div className={sidebarBlock}>
-        <div className={sidebarLabel}>{copy[locale].labels.tacticalRoutes}</div>
+      {collapsed && (
+        <div style={{ marginBottom: '24px', paddingBottom: '18px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'center' }}>
+          <div className={brandMark} />
+        </div>
+      )}
+
+      <div className={sidebarBlock} style={collapsed ? { padding: '10px 6px' } : undefined}>
+        {!collapsed && <div className={sidebarLabel}>{copy[locale].labels.tacticalRoutes}</div>}
         <nav className={navStack}>
           {routes.map((route) => (
             <NavLink
               key={route.path}
               to={route.path}
-              className={({ isActive }) => `nav-link${isActive ? ' active' : ''}`}
+              className={({ isActive }) => `nav-link${isActive ? ' active' : ''}${collapsed ? ' nav-link-icon-only' : ''}`}
+              title={collapsed ? copy[locale].nav[route.id] : undefined}
+              style={collapsed ? { padding: '10px', textAlign: 'center', fontSize: '10px', letterSpacing: '0.05em' } : undefined}
             >
-              {copy[locale].nav[route.id]}
+              {collapsed ? copy[locale].nav[route.id].slice(0, 2) : copy[locale].nav[route.id]}
             </NavLink>
           ))}
         </nav>
@@ -468,14 +491,25 @@ export function EmptyState({ icon, message, detail }: EmptyStateProps) {
 export function Layout() {
   const location = useLocation();
   const { locale } = useLocale();
+  const [collapsed, setCollapsed] = useState(() => {
+    return window.localStorage.getItem('quantpilot-sidebar-collapsed') === 'true';
+  });
+
+  const handleToggle = () => {
+    setCollapsed((prev) => {
+      const next = !prev;
+      window.localStorage.setItem('quantpilot-sidebar-collapsed', String(next));
+      return next;
+    });
+  };
 
   useEffect(() => {
     document.title = getConsoleDocumentTitle(locale, location.pathname);
   }, [locale, location.pathname]);
 
   return (
-    <div className={appShell}>
-      <Sidebar />
+    <div className={`${appShell}${collapsed ? ` ${appShellCollapsed}` : ''}`}>
+      <Sidebar collapsed={collapsed} onToggle={handleToggle} />
       <main className={mainPanel}>
         <GlobalToolbar />
         <Outlet />

From 85950ac8edb3b05bf09d10b69951f1140a987ca3 Mon Sep 17 00:00:00 2001
From: Roger Deng <13251150+rogerdigital@users.noreply.github.com>
Date: Tue, 14 Apr 2026 12:28:44 +0800
Subject: [PATCH 2/4] feat(strategies): add /strategies/:id detail page with
 metrics, chart, params and backtest history

---
 apps/web/src/modules/console/console.i18n.tsx |   2 +
 .../src/modules/console/console.routes.tsx    |  13 +
 .../modules/research/StrategyCatalogRow.tsx   |  10 +
 .../src/pages/strategies/StrategiesPage.tsx   |   2 +
 .../strategies/StrategyDetailPage.css.ts      | 228 ++++++++++++++++++
 .../pages/strategies/StrategyDetailPage.tsx   | 227 +++++++++++++++++
 6 files changed, 482 insertions(+)
 create mode 100644 apps/web/src/pages/strategies/StrategyDetailPage.css.ts
 create mode 100644 apps/web/src/pages/strategies/StrategyDetailPage.tsx

diff --git a/apps/web/src/modules/console/console.i18n.tsx b/apps/web/src/modules/console/console.i18n.tsx
index c9ecd36..09e9ba3 100644
--- a/apps/web/src/modules/console/console.i18n.tsx
+++ b/apps/web/src/modules/console/console.i18n.tsx
@@ -17,6 +17,7 @@ export const copy = {
       dashboard: '仪表盘',
       market: '市场监控',
       strategies: '策略工作台',
+      'strategy-detail': '策略详情',
       backtest: '回测中心',
       risk: '风控面板',
       agent: 'Agent 对话台',
@@ -198,6 +199,7 @@ export const copy = {
       dashboard: 'Dashboard',
       market: 'Market',
       strategies: 'Strategies',
+      'strategy-detail': 'Strategy Detail',
       backtest: 'Backtest',
       risk: 'Risk',
       agent: 'Agent',
diff --git a/apps/web/src/modules/console/console.routes.tsx b/apps/web/src/modules/console/console.routes.tsx
index e089c05..7792322 100644
--- a/apps/web/src/modules/console/console.routes.tsx
+++ b/apps/web/src/modules/console/console.routes.tsx
@@ -18,12 +18,18 @@ const SettingsPage = lazy(() =>
 const NotificationsPage = lazy(() => import('../../pages/notifications/NotificationsPage.tsx'));
 const BacktestPage = lazy(() => import('../../pages/backtest/BacktestPage.tsx'));
 const StrategiesPage = lazy(() => import('../../pages/strategies/StrategiesPage.tsx'));
+const StrategyDetailPage = lazy(() =>
+  import('../../pages/strategies/StrategyDetailPage.tsx').then((m) => ({
+    default: m.StrategyDetailPage,
+  }))
+);
 const RiskPage = lazy(() => import('../../pages/risk/RiskPage.tsx'));
 
 type ConsoleNavKey =
   | 'dashboard'
   | 'market'
   | 'strategies'
+  | 'strategy-detail'
   | 'backtest'
   | 'risk'
   | 'execution'
@@ -74,6 +80,13 @@ export const CONSOLE_ROUTES: ConsoleRouteDefinition[] = [
     includeInSidebar: true,
     element: renderLazyRoute(<StrategiesPage />),
   },
+  {
+    id: 'strategy-detail',
+    pageKey: 'strategies',
+    path: '/strategies/:id',
+    includeInSidebar: false,
+    element: renderLazyRoute(<StrategyDetailPage />),
+  },
   {
     id: 'backtest',
     pageKey: 'backtest',
diff --git a/apps/web/src/modules/research/StrategyCatalogRow.tsx b/apps/web/src/modules/research/StrategyCatalogRow.tsx
index d995211..90c96f5 100644
--- a/apps/web/src/modules/research/StrategyCatalogRow.tsx
+++ b/apps/web/src/modules/research/StrategyCatalogRow.tsx
@@ -13,6 +13,7 @@ export function StrategyCatalogRow(props: {
   onPromote: (item: StrategyCatalogItem) => void;
   onArchiveToggle: (item: StrategyCatalogItem) => void;
   onInspect: (strategyId: string) => void;
+  onViewDetail?: (strategyId: string) => void;
 }) {
   const { locale, item, nextStage, canWriteStrategy, saving, promotingId, selectedStrategyId } =
     props;
@@ -99,6 +100,15 @@ export function StrategyCatalogRow(props: {
                 ? '查看'
                 : 'Inspect'}
           </button>
+          {props.onViewDetail ? (
+            <button
+              type="button"
+              className="inline-action inline-action-approve"
+              onClick={() => props.onViewDetail!(item.id)}
+            >
+              {locale === 'zh' ? '详情页' : 'Detail'}
+            </button>
+          ) : null}
         </div>
       }
     />
diff --git a/apps/web/src/pages/strategies/StrategiesPage.tsx b/apps/web/src/pages/strategies/StrategiesPage.tsx
index ad08fb2..df2ced7 100644
--- a/apps/web/src/pages/strategies/StrategiesPage.tsx
+++ b/apps/web/src/pages/strategies/StrategiesPage.tsx
@@ -754,6 +754,7 @@ function StrategiesPage() {
               onPromote={handlePromoteStrategy}
               onArchiveToggle={handleArchiveStrategy}
               onInspect={setSelectedStrategyId}
+              onViewDetail={(id) => navigate(`/strategies/${id}`)}
             />
           ))}
           {visibleArchivedStrategies.length ? (
@@ -775,6 +776,7 @@ function StrategiesPage() {
               onPromote={handlePromoteStrategy}
               onArchiveToggle={handleArchiveStrategy}
               onInspect={setSelectedStrategyId}
+              onViewDetail={(id) => navigate(`/strategies/${id}`)}
             />
           ))}
         </ResearchTerminalPanel>
diff --git a/apps/web/src/pages/strategies/StrategyDetailPage.css.ts b/apps/web/src/pages/strategies/StrategyDetailPage.css.ts
new file mode 100644
index 0000000..4439c4e
--- /dev/null
+++ b/apps/web/src/pages/strategies/StrategyDetailPage.css.ts
@@ -0,0 +1,228 @@
+import { globalStyle, style, styleVariants } from '@vanilla-extract/css';
+
+export const detailHeader = style({
+  marginBottom: '20px',
+  padding: '20px 24px 18px',
+  border: '1px solid var(--line)',
+  borderRadius: 'var(--radius-xl)',
+  background:
+    'linear-gradient(140deg, rgba(8, 18, 40, 0.97) 0%, rgba(5, 10, 26, 0.98) 60%, rgba(8, 5, 28, 0.97) 100%)',
+  boxShadow: 'var(--shadow-panel)',
+});
+
+export const detailBackRow = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: '6px',
+  marginBottom: '14px',
+  padding: '6px 12px',
+  borderRadius: 'var(--radius)',
+  border: '1px solid var(--line)',
+  background: 'rgba(0, 212, 255, 0.04)',
+  color: 'var(--muted)',
+  fontSize: '12px',
+  fontFamily: 'var(--font-data)',
+  letterSpacing: '0.04em',
+  cursor: 'pointer',
+  transition: 'border-color 160ms ease, color 160ms ease',
+  ':hover': {
+    borderColor: 'var(--accent-live)',
+    color: 'var(--accent-live)',
+  },
+});
+
+export const detailHeaderMeta = style({
+  display: 'flex',
+  alignItems: 'flex-start',
+  justifyContent: 'space-between',
+  gap: '16px',
+  flexWrap: 'wrap',
+});
+
+export const detailHeaderActions = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px',
+  flexShrink: 0,
+  paddingTop: '6px',
+});
+
+export const detailStageBadge = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  padding: '6px 14px',
+  borderRadius: 'var(--radius)',
+  border: '1px solid',
+  fontSize: '11px',
+  fontFamily: 'var(--font-data)',
+  fontWeight: 700,
+  letterSpacing: '0.1em',
+});
+
+export const detailStageBadgeVariants = styleVariants({
+  live: {
+    color: 'var(--buy)',
+    borderColor: 'rgba(0, 232, 157, 0.4)',
+    background: 'rgba(0, 232, 157, 0.08)',
+  },
+  paper: {
+    color: 'var(--accent-live)',
+    borderColor: 'rgba(0, 212, 255, 0.4)',
+    background: 'rgba(0, 212, 255, 0.08)',
+  },
+  candidate: {
+    color: 'var(--accent-2)',
+    borderColor: 'rgba(255, 183, 0, 0.4)',
+    background: 'rgba(255, 183, 0, 0.08)',
+  },
+  researching: {
+    color: 'var(--accent-3)',
+    borderColor: 'rgba(139, 92, 246, 0.4)',
+    background: 'rgba(139, 92, 246, 0.08)',
+  },
+  draft: {
+    color: 'var(--muted)',
+    borderColor: 'var(--line)',
+    background: 'rgba(0, 212, 255, 0.02)',
+  },
+});
+
+export const detailMetricsGrid = style({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(4, 1fr)',
+  gap: '12px',
+  marginBottom: '20px',
+  '@media': {
+    '(max-width: 1180px)': {
+      gridTemplateColumns: 'repeat(2, 1fr)',
+    },
+    '(max-width: 720px)': {
+      gridTemplateColumns: '1fr',
+    },
+  },
+});
+
+export const detailMetricCard = style({
+  padding: '20px',
+  border: '1px solid var(--line)',
+  borderRadius: 'var(--radius-lg)',
+  background: 'var(--panel)',
+  boxShadow: 'var(--shadow-panel)',
+  transition: 'border-color 200ms ease, box-shadow 200ms ease',
+  ':hover': {
+    borderColor: 'var(--line-strong)',
+    boxShadow: 'var(--shadow-panel-hover)',
+  },
+});
+
+export const detailMetricLabel = style({
+  color: 'var(--muted)',
+  textTransform: 'uppercase',
+  letterSpacing: '0.14em',
+  fontSize: '10px',
+  fontFamily: 'var(--font-data)',
+  marginBottom: '10px',
+});
+
+export const detailMetricValue = style({
+  fontFamily: 'var(--font-data)',
+  fontSize: '28px',
+  fontWeight: 700,
+  letterSpacing: '-0.02em',
+  lineHeight: 1,
+  color: 'var(--text-strong)',
+});
+
+export const detailChartPanel = style({
+  padding: '20px 24px',
+  border: '1px solid var(--line)',
+  borderRadius: 'var(--radius-lg)',
+  background: 'var(--panel)',
+  boxShadow: 'var(--shadow-panel)',
+  marginBottom: '20px',
+});
+
+export const detailPanelHead = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  marginBottom: '16px',
+});
+
+export const detailGrid = style({
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr',
+  gap: '16px',
+  '@media': {
+    '(max-width: 1180px)': {
+      gridTemplateColumns: '1fr',
+    },
+  },
+});
+
+export const detailPanel = style({
+  padding: '20px 24px',
+  border: '1px solid var(--line)',
+  borderRadius: 'var(--radius-lg)',
+  background: 'var(--panel)',
+  boxShadow: 'var(--shadow-panel)',
+});
+
+export const detailKvTable = style({
+  display: 'grid',
+  gap: '10px',
+});
+
+export const detailKvRow = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  gap: '12px',
+  padding: '8px 0',
+  borderBottom: '1px solid var(--line)',
+  ':last-child': {
+    borderBottom: 'none',
+  },
+  selectors: {
+    '&:last-child': {
+      borderBottom: 'none',
+    },
+  },
+});
+
+globalStyle(`${detailKvRow} span`, {
+  color: 'var(--muted)',
+  fontSize: '12px',
+  fontFamily: 'var(--font-data)',
+  letterSpacing: '0.04em',
+  flexShrink: 0,
+});
+
+globalStyle(`${detailKvRow} strong`, {
+  color: 'var(--text-strong)',
+  fontSize: '13px',
+  fontFamily: 'var(--font-data)',
+  fontWeight: 600,
+  wordBreak: 'break-word',
+});
+
+export const detailRunTable = style({
+  display: 'grid',
+  gap: '8px',
+});
+
+export const detailRunRow = style({
+  display: 'grid',
+  gridTemplateColumns: '1fr auto auto',
+  alignItems: 'center',
+  gap: '12px',
+  padding: '10px 12px',
+  borderRadius: 'var(--radius)',
+  border: '1px solid var(--line)',
+  background: 'rgba(0, 212, 255, 0.02)',
+  transition: 'border-color 160ms ease, background 160ms ease',
+  ':hover': {
+    borderColor: 'var(--line-strong)',
+    background: 'rgba(0, 212, 255, 0.04)',
+  },
+});
diff --git a/apps/web/src/pages/strategies/StrategyDetailPage.tsx b/apps/web/src/pages/strategies/StrategyDetailPage.tsx
new file mode 100644
index 0000000..c34e086
--- /dev/null
+++ b/apps/web/src/pages/strategies/StrategyDetailPage.tsx
@@ -0,0 +1,227 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import { ChartCanvas, EmptyState } from '../../components/layout/ConsoleChrome.tsx';
+import { copy, useLocale } from '../../modules/console/console.i18n.tsx';
+import { translateRuntimeText } from '../../modules/console/console.utils.ts';
+import { useStrategyDetail } from '../../modules/research/useStrategyDetail.ts';
+import {
+  detailBackRow,
+  detailChartPanel,
+  detailGrid,
+  detailHeader,
+  detailHeaderActions,
+  detailHeaderMeta,
+  detailKvRow,
+  detailKvTable,
+  detailMetricCard,
+  detailMetricLabel,
+  detailMetricValue,
+  detailMetricsGrid,
+  detailPanel,
+  detailPanelHead,
+  detailRunRow,
+  detailRunTable,
+  detailStageBadge,
+  detailStageBadgeVariants,
+} from './StrategyDetailPage.css.ts';
+
+function stageTone(status: string): string {
+  if (status === 'live') return 'live';
+  if (status === 'paper') return 'paper';
+  if (status === 'candidate') return 'candidate';
+  if (status === 'researching') return 'researching';
+  return 'draft';
+}
+
+function fmtPct(value: number | undefined) {
+  if (value === undefined || value === null) return '--';
+  const sign = value >= 0 ? '+' : '';
+  return `${sign}${value.toFixed(2)}%`;
+}
+
+function fmtNum(value: number | undefined, decimals = 2) {
+  if (value === undefined || value === null) return '--';
+  return value.toFixed(decimals);
+}
+
+function fmtDate(value: string | undefined, locale: 'zh' | 'en') {
+  if (!value) return '--';
+  return new Date(value).toLocaleString(locale === 'zh' ? 'zh-CN' : 'en-US');
+}
+
+export function StrategyDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { locale } = useLocale();
+  const { data, loading, error } = useStrategyDetail(id ?? '');
+
+  const strategy = data?.strategy;
+  const latestResult = data?.latestResult;
+  const recentRuns = data?.recentRuns ?? [];
+
+  if (loading) {
+    return (
+      <div style={{ padding: '40px 24px' }}>
+        <div className="eyebrow">{locale === 'zh' ? '加载中...' : 'Loading...'}</div>
+      </div>
+    );
+  }
+
+  if (error || !strategy) {
+    return (
+      <div style={{ padding: '40px 24px' }}>
+        <button type="button" className={detailBackRow} onClick={() => navigate('/strategies')}>
+          ← {locale === 'zh' ? '返回策略工作台' : 'Back to Strategies'}
+        </button>
+        <EmptyState
+          message={error || (locale === 'zh' ? '策略不存在' : 'Strategy not found')}
+        />
+      </div>
+    );
+  }
+
+  const tone = stageTone(strategy.status);
+  const returnPct = latestResult?.annualizedReturnPct ?? strategy.expectedReturnPct;
+  const maxDD = latestResult?.maxDrawdownPct ?? strategy.maxDrawdownPct;
+  const sharpe = latestResult?.sharpe ?? strategy.sharpe;
+  const winRate = latestResult?.winRatePct;
+
+  return (
+    <>
+      <div className={detailHeader}>
+        <button type="button" className={detailBackRow} onClick={() => navigate('/strategies')}>
+          ← {locale === 'zh' ? '策略工作台' : 'Strategies'}
+        </button>
+        <div className={detailHeaderMeta}>
+          <div>
+            <div className="eyebrow">{strategy.family} · {strategy.timeframe} · {strategy.universe}</div>
+            <h1 style={{ margin: '6px 0 0', fontSize: 'clamp(22px, 3vw, 36px)' }}>{strategy.name}</h1>
+          </div>
+          <div className={detailHeaderActions}>
+            <span className={`${detailStageBadge} ${detailStageBadgeVariants[tone as keyof typeof detailStageBadgeVariants]}`}>
+              {strategy.status.toUpperCase()}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className={detailMetricsGrid}>
+        <div className={detailMetricCard}>
+          <div className={detailMetricLabel}>{locale === 'zh' ? '年化收益' : 'Annual Return'}</div>
+          <div className={`${detailMetricValue}${returnPct >= 0 ? ' text-up' : ' text-down'}`}>
+            {fmtPct(returnPct)}
+          </div>
+        </div>
+        <div className={detailMetricCard}>
+          <div className={detailMetricLabel}>{locale === 'zh' ? '最大回撤' : 'Max Drawdown'}</div>
+          <div className={`${detailMetricValue} text-down`}>{fmtPct(-Math.abs(maxDD))}</div>
+        </div>
+        <div className={detailMetricCard}>
+          <div className={detailMetricLabel}>Sharpe</div>
+          <div className={detailMetricValue}>{fmtNum(sharpe)}</div>
+        </div>
+        <div className={detailMetricCard}>
+          <div className={detailMetricLabel}>{locale === 'zh' ? '胜率' : 'Win Rate'}</div>
+          <div className={detailMetricValue}>{winRate !== undefined ? fmtPct(winRate) : '--'}</div>
+        </div>
+      </div>
+
+      <div className={detailChartPanel}>
+        <div className={detailPanelHead}>
+          <div className="panel-title">{locale === 'zh' ? '资产权益曲线' : 'Equity Curve'}</div>
+          <div className="panel-badge badge-muted">CHART</div>
+        </div>
+        <ChartCanvas kind="equity" />
+      </div>
+
+      <div className={detailGrid}>
+        <article className={detailPanel}>
+          <div className={detailPanelHead}>
+            <div className="panel-title">{locale === 'zh' ? '策略参数' : 'Parameters'}</div>
+          </div>
+          <div className={detailKvTable}>
+            <div className={detailKvRow}>
+              <span>{locale === 'zh' ? '策略 ID' : 'Strategy ID'}</span>
+              <strong>{strategy.id}</strong>
+            </div>
+            <div className={detailKvRow}>
+              <span>{locale === 'zh' ? '类型' : 'Family'}</span>
+              <strong>{strategy.family}</strong>
+            </div>
+            <div className={detailKvRow}>
+              <span>{locale === 'zh' ? '周期' : 'Timeframe'}</span>
+              <strong>{strategy.timeframe}</strong>
+            </div>
+            <div className={detailKvRow}>
+              <span>{locale === 'zh' ? '股票池' : 'Universe'}</span>
+              <strong>{strategy.universe}</strong>
+            </div>
+            <div className={detailKvRow}>
+              <span>{locale === 'zh' ? '评分' : 'Score'}</span>
+              <strong>{strategy.score}</strong>
+            </div>
+            {strategy.dataSource && (
+              <div className={detailKvRow}>
+                <span>{locale === 'zh' ? '数据源' : 'Data Source'}</span>
+                <strong>{strategy.dataSource}</strong>
+              </div>
+            )}
+            {strategy.updatedAt && (
+              <div className={detailKvRow}>
+                <span>{locale === 'zh' ? '最近更新' : 'Last Updated'}</span>
+                <strong>{fmtDate(strategy.updatedAt, locale)}</strong>
+              </div>
+            )}
+            {strategy.summary && (
+              <div className={detailKvRow} style={{ alignItems: 'flex-start' }}>
+                <span>{locale === 'zh' ? '简介' : 'Summary'}</span>
+                <strong style={{ textAlign: 'right' }}>
+                  {translateRuntimeText(locale, strategy.summary)}
+                </strong>
+              </div>
+            )}
+          </div>
+        </article>
+
+        <article className={detailPanel}>
+          <div className={detailPanelHead}>
+            <div className="panel-title">{locale === 'zh' ? '最近回测' : 'Recent Backtests'}</div>
+            <div className="panel-badge badge-muted">{recentRuns.length}</div>
+          </div>
+          {recentRuns.length === 0 ? (
+            <EmptyState message={locale === 'zh' ? '暂无回测记录' : 'No backtest runs yet'} />
+          ) : (
+            <div className={detailRunTable}>
+              {recentRuns.slice(0, 8).map((run) => (
+                <div className={detailRunRow} key={run.id}>
+                  <div>
+                    <div style={{ fontSize: '12px', color: 'var(--text-strong)', fontFamily: 'var(--font-data)' }}>
+                      {run.windowLabel}
+                    </div>
+                    <div style={{ fontSize: '11px', color: 'var(--muted)', marginTop: '2px' }}>
+                      {fmtDate(run.startedAt, locale)}
+                    </div>
+                  </div>
+                  <div style={{ textAlign: 'right' }}>
+                    <div className={`${run.annualizedReturnPct >= 0 ? 'text-up' : 'text-down'}`}
+                      style={{ fontSize: '13px', fontFamily: 'var(--font-data)', fontWeight: 700 }}>
+                      {fmtPct(run.annualizedReturnPct)}
+                    </div>
+                    <div style={{ fontSize: '11px', color: 'var(--muted)' }}>
+                      Sharpe {fmtNum(run.sharpe)}
+                    </div>
+                  </div>
+                  <span
+                    className={`signal-chip signal-${run.status === 'completed' ? 'buy' : run.status === 'failed' ? 'sell' : 'hold'}`}
+                    style={{ fontSize: '10px' }}
+                  >
+                    {run.status}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </article>
+      </div>
+    </>
+  );
+}

From 791575d33a98698bbbb82e98bbaf14e5367f6136 Mon Sep 17 00:00:00 2001
From: Roger Deng <13251150+rogerdigital@users.noreply.github.com>
Date: Tue, 14 Apr 2026 12:39:16 +0800
Subject: [PATCH 3/4] feat(trading): add trading terminal page with watchlist,
 equity chart, order panel and blotter

---
 apps/web/src/modules/console/console.i18n.tsx |  11 +
 .../src/modules/console/console.routes.tsx    |  11 +
 apps/web/src/pages/trading/TradingPage.css.ts | 463 +++++++++++++++++
 apps/web/src/pages/trading/TradingPage.tsx    | 475 ++++++++++++++++++
 4 files changed, 960 insertions(+)
 create mode 100644 apps/web/src/pages/trading/TradingPage.css.ts
 create mode 100644 apps/web/src/pages/trading/TradingPage.tsx

diff --git a/apps/web/src/modules/console/console.i18n.tsx b/apps/web/src/modules/console/console.i18n.tsx
index 09e9ba3..65c9bc6 100644
--- a/apps/web/src/modules/console/console.i18n.tsx
+++ b/apps/web/src/modules/console/console.i18n.tsx
@@ -16,6 +16,7 @@ export const copy = {
     nav: {
       dashboard: '仪表盘',
       market: '市场监控',
+      trading: '交易终端',
       strategies: '策略工作台',
       'strategy-detail': '策略详情',
       backtest: '回测中心',
@@ -134,6 +135,10 @@ export const copy = {
         '市场监控',
         '跟踪股票池价格、强弱排序和行情接入状态，为策略与 Agent 提供市场上下文。',
       ],
+      trading: [
+        '交易终端',
+        '在一个界面内完成行情监控、图表分析和下单操作。',
+      ],
       strategies: [
         '策略工作台',
         '查看策略候选、信号分布、股票池评分和研究视图，形成可执行的策略工作流。',
@@ -198,6 +203,7 @@ export const copy = {
     nav: {
       dashboard: 'Dashboard',
       market: 'Market',
+      trading: 'Trading',
       strategies: 'Strategies',
       'strategy-detail': 'Strategy Detail',
       backtest: 'Backtest',
@@ -316,6 +322,10 @@ export const copy = {
         'Market Monitor',
         'Track universe pricing, relative strength, and market data connectivity for downstream analysis.',
       ],
+      trading: [
+        'Trading Terminal',
+        'Monitor the market, read charts, and place orders from one unified trading interface.',
+      ],
       strategies: [
         'Strategy Workspace',
         'Review strategy candidates, signal mix, universe scores, and research context in one workspace.',
@@ -357,6 +367,7 @@ export const copy = {
     desk: {
       dashboard: 'Command Deck',
       market: 'Market Desk',
+      trading: 'Trading Desk',
       strategies: 'Strategy Desk',
       backtest: 'Research Desk',
       risk: 'Risk Desk',
diff --git a/apps/web/src/modules/console/console.routes.tsx b/apps/web/src/modules/console/console.routes.tsx
index 7792322..783df15 100644
--- a/apps/web/src/modules/console/console.routes.tsx
+++ b/apps/web/src/modules/console/console.routes.tsx
@@ -24,10 +24,14 @@ const StrategyDetailPage = lazy(() =>
   }))
 );
 const RiskPage = lazy(() => import('../../pages/risk/RiskPage.tsx'));
+const TradingPage = lazy(() =>
+  import('../../pages/trading/TradingPage.tsx').then((m) => ({ default: m.TradingPage }))
+);
 
 type ConsoleNavKey =
   | 'dashboard'
   | 'market'
+  | 'trading'
   | 'strategies'
   | 'strategy-detail'
   | 'backtest'
@@ -72,6 +76,13 @@ export const CONSOLE_ROUTES: ConsoleRouteDefinition[] = [
     includeInSidebar: true,
     element: renderLazyRoute(<MarketPage />),
   },
+  {
+    id: 'trading',
+    pageKey: 'trading',
+    path: '/trading',
+    includeInSidebar: true,
+    element: renderLazyRoute(<TradingPage />),
+  },
   {
     id: 'strategies',
     pageKey: 'strategies',
diff --git a/apps/web/src/pages/trading/TradingPage.css.ts b/apps/web/src/pages/trading/TradingPage.css.ts
new file mode 100644
index 0000000..3e89a08
--- /dev/null
+++ b/apps/web/src/pages/trading/TradingPage.css.ts
@@ -0,0 +1,463 @@
+import { globalStyle, style, styleVariants } from '@vanilla-extract/css';
+
+/* ── TRADING PAGE SHELL ─────────────────────────────────── */
+
+export const tradingShell = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '16px',
+});
+
+export const tradingHeader = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: '16px',
+  padding: '16px 20px',
+  border: '1px solid var(--line)',
+  borderRadius: 'var(--radius-xl)',
+  background:
+    'linear-gradient(140deg, rgba(8, 18, 40, 0.97) 0%, rgba(5, 10, 26, 0.98) 60%, rgba(8, 5, 28, 0.97) 100%)',
+  boxShadow: 'var(--shadow-panel)',
+  flexWrap: 'wrap',
+});
+
+export const tradingHeaderSymbol = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '14px',
+});
+
+export const tradingHeaderPrice = style({
+  fontFamily: 'var(--font-data)',
+  fontSize: '28px',
+  fontWeight: 700,
+  letterSpacing: '-0.02em',
+  color: 'var(--text-strong)',
+  lineHeight: 1,
+});
+
+export const tradingHeaderChange = styleVariants({
+  up: {
+    fontFamily: 'var(--font-data)',
+    fontSize: '14px',
+    fontWeight: 600,
+    color: 'var(--buy)',
+  },
+  down: {
+    fontFamily: 'var(--font-data)',
+    fontSize: '14px',
+    fontWeight: 600,
+    color: 'var(--sell)',
+  },
+  neutral: {
+    fontFamily: 'var(--font-data)',
+    fontSize: '14px',
+    fontWeight: 600,
+    color: 'var(--muted)',
+  },
+});
+
+export const tradingHeaderStats = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '24px',
+  flexWrap: 'wrap',
+});
+
+export const tradingHeaderStat = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '3px',
+});
+
+globalStyle(`${tradingHeaderStat} span`, {
+  color: 'var(--muted)',
+  fontSize: '10px',
+  fontFamily: 'var(--font-data)',
+  textTransform: 'uppercase',
+  letterSpacing: '0.1em',
+});
+
+globalStyle(`${tradingHeaderStat} strong`, {
+  color: 'var(--text-strong)',
+  fontSize: '13px',
+  fontFamily: 'var(--font-data)',
+  fontWeight: 600,
+});
+
+/* ── THREE-COLUMN GRID ──────────────────────────────────── */
+
+export const tradingGrid = style({
+  display: 'grid',
+  gridTemplateColumns: '220px 1fr 280px',
+  gap: '12px',
+  minHeight: '520px',
+  '@media': {
+    '(max-width: 1180px)': {
+      gridTemplateColumns: '1fr 280px',
+    },
+    '(max-width: 900px)': {
+      gridTemplateColumns: '1fr',
+    },
+  },
+});
+
+/* ── WATCHLIST PANEL ────────────────────────────────────── */
+
+export const watchlistPanel = style({
+  border: '1px solid var(--line)',
+  borderRadius: 'var(--radius-lg)',
+  background: 'var(--panel)',
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden',
+  '@media': {
+    '(max-width: 1180px)': {
+      display: 'none',
+    },
+  },
+});
+
+export const watchlistHead = style({
+  padding: '12px 14px',
+  borderBottom: '1px solid var(--line)',
+  fontSize: '10px',
+  fontFamily: 'var(--font-data)',
+  textTransform: 'uppercase',
+  letterSpacing: '0.12em',
+  color: 'var(--muted)',
+});
+
+export const watchlistList = style({
+  flex: 1,
+  overflowY: 'auto',
+});
+
+export const watchlistItem = style({
+  display: 'grid',
+  gridTemplateColumns: '1fr auto',
+  alignItems: 'center',
+  gap: '8px',
+  padding: '10px 14px',
+  borderBottom: '1px solid var(--line)',
+  cursor: 'pointer',
+  transition: 'background 150ms ease',
+  ':hover': {
+    background: 'rgba(0, 212, 255, 0.04)',
+  },
+  ':last-child': {
+    borderBottom: 'none',
+  },
+});
+
+export const watchlistItemActive = style({
+  background: 'rgba(0, 212, 255, 0.07)',
+  borderLeft: '2px solid var(--accent-live)',
+});
+
+globalStyle(`${watchlistItem} .wl-symbol`, {
+  fontFamily: 'var(--font-data)',
+  fontSize: '13px',
+  fontWeight: 700,
+  color: 'var(--text-strong)',
+});
+
+globalStyle(`${watchlistItem} .wl-name`, {
+  fontFamily: 'var(--font-data)',
+  fontSize: '11px',
+  color: 'var(--muted)',
+  marginTop: '2px',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: '100px',
+});
+
+globalStyle(`${watchlistItem} .wl-price`, {
+  fontFamily: 'var(--font-data)',
+  fontSize: '13px',
+  fontWeight: 600,
+  color: 'var(--text-strong)',
+  textAlign: 'right',
+});
+
+globalStyle(`${watchlistItem} .wl-change`, {
+  fontFamily: 'var(--font-data)',
+  fontSize: '11px',
+  textAlign: 'right',
+  marginTop: '2px',
+});
+
+/* ── CHART PANEL ────────────────────────────────────────── */
+
+export const chartPanel = style({
+  border: '1px solid var(--line)',
+  borderRadius: 'var(--radius-lg)',
+  background: 'var(--panel)',
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden',
+});
+
+export const chartPanelHead = style({
+  padding: '12px 16px',
+  borderBottom: '1px solid var(--line)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: '12px',
+  flexShrink: 0,
+});
+
+export const chartToolbar = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '6px',
+});
+
+export const chartTimeframeBtn = style({
+  padding: '4px 10px',
+  borderRadius: 'var(--radius-sm)',
+  border: '1px solid var(--line)',
+  background: 'transparent',
+  color: 'var(--muted)',
+  fontSize: '11px',
+  fontFamily: 'var(--font-data)',
+  fontWeight: 600,
+  cursor: 'pointer',
+  transition: 'all 140ms ease',
+  ':hover': {
+    borderColor: 'var(--line-strong)',
+    color: 'var(--text)',
+  },
+});
+
+export const chartTimeframeBtnActive = style({
+  borderColor: 'rgba(0, 212, 255, 0.4)',
+  background: 'rgba(0, 212, 255, 0.08)',
+  color: 'var(--accent-live)',
+});
+
+export const chartBody = style({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '16px',
+  gap: '12px',
+  minHeight: '320px',
+});
+
+export const chartSignalStrip = style({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(3, 1fr)',
+  gap: '10px',
+  flexShrink: 0,
+});
+
+export const chartSignalCard = style({
+  padding: '12px 14px',
+  border: '1px solid var(--line)',
+  borderRadius: 'var(--radius)',
+  background: 'rgba(0, 212, 255, 0.02)',
+  textAlign: 'center',
+});
+
+globalStyle(`${chartSignalCard} .sig-label`, {
+  fontSize: '10px',
+  fontFamily: 'var(--font-data)',
+  textTransform: 'uppercase',
+  letterSpacing: '0.1em',
+  color: 'var(--muted)',
+  marginBottom: '6px',
+});
+
+globalStyle(`${chartSignalCard} .sig-value`, {
+  fontFamily: 'var(--font-data)',
+  fontSize: '20px',
+  fontWeight: 700,
+  color: 'var(--text-strong)',
+});
+
+/* ── TRADE PANEL ────────────────────────────────────────── */
+
+export const tradePanel = style({
+  border: '1px solid var(--line)',
+  borderRadius: 'var(--radius-lg)',
+  background: 'var(--panel)',
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '16px',
+  gap: '14px',
+  overflow: 'auto',
+});
+
+export const tradePanelTitle = style({
+  fontSize: '11px',
+  fontFamily: 'var(--font-data)',
+  fontWeight: 700,
+  textTransform: 'uppercase',
+  letterSpacing: '0.12em',
+  color: 'var(--muted)',
+  paddingBottom: '12px',
+  borderBottom: '1px solid var(--line)',
+});
+
+export const orderTypeTabs = style({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(3, 1fr)',
+  padding: '3px',
+  background: 'rgba(2, 6, 18, 0.8)',
+  borderRadius: 'var(--radius)',
+  border: '1px solid var(--line)',
+  gap: '3px',
+});
+
+export const orderTypeTab = style({
+  padding: '7px 4px',
+  textAlign: 'center',
+  fontSize: '11px',
+  fontFamily: 'var(--font-data)',
+  fontWeight: 700,
+  textTransform: 'uppercase',
+  letterSpacing: '0.08em',
+  borderRadius: 'calc(var(--radius) - 1px)',
+  color: 'var(--muted)',
+  cursor: 'pointer',
+  border: '1px solid transparent',
+  background: 'transparent',
+  transition: 'all 140ms ease',
+  ':hover': {
+    color: 'var(--text)',
+    background: 'rgba(0, 212, 255, 0.05)',
+  },
+});
+
+export const orderTypeTabActive = style({
+  borderColor: 'rgba(0, 212, 255, 0.28)',
+  background: 'rgba(0, 212, 255, 0.1)',
+  color: 'var(--text-strong)',
+});
+
+export const tradeInputGroup = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '6px',
+});
+
+export const tradeInputLabel = style({
+  fontSize: '10px',
+  fontFamily: 'var(--font-data)',
+  textTransform: 'uppercase',
+  letterSpacing: '0.1em',
+  color: 'var(--muted)',
+});
+
+export const tradeInput = style({
+  width: '100%',
+  padding: '10px 12px',
+  background: 'rgba(2, 6, 18, 0.8)',
+  border: '1px solid var(--line)',
+  borderRadius: 'var(--radius)',
+  color: 'var(--text-strong)',
+  fontFamily: 'var(--font-data)',
+  fontSize: '14px',
+  fontWeight: 600,
+  outline: 'none',
+  transition: 'border-color 150ms ease',
+  boxSizing: 'border-box',
+  ':focus': {
+    borderColor: 'var(--accent-live)',
+    boxShadow: '0 0 0 2px rgba(0, 212, 255, 0.12)',
+  },
+});
+
+export const tradeBuyBtn = style({
+  width: '100%',
+  padding: '14px',
+  background: 'var(--buy)',
+  border: 'none',
+  borderRadius: 'var(--radius)',
+  color: '#01030c',
+  fontFamily: 'var(--font-display)',
+  fontSize: '15px',
+  fontWeight: 700,
+  textTransform: 'uppercase',
+  letterSpacing: '1px',
+  cursor: 'pointer',
+  transition: 'all 150ms ease',
+  ':hover': {
+    background: '#0dd889',
+    boxShadow: '0 0 20px rgba(0, 232, 157, 0.4)',
+  },
+  ':active': {
+    transform: 'scale(0.98)',
+  },
+});
+
+export const tradeSellBtn = style({
+  width: '100%',
+  padding: '14px',
+  background: 'var(--sell)',
+  border: 'none',
+  borderRadius: 'var(--radius)',
+  color: '#fff',
+  fontFamily: 'var(--font-display)',
+  fontSize: '15px',
+  fontWeight: 700,
+  textTransform: 'uppercase',
+  letterSpacing: '1px',
+  cursor: 'pointer',
+  transition: 'all 150ms ease',
+  ':hover': {
+    background: '#f75c6e',
+    boxShadow: '0 0 20px rgba(255, 51, 88, 0.4)',
+  },
+  ':active': {
+    transform: 'scale(0.98)',
+  },
+});
+
+export const tradeBtnRow = style({
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr',
+  gap: '8px',
+});
+
+export const tradeInfoRow = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '8px 0',
+  borderBottom: '1px solid var(--line)',
+  ':last-child': {
+    borderBottom: 'none',
+  },
+  selectors: {
+    '&:last-child': {
+      borderBottom: 'none',
+    },
+  },
+});
+
+globalStyle(`${tradeInfoRow} span`, {
+  fontSize: '11px',
+  fontFamily: 'var(--font-data)',
+  color: 'var(--muted)',
+});
+
+globalStyle(`${tradeInfoRow} strong`, {
+  fontSize: '12px',
+  fontFamily: 'var(--font-data)',
+  fontWeight: 600,
+  color: 'var(--text-strong)',
+});
+
+/* ── BOTTOM BLOTTER ─────────────────────────────────────── */
+
+export const blotterPanel = style({
+  border: '1px solid var(--line)',
+  borderRadius: 'var(--radius-lg)',
+  background: 'var(--panel)',
+  overflow: 'hidden',
+});
diff --git a/apps/web/src/pages/trading/TradingPage.tsx b/apps/web/src/pages/trading/TradingPage.tsx
new file mode 100644
index 0000000..0e13915
--- /dev/null
+++ b/apps/web/src/pages/trading/TradingPage.tsx
@@ -0,0 +1,475 @@
+import { useState } from 'react';
+import { ChartCanvas, EmptyState, TabPanel } from '../../components/layout/ConsoleChrome.tsx';
+import { copy, useLocale } from '../../modules/console/console.i18n.tsx';
+import {
+  fmtCurrency,
+  fmtDateTime,
+  fmtPct,
+  translateOrderStatus,
+  translateSide,
+  translateSignal,
+} from '../../modules/console/console.utils.ts';
+import { useTradingSystem } from '../../store/trading-system/TradingSystemProvider.tsx';
+import {
+  blotterPanel,
+  chartBody,
+  chartPanel,
+  chartPanelHead,
+  chartSignalCard,
+  chartSignalStrip,
+  chartTimeframeBtn,
+  chartTimeframeBtnActive,
+  chartToolbar,
+  orderTypeTab,
+  orderTypeTabActive,
+  orderTypeTabs,
+  tradeBtnRow,
+  tradeBuyBtn,
+  tradeInfoRow,
+  tradeInput,
+  tradeInputGroup,
+  tradeInputLabel,
+  tradePanel,
+  tradePanelTitle,
+  tradeSellBtn,
+  tradingGrid,
+  tradingHeader,
+  tradingHeaderChange,
+  tradingHeaderPrice,
+  tradingHeaderStat,
+  tradingHeaderStats,
+  tradingHeaderSymbol,
+  tradingShell,
+  watchlistHead,
+  watchlistItem,
+  watchlistItemActive,
+  watchlistList,
+  watchlistPanel,
+} from './TradingPage.css.ts';
+
+const TIMEFRAMES = ['1m', '5m', '15m', '1h', '4h', '1D'] as const;
+type Timeframe = (typeof TIMEFRAMES)[number];
+
+type OrderType = 'limit' | 'market' | 'stop';
+
+export function TradingPage() {
+  const { state } = useTradingSystem();
+  const { locale } = useLocale();
+
+  const [selectedSymbol, setSelectedSymbol] = useState<string>(
+    () => state.stockStates[0]?.symbol ?? 'SPY'
+  );
+  const [timeframe, setTimeframe] = useState<Timeframe>('1D');
+  const [orderType, setOrderType] = useState<OrderType>('limit');
+  const [limitPrice, setLimitPrice] = useState('');
+  const [qty, setQty] = useState('');
+
+  const selectedStock = state.stockStates.find((s) => s.symbol === selectedSymbol);
+  const priceChange = selectedStock
+    ? ((selectedStock.price - selectedStock.prevClose) / selectedStock.prevClose) * 100
+    : 0;
+  const changeTone = priceChange > 0 ? 'up' : priceChange < 0 ? 'down' : 'neutral';
+
+  const buyCount = state.stockStates.filter((s) => s.signal === 'BUY').length;
+  const holdCount = state.stockStates.filter((s) => s.signal === 'HOLD').length;
+  const sellCount = state.stockStates.filter((s) => s.signal === 'SELL').length;
+
+  const allOrders = [
+    ...state.accounts.live.orders.map((o) => ({ ...o, account: 'live' as const })),
+    ...state.accounts.paper.orders.map((o) => ({ ...o, account: 'paper' as const })),
+  ]
+    .slice()
+    .sort(
+      (a, b) =>
+        new Date(b.updatedAt || b.submittedAt || 0).getTime() -
+        new Date(a.updatedAt || a.submittedAt || 0).getTime()
+    )
+    .slice(0, 20);
+
+  const allPositions = [
+    ...Object.entries(state.accounts.live.holdings).map(([symbol, h]) => ({
+      symbol,
+      ...h,
+      account: 'live' as const,
+    })),
+    ...Object.entries(state.accounts.paper.holdings).map(([symbol, h]) => ({
+      symbol,
+      ...h,
+      account: 'paper' as const,
+    })),
+  ];
+
+  const orderTypeLabel: Record<OrderType, string> = {
+    limit: locale === 'zh' ? '限价' : 'LIMIT',
+    market: locale === 'zh' ? '市价' : 'MARKET',
+    stop: locale === 'zh' ? '止损' : 'STOP',
+  };
+
+  return (
+    <div className={tradingShell}>
+      {/* Header bar */}
+      <div className={tradingHeader}>
+        <div className={tradingHeaderSymbol}>
+          <div>
+            <div className="eyebrow">{locale === 'zh' ? '交易终端' : 'Trading Terminal'}</div>
+            <div style={{ display: 'flex', alignItems: 'baseline', gap: '10px', marginTop: '4px' }}>
+              <span
+                style={{
+                  fontFamily: 'var(--font-data)',
+                  fontSize: '20px',
+                  fontWeight: 700,
+                  color: 'var(--accent-live)',
+                  letterSpacing: '0.04em',
+                }}
+              >
+                {selectedSymbol}
+              </span>
+              <span className={tradingHeaderPrice}>
+                {selectedStock ? selectedStock.price.toFixed(2) : '--'}
+              </span>
+              <span className={tradingHeaderChange[changeTone]}>
+                {priceChange >= 0 ? '+' : ''}
+                {fmtPct(priceChange)}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div className={tradingHeaderStats}>
+          <div className={tradingHeaderStat}>
+            <span>{locale === 'zh' ? '今日信号' : 'Signals'}</span>
+            <strong>
+              {buyCount}B / {holdCount}H / {sellCount}S
+            </strong>
+          </div>
+          <div className={tradingHeaderStat}>
+            <span>{locale === 'zh' ? '评分' : 'Score'}</span>
+            <strong>{selectedStock ? selectedStock.score.toFixed(1) : '--'}</strong>
+          </div>
+          <div className={tradingHeaderStat}>
+            <span>{locale === 'zh' ? '当前信号' : 'Signal'}</span>
+            <strong
+              style={{
+                color:
+                  selectedStock?.signal === 'BUY'
+                    ? 'var(--buy)'
+                    : selectedStock?.signal === 'SELL'
+                      ? 'var(--sell)'
+                      : 'var(--hold)',
+              }}
+            >
+              {selectedStock ? translateSignal(locale, selectedStock.signal) : '--'}
+            </strong>
+          </div>
+          <div className={tradingHeaderStat}>
+            <span>{locale === 'zh' ? '模拟 NAV' : 'Paper NAV'}</span>
+            <strong>{fmtCurrency(state.accounts.paper.nav)}</strong>
+          </div>
+          <div className={tradingHeaderStat}>
+            <span>{locale === 'zh' ? '实盘 NAV' : 'Live NAV'}</span>
+            <strong>{fmtCurrency(state.accounts.live.nav)}</strong>
+          </div>
+        </div>
+      </div>
+
+      {/* Three-column grid */}
+      <div className={tradingGrid}>
+        {/* Watchlist */}
+        <aside className={watchlistPanel}>
+          <div className={watchlistHead}>{locale === 'zh' ? '监控列表' : 'Watchlist'}</div>
+          <div className={watchlistList}>
+            {state.stockStates.length === 0 ? (
+              <EmptyState message={locale === 'zh' ? '无标的' : 'No symbols'} />
+            ) : (
+              state.stockStates.map((stock) => {
+                const chg = ((stock.price - stock.prevClose) / stock.prevClose) * 100;
+                const isActive = stock.symbol === selectedSymbol;
+                return (
+                  <div
+                    key={stock.symbol}
+                    className={`${watchlistItem}${isActive ? ` ${watchlistItemActive}` : ''}`}
+                    onClick={() => setSelectedSymbol(stock.symbol)}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => e.key === 'Enter' && setSelectedSymbol(stock.symbol)}
+                  >
+                    <div>
+                      <div className="wl-symbol">{stock.symbol}</div>
+                      <div className="wl-name">{stock.name}</div>
+                    </div>
+                    <div>
+                      <div className="wl-price">{stock.price.toFixed(2)}</div>
+                      <div
+                        className="wl-change"
+                        style={{ color: chg >= 0 ? 'var(--buy)' : 'var(--sell)' }}
+                      >
+                        {chg >= 0 ? '+' : ''}
+                        {chg.toFixed(2)}%
+                      </div>
+                    </div>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </aside>
+
+        {/* Chart */}
+        <div className={chartPanel}>
+          <div className={chartPanelHead}>
+            <div
+              style={{
+                fontFamily: 'var(--font-data)',
+                fontSize: '13px',
+                fontWeight: 700,
+                color: 'var(--text-strong)',
+              }}
+            >
+              {selectedSymbol}
+              <span style={{ color: 'var(--muted)', marginLeft: '8px', fontWeight: 400 }}>
+                {locale === 'zh' ? '权益曲线' : 'Equity Curve'}
+              </span>
+            </div>
+            <div className={chartToolbar}>
+              {TIMEFRAMES.map((tf) => (
+                <button
+                  key={tf}
+                  type="button"
+                  className={`${chartTimeframeBtn}${tf === timeframe ? ` ${chartTimeframeBtnActive}` : ''}`}
+                  onClick={() => setTimeframe(tf)}
+                >
+                  {tf}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className={chartBody}>
+            <ChartCanvas kind="equity" />
+
+            <div className={chartSignalStrip}>
+              <div className={chartSignalCard}>
+                <div className="sig-label">BUY</div>
+                <div className="sig-value" style={{ color: 'var(--buy)' }}>
+                  {buyCount}
+                </div>
+              </div>
+              <div className={chartSignalCard}>
+                <div className="sig-label">HOLD</div>
+                <div className="sig-value" style={{ color: 'var(--hold)' }}>
+                  {holdCount}
+                </div>
+              </div>
+              <div className={chartSignalCard}>
+                <div className="sig-label">SELL</div>
+                <div className="sig-value" style={{ color: 'var(--sell)' }}>
+                  {sellCount}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Trade Panel */}
+        <div className={tradePanel}>
+          <div className={tradePanelTitle}>{locale === 'zh' ? '下单' : 'Place Order'}</div>
+
+          <div className={orderTypeTabs}>
+            {(['limit', 'market', 'stop'] as OrderType[]).map((t) => (
+              <button
+                key={t}
+                type="button"
+                className={`${orderTypeTab}${t === orderType ? ` ${orderTypeTabActive}` : ''}`}
+                onClick={() => setOrderType(t)}
+              >
+                {orderTypeLabel[t]}
+              </button>
+            ))}
+          </div>
+
+          {orderType === 'limit' || orderType === 'stop' ? (
+            <div className={tradeInputGroup}>
+              <div className={tradeInputLabel}>
+                {orderType === 'stop'
+                  ? locale === 'zh'
+                    ? '止损价'
+                    : 'Stop Price'
+                  : locale === 'zh'
+                    ? '限价'
+                    : 'Limit Price'}
+              </div>
+              <input
+                type="number"
+                className={tradeInput}
+                placeholder={selectedStock ? selectedStock.price.toFixed(2) : '0.00'}
+                value={limitPrice}
+                onChange={(e) => setLimitPrice(e.target.value)}
+              />
+            </div>
+          ) : null}
+
+          <div className={tradeInputGroup}>
+            <div className={tradeInputLabel}>{locale === 'zh' ? '数量 (股)' : 'Quantity'}</div>
+            <input
+              type="number"
+              className={tradeInput}
+              placeholder="100"
+              value={qty}
+              onChange={(e) => setQty(e.target.value)}
+            />
+          </div>
+
+          <div className={tradeBtnRow}>
+            <button type="button" className={tradeBuyBtn}>
+              {locale === 'zh' ? '买入' : 'BUY'}
+            </button>
+            <button type="button" className={tradeSellBtn}>
+              {locale === 'zh' ? '卖出' : 'SELL'}
+            </button>
+          </div>
+
+          <div style={{ display: 'grid', gap: '0' }}>
+            <div className={tradeInfoRow}>
+              <span>{locale === 'zh' ? '标的' : 'Symbol'}</span>
+              <strong style={{ color: 'var(--accent-live)' }}>{selectedSymbol}</strong>
+            </div>
+            <div className={tradeInfoRow}>
+              <span>{locale === 'zh' ? '现价' : 'Last Price'}</span>
+              <strong>{selectedStock ? selectedStock.price.toFixed(2) : '--'}</strong>
+            </div>
+            <div className={tradeInfoRow}>
+              <span>{locale === 'zh' ? '信号' : 'Signal'}</span>
+              <strong
+                style={{
+                  color:
+                    selectedStock?.signal === 'BUY'
+                      ? 'var(--buy)'
+                      : selectedStock?.signal === 'SELL'
+                        ? 'var(--sell)'
+                        : 'var(--hold)',
+                }}
+              >
+                {selectedStock ? translateSignal(locale, selectedStock.signal) : '--'}
+              </strong>
+            </div>
+            <div className={tradeInfoRow}>
+              <span>{locale === 'zh' ? '评分' : 'Score'}</span>
+              <strong>{selectedStock ? selectedStock.score.toFixed(1) : '--'}</strong>
+            </div>
+            <div className={tradeInfoRow}>
+              <span>{locale === 'zh' ? '模拟现金' : 'Paper Cash'}</span>
+              <strong>{fmtCurrency(state.accounts.paper.cash)}</strong>
+            </div>
+          </div>
+
+          <div
+            style={{
+              padding: '10px',
+              borderRadius: 'var(--radius)',
+              border: '1px solid var(--line)',
+              background: 'rgba(255, 183, 0, 0.04)',
+              fontSize: '11px',
+              color: 'var(--muted)',
+              lineHeight: 1.5,
+            }}
+          >
+            {locale === 'zh'
+              ? '⚠ 下单功能为界面演示，实际委托请通过 Agent 或执行模块处理。'
+              : '⚠ Order placement is UI-only. Use the Agent or Execution module to submit real orders.'}
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom blotter */}
+      <div className={blotterPanel}>
+        <TabPanel
+          tabs={[
+            {
+              key: 'positions',
+              label: locale === 'zh' ? `持仓 (${allPositions.length})` : `Positions (${allPositions.length})`,
+              content: (
+                <div className="panel-body panel-body-sm">
+                  {allPositions.length === 0 ? (
+                    <EmptyState message={copy[locale].terms.noPositions} />
+                  ) : (
+                    <div className="focus-list focus-list-terminal">
+                      {allPositions.map((pos, i) => (
+                        <div className="focus-row" key={`${pos.symbol}-${i}`}>
+                          <div className="symbol-cell">
+                            <strong>{pos.symbol}</strong>
+                            <span
+                              style={{
+                                color:
+                                  pos.account === 'live' ? 'var(--buy)' : 'var(--accent-live)',
+                              }}
+                            >
+                              {pos.account === 'live'
+                                ? copy[locale].labels.live
+                                : copy[locale].labels.paper}
+                            </span>
+                          </div>
+                          <div className="focus-metric">
+                            <span>{copy[locale].terms.qty}</span>
+                            <strong>{pos.shares}</strong>
+                          </div>
+                          <div className="focus-metric">
+                            <span>{copy[locale].terms.avgCost}</span>
+                            <strong>{pos.avgCost.toFixed(2)}</strong>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ),
+            },
+            {
+              key: 'orders',
+              label: locale === 'zh' ? `委托 (${allOrders.length})` : `Orders (${allOrders.length})`,
+              content: (
+                <div className="panel-body panel-body-sm">
+                  {allOrders.length === 0 ? (
+                    <EmptyState message={copy[locale].terms.noOrders} />
+                  ) : (
+                    <div className="focus-list focus-list-terminal">
+                      {allOrders.map((order, i) => (
+                        <div className="focus-row" key={`${order.id ?? order.symbol}-${i}`}>
+                          <div className="symbol-cell">
+                            <strong>{order.symbol}</strong>
+                            <span
+                              style={{
+                                color:
+                                  order.account === 'live' ? 'var(--buy)' : 'var(--accent-live)',
+                              }}
+                            >
+                              {order.account === 'live'
+                                ? copy[locale].labels.live
+                                : copy[locale].labels.paper}
+                            </span>
+                          </div>
+                          <div className="focus-metric">
+                            <span className={order.side === 'BUY' ? 'text-up' : 'text-down'}>
+                              {translateSide(locale, order.side)}
+                            </span>
+                            <strong>{order.qty}</strong>
+                          </div>
+                          <div className="focus-metric">
+                            <span>{copy[locale].labels.status}</span>
+                            <strong>{translateOrderStatus(locale, order.status)}</strong>
+                          </div>
+                          <span className="table-note">
+                            {fmtDateTime(order.updatedAt || order.submittedAt, locale)}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ),
+            },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}

From d2ce54c77418327860fd016664bcda09d0e3822c Mon Sep 17 00:00:00 2001
From: Roger Deng <13251150+rogerdigital@users.noreply.github.com>
Date: Tue, 14 Apr 2026 12:49:50 +0800
Subject: [PATCH 4/4] style: fix biome formatting violations

---
 .../src/components/layout/ConsoleChrome.tsx   | 30 ++++++++++++++---
 apps/web/src/modules/console/console.i18n.tsx |  5 +--
 .../pages/strategies/StrategyDetailPage.tsx   | 32 +++++++++++++------
 apps/web/src/pages/trading/TradingPage.tsx    | 11 ++++---
 4 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/components/layout/ConsoleChrome.tsx b/apps/web/src/components/layout/ConsoleChrome.tsx
index 04be061..a41a2e8 100644
--- a/apps/web/src/components/layout/ConsoleChrome.tsx
+++ b/apps/web/src/components/layout/ConsoleChrome.tsx
@@ -283,7 +283,10 @@ function Sidebar({ collapsed, onToggle }: { collapsed: boolean; onToggle: () =>
   const routes = listSidebarRoutes();
 
   return (
-    <aside className={`${sidebar}${collapsed ? ` ${sidebarCollapsed}` : ''}`} style={{ position: 'relative' }}>
+    <aside
+      className={`${sidebar}${collapsed ? ` ${sidebarCollapsed}` : ''}`}
+      style={{ position: 'relative' }}
+    >
       <button
         type="button"
         className={sidebarToggle}
@@ -305,7 +308,15 @@ function Sidebar({ collapsed, onToggle }: { collapsed: boolean; onToggle: () =>
       )}
 
       {collapsed && (
-        <div style={{ marginBottom: '24px', paddingBottom: '18px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'center' }}>
+        <div
+          style={{
+            marginBottom: '24px',
+            paddingBottom: '18px',
+            borderBottom: '1px solid var(--line)',
+            display: 'flex',
+            justifyContent: 'center',
+          }}
+        >
           <div className={brandMark} />
         </div>
       )}
@@ -317,9 +328,20 @@ function Sidebar({ collapsed, onToggle }: { collapsed: boolean; onToggle: () =>
             <NavLink
               key={route.path}
               to={route.path}
-              className={({ isActive }) => `nav-link${isActive ? ' active' : ''}${collapsed ? ' nav-link-icon-only' : ''}`}
+              className={({ isActive }) =>
+                `nav-link${isActive ? ' active' : ''}${collapsed ? ' nav-link-icon-only' : ''}`
+              }
               title={collapsed ? copy[locale].nav[route.id] : undefined}
-              style={collapsed ? { padding: '10px', textAlign: 'center', fontSize: '10px', letterSpacing: '0.05em' } : undefined}
+              style={
+                collapsed
+                  ? {
+                      padding: '10px',
+                      textAlign: 'center',
+                      fontSize: '10px',
+                      letterSpacing: '0.05em',
+                    }
+                  : undefined
+              }
             >
               {collapsed ? copy[locale].nav[route.id].slice(0, 2) : copy[locale].nav[route.id]}
             </NavLink>
diff --git a/apps/web/src/modules/console/console.i18n.tsx b/apps/web/src/modules/console/console.i18n.tsx
index 65c9bc6..a8b665f 100644
--- a/apps/web/src/modules/console/console.i18n.tsx
+++ b/apps/web/src/modules/console/console.i18n.tsx
@@ -135,10 +135,7 @@ export const copy = {
         '市场监控',
         '跟踪股票池价格、强弱排序和行情接入状态，为策略与 Agent 提供市场上下文。',
       ],
-      trading: [
-        '交易终端',
-        '在一个界面内完成行情监控、图表分析和下单操作。',
-      ],
+      trading: ['交易终端', '在一个界面内完成行情监控、图表分析和下单操作。'],
       strategies: [
         '策略工作台',
         '查看策略候选、信号分布、股票池评分和研究视图，形成可执行的策略工作流。',
diff --git a/apps/web/src/pages/strategies/StrategyDetailPage.tsx b/apps/web/src/pages/strategies/StrategyDetailPage.tsx
index c34e086..13cec35 100644
--- a/apps/web/src/pages/strategies/StrategyDetailPage.tsx
+++ b/apps/web/src/pages/strategies/StrategyDetailPage.tsx
@@ -14,8 +14,8 @@ import {
   detailKvTable,
   detailMetricCard,
   detailMetricLabel,
-  detailMetricValue,
   detailMetricsGrid,
+  detailMetricValue,
   detailPanel,
   detailPanelHead,
   detailRunRow,
@@ -72,9 +72,7 @@ export function StrategyDetailPage() {
         <button type="button" className={detailBackRow} onClick={() => navigate('/strategies')}>
           ← {locale === 'zh' ? '返回策略工作台' : 'Back to Strategies'}
         </button>
-        <EmptyState
-          message={error || (locale === 'zh' ? '策略不存在' : 'Strategy not found')}
-        />
+        <EmptyState message={error || (locale === 'zh' ? '策略不存在' : 'Strategy not found')} />
       </div>
     );
   }
@@ -93,11 +91,17 @@ export function StrategyDetailPage() {
         </button>
         <div className={detailHeaderMeta}>
           <div>
-            <div className="eyebrow">{strategy.family} · {strategy.timeframe} · {strategy.universe}</div>
-            <h1 style={{ margin: '6px 0 0', fontSize: 'clamp(22px, 3vw, 36px)' }}>{strategy.name}</h1>
+            <div className="eyebrow">
+              {strategy.family} · {strategy.timeframe} · {strategy.universe}
+            </div>
+            <h1 style={{ margin: '6px 0 0', fontSize: 'clamp(22px, 3vw, 36px)' }}>
+              {strategy.name}
+            </h1>
           </div>
           <div className={detailHeaderActions}>
-            <span className={`${detailStageBadge} ${detailStageBadgeVariants[tone as keyof typeof detailStageBadgeVariants]}`}>
+            <span
+              className={`${detailStageBadge} ${detailStageBadgeVariants[tone as keyof typeof detailStageBadgeVariants]}`}
+            >
               {strategy.status.toUpperCase()}
             </span>
           </div>
@@ -194,7 +198,13 @@ export function StrategyDetailPage() {
               {recentRuns.slice(0, 8).map((run) => (
                 <div className={detailRunRow} key={run.id}>
                   <div>
-                    <div style={{ fontSize: '12px', color: 'var(--text-strong)', fontFamily: 'var(--font-data)' }}>
+                    <div
+                      style={{
+                        fontSize: '12px',
+                        color: 'var(--text-strong)',
+                        fontFamily: 'var(--font-data)',
+                      }}
+                    >
                       {run.windowLabel}
                     </div>
                     <div style={{ fontSize: '11px', color: 'var(--muted)', marginTop: '2px' }}>
@@ -202,8 +212,10 @@ export function StrategyDetailPage() {
                     </div>
                   </div>
                   <div style={{ textAlign: 'right' }}>
-                    <div className={`${run.annualizedReturnPct >= 0 ? 'text-up' : 'text-down'}`}
-                      style={{ fontSize: '13px', fontFamily: 'var(--font-data)', fontWeight: 700 }}>
+                    <div
+                      className={`${run.annualizedReturnPct >= 0 ? 'text-up' : 'text-down'}`}
+                      style={{ fontSize: '13px', fontFamily: 'var(--font-data)', fontWeight: 700 }}
+                    >
                       {fmtPct(run.annualizedReturnPct)}
                     </div>
                     <div style={{ fontSize: '11px', color: 'var(--muted)' }}>
diff --git a/apps/web/src/pages/trading/TradingPage.tsx b/apps/web/src/pages/trading/TradingPage.tsx
index 0e13915..ece9313 100644
--- a/apps/web/src/pages/trading/TradingPage.tsx
+++ b/apps/web/src/pages/trading/TradingPage.tsx
@@ -386,7 +386,10 @@ export function TradingPage() {
           tabs={[
             {
               key: 'positions',
-              label: locale === 'zh' ? `持仓 (${allPositions.length})` : `Positions (${allPositions.length})`,
+              label:
+                locale === 'zh'
+                  ? `持仓 (${allPositions.length})`
+                  : `Positions (${allPositions.length})`,
               content: (
                 <div className="panel-body panel-body-sm">
                   {allPositions.length === 0 ? (
@@ -399,8 +402,7 @@ export function TradingPage() {
                             <strong>{pos.symbol}</strong>
                             <span
                               style={{
-                                color:
-                                  pos.account === 'live' ? 'var(--buy)' : 'var(--accent-live)',
+                                color: pos.account === 'live' ? 'var(--buy)' : 'var(--accent-live)',
                               }}
                             >
                               {pos.account === 'live'
@@ -425,7 +427,8 @@ export function TradingPage() {
             },
             {
               key: 'orders',
-              label: locale === 'zh' ? `委托 (${allOrders.length})` : `Orders (${allOrders.length})`,
+              label:
+                locale === 'zh' ? `委托 (${allOrders.length})` : `Orders (${allOrders.length})`,
               content: (
                 <div className="panel-body panel-body-sm">
                   {allOrders.length === 0 ? (