phase-10.5: market screener ui enhancements
This commit is contained in:
saikiranvella
@@ -0,0 +1,47 @@
|
||||
import type { AuthResponse } from '$lib/types.js';
|
||||
import { authStore } from '$lib/stores/auth.store.svelte.js';
|
||||
|
||||
const BASE = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
/**
|
||||
* fetch() wrapper that automatically attaches the JWT Bearer token.
|
||||
* Use this for all API calls that require authentication.
|
||||
*/
|
||||
export function authFetch(url: string, init: RequestInit = {}): Promise<Response> {
|
||||
const token = authStore.token;
|
||||
const headers = new Headers(init.headers);
|
||||
if (!headers.has('Content-Type')) headers.set('Content-Type', 'application/json');
|
||||
if (token) headers.set('Authorization', `Bearer ${token}`);
|
||||
return fetch(url, { ...init, headers });
|
||||
}
|
||||
|
||||
export async function login(email: string, password: string): Promise<AuthResponse> {
|
||||
const res = await fetch(`${BASE}/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const { error } = await res.json().catch(() => ({ error: 'Login failed' }));
|
||||
throw new Error(error ?? 'Login failed');
|
||||
}
|
||||
return res.json() as Promise<AuthResponse>;
|
||||
}
|
||||
|
||||
export async function register(
|
||||
email: string,
|
||||
password: string,
|
||||
role: 'trader' | 'viewer' = 'viewer',
|
||||
inviteCode = '',
|
||||
): Promise<AuthResponse> {
|
||||
const res = await fetch(`${BASE}/auth/register`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password, role, inviteCode }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const { error } = await res.json().catch(() => ({ error: 'Registration failed' }));
|
||||
throw new Error(error ?? 'Registration failed');
|
||||
}
|
||||
return res.json() as Promise<AuthResponse>;
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import type { MarketCall, CalendarEvent, ScreenerResult } from '$lib/types.js';
|
||||
import { authFetch } from './auth.js';
|
||||
|
||||
const BASE = '/api';
|
||||
|
||||
@@ -21,9 +22,8 @@ export async function createCall(payload: {
|
||||
tickers: string[];
|
||||
date?: string;
|
||||
}): Promise<MarketCall> {
|
||||
const res = await fetch(`${BASE}/calls`, {
|
||||
const res = await authFetch(`${BASE}/calls`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
@@ -31,7 +31,7 @@ export async function createCall(payload: {
|
||||
}
|
||||
|
||||
export async function deleteCall(id: string): Promise<{ ok: boolean }> {
|
||||
const res = await fetch(`${BASE}/calls/${id}`, { method: 'DELETE' });
|
||||
const res = await authFetch(`${BASE}/calls/${id}`, { method: 'DELETE' });
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import type { MarketContext, PortfolioHolding, PortfolioAdvice } from '$lib/types.js';
|
||||
import { authFetch } from './auth.js';
|
||||
|
||||
const BASE = '/api';
|
||||
|
||||
@@ -9,7 +10,7 @@ export async function fetchPortfolio(): Promise<{
|
||||
netWorth: number | null;
|
||||
error?: string;
|
||||
}> {
|
||||
const res = await fetch(`${BASE}/finance/portfolio`);
|
||||
const res = await authFetch(`${BASE}/finance/portfolio`);
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
@@ -17,9 +18,8 @@ export async function fetchPortfolio(): Promise<{
|
||||
export async function addHolding(
|
||||
holding: PortfolioHolding,
|
||||
): Promise<{ holdings: PortfolioHolding[] }> {
|
||||
const res = await fetch(`${BASE}/finance/holdings`, {
|
||||
const res = await authFetch(`${BASE}/finance/holdings`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(holding),
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
@@ -27,15 +27,13 @@ export async function addHolding(
|
||||
}
|
||||
|
||||
export async function removeHolding(ticker: string): Promise<{ holdings: PortfolioHolding[] }> {
|
||||
const res = await fetch(`${BASE}/finance/holdings/${ticker}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
const res = await authFetch(`${BASE}/finance/holdings/${ticker}`, { method: 'DELETE' });
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function fetchMarketContext(): Promise<MarketContext> {
|
||||
const res = await fetch(`${BASE}/finance/market-context`);
|
||||
const res = await authFetch(`${BASE}/finance/market-context`);
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
@@ -5,3 +5,4 @@
|
||||
export { screenTickers, fetchCatalysts, analyzeTickers } from './screener.js';
|
||||
export { fetchPortfolio, addHolding, removeHolding, fetchMarketContext } from './finance.js';
|
||||
export { fetchCalls, fetchCall, createCall, deleteCall, fetchCallsCalendar } from './calls.js';
|
||||
export { login, register, authFetch } from './auth.js';
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
<div class="accounts-two-col">
|
||||
<section class="accounts-section">
|
||||
<h2>Accounts</h2>
|
||||
<table>
|
||||
<table class="accounts-table">
|
||||
<thead><tr><th>Account</th><th>Type</th><th>Institution</th><th class="right">Balance</th></tr></thead>
|
||||
<tbody>
|
||||
{#each pf.accounts as a}
|
||||
@@ -46,7 +46,7 @@
|
||||
|
||||
<section class="accounts-section">
|
||||
<h2>Spending — Last 30 Days</h2>
|
||||
<table>
|
||||
<table class="accounts-table">
|
||||
<thead><tr><th>Category</th><th class="right">Amount</th><th class="right">%</th><th>Share</th></tr></thead>
|
||||
<tbody>
|
||||
{#each pf.categoryBreakdown.slice(0, 10) as c}
|
||||
|
||||
@@ -118,7 +118,7 @@
|
||||
<!-- Holdings table -->
|
||||
<section class="advice-section">
|
||||
<h2>Holdings — Hold / Sell / Add Advice</h2>
|
||||
<table>
|
||||
<table class="advice-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sortable" onclick={() => toggleSort('ticker')}>Ticker {sortIcon('ticker')}</th>
|
||||
@@ -168,7 +168,7 @@
|
||||
<td class="num {glClass(a.gainLossPct)}">{a.gainLossPct != null ? a.gainLossPct + '%' : '—'}</td>
|
||||
<td>{#if a.signal}<SignalBadge signal={a.signal} />{:else}<span class="gray">—</span>{/if}</td>
|
||||
<td class={advClass(a.advice)}>{a.advice}</td>
|
||||
<td class="reason">{a.reason}</td>
|
||||
<td class="reason col-reason">{a.reason}</td>
|
||||
<td class="advice-row-actions">
|
||||
{#if isEditing}
|
||||
<button class="btn-save-inline" onclick={saveEdit} disabled={saving}>{saving ? '…' : '✓'}</button>
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { sigOrd, sorted } from '$lib/utils.js';
|
||||
import VerdictPill from '$lib/components/shared/VerdictPill.svelte';
|
||||
import SignalBadge from '$lib/components/shared/SignalBadge.svelte';
|
||||
import Spinner from '$lib/components/shared/Spinner.svelte';
|
||||
import type { AssetType, AssetResult } from '$lib/types.js';
|
||||
|
||||
@@ -17,22 +15,172 @@
|
||||
onAnalyze: () => void;
|
||||
} = $props();
|
||||
|
||||
// Mode state is self-contained — each table independently tracks inflated vs fundamental
|
||||
let mode = $state('inflated');
|
||||
let mode = $state('inflated');
|
||||
let expanded = $state<string | null>(null);
|
||||
let sortCol = $state<string | null>(null);
|
||||
let sortAsc = $state(true);
|
||||
let filterTicker = $state('');
|
||||
let filterSignal = $state('');
|
||||
let filterStyle = $state('');
|
||||
let filterCap = $state('');
|
||||
let filterPriceMin = $state('');
|
||||
let filterPriceMax = $state('');
|
||||
let filterScoreMin = $state('');
|
||||
let filterFlags = $state(false);
|
||||
|
||||
const STYLE_OPTIONS = ['High Growth', 'Growth', 'Value', 'Stable', 'Turnaround', 'Declining'];
|
||||
const CAP_OPTIONS = ['Mega Cap', 'Large Cap', 'Mid Cap', 'Small Cap', 'Micro Cap'];
|
||||
|
||||
function hasFilter() {
|
||||
return !!(filterTicker || filterSignal || filterStyle || filterCap || filterPriceMin || filterPriceMax || filterScoreMin || filterFlags);
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
filterTicker = ''; filterSignal = ''; filterStyle = ''; filterCap = '';
|
||||
filterPriceMin = ''; filterPriceMax = ''; filterScoreMin = ''; filterFlags = false;
|
||||
}
|
||||
|
||||
function filteredRows(rows: AssetResult[]): AssetResult[] {
|
||||
let out = rows;
|
||||
if (filterTicker.trim()) {
|
||||
const q = filterTicker.trim().toUpperCase();
|
||||
out = out.filter(r => r.asset.ticker.includes(q));
|
||||
}
|
||||
if (filterSignal) {
|
||||
out = out.filter(r => r.signal === filterSignal);
|
||||
}
|
||||
if (filterStyle) {
|
||||
out = out.filter(r => (r.asset.displayMetrics?.['Style'] ?? '') === filterStyle);
|
||||
}
|
||||
if (filterCap) {
|
||||
out = out.filter(r => (r.asset.displayMetrics?.['Cap Tier'] ?? '') === filterCap);
|
||||
}
|
||||
if (filterPriceMin !== '') {
|
||||
const min = parseFloat(filterPriceMin);
|
||||
out = out.filter(r => numVal(r.asset.displayMetrics?.['Price']) >= min);
|
||||
}
|
||||
if (filterPriceMax !== '') {
|
||||
const max = parseFloat(filterPriceMax);
|
||||
out = out.filter(r => numVal(r.asset.displayMetrics?.['Price']) <= max);
|
||||
}
|
||||
if (filterScoreMin !== '' && filterScoreMin !== null) {
|
||||
const min = Number(filterScoreMin);
|
||||
if (!isNaN(min)) {
|
||||
out = out.filter(r => {
|
||||
const v = r[mode as 'inflated' | 'fundamental'];
|
||||
const raw = v.scoreSummary ?? '';
|
||||
// Gate-failed rows have no numeric score — treat as 0
|
||||
const match = raw.match(/Score:\s*(\d+)/);
|
||||
const s = match ? parseInt(match[1], 10) : 0;
|
||||
return s >= min;
|
||||
});
|
||||
}
|
||||
}
|
||||
if (filterFlags) {
|
||||
// Hide gate-failed (rejected) rows — use scoreSummary as it's always serialized
|
||||
out = out.filter(r => {
|
||||
const v = r[mode as 'inflated' | 'fundamental'];
|
||||
return !(v.scoreSummary ?? '').startsWith('Gate failed');
|
||||
});
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function toggleExpand(ticker: string) {
|
||||
expanded = expanded === ticker ? null : ticker;
|
||||
}
|
||||
|
||||
function setSort(col: string) {
|
||||
if (sortCol === col) {
|
||||
sortAsc = !sortAsc;
|
||||
} else {
|
||||
sortCol = col;
|
||||
sortAsc = col === 'ticker'; // text cols default asc; number cols default desc
|
||||
}
|
||||
expanded = null; // close any open row when re-sorting
|
||||
}
|
||||
|
||||
function sortIcon(col: string): string {
|
||||
if (sortCol !== col) return '⇅';
|
||||
return sortAsc ? '↑' : '↓';
|
||||
}
|
||||
|
||||
function numVal(s: string | number | undefined | null): number {
|
||||
if (s == null || s === '—') return -Infinity;
|
||||
return parseFloat(String(s).replace(/[%$,x]/g, '')) || 0;
|
||||
}
|
||||
|
||||
function sortedRows(rows: AssetResult[]): AssetResult[] {
|
||||
const base = filteredRows(rows);
|
||||
if (!sortCol) return sorted(base);
|
||||
const col = sortCol;
|
||||
const asc = sortAsc;
|
||||
return [...base].sort((a, b) => {
|
||||
const ma = a.asset.displayMetrics ?? {};
|
||||
const mb = b.asset.displayMetrics ?? {};
|
||||
const va = a[mode as 'inflated' | 'fundamental'];
|
||||
const vb = b[mode as 'inflated' | 'fundamental'];
|
||||
|
||||
let av: number | string = 0;
|
||||
let bv: number | string = 0;
|
||||
|
||||
if (col === 'ticker') {
|
||||
av = a.asset.ticker; bv = b.asset.ticker;
|
||||
} else if (col === 'price') {
|
||||
av = numVal(ma['Price']); bv = numVal(mb['Price']);
|
||||
} else if (col === 'signal') {
|
||||
av = sigOrd(a.signal); bv = sigOrd(b.signal);
|
||||
} else if (col === 'score') {
|
||||
av = numVal(va.scoreSummary); bv = numVal(vb.scoreSummary);
|
||||
} else if (col === 'cap') {
|
||||
const capOrder: Record<string, number> = { 'Mega Cap': 5, 'Large Cap': 4, 'Mid Cap': 3, 'Small Cap': 2, 'Micro Cap': 1 };
|
||||
av = capOrder[ma['Cap Tier'] as string] ?? 0;
|
||||
bv = capOrder[mb['Cap Tier'] as string] ?? 0;
|
||||
} else {
|
||||
// Generic display metric by display key
|
||||
const keyMap: Record<string, string> = {
|
||||
pe: 'P/E', peg: 'PEG', roe: 'ROE%', fcf: 'FCF Yld%',
|
||||
expense: 'Exp Ratio%', ret5y: '5Y Return%',
|
||||
rating: 'Rating', ytm: 'YTM%',
|
||||
};
|
||||
const metricKey = keyMap[col] ?? col;
|
||||
av = numVal(ma[metricKey]); bv = numVal(mb[metricKey]);
|
||||
}
|
||||
|
||||
if (typeof av === 'string' && typeof bv === 'string') {
|
||||
return asc ? av.localeCompare(bv) : bv.localeCompare(av);
|
||||
}
|
||||
const diff = (av as number) - (bv as number);
|
||||
return asc ? diff : -diff;
|
||||
});
|
||||
}
|
||||
|
||||
// Colour class for signed % values (52W Chg, From High, Upside, DCF Safety)
|
||||
function signClass(val: string | number | null | undefined): string {
|
||||
if (val == null) return '';
|
||||
const n = typeof val === 'number' ? val : parseFloat(String(val));
|
||||
if (isNaN(n)) return '';
|
||||
return n > 0 ? 'pos' : n < 0 ? 'neg' : '';
|
||||
}
|
||||
|
||||
function breakdownEntries(bd: Record<string, number> | undefined) {
|
||||
if (!bd) return [];
|
||||
return Object.entries(bd).sort((a, b) => Math.abs(b[1]) - Math.abs(a[1]));
|
||||
}
|
||||
|
||||
function maxAbs(bd: Record<string, number> | undefined): number {
|
||||
if (!bd) return 1;
|
||||
const max = Math.max(...Object.values(bd).map(Math.abs));
|
||||
return max === 0 ? 1 : max;
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h2>{type}S</h2>
|
||||
<span class="count">{rows.length}</span>
|
||||
<span class="count">{filteredRows(rows).length === rows.length ? rows.length : `${filteredRows(rows).length} / ${rows.length}`}</span>
|
||||
{#if hasFilter()}
|
||||
<button class="filter-clear-btn" onclick={clearFilters}>✕ Clear filters</button>
|
||||
{/if}
|
||||
|
||||
<div class="mode-tabs">
|
||||
<button class:active={mode === 'inflated'} onclick={() => mode = 'inflated'}>Mkt-Adjusted</button>
|
||||
@@ -54,123 +202,312 @@
|
||||
</div>
|
||||
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<table class="asset-table">
|
||||
<thead>
|
||||
<!-- ── Column headers ── -->
|
||||
<tr>
|
||||
<th class="col-ticker">Ticker</th>
|
||||
<th>Price</th>
|
||||
<th>Verdict</th>
|
||||
<th>Score</th>
|
||||
<th class="col-expand"></th>
|
||||
<th class="col-ticker sort-th" onclick={() => setSort('ticker')}>
|
||||
Ticker <span class="sort-icon">{sortIcon('ticker')}</span>
|
||||
</th>
|
||||
<th class="sort-th" onclick={() => setSort('price')}>
|
||||
Price <span class="sort-icon">{sortIcon('price')}</span>
|
||||
</th>
|
||||
<th class="sort-th" onclick={() => setSort('signal')}>
|
||||
Signal <span class="sort-icon">{sortIcon('signal')}</span>
|
||||
</th>
|
||||
<th class="sort-th" onclick={() => setSort('score')}>
|
||||
Score <span class="sort-icon">{sortIcon('score')}</span>
|
||||
</th>
|
||||
{#if type === 'STOCK'}
|
||||
<!-- Classification -->
|
||||
<th title="Market cap tier">Cap</th>
|
||||
<th title="Growth / style classification">Style</th>
|
||||
<!-- Valuation -->
|
||||
<th>P/E</th>
|
||||
<th>PEG</th>
|
||||
<!-- Quality -->
|
||||
<th title="Gross Margin %">GrossM%</th>
|
||||
<th>ROE%</th>
|
||||
<th>OpMgn%</th>
|
||||
<th>FCF%</th>
|
||||
<!-- Risk -->
|
||||
<th>D/E</th>
|
||||
<!-- 52-week movement -->
|
||||
<th title="Total price return over last 52 weeks">52W Chg</th>
|
||||
<th title="% below 52-week high">From High</th>
|
||||
<!-- Expert signals -->
|
||||
<th title="Wall Street analyst consensus">Analyst</th>
|
||||
<th title="% upside to analyst target price">Upside</th>
|
||||
<th title="DCF margin of safety — positive means undervalued">DCF Safety</th>
|
||||
<!-- Risk flags -->
|
||||
<th class="sort-th" title="Market cap tier" onclick={() => setSort('cap')}>
|
||||
Cap <span class="sort-icon">{sortIcon('cap')}</span>
|
||||
</th>
|
||||
<th title="Growth / style">Style</th>
|
||||
<th>Flags</th>
|
||||
{:else if type === 'ETF'}
|
||||
<th>Expense</th><th>Yield</th><th>AUM</th><th>5Y Ret</th>
|
||||
<th class="sort-th" onclick={() => setSort('expense')}>
|
||||
Expense <span class="sort-icon">{sortIcon('expense')}</span>
|
||||
</th>
|
||||
<th class="sort-th" onclick={() => setSort('ret5y')}>
|
||||
5Y Ret <span class="sort-icon">{sortIcon('ret5y')}</span>
|
||||
</th>
|
||||
{:else}
|
||||
<th>YTM</th><th>Duration</th><th>Rating</th>
|
||||
<th class="sort-th" onclick={() => setSort('rating')}>
|
||||
Rating <span class="sort-icon">{sortIcon('rating')}</span>
|
||||
</th>
|
||||
<th class="sort-th" onclick={() => setSort('ytm')}>
|
||||
YTM <span class="sort-icon">{sortIcon('ytm')}</span>
|
||||
</th>
|
||||
{/if}
|
||||
</tr>
|
||||
|
||||
<!-- ── Inline filter row ── -->
|
||||
<tr class="filter-row">
|
||||
<td></td>
|
||||
<td class="col-ticker">
|
||||
<input class="th-filter" type="text" placeholder="Ticker…" bind:value={filterTicker} />
|
||||
</td>
|
||||
<td>
|
||||
<div class="th-filter-pair">
|
||||
<input class="th-filter th-filter-num" type="number" placeholder="$ min" bind:value={filterPriceMin} />
|
||||
<input class="th-filter th-filter-num" type="number" placeholder="$ max" bind:value={filterPriceMax} />
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<select class="th-filter" bind:value={filterSignal}>
|
||||
<option value="">All signals</option>
|
||||
<option value="✅ Strong Buy">Strong Buy</option>
|
||||
<option value="⚡ Momentum">Momentum</option>
|
||||
<option value="⚠️ Speculation">Speculation</option>
|
||||
<option value="🔄 Neutral">Neutral</option>
|
||||
<option value="❌ Avoid">Avoid</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<input class="th-filter th-filter-num" type="number" placeholder="Score ≥" min="0" max="20" bind:value={filterScoreMin} />
|
||||
</td>
|
||||
{#if type === 'STOCK'}
|
||||
<td>
|
||||
<select class="th-filter" bind:value={filterCap}>
|
||||
<option value="">All caps</option>
|
||||
{#each CAP_OPTIONS as c}<option value={c}>{c}</option>{/each}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<select class="th-filter" bind:value={filterStyle}>
|
||||
<option value="">All styles</option>
|
||||
{#each STYLE_OPTIONS as s}<option value={s}>{s}</option>{/each}
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<label class="th-filter-check" title="Show only rows that passed all gates">
|
||||
<input type="checkbox" bind:checked={filterFlags} />
|
||||
<span>Passed only</span>
|
||||
</label>
|
||||
</td>
|
||||
{:else}
|
||||
<td></td>
|
||||
<td></td>
|
||||
{/if}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each sorted(rows) as r}
|
||||
{#each sortedRows(rows) as r}
|
||||
{@const m = r.asset.displayMetrics ?? {}}
|
||||
{@const v = r[mode as 'inflated' | 'fundamental']}
|
||||
<tr class="data-row" data-signal={sigOrd(r.signal)}>
|
||||
{@const isOpen = expanded === r.asset.ticker}
|
||||
{@const colCount = type === 'STOCK' ? 8 : 7}
|
||||
{@const flags = v.audit?.riskFlags ?? []}
|
||||
{@const rawScore = parseInt(v.scoreSummary?.replace(/\D/g, '') ?? '0', 10)}
|
||||
|
||||
<!-- ── Summary row ── -->
|
||||
<tr
|
||||
class="data-row summary-row"
|
||||
class:row-open={isOpen}
|
||||
data-signal={sigOrd(r.signal)}
|
||||
onclick={() => toggleExpand(r.asset.ticker)}
|
||||
>
|
||||
<td class="col-expand">{isOpen ? '▾' : '▸'}</td>
|
||||
<td class="ticker">{r.asset.ticker}</td>
|
||||
<td class="num">{m.Price ?? '—'}</td>
|
||||
<td><VerdictPill label={v.label} /></td>
|
||||
<td class="score-cell" title={v.scoreSummary}>{v.scoreSummary}</td>
|
||||
<!-- Signal pill -->
|
||||
<td class="signal-verdict-cell">
|
||||
<span class="sv-pill sv-{(r.signal ?? '').includes('Strong') ? 'strong' : (r.signal ?? '').includes('Momentum') ? 'momentum' : (r.signal ?? '').includes('Speculation') ? 'spec' : (r.signal ?? '').includes('Neutral') ? 'neutral' : 'avoid'}">{(r.signal ?? '').replace(/^[^\w\s]+\s*/, '').trim() || '—'}</span>
|
||||
</td>
|
||||
<!-- Score as dot scale -->
|
||||
<td class="score-cell" title={v.scoreSummary}>
|
||||
{#if v.scoreSummary?.startsWith('Gate failed')}
|
||||
<span class="score-fail">✗</span>
|
||||
{:else}
|
||||
<span class="score-dots">
|
||||
{#each Array(5) as _, i}
|
||||
<span class="score-dot" class:on={i < Math.round(rawScore / 4)}></span>
|
||||
{/each}
|
||||
</span>
|
||||
<span class="score-num">{rawScore}</span>
|
||||
{/if}
|
||||
</td>
|
||||
{#if type === 'STOCK'}
|
||||
<!-- Classification -->
|
||||
<td><span class="tag sm cap-tag">{m['Cap Tier'] ?? '—'}</span></td>
|
||||
<td><span class="tag sm style-tag">{m['Style'] ?? '—'}</span></td>
|
||||
<!-- Valuation -->
|
||||
<td class="num">{m['P/E'] ?? '—'}</td>
|
||||
<td class="num">{m['PEG'] ?? '—'}</td>
|
||||
<!-- Quality -->
|
||||
<td class="num">{m['GrossM%'] ?? '—'}</td>
|
||||
<td class="num">{m['ROE%'] ?? '—'}</td>
|
||||
<td class="num">{m['OpMgn%'] ?? '—'}</td>
|
||||
<td class="num">{m['FCF Yld%'] ?? '—'}</td>
|
||||
<!-- Risk -->
|
||||
<td class="num">{m['D/E'] ?? '—'}</td>
|
||||
<!-- 52-week movement — green if up, red if down -->
|
||||
<td class="num {signClass(m['52W Chg'])}">{m['52W Chg'] ?? '—'}</td>
|
||||
<td class="num {signClass(m['From High'])}">{m['From High'] ?? '—'}</td>
|
||||
<!-- Expert signals -->
|
||||
<td class="analyst-cell">{m['Analyst'] ?? '—'}</td>
|
||||
<td class="num {signClass(m['Upside'])}">{m['Upside'] ?? '—'}</td>
|
||||
<td class="num {signClass(m['DCF Safety'])}">{m['DCF Safety'] ?? '—'}</td>
|
||||
<!-- Risk flags -->
|
||||
<td class="flags">
|
||||
{#each v.audit?.riskFlags ?? [] as flag}
|
||||
<span class="flag">⚠ {flag}</span>
|
||||
{/each}
|
||||
<td><span class="tag sm style-tag">{m['Style'] ?? '—'}</span></td>
|
||||
<!-- Flags: count badge with hover expand -->
|
||||
<td class="flags-cell">
|
||||
{#if flags.length > 0}
|
||||
<span class="flags-badge">
|
||||
<span class="flags-count">⚠ {flags.length}</span>
|
||||
</span>
|
||||
{/if}
|
||||
</td>
|
||||
{:else if type === 'ETF'}
|
||||
<td class="num">{m['Exp Ratio%'] ?? '—'}</td>
|
||||
<td class="num">{m['Yield%'] ?? '—'}</td>
|
||||
<td class="num">{m['AUM'] ?? '—'}</td>
|
||||
<td class="num">{m['5Y Return%'] ?? '—'}</td>
|
||||
<td class="num">{m['Exp Ratio%'] ?? '—'}</td>
|
||||
<td class="num">{m['5Y Return%'] ?? '—'}</td>
|
||||
{:else}
|
||||
<td class="num">{m['YTM%'] ?? '—'}</td>
|
||||
<td class="num">{m['Duration'] ?? '—'}</td>
|
||||
<td class="num">{m['Rating'] ?? '—'}</td>
|
||||
<td class="num">{m['Rating'] ?? '—'}</td>
|
||||
<td class="num">{m['YTM%'] ?? '—'}</td>
|
||||
{/if}
|
||||
</tr>
|
||||
|
||||
<!-- ── Inline detail row ── -->
|
||||
{#if isOpen}
|
||||
{@const mktPass = r.inflated.audit?.passedGates}
|
||||
{@const grahamPass = r.fundamental.audit?.passedGates}
|
||||
<tr class="detail-row">
|
||||
<td colspan={colCount} class="detail-cell">
|
||||
<div class="detail-panel">
|
||||
|
||||
<!-- ══ LEFT — metric grid ══════════════════════════════════ -->
|
||||
<div class="dp-left">
|
||||
<div class="dp-title">Metrics</div>
|
||||
<div class="dp-metric-grid">
|
||||
{#if type === 'STOCK'}
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">P/E</span>
|
||||
<span class="dp-mc-value">{m['P/E'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">PEG</span>
|
||||
<span class="dp-mc-value">{m['PEG'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">ROE%</span>
|
||||
<span class="dp-mc-value {signClass(m['ROE%'])}">{m['ROE%'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">Op Mgn%</span>
|
||||
<span class="dp-mc-value {signClass(m['OpMgn%'])}">{m['OpMgn%'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">Gross M%</span>
|
||||
<span class="dp-mc-value {signClass(m['GrossM%'])}">{m['GrossM%'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">FCF Yld%</span>
|
||||
<span class="dp-mc-value {signClass(m['FCF Yld%'])}">{m['FCF Yld%'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">D/E</span>
|
||||
<span class="dp-mc-value">{m['D/E'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">52W Chg</span>
|
||||
<span class="dp-mc-value {signClass(m['52W Chg'])}">{m['52W Chg'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">From High</span>
|
||||
<span class="dp-mc-value {signClass(m['From High'])}">{m['From High'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">Analyst</span>
|
||||
<span class="dp-mc-value">{m['Analyst'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">Upside</span>
|
||||
<span class="dp-mc-value {signClass(m['Upside'])}">{m['Upside'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">DCF Safety</span>
|
||||
<span class="dp-mc-value {signClass(m['DCF Safety'])}">{m['DCF Safety'] ?? '—'}</span>
|
||||
</div>
|
||||
{:else if type === 'ETF'}
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">Yield%</span>
|
||||
<span class="dp-mc-value">{m['Yield%'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">AUM</span>
|
||||
<span class="dp-mc-value">{m['AUM'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">5Y Ret%</span>
|
||||
<span class="dp-mc-value {signClass(m['5Y Return%'])}">{m['5Y Return%'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">Exp Ratio%</span>
|
||||
<span class="dp-mc-value">{m['Exp Ratio%'] ?? '—'}</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">YTM%</span>
|
||||
<span class="dp-mc-value">{m['YTM%'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">Duration</span>
|
||||
<span class="dp-mc-value">{m['Duration'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">Rating</span>
|
||||
<span class="dp-mc-value">{m['Rating'] ?? '—'}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- ── Gate badge chips ── -->
|
||||
<div class="dp-gates-row">
|
||||
<span class="dp-gate-chip" class:dp-gate-chip-pass={mktPass} class:dp-gate-chip-fail={!mktPass}>
|
||||
MKT {mktPass ? '✓' : '✗'}
|
||||
</span>
|
||||
<span class="dp-gate-chip" class:dp-gate-chip-pass={grahamPass} class:dp-gate-chip-fail={!grahamPass}>
|
||||
GRAHAM {grahamPass ? '✓' : '✗'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- ── Risk flag pills ── -->
|
||||
{#if v.audit?.riskFlags?.length}
|
||||
<div class="dp-risk-row">
|
||||
{#each v.audit.riskFlags as flag}
|
||||
<span class="dp-risk-pill">⚠ {flag}</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- ══ RIGHT — verdict card (factor bar chart) ═════════════ -->
|
||||
<div class="dp-right">
|
||||
<div class="dp-title">
|
||||
Factor Scores
|
||||
<span class="dp-mode-note">({mode === 'inflated' ? 'Mkt-Adj' : 'Graham'})</span>
|
||||
</div>
|
||||
|
||||
{#if !v.audit?.passedGates && v.audit?.failures?.length}
|
||||
<!-- Gate failures shown when gates didn't pass -->
|
||||
<div class="dp-failures">
|
||||
{#each v.audit.failures as f}
|
||||
<div class="dp-failure-item">✗ {f}</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if breakdownEntries(v.audit?.breakdown).length}
|
||||
{@const entries = breakdownEntries(v.audit?.breakdown)}
|
||||
{@const scale = maxAbs(v.audit?.breakdown)}
|
||||
<div class="dp-bar-chart">
|
||||
{#each entries as [factor, score]}
|
||||
{@const pct = Math.round((Math.abs(score) / scale) * 100)}
|
||||
<div class="dp-bar-row">
|
||||
<span class="dp-bar-label">{factor}</span>
|
||||
<div class="dp-bar-track">
|
||||
<div
|
||||
class="dp-bar-fill {score > 0 ? 'dp-bar-pos' : 'dp-bar-neg'}"
|
||||
style="width: {pct}%"
|
||||
></div>
|
||||
</div>
|
||||
<span class="dp-bar-val {score > 0 ? 'pos' : score < 0 ? 'neg' : ''}">
|
||||
{score > 0 ? '+' : ''}{score}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="dp-no-factors">No factor data — gates failed before scoring</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Score cell — truncates long gate summaries, tooltip shows full text */
|
||||
.score-cell {
|
||||
color: var(--text-dim);
|
||||
font-size: var(--fs-sm);
|
||||
max-width: 140px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Classification tags */
|
||||
.cap-tag { color: var(--blue-light, #93c5fd); border-color: var(--blue-dim, #1e3a5f); }
|
||||
.style-tag { color: var(--text-muted); }
|
||||
|
||||
/* Signed % colouring */
|
||||
.pos { color: var(--green); }
|
||||
.neg { color: var(--red); }
|
||||
|
||||
/* Analyst label — not a number */
|
||||
.analyst-cell {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Risk flags column */
|
||||
.flags { display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
|
||||
.flag { color: var(--orange); font-size: var(--fs-sm); white-space: nowrap; }
|
||||
</style>
|
||||
|
||||
@@ -68,110 +68,19 @@
|
||||
{/if}
|
||||
|
||||
{#if expanded}
|
||||
<div class="grid">
|
||||
<div class="ctx-grid">
|
||||
{#each cards as c}
|
||||
<div class="card">
|
||||
<div class="label-row">
|
||||
<span class="label">{c.label}</span>
|
||||
<div class="ctx-card">
|
||||
<div class="ctx-label-row">
|
||||
<span class="ctx-card-label">{c.label}</span>
|
||||
<span class="tip-wrap">
|
||||
<span class="tip-anchor">?</span>
|
||||
<span class="tip-box">{c.tip}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="value">{c.value}</div>
|
||||
<div class="ctx-value">{c.value}</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.ctx-wrap { margin-bottom: 20px; }
|
||||
|
||||
/* ── Collapsible toggle ─────────────────────────────────────────── */
|
||||
.ctx-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ctx-toggle-label {
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--text-dimmer);
|
||||
}
|
||||
|
||||
.ctx-toggle-chevron { font-size: var(--fs-2xs); color: var(--text-faint); }
|
||||
|
||||
/* ── Cards grid ─────────────────────────────────────────────────── */
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card { background: var(--bg-card); border-radius: var(--radius-md); padding: 12px var(--space-lg); }
|
||||
|
||||
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
|
||||
.label { font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
|
||||
/* ── Tooltip ─────────────────────────────────────────────────────── */
|
||||
.tip-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
|
||||
|
||||
.tip-anchor {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--text-faint);
|
||||
color: var(--text-dimmer);
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 700;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.tip-box {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: calc(100% + 6px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 220px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--text-faint);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px 10px;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
z-index: 50;
|
||||
pointer-events: none;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.tip-box::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 5px solid transparent;
|
||||
border-top-color: var(--text-faint);
|
||||
}
|
||||
|
||||
.tip-wrap:hover .tip-box { display: block; }
|
||||
|
||||
.value { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-top: 4px; }
|
||||
</style>
|
||||
|
||||
@@ -3,67 +3,25 @@
|
||||
import type { MarketContext } from '$lib/types.js';
|
||||
let { ctx }: { ctx: MarketContext } = $props();
|
||||
|
||||
// Flat list of chips so the template stays declarative
|
||||
// color: bg, border, text (all as hex/rgba strings)
|
||||
const chips = $derived([
|
||||
{ label: '10Y', value: ctx.riskFreeRate?.toFixed(2) + '%' },
|
||||
{ label: 'VIX', value: ctx.vixLevel?.toFixed(1) },
|
||||
{ label: 'S&P', value: ctx.sp500Price?.toLocaleString() },
|
||||
{ label: 'S&P P/E', value: fmtPE(ctx.benchmarks?.marketPE) },
|
||||
{ label: 'Tech P/E', value: fmtPE(ctx.benchmarks?.techPE) },
|
||||
{ label: 'REIT Yld', value: ctx.benchmarks?.reitYield?.toFixed(2) + '%' },
|
||||
{ label: 'IG Sprd', value: ctx.benchmarks?.igSpread?.toFixed(2) + '%' },
|
||||
{ label: 'Rates', value: ctx.rateRegime, regime: ctx.rateRegime },
|
||||
{ label: 'Vol', value: ctx.volatilityRegime, regime: ctx.volatilityRegime },
|
||||
{ label: '10Y', value: ctx.riskFreeRate != null ? ctx.riskFreeRate.toFixed(1) + '%' : '—', color: 'indigo' },
|
||||
{ label: 'VIX', value: ctx.vixLevel != null ? ctx.vixLevel.toFixed(1) : '—', color: 'rose' },
|
||||
{ label: 'S&P', value: ctx.sp500Price?.toLocaleString() ?? '—', color: 'emerald' },
|
||||
{ label: 'S&P P/E', value: fmtPE(ctx.benchmarks?.marketPE), color: 'sky' },
|
||||
{ label: 'Tech P/E', value: fmtPE(ctx.benchmarks?.techPE), color: 'violet' },
|
||||
{ label: 'REIT Yld', value: ctx.benchmarks?.reitYield != null ? ctx.benchmarks.reitYield.toFixed(1) + '%' : '—', color: 'amber' },
|
||||
{ label: 'IG Sprd', value: ctx.benchmarks?.igSpread != null ? ctx.benchmarks.igSpread.toFixed(2) + '%' : '—', color: 'teal' },
|
||||
{ label: 'Rates', value: ctx.rateRegime, regime: ctx.rateRegime, color: ctx.rateRegime === 'HIGH' ? 'red' : ctx.rateRegime === 'LOW' ? 'blue' : 'slate' },
|
||||
{ label: 'Vol', value: ctx.volatilityRegime, regime: ctx.volatilityRegime, color: ctx.volatilityRegime === 'ELEVATED' ? 'orange' : 'slate' },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<div class="ctx-strip">
|
||||
<div class="bubble-strip">
|
||||
{#each chips as chip}
|
||||
<div class="ctx-chip">
|
||||
<span class="ctx-label">{chip.label}</span>
|
||||
<span class="ctx-val" class:ctx-regime={!!chip.regime} data-regime={chip.regime ?? ''}>
|
||||
{chip.value ?? '—'}
|
||||
</span>
|
||||
<div class="bubble bubble-{chip.color}">
|
||||
<span class="bubble-val">{chip.value ?? '—'}</span>
|
||||
<span class="bubble-label">{chip.label}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.ctx-strip {
|
||||
display: flex;
|
||||
gap: 1px;
|
||||
background: var(--border);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ctx-chip {
|
||||
flex: 1;
|
||||
min-width: 70px;
|
||||
background: var(--bg-base);
|
||||
padding: 10px var(--space-lg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.ctx-label {
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-dimmer);
|
||||
}
|
||||
|
||||
.ctx-val {
|
||||
font-size: var(--fs-lg);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.ctx-regime[data-regime='HIGH'] { color: var(--red); }
|
||||
.ctx-regime[data-regime='NORMAL'] { color: var(--text-muted); }
|
||||
.ctx-regime[data-regime='LOW'] { color: var(--green); }
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
/**
|
||||
* Auth store — holds current user + JWT token.
|
||||
* Persists token to sessionStorage so it survives page refresh within the tab.
|
||||
*/
|
||||
|
||||
import type { AuthUser, Role } from '$lib/types.js';
|
||||
|
||||
const TOKEN_KEY = 'ms_token';
|
||||
|
||||
function createAuthStore() {
|
||||
// Hydrate from sessionStorage on first load
|
||||
const stored = typeof sessionStorage !== 'undefined' ? sessionStorage.getItem(TOKEN_KEY) : null;
|
||||
|
||||
let token = $state<string | null>(stored);
|
||||
let user = $state<AuthUser | null>(stored ? parseTokenUser(stored) : null);
|
||||
|
||||
function setAuth(newToken: string, newUser: AuthUser) {
|
||||
token = newToken;
|
||||
user = newUser;
|
||||
sessionStorage.setItem(TOKEN_KEY, newToken);
|
||||
}
|
||||
|
||||
function clearAuth() {
|
||||
token = null;
|
||||
user = null;
|
||||
sessionStorage.removeItem(TOKEN_KEY);
|
||||
}
|
||||
|
||||
return {
|
||||
get token() {
|
||||
return token;
|
||||
},
|
||||
get user() {
|
||||
return user;
|
||||
},
|
||||
get isLoggedIn() {
|
||||
return token !== null && user !== null;
|
||||
},
|
||||
get role(): Role | null {
|
||||
return user?.role ?? null;
|
||||
},
|
||||
get isTrader() {
|
||||
return user?.role === 'trader' || user?.role === 'admin';
|
||||
},
|
||||
setAuth,
|
||||
clearAuth,
|
||||
};
|
||||
}
|
||||
|
||||
/** Decode the JWT payload (base64url middle segment) to extract user info. */
|
||||
function parseTokenUser(token: string): AuthUser | null {
|
||||
try {
|
||||
const parts = token.split('.');
|
||||
if (parts.length !== 3) return null;
|
||||
const payload = JSON.parse(atob(parts[1].replace(/-/g, '+').replace(/_/g, '/')));
|
||||
if (!payload.sub || !payload.email || !payload.role) return null;
|
||||
// Check expiry
|
||||
if (payload.exp && payload.exp * 1000 < Date.now()) return null;
|
||||
return {
|
||||
id: payload.sub as string,
|
||||
email: payload.email as string,
|
||||
role: payload.role as Role,
|
||||
createdAt: '',
|
||||
lastLogin: null,
|
||||
};
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export const authStore = createAuthStore();
|
||||
@@ -1,4 +1,4 @@
|
||||
import { addHolding, removeHolding } from '$lib/api.js';
|
||||
import { addHolding, removeHolding, authFetch } from '$lib/api.js';
|
||||
import type { MarketContext, AdviceRow, PersonalFinance, HoldingFormData } from '$lib/types.js';
|
||||
|
||||
interface PortfolioData {
|
||||
@@ -23,8 +23,7 @@ class PortfolioStore {
|
||||
else this.refreshing = true;
|
||||
this.loadError = null;
|
||||
|
||||
window
|
||||
.fetch('/api/finance/portfolio')
|
||||
authFetch('/api/finance/portfolio')
|
||||
.then((res) =>
|
||||
res.ok
|
||||
? res.json()
|
||||
|
||||
@@ -1,6 +1,23 @@
|
||||
import type { AssetType } from '$types/asset.model.js';
|
||||
import type { LLMAnalysis } from '$types/finance.model.js';
|
||||
|
||||
// ── Auth types ────────────────────────────────────────────────────────────────
|
||||
|
||||
export type Role = 'trader' | 'viewer' | 'admin';
|
||||
|
||||
export interface AuthUser {
|
||||
id: string;
|
||||
email: string;
|
||||
role: Role;
|
||||
createdAt: string;
|
||||
lastLogin: string | null;
|
||||
}
|
||||
|
||||
export interface AuthResponse {
|
||||
token: string;
|
||||
user: AuthUser;
|
||||
}
|
||||
|
||||
/** Detailed display metrics rendered per asset row in the screener table. */
|
||||
export interface AssetDisplayMetrics {
|
||||
// ── Common ──────────────────────────────────────────────────────────
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
* Number and currency formatting utilities.
|
||||
*/
|
||||
|
||||
/** Formats a P/E ratio — e.g. 22.5 → "22.5x", null → "—" */
|
||||
/** Formats a P/E ratio — e.g. 26.72091 → "26.7x", null → "—" */
|
||||
export function fmtPE(v: number | null | undefined): string {
|
||||
return v != null ? v + 'x' : '—';
|
||||
return v != null ? v.toFixed(1) + 'x' : '—';
|
||||
}
|
||||
|
||||
/** Full currency format — e.g. 1234.5 → "$1,234.50" */
|
||||
|
||||
@@ -9,25 +9,49 @@
|
||||
*/
|
||||
export function verdictShort(label: string | null | undefined): string {
|
||||
if (!label) return '—';
|
||||
if (label.includes('High Conviction')) return 'Strong';
|
||||
if (label.includes('High Conviction')) return 'Strong Buy';
|
||||
if (label.includes('Speculative')) return 'Speculative';
|
||||
if (label.includes('Momentum')) return 'Momentum';
|
||||
if (label.includes('BUY')) return 'Buy';
|
||||
if (label.includes('Efficient')) return 'Efficient';
|
||||
if (label.includes('Attractive')) return 'Attractive';
|
||||
if (label.includes('Neutral')) return 'Hold';
|
||||
if (label.includes('REJECT')) return 'Reject';
|
||||
if (label.includes('Avoid')) return 'Avoid';
|
||||
return label.replace(/[🟢🟡🔴]/u, '').trim();
|
||||
return label.replace(/[\u{1F7E2}\u{1F7E1}\u{1F534}]/u, '').trim();
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a CSS colour class ('green' | 'yellow' | 'red') based on
|
||||
* the emoji prefix of a verdict label.
|
||||
* Returns a CSS colour class based on the verdict label content.
|
||||
*
|
||||
* Signal mapping:
|
||||
* 🟢 / High Conviction / Efficient / Attractive → green
|
||||
* 🟡 / Speculative / Momentum → yellow
|
||||
* Neutral / Hold / no signal → blue (calm, not alarming)
|
||||
* 🔴 / Avoid / Reject / REJECT → red
|
||||
*/
|
||||
export function vClass(label: string | null | undefined): 'green' | 'yellow' | 'red' {
|
||||
if (label?.startsWith('🟢')) return 'green';
|
||||
if (label?.startsWith('🟡')) return 'yellow';
|
||||
return 'red';
|
||||
export function vClass(
|
||||
label: string | null | undefined,
|
||||
): 'green' | 'yellow' | 'red' | 'blue' | 'gray' {
|
||||
if (!label) return 'gray';
|
||||
if (
|
||||
label.startsWith('🟢') ||
|
||||
label.includes('High Conviction') ||
|
||||
label.includes('Efficient') ||
|
||||
label.includes('Attractive')
|
||||
)
|
||||
return 'green';
|
||||
if (label.startsWith('🟡') || label.includes('Speculative') || label.includes('Momentum'))
|
||||
return 'yellow';
|
||||
if (
|
||||
label.startsWith('🔴') ||
|
||||
label.includes('Avoid') ||
|
||||
label.includes('Reject') ||
|
||||
label.includes('REJECT')
|
||||
)
|
||||
return 'red';
|
||||
if (label.includes('Neutral') || label.includes('Hold') || label.includes('BUY')) return 'blue';
|
||||
return 'gray';
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { page, navigating } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import '../styles/app.scss';
|
||||
import Spinner from '$lib/components/shared/Spinner.svelte';
|
||||
import { authStore } from '$lib/stores/auth.store.svelte.js';
|
||||
import type { Snippet } from 'svelte';
|
||||
let { children }: { children: Snippet } = $props();
|
||||
|
||||
@@ -9,6 +11,14 @@
|
||||
// so the nav link highlights immediately on click, not after load completes.
|
||||
const activePath = $derived($navigating?.to?.url?.pathname ?? $page.url.pathname);
|
||||
|
||||
// All routes except /auth/* require login
|
||||
$effect(() => {
|
||||
const path = $page.url.pathname;
|
||||
if (!path.startsWith('/auth/') && !authStore.isLoggedIn) {
|
||||
goto('/auth/login');
|
||||
}
|
||||
});
|
||||
|
||||
const navLabel = $derived(
|
||||
activePath === '/portfolio' ? 'Loading portfolio…' :
|
||||
activePath?.startsWith('/calls') ? 'Loading market calls…' :
|
||||
@@ -21,10 +31,22 @@
|
||||
<nav>
|
||||
<span class="brand">📊 Market Screener</span>
|
||||
<div class="links">
|
||||
<a href="/" class:active={activePath === '/'}>Screener</a>
|
||||
<a href="/portfolio" class:active={activePath === '/portfolio'}>Portfolio</a>
|
||||
<a href="/calls" class:active={activePath?.startsWith('/calls')}>Market Calls</a>
|
||||
<a href="/safe-buys" class:active={activePath === '/safe-buys'}>🛡 Safe Buys</a>
|
||||
{#if authStore.isLoggedIn}
|
||||
<a href="/" class:active={activePath === '/'}>Screener</a>
|
||||
<a href="/portfolio" class:active={activePath === '/portfolio'}>Portfolio</a>
|
||||
<a href="/calls" class:active={activePath?.startsWith('/calls')}>Market Calls</a>
|
||||
<a href="/safe-buys" class:active={activePath === '/safe-buys'}>🛡 Safe Buys</a>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="nav-auth">
|
||||
{#if authStore.isLoggedIn}
|
||||
<span class="nav-user">{authStore.user?.email}</span>
|
||||
<button class="btn-ghost btn-sm" onclick={() => { authStore.clearAuth(); goto('/auth/login'); }}>
|
||||
Sign out
|
||||
</button>
|
||||
{:else}
|
||||
<a href="/auth/login" class="btn-ghost btn-sm">Sign in</a>
|
||||
{/if}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { screenerStore } from '$lib/stores/screener.store.svelte.js';
|
||||
import SignalBadge from '$lib/components/shared/SignalBadge.svelte';
|
||||
import Spinner from '$lib/components/shared/Spinner.svelte';
|
||||
import VerdictPill from '$lib/components/shared/VerdictPill.svelte';
|
||||
import MarketContextStrip from '$lib/components/shared/MarketContextStrip.svelte';
|
||||
import AssetTable from '$lib/components/screener/AssetTable.svelte';
|
||||
import AnalysisSidebar from '$lib/components/screener/AnalysisSidebar.svelte';
|
||||
@@ -23,14 +21,11 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="page">
|
||||
<div class="screener-page">
|
||||
|
||||
<!-- ── Toolbar ────────────────────────────────────────────────────── -->
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-top">
|
||||
<button onclick={() => s.reloadCatalysts()} disabled={s.loading || s.loadingCats} class="btn-catalyst">
|
||||
{#if s.loadingCats}<Spinner size="sm" />{:else}📰 Today Market{/if}
|
||||
</button>
|
||||
<button
|
||||
onclick={() => searchOpen = !searchOpen}
|
||||
class="btn-search-toggle"
|
||||
@@ -46,6 +41,7 @@
|
||||
{#if searchOpen}
|
||||
<div class="search-row">
|
||||
<input
|
||||
class="search-input"
|
||||
bind:value={s.input}
|
||||
placeholder="AAPL, MSFT, VOO …"
|
||||
onkeydown={e => e.key === 'Enter' && s.screen()}
|
||||
@@ -72,43 +68,6 @@
|
||||
{/if}
|
||||
|
||||
{#if s.results && !s.loading && !s.loadingCats}
|
||||
<!-- ── Signal Summary ───────────────────────────────────────────── -->
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h2>Signal Summary</h2>
|
||||
<span class="count">{s.allAssets.length} assets</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-ticker">Ticker</th>
|
||||
<th>Type</th>
|
||||
<th>Signal</th>
|
||||
<th>Mkt-Adjusted</th>
|
||||
<th>Fundamental</th>
|
||||
<th title="Market cap tier (stocks only)">Cap</th>
|
||||
<th title="Growth / style classification (stocks only)">Style</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each s.allAssets as r}
|
||||
{@const dm = r.asset.displayMetrics ?? {}}
|
||||
<tr>
|
||||
<td class="ticker">{r.asset.ticker}</td>
|
||||
<td><span class="tag">{r.asset.type}</span></td>
|
||||
<td><SignalBadge signal={r.signal} /></td>
|
||||
<td><VerdictPill label={r.inflated.label} /></td>
|
||||
<td><VerdictPill label={r.fundamental.label} /></td>
|
||||
<td class="dim-cell">{dm['Cap Tier'] ?? '—'}</td>
|
||||
<td class="dim-cell">{dm['Style'] ?? '—'}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Per-type detail tables ────────────────────────────────────── -->
|
||||
{#each (['STOCK', 'ETF', 'BOND'] as const) as type}
|
||||
{#if s.results[type]?.length}
|
||||
@@ -136,50 +95,3 @@
|
||||
</div>
|
||||
|
||||
<AnalysisSidebar sidebar={s.sidebar} onClose={() => s.closeSidebar()} />
|
||||
|
||||
<style>
|
||||
.page { max-width: 1400px; padding-bottom: 60px; }
|
||||
|
||||
.toolbar { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
|
||||
.toolbar-top { display: flex; align-items: center; gap: 8px; }
|
||||
.search-row { display: flex; gap: 8px; align-items: center; }
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-input);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-secondary);
|
||||
padding: 10px var(--space-lg);
|
||||
font-size: var(--fs-md);
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
letter-spacing: 0.02em;
|
||||
outline: none;
|
||||
transition: border-color var(--transition);
|
||||
|
||||
&:focus { border-color: var(--blue); box-shadow: 0 0 0 2px #3b82f620; }
|
||||
}
|
||||
|
||||
.btn-search-toggle {
|
||||
background: var(--bg-card);
|
||||
color: var(--text-dim);
|
||||
border: 1px solid var(--border-input);
|
||||
font-size: 12px;
|
||||
padding: 8px var(--space-lg);
|
||||
|
||||
&:hover { background: #263347; color: var(--text-muted); }
|
||||
}
|
||||
|
||||
.screened-at {
|
||||
margin-left: auto;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-dimmer);
|
||||
}
|
||||
|
||||
.dim-cell { font-size: var(--fs-sm); color: var(--text-dim); white-space: nowrap; }
|
||||
|
||||
.error-list { padding: 12px var(--space-xl); display: flex; flex-direction: column; gap: 6px; }
|
||||
.error-item { color: var(--text-dim); font-size: 12px; }
|
||||
.error-item :global(.ticker) { color: var(--red); font-weight: 700; margin-right: 8px; }
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { authStore } from '$lib/stores/auth.store.svelte.js';
|
||||
|
||||
const BASE = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
let email = $state('');
|
||||
let error = $state<string | null>(null);
|
||||
let success = $state(false);
|
||||
let loading = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
if (authStore.isLoggedIn) goto('/');
|
||||
});
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
error = null;
|
||||
loading = true;
|
||||
try {
|
||||
const res = await fetch(`${BASE}/auth/forgot-password`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const { error: msg } = await res.json().catch(() => ({ error: 'Request failed' }));
|
||||
throw new Error(msg);
|
||||
}
|
||||
success = true;
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'Something went wrong';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="login-wrap">
|
||||
<form class="login-form" onsubmit={handleSubmit}>
|
||||
<h1 class="login-title">Forgot password</h1>
|
||||
<p class="login-subtitle">Enter your email and check the server console for a reset link.</p>
|
||||
|
||||
{#if error}
|
||||
<div class="error-banner">{error}</div>
|
||||
{/if}
|
||||
|
||||
{#if success}
|
||||
<div class="success-banner">
|
||||
Reset link printed to server console. Copy it and open it in your browser.
|
||||
</div>
|
||||
<p class="auth-switch">
|
||||
<a href="/auth/login">Back to sign in</a>
|
||||
</p>
|
||||
{:else}
|
||||
<label class="field">
|
||||
<span>Email</span>
|
||||
<input type="email" autocomplete="email" required bind:value={email} disabled={loading} />
|
||||
</label>
|
||||
|
||||
<button type="submit" class="btn-primary" disabled={loading}>
|
||||
{loading ? 'Sending…' : 'Send reset link'}
|
||||
</button>
|
||||
|
||||
<p class="auth-switch">
|
||||
<a href="/auth/login">Back to sign in</a>
|
||||
</p>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.login-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
margin: -0.75rem 0 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.success-banner {
|
||||
background: color-mix(in srgb, var(--signal-buy) 15%, transparent);
|
||||
border: 1px solid var(--signal-buy);
|
||||
color: var(--signal-buy);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.auth-switch {
|
||||
text-align: center;
|
||||
font-size: var(--fs-md);
|
||||
color: var(--text-dim);
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: var(--blue);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,120 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { login } from '$lib/api/auth.js';
|
||||
import { authStore } from '$lib/stores/auth.store.svelte.js';
|
||||
|
||||
let email = $state('');
|
||||
let password = $state('');
|
||||
let error = $state<string | null>(null);
|
||||
let loading = $state(false);
|
||||
|
||||
// If already logged in, redirect to home
|
||||
$effect(() => {
|
||||
if (authStore.isLoggedIn) goto('/');
|
||||
});
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
error = null;
|
||||
loading = true;
|
||||
try {
|
||||
const { token, user } = await login(email, password);
|
||||
authStore.setAuth(token, user);
|
||||
await goto('/');
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'Login failed';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="login-wrap">
|
||||
<form class="login-form" onsubmit={handleSubmit}>
|
||||
<h1 class="login-title">Market Screener</h1>
|
||||
<p class="login-subtitle">Sign in to continue</p>
|
||||
|
||||
{#if error}
|
||||
<div class="error-banner">{error}</div>
|
||||
{/if}
|
||||
|
||||
<label class="field">
|
||||
<span>Email</span>
|
||||
<input
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
required
|
||||
bind:value={email}
|
||||
disabled={loading}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span>Password</span>
|
||||
<input
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
minlength="8"
|
||||
bind:value={password}
|
||||
disabled={loading}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button type="submit" class="btn-primary" disabled={loading}>
|
||||
{loading ? 'Signing in…' : 'Sign in'}
|
||||
</button>
|
||||
|
||||
<p class="auth-switch">
|
||||
<a href="/auth/forgot-password">Forgot password?</a>
|
||||
</p>
|
||||
<p class="auth-switch">
|
||||
Don't have an account? <a href="/auth/register">Register</a>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Auth page layout only — input styles come from global _forms.scss */
|
||||
.login-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
margin: -0.75rem 0 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.auth-switch {
|
||||
text-align: center;
|
||||
font-size: var(--fs-md);
|
||||
color: var(--text-dim);
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: var(--blue);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1 @@
|
||||
export const ssr = false;
|
||||
@@ -0,0 +1,144 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { register } from '$lib/api/auth.js';
|
||||
import { authStore } from '$lib/stores/auth.store.svelte.js';
|
||||
|
||||
let email = $state('');
|
||||
let password = $state('');
|
||||
let confirm = $state('');
|
||||
let inviteCode = $state('');
|
||||
let error = $state<string | null>(null);
|
||||
let loading = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
if (authStore.isLoggedIn) goto('/');
|
||||
});
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
error = null;
|
||||
if (password !== confirm) {
|
||||
error = 'Passwords do not match';
|
||||
return;
|
||||
}
|
||||
loading = true;
|
||||
try {
|
||||
const { token, user } = await register(email, password, 'trader', inviteCode);
|
||||
authStore.setAuth(token, user);
|
||||
await goto('/');
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'Registration failed';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="login-wrap">
|
||||
<form class="login-form" onsubmit={handleSubmit}>
|
||||
<h1 class="login-title">Create account</h1>
|
||||
<p class="login-subtitle">Market Screener</p>
|
||||
|
||||
{#if error}
|
||||
<div class="error-banner">{error}</div>
|
||||
{/if}
|
||||
|
||||
<label class="field">
|
||||
<span>Email</span>
|
||||
<input type="email" autocomplete="email" required bind:value={email} disabled={loading} />
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span>Password <small>(min 8 characters)</small></span>
|
||||
<input
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
required
|
||||
minlength="8"
|
||||
bind:value={password}
|
||||
disabled={loading}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span>Confirm password</span>
|
||||
<input
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
required
|
||||
minlength="8"
|
||||
bind:value={confirm}
|
||||
disabled={loading}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span>Invite code</span>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
placeholder="Ask the admin for an invite code"
|
||||
bind:value={inviteCode}
|
||||
disabled={loading}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button type="submit" class="btn-primary" disabled={loading}>
|
||||
{loading ? 'Creating account…' : 'Create account'}
|
||||
</button>
|
||||
|
||||
<p class="auth-switch">
|
||||
Already have an account? <a href="/auth/login">Sign in</a>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Auth page layout only — input/select styles come from global _forms.scss */
|
||||
.login-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
margin: -0.75rem 0 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.field small {
|
||||
font-weight: 400;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.auth-switch {
|
||||
text-align: center;
|
||||
font-size: var(--fs-md);
|
||||
color: var(--text-dim);
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: var(--blue);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1 @@
|
||||
export const ssr = false;
|
||||
@@ -0,0 +1,157 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import { authStore } from '$lib/stores/auth.store.svelte.js';
|
||||
|
||||
const BASE = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
const token = $derived($page.url.searchParams.get('token') ?? '');
|
||||
|
||||
let password = $state('');
|
||||
let confirm = $state('');
|
||||
let error = $state<string | null>(null);
|
||||
let success = $state(false);
|
||||
let loading = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
if (authStore.isLoggedIn) goto('/');
|
||||
});
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
error = null;
|
||||
if (password !== confirm) {
|
||||
error = 'Passwords do not match';
|
||||
return;
|
||||
}
|
||||
if (!token) {
|
||||
error = 'Missing reset token — please use the full link from the console.';
|
||||
return;
|
||||
}
|
||||
loading = true;
|
||||
try {
|
||||
const res = await fetch(`${BASE}/auth/reset-password`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ token, password }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const { error: msg } = await res.json().catch(() => ({ error: 'Reset failed' }));
|
||||
throw new Error(msg);
|
||||
}
|
||||
success = true;
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'Something went wrong';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="login-wrap">
|
||||
<form class="login-form" onsubmit={handleSubmit}>
|
||||
<h1 class="login-title">Reset password</h1>
|
||||
<p class="login-subtitle">Choose a new password for your account.</p>
|
||||
|
||||
{#if error}
|
||||
<div class="error-banner">{error}</div>
|
||||
{/if}
|
||||
|
||||
{#if success}
|
||||
<div class="success-banner">
|
||||
Password updated. You can now sign in with your new password.
|
||||
</div>
|
||||
<a href="/auth/login" class="btn-primary" style="text-align:center;">Go to sign in</a>
|
||||
{:else}
|
||||
<label class="field">
|
||||
<span>New password <small>(min 8 characters)</small></span>
|
||||
<input
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
required
|
||||
minlength="8"
|
||||
bind:value={password}
|
||||
disabled={loading}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="field">
|
||||
<span>Confirm password</span>
|
||||
<input
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
required
|
||||
minlength="8"
|
||||
bind:value={confirm}
|
||||
disabled={loading}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button type="submit" class="btn-primary" disabled={loading}>
|
||||
{loading ? 'Updating…' : 'Set new password'}
|
||||
</button>
|
||||
|
||||
<p class="auth-switch">
|
||||
<a href="/auth/login">Back to sign in</a>
|
||||
</p>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.login-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
margin: -0.75rem 0 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.success-banner {
|
||||
background: color-mix(in srgb, var(--signal-buy) 15%, transparent);
|
||||
border: 1px solid var(--signal-buy);
|
||||
color: var(--signal-buy);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.auth-switch {
|
||||
text-align: center;
|
||||
font-size: var(--fs-md);
|
||||
color: var(--text-dim);
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: var(--blue);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.field small {
|
||||
font-weight: 400;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
</style>
|
||||
@@ -27,7 +27,7 @@
|
||||
const totalStrong = $derived(strongEtfs.length + strongBonds.length);
|
||||
</script>
|
||||
|
||||
<div class="page">
|
||||
<div class="safe-buys-page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1>🛡 Safe Buys</h1>
|
||||
@@ -231,60 +231,3 @@
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* ── Page ── unique to this route ──────────────────────────────── */
|
||||
.page { max-width: 1100px; padding-bottom: 60px; }
|
||||
|
||||
.page-header { margin-bottom: 20px; }
|
||||
h1 { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
|
||||
.subtitle { font-size: 12px; color: var(--text-dimmer); line-height: 1.5; }
|
||||
.subtitle strong { color: var(--text-muted); }
|
||||
|
||||
/* ── Strong Buy banner ───────────────────────────────────────────── */
|
||||
.strong-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
|
||||
|
||||
.strong-badge {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--green);
|
||||
background: var(--green-bg);
|
||||
padding: 4px 14px;
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
.strong-sub { font-size: var(--fs-sm); color: var(--text-dimmer); }
|
||||
|
||||
.empty-strong {
|
||||
padding: var(--space-3xl) 20px;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: var(--fs-md);
|
||||
color: var(--text-dim);
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ── Watch List ──────────────────────────────────────────────────── */
|
||||
.watch-header { display: flex; align-items: center; gap: 12px; margin-top: 28px; margin-bottom: 12px; }
|
||||
|
||||
.watch-label {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-card);
|
||||
padding: 4px 14px;
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
.watch-sub { font-size: var(--fs-sm); color: var(--text-dimmer); }
|
||||
|
||||
/* Watch sections are slightly dimmed — hover to focus */
|
||||
.watch-section { opacity: 0.75; }
|
||||
.watch-section:hover { opacity: 1; transition: opacity 0.2s; }
|
||||
|
||||
/* ── Score cell ─────────────────────────────────────────────────── */
|
||||
.score { color: var(--text-dimmer); font-size: var(--fs-sm); }
|
||||
</style>
|
||||
|
||||
@@ -13,15 +13,20 @@
|
||||
// Unified: replaces both .verdict-pill (screener) and .vpill (safe-buys)
|
||||
|
||||
$verdict-variants: (
|
||||
'green': (color: var(--green), bg: var(--green-bg)),
|
||||
'yellow': (color: var(--yellow), bg: var(--yellow-bg)),
|
||||
'red': (color: var(--red), bg: var(--red-bg)),
|
||||
'green': (color: var(--green), bg: var(--green-bg)),
|
||||
'yellow': (color: var(--yellow), bg: var(--yellow-bg)),
|
||||
'red': (color: var(--red), bg: var(--red-bg)),
|
||||
'blue': (color: #60a5fa, bg: #1e3a5f33),
|
||||
'gray': (color: var(--text-muted), bg: #1e293b),
|
||||
);
|
||||
|
||||
.verdict-pill {
|
||||
@extend %pill-base;
|
||||
font-size: var(--fs-sm);
|
||||
letter-spacing: 0.02em;
|
||||
// Ensure all pills have a consistent look — fallback to gray
|
||||
background: #1e293b;
|
||||
color: var(--text-muted);
|
||||
|
||||
@each $name, $vals in $verdict-variants {
|
||||
&.#{$name} {
|
||||
|
||||
@@ -23,7 +23,6 @@ nav {
|
||||
.links {
|
||||
display: flex;
|
||||
gap: var(--space-xs);
|
||||
margin-left: auto;
|
||||
|
||||
a {
|
||||
color: var(--text-dim);
|
||||
@@ -42,6 +41,29 @@ nav {
|
||||
}
|
||||
}
|
||||
|
||||
// ── Nav auth (sign in / user + sign out) ─────────────────────────────────
|
||||
|
||||
.nav-auth {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.nav-user {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-dim);
|
||||
max-width: 180px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 4px 10px;
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
main { flex: 1; padding: 28px 32px; }
|
||||
|
||||
// ── Navigation progress bar ───────────────────────────────────────────────
|
||||
|
||||
@@ -216,6 +216,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Reason column — wraps so it doesn't blow out the table width
|
||||
.col-reason {
|
||||
white-space: normal !important;
|
||||
max-width: 260px;
|
||||
min-width: 160px;
|
||||
line-height: 1.4;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.advice-table .sortable { cursor: pointer; user-select: none; &:hover { color: var(--text-muted); } }
|
||||
|
||||
.advice-row-actions { display: flex; gap: 4px; align-items: center; }
|
||||
|
||||
.btn-row-edit {
|
||||
|
||||
@@ -0,0 +1,822 @@
|
||||
// ── Screener route — +page.svelte, safe-buys/+page.svelte, AssetTable ────
|
||||
|
||||
// ── +page.svelte (screener) ───────────────────────────────────────────────
|
||||
|
||||
.screener-page { max-width: 1400px; padding-bottom: 60px; }
|
||||
|
||||
.toolbar { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
|
||||
.toolbar-top { display: flex; align-items: center; gap: 8px; }
|
||||
.search-row { display: flex; gap: 8px; align-items: center; }
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-input);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-secondary);
|
||||
padding: 10px var(--space-lg);
|
||||
font-size: var(--fs-md);
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
letter-spacing: 0.02em;
|
||||
outline: none;
|
||||
transition: border-color var(--transition);
|
||||
|
||||
&:focus { border-color: var(--blue); box-shadow: 0 0 0 2px #3b82f620; }
|
||||
}
|
||||
|
||||
.btn-search-toggle {
|
||||
background: var(--bg-card);
|
||||
color: var(--text-dim);
|
||||
border: 1px solid var(--border-input);
|
||||
font-size: 12px;
|
||||
padding: 8px var(--space-lg);
|
||||
|
||||
&:hover { background: #263347; color: var(--text-muted); }
|
||||
}
|
||||
|
||||
.screened-at {
|
||||
margin-left: auto;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-dimmer);
|
||||
}
|
||||
|
||||
.dim-cell { font-size: var(--fs-sm); color: var(--text-dim); white-space: nowrap; }
|
||||
|
||||
.error-list { padding: 12px var(--space-xl); display: flex; flex-direction: column; gap: 6px; }
|
||||
.error-item { color: var(--text-dim); font-size: 12px; }
|
||||
.error-item :global(.ticker) { color: var(--red); font-weight: 700; margin-right: 8px; }
|
||||
|
||||
// ── safe-buys/+page.svelte ────────────────────────────────────────────────
|
||||
|
||||
.safe-buys-page { max-width: 1100px; padding-bottom: 60px; }
|
||||
|
||||
.page-header { margin-bottom: 20px; }
|
||||
|
||||
.safe-buys-page {
|
||||
h1 { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
|
||||
.subtitle { font-size: 12px; color: var(--text-dimmer); line-height: 1.5; }
|
||||
.subtitle strong { color: var(--text-muted); }
|
||||
}
|
||||
|
||||
.strong-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
|
||||
|
||||
.strong-badge {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--green);
|
||||
background: var(--green-bg);
|
||||
padding: 4px 14px;
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
.strong-sub { font-size: var(--fs-sm); color: var(--text-dimmer); }
|
||||
|
||||
.empty-strong {
|
||||
padding: var(--space-3xl) 20px;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: var(--fs-md);
|
||||
color: var(--text-dim);
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.watch-header { display: flex; align-items: center; gap: 12px; margin-top: 28px; margin-bottom: 12px; }
|
||||
|
||||
.watch-label {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-card);
|
||||
padding: 4px 14px;
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
.watch-sub { font-size: var(--fs-sm); color: var(--text-dimmer); }
|
||||
|
||||
.watch-section { opacity: 0.75; }
|
||||
.watch-section:hover { opacity: 1; transition: opacity 0.2s; }
|
||||
|
||||
.score { color: var(--text-dimmer); font-size: var(--fs-sm); }
|
||||
|
||||
// ── AssetTable ────────────────────────────────────────────────────────────
|
||||
|
||||
.asset-section { margin-bottom: 24px; }
|
||||
|
||||
.analyze-btn {
|
||||
margin-left: auto;
|
||||
font-size: var(--fs-sm);
|
||||
padding: 5px 14px;
|
||||
}
|
||||
|
||||
// ── Inline filter row (inside thead) ─────────────────────────────────────
|
||||
|
||||
.filter-row td {
|
||||
padding: 4px var(--space-lg) !important;
|
||||
background: #0a1628;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
|
||||
// sticky first cell matches the header sticky column
|
||||
&:first-child {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background: #0a1628;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Pair of inputs side-by-side (e.g. price min/max)
|
||||
.th-filter-pair {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
max-width: 160px;
|
||||
|
||||
.th-filter { min-width: 0; width: 50%; padding-left: 5px; padding-right: 5px; }
|
||||
}
|
||||
|
||||
.th-filter-num {
|
||||
min-width: 0;
|
||||
-moz-appearance: textfield;
|
||||
&::-webkit-outer-spin-button,
|
||||
&::-webkit-inner-spin-button { -webkit-appearance: none; }
|
||||
}
|
||||
|
||||
// Checkbox + label for flag filter
|
||||
.th-filter-check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
|
||||
input[type='checkbox'] {
|
||||
accent-color: var(--blue);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Input / select sitting inside a th filter cell
|
||||
.th-filter {
|
||||
width: 100%;
|
||||
min-width: 80px;
|
||||
background: #0f1e33;
|
||||
border: 1px solid #1e3050;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-secondary);
|
||||
padding: 3px 7px;
|
||||
font-size: 11px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: border-color var(--transition);
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&:focus { border-color: var(--blue); box-shadow: 0 0 0 2px #3b82f620; }
|
||||
&::placeholder { color: var(--text-faint); }
|
||||
|
||||
// Style active (non-empty) filter
|
||||
&:not([value='']):not(:placeholder-shown) {
|
||||
border-color: var(--blue);
|
||||
color: #93c5fd;
|
||||
}
|
||||
}
|
||||
|
||||
// "Clear filters" link in section header
|
||||
.filter-clear-btn {
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-left: 4px;
|
||||
|
||||
&:hover { color: var(--red); }
|
||||
}
|
||||
|
||||
// Sortable column header
|
||||
.sort-th {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:hover { color: var(--text-muted); }
|
||||
}
|
||||
|
||||
.sort-icon {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
font-size: 10px;
|
||||
color: var(--text-faint);
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Expand toggle column
|
||||
.col-expand {
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
color: var(--text-faint);
|
||||
font-size: var(--fs-xs);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Prevent Verdict column from collapsing — pill needs room
|
||||
.asset-table th:nth-child(5),
|
||||
.asset-table td:nth-child(5) {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
// Prevent Signal column from collapsing
|
||||
.asset-table th:nth-child(4),
|
||||
.asset-table td:nth-child(4) {
|
||||
min-width: 110px;
|
||||
}
|
||||
|
||||
// ── Merged Signal/Verdict pill ────────────────────────────────────────────
|
||||
|
||||
.signal-verdict-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
// Main verdict pill — colored by signal class
|
||||
.sv-pill {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 2px 9px;
|
||||
border-radius: var(--radius-pill);
|
||||
letter-spacing: 0.03em;
|
||||
white-space: nowrap;
|
||||
width: fit-content;
|
||||
|
||||
&.sv-strong { background: #14532d33; color: #4ade80; border: 1px solid #14532d66; }
|
||||
&.sv-momentum { background: #1e3a5f33; color: #60a5fa; border: 1px solid #1e3a5f66; }
|
||||
&.sv-spec { background: #7c2d1233; color: #fb923c; border: 1px solid #7c2d1266; }
|
||||
&.sv-neutral { background: #1e293b; color: #94a3b8; border: 1px solid #334155; }
|
||||
&.sv-avoid { background: #450a0a33; color: #f87171; border: 1px solid #450a0a66; }
|
||||
}
|
||||
|
||||
// Sub-label showing the full signal text
|
||||
.sv-signal-label {
|
||||
font-size: 10px;
|
||||
color: var(--text-faint);
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// ── Score dot scale ───────────────────────────────────────────────────────
|
||||
|
||||
.score-cell {
|
||||
white-space: nowrap;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.score-dots {
|
||||
display: inline-flex;
|
||||
gap: 3px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.score-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #1e3050;
|
||||
border: 1px solid #2a4060;
|
||||
transition: background 0.15s;
|
||||
|
||||
&.on { background: var(--blue); border-color: #60a5fa; box-shadow: 0 0 4px #3b82f644; }
|
||||
}
|
||||
|
||||
.score-num {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.score-fail {
|
||||
color: var(--red);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
// ── Flags badge with hover-expand tooltip ────────────────────────────────
|
||||
|
||||
.flags-cell {
|
||||
position: relative;
|
||||
min-width: 48px;
|
||||
}
|
||||
|
||||
.flags-badge {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
|
||||
&:hover .flags-tooltip { opacity: 1; pointer-events: auto; }
|
||||
}
|
||||
|
||||
.flags-count {
|
||||
display: inline-block;
|
||||
background: #431a0033;
|
||||
border: 1px solid #431a0066;
|
||||
color: #fb923c;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-pill);
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.flags-tooltip {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 6px);
|
||||
left: 0;
|
||||
z-index: 50;
|
||||
background: #0c1829;
|
||||
border: 1px solid #1e3a5f;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 8px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 180px;
|
||||
max-width: 280px;
|
||||
box-shadow: 0 8px 24px #00000066;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
// Summary row — clickable; open state gets left accent bar + lifted bg
|
||||
// NOTE: background is set on the <tr> so that position:sticky td:first-child
|
||||
// inherits it (sticky cells create their own stacking context).
|
||||
.summary-row {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover { background: #1e2f48; }
|
||||
|
||||
&.row-open {
|
||||
background: #1a2f4a;
|
||||
|
||||
td { border-bottom: none !important; }
|
||||
|
||||
// Brighter left accent on the expand cell
|
||||
.col-expand {
|
||||
box-shadow: inset 3px 0 0 #60a5fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Inline detail row ────────────────────────────────────────────────────
|
||||
|
||||
.detail-row td {
|
||||
padding: 0 !important;
|
||||
border-bottom: none !important;
|
||||
box-shadow: inset 0 -3px 0 #1e3a5f;
|
||||
}
|
||||
.detail-cell { padding: 0 !important; }
|
||||
|
||||
// Two-column layout: left = metrics (55%), right = bar chart (45%)
|
||||
// min-width: 0 on each child prevents grid blowout
|
||||
.detail-panel {
|
||||
display: grid;
|
||||
grid-template-columns: 55% 45%;
|
||||
gap: 0;
|
||||
background: #0c1829;
|
||||
border-top: 2px solid var(--blue);
|
||||
border-left: 3px solid var(--blue);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// ── Left zone ────────────────────────────────────────────────────────────
|
||||
.dp-left {
|
||||
min-width: 0;
|
||||
padding: 16px 18px 16px 16px;
|
||||
border-right: 1px solid #1e3a5f;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// ── Right zone ───────────────────────────────────────────────────────────
|
||||
.dp-right {
|
||||
min-width: 0;
|
||||
padding: 16px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
// ── Section title ─────────────────────────────────────────────────────────
|
||||
.dp-title {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: #4a7aaa;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.dp-mode-note {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
color: #3a5a7a;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
// ── Metric grid cards ─────────────────────────────────────────────────────
|
||||
// Fixed 4-col grid on left panel — no min-width auto-fill to prevent overflow
|
||||
.dp-metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.dp-metric-card {
|
||||
min-width: 0;
|
||||
background: #0f2040;
|
||||
border: 1px solid #1a3050;
|
||||
border-radius: 6px;
|
||||
padding: 5px 7px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dp-mc-label {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #3d5a7a;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dp-mc-value {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// ── Gate badge chips ──────────────────────────────────────────────────────
|
||||
.dp-gates-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dp-gate-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 3px 10px;
|
||||
border-radius: var(--radius-pill);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.dp-gate-chip-pass {
|
||||
background: #14532d33;
|
||||
color: var(--green);
|
||||
border-color: #14532d66;
|
||||
}
|
||||
|
||||
.dp-gate-chip-fail {
|
||||
background: #450a0a33;
|
||||
color: var(--red);
|
||||
border-color: #450a0a66;
|
||||
}
|
||||
|
||||
// ── Risk flag pills ───────────────────────────────────────────────────────
|
||||
.dp-risk-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.dp-risk-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 2px 9px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: #431a0033;
|
||||
color: #fb923c;
|
||||
border: 1px solid #431a0066;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// ── Horizontal bar chart (factor scores) ─────────────────────────────────
|
||||
.dp-bar-chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dp-bar-row {
|
||||
display: grid;
|
||||
grid-template-columns: 88px 1fr 36px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dp-bar-label {
|
||||
font-size: 12px;
|
||||
color: #6b8aad;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dp-bar-track {
|
||||
height: 10px;
|
||||
background: #0f2040;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #1a3050;
|
||||
}
|
||||
|
||||
.dp-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
|
||||
&.dp-bar-pos {
|
||||
background: linear-gradient(90deg, #16a34a, #4ade80);
|
||||
box-shadow: 0 0 6px #4ade8044;
|
||||
}
|
||||
|
||||
&.dp-bar-neg {
|
||||
background: linear-gradient(90deg, #991b1b, #f87171);
|
||||
box-shadow: 0 0 6px #f8717144;
|
||||
}
|
||||
}
|
||||
|
||||
.dp-bar-val {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// ── Gate failures (shown instead of bars when gates fail) ─────────────────
|
||||
.dp-failures {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.dp-failure-item {
|
||||
font-size: 13px;
|
||||
color: #f87171;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.dp-no-factors {
|
||||
font-size: 12px;
|
||||
color: #3a5a7a;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
/* score-cell base — layout only; visual rules are in the dot-scale block above */
|
||||
|
||||
/* Classification tags */
|
||||
.cap-tag { color: var(--blue-light, #93c5fd); border-color: var(--blue-dim, #1e3a5f); }
|
||||
.style-tag { color: var(--text-muted); }
|
||||
|
||||
/* Signed % colouring */
|
||||
.pos { color: var(--green); }
|
||||
.neg { color: var(--red); }
|
||||
|
||||
/* Analyst label — not a number */
|
||||
.analyst-cell {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* .flag / .flag-more removed — replaced by .flags-badge hover-expand system */
|
||||
|
||||
// ── MarketContext (collapsible card) ──────────────────────────────────────
|
||||
|
||||
.ctx-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 10px;
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
|
||||
.ctx-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px var(--space-lg);
|
||||
}
|
||||
|
||||
.ctx-label {
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-dimmer);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.ctx-value {
|
||||
font-size: var(--fs-lg);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.ctx-sub {
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--text-dim);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.ctx-toggle {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-dimmer);
|
||||
font-size: var(--fs-sm);
|
||||
cursor: pointer;
|
||||
padding: 2px 8px;
|
||||
|
||||
&:hover { color: var(--text-muted); }
|
||||
}
|
||||
|
||||
// ── MarketContextStrip — colorful bubbles ─────────────────────────────────
|
||||
|
||||
.bubble-strip {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 8px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
padding: 10px 8px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid transparent;
|
||||
gap: 2px;
|
||||
transition: transform 0.12s ease, box-shadow 0.12s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 18px #0006;
|
||||
}
|
||||
}
|
||||
|
||||
.bubble-val {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.bubble-label {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
opacity: 0.72;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
// Individual color themes
|
||||
.bubble-indigo { background: #312e8133; border-color: #4f46e566; color: #a5b4fc; }
|
||||
.bubble-rose { background: #4c0d1533; border-color: #e1184866; color: #fda4af; }
|
||||
.bubble-emerald { background: #05401a33; border-color: #10b98166; color: #6ee7b7; }
|
||||
.bubble-sky { background: #082f4933; border-color: #0ea5e966; color: #7dd3fc; }
|
||||
.bubble-violet { background: #2e1a6e33; border-color: #7c3aed66; color: #c4b5fd; }
|
||||
.bubble-amber { background: #451a0333; border-color: #f59e0b66; color: #fcd34d; }
|
||||
.bubble-teal { background: #042f2e33; border-color: #14b8a666; color: #5eead4; }
|
||||
.bubble-slate { background: #1e293b; border-color: #47556966; color: #94a3b8; }
|
||||
.bubble-red { background: #450a0a33; border-color: #ef444466; color: #fca5a5; }
|
||||
.bubble-blue { background: #1e3a5f33; border-color: #3b82f666; color: #93c5fd; }
|
||||
.bubble-orange { background: #431a0333; border-color: #f9731666; color: #fdba74; }
|
||||
|
||||
// ── MarketContext (collapsible card grid) ─────────────────────────────────
|
||||
|
||||
.ctx-wrap { margin-bottom: 20px; }
|
||||
|
||||
.ctx-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ctx-toggle-label {
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--text-dimmer);
|
||||
}
|
||||
|
||||
.ctx-toggle-chevron { font-size: var(--fs-2xs); color: var(--text-faint); }
|
||||
|
||||
.ctx-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ctx-card { background: var(--bg-card); border-radius: var(--radius-md); padding: 12px var(--space-lg); }
|
||||
|
||||
.ctx-label-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
|
||||
.ctx-card-label { font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
|
||||
// Tooltip
|
||||
.tip-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
|
||||
|
||||
.tip-anchor {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--text-faint);
|
||||
color: var(--text-dimmer);
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 700;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.tip-box {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: calc(100% + 6px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 220px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--text-faint);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px 10px;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
z-index: 50;
|
||||
pointer-events: none;
|
||||
white-space: normal;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 5px solid transparent;
|
||||
border-top-color: var(--text-faint);
|
||||
}
|
||||
}
|
||||
|
||||
.tip-wrap:hover .tip-box { display: block; }
|
||||
|
||||
.ctx-value { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-top: 4px; }
|
||||
@@ -17,7 +17,7 @@ table {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-faint);
|
||||
color: var(--text-dim);
|
||||
border-bottom: 1px solid var(--border);
|
||||
white-space: nowrap;
|
||||
background: var(--bg-elevated);
|
||||
@@ -27,11 +27,7 @@ table {
|
||||
tr {
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-card-hover);
|
||||
|
||||
td:first-child { background: var(--bg-card-hover); }
|
||||
}
|
||||
&:hover { background: var(--bg-card-hover); }
|
||||
}
|
||||
|
||||
td {
|
||||
@@ -40,11 +36,12 @@ table {
|
||||
white-space: nowrap;
|
||||
font-size: var(--fs-md);
|
||||
|
||||
// Sticky first column (body)
|
||||
// Sticky first column — inherits row background so hover/select states
|
||||
// paint through correctly across the full row width
|
||||
&:first-child {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background: var(--bg-surface);
|
||||
background: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,3 +13,4 @@
|
||||
@use 'sidebar';
|
||||
@use 'calls';
|
||||
@use 'portfolio';
|
||||
@use 'screener';
|
||||
|
||||
Reference in New Issue
Block a user