phase-6: typescript introduction

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

@@ -1,28 +1,50 @@
-<script>
+<script lang="ts">
   import SignalBadge from '$lib/SignalBadge.svelte';
   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';
+  import type { Signal, MarketContext as MarketContextType, PortfolioHolding } from '$lib/types.js';
+
+  interface AdviceRow {
+    ticker:       string;
+    type:         string;
+    source:       string;
+    shares:       number;
+    costBasis:    number;
+    currentPrice: string | null;
+    marketValue:  string | null;
+    gainLossPct:  string | null;
+    signal:       Signal | null;
+    advice:       string;
+    reason:       string;
+  }
+
+  interface PortfolioData {
+    advice:          AdviceRow[];
+    marketContext:   MarketContextType | null;
+    personalFinance: Record<string, unknown> | null;
+  }
 
   let { data: _data } = $props();  // unused — we load client-side
 
-  let data = $state(null);
-  let loading = $state(true);
-  let refreshing = $state(false);  // background refresh — keeps page visible
-  let loadError = $state(null);
+  let data:       PortfolioData | null = $state(null);
+  let loading:    boolean              = $state(true);
+  let refreshing: boolean              = $state(false);
+  let loadError:  string | null        = $state(null);
 
   // ── Add holding form (new holdings only) ────────────────────────────────────
-  let formOpen  = $state(false);
-  let saving    = $state(false);
-  let formError = $state(null);
+  let formOpen:  boolean      = $state(false);
+  let saving:    boolean      = $state(false);
+  let formError: string|null  = $state(null);
   let form = $state({ ticker: '', shares: '', costBasis: '', type: 'stock', source: 'Robinhood' });
 
   // ── Inline row editing ───────────────────────────────────────────────────────
-  let inlineEdit = $state(null);   // { ticker, shares, costBasis, type, source } or null
-  let inlineSaving = $state(false);
+  interface InlineEdit { ticker: string; shares: string; costBasis: string; type: string; source: string }
+  let inlineEdit:   InlineEdit | null = $state(null);
+  let inlineSaving: boolean           = $state(false);
 
-  function startInlineEdit(a) {
+  function startInlineEdit(a: AdviceRow) {
     inlineEdit = {
       ticker:    a.ticker,
       shares:    String(a.shares),
@@ -52,7 +74,7 @@
           advice: data.advice.map(a =>
             a.ticker === updated.ticker
               ? { ...a, shares: updated.shares, costBasis: updated.costBasis, type: updated.type, source: updated.source,
-                  marketValue: updated.shares * (parseFloat(a.currentPrice) || 0),
+                  marketValue: String(updated.shares * (parseFloat(a.currentPrice ?? '0') || 0)),
                   gainLossPct: a.currentPrice ? (((parseFloat(a.currentPrice) - updated.costBasis) / updated.costBasis) * 100).toFixed(1) : null }
               : a
           ),
@@ -61,7 +83,7 @@
       inlineEdit = null;
       fetchPortfolioData(false);  // background: update prices + signals
     } catch (e) {
-      loadError = e.message;
+      loadError = (e as Error).message;
     } finally {
       inlineSaving = false;
     }
@@ -101,13 +123,13 @@
       formOpen = false;
       fetchPortfolioData(false);  // background: get real price + signal
     } catch (e) {
-      formError = e.message;
+      formError = (e as Error).message;
     } finally {
       saving = false;
     }
   }
 
-  async function deleteHolding(ticker) {
+  async function deleteHolding(ticker: string): Promise<void> {
     if (!confirm(`Remove ${ticker} from your portfolio?`)) return;
     // Optimistic remove — drop the row immediately
     if (data?.advice) {
@@ -117,7 +139,7 @@
       await removeHolding(ticker);
       fetchPortfolioData(false);  // background: recalculate totals
     } catch (e) {
-      loadError = e.message;
+      loadError = (e as Error).message;
     }
   }
 
@@ -128,7 +150,7 @@
     fetch('/api/finance/portfolio')
       .then(res => res.ok ? res.json() : res.text().then(t => { throw new Error(t); }))
       .then(json => { data = json; })
-      .catch(e => { loadError = e.message; })
+      .catch(e => { loadError = (e as Error).message; })
       .finally(() => { loading = false; refreshing = false; });
   }
 
@@ -143,7 +165,7 @@
   let sortCol = $state('ticker');
   let sortDir = $state(1);  // 1 = asc, -1 = desc
 
-  function toggleSort(col) {
+  function toggleSort(col: string): void {
     if (sortCol === col) sortDir = sortDir === 1 ? -1 : 1;
     else { sortCol = col; sortDir = 1; }
   }
@@ -169,7 +191,7 @@
     });
   });
 
-  const sortIcon = (col) => sortCol !== col ? '⇅' : sortDir === 1 ? '↑' : '↓';
+  const sortIcon = (col: string): string => sortCol !== col ? '⇅' : sortDir === 1 ? '↑' : '↓';
 
 
   const totalValue = $derived(data?.advice?.reduce((s, a) => s + (parseFloat(a.marketValue) || 0), 0) ?? 0);

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

@@ -1,8 +1,10 @@
+import type { PageLoad } from './$types.js';
+
 // Disable SSR — data is fetched client-side in the component so navigation
 // is instant instead of blocking until all Yahoo Finance calls resolve.
 export const ssr = false;
 export const prerender = false;
 
-export function load() {
+export const load: PageLoad = () => {
   return {};
-}
+};