phase-2: extract shared utils

ui/src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script>
   import { screenTickers, fetchCatalysts, analyzeTickers } from '$lib/api.js';
+  import { sigOrd, sorted, verdictShort, vClass, fmtPE } from '$lib/utils.js';
   import SignalBadge from '$lib/SignalBadge.svelte';
   import Spinner from '$lib/Spinner.svelte';
 
@@ -72,25 +73,6 @@
     }
   }
 
-  const sigOrd = s => ({'✅ Strong Buy':0,'⚡ Momentum':1,'🔄 Neutral':2,'⚠️  Speculation':3,'❌ Avoid':4})[s] ?? 5;
-  const sorted = arr => [...(arr ?? [])].sort((a, b) => sigOrd(a.signal) - sigOrd(b.signal));
-
-  const verdictShort = label => {
-    if (!label) return '—';
-    if (label.includes('High Conviction')) return 'Strong';
-    if (label.includes('Speculative'))     return 'Speculative';
-    if (label.includes('BUY'))             return 'Buy';
-    if (label.includes('Efficient'))       return 'Efficient';
-    if (label.includes('Attractive'))      return 'Attractive';
-    if (label.includes('Neutral'))         return 'Hold';
-    if (label.includes('REJECT'))          return 'Reject';
-    if (label.includes('Avoid'))           return 'Avoid';
-    return label.replace(/[🟢🟡🔴]/u, '').trim();
-  };
-
-  const vClass = label =>
-    label?.startsWith('🟢') ? 'green' : label?.startsWith('🟡') ? 'yellow' : 'red';
-
   const getTab = type => activeTab[type] ?? 'inflated';
   const setTab = (type, tab) => activeTab = { ...activeTab, [type]: tab };
 
@@ -98,8 +80,6 @@
   const allAssets = $derived(results
     ? sorted([...results.STOCK, ...results.ETF, ...results.BOND])
     : []);
-
-  const fmtPE = v => v != null ? v + 'x' : '—';
 </script>
 
 <div class="page">
@@ -340,8 +320,8 @@
 
 <!-- ── LLM Analysis Sidebar ─────────────────────────────────────────────── -->
 {#if sidebar.open}
-  <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-  <div class="sidebar-backdrop" onclick={closeSidebar}></div>
+  <div class="sidebar-backdrop" role="button" tabindex="-1" aria-label="Close sidebar"
+    onclick={closeSidebar} onkeydown={(e) => e.key === 'Escape' && closeSidebar()}></div>
   <aside class="sidebar">
     <div class="sidebar-header">
       <div class="sidebar-title">

ui/src/routes/portfolio/+page.svelte

@@ -3,6 +3,7 @@
   import MarketContext from '$lib/MarketContext.svelte';
   import Spinner from '$lib/Spinner.svelte';
   import { addHolding, removeHolding } from '$lib/api.js';
+  import { sigOrd, fmt, fmtShort, glClass, advClass } from '$lib/utils.js';
 
   let { data: _data } = $props();  // unused — we load client-side
 
@@ -142,8 +143,6 @@
   let sortCol = $state('ticker');
   let sortDir = $state(1);  // 1 = asc, -1 = desc
 
-  const sigOrd = s => ({'✅ Strong Buy':0,'⚡ Momentum':1,'🔄 Neutral':2,'⚠️  Speculation':3,'❌ Avoid':4})[s] ?? 5;
-
   function toggleSort(col) {
     if (sortCol === col) sortDir = sortDir === 1 ? -1 : 1;
     else { sortCol = col; sortDir = 1; }
@@ -172,23 +171,6 @@
 
   const sortIcon = (col) => sortCol !== col ? '⇅' : sortDir === 1 ? '↑' : '↓';
 
-  const fmt = (n) => n != null
-    ? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(n)
-    : '—';
-
-  const fmtShort = (n) => n != null
-    ? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(n)
-    : '—';
-
-  const glClass = (pct) => parseFloat(pct) >= 0 ? 'green' : 'red';
-
-  const advClass = (a) => {
-    if (a?.includes('🟢')) return 'green';
-    if (a?.includes('🟡')) return 'yellow';
-    if (a?.includes('🟠')) return 'orange';
-    if (a?.includes('🔴')) return 'red';
-    return 'gray';
-  };
 
   const totalValue = $derived(data?.advice?.reduce((s, a) => s + (parseFloat(a.marketValue) || 0), 0) ?? 0);
   const totalCost  = $derived(data?.advice?.reduce((s, a) => s + (a.costBasis ?? 0) * a.shares, 0) ?? 0);
@@ -221,20 +203,20 @@
         <div class="form-title">Add Holding</div>
         <div class="form-row">
           <div class="field">
-            <label>Ticker</label>
-            <input bind:value={form.ticker} placeholder="AAPL" maxlength="10" style="text-transform:uppercase" />
+            <label for="form-ticker">Ticker</label>
+            <input id="form-ticker" bind:value={form.ticker} placeholder="AAPL" maxlength="10" style="text-transform:uppercase" />
           </div>
           <div class="field">
-            <label>Shares</label>
-            <input bind:value={form.shares} placeholder="10" type="number" min="0" step="any" />
+            <label for="form-shares">Shares</label>
+            <input id="form-shares" bind:value={form.shares} placeholder="10" type="number" min="0" step="any" />
           </div>
           <div class="field">
-            <label>Cost Basis / share</label>
-            <input bind:value={form.costBasis} placeholder="150.00" type="number" min="0" step="any" />
+            <label for="form-cost">Cost Basis / share</label>
+            <input id="form-cost" bind:value={form.costBasis} placeholder="150.00" type="number" min="0" step="any" />
           </div>
           <div class="field">
-            <label>Type</label>
-            <select bind:value={form.type}>
+            <label for="form-type">Type</label>
+            <select id="form-type" bind:value={form.type}>
               <option value="stock">Stock</option>
               <option value="etf">ETF</option>
               <option value="bond">Bond</option>
@@ -242,8 +224,8 @@
             </select>
           </div>
           <div class="field">
-            <label>Source</label>
-            <input bind:value={form.source} placeholder="Robinhood" />
+            <label for="form-source">Source</label>
+            <input id="form-source" bind:value={form.source} placeholder="Robinhood" />
           </div>
           <button class="btn-save" onclick={submitHolding} disabled={saving}>
             {saving ? 'Saving…' : 'Save'}
@@ -569,11 +551,6 @@
     margin-bottom: 14px;
   }
 
-  .field input.readonly {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
   .btn-cancel-edit {
     background: transparent;
     border: 1px solid #2d3f55;

ui/src/routes/safe-buys/+page.svelte

@@ -1,6 +1,7 @@
 <script>
   import MarketContext from '$lib/MarketContext.svelte';
   import SignalBadge from '$lib/SignalBadge.svelte';
+  import { sorted, verdictShort, vClass } from '$lib/utils.js';
 
   let { data } = $props();
 
@@ -14,22 +15,6 @@
   const watchEtfs  = $derived((data.ETF  ?? []).filter(r => r.signal !== SIGNAL_STRONG));
   const watchBonds = $derived((data.BOND ?? []).filter(r => r.signal !== SIGNAL_STRONG));
 
-  const sigOrd = s => ({'✅ Strong Buy':0,'⚡ Momentum':1,'🔄 Neutral':2,'⚠️  Speculation':3,'❌ Avoid':4})[s] ?? 5;
-  const sorted = arr => [...arr].sort((a, b) => sigOrd(a.signal) - sigOrd(b.signal));
-
-  const vClass = label =>
-    label?.startsWith('🟢') ? 'green' : label?.startsWith('🟡') ? 'yellow' : 'red';
-
-  const verdictShort = label => {
-    if (!label) return '—';
-    if (label.includes('Efficient'))  return 'Efficient';
-    if (label.includes('Attractive')) return 'Attractive';
-    if (label.includes('Neutral'))    return 'Hold';
-    if (label.includes('REJECT'))     return 'Reject';
-    if (label.includes('Avoid'))      return 'Avoid';
-    return label.replace(/[🟢🟡🔴]/u, '').trim();
-  };
-
   const totalScreened = $derived((data.ETF?.length ?? 0) + (data.BOND?.length ?? 0));
   const totalStrong   = $derived(strongEtfs.length + strongBonds.length);
 </script>