+
📊 Financials
- {[
- ['Market Cap', '—'],
- ['Revenue (TTM)', '—'],
- ['Net Income (TTM)','—'],
- ['P/E Ratio (TTM)', '—'],
- ['ROE (TTM)', '—'],
- ].map(([label, val]) => (
+ {financialRows.map(([label, val]) => (
{label}
- {val}
+ {loading ? '…' : val}
))}
-
- View Financial Statements →
-
);
}
// ─── Empty state ──────────────────────────────────────────────────────────────
-function EmptyState() {
+function EmptyState({ onSelect }: { onSelect: (symbol: string) => void }) {
return (
{['AAPL','MSFT','GOOGL','AMZN','NVDA'].map(t => (
-
+ onSelect(t)}
+ style={{
+ padding: '4px 12px',
+ background: '#EFF6FF',
+ color: '#2563EB',
+ borderRadius: 20,
+ fontSize: 13,
+ fontWeight: 600,
+ cursor: 'pointer',
+ }}
+ >
{t}
))}
@@ -367,17 +442,14 @@ function EmptyState() {
export function HomeView() {
const { activeSymbol, setActiveSymbol } = useAppContext();
- // Allow clicking the example tickers in empty state
- const handleTickerClick = (t: string) => setActiveSymbol(t);
-
- if (!activeSymbol) return
);
}
diff --git a/web/src/views/MarketsView.tsx b/web/src/views/MarketsView.tsx
index 8342f88..ca73190 100644
--- a/web/src/views/MarketsView.tsx
+++ b/web/src/views/MarketsView.tsx
@@ -1,13 +1,12 @@
+import { useState } from 'react';
import { useAppContext } from '../context/AppContext';
import { MarketplaceTab } from '../tabs/MarketplaceTab';
import { TopVolatile, AISetups } from '../components/MarketOpportunities';
-import { RISK_STYLE_TEMPLATES } from '../lib/RiskStyleTemplates';
import type { StrategyPreset } from '../lib/PresetRegistry';
-import { useState } from 'react';
export function MarketsView() {
const { botState, showMarketplaceTab } = useAppContext();
- const [clonedPreset, setClonedPreset] = useState(null);
+ const [, setClonedPreset] = useState(null);
const handleClone = (preset: StrategyPreset) => setClonedPreset(preset);
diff --git a/web/src/views/ResearchView.tsx b/web/src/views/ResearchView.tsx
index 854592c..7d93eea 100644
--- a/web/src/views/ResearchView.tsx
+++ b/web/src/views/ResearchView.tsx
@@ -3,21 +3,81 @@ import { useAppContext } from '../context/AppContext';
import { SignalsTab } from '../tabs/SignalsTab';
import { BacktestTab } from '../tabs/BacktestTab';
import { MyStrategiesTab } from '../tabs/MyStrategiesTab';
-import { StrategyWizard } from '../components/StrategyWizard';
+import { VisualRuleBuilder, type VisualRule } from '../components/strategy/VisualRuleBuilder';
+import { CodeStrategyEditor } from '../components/strategy/CodeStrategyEditor';
+import { getPlatformAccessToken } from '../lib/authSession';
+import { tradingRuntime } from '../lib/runtime';
+import { createRequestId } from '../../../shared/request-id.js';
-type ResearchTab = 'Signals' | 'Strategies' | 'Backtesting';
+type ResearchTab = 'Strategies' | 'Visual Builder' | 'Code Editor' | 'Signals' | 'Backtesting';
+
+// Sub-tab pill styles
+function SubTab({
+ label, active, onClick,
+}: { label: string; active: boolean; onClick: () => void }) {
+ return (
+
+ {label}
+
+ );
+}
export function ResearchView() {
- const { botState, connected, showBacktestTab, isAdmin } = useAppContext();
+ const { botState, connected, showBacktestTab, isAdmin, activeSymbol } = useAppContext();
const [tab, setTab] = useState('Strategies');
- const [wizardSeed, setWizardSeed] = useState(null);
const tabs: ResearchTab[] = [
'Strategies',
+ 'Visual Builder',
+ 'Code Editor',
...(isAdmin ? ['Signals' as ResearchTab] : []),
...(showBacktestTab ? ['Backtesting' as ResearchTab] : []),
];
+ // Save a visual-builder strategy by converting rules to a profile config
+ const handleSaveVisualStrategy = async (name: string, rules: VisualRule[]) => {
+ const token = await getPlatformAccessToken();
+ const fallbackSymbol = Object.keys(botState.symbols)[0] ?? 'SPY';
+ const body = {
+ name,
+ symbol: activeSymbol || fallbackSymbol,
+ strategyType: 'visual',
+ visualRules: rules,
+ // Convert to a human-readable description for the existing strategy engine
+ description: rules.map((r, i) =>
+ `Rule ${i + 1}: IF ${r.indicator} ${r.condition} ${r.value} → ${r.action} ${r.quantity} ${r.quantityType}`
+ ).join('; '),
+ };
+ const res = await fetch(`${tradingRuntime.tradingApiUrl}/api/profiles`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`,
+ 'x-request-id': createRequestId('web-strategy'),
+ },
+ body: JSON.stringify(body),
+ });
+ if (!res.ok) {
+ const data = await res.json().catch(() => ({})) as any;
+ throw new Error(data?.error ?? `Save failed (${res.status})`);
+ }
+ };
+
return (
Research
@@ -27,44 +87,56 @@ export function ResearchView() {
borderBottom: '1px solid #E5E7EB',
}}>
{tabs.map(t => (
- setTab(t)}
- style={{
- padding: '8px 16px',
- border: 'none',
- borderBottom: tab === t ? '2px solid #2563EB' : '2px solid transparent',
- background: 'transparent',
- color: tab === t ? '#2563EB' : '#6B7280',
- fontSize: 13,
- fontWeight: tab === t ? 700 : 500,
- cursor: 'pointer',
- marginBottom: -1,
- transition: 'all 0.15s',
- }}
- >
- {t}
-
+ setTab(t)} />
))}
- {tab === 'Signals' && setWizardSeed(null)}
- />
+
+ {tab === 'Visual Builder' && (
+
+
+
+ Visual Rule Builder
+
+
+ Build a trading strategy by composing IF/THEN rules. Drag rows to reorder. Click "Save Strategy" to store it.
+
+
+
+
+
+
+ Code Strategy Editor
+
+
+ Write a custom strategy function in JavaScript. Click "Run Backtest" to test it against historical data.
+
+
+
+
);
}
diff --git a/web/src/views/ScreenerView.tsx b/web/src/views/ScreenerView.tsx
index 638e5dc..ff70aaf 100644
--- a/web/src/views/ScreenerView.tsx
+++ b/web/src/views/ScreenerView.tsx
@@ -1,43 +1,164 @@
-import { useState } from 'react';
-import { SlidersHorizontal, Search } from 'lucide-react';
+import { useState, useEffect, useCallback } from 'react';
+import { SlidersHorizontal, Search, Loader2, RefreshCw } from 'lucide-react';
import { useAppContext } from '../context/AppContext';
+import { useNavigate } from 'react-router-dom';
+import { getPlatformAccessToken } from '../lib/authSession';
+import { tradingRuntime } from '../lib/runtime';
+import { createRequestId } from '../../../shared/request-id.js';
-// Phase 6 will wire this to /api/screener (FMP)
-const PLACEHOLDER_RESULTS = [
- { symbol: 'AAPL', name: 'Apple Inc.', price: 201.36, change: 1.02, marketCap: '3.0T', pe: 32.1, sector: 'Technology' },
- { symbol: 'MSFT', name: 'Microsoft Corp.', price: 426.52, change: 0.89, marketCap: '3.2T', pe: 36.4, sector: 'Technology' },
- { symbol: 'GOOGL', name: 'Alphabet Inc.', price: 172.49, change: 1.36, marketCap: '2.1T', pe: 20.3, sector: 'Technology' },
- { symbol: 'AMZN', name: 'Amazon.com Inc.', price: 186.10, change: -0.23, marketCap: '2.0T', pe: 41.8, sector: 'Consumer' },
- { symbol: 'NVDA', name: 'NVIDIA Corp.', price: 134.81, change: 2.31, marketCap: '3.3T', pe: 48.2, sector: 'Technology' },
- { symbol: 'META', name: 'Meta Platforms Inc.', price: 572.40, change: -0.55, marketCap: '1.4T', pe: 26.7, sector: 'Technology' },
- { symbol: 'TSLA', name: 'Tesla Inc.', price: 284.65, change: 3.12, marketCap: '908B', pe: 88.3, sector: 'Automotive' },
- { symbol: 'JPM', name: 'JPMorgan Chase & Co.', price: 249.90, change: 0.34, marketCap: '710B', pe: 13.2, sector: 'Financials' },
+// ─── Types ────────────────────────────────────────────────────────────────────
+interface ScreenerRow {
+ symbol: string;
+ companyName: string;
+ price: number;
+ changesPercentage: number;
+ marketCap: number;
+ pe: number | null;
+ sector: string;
+ volume: number;
+}
+
+const SECTORS = [
+ 'All', 'Technology', 'Financial Services', 'Healthcare', 'Consumer Cyclical',
+ 'Consumer Defensive', 'Industrials', 'Energy', 'Utilities', 'Real Estate',
+ 'Communication Services', 'Basic Materials',
];
-const SECTORS = ['All', 'Technology', 'Financials', 'Consumer', 'Healthcare', 'Automotive', 'Energy'];
+const CAP_OPTIONS: { label: string; min: number; max?: number }[] = [
+ { label: 'Any Cap', min: 0 },
+ { label: 'Mega (>$200B)', min: 200_000_000_000 },
+ { label: 'Large ($10B–$200B)', min: 10_000_000_000, max: 200_000_000_000 },
+ { label: 'Mid ($2B–$10B)', min: 2_000_000_000, max: 10_000_000_000 },
+ { label: 'Small (<$2B)', min: 0, max: 2_000_000_000 },
+];
+const fmtCap = (n: number) => {
+ if (n >= 1e12) return `$${(n / 1e12).toFixed(1)}T`;
+ if (n >= 1e9) return `$${(n / 1e9).toFixed(1)}B`;
+ if (n >= 1e6) return `$${(n / 1e6).toFixed(1)}M`;
+ return `$${n.toLocaleString()}`;
+};
+
+// ─── Screener fetch ───────────────────────────────────────────────────────────
+async function runScreener(params: {
+ sector: string;
+ marketCapMore?: number;
+ marketCapLess?: number;
+ limit: number;
+}): Promise
{
+ const token = await getPlatformAccessToken();
+ const qs = new URLSearchParams({ limit: String(params.limit) });
+ if (params.sector && params.sector !== 'All') qs.set('sector', params.sector);
+ if (params.marketCapMore) qs.set('marketCapMoreThan', String(params.marketCapMore));
+ if (params.marketCapLess) qs.set('marketCapLessThan', String(params.marketCapLess));
+
+ const res = await fetch(`${tradingRuntime.tradingApiUrl}/api/screener?${qs}`, {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ 'x-request-id': createRequestId('web-screener'),
+ },
+ });
+ if (!res.ok) {
+ const body = await res.json().catch(() => ({})) as any;
+ throw new Error(body?.error ?? `Screener failed (${res.status})`);
+ }
+ const data = await res.json() as any;
+ return Array.isArray(data) ? data : (data.results ?? []);
+}
+
+// ─── ScreenerView ─────────────────────────────────────────────────────────────
export function ScreenerView() {
const { setActiveSymbol } = useAppContext();
- const [sector, setSector] = useState('All');
- const [query, setQuery] = useState('');
+ const navigate = useNavigate();
- const filtered = PLACEHOLDER_RESULTS.filter(r => {
- const matchSector = sector === 'All' || r.sector === sector;
- const matchQuery = !query
- || r.symbol.includes(query.toUpperCase())
- || r.name.toLowerCase().includes(query.toLowerCase());
- return matchSector && matchQuery;
- });
+ const [results, setResults] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [query, setQuery] = useState('');
+ const [sector, setSector] = useState('All');
+ const [capIdx, setCapIdx] = useState(0);
+ const [sortKey, setSortKey] = useState('marketCap');
+ const [sortAsc, setSortAsc] = useState(false);
+
+ const fetchResults = useCallback(async () => {
+ setLoading(true);
+ setError(null);
+ const cap = CAP_OPTIONS[capIdx];
+ try {
+ const rows = await runScreener({
+ sector,
+ marketCapMore: cap.min > 0 ? cap.min : undefined,
+ marketCapLess: cap.max,
+ limit: 50,
+ });
+ setResults(rows);
+ } catch (e: any) {
+ setError(e?.message ?? 'Screener request failed');
+ } finally {
+ setLoading(false);
+ }
+ }, [sector, capIdx]);
+
+ // Fetch on mount and when filters change
+ useEffect(() => { fetchResults(); }, [fetchResults]);
+
+ // Client-side search filter + sort
+ const filtered = results
+ .filter(r => {
+ if (!query) return true;
+ const q = query.toUpperCase();
+ return r.symbol?.includes(q) || r.companyName?.toLowerCase().includes(query.toLowerCase());
+ })
+ .sort((a, b) => {
+ const av = a[sortKey] as any ?? 0;
+ const bv = b[sortKey] as any ?? 0;
+ return sortAsc ? (av > bv ? 1 : -1) : (av < bv ? 1 : -1);
+ });
+
+ const handleSort = (key: keyof ScreenerRow) => {
+ if (sortKey === key) setSortAsc(p => !p);
+ else { setSortKey(key); setSortAsc(false); }
+ };
+
+ const SortIcon = ({ k }: { k: keyof ScreenerRow }) => (
+
+ {sortKey === k ? (sortAsc ? '▲' : '▼') : '⇅'}
+
+ );
+
+ const handleRowClick = (symbol: string) => {
+ setActiveSymbol(symbol);
+ navigate('/');
+ };
return (
-
Screener
+
+
Stock Screener
+
+
+
+
{/* Filters */}
-
+
{/* Search */}
-
-
+
+
+ {/* Market cap */}
+
setCapIdx(Number(e.target.value))}
+ style={{
+ padding: '8px 12px', border: '1px solid #E5E7EB', borderRadius: 8,
+ fontSize: 12, background: '#fff', color: '#374151', fontFamily: 'inherit',
+ cursor: 'pointer',
+ }}
+ >
+ {CAP_OPTIONS.map((c, i) => (
+ {c.label}
+ ))}
+
+
{/* Sector pills */}
-
-
- {SECTORS.map(s => (
+
+ setSector(s)}
style={{
- padding: '5px 12px', borderRadius: 20,
- border: '1px solid', fontSize: 12, fontWeight: 600,
- cursor: 'pointer', transition: 'all 0.15s',
+ padding: '5px 10px', borderRadius: 20,
+ border: '1px solid', fontSize: 11, fontWeight: 600,
+ cursor: 'pointer',
borderColor: sector === s ? '#2563EB' : '#E5E7EB',
background: sector === s ? '#EFF6FF' : '#fff',
color: sector === s ? '#2563EB' : '#6B7280',
+ fontFamily: 'inherit',
}}
>
{s}
))}
+ {/* Sector dropdown for rest */}
+ = 6 ? sector : ''}
+ onChange={e => e.target.value && setSector(e.target.value)}
+ style={{
+ padding: '5px 8px', border: '1px solid #E5E7EB', borderRadius: 20,
+ fontSize: 11, background: '#fff', color: '#6B7280', fontFamily: 'inherit',
+ cursor: 'pointer',
+ }}
+ >
+ More sectors…
+ {SECTORS.slice(6).map(s => (
+ {s}
+ ))}
+
+ {/* Error */}
+ {error && !loading && (
+
+ {error}
+
+ )}
+
{/* Results table */}
{/* Header */}
- {['Symbol','Name','Price','Change','Mkt Cap','P/E'].map(h => (
-
- {h}
+ {([
+ ['symbol', 'Symbol'],
+ ['companyName', 'Company'],
+ ['price', 'Price'],
+ ['changesPercentage', 'Change %'],
+ ['marketCap', 'Market Cap'],
+ ['pe', 'P/E'],
+ ['volume', 'Volume'],
+ ] as [keyof ScreenerRow, string][]).map(([key, label]) => (
+ handleSort(key)}
+ style={{
+ fontSize: 11, color: '#9CA3AF', fontWeight: 700,
+ textTransform: 'uppercase', letterSpacing: '0.05em',
+ cursor: 'pointer', userSelect: 'none',
+ }}
+ >
+ {label}
))}
- {filtered.map((row, i) => (
+ {/* Loading */}
+ {loading && (
+
+ Fetching screener results…
+
+ )}
+
+ {/* Rows */}
+ {!loading && filtered.map((row, i) => (
setActiveSymbol(row.symbol)}
+ onClick={() => handleRowClick(row.symbol)}
style={{
display: 'grid',
- gridTemplateColumns: '1.5fr 2.5fr 1fr 1fr 1fr 1fr',
- padding: '12px 16px',
+ gridTemplateColumns: '100px 1fr 90px 90px 110px 80px 110px',
+ padding: '11px 16px',
borderBottom: i < filtered.length - 1 ? '1px solid #F9FAFB' : 'none',
cursor: 'pointer',
- transition: 'background 0.1s',
alignItems: 'center',
}}
onMouseEnter={e => (e.currentTarget.style.background = '#F9FAFB')}
onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
>
{row.symbol}
- {row.name}
- ${row.price.toFixed(2)}
- = 0 ? '#16A34A' : '#DC2626' }}>
- {row.change >= 0 ? '+' : ''}{row.change.toFixed(2)}%
+ {row.companyName}
+
+ {row.price != null ? `$${row.price.toFixed(2)}` : '—'}
+
+ = 0 ? '#16A34A' : '#DC2626',
+ }}>
+ {row.changesPercentage >= 0 ? '+' : ''}{row.changesPercentage?.toFixed(2)}%
+
+
+ {row.marketCap ? fmtCap(row.marketCap) : '—'}
+
+
+ {row.pe != null && row.pe > 0 ? row.pe.toFixed(1) : '—'}
+
+
+ {row.volume ? fmtCap(row.volume).replace('$', '') : '—'}
- {row.marketCap}
- {row.pe}
))}
- {filtered.length === 0 && (
+ {!loading && filtered.length === 0 && !error && (
No results match your filters
)}
-
- ⚡ Phase 6 will connect this to live FMP screener data with full filtering
-
+ {!loading && filtered.length > 0 && (
+
+ {filtered.length} companies · Click any row to view chart & research
+
+ )}
);
}
diff --git a/web/tsconfig.app.json b/web/tsconfig.app.json
index 758cc9f..c66118d 100644
--- a/web/tsconfig.app.json
+++ b/web/tsconfig.app.json
@@ -24,5 +24,9 @@
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
- "include": ["src", "../shared/**/*.ts"]
+ "include": ["src", "../shared/**/*.ts"],
+ "exclude": [
+ "../shared/platform-clients.ts",
+ "../shared/platform-mobile.ts"
+ ]
}
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 3764899..5907f79 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -2,6 +2,16 @@ import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import path from 'node:path'
+import fs from 'node:fs'
+
+// Resolve a @bytelyst/* package: prefer web/node_modules, fall back to vendor/
+function bytelystAlias(pkg: string): string {
+ const nmPath = path.resolve(__dirname, 'node_modules/@bytelyst', pkg);
+ const vendorPath = path.resolve(__dirname, '../vendor/bytelyst', pkg);
+ if (fs.existsSync(nmPath)) return nmPath;
+ if (fs.existsSync(vendorPath)) return vendorPath;
+ return nmPath; // let Vite surface the missing-module error
+}
// https://vite.dev/config/
export default defineConfig({
@@ -11,9 +21,15 @@ export default defineConfig({
],
// Shared files (../shared/*.ts) live outside web/ so Vite resolves their imports
// from the repo root where @bytelyst/* are not installed. Redirect all @bytelyst/*
- // imports to web/node_modules where pnpm installs them.
+ // imports first to web/node_modules, then fall back to the monorepo vendor/ dir.
resolve: {
+ // Deduplicate React so the vendored react-auth dist resolves the same react instance
+ dedupe: ['react', 'react-dom', 'react/jsx-runtime', 'react-router-dom'],
alias: [
+ // Vendor packages that live only in vendor/ (not in web/node_modules/)
+ { find: '@bytelyst/api-client', replacement: bytelystAlias('api-client') },
+ { find: '@bytelyst/errors', replacement: bytelystAlias('errors') },
+ // General catch-all: every other @bytelyst/* → web/node_modules
{
find: /^@bytelyst\/(.+)/,
replacement: path.resolve(__dirname, 'node_modules/@bytelyst/$1'),