feat: wire end-to-end validation flow with error banners and loading states

static/app.js

@@ -73,6 +73,114 @@ document.addEventListener('DOMContentLoaded', () => {
     let latestPredictedPrice = null;
     let latestAnalyzeHistory = [];
     let latestAnalyzeTimeframe = '6M';
+    // --- Analysis state / flow elements ---
+    const errorBanner       = document.getElementById('error-banner');
+    const errorBannerMsg    = document.getElementById('error-banner-msg');
+    const errorBannerChips  = document.getElementById('error-banner-chips');
+    const errorBannerRetry  = document.getElementById('error-banner-retry');
+    const errorBannerDismiss= document.getElementById('error-banner-dismiss');
+    const analysisProgress  = document.getElementById('analysis-progress');
+    const analysisSkeleton  = document.getElementById('analysis-skeleton');
+
+    let _retryTicker      = null;
+    let _progressTimers   = [];
+    let _rateLimitTimer   = null;
+
+    function _showErrorBanner(message, suggestions, showRetry) {
+        if (!errorBanner) return;
+        if (errorBannerMsg) errorBannerMsg.textContent = message;
+        if (errorBannerChips) {
+            errorBannerChips.innerHTML = '';
+            if (Array.isArray(suggestions) && suggestions.length) {
+                suggestions.forEach((s) => {
+                    const chip = document.createElement('button');
+                    chip.type = 'button';
+                    chip.className = 'suggestion-chip';
+                    chip.textContent = s;
+                    chip.addEventListener('click', () => {
+                        _hideErrorBanner();
+                        input.value = s;
+                        _triggerValidation(s);
+                    });
+                    errorBannerChips.appendChild(chip);
+                });
+            }
+        }
+        if (errorBannerRetry) errorBannerRetry.classList.toggle('hidden', !showRetry);
+        errorBanner.classList.remove('hidden');
+        requestAnimationFrame(() => errorBanner.classList.add('is-visible'));
+    }
+
+    function _hideErrorBanner() {
+        if (!errorBanner) return;
+        errorBanner.classList.remove('is-visible');
+        setTimeout(() => errorBanner.classList.add('hidden'), 300);
+    }
+
+    function _clearProgressTimers() {
+        _progressTimers.forEach((t) => clearTimeout(t));
+        _progressTimers = [];
+    }
+
+    function _advanceProgress(step) {
+        if (!analysisProgress) return;
+        analysisProgress.querySelectorAll('.progress-step').forEach((el, i) => {
+            const n = i + 1;
+            el.className = n < step ? 'progress-step is-done'
+                         : n === step ? 'progress-step is-active'
+                         : 'progress-step';
+        });
+    }
+
+    function _showProgress() {
+        if (!analysisProgress) return;
+        _advanceProgress(1);
+        analysisProgress.classList.remove('hidden');
+        _progressTimers.push(setTimeout(() => _advanceProgress(2), 1000));
+        _progressTimers.push(setTimeout(() => _advanceProgress(3), 3000));
+        _progressTimers.push(setTimeout(() => _advanceProgress(4), 5000));
+    }
+
+    function _hideProgress() {
+        _clearProgressTimers();
+        if (!analysisProgress) return;
+        analysisProgress.classList.add('hidden');
+        analysisProgress.querySelectorAll('.progress-step').forEach((el) => {
+            el.className = 'progress-step';
+        });
+    }
+
+    function _showSkeleton() { if (analysisSkeleton) analysisSkeleton.classList.remove('hidden'); }
+    function _hideSkeleton()  { if (analysisSkeleton) analysisSkeleton.classList.add('hidden');  }
+
+    function _startRateLimitCountdown(seconds) {
+        const endTime = Date.now() + seconds * 1000;
+        analyzeBtn.disabled = true;
+        function tick() {
+            const remaining = Math.ceil((endTime - Date.now()) / 1000);
+            if (remaining <= 0) {
+                if (btnText) btnText.textContent = 'Analyze Risk';
+                analyzeBtn.disabled = !_validatedTicker;
+                return;
+            }
+            if (btnText) btnText.textContent = `Wait ${remaining}s…`;
+            _rateLimitTimer = setTimeout(tick, 500);
+        }
+        tick();
+    }
+
+    if (errorBannerDismiss) {
+        errorBannerDismiss.addEventListener('click', _hideErrorBanner);
+    }
+    if (errorBannerRetry) {
+        errorBannerRetry.addEventListener('click', () => {
+            if (_retryTicker) {
+                _hideErrorBanner();
+                loadTickerData(_retryTicker, false);
+            }
+        });
+    }
+
     // --- Validation UI elements ---
     const inputWrapper    = document.getElementById('ticker-input-wrapper');
     const clearBtn        = document.getElementById('ticker-clear');
@@ -464,36 +572,93 @@ document.addEventListener('DOMContentLoaded', () => {
         params.set('period', mapped.period);
         params.set('interval', mapped.interval);
 
+        _retryTicker = normalizedTicker;
+
+        // 30-second hard timeout on the entire analysis
+        const timeoutCtrl = new AbortController();
+        const timeoutId = setTimeout(() => timeoutCtrl.abort(), 30000);
+
         setLoading(true);
+        _hideErrorBanner();
         errorMsg.classList.add('hidden');
+        _showProgress();
+        _showSkeleton();
         if (!keepDashboardVisible) {
             dashboard.classList.add('hidden');
         }
 
         try {
-            const response = await fetch(`/api/analyze?${params.toString()}`);
+            const response = await fetch(`/api/analyze?${params.toString()}`, {
+                signal: timeoutCtrl.signal,
+            });
+            clearTimeout(timeoutId);
+
+            if (response.status === 422) {
+                const body = await response.json().catch(() => ({}));
+                _showErrorBanner(
+                    body.error || 'Invalid ticker. Please check the symbol.',
+                    body.suggestions || [],
+                    false
+                );
+                _setInputState('error');
+                _validatedTicker = null;
+                analyzeBtn.disabled = true;
+                return;
+            }
+
+            if (response.status === 429) {
+                _showErrorBanner(
+                    "You're sending requests too quickly. Please wait a moment and try again.",
+                    [],
+                    false
+                );
+                _startRateLimitCountdown(10);
+                return;
+            }
+
             const data = await response.json();
             if (!response.ok) {
-                throw new Error(data.error || 'Failed to fetch data');
+                _showErrorBanner(
+                    data.error || 'Something went wrong on our end. Please try again in a few seconds.',
+                    [],
+                    true
+                );
+                return;
             }
 
+            // Success
             dashboard.classList.remove('hidden');
             currentTicker = String(data?.meta?.symbol || normalizedTicker).toUpperCase();
             input.value = currentTicker;
-            _validatedTicker = currentTicker; // keep in sync after successful analysis
+            _validatedTicker = currentTicker;
             latestPredictedPrice = Number(data?.market?.predicted_price_next_session);
             latestAnalyzeHistory = normalizeHistoryPoints(data?.market?.history);
             latestAnalyzeTimeframe = getActiveTimeframe();
             updateDashboard(data);
             await refreshChartForTimeframe(currentTicker, getActiveTimeframe(), false);
+
         } catch (error) {
+            clearTimeout(timeoutId);
             console.error(error);
-            errorMsg.textContent = error.message || 'Failed to fetch data';
-            errorMsg.classList.remove('hidden');
             if (!keepDashboardVisible) {
                 dashboard.classList.add('hidden');
             }
+            if (error.name === 'AbortError') {
+                _showErrorBanner(
+                    'The analysis is taking longer than expected. Please try again.',
+                    [],
+                    true
+                );
+            } else {
+                _showErrorBanner(
+                    'Something went wrong on our end. Please try again in a few seconds.',
+                    [],
+                    true
+                );
+            }
         } finally {
+            _hideSkeleton();
+            _hideProgress();
             setLoading(false);
         }
     }

static/style.css

@@ -1326,4 +1326,174 @@ footer p {
     background: var(--accent-blue);
     color: var(--text-inverse);
     box-shadow: 0 0 0 2px var(--accent-blue-glow);
-}
+}
+
+/* ============================================================
+   Error banner
+   ============================================================ */
+
+@keyframes slideDown {
+    from { opacity: 0; transform: translateY(-10px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes slideUp {
+    from { opacity: 1; transform: translateY(0); }
+    to   { opacity: 0; transform: translateY(-10px); }
+}
+
+.error-banner {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+    max-width: 700px;
+    margin: 0 auto 1.25rem;
+    padding: 0.9rem 1.2rem;
+    border-radius: 12px;
+    background: rgba(182, 78, 90, 0.12);
+    border: 1px solid var(--status-red);
+    color: var(--status-red);
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: opacity 0.28s ease, transform 0.28s ease;
+}
+.error-banner.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+.error-banner-body {
+    flex: 1;
+    min-width: 0;
+}
+.error-banner-text {
+    display: block;
+    font-size: 0.93rem;
+    font-weight: 600;
+    margin-bottom: 0.35rem;
+}
+.error-banner-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+}
+.error-banner-retry {
+    padding: 0.3rem 0.8rem;
+    border-radius: 8px;
+    border: 1px solid var(--status-red);
+    background: transparent;
+    color: var(--status-red);
+    font-size: 0.82rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s ease;
+}
+.error-banner-retry:hover {
+    background: var(--status-red);
+    color: var(--text-inverse);
+}
+.error-banner-dismiss {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--status-red);
+    font-size: 1.3rem;
+    line-height: 1;
+    padding: 0.1rem 0.2rem;
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+}
+.error-banner-dismiss:hover { opacity: 1; }
+
+/* ============================================================
+   Analysis progress steps
+   ============================================================ */
+
+.analysis-progress {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 0 0.5rem;
+    max-width: 700px;
+    margin: 0 auto 1.25rem;
+    padding: 0.8rem 1.2rem;
+    border-radius: 12px;
+    background: var(--bg-subtle);
+    border: 1px solid var(--panel-border);
+}
+
+.progress-step {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.25rem 0.6rem;
+    border-radius: 999px;
+    font-size: 0.82rem;
+    font-weight: 500;
+    color: var(--text-muted);
+    transition: color 0.3s ease;
+}
+.progress-step + .progress-step::before {
+    content: '→';
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    margin-right: 0.5rem;
+}
+.progress-step.is-done {
+    color: var(--status-green);
+}
+.progress-step.is-active {
+    color: var(--accent-blue);
+    font-weight: 700;
+}
+.prog-icon {
+    font-size: 0.8rem;
+}
+
+/* ============================================================
+   Skeleton loader
+   ============================================================ */
+
+@keyframes shimmer {
+    0%   { background-position: -400px 0; }
+    100% { background-position:  400px 0; }
+}
+
+.skeleton-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.25rem;
+    max-width: 700px;
+    margin: 0 auto 1.5rem;
+}
+@media (max-width: 640px) {
+    .skeleton-grid { grid-template-columns: 1fr; }
+}
+
+.skeleton-card {
+    border-radius: 12px;
+    border: 1px solid var(--panel-border);
+    background: var(--card-bg);
+    padding: 1.2rem;
+    min-height: 120px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+.skeleton-card--tall { min-height: 180px; }
+
+.skeleton-line,
+.skeleton-block {
+    border-radius: 6px;
+    background: linear-gradient(
+        90deg,
+        var(--bg-subtle) 25%,
+        var(--panel-border) 50%,
+        var(--bg-subtle) 75%
+    );
+    background-size: 400px 100%;
+    animation: shimmer 1.4s ease-in-out infinite;
+}
+.skeleton-line  { height: 14px; width: 55%; }
+.skeleton-block { height: 48px; }

templates/index.html

@@ -71,6 +71,34 @@
             <div id="error-message" class="error-msg hidden"></div>
         </section>
 
+        <!-- Error Banner (shown on 422 / 429 / 500 / timeout) -->
+        <div id="error-banner" class="error-banner hidden" role="alert" aria-live="assertive">
+            <div class="error-banner-body">
+                <span id="error-banner-msg" class="error-banner-text"></span>
+                <div id="error-banner-chips" class="suggestion-chips"></div>
+            </div>
+            <div class="error-banner-actions">
+                <button id="error-banner-retry" class="error-banner-retry hidden" type="button">↺ Retry</button>
+                <button id="error-banner-dismiss" class="error-banner-dismiss" type="button" aria-label="Dismiss">×</button>
+            </div>
+        </div>
+
+        <!-- Analysis progress + skeleton (shown while loading) -->
+        <div id="analysis-progress" class="analysis-progress hidden" aria-live="polite">
+            <div class="progress-step" id="prog-step-1"><span class="prog-icon">✓</span><span class="prog-label">Ticker validated</span></div>
+            <div class="progress-step" id="prog-step-2"><span class="prog-icon">●</span><span class="prog-label">Fetching market data…</span></div>
+            <div class="progress-step" id="prog-step-3"><span class="prog-icon">○</span><span class="prog-label">Running risk analysis</span></div>
+            <div class="progress-step" id="prog-step-4"><span class="prog-icon">○</span><span class="prog-label">Generating report</span></div>
+        </div>
+
+        <div id="analysis-skeleton" class="analysis-skeleton hidden" aria-hidden="true">
+            <div class="skeleton-grid">
+                <div class="skeleton-card"><div class="skeleton-line"></div><div class="skeleton-block"></div></div>
+                <div class="skeleton-card skeleton-card--tall"><div class="skeleton-line"></div><div class="skeleton-block"></div><div class="skeleton-block"></div></div>
+                <div class="skeleton-card"><div class="skeleton-line"></div><div class="skeleton-block"></div></div>
+            </div>
+        </div>
+
         <!-- Dashboard Results (Hidden by default) -->
         <section id="results-dashboard" class="dashboard hidden">
             <div class="dashboard-header">

tests/test_validation_flow.js

@@ -0,0 +1,303 @@
+'use strict';
+/**
+ * Integration tests for the end-to-end validation → analysis flow.
+ * Tests the frontend behaviour when the backend returns 200 / 422 / 429 / 5xx.
+ *
+ * Run with:  node --test tests/test_validation_flow.js
+ */
+
+const { test, describe, beforeEach } = require('node:test');
+const assert = require('node:assert/strict');
+const path = require('node:path');
+const { JSDOM } = require('jsdom');
+
+const { validateTickerFormat, validateTickerRemote } = require(
+    path.join(__dirname, '..', 'static', 'tickerValidation.js')
+);
+
+// ---------------------------------------------------------------------------
+// Minimal DOM that mirrors the relevant parts of index.html
+// ---------------------------------------------------------------------------
+function buildDOM() {
+    return new JSDOM(`<!DOCTYPE html><html><body>
+  <form id="analyze-form">
+    <div class="search-box">
+      <div id="ticker-input-wrapper">
+        <input id="ticker-input" type="text" />
+        <button id="ticker-clear" class="hidden" type="button">×</button>
+        <span id="ticker-val-indicator" class="hidden"></span>
+      </div>
+      <button id="analyze-btn" type="submit" disabled>
+        <span class="btn-text">Analyze Risk</span>
+      </button>
+    </div>
+  </form>
+  <div id="validation-hint" class="hidden">
+    <span id="validation-msg"></span>
+    <div id="suggestion-chips"></div>
+  </div>
+  <div id="error-banner"   class="hidden"><div id="error-banner-body">
+    <span id="error-banner-msg"></span>
+    <div id="error-banner-chips"></div>
+  </div>
+    <button id="error-banner-retry"   class="hidden" type="button">Retry</button>
+    <button id="error-banner-dismiss" type="button">×</button>
+  </div>
+  <div id="analysis-progress" class="hidden">
+    <div class="progress-step" id="prog-step-1"></div>
+    <div class="progress-step" id="prog-step-2"></div>
+    <div class="progress-step" id="prog-step-3"></div>
+    <div class="progress-step" id="prog-step-4"></div>
+  </div>
+  <div id="analysis-skeleton" class="hidden"></div>
+  <section id="results-dashboard" class="dashboard hidden"></section>
+  <div id="error-message" class="hidden"></div>
+</body></html>`, { pretendToBeVisual: true });
+}
+
+// ---------------------------------------------------------------------------
+// Wire the analysis-flow logic (mirrors app.js without the full module)
+// ---------------------------------------------------------------------------
+function wireFlow(window, mockFetch) {
+    const { document } = window;
+    window.TickerValidation = { validateTickerFormat, validateTickerRemote };
+    window.fetch = mockFetch;
+
+    const input            = document.getElementById('ticker-input');
+    const analyzeBtn       = document.getElementById('analyze-btn');
+    const btnText          = analyzeBtn.querySelector('.btn-text');
+    const dashboard        = document.getElementById('results-dashboard');
+    const errorBanner      = document.getElementById('error-banner');
+    const errorBannerMsg   = document.getElementById('error-banner-msg');
+    const errorBannerChips = document.getElementById('error-banner-chips');
+    const errorBannerRetry = document.getElementById('error-banner-retry');
+    const analysisSkeleton = document.getElementById('analysis-skeleton');
+    const analysisProgress = document.getElementById('analysis-progress');
+
+    let _retryTicker    = null;
+    let _validatedTicker = null;
+    let _progressTimers  = [];
+    let _rateLimitTimer  = null;
+
+    function _showErrorBanner(message, suggestions, showRetry) {
+        if (errorBannerMsg) errorBannerMsg.textContent = message;
+        if (errorBannerChips) {
+            errorBannerChips.innerHTML = '';
+            (suggestions || []).forEach((s) => {
+                const chip = document.createElement('button');
+                chip.type = 'button';
+                chip.className = 'suggestion-chip';
+                chip.textContent = s;
+                chip.addEventListener('click', () => {
+                    input.value = s;
+                    // In real app this calls _triggerValidation(s).
+                    // Here we emit a custom event so tests can observe it.
+                    input.dispatchEvent(new window.CustomEvent('validation-triggered', { detail: s }));
+                });
+                errorBannerChips.appendChild(chip);
+            });
+        }
+        if (errorBannerRetry) errorBannerRetry.classList.toggle('hidden', !showRetry);
+        errorBanner.classList.remove('hidden');
+        errorBanner.classList.add('is-visible');
+    }
+
+    function _hideErrorBanner() {
+        errorBanner.classList.remove('is-visible');
+        errorBanner.classList.add('hidden');
+    }
+
+    function _showProgress() {
+        analysisProgress.classList.remove('hidden');
+        // Advance immediately to step 1
+        analysisProgress.querySelectorAll('.progress-step').forEach((el, i) => {
+            el.className = i === 0 ? 'progress-step is-active' : 'progress-step';
+        });
+    }
+
+    function _hideProgress() {
+        _progressTimers.forEach((t) => clearTimeout(t));
+        _progressTimers = [];
+        analysisProgress.classList.add('hidden');
+    }
+
+    function _showSkeleton() { analysisSkeleton.classList.remove('hidden'); }
+    function _hideSkeleton()  { analysisSkeleton.classList.add('hidden');  }
+
+    function _startRateLimitCountdown(seconds) {
+        analyzeBtn.disabled = true;
+        const endTime = Date.now() + seconds * 1000;
+        function tick() {
+            const remaining = Math.ceil((endTime - Date.now()) / 1000);
+            if (remaining <= 0) {
+                if (btnText) btnText.textContent = 'Analyze Risk';
+                analyzeBtn.disabled = false;
+                return;
+            }
+            if (btnText) btnText.textContent = `Wait ${remaining}s…`;
+            _rateLimitTimer = setTimeout(tick, 500);
+        }
+        tick();
+    }
+
+    async function runAnalysis(ticker) {
+        const normalizedTicker = String(ticker || '').trim().toUpperCase();
+        _retryTicker = normalizedTicker;
+
+        const timeoutCtrl = new window.AbortController();
+        const timeoutId = setTimeout(() => timeoutCtrl.abort(), 30000);
+
+        analyzeBtn.disabled = true;
+        _hideErrorBanner();
+        _showProgress();
+        _showSkeleton();
+        dashboard.classList.add('hidden');
+
+        try {
+            const response = await window.fetch(`/api/analyze?ticker=${normalizedTicker}`, {
+                signal: timeoutCtrl.signal,
+            });
+            clearTimeout(timeoutId);
+
+            if (response.status === 422) {
+                const body = await response.json().catch(() => ({}));
+                _showErrorBanner(body.error || 'Invalid ticker.', body.suggestions || [], false);
+                return;
+            }
+
+            if (response.status === 429) {
+                _showErrorBanner(
+                    "You're sending requests too quickly. Please wait a moment and try again.",
+                    [], false
+                );
+                _startRateLimitCountdown(10);
+                return;
+            }
+
+            const data = await response.json();
+            if (!response.ok) {
+                _showErrorBanner(data.error || 'Something went wrong.', [], true);
+                return;
+            }
+
+            // Success
+            _hideSkeleton();
+            _hideProgress();
+            dashboard.classList.remove('hidden');
+            _validatedTicker = normalizedTicker;
+            analyzeBtn.disabled = false;
+
+        } catch (err) {
+            clearTimeout(timeoutId);
+            dashboard.classList.add('hidden');
+            if (err.name === 'AbortError') {
+                _showErrorBanner('The analysis is taking longer than expected. Please try again.', [], true);
+            } else {
+                _showErrorBanner('Something went wrong on our end. Please try again in a few seconds.', [], true);
+            }
+        } finally {
+            _hideSkeleton();
+            _hideProgress();
+        }
+    }
+
+    return { runAnalysis, input, analyzeBtn, btnText, dashboard, errorBanner,
+             errorBannerMsg, errorBannerChips, errorBannerRetry };
+}
+
+// Helpers
+function makeFetch(status, body) {
+    return async () => ({
+        status,
+        ok: status >= 200 && status < 300,
+        json: async () => body,
+    });
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('End-to-end validation flow', () => {
+
+    test('test_valid_ticker_shows_analysis_result — 200 renders dashboard', async () => {
+        const { window } = buildDOM();
+        const { runAnalysis, dashboard, errorBanner } = wireFlow(window, makeFetch(200, {
+            meta: { symbol: 'AAPL' },
+            market: { predicted_price_next_session: 200, history: [] },
+        }));
+
+        await runAnalysis('AAPL');
+
+        assert.ok(!dashboard.classList.contains('hidden'),
+            'Dashboard should be visible after 200 response');
+        assert.ok(errorBanner.classList.contains('hidden'),
+            'Error banner should remain hidden after success');
+    });
+
+    test('test_invalid_ticker_shows_error_banner — 422 shows banner with message', async () => {
+        const { window } = buildDOM();
+        const { runAnalysis, errorBanner, errorBannerMsg, errorBannerChips } = wireFlow(
+            window,
+            makeFetch(422, {
+                valid: false,
+                error: 'Ticker "XYZQW" was not found. Please check the symbol and try again.',
+                suggestions: ['XYZ', 'XYZX'],
+            })
+        );
+
+        await runAnalysis('XYZQW');
+
+        assert.ok(!errorBanner.classList.contains('hidden'),
+            'Error banner should be visible after 422');
+        assert.ok(errorBannerMsg.textContent.includes('not found'),
+            'Banner should display the error message');
+        const chips = errorBannerChips.querySelectorAll('.suggestion-chip');
+        assert.equal(chips.length, 2, 'Should render suggestion chips');
+    });
+
+    test('test_rate_limit_shows_cooldown — 429 disables button with countdown', async () => {
+        const { window } = buildDOM();
+        const { runAnalysis, analyzeBtn, errorBanner, errorBannerMsg } = wireFlow(
+            window,
+            makeFetch(429, {})
+        );
+
+        await runAnalysis('AAPL');
+
+        assert.ok(!errorBanner.classList.contains('hidden'),
+            'Error banner should show on 429');
+        assert.ok(errorBannerMsg.textContent.includes('too quickly'),
+            'Message should mention rate limiting');
+        assert.ok(analyzeBtn.disabled,
+            'Submit button should be disabled during cooldown');
+    });
+
+    test('test_suggestion_click_in_banner_retriggers_validation — chip click fires event', async () => {
+        const { window } = buildDOM();
+        const { runAnalysis, input, errorBannerChips } = wireFlow(
+            window,
+            makeFetch(422, {
+                valid: false,
+                error: 'Not found.',
+                suggestions: ['AAPL', 'APD'],
+            })
+        );
+
+        let triggeredTicker = null;
+        input.addEventListener('validation-triggered', (e) => {
+            triggeredTicker = e.detail;
+        });
+
+        await runAnalysis('AAPX');
+
+        const chip = errorBannerChips.querySelector('.suggestion-chip');
+        assert.ok(chip, 'Suggestion chip should be rendered');
+        chip.click();
+
+        assert.equal(input.value, chip.textContent,
+            'Input should be filled with the clicked suggestion');
+        assert.equal(triggeredTicker, chip.textContent,
+            'Clicking suggestion should trigger validation for that ticker');
+    });
+});