news screen enhancement - 1

ui/src/lib/stores/screener.store.svelte.ts

@@ -21,6 +21,12 @@ class ScreenerStore {
   // ── Derived ────────────────────────────────────────────────────────
   ctx = $derived(this.results?.marketContext ?? null);
 
+  /** P0.4 data-sanity sentinel — dismissible per screen run. */
+  healthDismissed = $state(false);
+  dataHealth = $derived(
+    !this.healthDismissed && this.results?.dataHealth?.degraded ? this.results.dataHealth : null,
+  );
+
   allAssets = $derived(
     this.results ? sorted([...this.results.STOCK, ...this.results.ETF, ...this.results.BOND]) : [],
   );
@@ -28,6 +34,7 @@ class ScreenerStore {
   // ── Actions ────────────────────────────────────────────────────────
   async screen(): Promise<void> {
     this.error = null;
+    this.healthDismissed = false;
     this.loading = true;
     try {
       const tickers = this.input
@@ -46,6 +53,7 @@ class ScreenerStore {
   async reloadCatalysts(): Promise<void> {
     this.loadingCats = true;
     this.error = null;
+    this.healthDismissed = false;
     try {
       const cat = await fetchCatalysts();
       this.input = cat.tickers.join(', ');

ui/src/routes/+page.svelte

@@ -62,6 +62,13 @@
     <div class="error-banner">⚠ {s.error}</div>
   {/if}
 
+  {#if s.dataHealth}
+    <div class="warn-banner" role="alert">
+      <span>⚠ {s.dataHealth.message}</span>
+      <button class="warn-dismiss" onclick={() => s.healthDismissed = true} title="Dismiss">✕</button>
+    </div>
+  {/if}
+
   {#if s.loading || s.loadingCats}
     <div class="loading-area">
       <Spinner size="lg" label={s.loadingCats ? 'Fetching news catalysts…' : 'Screening tickers…'} />

ui/src/styles/_section.scss

@@ -76,3 +76,31 @@
   margin-bottom: 16px;
   font-size: var(--fs-md);
 }
+
+// ── Warning banner (data-sanity sentinel, P0.4) ───────────────────────────
+
+.warn-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  background: var(--amber-dim);
+  border: 1px solid var(--amber);
+  border-radius: var(--radius-md);
+  color: var(--amber);
+  padding: 10px var(--space-lg);
+  margin-bottom: 16px;
+  font-size: var(--fs-md);
+}
+
+.warn-dismiss {
+  background: none;
+  border: none;
+  color: var(--amber);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 2px 6px;
+  line-height: 1;
+
+  &:hover { filter: brightness(1.3); }
+}