+ ADR%
+ Average Daily Range — the avg % difference between high and low over 20 trading days. Higher ADR means more volatility. The golden rule: ADR should be ≥5% for momentum setups.
+
{stock.adr.toFixed(2)}%
-
RS Momentum
+
+ RS Momentum
+ Relative Strength Momentum — measures how far the stock has climbed from its lowest point. Large % moves from the low indicate strong upward momentum. Scored up to 4 points.
+
{stock.rs_pct.toFixed(0)}%
-
Stop Loss
+
+ Stop Loss
+ The price level at which you would exit to limit losses. Set at 1.5× ATR below price or at the EMA10, whichever is higher.
+
${stock.suggested_stop.toFixed(2)}
-
R:R Ratio
+
+ R:R Ratio
+ Risk-to-Reward — compares potential upside (to 52-week high) against potential downside (to stop loss). A ratio above 2:1 is considered favourable.
+
{stock.rr_ratio.toFixed(2)}
+
+
+
+ Selection Rationale
+ Breakdown of how each scoring factor contributed to this stock's rating. Bars show score received vs maximum possible per category.
+
+
+
+
+
{stock.signals.length > 0 && (
diff --git a/frontend/src/components/GlossaryPanel.test.tsx b/frontend/src/components/GlossaryPanel.test.tsx
new file mode 100644
index 0000000..f499374
--- /dev/null
+++ b/frontend/src/components/GlossaryPanel.test.tsx
@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { GlossaryPanel } from './GlossaryPanel';
+
+describe('GlossaryPanel', () => {
+ it('renders nothing when closed', () => {
+ const { container } = render( {}} />);
+ expect(container.textContent).toBe('');
+ });
+
+ it('renders all glossary entries when open', () => {
+ render( {}} />);
+ expect(screen.getByText('Glossary')).toBeInTheDocument();
+ expect(screen.getByText('ADR%')).toBeInTheDocument();
+ expect(screen.getByText('RS Momentum')).toBeInTheDocument();
+ expect(screen.getByText('EMA Alignment')).toBeInTheDocument();
+ expect(screen.getByText('Tightness')).toBeInTheDocument();
+ expect(screen.getByText('Volume Surge')).toBeInTheDocument();
+ expect(screen.getByText('ATR')).toBeInTheDocument();
+ expect(screen.getByText('Stop Loss')).toBeInTheDocument();
+ expect(screen.getByText('R:R Ratio')).toBeInTheDocument();
+ expect(screen.getByText('52-Week High')).toBeInTheDocument();
+ expect(screen.getByText('Score')).toBeInTheDocument();
+ });
+
+ it('has a close button', () => {
+ render( {}} />);
+ expect(screen.getByText('[close]')).toBeInTheDocument();
+ });
+
+ it('calls onClose when clicking close button', () => {
+ let called = false;
+ render( { called = true; }} />);
+ fireEvent.click(screen.getByText('[close]'));
+ expect(called).toBe(true);
+ });
+
+ it('calls onClose on Escape key', () => {
+ let called = false;
+ render( { called = true; }} />);
+ fireEvent.keyDown(document, { key: 'Escape' });
+ expect(called).toBe(true);
+ });
+
+ it('sets role="dialog"', () => {
+ render( {}} />);
+ const dialog = screen.getByRole('dialog');
+ expect(dialog).toBeInTheDocument();
+ });
+});
diff --git a/frontend/src/components/GlossaryPanel.tsx b/frontend/src/components/GlossaryPanel.tsx
new file mode 100644
index 0000000..5e5a443
--- /dev/null
+++ b/frontend/src/components/GlossaryPanel.tsx
@@ -0,0 +1,123 @@
+import { useEffect, useRef } from 'react';
+
+interface GlossaryEntry {
+ term: string;
+ definition: string;
+}
+
+const GLOSSARY: GlossaryEntry[] = [
+ { term: 'ADR%', definition: 'Average Daily Range — the average percentage difference between a stock\'s high and low price over the last 20 trading days. Higher ADR means more volatility and bigger potential moves.' },
+ { term: 'RS Momentum', definition: 'Relative Strength Momentum — measures how far a stock has climbed from its lowest point over the lookback period. Large moves from the low indicate strong upward momentum.' },
+ { term: 'EMA Alignment', definition: 'Exponential Moving Average Alignment — checks whether shorter-term EMAs (10, 20, 50) are properly stacked with price above them all. Bullish alignment means the trend is accelerating.' },
+ { term: 'Tightness', definition: 'Measures how compact the last 5 days of trading are relative to the stock\'s ADR. Tight consolidation before a breakout is a classic momentum setup.' },
+ { term: 'Volume Surge', definition: 'Compares recent 3-day average volume to the 20-day average. A surge above 1.5x confirms institutional interest in the move.' },
+ { term: 'ATR', definition: 'Average True Range — measures market volatility by decomposing the entire range of a stock\'s price movement over 14 days. Used to set intelligent stop losses.' },
+ { term: 'Stop Loss', definition: 'The price level at which you would exit a trade to limit losses. The scanner sets this 1.5× ATR below price or at the EMA10, whichever is higher.' },
+ { term: 'R:R Ratio', definition: 'Risk-to-Reward Ratio — compares potential upside (to 52-week high) against potential downside (to stop loss). A ratio above 2:1 is considered favourable.' },
+ { term: '52-Week High', definition: 'The highest price the stock has traded at in the last 52 weeks. Used as the target price for reward calculations.' },
+ { term: 'Score', definition: 'The Qullamaggie 20-point scoring system aggregates five sub-scores: ADR (5pts), RS Momentum (4pts), EMA Alignment (7pts), Tightness (2pts), and Volume Surge (2pts). Higher is better.' },
+];
+
+function GlossaryCard({ entry }: { entry: GlossaryEntry }) {
+ return (
+
+
+ {entry.term}
+
+
+ {entry.definition}
+
+
+ );
+}
+
+interface GlossaryPanelProps {
+ open: boolean;
+ onClose: () => void;
+}
+
+export function GlossaryPanel({ open, onClose }: GlossaryPanelProps) {
+ const panelRef = useRef(null);
+
+ useEffect(() => {
+ if (!open) return;
+ const handleEsc = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') onClose();
+ };
+ document.addEventListener('keydown', handleEsc);
+ return () => document.removeEventListener('keydown', handleEsc);
+ }, [open, onClose]);
+
+ useEffect(() => {
+ if (!open) return;
+ const handleClickOutside = (e: MouseEvent) => {
+ if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+ onClose();
+ }
+ };
+ // Use a timeout so the click that opened it doesn't immediately close it
+ const timer = setTimeout(() => {
+ document.addEventListener('mousedown', handleClickOutside);
+ }, 0);
+ return () => {
+ clearTimeout(timer);
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [open, onClose]);
+
+ if (!open) return null;
+
+ return (
+