diff --git a/README.md b/README.md
index 1d48e1d..a6cdb44 100644
--- a/README.md
+++ b/README.md
@@ -94,8 +94,11 @@ python -m quant_research_starter.cli compute-factors -d data_sample/sample_price
 # run a backtest
 python -m quant_research_starter.cli backtest -d data_sample/sample_prices.csv -s output/factors.csv -o output/backtest_results.json
 
-# optional: start the Streamlit dashboard
+# DISCLAIMER: OLD VERSION
+# optional: start the Streamlit dashboard, if on main stream
 streamlit run src/quant_research_starter/dashboard/streamlit_app.py
+# NEW VERSION: if streamlit is in legacy folder
+streamlit run legacy/streamlit/streamlit_app.py
 ```
 
 ---
diff --git a/src/quant_research_starter/frontend/cauweb/package.json b/src/quant_research_starter/frontend/cauweb/package.json
new file mode 100644
index 0000000..9f5cbe5
--- /dev/null
+++ b/src/quant_research_starter/frontend/cauweb/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@qrs/cauweb",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --ext .ts,.tsx"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.17",
+    "chart.js": "^4.5.1",
+    "lucide-react": "^0.263.1",
+    "react": "^18.2.0",
+    "react-chartjs-2": "^5.3.1",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.17",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@types/react": "^18.3.26",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^4.1.0",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3",
+    "vite": "^5.0.0"
+  }
+}
diff --git a/src/quant_research_starter/frontend/cauweb/src/pages/BacktestStudio.js b/src/quant_research_starter/frontend/cauweb/src/pages/BacktestStudio.js
new file mode 100644
index 0000000..7859640
--- /dev/null
+++ b/src/quant_research_starter/frontend/cauweb/src/pages/BacktestStudio.js
@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Play } from 'lucide-react';
+import { useQuantData } from '../hooks/useQuantData';
+export const BacktestStudio = () => {
+    const { loading, runBacktest, backtestResults } = useQuantData();
+    const [config, setConfig] = useState({
+        initialCapital: 100000,
+        startDate: '2020-01-01',
+        endDate: '2023-01-01',
+        rebalanceFrequency: 'monthly',
+        symbols: ['AAPL', 'MSFT', 'GOOGL', 'AMZN']
+    });
+    const handleRunBacktest = () => {
+        runBacktest(config);
+    };
+    // Format metric value for display with proper typing
+    const formatMetricValue = (value) => {
+        if (typeof value === 'number') {
+            // For ratios (like sharpe), don't add percentage
+            if (value > 1 || value < -1) {
+                return value.toFixed(3);
+            }
+            return (value * 100).toFixed(2) + '%';
+        }
+        return String(value);
+    };
+    // Safely get metrics with proper typing
+    const getMetrics = () => {
+        if (!backtestResults?.metrics)
+            return [];
+        const metrics = backtestResults.metrics;
+        return [
+            ['Total Return', formatMetricValue(metrics.totalReturn)],
+            ['Annualized Return', formatMetricValue(metrics.annualizedReturn)],
+            ['Volatility', formatMetricValue(metrics.volatility)],
+            ['Sharpe Ratio', formatMetricValue(metrics.sharpeRatio)],
+            ['Max Drawdown', formatMetricValue(metrics.maxDrawdown)],
+            ['Win Rate', formatMetricValue(metrics.winRate)],
+            ['Turnover', formatMetricValue(metrics.turnover)]
+        ];
+    };
+    return (_jsxs("div", { className: "p-8", children: [_jsxs("div", { className: "mb-8", children: [_jsx("h1", { className: "text-3xl font-bold text-gray-900", children: "Backtest Studio" }), _jsx("p", { className: "text-gray-600 mt-2", children: "Test and optimize your trading strategies" })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-8", children: [_jsx("div", { className: "lg:col-span-1", children: _jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-4", children: "Strategy Configuration" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Initial Capital ($)" }), _jsx("input", { type: "number", value: config.initialCapital, onChange: (e) => setConfig({ ...config, initialCapital: Number(e.target.value) }), className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Start Date" }), _jsx("input", { type: "date", value: config.startDate, onChange: (e) => setConfig({ ...config, startDate: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "End Date" }), _jsx("input", { type: "date", value: config.endDate, onChange: (e) => setConfig({ ...config, endDate: e.target.value }), className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Rebalance Frequency" }), _jsxs("select", { value: config.rebalanceFrequency, onChange: (e) => setConfig({
+                                                        ...config,
+                                                        rebalanceFrequency: e.target.value
+                                                    }), className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent", children: [_jsx("option", { value: "daily", children: "Daily" }), _jsx("option", { value: "weekly", children: "Weekly" }), _jsx("option", { value: "monthly", children: "Monthly" })] })] }), _jsxs("button", { onClick: handleRunBacktest, disabled: loading, className: "w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center space-x-2", children: [_jsx(Play, { className: "w-4 h-4" }), _jsx("span", { children: loading ? 'Running...' : 'Run Backtest' })] })] })] }) }), _jsx("div", { className: "lg:col-span-2", children: _jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-4", children: "Backtest Results" }), loading ? (_jsxs("div", { className: "text-center py-12", children: [_jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4" }), _jsx("p", { className: "text-gray-600", children: "Running backtest analysis..." })] })) : backtestResults ? (_jsxs("div", { className: "space-y-6", children: [_jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: getMetrics().map(([key, value]) => (_jsxs("div", { className: "text-center p-4 bg-gray-50 rounded-lg", children: [_jsx("div", { className: "text-sm text-gray-600 capitalize", children: key }), _jsx("div", { className: "text-xl font-bold text-gray-900 mt-1", children: value })] }, key))) }), _jsxs("div", { className: "border-t pt-6", children: [_jsx("h4", { className: "font-semibold text-gray-900 mb-3", children: "Performance Chart" }), _jsx("div", { className: "h-64 bg-gray-100 rounded-lg flex items-center justify-center text-gray-500", children: "Performance chart will be displayed here" })] })] })) : (_jsxs("div", { className: "text-center py-12 text-gray-500", children: [_jsx(Play, { className: "w-12 h-12 mx-auto mb-4 opacity-50" }), _jsx("p", { children: "Configure and run a backtest to see results" })] }))] }) })] })] }));
+};
diff --git a/src/quant_research_starter/frontend/cauweb/src/pages/BacktestStudio.tsx b/src/quant_research_starter/frontend/cauweb/src/pages/BacktestStudio.tsx
new file mode 100644
index 0000000..a72e675
--- /dev/null
+++ b/src/quant_research_starter/frontend/cauweb/src/pages/BacktestStudio.tsx
@@ -0,0 +1,457 @@
+import React, { useState } from 'react';
+import { Play, TrendingUp, TrendingDown, Target, DollarSign, Calendar, BarChart3, Activity } from 'lucide-react';
+import { PerformanceChart } from '../components/PerformanceChart';
+
+interface BacktestMetrics {
+  totalReturn: number;
+  annualizedReturn: number;
+  volatility: number;
+  sharpeRatio: number;
+  maxDrawdown: number;
+  winRate: number;
+  turnover: number;
+  profitFactor: number;
+  sortinoRatio: number;
+  calmarRatio: number;
+}
+
+interface Trade {
+  symbol: string;
+  quantity: number;
+  price: number;
+  timestamp: string;
+  side: 'BUY' | 'SELL';
+  pnl: number;
+}
+
+export const BacktestStudio: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+  const [backtestResults, setBacktestResults] = useState<{
+    metrics: BacktestMetrics;
+    trades: Trade[];
+    portfolioHistory: { date: string; value: number }[];
+    benchmarkHistory: { date: string; value: number }[];
+  } | null>(null);
+  
+  const [config, setConfig] = useState({
+    initialCapital: 100000,
+    startDate: '2020-01-01',
+    endDate: '2023-12-31',
+    rebalanceFrequency: 'monthly',
+    strategy: 'momentum',
+    symbols: ['AAPL', 'MSFT', 'GOOGL', 'AMZN', 'TSLA', 'META', 'NFLX', 'NVDA']
+  });
+
+  const handleRunBacktest = async () => {
+    setLoading(true);
+    
+    // Simulate API call with realistic delay
+    await new Promise(resolve => setTimeout(resolve, 2500));
+    
+    // Generate mock data
+    const mockResults = {
+      metrics: {
+        totalReturn: 0.2345,
+        annualizedReturn: 0.0876,
+        volatility: 0.1567,
+        sharpeRatio: 1.234,
+        maxDrawdown: 0.1234,
+        winRate: 0.645,
+        turnover: 2.34,
+        profitFactor: 1.89,
+        sortinoRatio: 1.567,
+        calmarRatio: 0.707
+      },
+      trades: generateMockTrades(),
+      portfolioHistory: generatePortfolioHistory(),
+      benchmarkHistory: generateBenchmarkHistory()
+    };
+    
+    setBacktestResults(mockResults);
+    setLoading(false);
+  };
+
+  const getMetrics = () => {
+    if (!backtestResults?.metrics) return [];
+    
+    const metrics = backtestResults.metrics;
+    return [
+      { 
+        key: 'Total Return', 
+        value: `${(metrics.totalReturn * 100).toFixed(2)}%`,
+        change: `${(metrics.annualizedReturn * 100).toFixed(2)}% annualized`,
+        icon: TrendingUp,
+        trend: metrics.totalReturn > 0 ? 'positive' : 'negative',
+        description: 'Overall strategy performance'
+      },
+      { 
+        key: 'Sharpe Ratio', 
+        value: metrics.sharpeRatio.toFixed(3),
+        change: 'Risk-adjusted returns',
+        icon: Activity,
+        trend: metrics.sharpeRatio > 1 ? 'positive' : 'negative',
+        description: 'Higher is better'
+      },
+      { 
+        key: 'Max Drawdown', 
+        value: `${(metrics.maxDrawdown * 100).toFixed(2)}%`,
+        change: 'Worst peak-to-trough decline',
+        icon: TrendingDown,
+        trend: metrics.maxDrawdown < 0.1 ? 'positive' : 'negative',
+        description: 'Lower is better'
+      },
+      { 
+        key: 'Win Rate', 
+        value: `${(metrics.winRate * 100).toFixed(2)}%`,
+        change: 'Successful trade percentage',
+        icon: Target,
+        trend: metrics.winRate > 0.5 ? 'positive' : 'negative',
+        description: 'Trade success frequency'
+      },
+      { 
+        key: 'Volatility', 
+        value: `${(metrics.volatility * 100).toFixed(2)}%`,
+        change: 'Portfolio risk measure',
+        icon: BarChart3,
+        trend: metrics.volatility < 0.15 ? 'positive' : 'negative',
+        description: 'Annualized standard deviation'
+      },
+      { 
+        key: 'Profit Factor', 
+        value: metrics.profitFactor.toFixed(2),
+        change: 'Gross profit vs gross loss',
+        icon: DollarSign,
+        trend: metrics.profitFactor > 1.5 ? 'positive' : 'negative',
+        description: 'Higher is better'
+      }
+    ];
+  };
+
+  const getRecentTrades = () => {
+    if (!backtestResults?.trades) return [];
+    return backtestResults.trades.slice(0, 5); // Last 5 trades
+  };
+
+  return (
+    <div className="page-content">
+      <div className="page-header">
+        <h1 className="page-title">Backtest Studio</h1>
+        <p className="page-subtitle">Test and optimize your trading strategies with advanced analytics</p>
+      </div>
+
+      <div className="studio-layout">
+        {/* Configuration Panel */}
+        <div className="config-panel">
+          <div className="panel-header">
+            <h3 className="panel-title">
+              <Calendar className="panel-icon" />
+              Strategy Configuration
+            </h3>
+            <p className="panel-subtitle">Configure your backtest parameters</p>
+          </div>
+          
+          <div className="config-form">
+            <div className="form-section">
+              <label className="form-label">Initial Capital ($)</label>
+              <input
+                type="number"
+                value={config.initialCapital}
+                onChange={(e) => setConfig({...config, initialCapital: Number(e.target.value)})}
+                className="form-input"
+                min="1000"
+                step="1000"
+              />
+            </div>
+
+            <div className="form-grid">
+              <div className="form-section">
+                <label className="form-label">Start Date</label>
+                <input
+                  type="date"
+                  value={config.startDate}
+                  onChange={(e) => setConfig({...config, startDate: e.target.value})}
+                  className="form-input"
+                />
+              </div>
+              <div className="form-section">
+                <label className="form-label">End Date</label>
+                <input
+                  type="date"
+                  value={config.endDate}
+                  onChange={(e) => setConfig({...config, endDate: e.target.value})}
+                  className="form-input"
+                />
+              </div>
+            </div>
+
+            <div className="form-section">
+              <label className="form-label">Rebalance Frequency</label>
+              <select
+                value={config.rebalanceFrequency}
+                onChange={(e) => setConfig({...config, rebalanceFrequency: e.target.value})}
+                className="form-input"
+              >
+                <option value="daily">Daily</option>
+                <option value="weekly">Weekly</option>
+                <option value="monthly">Monthly</option>
+                <option value="quarterly">Quarterly</option>
+              </select>
+            </div>
+
+            <div className="form-section">
+              <label className="form-label">Trading Strategy</label>
+              <select
+                value={config.strategy}
+                onChange={(e) => setConfig({...config, strategy: e.target.value})}
+                className="form-input"
+              >
+                <option value="momentum">Momentum</option>
+                <option value="mean-reversion">Mean Reversion</option>
+                <option value="value">Value Investing</option>
+                <option value="growth">Growth Investing</option>
+                <option value="sector-rotation">Sector Rotation</option>
+              </select>
+            </div>
+
+            <div className="form-section">
+              <label className="form-label">Tickers (comma separated)</label>
+              <input
+                type="text"
+                value={config.symbols.join(', ')}
+                onChange={(e) => setConfig({...config, symbols: e.target.value.split(',').map(s => s.trim())})}
+                className="form-input"
+                placeholder="AAPL, MSFT, GOOGL, AMZN"
+              />
+            </div>
+
+            <button
+              onClick={handleRunBacktest}
+              disabled={loading}
+              className="btn btn-primary run-btn"
+            >
+              <Play className="btn-icon" />
+              <span>{loading ? 'Running Analysis...' : 'Run Backtest'}</span>
+              {loading && <div className="btn-spinner"></div>}
+            </button>
+          </div>
+        </div>
+
+        {/* Results Panel */}
+        <div className="results-panel">
+          <div className="panel-header">
+            <h3 className="panel-title">Backtest Results</h3>
+            <p className="panel-subtitle">
+              {backtestResults ? 'Strategy performance analysis' : 'Configure and run backtest to see results'}
+            </p>
+          </div>
+          
+          {loading ? (
+            <div className="loading-state">
+              <div className="quant-spinner"></div>
+              <h4>Running Backtest Analysis</h4>
+              <p>Simulating trades and calculating performance metrics...</p>
+              <div className="pulse-dots">
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+            </div>
+          ) : backtestResults ? (
+            <div className="results-content">
+              {/* Key Metrics */}
+              <div className="metrics-section">
+                <h4 className="section-title">Performance Metrics</h4>
+                <div className="metrics-grid">
+                  {getMetrics().map((metric) => {
+                    const Icon = metric.icon;
+                    return (
+                      <div key={metric.key} className="metric-card">
+                        <div className="metric-header">
+                          <div className={`metric-icon-container ${metric.trend}`}>
+                            <Icon className="metric-icon" size={20} />
+                          </div>
+                          <span className={`metric-trend trend-${metric.trend}`}>
+                            {metric.change}
+                          </span>
+                        </div>
+                        <div className="metric-content">
+                          <h3>{metric.key}</h3>
+                          <div className="metric-value">{metric.value}</div>
+                          <p className="metric-description">{metric.description}</p>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* Performance Chart */}
+              <div className="chart-section">
+                <h4 className="section-title">Portfolio Performance</h4>
+                <div className="chart-container">
+                  <PerformanceChart 
+                    portfolioData={backtestResults.portfolioHistory}
+                    benchmarkData={backtestResults.benchmarkHistory}
+                    height={400}
+                  />
+                </div>
+              </div>
+
+              {/* Additional Metrics & Trades */}
+              <div className="additional-grid">
+                <div className="trades-section">
+                  <h4 className="section-title">Recent Trades</h4>
+                  <div className="trades-list">
+                    {getRecentTrades().map((trade, index) => (
+                      <div key={index} className="trade-item">
+                        <div className="trade-symbol">{trade.symbol}</div>
+                        <div className={`trade-side ${trade.side.toLowerCase()}`}>
+                          {trade.side}
+                        </div>
+                        <div className="trade-quantity">{trade.quantity} shares</div>
+                        <div className="trade-price">${trade.price.toFixed(2)}</div>
+                        <div className={`trade-pnl ${trade.pnl >= 0 ? 'positive' : 'negative'}`}>
+                          {trade.pnl >= 0 ? '+' : ''}${trade.pnl.toFixed(2)}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="stats-section">
+                  <h4 className="section-title">Strategy Statistics</h4>
+                  <div className="stats-grid">
+                    <div className="stat-item">
+                      <span className="stat-label">Total Trades</span>
+                      <span className="stat-value">{backtestResults.trades.length}</span>
+                    </div>
+                    <div className="stat-item">
+                      <span className="stat-label">Win Rate</span>
+                      <span className="stat-value positive">
+                        {(backtestResults.metrics.winRate * 100).toFixed(1)}%
+                      </span>
+                    </div>
+                    <div className="stat-item">
+                      <span className="stat-label">Avg. Trade Duration</span>
+                      <span className="stat-value">5.2 days</span>
+                    </div>
+                    <div className="stat-item">
+                      <span className="stat-label">Largest Gain</span>
+                      <span className="stat-value positive">+12.4%</span>
+                    </div>
+                    <div className="stat-item">
+                      <span className="stat-label">Largest Loss</span>
+                      <span className="stat-value negative">-8.7%</span>
+                    </div>
+                    <div className="stat-item">
+                      <span className="stat-label">Profit Factor</span>
+                      <span className="stat-value">
+                        {backtestResults.metrics.profitFactor.toFixed(2)}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="empty-state">
+              <Play className="empty-icon" size={64} />
+              <h4>No Backtest Results</h4>
+              <p>Configure your strategy parameters and run a backtest to see performance analytics</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Mock data generators
+function generateMockTrades(): Trade[] {
+  const trades: Trade[] = [];
+  const symbols = ['AAPL', 'MSFT', 'GOOGL', 'AMZN', 'TSLA', 'META'];
+  
+  for (let i = 0; i < 25; i++) {
+    trades.push({
+      symbol: symbols[Math.floor(Math.random() * symbols.length)],
+      quantity: Math.floor(Math.random() * 100) + 10,
+      price: Math.random() * 500 + 50,
+      timestamp: `2023-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`,
+      side: Math.random() > 0.5 ? 'BUY' : 'SELL',
+      pnl: (Math.random() - 0.3) * 2000
+    });
+  }
+  
+  return trades;
+}
+
+// Replace the existing generatePortfolioHistory and generateBenchmarkHistory functions:
+
+function generatePortfolioHistory() {
+  const history = [];
+  let value = 100000;
+  const startDate = new Date('2020-01-01');
+  
+  // Create more realistic market data with trends and volatility
+  let trend = 0.002; // Slight upward trend
+  let volatility = 0.08;
+  
+  for (let i = 0; i < 48; i++) { // 4 years of monthly data
+    const date = new Date(startDate);
+    date.setMonth(date.getMonth() + i);
+    
+    // Realistic market simulation with momentum
+    const randomChange = (Math.random() - 0.5) * volatility;
+    const monthlyReturn = trend + randomChange;
+    
+    // Add some momentum effect
+    if (i > 0) {
+      const prevReturn = (history[i-1].value / (i > 1 ? history[i-2].value : 100000)) - 1;
+      if (prevReturn > 0.02) {
+        trend = 0.003; // Positive momentum
+      } else if (prevReturn < -0.02) {
+        trend = 0.001; // Negative momentum
+      }
+    }
+    
+    value *= (1 + monthlyReturn);
+    
+    // Ensure minimum value
+    value = Math.max(value, 80000);
+    
+    history.push({
+      date: date.toISOString().split('T')[0],
+      value: Math.round(value)
+    });
+  }
+  
+  return history;
+}
+
+function generateBenchmarkHistory() {
+  const history = [];
+  let value = 100000;
+  const startDate = new Date('2020-01-01');
+  
+  // Benchmark (SPY-like) with less volatility
+  let trend = 0.0015;
+  let volatility = 0.05;
+  
+  for (let i = 0; i < 48; i++) {
+    const date = new Date(startDate);
+    date.setMonth(date.getMonth() + i);
+    
+    const randomChange = (Math.random() - 0.5) * volatility;
+    const monthlyReturn = trend + randomChange;
+    
+    value *= (1 + monthlyReturn);
+    value = Math.max(value, 85000);
+    
+    history.push({
+      date: date.toISOString().split('T')[0],
+      value: Math.round(value)
+    });
+  }
+  
+  return history;
+}
\ No newline at end of file
diff --git a/src/quant_research_starter/frontend/cauweb/src/pages/Dashboard.js b/src/quant_research_starter/frontend/cauweb/src/pages/Dashboard.js
new file mode 100644
index 0000000..f2feb89
--- /dev/null
+++ b/src/quant_research_starter/frontend/cauweb/src/pages/Dashboard.js
@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp, TrendingDown, Target } from 'lucide-react';
+export const Dashboard = () => {
+    const metrics = [
+        { title: 'Total Return', value: '+23.45%', change: '+2.1%', icon: TrendingUp, trend: 'up' },
+        { title: 'Sharpe Ratio', value: '1.234', change: '+0.12', icon: TrendingUp, trend: 'up' },
+        { title: 'Max Drawdown', value: '-12.34%', change: '-1.2%', icon: TrendingDown, trend: 'down' },
+        { title: 'Win Rate', value: '64.50%', change: '+3.2%', icon: Target, trend: 'up' }
+    ];
+    return (_jsxs("div", { className: "p-8", children: [_jsxs("div", { className: "mb-8", children: [_jsx("h1", { className: "text-3xl font-bold text-gray-900", children: "Dashboard" }), _jsx("p", { className: "text-gray-600 mt-2", children: "Welcome to your quantitative research workspace" })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8", children: metrics.map((metric, index) => {
+                    const Icon = metric.icon;
+                    return (_jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 p-6", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("div", { className: "p-2 bg-blue-50 rounded-lg", children: _jsx(Icon, { className: `w-6 h-6 ${metric.trend === 'up' ? 'text-green-600' : 'text-red-600'}` }) }), _jsx("span", { className: `text-sm font-medium ${metric.trend === 'up' ? 'text-green-600' : 'text-red-600'}`, children: metric.change })] }), _jsx("h3", { className: "text-gray-600 text-sm font-medium mb-1", children: metric.title }), _jsx("div", { className: `text-2xl font-bold ${metric.trend === 'up' ? 'text-green-600' : 'text-red-600'}`, children: metric.value })] }, index));
+                }) }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8", children: [_jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-4", children: "Recent Backtests" }), _jsx("div", { className: "space-y-4", children: [
+                                    { name: 'Momentum Strategy', date: '2 hours ago', status: 'Completed' },
+                                    { name: 'Mean Reversion', date: '5 hours ago', status: 'Completed' },
+                                    { name: 'Sector Rotation', date: '1 day ago', status: 'Running' }
+                                ].map((test, index) => (_jsxs("div", { className: "flex items-center justify-between p-3 bg-gray-50 rounded-lg", children: [_jsxs("div", { children: [_jsx("div", { className: "font-medium text-gray-900", children: test.name }), _jsx("div", { className: "text-sm text-gray-500", children: test.date })] }), _jsx("span", { className: `px-2 py-1 rounded-full text-xs font-medium ${test.status === 'Completed'
+                                                ? 'bg-green-100 text-green-800'
+                                                : 'bg-blue-100 text-blue-800'}`, children: test.status })] }, index))) })] }), _jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-4", children: "Quick Actions" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("button", { className: "w-full text-left p-4 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition-colors", children: [_jsx("div", { className: "font-medium text-blue-900", children: "Run New Backtest" }), _jsx("div", { className: "text-sm text-blue-700", children: "Test a new trading strategy" })] }), _jsxs("button", { className: "w-full text-left p-4 bg-green-50 border border-green-200 rounded-lg hover:bg-green-100 transition-colors", children: [_jsx("div", { className: "font-medium text-green-900", children: "Analyze Portfolio" }), _jsx("div", { className: "text-sm text-green-700", children: "Deep dive into performance metrics" })] }), _jsxs("button", { className: "w-full text-left p-4 bg-purple-50 border border-purple-200 rounded-lg hover:bg-purple-100 transition-colors", children: [_jsx("div", { className: "font-medium text-purple-900", children: "Research Factors" }), _jsx("div", { className: "text-sm text-purple-700", children: "Explore alpha factors" })] })] })] })] })] }));
+};
diff --git a/src/quant_research_starter/frontend/cauweb/src/pages/Dashboard.tsx b/src/quant_research_starter/frontend/cauweb/src/pages/Dashboard.tsx
new file mode 100644
index 0000000..91757a3
--- /dev/null
+++ b/src/quant_research_starter/frontend/cauweb/src/pages/Dashboard.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { TrendingUp, TrendingDown, DollarSign, Target } from 'lucide-react';
+
+export const Dashboard: React.FC = () => {
+  const metrics = [
+    { title: 'Total Return', value: '+23.45%', change: '+2.1%', icon: TrendingUp, trend: 'up' },
+    { title: 'Sharpe Ratio', value: '1.234', change: '+0.12', icon: TrendingUp, trend: 'up' },
+    { title: 'Max Drawdown', value: '-12.34%', change: '-1.2%', icon: TrendingDown, trend: 'down' },
+    { title: 'Win Rate', value: '64.50%', change: '+3.2%', icon: Target, trend: 'up' }
+  ];
+
+  return (
+    <div className="p-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
+        <p className="text-gray-600 mt-2">Welcome to your quantitative research workspace</p>
+      </div>
+
+      {/* Metrics Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        {metrics.map((metric, index) => {
+          const Icon = metric.icon;
+          return (
+            <div key={index} className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+              <div className="flex items-center justify-between mb-4">
+                <div className="p-2 bg-blue-50 rounded-lg">
+                  <Icon className={`w-6 h-6 ${
+                    metric.trend === 'up' ? 'text-green-600' : 'text-red-600'
+                  }`} />
+                </div>
+                <span className={`text-sm font-medium ${
+                  metric.trend === 'up' ? 'text-green-600' : 'text-red-600'
+                }`}>
+                  {metric.change}
+                </span>
+              </div>
+              <h3 className="text-gray-600 text-sm font-medium mb-1">{metric.title}</h3>
+              <div className={`text-2xl font-bold ${
+                metric.trend === 'up' ? 'text-green-600' : 'text-red-600'
+              }`}>
+                {metric.value}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Recent Activity */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+          <h3 className="text-lg font-semibold text-gray-900 mb-4">Recent Backtests</h3>
+          <div className="space-y-4">
+            {[
+              { name: 'Momentum Strategy', date: '2 hours ago', status: 'Completed' },
+              { name: 'Mean Reversion', date: '5 hours ago', status: 'Completed' },
+              { name: 'Sector Rotation', date: '1 day ago', status: 'Running' }
+            ].map((test, index) => (
+              <div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                <div>
+                  <div className="font-medium text-gray-900">{test.name}</div>
+                  <div className="text-sm text-gray-500">{test.date}</div>
+                </div>
+                <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                  test.status === 'Completed' 
+                    ? 'bg-green-100 text-green-800'
+                    : 'bg-blue-100 text-blue-800'
+                }`}>
+                  {test.status}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+          <h3 className="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h3>
+          <div className="space-y-3">
+            <button className="w-full text-left p-4 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition-colors">
+              <div className="font-medium text-blue-900">Run New Backtest</div>
+              <div className="text-sm text-blue-700">Test a new trading strategy</div>
+            </button>
+            <button className="w-full text-left p-4 bg-green-50 border border-green-200 rounded-lg hover:bg-green-100 transition-colors">
+              <div className="font-medium text-green-900">Analyze Portfolio</div>
+              <div className="text-sm text-green-700">Deep dive into performance metrics</div>
+            </button>
+            <button className="w-full text-left p-4 bg-purple-50 border border-purple-200 rounded-lg hover:bg-purple-100 transition-colors">
+              <div className="font-medium text-purple-900">Research Factors</div>
+              <div className="text-sm text-purple-700">Explore alpha factors</div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/quant_research_starter/frontend/readme.md b/src/quant_research_starter/frontend/readme.md
new file mode 100644
index 0000000..990ed99
--- /dev/null
+++ b/src/quant_research_starter/frontend/readme.md
@@ -0,0 +1,50 @@
+frontend/
+│
+├── core/                          # Shared logic library
+│   ├── src/
+│   │   ├── components/            # Shared React components
+│   │   ├── hooks/                 # Shared React hooks (fetch, state mgmt)
+│   │   ├── utils/                 # Reusable helper functions
+│   │   ├── types/                 # Shared TypeScript types
+│   │   └── index.ts               # Export all shared modules
+│   ├── package.json
+│   ├── tsconfig.json
+│   └── README.md
+
+│
+├── cauweb/                        # Main Web UI App
+│   ├── src/
+│   │   ├── pages/                 # UI Screens (Home, Dashboard, About)
+│   │   ├── layouts/               # Shared layouts (Navbar, Sidebar)
+│   │   ├── features/              # Domain features (Logs, Trading UI)
+│   │   ├── assets/                # Images, icons, fonts
+│   │   ├── styles/                # Global CSS/Tailwind configs
+│   │   └── main.tsx               # App entry point
+│   ├── public/
+│   ├── package.json
+│   ├── tsconfig.json
+│   └── README.md
+
+│
+├── cli/                           # Terminal UI (Node/React Ink CLI)
+│   ├── src/
+│   │   └── index.ts
+│   ├── package.json
+│   └── tsconfig.json
+
+│
+├── metrics/                       # Data visual charts + API metrics
+│   ├── src/
+│   │   ├── charts/
+│   │   ├── analytics/
+│   │   └── index.ts
+│   ├── package.json
+│   └── tsconfig.json
+
+│
+├── node_modules/                  # Shared dependencies root install
+│
+├── package.json                   # root scripts + global deps
+├── pnpm-workspace.yaml            # defines workspace packages
+├── tsconfig.base.json             # shared TS config
+└── README.md