UI enhancemnts
This commit is contained in:
saikiranvella
@@ -4,6 +4,9 @@
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
|
||||
@@ -6,3 +6,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';
|
||||
export { fetchWatchlist, pinTicker, unpinTicker } from './watchlist.js';
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import { authFetch } from './auth.js';
|
||||
|
||||
const BASE = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
export async function fetchWatchlist(): Promise<{ tickers: string[] }> {
|
||||
const res = await authFetch(`${BASE}/api/watchlist`);
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function pinTicker(ticker: string): Promise<void> {
|
||||
const res = await authFetch(`${BASE}/api/watchlist/${encodeURIComponent(ticker)}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'text/plain' },
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
}
|
||||
|
||||
export async function unpinTicker(ticker: string): Promise<void> {
|
||||
const res = await authFetch(`${BASE}/api/watchlist/${encodeURIComponent(ticker)}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'text/plain' },
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
}
|
||||
@@ -2,7 +2,100 @@
|
||||
import Spinner from '$lib/components/shared/Spinner.svelte';
|
||||
import type { SidebarState } from '$lib/types.js';
|
||||
|
||||
let { sidebar, onClose }: { sidebar: SidebarState; onClose: () => void } = $props();
|
||||
let { sidebar, onClose, onScreenTickers }: {
|
||||
sidebar: SidebarState;
|
||||
onClose: () => void;
|
||||
onScreenTickers?: (tickers: string[]) => void;
|
||||
} = $props();
|
||||
|
||||
// ── Helpers ──────────────────────────────────────────────────────────────
|
||||
|
||||
function sentimentClass(s: string) {
|
||||
if (s === 'BULLISH') return 'sent-bullish';
|
||||
if (s === 'BEARISH') return 'sent-bearish';
|
||||
return 'sent-neutral';
|
||||
}
|
||||
|
||||
function sentimentEmoji(s: string) {
|
||||
if (s === 'BULLISH') return '▲';
|
||||
if (s === 'BEARISH') return '▼';
|
||||
return '⊙';
|
||||
}
|
||||
|
||||
function sentimentLabel(s: string) {
|
||||
if (s === 'BULLISH') return 'Bullish';
|
||||
if (s === 'BEARISH') return 'Bearish';
|
||||
return 'Neutral';
|
||||
}
|
||||
|
||||
// Derive industry impact from reason text heuristically
|
||||
function industryImpact(reason: string): 'bear' | 'bull' | 'neut' {
|
||||
const r = reason.toLowerCase();
|
||||
const bearWords = ['weigh', 'pressure', 'risk', 'decline', 'weaken', 'concern', 'miss', 'delay', 'slowdown', 'threat', 'compress', 'reduce', 'cut', 'loss'];
|
||||
const bullWords = ['benefit', 'strength', 'tailwind', 'inflow', 'growth', 'gain', 'boost', 'rise', 'improve', 'outperform'];
|
||||
const bearScore = bearWords.filter(w => r.includes(w)).length;
|
||||
const bullScore = bullWords.filter(w => r.includes(w)).length;
|
||||
if (bearScore > bullScore) return 'bear';
|
||||
if (bullScore > bearScore) return 'bull';
|
||||
return 'neut';
|
||||
}
|
||||
|
||||
function biasClass(bias: string) {
|
||||
if (bias === 'BULL') return 'sig-bull';
|
||||
if (bias === 'BEAR') return 'sig-bear';
|
||||
return 'sig-neut';
|
||||
}
|
||||
|
||||
function biasLabel(bias: string) {
|
||||
if (bias === 'BULL') return '▲ BULLISH';
|
||||
if (bias === 'BEAR') return '▼ BEARISH';
|
||||
return '⊙ WATCH';
|
||||
}
|
||||
|
||||
// sensitivity 1–5 → confidence label + class
|
||||
function confLabel(s: number): string {
|
||||
if (s >= 4) return 'HIGH confidence';
|
||||
if (s >= 2) return 'MED confidence';
|
||||
return 'LOW confidence';
|
||||
}
|
||||
|
||||
function confClass(s: number): string {
|
||||
if (s >= 4) return 'conf-high';
|
||||
if (s >= 2) return 'conf-med';
|
||||
return 'conf-low';
|
||||
}
|
||||
|
||||
// sensitivity → confidence bar %
|
||||
function confPct(s: number): number {
|
||||
return Math.round((s / 5) * 100);
|
||||
}
|
||||
|
||||
// horizon → human label for catalyst tag
|
||||
function horizonLabel(h: string): string {
|
||||
if (h === 'SHORT') return 'Near-term';
|
||||
if (h === 'LONG') return 'Long-term';
|
||||
return 'Medium-term';
|
||||
}
|
||||
|
||||
function screenAll() {
|
||||
if (!sidebar.analysis) return;
|
||||
const tickers = sidebar.analysis.relatedTickers.map(rt => rt.ticker);
|
||||
onScreenTickers?.(tickers);
|
||||
onClose();
|
||||
}
|
||||
|
||||
// Bold key phrases — wrap words > 6 chars that are all-caps or capitalised nouns
|
||||
// (simple heuristic: bold ticker-like tokens and numbers with %)
|
||||
function boldKeyTerms(text: string): string {
|
||||
// Bold anything that looks like a ticker (2–5 uppercase letters)
|
||||
return text.replace(/\b([A-Z]{2,5})\b/g, '<strong>$1</strong>');
|
||||
}
|
||||
|
||||
// Overall confidence from analysis: average sensitivity
|
||||
function overallConf(tickers: { sensitivity: number }[]): number {
|
||||
if (!tickers.length) return 50;
|
||||
return Math.round(tickers.reduce((s, t) => s + t.sensitivity, 0) / tickers.length / 5 * 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if sidebar.open}
|
||||
@@ -17,16 +110,19 @@
|
||||
></div>
|
||||
|
||||
<!-- Panel -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<div class="sidebar-title">
|
||||
<span>🤖 LLM Analysis</span>
|
||||
{#if sidebar.type}<span class="sidebar-type">{sidebar.type}S</span>{/if}
|
||||
</div>
|
||||
<aside class="sidebar as-panel">
|
||||
<!-- Header -->
|
||||
<div class="sidebar-header as-header">
|
||||
<span class="as-icon">🤖</span>
|
||||
<span class="sidebar-title as-title">LLM Analysis</span>
|
||||
{#if sidebar.type}
|
||||
<span class="sidebar-type as-scope">{sidebar.type}S</span>
|
||||
{/if}
|
||||
<button class="sidebar-close" onclick={onClose}>✕</button>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-body">
|
||||
<div class="sidebar-body as-body">
|
||||
|
||||
{#if sidebar.loading}
|
||||
<div class="sidebar-loading">
|
||||
<Spinner size="lg" label="Analyzing tickers…" />
|
||||
@@ -37,46 +133,464 @@
|
||||
|
||||
{:else if sidebar.analysis}
|
||||
{@const a = sidebar.analysis}
|
||||
<div class="sb-sentiment-row">
|
||||
<span class="sentiment-pill" data-sentiment={a.sentiment}>{a.sentiment}</span>
|
||||
</div>
|
||||
{@const conf = overallConf(a.relatedTickers ?? [])}
|
||||
|
||||
<p class="sb-summary">{a.summary}</p>
|
||||
|
||||
<h3 class="sb-sub">Affected Industries</h3>
|
||||
<div class="sb-list">
|
||||
{#each a.affectedIndustries ?? [] as ind}
|
||||
<div class="sb-item">
|
||||
<span class="sb-name">{ind.name}</span>
|
||||
<span class="sb-reason">{ind.reason}</span>
|
||||
<!-- ── SENTIMENT HERO ── -->
|
||||
<div class="as-sentiment-hero">
|
||||
<div class="as-sent-top">
|
||||
<span class="as-sent-badge {sentimentClass(a.sentiment)}">
|
||||
{sentimentEmoji(a.sentiment)} {sentimentLabel(a.sentiment)}
|
||||
</span>
|
||||
<div class="as-sent-meta">
|
||||
<span class="as-sent-model">claude-sonnet</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- confidence bar -->
|
||||
<div class="as-conf-row">
|
||||
<span class="as-conf-label">Confidence</span>
|
||||
<div class="as-conf-track">
|
||||
<div class="as-conf-fill" style="width:{conf}%"></div>
|
||||
</div>
|
||||
<span class="as-conf-pct">{conf}%</span>
|
||||
</div>
|
||||
|
||||
<p class="as-summary">{a.summary}</p>
|
||||
</div>
|
||||
|
||||
<h3 class="sb-sub">Related Tickers to Watch</h3>
|
||||
<div class="sb-list">
|
||||
{#each a.relatedTickers ?? [] as rt}
|
||||
<div class="sb-item">
|
||||
<div class="sb-ticker-row">
|
||||
<span class="sb-name ticker">{rt.ticker}</span>
|
||||
<div class="sb-chips">
|
||||
{#if rt.bias}
|
||||
<span class="sb-chip sb-bias" data-bias={rt.bias}>{rt.bias}</span>
|
||||
{/if}
|
||||
{#if rt.horizon}
|
||||
<span class="sb-chip sb-horizon">{rt.horizon}</span>
|
||||
{/if}
|
||||
{#if rt.sensitivity}
|
||||
<span class="sb-chip sb-sensitivity" title="Sensitivity {rt.sensitivity}/5">S{rt.sensitivity}</span>
|
||||
{/if}
|
||||
<!-- ── AFFECTED INDUSTRIES ── -->
|
||||
{#if (a.affectedIndustries ?? []).length > 0}
|
||||
<div class="as-section">
|
||||
<div class="as-section-header">
|
||||
<span class="as-section-title">Affected Industries</span>
|
||||
<span class="as-section-count">{a.affectedIndustries.length}</span>
|
||||
<div class="as-section-divider"></div>
|
||||
</div>
|
||||
|
||||
<div class="as-industry-list">
|
||||
{#each a.affectedIndustries as ind}
|
||||
{@const impact = industryImpact(ind.reason)}
|
||||
<div class="as-ind-card {impact}">
|
||||
<div class="as-ind-top">
|
||||
<span class="as-ind-name">{ind.name}</span>
|
||||
{#if impact === 'bear'}
|
||||
<span class="as-impact-chip imp-bear">▼ BEAR</span>
|
||||
{:else if impact === 'bull'}
|
||||
<span class="as-impact-chip imp-bull">▲ BULL</span>
|
||||
{:else}
|
||||
<span class="as-impact-chip imp-neut">⊙ MIXED</span>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="as-ind-body">{@html boldKeyTerms(ind.reason)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="sb-reason">{rt.reason}</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- ── RELATED TICKERS ── -->
|
||||
{#if (a.relatedTickers ?? []).length > 0}
|
||||
<div class="as-section">
|
||||
<div class="as-section-header">
|
||||
<span class="as-section-title">Tickers to Watch</span>
|
||||
<span class="as-section-count">{a.relatedTickers.length}</span>
|
||||
<div class="as-section-divider"></div>
|
||||
</div>
|
||||
|
||||
<div class="as-ticker-list">
|
||||
{#each a.relatedTickers as rt}
|
||||
<div class="as-tick-card">
|
||||
<div class="as-tick-top">
|
||||
<span class="as-tick-sym">{rt.ticker}</span>
|
||||
<span class="as-signal-chip {biasClass(rt.bias)}">{biasLabel(rt.bias)}</span>
|
||||
</div>
|
||||
<div class="as-tick-meta">
|
||||
<span class="as-conf-chip {confClass(rt.sensitivity)}">{confLabel(rt.sensitivity)}</span>
|
||||
<span
|
||||
class="as-score-tier"
|
||||
title="Sensitivity score: S{rt.sensitivity} = {rt.sensitivity}/5 — how directly this ticker is affected by the news catalyst"
|
||||
>S{rt.sensitivity}/5</span>
|
||||
<span class="as-horizon-chip">{horizonLabel(rt.horizon)}</span>
|
||||
</div>
|
||||
<p class="as-tick-thesis">{@html boldKeyTerms(rt.reason)}</p>
|
||||
<div class="as-catalyst-tag">⚡ {rt.horizon} horizon catalyst</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- ── SCREENER BRIDGE ── -->
|
||||
{#if onScreenTickers && (a.relatedTickers ?? []).length > 0}
|
||||
<div class="as-screener-prompt">
|
||||
<div class="as-sp-text">
|
||||
<strong>Screen these tickers</strong> to see current signals, scores, and gate results.
|
||||
</div>
|
||||
<button class="as-sp-btn" onclick={screenAll}>Screen All →</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{/if}
|
||||
</div>
|
||||
</aside>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
/* ── Sentiment hero ──────────────────────────────────────────────────── */
|
||||
.as-sentiment-hero {
|
||||
padding: 18px 16px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.as-sent-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.as-sent-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 6px 16px;
|
||||
border-radius: 24px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.sent-bullish { background: #0d2e1a; color: #34d17a; border: 1px solid #1a4a2a; }
|
||||
.sent-neutral { background: var(--blue-badge); color: var(--blue-muted); border: 1px solid #1a3a5c; }
|
||||
.sent-bearish { background: #2e0d0d; color: #f05a5a; border: 1px solid #4a1a1a; }
|
||||
|
||||
.as-sent-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.as-sent-model {
|
||||
font-size: 10px;
|
||||
padding: 2px 7px;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-card);
|
||||
color: var(--text-dimmer);
|
||||
font-family: var(--font-mono);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* confidence bar */
|
||||
.as-conf-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.as-conf-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-dimmer);
|
||||
width: 68px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.as-conf-track {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background: var(--border);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.as-conf-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(90deg, var(--blue) 0%, #2dd4bf 100%);
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.as-conf-pct {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--blue-muted);
|
||||
width: 34px;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.as-summary {
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
color: var(--text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.as-summary :global(strong) { color: var(--text-secondary); font-weight: 600; }
|
||||
|
||||
/* ── Section ─────────────────────────────────────────────────────────── */
|
||||
.as-section {
|
||||
padding: 14px 16px 0;
|
||||
}
|
||||
|
||||
.as-section:last-of-type {
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.as-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.as-section-title {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-dimmer);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.as-section-count {
|
||||
font-size: 10px;
|
||||
font-family: var(--font-mono);
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
background: var(--bg-card);
|
||||
color: var(--text-dimmer);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.as-section-divider {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
/* ── Industry cards ──────────────────────────────────────────────────── */
|
||||
.as-industry-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.as-ind-card {
|
||||
border-radius: 8px;
|
||||
padding: 11px 12px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
border-left-width: 3px;
|
||||
}
|
||||
|
||||
.as-ind-card.bear { border-left-color: #f05a5a; }
|
||||
.as-ind-card.bull { border-left-color: #34d17a; }
|
||||
.as-ind-card.neut { border-left-color: var(--border); }
|
||||
|
||||
.as-ind-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.as-ind-name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.as-impact-chip {
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.imp-bear { background: #2e0d0d; color: #f05a5a; border: 1px solid #4a1a1a; }
|
||||
.imp-bull { background: #0d2e1a; color: #34d17a; border: 1px solid #1a4a2a; }
|
||||
.imp-neut { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); }
|
||||
|
||||
.as-ind-body {
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.as-ind-body :global(strong) { color: var(--text-secondary); font-weight: 600; }
|
||||
|
||||
/* ── Ticker cards ────────────────────────────────────────────────────── */
|
||||
.as-ticker-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.as-tick-card {
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
transition: border-color 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
|
||||
.as-tick-card:hover {
|
||||
border-color: var(--border-input);
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.as-tick-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.as-tick-sym {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-mono);
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.as-signal-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 9px;
|
||||
border-radius: 20px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.sig-bear { background: #2e0d0d; color: #f05a5a; border: 1px solid #4a1a1a; }
|
||||
.sig-bull { background: #0d2e1a; color: #34d17a; border: 1px solid #1a4a2a; }
|
||||
.sig-neut { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); }
|
||||
|
||||
.as-tick-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.as-conf-chip {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-mono);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.conf-high { background: #0d2e1a; color: #34d17a; }
|
||||
.conf-med { background: #2e2000; color: #f0b429; }
|
||||
.conf-low { background: var(--bg-elevated); color: var(--text-dimmer); border: 1px solid var(--border); }
|
||||
|
||||
.as-score-tier {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-dimmer);
|
||||
padding: 2px 7px;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
cursor: help;
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.as-horizon-chip {
|
||||
font-size: 10px;
|
||||
color: var(--text-dimmer);
|
||||
padding: 2px 7px;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.as-tick-thesis {
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-muted);
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--border);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.as-tick-thesis :global(strong) { color: var(--text-secondary); font-weight: 600; }
|
||||
|
||||
.as-catalyst-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #a78bfa;
|
||||
background: #1e1535;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #2d2050;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
/* ── Screener bridge ─────────────────────────────────────────────────── */
|
||||
.as-screener-prompt {
|
||||
margin: 4px 16px 16px;
|
||||
padding: 12px 14px;
|
||||
background: var(--blue-badge);
|
||||
border: 1px solid #1a3a5c;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.as-sp-text {
|
||||
font-size: 12px;
|
||||
color: var(--blue-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.as-sp-text :global(strong) { font-weight: 600; color: var(--blue-muted); }
|
||||
|
||||
.as-sp-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 6px 14px;
|
||||
border-radius: 6px;
|
||||
background: var(--blue);
|
||||
color: #000;
|
||||
border: none;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.as-sp-btn:hover { background: #7ec0ff; }
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { sigOrd, sorted } from '$lib/utils.js';
|
||||
import Spinner from '$lib/components/shared/Spinner.svelte';
|
||||
import GlossaryPanel from '$lib/components/screener/GlossaryPanel.svelte';
|
||||
import SignalModal from '$lib/components/screener/SignalModal.svelte';
|
||||
import type { AssetType, AssetResult } from '$lib/types.js';
|
||||
import { watchlistStore } from '$lib/stores/watchlist.store.svelte.js';
|
||||
|
||||
let {
|
||||
type,
|
||||
@@ -15,9 +18,12 @@
|
||||
onAnalyze: () => void;
|
||||
} = $props();
|
||||
|
||||
let mode = $state('inflated');
|
||||
let expanded = $state<string | null>(null);
|
||||
let sortCol = $state<string | null>(null);
|
||||
let mode = $state('inflated');
|
||||
let expanded = $state<string | null>(null);
|
||||
let glossaryOpen = $state(false);
|
||||
let specModalRow = $state<AssetResult | null>(null);
|
||||
let glossaryFocusKey = $state<string | null>(null);
|
||||
let sortCol = $state<string | null>(null);
|
||||
let sortAsc = $state(true);
|
||||
let filterTicker = $state('');
|
||||
let filterSignal = $state('');
|
||||
@@ -162,6 +168,21 @@
|
||||
return n > 0 ? 'pos' : n < 0 ? 'neg' : '';
|
||||
}
|
||||
|
||||
// Derive the set of metric keys present in the currently-expanded row
|
||||
// so the glossary can highlight them contextually.
|
||||
const METRIC_KEYS_STOCK = ['P/E','PEG','ROE%','OpMgn%','GrossM%','FCF Yld%','D/E','52W Chg','From High','Analyst','Upside','DCF Safety'];
|
||||
const METRIC_KEYS_ETF = ['Exp Ratio%','5Y Return%','Yield%'];
|
||||
const METRIC_KEYS_BOND = ['YTM%','Duration','Rating'];
|
||||
|
||||
function activeGlossaryMetrics(): string[] {
|
||||
if (!expanded) return [];
|
||||
const row = rows.find((r) => r.asset.ticker === expanded);
|
||||
if (!row) return [];
|
||||
const m = row.asset.displayMetrics ?? {};
|
||||
const keys = type === 'STOCK' ? METRIC_KEYS_STOCK : type === 'ETF' ? METRIC_KEYS_ETF : METRIC_KEYS_BOND;
|
||||
return keys.filter((k) => m[k] != null && m[k] !== '—');
|
||||
}
|
||||
|
||||
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]));
|
||||
@@ -172,6 +193,93 @@
|
||||
const max = Math.max(...Object.values(bd).map(Math.abs));
|
||||
return max === 0 ? 1 : max;
|
||||
}
|
||||
|
||||
// Factor card helpers
|
||||
interface FactorCard {
|
||||
key: string; // glossary key
|
||||
name: string; // display name
|
||||
score: number;
|
||||
reason: string; // plain-English with embedded <b> tags
|
||||
pct: number; // bar width %
|
||||
}
|
||||
|
||||
const FACTOR_META: Record<string, { name: string; key: string; reason: (val: string | undefined, score: number, threshold?: string) => string }> = {
|
||||
'ROE': { name: 'Return on Equity', key: 'ROE%', reason: (v, s) => s > 0 ? `ROE <b>${v}</b> — above 15% threshold. Strong capital efficiency.` : `ROE <b>${v}</b> — below the 15% preferred threshold. Partial or no score.` },
|
||||
'opMargin': { name: 'Operating Margin', key: 'OpMgn%', reason: (v, s) => s > 0 ? `Op margin <b>${v}</b> — positive and above threshold. Efficient operations.` : `Op margin <b>${v}</b> — below preferred threshold (Gate: > 10%).` },
|
||||
'margin': { name: 'Gross Margin', key: 'GrossM%', reason: (v, s) => s > 0 ? `Gross margin <b>${v}</b> — strong pricing power.` : `Gross margin <b>${v}</b> — limited pricing power or high COGS.` },
|
||||
'peg': { name: 'PEG Ratio', key: 'PEG', reason: (v, s) => s > 0 ? `PEG <b>${v}</b> — below 1.0 threshold. Paying less than growth justifies. (Gate: < 1.0)` : `PEG <b>${v}</b> — above 1.0 threshold. Paying a growth premium. (Gate: < 1.0)` },
|
||||
'revenue': { name: 'Revenue Growth', key: 'Revenue', reason: (_v, s) => s > 0 ? `Revenue growing. Positive contribution to score.` : `Revenue growth below threshold or negative. Partial or no score.` },
|
||||
'fcf': { name: 'FCF Yield', key: 'FCF Yld%', reason: (v, s) => s > 0 ? `FCF yield <b>${v}</b> — strongly positive free cash flow. High weight metric. (Gate: > 0%)` : `FCF yield <b>${v}</b> — negative or zero free cash flow. Hard gate failure.` },
|
||||
'analyst': { name: 'Analyst Consensus', key: 'Analyst', reason: (v, s) => s > 0 ? `Rated <b>Buy</b> by Wall St. (Yahoo mean ≤ 2.5). Requires ≥ 3 analysts. Rating: ${v}.` : s < 0 ? `Analyst consensus <b>${v}</b> — bearish consensus or insufficient coverage.` : `Analyst consensus <b>${v}</b> — neutral range or fewer than 3 analysts.` },
|
||||
'dcf': { name: 'DCF Margin of Safety', key: 'DCF Safety', reason: (v, s) => s > 0 ? `Intrinsic value <b>${v} above</b> current price. Stock appears undervalued vs DCF model. (Gate: ≥ 20%)` : s < 0 ? `Stock priced <b>above</b> DCF intrinsic value. May be overvalued by the model.` : `DCF margin of safety near zero. No significant under/overvaluation signal.` },
|
||||
'cost': { name: 'Expense Ratio', key: 'Exp Ratio%', reason: (v, s) => s > 0 ? `Expense ratio <b>${v}</b> — low cost. Costs compound in your favour. (Gate: ≤ 0.20%)` : `Expense ratio <b>${v}</b> — above the 0.20% gate. Higher fees reduce long-run returns.` },
|
||||
'yield': { name: 'Distribution Yield', key: 'Yield%', reason: (v, s) => s > 0 ? `Yield <b>${v}</b> — strong income distribution.` : `Yield <b>${v}</b> — below preferred level.` },
|
||||
'volume': { name: 'Avg Daily Volume', key: 'Volume', reason: (_v, s) => s > 0 ? `Sufficient trading volume. Liquid, tradeable fund.` : `Low trading volume. Liquidity risk — spreads may be wide.` },
|
||||
'fiveYearReturn': { name: '5-Year Return', key: '5Y Return%', reason: (v, s) => s > 0 ? `5Y annualised return <b>${v}</b> — above the 8% S&P floor.` : `5Y return <b>${v}</b> — below the 8% gate. Underperforms long-run S&P average.` },
|
||||
'spread': { name: 'Credit Spread', key: 'YTM%', reason: (_v, s) => s > 0 ? `Yield spread above risk-free rate exceeds 1.5% gate. Adequate risk compensation.` : `Spread too narrow. Bond doesn't compensate enough for credit risk. (Gate: ≥ 1.5%)` },
|
||||
'duration': { name: 'Duration', key: 'Duration', reason: (v, s) => s > 0 ? `Duration <b>${v}y</b> — moderate interest rate risk. (Gate: ≤ 7y)` : `Duration <b>${v}y</b> — high interest rate sensitivity. (Gate: ≤ 7y)` },
|
||||
};
|
||||
|
||||
function verdictLabel(score: number): string {
|
||||
const s = Math.abs(score);
|
||||
const label = s >= 3 ? 'STRONG' : s >= 2 ? 'GOOD' : s >= 1 ? 'MODERATE' : 'NEUTRAL';
|
||||
if (score > 0) return `+${score} ${label}`;
|
||||
if (score < 0) return `${score} WEAK`;
|
||||
return '0 NEUTRAL';
|
||||
}
|
||||
|
||||
function verdictClass(score: number): string {
|
||||
if (score > 0) return 'fv-pos';
|
||||
if (score < 0) return 'fv-neg';
|
||||
return 'fv-neu';
|
||||
}
|
||||
|
||||
function factorCards(bd: Record<string, number> | undefined, displayMetrics: Record<string, unknown>): FactorCard[] {
|
||||
if (!bd) return [];
|
||||
const scale = maxAbs(bd);
|
||||
return Object.entries(bd)
|
||||
.sort((a, b) => Math.abs(b[1]) - Math.abs(a[1]))
|
||||
.map(([factor, score]) => {
|
||||
const meta = FACTOR_META[factor];
|
||||
const displayKey = meta?.key;
|
||||
const val = displayKey ? String(displayMetrics[displayKey] ?? '—') : '—';
|
||||
const reason = meta ? meta.reason(val, score) : `${factor}: score ${score}`;
|
||||
return {
|
||||
key: displayKey ?? factor,
|
||||
name: meta?.name ?? factor,
|
||||
score,
|
||||
reason,
|
||||
pct: Math.round((Math.abs(score) / scale) * 100),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function openSpecModal(row: AssetResult, e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
specModalRow = row;
|
||||
}
|
||||
|
||||
function openGlossaryTo(key: string) {
|
||||
glossaryFocusKey = key;
|
||||
glossaryOpen = true;
|
||||
}
|
||||
|
||||
function sigKey(signal: string | undefined): string {
|
||||
const s = signal ?? '';
|
||||
if (s.includes('Strong')) return 'strong';
|
||||
if (s.includes('Momentum')) return 'momentum';
|
||||
if (s.includes('Speculation')) return 'spec';
|
||||
if (s.includes('Neutral')) return 'neutral';
|
||||
return 'avoid';
|
||||
}
|
||||
|
||||
function googleNewsUrl(ticker: string): string {
|
||||
return `https://news.google.com/search?q=${encodeURIComponent(ticker + ' stock')}`;
|
||||
}
|
||||
|
||||
function yahooNewsUrl(ticker: string): string {
|
||||
return `https://finance.yahoo.com/quote/${encodeURIComponent(ticker)}/news/`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="section">
|
||||
@@ -187,6 +295,15 @@
|
||||
<button class:active={mode === 'fundamental'} onclick={() => mode = 'fundamental'}>Graham</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn-glossary"
|
||||
class:btn-glossary-active={glossaryOpen}
|
||||
onclick={() => (glossaryOpen = !glossaryOpen)}
|
||||
title="Open metrics glossary"
|
||||
>
|
||||
? Glossary
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn-analyze"
|
||||
onclick={onAnalyze}
|
||||
@@ -208,36 +325,49 @@
|
||||
<tr>
|
||||
<th class="col-expand"></th>
|
||||
<th class="col-ticker sort-th" onclick={() => setSort('ticker')}>
|
||||
Ticker <span class="sort-icon">{sortIcon('ticker')}</span>
|
||||
<span class="col-tip" data-tip="Stock, ETF, or bond ticker symbol">Ticker</span>
|
||||
<span class="sort-icon">{sortIcon('ticker')}</span>
|
||||
</th>
|
||||
<th class="sort-th" onclick={() => setSort('price')}>
|
||||
Price <span class="sort-icon">{sortIcon('price')}</span>
|
||||
<span class="col-tip" data-tip="Current market price">Price</span>
|
||||
<span class="sort-icon">{sortIcon('price')}</span>
|
||||
</th>
|
||||
<th class="sort-th" onclick={() => setSort('signal')}>
|
||||
Signal <span class="sort-icon">{sortIcon('signal')}</span>
|
||||
<span class="col-tip" data-tip="Overall verdict: Strong Buy passes both fundamental and market-adjusted gates; Avoid fails both">Signal</span>
|
||||
<span class="sort-icon">{sortIcon('signal')}</span>
|
||||
</th>
|
||||
<th class="sort-th" onclick={() => setSort('score')}>
|
||||
Score <span class="sort-icon">{sortIcon('score')}</span>
|
||||
<span class="col-tip" data-tip="Weighted factor score (ROE, FCF, margins, PEG, analyst, DCF). Shown as dots out of 5 + raw number. ✗ means gate failed before scoring.">Score</span>
|
||||
<span class="sort-icon">{sortIcon('score')}</span>
|
||||
</th>
|
||||
{#if type === 'STOCK'}
|
||||
<th class="sort-th" title="Market cap tier" onclick={() => setSort('cap')}>
|
||||
Cap <span class="sort-icon">{sortIcon('cap')}</span>
|
||||
<th class="sort-th" onclick={() => setSort('cap')}>
|
||||
<span class="col-tip" data-tip="Market cap tier: Mega (>$200B), Large ($10–200B), Mid ($2–10B), Small ($300M–$2B), Micro (<$300M)">Cap</span>
|
||||
<span class="sort-icon">{sortIcon('cap')}</span>
|
||||
</th>
|
||||
<th>
|
||||
<span class="col-tip" data-tip="Growth/style: High Growth (rev ≥15%), Growth (5–15%), Value (low growth + yield ≥3%), Stable, Turnaround, Declining">Style</span>
|
||||
</th>
|
||||
<th>
|
||||
<span class="col-tip" data-tip="Risk flags: momentum extremes, valuation outliers, analyst divergence, DCF divergence. Hover the badge to see individual flags.">Flags</span>
|
||||
</th>
|
||||
<th title="Growth / style">Style</th>
|
||||
<th>Flags</th>
|
||||
{:else if type === 'ETF'}
|
||||
<th class="sort-th" onclick={() => setSort('expense')}>
|
||||
Expense <span class="sort-icon">{sortIcon('expense')}</span>
|
||||
<span class="col-tip" data-tip="Annual management fee as % of AUM. Gate: ≤ 0.20%. Lower is always better — costs compound against returns.">Expense</span>
|
||||
<span class="sort-icon">{sortIcon('expense')}</span>
|
||||
</th>
|
||||
<th class="sort-th" onclick={() => setSort('ret5y')}>
|
||||
5Y Ret <span class="sort-icon">{sortIcon('ret5y')}</span>
|
||||
<span class="col-tip" data-tip="5-year annualised return. Gate: ≥ 8% (S&P long-run floor). Benchmark: S&P 500 ≈ 10% historically.">5Y Ret</span>
|
||||
<span class="sort-icon">{sortIcon('ret5y')}</span>
|
||||
</th>
|
||||
{:else}
|
||||
<th class="sort-th" onclick={() => setSort('rating')}>
|
||||
Rating <span class="sort-icon">{sortIcon('rating')}</span>
|
||||
<span class="col-tip" data-tip="Credit rating: AAA → BBB = investment grade. Gate: ≥ BBB. BB and below = junk / high yield.">Rating</span>
|
||||
<span class="sort-icon">{sortIcon('rating')}</span>
|
||||
</th>
|
||||
<th class="sort-th" onclick={() => setSort('ytm')}>
|
||||
YTM <span class="sort-icon">{sortIcon('ytm')}</span>
|
||||
<span class="col-tip" data-tip="Yield to Maturity — total return if held to maturity. Must exceed risk-free rate by ≥ 1.5% (spread gate).">YTM</span>
|
||||
<span class="sort-icon">{sortIcon('ytm')}</span>
|
||||
</th>
|
||||
{/if}
|
||||
</tr>
|
||||
@@ -299,7 +429,9 @@
|
||||
{@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)}
|
||||
{@const rawScore = v.score ?? parseInt(v.scoreSummary?.match(/-?\d+/)?.[0] ?? '0', 10)}
|
||||
{@const cov = v.audit?.coverage}
|
||||
{@const noData = cov != null && cov.active === 0}
|
||||
|
||||
<!-- ── Summary row ── -->
|
||||
<tr
|
||||
@@ -308,35 +440,62 @@
|
||||
data-signal={sigOrd(r.signal)}
|
||||
onclick={() => toggleExpand(r.asset.ticker)}
|
||||
>
|
||||
<td class="col-expand">{isOpen ? '▾' : '▸'}</td>
|
||||
<td class="col-expand">
|
||||
<span class="row-toggle">{isOpen ? '▾' : '▸'}</span>
|
||||
<button
|
||||
class="pin-btn"
|
||||
class:pinned={watchlistStore.isPinned(r.asset.ticker)}
|
||||
onclick={(e) => { e.stopPropagation(); watchlistStore.toggle(r.asset.ticker); }}
|
||||
title={watchlistStore.isPinned(r.asset.ticker) ? 'Remove from watchlist' : 'Add to watchlist'}
|
||||
>{watchlistStore.isPinned(r.asset.ticker) ? '📌' : '🔖'}</button>
|
||||
</td>
|
||||
<td class="ticker">{r.asset.ticker}</td>
|
||||
<td class="num">{m.Price ?? '—'}</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>
|
||||
<div class="signal-verdict-cell">
|
||||
<button
|
||||
class="sv-pill sv-{sigKey(r.signal)} sv-pill-link"
|
||||
onclick={(e) => { if (r.signal) openSpecModal(r, e); }}
|
||||
title="Click to explain this signal"
|
||||
>
|
||||
{(r.signal ?? '').replace(/^[^\w\s]+\s*/, '').trim() || '—'}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<!-- Score as dot scale -->
|
||||
<td class="score-cell" title={v.scoreSummary}>
|
||||
<td class="score-cell" title={cov ? `${v.scoreSummary} — ${cov.active}/${cov.total} factors had data` : v.scoreSummary}>
|
||||
{#if v.scoreSummary?.startsWith('Gate failed')}
|
||||
<span class="score-fail">✗</span>
|
||||
{:else if noData}
|
||||
<span class="score-nodata">No data</span>
|
||||
{:else}
|
||||
<span class="score-dots">
|
||||
{#each Array(5) as _, i}
|
||||
<span class="score-dot" class:on={i < Math.round(rawScore / 4)}></span>
|
||||
<span class="score-dot" class:on={rawScore > 0 && i < Math.round(rawScore / 4)}></span>
|
||||
{/each}
|
||||
</span>
|
||||
<span class="score-num">{rawScore}</span>
|
||||
{#if cov && cov.active / cov.total < 0.5}
|
||||
<span class="score-cov" title="Only {cov.active} of {cov.total} scoring factors had data — treat this score with caution">{cov.active}/{cov.total}</span>
|
||||
{/if}
|
||||
{/if}
|
||||
</td>
|
||||
{#if type === 'STOCK'}
|
||||
<td><span class="tag sm cap-tag">{m['Cap Tier'] ?? '—'}</span></td>
|
||||
<td><span class="tag sm style-tag">{m['Style'] ?? '—'}</span></td>
|
||||
<!-- Flags: count badge with hover expand -->
|
||||
<!-- Flags: count badge with hover expand tooltip -->
|
||||
<td class="flags-cell">
|
||||
{#if flags.length > 0}
|
||||
<span class="flags-badge">
|
||||
<div class="flags-badge">
|
||||
<span class="flags-count">⚠ {flags.length}</span>
|
||||
</span>
|
||||
<div class="flags-tooltip">
|
||||
<div class="flags-tt-title">Risk Flags</div>
|
||||
{#each flags as flag}
|
||||
<div class="flags-tt-item">⚠ {flag}</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</td>
|
||||
{:else if type === 'ETF'}
|
||||
@@ -358,97 +517,99 @@
|
||||
|
||||
<!-- ══ LEFT — metric grid ══════════════════════════════════ -->
|
||||
<div class="dp-left">
|
||||
<div class="dp-title">Metrics</div>
|
||||
<div class="dp-title">Metrics <span class="dp-mode-note">— click any card for full definition</span></div>
|
||||
<div class="dp-metric-grid">
|
||||
{#if type === 'STOCK'}
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">P/E</span>
|
||||
{@const failures = [...(r.inflated.audit?.failures ?? []), ...(r.fundamental.audit?.failures ?? [])]}
|
||||
{@const failedKeys = failures.map(f => f.toLowerCase())}
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('P/E')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('P/E')} class:dp-mc-fail={failedKeys.some(f => f.includes('p/e'))} class:dp-mc-pass={!failedKeys.some(f => f.includes('p/e')) && m['P/E'] && m['P/E'] !== '—'}>
|
||||
<span class="dp-mc-label">P/E <span class="dp-mc-help">?</span></span>
|
||||
<span class="dp-mc-value">{m['P/E'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">PEG</span>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('PEG')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('PEG')} class:dp-mc-fail={failedKeys.some(f => f.includes('peg'))} class:dp-mc-pass={m['PEG'] !== '—' && m['PEG'] != null && parseFloat(String(m['PEG'])) < 1.0}>
|
||||
<span class="dp-mc-label">PEG <span class="dp-mc-help">?</span></span>
|
||||
<span class="dp-mc-value">{m['PEG'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">ROE%</span>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('ROE%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('ROE%')} class:dp-mc-fail={failedKeys.some(f => f.includes('roe'))} class:dp-mc-pass={parseFloat(String(m['ROE%'])) >= 15}>
|
||||
<span class="dp-mc-label">ROE% <span class="dp-mc-help">?</span></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>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('OpMgn%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('OpMgn%')} class:dp-mc-fail={failedKeys.some(f => f.includes('margin') || f.includes('op'))} class:dp-mc-pass={parseFloat(String(m['OpMgn%'])) >= 10}>
|
||||
<span class="dp-mc-label">Op Mgn% <span class="dp-mc-help">?</span></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>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('GrossM%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('GrossM%')}>
|
||||
<span class="dp-mc-label">Gross M% <span class="dp-mc-help">?</span></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>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('FCF Yld%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('FCF Yld%')} class:dp-mc-fail={failedKeys.some(f => f.includes('fcf') || f.includes('cash'))} class:dp-mc-pass={parseFloat(String(m['FCF Yld%'])) > 0}>
|
||||
<span class="dp-mc-label">FCF Yld% <span class="dp-mc-help">?</span></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>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('D/E')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('D/E')} class:dp-mc-fail={failedKeys.some(f => f.includes('debt') || f.includes('d/e'))} class:dp-mc-pass={parseFloat(String(m['D/E'])) <= 1.5}>
|
||||
<span class="dp-mc-label">D/E <span class="dp-mc-help">?</span></span>
|
||||
<span class="dp-mc-value">{m['D/E'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">52W Chg</span>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('52W Chg')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('52W Chg')}>
|
||||
<span class="dp-mc-label">52W Chg <span class="dp-mc-help">?</span></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>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('From High')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('From High')}>
|
||||
<span class="dp-mc-label">From High <span class="dp-mc-help">?</span></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>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('Analyst')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('Analyst')}>
|
||||
<span class="dp-mc-label">Analyst <span class="dp-mc-help">?</span></span>
|
||||
<span class="dp-mc-value">{m['Analyst'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">Upside</span>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('Analyst')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('Analyst')}>
|
||||
<span class="dp-mc-label">Upside <span class="dp-mc-help">?</span></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>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('DCF Safety')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('DCF Safety')} class:dp-mc-pass={parseFloat(String(m['DCF Safety'])) >= 20}>
|
||||
<span class="dp-mc-label">DCF Safety <span class="dp-mc-help">?</span></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>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('Yield%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('Yield%')}>
|
||||
<span class="dp-mc-label">Yield% <span class="dp-mc-help">?</span></span>
|
||||
<span class="dp-mc-value">{m['Yield%'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">AUM</span>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('Exp Ratio%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('Exp Ratio%')}>
|
||||
<span class="dp-mc-label">AUM <span class="dp-mc-help">?</span></span>
|
||||
<span class="dp-mc-value">{m['AUM'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">5Y Ret%</span>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('5Y Return%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('5Y Return%')}>
|
||||
<span class="dp-mc-label">5Y Ret% <span class="dp-mc-help">?</span></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>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('Exp Ratio%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('Exp Ratio%')} class:dp-mc-pass={parseFloat(String(m['Exp Ratio%'])) <= 0.2} class:dp-mc-fail={parseFloat(String(m['Exp Ratio%'])) > 0.2}>
|
||||
<span class="dp-mc-label">Exp Ratio% <span class="dp-mc-help">?</span></span>
|
||||
<span class="dp-mc-value">{m['Exp Ratio%'] ?? '—'}</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">YTM%</span>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('YTM%')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('YTM%')}>
|
||||
<span class="dp-mc-label">YTM% <span class="dp-mc-help">?</span></span>
|
||||
<span class="dp-mc-value">{m['YTM%'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">Duration</span>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('Duration')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('Duration')} class:dp-mc-fail={parseFloat(String(m['Duration'])) > 7} class:dp-mc-pass={parseFloat(String(m['Duration'])) <= 7}>
|
||||
<span class="dp-mc-label">Duration <span class="dp-mc-help">?</span></span>
|
||||
<span class="dp-mc-value">{m['Duration'] ?? '—'}</span>
|
||||
</div>
|
||||
<div class="dp-metric-card">
|
||||
<span class="dp-mc-label">Rating</span>
|
||||
<div class="dp-metric-card" onclick={() => openGlossaryTo('Rating')} role="button" tabindex="0" onkeypress={(e) => e.key==='Enter' && openGlossaryTo('Rating')}>
|
||||
<span class="dp-mc-label">Rating <span class="dp-mc-help">?</span></span>
|
||||
<span class="dp-mc-value">{m['Rating'] ?? '—'}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- ── Gate badge chips ── -->
|
||||
<!-- ── Gate badge chips — show which mode passed/failed + the failing rule ── -->
|
||||
<div class="dp-gates-row">
|
||||
<span class="dp-gate-chip" class:dp-gate-chip-pass={mktPass} class:dp-gate-chip-fail={!mktPass}>
|
||||
MKT {mktPass ? '✓' : '✗'}
|
||||
MKT {mktPass ? '✓' : '✗'}{#if !mktPass && r.inflated.audit?.failures?.[0]} — {r.inflated.audit.failures[0]}{/if}
|
||||
</span>
|
||||
<span class="dp-gate-chip" class:dp-gate-chip-pass={grahamPass} class:dp-gate-chip-fail={!grahamPass}>
|
||||
GRAHAM {grahamPass ? '✓' : '✗'}
|
||||
GRAHAM {grahamPass ? '✓' : '✗'}{#if !grahamPass && r.fundamental.audit?.failures?.[0]} — {r.fundamental.audit.failures[0]}{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -460,13 +621,24 @@
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- ── News links ── -->
|
||||
<div class="dp-news-row">
|
||||
<span class="dp-news-label">News:</span>
|
||||
<a href={googleNewsUrl(r.asset.ticker)} target="_blank" rel="noopener noreferrer" class="dp-news-link">
|
||||
Google News ↗
|
||||
</a>
|
||||
<a href={yahooNewsUrl(r.asset.ticker)} target="_blank" rel="noopener noreferrer" class="dp-news-link">
|
||||
Yahoo Finance ↗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══ RIGHT — verdict card (factor bar chart) ═════════════ -->
|
||||
<!-- ══ RIGHT — factor score cards ════════════════════════ -->
|
||||
<div class="dp-right">
|
||||
<div class="dp-title">
|
||||
Factor Scores
|
||||
<span class="dp-mode-note">({mode === 'inflated' ? 'Mkt-Adj' : 'Graham'})</span>
|
||||
<span class="dp-mode-note">({mode === 'inflated' ? 'Mkt-Adj' : 'Graham'}) — click to learn more</span>
|
||||
</div>
|
||||
|
||||
{#if !v.audit?.passedGates && v.audit?.failures?.length}
|
||||
@@ -476,23 +648,20 @@
|
||||
<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>
|
||||
{:else if factorCards(v.audit?.breakdown, m).length}
|
||||
{@const cards = factorCards(v.audit?.breakdown, m)}
|
||||
<div class="dp-factor-list">
|
||||
{#each cards as card}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="dp-factor-item" role="button" tabindex="0" onclick={() => openGlossaryTo(card.key)} onkeypress={(e) => e.key === 'Enter' && openGlossaryTo(card.key)}>
|
||||
<div class="dp-factor-top">
|
||||
<span class="dp-factor-name">{card.name}</span>
|
||||
<span class="dp-factor-verdict {verdictClass(card.score)}">{verdictLabel(card.score)}</span>
|
||||
</div>
|
||||
<div class="dp-factor-reason">{@html card.reason}</div>
|
||||
<div class="dp-bar-track">
|
||||
<div class="dp-bar-fill {card.score > 0 ? 'dp-bar-pos' : 'dp-bar-neg'}" style="width:{card.pct}%"></div>
|
||||
</div>
|
||||
<span class="dp-bar-val {score > 0 ? 'pos' : score < 0 ? 'neg' : ''}">
|
||||
{score > 0 ? '+' : ''}{score}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -511,3 +680,18 @@
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Glossary panel — z-index 99, below tearsheet/analysis sidebar (z 101) -->
|
||||
<GlossaryPanel
|
||||
open={glossaryOpen}
|
||||
activeMetrics={activeGlossaryMetrics()}
|
||||
focusKey={glossaryFocusKey}
|
||||
onClose={() => { glossaryOpen = false; glossaryFocusKey = null; }}
|
||||
/>
|
||||
|
||||
<!-- Signal modal — explains why? for any signal -->
|
||||
<SignalModal
|
||||
open={specModalRow !== null}
|
||||
row={specModalRow}
|
||||
onClose={() => (specModalRow = null)}
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,503 @@
|
||||
<script lang="ts">
|
||||
import { tick } from 'svelte';
|
||||
|
||||
let {
|
||||
open = false,
|
||||
activeMetrics = [] as string[],
|
||||
focusKey = null as string | null,
|
||||
onClose,
|
||||
}: {
|
||||
open?: boolean;
|
||||
activeMetrics?: string[];
|
||||
focusKey?: string | null;
|
||||
onClose: () => void;
|
||||
} = $props();
|
||||
|
||||
let searchQuery = $state('');
|
||||
let expandedItem = $state<string | null>(null);
|
||||
let bodyEl = $state<HTMLElement | null>(null);
|
||||
|
||||
// When focusKey changes, expand and scroll to that item
|
||||
$effect(() => {
|
||||
if (focusKey && open) {
|
||||
expandedItem = focusKey;
|
||||
searchQuery = '';
|
||||
tick().then(() => {
|
||||
if (!bodyEl) return;
|
||||
const el = bodyEl.querySelector(`[data-gkey="${focusKey}"]`);
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// ── Glossary data ─────────────────────────────────────────────────────
|
||||
type RangeBand = { val: string; label: string };
|
||||
type GlossaryItem = {
|
||||
key: string;
|
||||
label: string;
|
||||
category: 'Market Context' | 'Valuation' | 'Quality' | 'Risk' | 'Signals' | 'ETF' | 'Bond';
|
||||
definition: string;
|
||||
gate?: string;
|
||||
goodRange?: RangeBand;
|
||||
neutralRange?: RangeBand;
|
||||
badRange?: RangeBand;
|
||||
assetTypes?: ('STOCK' | 'ETF' | 'BOND')[];
|
||||
};
|
||||
|
||||
const GLOSSARY: GlossaryItem[] = [
|
||||
// ── Market Context ─────────────────────────────────────────────────
|
||||
{
|
||||
key: '10Y',
|
||||
label: '10Y Treasury Yield',
|
||||
category: 'Market Context',
|
||||
definition: 'The yield on 10-year US government bonds — the global risk-free rate benchmark. Drives discount rates for all assets: higher yield = lower present value of future earnings.',
|
||||
gate: 'Rate regime: < 2% LOW | 2–5% NORMAL | > 5% HIGH. HIGH rates compress growth stock P/E multipliers.',
|
||||
goodRange: { val: '2–4%', label: 'Normal, accommodative' },
|
||||
neutralRange: { val: '4–5%', label: 'Elevated, watch growth' },
|
||||
badRange: { val: '> 5%', label: 'HIGH regime, P/E compression' },
|
||||
},
|
||||
{
|
||||
key: 'VIX',
|
||||
label: 'VIX — Volatility Index',
|
||||
category: 'Market Context',
|
||||
definition: 'The CBOE Volatility Index — measures expected 30-day S&P 500 volatility derived from options prices. Known as the "fear gauge."',
|
||||
gate: 'Volatility regime: < 15 CALM | 15–25 NORMAL | > 25 ELEVATED | > 35 EXTREME',
|
||||
goodRange: { val: '< 15', label: 'Calm market, low fear' },
|
||||
neutralRange: { val: '15–25', label: 'Normal uncertainty' },
|
||||
badRange: { val: '> 25', label: 'Elevated fear' },
|
||||
},
|
||||
{
|
||||
key: 'Rate Regime',
|
||||
label: 'Rate Regime',
|
||||
category: 'Market Context',
|
||||
definition: 'Derived from the 10Y Treasury yield. Controls how aggressively the INFLATED scoring mode adjusts P/E gates — HIGH rates tighten the multiplier from 1.5× to 1.2× of S&P P/E.',
|
||||
gate: 'LOW < 2% | NORMAL 2–5% | HIGH > 5%',
|
||||
goodRange: { val: 'LOW', label: 'Growth-friendly' },
|
||||
neutralRange: { val: 'NORMAL', label: 'Balanced' },
|
||||
badRange: { val: 'HIGH', label: 'Value favoured, growth penalised' },
|
||||
},
|
||||
// ── Valuation ──────────────────────────────────────────────────────
|
||||
{
|
||||
key: 'P/E',
|
||||
label: 'P/E Ratio',
|
||||
category: 'Valuation',
|
||||
definition: 'Price-to-Earnings: how many dollars investors pay per $1 of annual profit. Lower = cheaper relative to earnings.',
|
||||
gate: 'Graham gate: ≤ 15× | Inflated gate: ≤ S&P P/E × 1.5 (live)',
|
||||
goodRange: { val: '< 15×', label: 'Value / below sector avg' },
|
||||
neutralRange: { val: '15–35×', label: 'Elevated but common' },
|
||||
badRange: { val: '> 35×', label: 'Expensive without high growth' },
|
||||
assetTypes: ['STOCK'],
|
||||
},
|
||||
{
|
||||
key: 'PEG',
|
||||
label: 'PEG Ratio',
|
||||
category: 'Valuation',
|
||||
definition: 'P/E divided by earnings growth rate. Adjusts for growth — a 30× P/E stock growing 30% has PEG 1.0, same as a 15× stock growing 15%.',
|
||||
gate: 'Gate: < 1.0 (Lynch standard) · Weight: 2',
|
||||
goodRange: { val: '< 1.0', label: 'Bargain' },
|
||||
neutralRange: { val: '1.0–2.0', label: 'Fair' },
|
||||
badRange: { val: '> 2.0', label: 'Costly' },
|
||||
assetTypes: ['STOCK'],
|
||||
},
|
||||
{
|
||||
key: 'DCF Safety',
|
||||
label: 'DCF Margin of Safety',
|
||||
category: 'Valuation',
|
||||
definition: 'How much below the discounted cash flow intrinsic value the stock trades. Positive = undervalued vs. DCF model; negative = overvalued. Requires positive FCF to compute.',
|
||||
gate: '≥ +20% → full score | 0–20% → +1 | -20–0% → -1 | < -20% → negative score',
|
||||
goodRange: { val: '> +20%', label: 'Significant discount' },
|
||||
neutralRange: { val: '0–20%', label: 'Modest discount' },
|
||||
badRange: { val: '< -20%', label: 'Premium to fair value' },
|
||||
assetTypes: ['STOCK'],
|
||||
},
|
||||
{
|
||||
key: 'Upside',
|
||||
label: 'Analyst Price Target Upside',
|
||||
category: 'Valuation',
|
||||
definition: 'Percentage gap between current price and Wall Street consensus target price. Positive = analysts expect the stock to rise.',
|
||||
gate: 'Risk flag if ≥ +25% upside or ≤ -15% downside',
|
||||
goodRange: { val: '+5–20%', label: 'Moderate consensus upside' },
|
||||
neutralRange: { val: '0–5%', label: 'Fairly priced' },
|
||||
badRange: { val: '< -10%', label: 'Analysts bearish' },
|
||||
assetTypes: ['STOCK'],
|
||||
},
|
||||
// ── Quality ────────────────────────────────────────────────────────
|
||||
{
|
||||
key: 'ROE%',
|
||||
label: 'Return on Equity',
|
||||
category: 'Quality',
|
||||
definition: 'Net income as a % of shareholders\' equity. Measures how efficiently management generates profit from invested capital.',
|
||||
gate: 'Gate: ROE ≥ 15%',
|
||||
goodRange: { val: '> 20%', label: 'Excellent capital efficiency' },
|
||||
neutralRange: { val: '10–20%', label: 'Adequate' },
|
||||
badRange: { val: '< 10%', label: 'Poor capital use' },
|
||||
assetTypes: ['STOCK'],
|
||||
},
|
||||
{
|
||||
key: 'OpMgn%',
|
||||
label: 'Operating Margin',
|
||||
category: 'Quality',
|
||||
definition: 'Operating profit as a % of revenue — what\'s left after COGS and operating expenses, before interest and taxes.',
|
||||
gate: 'Gate: Op Margin ≥ 10%',
|
||||
goodRange: { val: '> 20%', label: 'High quality business' },
|
||||
neutralRange: { val: '5–20%', label: 'Modest margins' },
|
||||
badRange: { val: '< 5%', label: 'Thin, fragile' },
|
||||
assetTypes: ['STOCK'],
|
||||
},
|
||||
{
|
||||
key: 'GrossM%',
|
||||
label: 'Gross Margin',
|
||||
category: 'Quality',
|
||||
definition: 'Revenue minus cost of goods sold, as a %. Shows pricing power and production efficiency before overhead.',
|
||||
gate: 'Informational — not a hard gate, used contextually',
|
||||
goodRange: { val: '> 50%', label: 'Software / services quality' },
|
||||
neutralRange: { val: '15–50%', label: 'Moderate' },
|
||||
badRange: { val: '< 15%', label: 'Commodity-like, price-taker' },
|
||||
assetTypes: ['STOCK'],
|
||||
},
|
||||
{
|
||||
key: 'FCF Yld%',
|
||||
label: 'Free Cash Flow Yield',
|
||||
category: 'Quality',
|
||||
definition: 'Free cash flow per share divided by price — cash the business actually generates, expressed as a yield. Unlike earnings, FCF is hard to fake.',
|
||||
gate: 'Gate: FCF > 0 (negative FCF = gate fail) | Weight: 3× in scoring',
|
||||
goodRange: { val: '> 5%', label: 'Strong cash generation' },
|
||||
neutralRange: { val: '0–5%', label: 'Weak positive' },
|
||||
badRange: { val: '< 0%', label: 'Cash-burning' },
|
||||
assetTypes: ['STOCK'],
|
||||
},
|
||||
{
|
||||
key: 'Analyst',
|
||||
label: 'Analyst Consensus Rating',
|
||||
category: 'Quality',
|
||||
definition: 'Wall Street average recommendation on a 1–5 scale (Yahoo). 1 = Strong Buy, 5 = Strong Sell. Requires ≥ 3 analysts for signal to fire.',
|
||||
gate: '≤ 2.0 → full score | ≤ 3.0 → +1 | ≤ 4.0 → -1 | > 4.0 → negative score',
|
||||
goodRange: { val: '1.0–2.5', label: 'Buy consensus' },
|
||||
neutralRange: { val: '2.5–4.0', label: 'Neutral / Hold' },
|
||||
badRange: { val: '> 4.0', label: 'Sell consensus' },
|
||||
assetTypes: ['STOCK'],
|
||||
},
|
||||
{
|
||||
key: 'Revenue',
|
||||
label: 'Revenue Growth',
|
||||
category: 'Quality',
|
||||
definition: 'Year-over-year percentage change in total revenue. Measures whether the business is expanding its top line. A secondary scoring factor — positive growth adds to score, declining revenue subtracts.',
|
||||
gate: 'Gate: Revenue growth > 0% for positive contribution | Weight: 2× in scoring',
|
||||
goodRange: { val: '> 10%', label: 'Strong expansion' },
|
||||
neutralRange: { val: '0–10%', label: 'Slow growth' },
|
||||
badRange: { val: '< 0%', label: 'Shrinking top line' },
|
||||
assetTypes: ['STOCK'],
|
||||
},
|
||||
// ── Risk ───────────────────────────────────────────────────────────
|
||||
{
|
||||
key: 'D/E',
|
||||
label: 'Debt-to-Equity Ratio',
|
||||
category: 'Risk',
|
||||
definition: 'Total debt divided by shareholders\' equity. Measures financial leverage — how much borrowed money vs. owned capital the company uses.',
|
||||
gate: 'Gate: D/E ≤ 1.5× | Tech: ≤ 2.0× | Financials: gate disabled (scored on P/B instead)',
|
||||
goodRange: { val: '< 0.5×', label: 'Conservative' },
|
||||
neutralRange: { val: '0.5–1.5×', label: 'Moderate' },
|
||||
badRange: { val: '> 2.0×', label: 'High leverage risk' },
|
||||
assetTypes: ['STOCK'],
|
||||
},
|
||||
{
|
||||
key: '52W Chg',
|
||||
label: '52-Week Price Change',
|
||||
category: 'Risk',
|
||||
definition: 'Total % price return over the past year. Captures trend strength and momentum.',
|
||||
gate: 'Risk flag: ≥ +50% (at peak, reversal risk) | ≤ -30% (significant drawdown)',
|
||||
goodRange: { val: '+5–30%', label: 'Steady uptrend' },
|
||||
neutralRange: { val: '-5–+5%', label: 'Flat / sideways' },
|
||||
badRange: { val: '< -30%', label: 'Significant drawdown' },
|
||||
assetTypes: ['STOCK'],
|
||||
},
|
||||
{
|
||||
key: 'From High',
|
||||
label: 'Distance from 52-Week High',
|
||||
category: 'Risk',
|
||||
definition: 'How far (%) the current price sits below the 52-week peak. Negative = below peak. A -15% reading means the stock is 15% off its high.',
|
||||
gate: 'Risk flag if > -20% from high (at or near peak)',
|
||||
goodRange: { val: '-5–25%', label: 'Healthy pullback' },
|
||||
neutralRange: { val: '-25–40%', label: 'Larger drawdown' },
|
||||
badRange: { val: '0–3%', label: 'At peak, limited buffer' },
|
||||
assetTypes: ['STOCK'],
|
||||
},
|
||||
// ── Signals ────────────────────────────────────────────────────────
|
||||
{
|
||||
key: 'Graham',
|
||||
label: 'Graham (Fundamental) Score',
|
||||
category: 'Signals',
|
||||
definition: 'Strict value-investing score using fixed Graham gates: P/E ≤ 15×, PEG ≤ 1.0, D/E ≤ 1.5×, ROE ≥ 15%, FCF > 0. Does not adjust for market conditions — these thresholds never move.',
|
||||
gate: 'All gates fixed regardless of S&P P/E or rate regime',
|
||||
goodRange: { val: 'PASS', label: 'Passes all Graham gates' },
|
||||
neutralRange: { val: 'PARTIAL', label: 'Passes some, fails others' },
|
||||
badRange: { val: 'FAIL', label: 'Fails one or more hard gates' },
|
||||
},
|
||||
{
|
||||
key: 'Mkt-Adj',
|
||||
label: 'Market-Adjusted Score',
|
||||
category: 'Signals',
|
||||
definition: 'Relaxed scoring mode that calibrates gates to live market benchmarks. P/E gate = S&P P/E × 1.5 (or × 1.2 in HIGH rate regime). Reflects what is "acceptable" in today\'s market, not absolute value.',
|
||||
gate: 'P/E gate: S&P P/E × 1.5 (NORMAL) or × 1.2 (HIGH) | Tech P/E: XLK P/E × 1.3',
|
||||
goodRange: { val: 'PASS', label: 'Passes mkt-adjusted gates' },
|
||||
neutralRange: { val: 'PARTIAL', label: 'Borderline vs live benchmarks' },
|
||||
badRange: { val: 'FAIL', label: 'Fails even relaxed gates' },
|
||||
},
|
||||
{
|
||||
key: 'signal',
|
||||
label: 'Signal',
|
||||
category: 'Signals',
|
||||
definition: 'Overall recommendation derived by comparing Market-Adjusted and Graham (fundamental) scores.',
|
||||
gate: 'Strong Buy = passes both | Momentum = passes Mkt-Adj only | Speculation = passes Mkt-Adj, fails Graham | Neutral = borderline | Avoid = fails both',
|
||||
goodRange: { val: '✅ ⚡', label: 'Strong Buy / Momentum' },
|
||||
neutralRange: { val: '🔄', label: 'Neutral — hold' },
|
||||
badRange: { val: '⚠️ ❌', label: 'Speculation / Avoid' },
|
||||
},
|
||||
{
|
||||
key: 'score',
|
||||
label: 'Score (dot scale)',
|
||||
category: 'Signals',
|
||||
definition: 'Weighted sum of factor scores (ROE, FCF, margin, PEG, revenue growth, analyst, DCF). Displayed as ●●●●○ dots out of 5 + raw number.',
|
||||
gate: 'Positive factors add to score; negative riskFlags subtract. Gate failures bypass scoring entirely (shown as ✗).',
|
||||
goodRange: { val: '> 12', label: 'High conviction' },
|
||||
neutralRange: { val: '6–12', label: 'Borderline' },
|
||||
badRange: { val: '< 6', label: 'Weak factors' },
|
||||
},
|
||||
{
|
||||
key: 'Cap Tier',
|
||||
label: 'Market Cap Tier',
|
||||
category: 'Signals',
|
||||
definition: 'Size classification based on market capitalisation. Mega Cap (> $200B), Large ($10–200B), Mid ($2–10B), Small ($300M–$2B), Micro (< $300M).',
|
||||
gate: 'Informational — not a gate. Useful for position sizing and risk calibration.',
|
||||
goodRange: { val: 'Mega / Large', label: 'Most liquid' },
|
||||
neutralRange: { val: 'Mid', label: 'Balanced' },
|
||||
badRange: { val: 'Micro', label: 'High vol, thin liquidity' },
|
||||
assetTypes: ['STOCK'],
|
||||
},
|
||||
{
|
||||
key: 'Style',
|
||||
label: 'Growth / Style Category',
|
||||
category: 'Signals',
|
||||
definition: 'Derived from revenue growth and earnings growth. High Growth (rev ≥ 15% or earnings ≥ 20%), Growth (5–15%), Value (< 5% + yield ≥ 3%), Stable, Turnaround, Declining.',
|
||||
gate: 'Informational — not a gate. Helps match the stock to your strategy.',
|
||||
goodRange: { val: 'High Growth / Growth', label: 'Matches momentum strategy' },
|
||||
neutralRange: { val: 'Stable / Value', label: 'Income / defensive' },
|
||||
badRange: { val: 'Declining', label: 'Revenue shrinking > -5%' },
|
||||
assetTypes: ['STOCK'],
|
||||
},
|
||||
// ── ETF ────────────────────────────────────────────────────────────
|
||||
{
|
||||
key: 'Exp Ratio%',
|
||||
label: 'Expense Ratio',
|
||||
category: 'ETF',
|
||||
definition: 'Annual management fee as a % of AUM. Deducted from returns automatically. Lower is always better — costs compound against you.',
|
||||
gate: 'Hard gate: Expense Ratio ≤ 0.20%',
|
||||
goodRange: { val: '< 0.10%', label: 'Index-like, minimal drag' },
|
||||
neutralRange: { val: '0.10–0.50%', label: 'Acceptable' },
|
||||
badRange: { val: '> 0.50%', label: 'High cost drag' },
|
||||
assetTypes: ['ETF'],
|
||||
},
|
||||
{
|
||||
key: '5Y Return%',
|
||||
label: '5-Year Annualised Return',
|
||||
category: 'ETF',
|
||||
definition: 'Compound annual growth rate over 5 years. The S&P 500 long-run average is ~10%; use that as a baseline.',
|
||||
gate: 'Gate: 5Y Return ≥ 8% (S&P long-run floor)',
|
||||
goodRange: { val: '> 12%', label: 'Outperforming market' },
|
||||
neutralRange: { val: '8–12%', label: 'Market-rate returns' },
|
||||
badRange: { val: '< 6%', label: 'Underperforming bonds + inflation' },
|
||||
assetTypes: ['ETF'],
|
||||
},
|
||||
{
|
||||
key: 'Yield%',
|
||||
label: 'Distribution Yield',
|
||||
category: 'ETF',
|
||||
definition: 'Annual income distributions (dividends, interest) as a % of NAV. Important for income-focused or REIT ETFs.',
|
||||
gate: 'REIT ETF: Yield floor based on XLRE yield × regime factor',
|
||||
goodRange: { val: '> 3%', label: 'Strong income' },
|
||||
neutralRange: { val: '1–3%', label: 'Low but positive' },
|
||||
badRange: { val: '< 1%', label: 'Insufficient for income' },
|
||||
assetTypes: ['ETF'],
|
||||
},
|
||||
// ── Bond ───────────────────────────────────────────────────────────
|
||||
{
|
||||
key: 'YTM%',
|
||||
label: 'Yield to Maturity',
|
||||
category: 'Bond',
|
||||
definition: 'Total return if you hold the bond to maturity — includes coupon payments plus any price gain/loss vs. par. The true all-in yield.',
|
||||
gate: 'Spread gate: YTM must exceed risk-free rate by ≥ 1.5% (NORMAL) or ≥ 1.8% (HIGH rates)',
|
||||
goodRange: { val: 'Sprd > 2%', label: 'Good compensation for risk' },
|
||||
neutralRange: { val: '1–2%', label: 'Adequate spread' },
|
||||
badRange: { val: '< 1%', label: 'Not compensating for credit risk' },
|
||||
assetTypes: ['BOND'],
|
||||
},
|
||||
{
|
||||
key: 'Duration',
|
||||
label: 'Duration (years)',
|
||||
category: 'Bond',
|
||||
definition: 'Sensitivity to interest rate changes. A duration of 5 means a 1% rate rise → ~5% price drop. Shorter = less rate risk.',
|
||||
gate: 'Gate: Duration ≤ 7 years',
|
||||
goodRange: { val: '< 4 yrs', label: 'Low rate sensitivity' },
|
||||
neutralRange: { val: '4–7 yrs', label: 'Moderate' },
|
||||
badRange: { val: '> 10 yrs', label: 'High rate risk' },
|
||||
assetTypes: ['BOND'],
|
||||
},
|
||||
{
|
||||
key: 'Rating',
|
||||
label: 'Credit Rating',
|
||||
category: 'Bond',
|
||||
definition: 'Agency rating of default probability: AAA (safest) → AA → A → BBB (investment grade floor) → BB → B → CCC (junk).',
|
||||
gate: 'Hard gate: Rating ≥ BBB (investment-grade, numeric ≥ 7)',
|
||||
goodRange: { val: 'AAA–A', label: 'Very low default risk' },
|
||||
neutralRange: { val: 'BBB', label: 'Investment-grade floor' },
|
||||
badRange: { val: '≤ BB', label: 'High yield / junk' },
|
||||
assetTypes: ['BOND'],
|
||||
},
|
||||
];
|
||||
|
||||
const CATEGORIES = ['Market Context', 'Valuation', 'Quality', 'Risk', 'Signals', 'ETF', 'Bond'] as const;
|
||||
|
||||
function filteredItems(): GlossaryItem[] {
|
||||
const q = searchQuery.trim().toLowerCase();
|
||||
if (!q) return GLOSSARY;
|
||||
return GLOSSARY.filter(
|
||||
(item) =>
|
||||
item.label.toLowerCase().includes(q) ||
|
||||
item.definition.toLowerCase().includes(q) ||
|
||||
item.category.toLowerCase().includes(q),
|
||||
);
|
||||
}
|
||||
|
||||
function itemsForCategory(cat: string): GlossaryItem[] {
|
||||
return filteredItems().filter((i) => i.category === cat);
|
||||
}
|
||||
|
||||
function isActive(item: GlossaryItem): boolean {
|
||||
return activeMetrics.some(
|
||||
(k) => k === item.key || k === item.label,
|
||||
);
|
||||
}
|
||||
|
||||
function toggleItem(key: string) {
|
||||
expandedItem = expandedItem === key ? null : key;
|
||||
}
|
||||
|
||||
// Close on Escape
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') onClose();
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={handleKeydown} />
|
||||
|
||||
{#if open}
|
||||
<!-- Click-outside backdrop — thin, no visual overlay, just captures clicks -->
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="glossary-backdrop" onclick={onClose}></div>
|
||||
|
||||
<aside class="glossary-panel" aria-label="Metrics Glossary">
|
||||
<!-- Header -->
|
||||
<div class="glossary-header">
|
||||
<span class="glossary-title"><span class="glossary-title-q">?</span> Metric Glossary</span>
|
||||
<button class="glossary-close" onclick={onClose} aria-label="Close glossary">×</button>
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="glossary-search-wrap">
|
||||
<input
|
||||
class="glossary-search"
|
||||
type="text"
|
||||
placeholder="Search metrics…"
|
||||
bind:value={searchQuery}
|
||||
aria-label="Search glossary"
|
||||
/>
|
||||
{#if searchQuery}
|
||||
<button class="glossary-search-clear" onclick={() => (searchQuery = '')} aria-label="Clear search">✕</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Context banner — fixed between search and body, only when row is selected -->
|
||||
{#if activeMetrics.length > 0}
|
||||
<div class="glossary-ctx-banner">
|
||||
✦ Highlighted metrics are relevant to the selected row
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Body -->
|
||||
<div class="glossary-body" bind:this={bodyEl}>
|
||||
|
||||
{#each CATEGORIES as cat}
|
||||
{@const items = itemsForCategory(cat)}
|
||||
{#if items.length > 0}
|
||||
<div class="glossary-category">
|
||||
<div class="glossary-cat-header">{cat}</div>
|
||||
{#each items as item}
|
||||
{@const active = isActive(item)}
|
||||
{@const isExpanded = expandedItem === item.key}
|
||||
<div
|
||||
class="glossary-item"
|
||||
class:glossary-item-active={active}
|
||||
class:glossary-item-open={isExpanded}
|
||||
data-gkey={item.key}
|
||||
>
|
||||
<button
|
||||
class="glossary-item-trigger"
|
||||
onclick={() => toggleItem(item.key)}
|
||||
aria-expanded={isExpanded}
|
||||
>
|
||||
<span class="glossary-item-label">
|
||||
{#if active}<span class="glossary-active-dot"></span>{/if}
|
||||
{item.label}
|
||||
</span>
|
||||
<span class="glossary-cat-tag gcat-{cat.toLowerCase().replace(/\s/g,'-')}">{cat}</span>
|
||||
</button>
|
||||
|
||||
{#if isExpanded}
|
||||
<div class="glossary-item-body">
|
||||
<p class="glossary-definition">{item.definition}</p>
|
||||
|
||||
{#if item.gate}
|
||||
<div class="glossary-gate-box">
|
||||
<code>{item.gate}</code>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if item.goodRange || item.neutralRange || item.badRange}
|
||||
<div class="glossary-range-pills">
|
||||
{#if item.goodRange}
|
||||
<span class="glossary-range-pill grange-good">{item.goodRange.val}</span>
|
||||
{/if}
|
||||
{#if item.neutralRange}
|
||||
<span class="glossary-range-pill grange-neutral">{item.neutralRange.val}</span>
|
||||
{/if}
|
||||
{#if item.badRange}
|
||||
<span class="glossary-range-pill grange-bad">{item.badRange.val}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="glossary-range-labels">
|
||||
{#if item.goodRange}
|
||||
<span class="grlabel-good">{item.goodRange.label}</span>
|
||||
{/if}
|
||||
{#if item.neutralRange}
|
||||
<span class="grlabel-neutral">{item.neutralRange.label}</span>
|
||||
{/if}
|
||||
{#if item.badRange}
|
||||
<span class="grlabel-bad">{item.badRange.label}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
{#if filteredItems().length === 0}
|
||||
<div class="glossary-empty">No metrics match "{searchQuery}"</div>
|
||||
{/if}
|
||||
</div>
|
||||
</aside>
|
||||
{/if}
|
||||
@@ -0,0 +1,396 @@
|
||||
<script lang="ts">
|
||||
import type { AssetResult } from '$lib/types.js';
|
||||
|
||||
let {
|
||||
open = false,
|
||||
row,
|
||||
onClose,
|
||||
}: {
|
||||
open: boolean;
|
||||
row: AssetResult | null;
|
||||
onClose: () => void;
|
||||
} = $props();
|
||||
|
||||
function handleBackdrop(e: MouseEvent) {
|
||||
if (e.target === e.currentTarget) onClose();
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') onClose();
|
||||
}
|
||||
|
||||
type SignalKey = 'strong' | 'momentum' | 'spec' | 'neutral' | 'avoid';
|
||||
|
||||
function sigKey(signal: string | undefined): SignalKey {
|
||||
const s = signal ?? '';
|
||||
if (s.includes('Strong')) return 'strong';
|
||||
if (s.includes('Momentum')) return 'momentum';
|
||||
if (s.includes('Speculation')) return 'spec';
|
||||
if (s.includes('Neutral')) return 'neutral';
|
||||
return 'avoid';
|
||||
}
|
||||
|
||||
const SIGNAL_META: Record<SignalKey, {
|
||||
emoji: string;
|
||||
title: string;
|
||||
summary: string;
|
||||
tip: string;
|
||||
color: 'green' | 'blue' | 'amber' | 'gray' | 'red';
|
||||
}> = {
|
||||
strong: {
|
||||
emoji: '✅',
|
||||
title: 'Strong Buy',
|
||||
summary: 'Passes both market-adjusted AND Graham\'s fundamental gates. The stock meets strict value criteria regardless of current market conditions. This is the highest confidence signal.',
|
||||
tip: 'Strong Buy signals have the widest margin of safety. Size position accordingly — typically 3–5% of portfolio.',
|
||||
color: 'green',
|
||||
},
|
||||
momentum: {
|
||||
emoji: '⚡',
|
||||
title: 'Momentum',
|
||||
summary: 'Passes market-adjusted gates but only partially satisfies Graham criteria. The stock is attractively priced relative to today\'s market, though it wouldn\'t clear value investors\' stricter standards. Suitable for trend-following strategies.',
|
||||
tip: 'Momentum signals ride the current market environment. They work until they don\'t — set a stop-loss or monitor quarterly.',
|
||||
color: 'blue',
|
||||
},
|
||||
spec: {
|
||||
emoji: '⚠️',
|
||||
title: 'Speculation',
|
||||
summary: 'Passes market-adjusted gates but fails Graham\'s fundamental rules. The stock is acceptable at today\'s elevated valuations, but would not meet a strict value investor\'s criteria. Treat as a growth or momentum play — not a deep value position.',
|
||||
tip: 'Speculation signals are valid positions in a bull market. Size smaller than a Strong Buy and monitor P/E compression risk.',
|
||||
color: 'amber',
|
||||
},
|
||||
neutral: {
|
||||
emoji: '🔄',
|
||||
title: 'Neutral',
|
||||
summary: 'Borderline — passes some gates, fails others, or falls in hold territory in one or both scoring lenses. Not a strong buy or a clear sell. Suitable for existing positions you\'re monitoring, but not a new entry signal.',
|
||||
tip: 'Neutral means "hold, don\'t add." If you own it, keep watching the metrics that are borderline.',
|
||||
color: 'gray',
|
||||
},
|
||||
avoid: {
|
||||
emoji: '❌',
|
||||
title: 'Avoid',
|
||||
summary: 'Fails both market-adjusted AND fundamental scoring lenses. The stock does not meet quality gates or the risk-adjusted return does not justify the price. This is a high-risk entry.',
|
||||
tip: 'Avoid signals are not necessarily bad businesses — they may be great companies at bad prices. Revisit when the verdict changes.',
|
||||
color: 'red',
|
||||
},
|
||||
};
|
||||
|
||||
function gateRows(row: AssetResult | null) {
|
||||
if (!row) return [];
|
||||
const m = row.asset.displayMetrics ?? {};
|
||||
const graham = row.fundamental.audit;
|
||||
|
||||
const items: { pass: boolean; label: string; detail: string; value: string }[] = [];
|
||||
|
||||
const pe = m['P/E'];
|
||||
if (pe && pe !== '—') {
|
||||
const peNum = parseFloat(String(pe).replace('×',''));
|
||||
const grahamFail = graham.failures?.some((f: string) => f.toLowerCase().includes('p/e'));
|
||||
const mktPass = row.inflated.audit?.passedGates;
|
||||
if (!isNaN(peNum)) {
|
||||
items.push({
|
||||
pass: !grahamFail,
|
||||
label: 'P/E Ratio',
|
||||
detail: grahamFail ? `Graham gate (15×) failed${mktPass ? ' — mkt-adjusted passed' : ''}` : 'Passes both P/E gates',
|
||||
value: `${pe}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const peg = m['PEG'];
|
||||
if (peg && peg !== '—') {
|
||||
const pegNum = parseFloat(String(peg));
|
||||
if (!isNaN(pegNum)) {
|
||||
items.push({
|
||||
pass: pegNum < 1.0,
|
||||
label: 'PEG Ratio',
|
||||
detail: pegNum < 1.0 ? 'Below 1.0 — growth is reasonably priced' : 'Above 1.0 — paying a premium for growth',
|
||||
value: `${peg}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const de = m['D/E'];
|
||||
if (de && de !== '—') {
|
||||
const deNum = parseFloat(String(de));
|
||||
if (!isNaN(deNum)) {
|
||||
items.push({
|
||||
pass: deNum < 1.5,
|
||||
label: 'Debt / Equity',
|
||||
detail: deNum < 1.5 ? 'Conservative leverage' : 'Elevated leverage — adds risk',
|
||||
value: `${de}×`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const fcf = m['FCF Yld%'];
|
||||
if (fcf && fcf !== '—') {
|
||||
const fcfNum = parseFloat(String(fcf));
|
||||
if (!isNaN(fcfNum)) {
|
||||
items.push({
|
||||
pass: fcfNum > 0,
|
||||
label: 'FCF Yield',
|
||||
detail: fcfNum > 0 ? 'Positive free cash flow' : 'Negative FCF — company is burning cash',
|
||||
value: `${fcf}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const roe = m['ROE%'];
|
||||
if (roe && roe !== '—') {
|
||||
const roeNum = parseFloat(String(roe));
|
||||
if (!isNaN(roeNum)) {
|
||||
items.push({
|
||||
pass: roeNum > 15,
|
||||
label: 'Return on Equity',
|
||||
detail: roeNum > 15 ? 'Above 15% — good capital efficiency' : 'Below 15% preferred threshold',
|
||||
value: `${roe}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return items;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={handleKeydown} />
|
||||
|
||||
{#if open && row}
|
||||
{@const sk = sigKey(row.signal)}
|
||||
{@const meta = SIGNAL_META[sk]}
|
||||
{@const m = row.asset.displayMetrics ?? {}}
|
||||
{@const mktPass = row.inflated.audit?.passedGates}
|
||||
{@const graOk = row.fundamental.audit?.passedGates}
|
||||
{@const gates = gateRows(row)}
|
||||
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="sm-backdrop" onclick={handleBackdrop}>
|
||||
<div class="sm-modal sm-modal-{meta.color}">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="sm-header">
|
||||
<div>
|
||||
<div class="sm-title">{meta.emoji} Why "{meta.title}"?</div>
|
||||
<div class="sm-sub">{row.asset.ticker} · {m['Price'] ?? ''}</div>
|
||||
</div>
|
||||
<button class="sm-close" onclick={onClose}>×</button>
|
||||
</div>
|
||||
|
||||
<!-- Summary box -->
|
||||
<div class="sm-summary sm-summary-{meta.color}">
|
||||
<p>{meta.summary}</p>
|
||||
</div>
|
||||
|
||||
<!-- Side-by-side verdict comparison (stocks only) -->
|
||||
{#if row.inflated && row.fundamental}
|
||||
<div class="sm-verdict-compare">
|
||||
<div class="sm-vb" class:sm-vb-pass={mktPass} class:sm-vb-fail={!mktPass}>
|
||||
<div class="sm-vb-label" class:pass={mktPass} class:fail={!mktPass}>Mkt-Adjusted Mode</div>
|
||||
<div class="sm-vb-verdict" class:pass={mktPass} class:fail={!mktPass}>{mktPass ? '✅ PASSES' : '✗ FAILS'}</div>
|
||||
<div class="sm-vb-detail">
|
||||
{mktPass ? 'Gates calibrated to live S&P P/E. Passes the relaxed market-adjusted threshold.' : 'Fails even the relaxed market-adjusted gates.'}
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm-vb" class:sm-vb-pass={graOk} class:sm-vb-fail={!graOk}>
|
||||
<div class="sm-vb-label" class:pass={graOk} class:fail={!graOk}>Graham (Fundamental) Mode</div>
|
||||
<div class="sm-vb-verdict" class:pass={graOk} class:fail={!graOk}>{graOk ? '✅ PASSES' : '✗ FAILS'}</div>
|
||||
<div class="sm-vb-detail">
|
||||
{graOk ? 'Passes Graham\'s strict 15× P/E and quality gates.' : 'Graham\'s strict 15× P/E gate is a hard rule. Fails at elevated valuations.'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Gate breakdown (if we have data) -->
|
||||
{#if gates.length > 0}
|
||||
<div class="sm-gates">
|
||||
<div class="sm-gates-title">Gate Breakdown</div>
|
||||
{#each gates as g}
|
||||
<div class="sm-gate-row" class:g-pass={g.pass} class:g-fail={!g.pass}>
|
||||
<span class="sm-gate-icon">{g.pass ? '✓' : '✗'}</span>
|
||||
<span class="sm-gate-text"><b>{g.label}</b> — {g.detail}</span>
|
||||
<span class="sm-gate-value">{g.value}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Footer tip -->
|
||||
<div class="sm-footer">
|
||||
💡 <strong>What to do:</strong> {meta.tip}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.sm-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #00000088;
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.sm-modal {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-input);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
max-width: 520px;
|
||||
width: 100%;
|
||||
box-shadow: 0 24px 64px #00000088;
|
||||
animation: modal-in 0.18s ease;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@keyframes modal-in {
|
||||
from { opacity: 0; transform: scale(0.96) translateY(8px); }
|
||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
|
||||
.sm-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.sm-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.sm-sub {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 3px;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.sm-close {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
.sm-close:hover { background: var(--bg-elevated); color: var(--text-primary); }
|
||||
|
||||
.sm-summary {
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.sm-summary p { font-size: 13px; line-height: 1.6; margin: 0; }
|
||||
.sm-summary-green { background: #0a2e1a; border: 1px solid #1a4a2a; }
|
||||
.sm-summary-green p { color: #86efac; }
|
||||
.sm-summary-blue { background: #0a1e3a; border: 1px solid #1a3a6a; }
|
||||
.sm-summary-blue p { color: #93c5fd; }
|
||||
.sm-summary-amber { background: #2a1a00; border: 1px solid #4a3000; }
|
||||
.sm-summary-amber p { color: #fbbf24; }
|
||||
.sm-summary-gray { background: var(--bg-elevated); border: 1px solid var(--border); }
|
||||
.sm-summary-gray p { color: var(--text-muted); }
|
||||
.sm-summary-red { background: #2a0d0d; border: 1px solid #4a1a1a; }
|
||||
.sm-summary-red p { color: #fca5a5; }
|
||||
|
||||
.sm-verdict-compare {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.sm-vb {
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.sm-vb.sm-vb-pass { background: #0a2e1a; border-color: #1a4a2a; }
|
||||
.sm-vb.sm-vb-fail { background: #2a0d0d; border-color: #4a1a1a; }
|
||||
|
||||
.sm-vb-label {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.sm-vb-label.pass { color: #4ade80; }
|
||||
.sm-vb-label.fail { color: #f87171; }
|
||||
|
||||
.sm-vb-verdict {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.sm-vb-verdict.pass { color: #4ade80; }
|
||||
.sm-vb-verdict.fail { color: #f87171; }
|
||||
|
||||
.sm-vb-detail {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.sm-gates { margin-bottom: 16px; }
|
||||
|
||||
.sm-gates-title {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.sm-gate-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 7px 10px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.sm-gate-row.g-pass { background: #0a2e1a; border: 1px solid #1a4a2a; }
|
||||
.sm-gate-row.g-fail { background: #2a0d0d; border: 1px solid #4a1a1a; }
|
||||
|
||||
.sm-gate-icon { font-size: 13px; flex-shrink: 0; }
|
||||
.g-pass .sm-gate-icon { color: #4ade80; }
|
||||
.g-fail .sm-gate-icon { color: #f87171; }
|
||||
|
||||
.sm-gate-text { flex: 1; color: var(--text-secondary); }
|
||||
.sm-gate-text :global(b) { color: var(--text-primary); }
|
||||
|
||||
.sm-gate-value {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sm-footer {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,317 @@
|
||||
<script lang="ts">
|
||||
import type { AssetResult } from '$lib/types.js';
|
||||
|
||||
let {
|
||||
open = false,
|
||||
row,
|
||||
onClose,
|
||||
}: {
|
||||
open: boolean;
|
||||
row: AssetResult | null;
|
||||
onClose: () => void;
|
||||
} = $props();
|
||||
|
||||
function handleBackdrop(e: MouseEvent) {
|
||||
if (e.target === e.currentTarget) onClose();
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') onClose();
|
||||
}
|
||||
|
||||
// Build gate breakdown from audit data
|
||||
function gateRows(row: AssetResult | null) {
|
||||
if (!row) return [];
|
||||
const mkt = row.inflated.audit;
|
||||
const graham = row.fundamental.audit;
|
||||
const m = row.asset.displayMetrics ?? {};
|
||||
|
||||
const items: { pass: boolean; label: string; detail: string; value: string }[] = [];
|
||||
|
||||
// P/E — the key differentiator for Speculation
|
||||
const pe = m['P/E'];
|
||||
if (pe && pe !== '—') {
|
||||
if (graham.failures?.some((f: string) => f.toLowerCase().includes('p/e'))) {
|
||||
items.push({ pass: false, label: 'P/E Ratio', detail: 'Graham gate (15×) failed', value: `${pe} > 15×` });
|
||||
}
|
||||
if (mkt.passedGates) {
|
||||
items.push({ pass: true, label: 'P/E Ratio', detail: 'Mkt-adjusted gate passed', value: `${pe} < mkt threshold` });
|
||||
}
|
||||
}
|
||||
|
||||
// PEG
|
||||
const peg = m['PEG'];
|
||||
if (peg && peg !== '—') {
|
||||
const pegNum = parseFloat(String(peg));
|
||||
items.push({ pass: !isNaN(pegNum) && pegNum < 1.0, label: 'PEG Ratio', detail: pegNum < 1.0 ? 'Paying less than growth justifies' : 'PEG above 1.0 — paying a growth premium', value: `${peg} ${pegNum < 1.0 ? '<' : '>'} 1.0` });
|
||||
}
|
||||
|
||||
// D/E
|
||||
const de = m['D/E'];
|
||||
if (de && de !== '—') {
|
||||
const deNum = parseFloat(String(de));
|
||||
items.push({ pass: !isNaN(deNum) && deNum < 1.5, label: 'Debt / Equity', detail: deNum < 1.5 ? 'Conservative leverage' : 'Elevated leverage', value: `${de}` });
|
||||
}
|
||||
|
||||
// FCF
|
||||
const fcf = m['FCF Yld%'];
|
||||
if (fcf && fcf !== '—') {
|
||||
const fcfNum = parseFloat(String(fcf));
|
||||
items.push({ pass: !isNaN(fcfNum) && fcfNum > 0, label: 'FCF Yield', detail: fcfNum > 0 ? 'Positive free cash flow' : 'Negative free cash flow — cash burn', value: `${fcf}` });
|
||||
}
|
||||
|
||||
// ROE
|
||||
const roe = m['ROE%'];
|
||||
if (roe && roe !== '—') {
|
||||
const roeNum = parseFloat(String(roe));
|
||||
items.push({ pass: !isNaN(roeNum) && roeNum > 15, label: 'Return on Equity', detail: roeNum > 15 ? 'Above 15% threshold — quality signal' : 'Below 15% preferred threshold', value: `${roe}` });
|
||||
}
|
||||
|
||||
return items;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={handleKeydown} />
|
||||
|
||||
{#if open && row}
|
||||
{@const m = row.asset.displayMetrics ?? {}}
|
||||
{@const mktPass = row.inflated.audit?.passedGates}
|
||||
{@const grahamOk = row.fundamental.audit?.passedGates}
|
||||
{@const gates = gateRows(row)}
|
||||
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="spec-backdrop" onclick={handleBackdrop}>
|
||||
<div class="spec-modal">
|
||||
<!-- Header -->
|
||||
<div class="spec-modal-header">
|
||||
<div>
|
||||
<div class="spec-modal-title">⚡ Why "Speculation"?</div>
|
||||
<div class="spec-modal-sub">{row.asset.ticker} · {m['Price'] ?? ''}</div>
|
||||
</div>
|
||||
<button class="spec-modal-close" onclick={onClose}>×</button>
|
||||
</div>
|
||||
|
||||
<!-- Plain-English summary -->
|
||||
<div class="spec-summary">
|
||||
<p><strong>Passes market-adjusted gates but fails Graham's strict fundamental rules.</strong> This stock is attractive at today's market valuations, but would not meet a value investor's stricter criteria. Treat as a momentum or growth play — not a deep value position.</p>
|
||||
</div>
|
||||
|
||||
<!-- Side-by-side verdict comparison -->
|
||||
<div class="spec-verdict-compare">
|
||||
<div class="spec-vb" class:spec-vb-pass={mktPass} class:spec-vb-fail={!mktPass}>
|
||||
<div class="spec-vb-label" class:pass={mktPass} class:fail={!mktPass}>Mkt-Adjusted Mode</div>
|
||||
<div class="spec-vb-verdict" class:pass={mktPass} class:fail={!mktPass}>{mktPass ? '✅ PASSES' : '✗ FAILS'}</div>
|
||||
<div class="spec-vb-detail">
|
||||
{#if mktPass}
|
||||
Gates calibrated to live S&P P/E. P/E passes the market-adjusted threshold at today's valuations.
|
||||
{:else}
|
||||
Failed even relaxed market-adjusted gates — rare for Speculation signal.
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="spec-vb" class:spec-vb-pass={grahamOk} class:spec-vb-fail={!grahamOk}>
|
||||
<div class="spec-vb-label" class:pass={grahamOk} class:fail={!grahamOk}>Graham (Fundamental) Mode</div>
|
||||
<div class="spec-vb-verdict" class:pass={grahamOk} class:fail={!grahamOk}>{grahamOk ? '✅ PASSES' : '✗ FAILS'}</div>
|
||||
<div class="spec-vb-detail">
|
||||
{#if !grahamOk}
|
||||
Graham's strict 15× P/E gate is a hard rule. Fails immediately at elevated valuations.
|
||||
{:else}
|
||||
Passes Graham's fundamental gates — unusual for a Speculation signal.
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gate-by-gate breakdown -->
|
||||
<div class="spec-gate-breakdown">
|
||||
<div class="spec-gb-title">Gate Breakdown — which rule failed</div>
|
||||
{#each gates as g}
|
||||
<div class="spec-gate-row" class:g-pass={g.pass} class:g-fail={!g.pass}>
|
||||
<span class="spec-gate-icon">{g.pass ? '✓' : '✗'}</span>
|
||||
<span class="spec-gate-text"><b>{g.label}</b> — {g.detail}</span>
|
||||
<span class="spec-gate-value">{g.value}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Footer tip -->
|
||||
<div class="spec-modal-footer">
|
||||
💡 <strong>What to do:</strong> Speculation signals are valid positions — they pass today's market standards. Consider sizing smaller than a Strong Buy and monitoring P/E compression risk if the market re-rates growth stocks downward.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.spec-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--bg-overlay);
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.spec-modal {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-input);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
max-width: 520px;
|
||||
width: 90%;
|
||||
box-shadow: 0 24px 64px #00000088;
|
||||
animation: modal-in 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes modal-in {
|
||||
from { opacity: 0; transform: scale(0.96) translateY(8px); }
|
||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
|
||||
.spec-modal-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.spec-modal-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.spec-modal-sub {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 2px;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.spec-modal-close {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition);
|
||||
|
||||
&:hover { background: var(--bg-elevated); color: var(--text-primary); }
|
||||
}
|
||||
|
||||
.spec-summary {
|
||||
background: var(--amber-dim);
|
||||
border: 1px solid #4a3000;
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
p { font-size: 12px; color: var(--amber); line-height: 1.6; }
|
||||
}
|
||||
|
||||
.spec-verdict-compare {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.spec-vb {
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border);
|
||||
|
||||
&.spec-vb-pass { background: var(--green-dim); border-color: var(--green-mid); }
|
||||
&.spec-vb-fail { background: var(--red-dim); border-color: #4a1a1a; }
|
||||
}
|
||||
|
||||
.spec-vb-label {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&.pass { color: var(--green); }
|
||||
&.fail { color: var(--red); }
|
||||
}
|
||||
|
||||
.spec-vb-verdict {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&.pass { color: var(--green); }
|
||||
&.fail { color: var(--red); }
|
||||
}
|
||||
|
||||
.spec-vb-detail {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.spec-gate-breakdown {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.spec-gb-title {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.spec-gate-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 7px 10px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 12px;
|
||||
|
||||
&.g-pass { background: var(--green-dim); }
|
||||
&.g-fail { background: var(--red-dim); }
|
||||
}
|
||||
|
||||
.spec-gate-icon {
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.g-pass & { color: var(--green); }
|
||||
.g-fail & { color: var(--red); }
|
||||
}
|
||||
|
||||
.spec-gate-text {
|
||||
flex: 1;
|
||||
color: var(--text-secondary);
|
||||
|
||||
b { color: var(--text-primary); }
|
||||
}
|
||||
|
||||
.spec-gate-value {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.spec-modal-footer {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,200 @@
|
||||
<script lang="ts">
|
||||
import { watchlistStore } from '$lib/stores/watchlist.store.svelte.js';
|
||||
import { screenerStore } from '$lib/stores/screener.store.svelte.js';
|
||||
import { screenTickers, analyzeTickers } from '$lib/api.js';
|
||||
import Spinner from '$lib/components/shared/Spinner.svelte';
|
||||
import AssetTable from '$lib/components/screener/AssetTable.svelte';
|
||||
import type { AssetType, ScreenerResult } from '$lib/types.js';
|
||||
|
||||
let results = $state<ScreenerResult | null>(null);
|
||||
let loading = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
let screenedAt = $state('');
|
||||
let collapsed = $state(false);
|
||||
|
||||
// Re-screen whenever the pin set changes (debounced 300ms to batch quick adds)
|
||||
let debounceTimer: ReturnType<typeof setTimeout>;
|
||||
$effect(() => {
|
||||
const tickers = watchlistStore.tickers; // reactive dependency
|
||||
clearTimeout(debounceTimer);
|
||||
if (tickers.length === 0) { results = null; return; }
|
||||
debounceTimer = setTimeout(() => screen(tickers), 300);
|
||||
return () => clearTimeout(debounceTimer);
|
||||
});
|
||||
|
||||
async function screen(tickers: string[]) {
|
||||
loading = true;
|
||||
error = null;
|
||||
try {
|
||||
results = await screenTickers(tickers);
|
||||
screenedAt = new Date().toLocaleTimeString();
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Run LLM analysis for the given asset type using watchlist tickers,
|
||||
// then open the shared AnalysisSidebar via screenerStore.
|
||||
async function runAnalysis(type: AssetType): Promise<void> {
|
||||
const tickers = (results?.[type] ?? []).map((r) => r.asset.ticker);
|
||||
if (!tickers.length) return;
|
||||
screenerStore.sidebar = { open: true, loading: true, analysis: null, type, error: null };
|
||||
try {
|
||||
const res = await analyzeTickers(tickers);
|
||||
const reason = res.reason === 'no_stories' ? 'No recent news found for these tickers.' : null;
|
||||
screenerStore.sidebar = {
|
||||
open: true,
|
||||
loading: false,
|
||||
analysis: res.analysis,
|
||||
type,
|
||||
error: res.analysis ? null : (reason ?? 'Analysis failed — check server logs for details.'),
|
||||
};
|
||||
} catch (e) {
|
||||
screenerStore.sidebar = {
|
||||
open: true, loading: false, analysis: null, type,
|
||||
error: (e as Error).message,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if watchlistStore.count > 0 || loading}
|
||||
<div class="wl-wrapper">
|
||||
<div class="wl-header">
|
||||
<button
|
||||
class="wl-collapse-btn"
|
||||
onclick={() => collapsed = !collapsed}
|
||||
title={collapsed ? 'Expand watchlist' : 'Collapse watchlist'}
|
||||
>{collapsed ? '▸' : '▾'}</button>
|
||||
<span class="wl-title">📌 Watchlist</span>
|
||||
<span class="wl-count">{watchlistStore.count}</span>
|
||||
{#if screenedAt && !collapsed}
|
||||
<span class="wl-screened-at">screened {screenedAt}</span>
|
||||
{/if}
|
||||
{#if loading}<Spinner size="sm" />{/if}
|
||||
</div>
|
||||
|
||||
{#if !collapsed}
|
||||
{#if error}
|
||||
<div class="error-banner">⚠ {error}</div>
|
||||
{:else if loading && !results}
|
||||
<div class="wl-loading"><Spinner size="lg" label="Screening watchlist…" /></div>
|
||||
{:else if results}
|
||||
<!-- Reuse AssetTable for each type — full feature parity with the screener -->
|
||||
{#each (['STOCK', 'ETF', 'BOND'] as const) as assetType}
|
||||
{#if results[assetType]?.length}
|
||||
<AssetTable
|
||||
type={assetType}
|
||||
rows={results[assetType]}
|
||||
analyzeLoading={screenerStore.sidebar.loading && screenerStore.sidebar.type === assetType}
|
||||
onAnalyze={() => runAnalysis(assetType)}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
{#if results.ERROR?.length}
|
||||
<div class="wl-errors">
|
||||
{#each results.ERROR as e}
|
||||
<span class="wl-error-item">
|
||||
⚠ {e.ticker}: {e.message}
|
||||
<button
|
||||
class="wl-unpin-btn"
|
||||
onclick={() => watchlistStore.remove(e.ticker)}
|
||||
title="Remove"
|
||||
>✕</button>
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.wl-wrapper {
|
||||
margin-top: 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.wl-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 0 4px;
|
||||
}
|
||||
|
||||
.wl-collapse-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.wl-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.wl-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 5px;
|
||||
border-radius: 9px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
background: var(--blue);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wl-screened-at {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.wl-loading {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.wl-errors {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.wl-error-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.wl-unpin-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--text-faint);
|
||||
font-size: 11px;
|
||||
padding: 1px 3px;
|
||||
border-radius: 3px;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.wl-unpin-btn:hover { color: #f87171; }
|
||||
</style>
|
||||
@@ -13,7 +13,7 @@
|
||||
{ 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' },
|
||||
{ label: 'Vol', value: ctx.volatilityRegime, regime: ctx.volatilityRegime, color: ctx.volatilityRegime === 'HIGH' ? 'orange' : ctx.volatilityRegime === 'LOW' ? 'blue' : 'slate' },
|
||||
]);
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
import { fetchWatchlist, pinTicker, unpinTicker } from '$lib/api/watchlist.js';
|
||||
|
||||
class WatchlistStore {
|
||||
// ── State ──────────────────────────────────────────────────────────────────
|
||||
pins = $state<Set<string>>(new Set());
|
||||
loading = $state(false);
|
||||
ready = $state(false); // true once initial load completes
|
||||
|
||||
// ── Derived ────────────────────────────────────────────────────────────────
|
||||
get tickers(): string[] {
|
||||
return [...this.pins];
|
||||
}
|
||||
get count(): number {
|
||||
return this.pins.size;
|
||||
}
|
||||
|
||||
isPinned(ticker: string): boolean {
|
||||
return this.pins.has(ticker);
|
||||
}
|
||||
|
||||
// ── Load from server ───────────────────────────────────────────────────────
|
||||
async load(): Promise<void> {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
try {
|
||||
const { tickers } = await fetchWatchlist();
|
||||
this.pins = new Set(tickers);
|
||||
} catch {
|
||||
// Silently fail — user sees empty watchlist, can retry by visiting page
|
||||
} finally {
|
||||
this.loading = false;
|
||||
this.ready = true;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Toggle (optimistic) ────────────────────────────────────────────────────
|
||||
async toggle(ticker: string): Promise<void> {
|
||||
const wasPin = this.pins.has(ticker);
|
||||
|
||||
// Optimistic update — update UI immediately
|
||||
const next = new Set(this.pins);
|
||||
wasPin ? next.delete(ticker) : next.add(ticker);
|
||||
this.pins = next;
|
||||
|
||||
try {
|
||||
if (wasPin) {
|
||||
await unpinTicker(ticker);
|
||||
} else {
|
||||
await pinTicker(ticker);
|
||||
}
|
||||
} catch {
|
||||
// Rollback on failure
|
||||
const rollback = new Set(this.pins);
|
||||
wasPin ? rollback.add(ticker) : rollback.delete(ticker);
|
||||
this.pins = rollback;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Remove ─────────────────────────────────────────────────────────────────
|
||||
async remove(ticker: string): Promise<void> {
|
||||
const next = new Set(this.pins);
|
||||
next.delete(ticker);
|
||||
this.pins = next;
|
||||
try {
|
||||
await unpinTicker(ticker);
|
||||
} catch {
|
||||
// Rollback
|
||||
const rollback = new Set(this.pins);
|
||||
rollback.add(ticker);
|
||||
this.pins = rollback;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const watchlistStore = new WatchlistStore();
|
||||
@@ -9,6 +9,7 @@
|
||||
*/
|
||||
export function verdictShort(label: string | null | undefined): string {
|
||||
if (!label) return '—';
|
||||
if (label.includes('No Data')) return 'No Data';
|
||||
if (label.includes('High Conviction')) return 'Strong Buy';
|
||||
if (label.includes('Speculative')) return 'Speculative';
|
||||
if (label.includes('Momentum')) return 'Momentum';
|
||||
@@ -34,6 +35,8 @@ export function vClass(
|
||||
label: string | null | undefined,
|
||||
): 'green' | 'yellow' | 'red' | 'blue' | 'gray' {
|
||||
if (!label) return 'gray';
|
||||
// Insufficient data is unknown, not a neutral opinion — render gray
|
||||
if (label.includes('No Data')) return 'gray';
|
||||
if (
|
||||
label.startsWith('🟢') ||
|
||||
label.includes('High Conviction') ||
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
import '../styles/app.scss';
|
||||
import Spinner from '$lib/components/shared/Spinner.svelte';
|
||||
import { authStore } from '$lib/stores/auth.store.svelte.js';
|
||||
import { watchlistStore } from '$lib/stores/watchlist.store.svelte.js';
|
||||
import type { Snippet } from 'svelte';
|
||||
let { children }: { children: Snippet } = $props();
|
||||
|
||||
@@ -19,6 +20,13 @@
|
||||
}
|
||||
});
|
||||
|
||||
// Load watchlist once when user is authenticated
|
||||
$effect(() => {
|
||||
if (authStore.isLoggedIn && !watchlistStore.ready && !watchlistStore.loading) {
|
||||
watchlistStore.load();
|
||||
}
|
||||
});
|
||||
|
||||
const navLabel = $derived(
|
||||
activePath === '/portfolio' ? 'Loading portfolio…' :
|
||||
activePath?.startsWith('/calls') ? 'Loading market calls…' :
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
import MarketContextStrip from '$lib/components/shared/MarketContextStrip.svelte';
|
||||
import AssetTable from '$lib/components/screener/AssetTable.svelte';
|
||||
import AnalysisSidebar from '$lib/components/screener/AnalysisSidebar.svelte';
|
||||
import WatchlistPanel from '$lib/components/screener/WatchlistPanel.svelte';
|
||||
|
||||
const s = screenerStore;
|
||||
|
||||
@@ -92,6 +93,12 @@
|
||||
</section>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<WatchlistPanel />
|
||||
</div>
|
||||
|
||||
<AnalysisSidebar sidebar={s.sidebar} onClose={() => s.closeSidebar()} />
|
||||
<AnalysisSidebar
|
||||
sidebar={s.sidebar}
|
||||
onClose={() => s.closeSidebar()}
|
||||
onScreenTickers={(tickers) => { s.input = tickers.join(', '); s.screen(); }}
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
onMount(() => goto('/'));
|
||||
</script>
|
||||
@@ -0,0 +1 @@
|
||||
export const ssr = false;
|
||||
@@ -75,6 +75,34 @@ button {
|
||||
&:hover:not(:disabled) { background: #163356; }
|
||||
}
|
||||
|
||||
// ── btn-glossary (ghost — "? Glossary" in section header) ──────────────
|
||||
|
||||
.btn-glossary {
|
||||
@extend %btn-inline-flex;
|
||||
background: transparent;
|
||||
color: var(--text-faint);
|
||||
border: 1px solid var(--border);
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.03em;
|
||||
padding: 4px 11px;
|
||||
border-radius: var(--radius-sm);
|
||||
white-space: nowrap;
|
||||
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-card);
|
||||
border-color: var(--border-input);
|
||||
}
|
||||
|
||||
&.btn-glossary-active {
|
||||
color: #60a5fa;
|
||||
background: #1e3a5f22;
|
||||
border-color: #1e3a5f88;
|
||||
}
|
||||
}
|
||||
|
||||
// ── btn-analyze (ghost blue — "✦ Analyze" in section header) ────────────
|
||||
|
||||
.btn-analyze {
|
||||
|
||||
@@ -113,3 +113,20 @@ main { flex: 1; padding: 28px 32px; }
|
||||
align-items: center;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.nav-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
margin-left: 5px;
|
||||
border-radius: 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
background: var(--blue);
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -3,8 +3,12 @@
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
font-family: var(--font-ui);
|
||||
background: var(--bg-base);
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-primary);
|
||||
font-size: var(--fs-md);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
button { font-family: inherit; cursor: pointer; }
|
||||
input, select { font-family: inherit; }
|
||||
|
||||
+367
-229
@@ -106,32 +106,23 @@
|
||||
|
||||
.asset-section { margin-bottom: 24px; }
|
||||
|
||||
.analyze-btn {
|
||||
margin-left: auto;
|
||||
font-size: var(--fs-sm);
|
||||
padding: 5px 14px;
|
||||
}
|
||||
|
||||
// ── Inline filter row (inside thead) ─────────────────────────────────────
|
||||
// ── Inline filter row ────────────────────────────────────────────────────
|
||||
|
||||
.filter-row td {
|
||||
padding: 4px var(--space-lg) !important;
|
||||
background: #0a1628;
|
||||
padding: 5px 8px !important;
|
||||
background: var(--bg-base);
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
|
||||
// sticky first cell matches the header sticky column
|
||||
&:first-child {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background: #0a1628;
|
||||
background: var(--bg-base);
|
||||
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;
|
||||
|
||||
@@ -145,7 +136,6 @@
|
||||
&::-webkit-inner-spin-button { -webkit-appearance: none; }
|
||||
}
|
||||
|
||||
// Checkbox + label for flag filter
|
||||
.th-filter-check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -155,44 +145,31 @@
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
|
||||
input[type='checkbox'] {
|
||||
accent-color: var(--blue);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
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;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-secondary);
|
||||
padding: 3px 7px;
|
||||
padding: 4px 8px;
|
||||
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); }
|
||||
&:focus { border-color: var(--blue); }
|
||||
&::placeholder { color: var(--text-muted); }
|
||||
|
||||
// Style active (non-empty) filter
|
||||
&:not([value='']):not(:placeholder-shown) {
|
||||
border-color: var(--blue);
|
||||
color: #93c5fd;
|
||||
}
|
||||
option { background: var(--bg-surface); }
|
||||
}
|
||||
|
||||
// "Clear filters" link in section header
|
||||
.filter-clear-btn {
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
color: var(--text-muted);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
@@ -203,211 +180,257 @@
|
||||
&:hover { color: var(--red); }
|
||||
}
|
||||
|
||||
// Sortable column header
|
||||
// ── Column headers ────────────────────────────────────────────────────────
|
||||
|
||||
.sort-th {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:hover { color: var(--text-muted); }
|
||||
&:hover { color: var(--text-primary); }
|
||||
}
|
||||
|
||||
.sort-icon {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
font-size: 10px;
|
||||
color: var(--text-faint);
|
||||
font-size: 9px;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.4;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
|
||||
.sort-th:hover & { opacity: 0.8; }
|
||||
}
|
||||
|
||||
// Expand toggle column
|
||||
.col-expand {
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
color: var(--text-faint);
|
||||
color: var(--text-muted);
|
||||
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;
|
||||
}
|
||||
.asset-table td:nth-child(4) { min-width: 160px; } // signal cell — pill + why? link
|
||||
|
||||
// ── Merged Signal/Verdict pill ────────────────────────────────────────────
|
||||
// ── Signal pill ───────────────────────────────────────────────────────────
|
||||
|
||||
.signal-verdict-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
min-width: 120px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Main verdict pill — colored by signal class
|
||||
.sv-pill {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 2px 9px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-pill);
|
||||
letter-spacing: 0.03em;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
width: fit-content;
|
||||
transition: filter var(--transition);
|
||||
|
||||
&.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; }
|
||||
&.sv-strong { background: var(--green-dim); color: var(--green); border: 1px solid var(--green-mid); }
|
||||
&.sv-momentum { background: var(--blue-dim); color: var(--blue); border: 1px solid var(--blue-mid); }
|
||||
&.sv-spec { background: var(--amber-dim); color: var(--amber); border: 1px solid #4a3000; }
|
||||
&.sv-neutral { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-input); }
|
||||
&.sv-avoid { background: var(--red-dim); color: var(--red); border: 1px solid #4a1a1a; }
|
||||
}
|
||||
|
||||
// Sub-label showing the full signal text
|
||||
.sv-signal-label {
|
||||
font-size: 10px;
|
||||
color: var(--text-faint);
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
// Pill as a clickable button — dotted underline signals interactivity
|
||||
button.sv-pill-link {
|
||||
cursor: pointer;
|
||||
background: none; // reset button default, color set by sv-* variant above
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
text-underline-offset: 3px;
|
||||
text-decoration-thickness: 1px;
|
||||
|
||||
&:hover { filter: brightness(1.2); }
|
||||
}
|
||||
|
||||
// ── Score dot scale ───────────────────────────────────────────────────────
|
||||
|
||||
.score-cell {
|
||||
white-space: nowrap;
|
||||
min-width: 80px;
|
||||
}
|
||||
.score-cell { white-space: nowrap; min-width: 80px; }
|
||||
|
||||
.score-dots {
|
||||
display: inline-flex;
|
||||
gap: 3px;
|
||||
gap: 2px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.score-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #1e3050;
|
||||
border: 1px solid #2a4060;
|
||||
background: var(--border-input);
|
||||
transition: background 0.15s;
|
||||
|
||||
&.on { background: var(--blue); border-color: #60a5fa; box-shadow: 0 0 4px #3b82f644; }
|
||||
&.on { background: var(--blue); }
|
||||
}
|
||||
|
||||
.score-num {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.score-fail {
|
||||
color: var(--red);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
.score-fail { color: var(--red); font-size: 12px; font-weight: 700; }
|
||||
|
||||
.score-nodata {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// ── Flags badge with hover-expand tooltip ────────────────────────────────
|
||||
|
||||
.flags-cell {
|
||||
position: relative;
|
||||
min-width: 48px;
|
||||
// Low-coverage chip — shown when fewer than half the scoring factors had data
|
||||
.score-cov {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--amber, #d97706);
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 8px;
|
||||
padding: 0 4px;
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
// ── Cap / Style chips ─────────────────────────────────────────────────────
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-xs);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cap-tag { color: var(--text-secondary); }
|
||||
.style-tag { color: var(--text-secondary); }
|
||||
|
||||
// ── Flags badge with hover 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; }
|
||||
&:hover .flags-tooltip { display: block; }
|
||||
}
|
||||
|
||||
.flags-count {
|
||||
display: inline-block;
|
||||
background: #431a0033;
|
||||
border: 1px solid #431a0066;
|
||||
color: #fb923c;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: var(--amber-dim);
|
||||
color: var(--amber);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-weight: 600;
|
||||
padding: 3px 9px;
|
||||
border-radius: var(--radius-xs);
|
||||
border: 1px solid #3a2800;
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.flags-tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: calc(100% + 6px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 50;
|
||||
background: #0c1829;
|
||||
border: 1px solid #1e3a5f;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border-input);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 8px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 180px;
|
||||
max-width: 280px;
|
||||
padding: 10px 12px;
|
||||
min-width: 240px;
|
||||
max-width: 300px;
|
||||
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).
|
||||
.flags-tt-title {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.flags-tt-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: var(--amber);
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
// ── Summary row (data row) ────────────────────────────────────────────────
|
||||
|
||||
.summary-row {
|
||||
cursor: pointer;
|
||||
transition: background var(--transition);
|
||||
|
||||
&:hover { background: #1e2f48; }
|
||||
&:hover { background: var(--bg-surface); }
|
||||
|
||||
&.row-open {
|
||||
background: #1a2f4a;
|
||||
background: var(--bg-row-sel);
|
||||
border-left: 2px solid var(--blue);
|
||||
|
||||
td { border-bottom: none !important; }
|
||||
|
||||
// Brighter left accent on the expand cell
|
||||
.col-expand {
|
||||
box-shadow: inset 3px 0 0 #60a5fa;
|
||||
}
|
||||
.col-expand { color: var(--blue); }
|
||||
}
|
||||
}
|
||||
|
||||
// Ticker — monospace, bold
|
||||
.ticker {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
// ── Inline detail row ────────────────────────────────────────────────────
|
||||
|
||||
.detail-row td {
|
||||
padding: 0 !important;
|
||||
border-bottom: none !important;
|
||||
box-shadow: inset 0 -3px 0 #1e3a5f;
|
||||
box-shadow: inset 0 -2px 0 var(--blue);
|
||||
}
|
||||
.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);
|
||||
grid-template-columns: 1fr 360px;
|
||||
border-top: 1px solid var(--blue);
|
||||
background: #0c1520;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// ── Left zone ────────────────────────────────────────────────────────────
|
||||
.dp-left {
|
||||
min-width: 0;
|
||||
padding: 16px 18px 16px 16px;
|
||||
border-right: 1px solid #1e3a5f;
|
||||
padding: 16px 18px;
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
@@ -418,176 +441,234 @@
|
||||
.dp-right {
|
||||
min-width: 0;
|
||||
padding: 16px 18px;
|
||||
background: #0a1018;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
// ── Section title ─────────────────────────────────────────────────────────
|
||||
// ── Section label ─────────────────────────────────────────────────────────
|
||||
.dp-title {
|
||||
font-size: 10px;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: #4a7aaa;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.dp-mode-note {
|
||||
font-size: 10px;
|
||||
font-size: 9px;
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
color: #3a5a7a;
|
||||
color: var(--text-muted);
|
||||
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;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.dp-metric-card {
|
||||
min-width: 0;
|
||||
background: #0f2040;
|
||||
border: 1px solid #1a3050;
|
||||
border-radius: 6px;
|
||||
padding: 5px 7px;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
gap: 3px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: border-color var(--transition), background var(--transition);
|
||||
|
||||
&:hover { border-color: var(--purple); background: var(--bg-elevated); }
|
||||
}
|
||||
|
||||
.dp-mc-label {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #3d5a7a;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
// ? icon inside metric card label — appears on card hover
|
||||
.dp-mc-help {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
font-size: 8px;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition);
|
||||
flex-shrink: 0;
|
||||
|
||||
.dp-metric-card:hover & { opacity: 1; color: var(--purple); border-color: var(--purple); }
|
||||
}
|
||||
|
||||
// Pass / fail color states on metric cards
|
||||
.dp-metric-card.dp-mc-pass {
|
||||
border-color: var(--green-mid);
|
||||
background: linear-gradient(180deg, #0d2e1a 0%, var(--bg-surface) 100%);
|
||||
|
||||
.dp-mc-label { color: var(--green); }
|
||||
}
|
||||
|
||||
.dp-metric-card.dp-mc-fail {
|
||||
border-color: #4a1a1a;
|
||||
background: linear-gradient(180deg, #2e0d0d 0%, var(--bg-surface) 100%);
|
||||
|
||||
.dp-mc-label { color: var(--red); }
|
||||
}
|
||||
|
||||
.dp-mc-value {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
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-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;
|
||||
gap: 5px;
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.dp-gate-chip-pass {
|
||||
background: #14532d33;
|
||||
background: var(--green-dim);
|
||||
color: var(--green);
|
||||
border-color: #14532d66;
|
||||
border-color: var(--green-mid);
|
||||
}
|
||||
|
||||
.dp-gate-chip-fail {
|
||||
background: #450a0a33;
|
||||
background: var(--red-dim);
|
||||
color: var(--red);
|
||||
border-color: #450a0a66;
|
||||
border-color: #4a1a1a;
|
||||
}
|
||||
|
||||
// ── Risk flag pills ───────────────────────────────────────────────────────
|
||||
.dp-risk-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.dp-risk-row { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
|
||||
.dp-risk-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 2px 9px;
|
||||
gap: 4px;
|
||||
padding: 3px 10px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: #431a0033;
|
||||
color: #fb923c;
|
||||
border: 1px solid #431a0066;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
background: var(--amber-dim);
|
||||
color: var(--amber);
|
||||
border: 1px solid #3a2800;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background var(--transition);
|
||||
|
||||
&:hover { background: #3a2800; }
|
||||
}
|
||||
|
||||
// ── Horizontal bar chart (factor scores) ─────────────────────────────────
|
||||
.dp-bar-chart {
|
||||
// ── Factor score cards (redesigned) ──────────────────────────────────────
|
||||
|
||||
.dp-factor-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.dp-bar-row {
|
||||
display: grid;
|
||||
grid-template-columns: 88px 1fr 36px;
|
||||
.dp-factor-item {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
transition: border-color var(--transition);
|
||||
|
||||
&:hover { border-color: var(--purple); }
|
||||
}
|
||||
|
||||
.dp-factor-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.dp-bar-label {
|
||||
font-size: 12px;
|
||||
color: #6b8aad;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.dp-factor-name {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.dp-factor-verdict {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 1px 7px;
|
||||
border-radius: var(--radius-xs);
|
||||
|
||||
&.fv-pos { background: var(--green-dim); color: var(--green); }
|
||||
&.fv-neg { background: var(--red-dim); color: var(--red); }
|
||||
&.fv-neu { background: var(--bg-elevated); color: var(--text-secondary); }
|
||||
}
|
||||
|
||||
.dp-factor-reason {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 5px;
|
||||
line-height: 1.4;
|
||||
|
||||
b { color: var(--text-secondary); }
|
||||
}
|
||||
|
||||
.dp-bar-track {
|
||||
height: 10px;
|
||||
background: #0f2040;
|
||||
height: 5px;
|
||||
background: var(--border);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #1a3050;
|
||||
}
|
||||
|
||||
.dp-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
transition: width 0.5s 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-pos { background: var(--green); }
|
||||
&.dp-bar-neg { background: var(--red); }
|
||||
}
|
||||
|
||||
.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) ─────────────────
|
||||
// Gate failures list (no factor cards)
|
||||
.dp-failures {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -595,37 +676,28 @@
|
||||
}
|
||||
|
||||
.dp-failure-item {
|
||||
font-size: 13px;
|
||||
color: #f87171;
|
||||
font-size: 12px;
|
||||
color: var(--red);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.dp-no-factors {
|
||||
font-size: 12px;
|
||||
color: #3a5a7a;
|
||||
color: var(--text-muted);
|
||||
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 label */
|
||||
.analyst-cell {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-muted);
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* .flag / .flag-more removed — replaced by .flags-badge hover-expand system */
|
||||
|
||||
// ── MarketContext (collapsible card) ──────────────────────────────────────
|
||||
|
||||
.ctx-grid {
|
||||
@@ -820,3 +892,69 @@
|
||||
.tip-wrap:hover .tip-box { display: block; }
|
||||
|
||||
.ctx-value { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-top: 4px; }
|
||||
|
||||
// ── Pin button + expand toggle ────────────────────────────────────────────
|
||||
|
||||
.col-expand {
|
||||
width: 52px;
|
||||
min-width: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.row-toggle {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--fs-xs);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pin-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 1px 2px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
opacity: 0.35;
|
||||
transition: opacity var(--transition), transform var(--transition);
|
||||
|
||||
&:hover { opacity: 0.85; transform: scale(1.15); }
|
||||
&.pinned { opacity: 1; }
|
||||
}
|
||||
|
||||
// ── News links in detail panel ────────────────────────────────────────────
|
||||
|
||||
.dp-news-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dp-news-label {
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dp-news-link {
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--blue);
|
||||
text-decoration: none;
|
||||
padding: 3px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-hover);
|
||||
transition: background var(--transition), border-color var(--transition);
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-card);
|
||||
border-color: var(--blue);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -153,3 +153,387 @@
|
||||
color: var(--text-dim);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
// ── GlossaryPanel ─────────────────────────────────────────────────────────
|
||||
|
||||
.glossary-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 98; // below panel (99) — transparent click catcher
|
||||
background: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.glossary-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 340px;
|
||||
background: #0d1117;
|
||||
border-left: 1px solid #1e2a3a;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
box-shadow: -6px 0 32px #00000088;
|
||||
}
|
||||
|
||||
.glossary-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-surface);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.glossary-title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
letter-spacing: 0.01em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.glossary-title-q {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid var(--text-dimmer);
|
||||
font-size: 10px;
|
||||
color: var(--text-dimmer);
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.glossary-close {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-dimmer);
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-xs);
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover { color: var(--text-muted); background: var(--bg-card); border-color: var(--border-input); }
|
||||
}
|
||||
|
||||
.glossary-search-wrap {
|
||||
position: relative;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
flex-shrink: 0;
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
|
||||
.glossary-search {
|
||||
width: 100%;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-input);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-secondary);
|
||||
padding: 7px 28px 7px 10px;
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: border-color var(--transition);
|
||||
box-sizing: border-box;
|
||||
|
||||
&::placeholder { color: var(--text-faint); }
|
||||
&:focus { border-color: var(--blue); box-shadow: 0 0 0 2px #3b82f618; }
|
||||
}
|
||||
|
||||
.glossary-search-clear {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-faint);
|
||||
font-size: 11px;
|
||||
padding: 2px 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover { color: var(--text-muted); }
|
||||
}
|
||||
|
||||
.glossary-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 0 20px;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #1e3a5f transparent;
|
||||
&::-webkit-scrollbar { width: 4px; }
|
||||
&::-webkit-scrollbar-thumb { background: #1e3a5f; border-radius: 2px; }
|
||||
}
|
||||
|
||||
// ── Context banner — fixed between search and body ────────────────────────
|
||||
|
||||
.glossary-ctx-banner {
|
||||
background: #0a2e1a;
|
||||
border-top: 1px solid #1a4a2a;
|
||||
border-bottom: 1px solid #1a4a2a;
|
||||
padding: 9px 14px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #4ade80;
|
||||
letter-spacing: 0.02em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 0; // flush with panel edges
|
||||
}
|
||||
|
||||
.glossary-category { margin-bottom: 2px; }
|
||||
|
||||
.glossary-cat-header {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--text-faint);
|
||||
padding: 12px 14px 4px;
|
||||
}
|
||||
|
||||
// ── Individual item ───────────────────────────────────────────────────────
|
||||
|
||||
.glossary-item {
|
||||
border-left: 3px solid transparent;
|
||||
transition: border-color 0.15s ease, background 0.1s ease;
|
||||
margin: 0 8px 2px;
|
||||
border-radius: 6px;
|
||||
|
||||
// Highlighted = relevant to selected row → green left border, no bg change
|
||||
&.glossary-item-active {
|
||||
border-left-color: #22c55e;
|
||||
}
|
||||
|
||||
// Open/expanded → purple tint + purple left border
|
||||
&.glossary-item-open {
|
||||
border-left-color: #7c3aed;
|
||||
background: #1a1035;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.glossary-item-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 9px 10px 9px 11px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
gap: 8px;
|
||||
border-radius: 6px;
|
||||
transition: background 0.1s ease;
|
||||
|
||||
&:hover { background: #151f2e; }
|
||||
}
|
||||
|
||||
.glossary-item-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.glossary-active-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #22c55e;
|
||||
box-shadow: 0 0 4px #22c55e66;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// ── Category tags — all same gray pill, label text only ───────────────────
|
||||
|
||||
.glossary-cat-tag {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: capitalize;
|
||||
padding: 2px 9px;
|
||||
border-radius: var(--radius-pill);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
// All same gray — no per-category color variation
|
||||
background: #1e2736;
|
||||
color: #64748b;
|
||||
border: 1px solid #2a3544;
|
||||
}
|
||||
|
||||
// ── Expanded body — card style matching mockup ────────────────────────────
|
||||
|
||||
.glossary-item-body {
|
||||
margin: 0 8px 10px 8px;
|
||||
padding: 12px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
background: #131c2a;
|
||||
border: 1px solid #1e2d40;
|
||||
border-radius: 8px;
|
||||
overflow: hidden; // prevent pill overflow clipping
|
||||
}
|
||||
|
||||
.glossary-definition {
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// ── Gate box (code-styled monospace block) ────────────────────────────────
|
||||
|
||||
.glossary-gate-box {
|
||||
background: #0d1520;
|
||||
border: 1px solid #1e2d40;
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
|
||||
code {
|
||||
font-family: 'JetBrains Mono', var(--font-mono, 'SF Mono', 'Fira Code', monospace);
|
||||
font-size: 12px;
|
||||
color: #93c5fd;
|
||||
line-height: 1.6;
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Range pills ───────────────────────────────────────────────────────────
|
||||
|
||||
.glossary-range-pills {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.glossary-range-pill {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 5px 8px;
|
||||
border-radius: var(--radius-pill);
|
||||
white-space: nowrap;
|
||||
line-height: 1.3;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.grange-good {
|
||||
background: #0d2e1a;
|
||||
color: #4ade80;
|
||||
border: 1px solid #1a4a2a;
|
||||
}
|
||||
|
||||
&.grange-bad {
|
||||
background: #2e0d0d;
|
||||
color: #f87171;
|
||||
border: 1px solid #4a1a1a;
|
||||
}
|
||||
|
||||
&.grange-neutral {
|
||||
background: #1e2736;
|
||||
color: #94a3b8;
|
||||
border: 1px solid #2a3544;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Range labels (below pills) ────────────────────────────────────────────
|
||||
|
||||
.glossary-range-labels {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
flex: 1 1 0;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
.grlabel-good { color: #4ade80; }
|
||||
.grlabel-neutral { color: #64748b; }
|
||||
.grlabel-bad { color: #f87171; }
|
||||
|
||||
// ── Empty state ───────────────────────────────────────────────────────────
|
||||
|
||||
.glossary-empty {
|
||||
padding: 28px 16px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--text-dimmer);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// ── Column-header tooltip (300ms CSS delay) ───────────────────────────────
|
||||
// Only active inside <thead> — metric cards in detail panel use dp-mc-help instead
|
||||
|
||||
thead .col-tip {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
cursor: help;
|
||||
|
||||
&::after {
|
||||
content: attr(data-tip);
|
||||
position: absolute;
|
||||
bottom: calc(100% + 8px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: max-content;
|
||||
max-width: 220px;
|
||||
white-space: normal;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border-input);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 6px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease 300ms;
|
||||
z-index: 200;
|
||||
box-shadow: 0 4px 16px #00000055;
|
||||
}
|
||||
|
||||
&:hover::after { opacity: 1; }
|
||||
}
|
||||
|
||||
+52
-36
@@ -1,56 +1,68 @@
|
||||
// ── Design Tokens ────────────────────────────────────────────────────────
|
||||
// SCSS maps generate CSS custom properties. Organised by category so new
|
||||
// tokens are easy to locate and add. All runtime theming uses var(--name).
|
||||
// Single strict surface hierarchy. No decorative colors — semantic only.
|
||||
|
||||
// Background layers — darkest to lightest
|
||||
$bg: (
|
||||
base: #0f1117, // body, nav background
|
||||
surface: #0d1117, // section cards, sidebar
|
||||
elevated: #111827, // section headers, table headers
|
||||
card: #1e293b, // input bg, tags, summary cards, ctx cards
|
||||
card-hover: #131c2b, // table row hover
|
||||
row-alt: #1a2233, // portfolio table row border
|
||||
base: #0a0e14, // body, nav
|
||||
surface: #111820, // section cards, sidebar, table headers
|
||||
elevated: #1a2332, // input bg, metric cards, chips
|
||||
input: #0d1319, // filter inputs, search fields
|
||||
overlay: #000000a6, // modal backdrop
|
||||
row-sel: #0f1f35, // selected/expanded row background
|
||||
);
|
||||
|
||||
// Borders
|
||||
$borders: (
|
||||
border: #1e293b, // primary — cards, sections, inputs
|
||||
border-subtle: #161f2e, // table row separators
|
||||
border-input: #2d3f55, // form input borders
|
||||
border: #1e2d3d, // primary — cards, sections
|
||||
border-subtle: #10182a, // table row separators
|
||||
border-input: #263447, // form input borders, chips
|
||||
);
|
||||
|
||||
// Text — brightest to most muted
|
||||
$text: (
|
||||
text-primary: #f1f5f9, // headings, tickers, card values
|
||||
text-secondary: #e2e8f0, // body text, input values
|
||||
text-muted: #94a3b8, // secondary text, reasons
|
||||
text-dim: #64748b, // labels, table headers, muted values
|
||||
text-dimmer: #475569, // very muted — timestamps, hints
|
||||
text-faint: #334155, // count badge text, column headers
|
||||
text-primary: #e2eaf4, // headings, tickers, values
|
||||
text-secondary: #7a93ad, // body text, labels, column headers
|
||||
text-muted: #3d5166, // very muted — timestamps, category labels
|
||||
);
|
||||
|
||||
// Blue accent ('blue' is a CSS color name — must be quoted)
|
||||
// Blue accent
|
||||
$blues: (
|
||||
'blue': #3b82f6, // focus ring, progress bar, bar-fill
|
||||
'blue-dark': #2563eb, // primary button bg
|
||||
'blue-darker': #1d4ed8, // primary button hover
|
||||
'blue-muted': #60a5fa, // active tab text, edit icon hover
|
||||
'blue-surface': #1e3a5f, // active tab bg, mode tab bg
|
||||
'blue-deep': #0f2240, // analyze button hover bg
|
||||
'blue-badge': #0d1e30, // sidebar header background
|
||||
'blue': #4da6ff, // selection border, active states
|
||||
'blue-dim': #0d2240, // active tab bg
|
||||
'blue-mid': #1a3a5c, // hover states
|
||||
'blue-dark': #1a4a8a, // primary button bg
|
||||
'blue-darker': #2060aa, // primary button hover
|
||||
// legacy aliases — kept so other partials don't break
|
||||
'blue-muted': #4da6ff,
|
||||
'blue-surface': #1a3a5c,
|
||||
'blue-deep': #0d2240,
|
||||
'blue-badge': #0d1319,
|
||||
);
|
||||
|
||||
// Signal / semantic colors (green/yellow/red/orange are CSS color names — must be quoted)
|
||||
// Semantic colors
|
||||
$signals: (
|
||||
'green': #4ade80,
|
||||
'green-bg': #14532d33,
|
||||
'yellow': #facc15,
|
||||
'yellow-bg': #71350033,
|
||||
'red': #f87171,
|
||||
'red-bg': #450a0a33,
|
||||
'red-deep': #450a0a55, // error banner bg
|
||||
'red-border': #7f1d1d, // error banner border
|
||||
'orange': #fb923c,
|
||||
// green
|
||||
'green': #34d17a,
|
||||
'green-dim': #0d2e1a,
|
||||
'green-mid': #1a4a2a,
|
||||
'green-bg': #0d2e1a, // alias for old name
|
||||
// red
|
||||
'red': #f05a5a,
|
||||
'red-dim': #2e0d0d,
|
||||
'red-bg': #2e0d0d,
|
||||
'red-deep': #2e0d0d,
|
||||
'red-border': #4a1a1a,
|
||||
// amber / warning
|
||||
'amber': #f0b429,
|
||||
'amber-dim': #2e2000,
|
||||
// orange — alias kept
|
||||
'orange': #f0b429,
|
||||
// purple — glossary accent
|
||||
'purple': #a78bfa,
|
||||
'purple-dim': #1e1535,
|
||||
// yellow alias
|
||||
'yellow': #f0b429,
|
||||
'yellow-bg': #2e2000,
|
||||
);
|
||||
|
||||
// ── Emit all maps as CSS custom properties ───────────────────────────────
|
||||
@@ -62,6 +74,9 @@ $signals: (
|
||||
@each $name, $val in $signals { --#{$name}: #{$val}; }
|
||||
|
||||
// Typography
|
||||
--font-ui: 'Inter', -apple-system, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'SF Mono', monospace;
|
||||
|
||||
--fs-2xs: 9px;
|
||||
--fs-xs: 10px;
|
||||
--fs-sm: 11px;
|
||||
@@ -87,5 +102,6 @@ $signals: (
|
||||
--space-3xl: 32px;
|
||||
|
||||
// Transitions
|
||||
--transition: 0.15s;
|
||||
--transition: 0.18s ease;
|
||||
--transition-slow: 0.28s cubic-bezier(.4,0,.2,1);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user