phase-7: code restructure
This commit is contained in:
Sai Kiran Vella
@@ -57,7 +57,20 @@
|
||||
<div class="sb-list">
|
||||
{#each a.relatedTickers ?? [] as rt}
|
||||
<div class="sb-item">
|
||||
<span class="sb-name ticker">{rt.ticker}</span>
|
||||
<div class="sb-ticker-row">
|
||||
<span class="sb-name ticker">{rt.ticker}</span>
|
||||
<div class="sb-chips">
|
||||
{#if rt.bias}
|
||||
<span class="sb-chip sb-bias" data-bias={rt.bias}>{rt.bias}</span>
|
||||
{/if}
|
||||
{#if rt.horizon}
|
||||
<span class="sb-chip sb-horizon">{rt.horizon}</span>
|
||||
{/if}
|
||||
{#if rt.sensitivity}
|
||||
<span class="sb-chip sb-sensitivity" title="Sensitivity {rt.sensitivity}/5">S{rt.sensitivity}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<span class="sb-reason">{rt.reason}</span>
|
||||
</div>
|
||||
{/each}
|
||||
@@ -67,133 +80,3 @@
|
||||
</aside>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.sidebar-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #00000055;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0; right: 0; bottom: 0;
|
||||
width: 380px;
|
||||
background: var(--bg-surface);
|
||||
border-left: 1px solid var(--blue-surface);
|
||||
z-index: 101;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px var(--space-xl);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--blue-badge);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.sidebar-type {
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
background: var(--blue-surface);
|
||||
color: var(--blue-muted);
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
.sidebar-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-dimmer);
|
||||
font-size: 14px;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-xs);
|
||||
|
||||
&:hover { color: var(--text-muted); background: var(--bg-card); }
|
||||
}
|
||||
|
||||
.sidebar-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.sidebar-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.sidebar-error {
|
||||
color: var(--red);
|
||||
background: var(--red-bg);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px var(--space-lg);
|
||||
font-size: var(--fs-md);
|
||||
}
|
||||
|
||||
.sb-sentiment-row { display: flex; align-items: center; gap: 8px; }
|
||||
|
||||
.sb-summary {
|
||||
font-size: var(--fs-md);
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
border-left: 3px solid var(--blue-surface);
|
||||
padding-left: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sb-sub {
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-dimmer);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sb-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
|
||||
.sb-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-elevated);
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sb-name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.sb-reason {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-dim);
|
||||
line-height: 1.4;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,14 +11,22 @@
|
||||
analyzeLoading = false,
|
||||
onAnalyze,
|
||||
}: {
|
||||
type: AssetType;
|
||||
rows: AssetResult[];
|
||||
type: AssetType;
|
||||
rows: AssetResult[];
|
||||
analyzeLoading?: boolean;
|
||||
onAnalyze: () => void;
|
||||
onAnalyze: () => void;
|
||||
} = $props();
|
||||
|
||||
// Mode state is self-contained — each table independently tracks inflated vs fundamental
|
||||
let mode = $state('inflated');
|
||||
|
||||
// Colour class for signed % values (52W Chg, From High, Upside, DCF Safety)
|
||||
function signClass(val: string | number | null | undefined): string {
|
||||
if (val == null) return '';
|
||||
const n = typeof val === 'number' ? val : parseFloat(String(val));
|
||||
if (isNaN(n)) return '';
|
||||
return n > 0 ? 'pos' : n < 0 ? 'neg' : '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="section">
|
||||
@@ -54,9 +62,27 @@
|
||||
<th>Verdict</th>
|
||||
<th>Score</th>
|
||||
{#if type === 'STOCK'}
|
||||
<th>Sector</th>
|
||||
<th>P/E</th><th>PEG</th><th>ROE%</th>
|
||||
<th>OpMgn%</th><th>FCF%</th><th>D/E</th>
|
||||
<!-- Classification -->
|
||||
<th title="Market cap tier">Cap</th>
|
||||
<th title="Growth / style classification">Style</th>
|
||||
<!-- Valuation -->
|
||||
<th>P/E</th>
|
||||
<th>PEG</th>
|
||||
<!-- Quality -->
|
||||
<th title="Gross Margin %">GrossM%</th>
|
||||
<th>ROE%</th>
|
||||
<th>OpMgn%</th>
|
||||
<th>FCF%</th>
|
||||
<!-- Risk -->
|
||||
<th>D/E</th>
|
||||
<!-- 52-week movement -->
|
||||
<th title="Total price return over last 52 weeks">52W Chg</th>
|
||||
<th title="% below 52-week high">From High</th>
|
||||
<!-- Expert signals -->
|
||||
<th title="Wall Street analyst consensus">Analyst</th>
|
||||
<th title="% upside to analyst target price">Upside</th>
|
||||
<th title="DCF margin of safety — positive means undervalued">DCF Safety</th>
|
||||
<!-- Risk flags -->
|
||||
<th>Flags</th>
|
||||
{:else if type === 'ETF'}
|
||||
<th>Expense</th><th>Yield</th><th>AUM</th><th>5Y Ret</th>
|
||||
@@ -68,20 +94,34 @@
|
||||
<tbody>
|
||||
{#each sorted(rows) as r}
|
||||
{@const m = r.asset.displayMetrics ?? {}}
|
||||
{@const v = r[mode]}
|
||||
{@const v = r[mode as 'inflated' | 'fundamental']}
|
||||
<tr class="data-row" data-signal={sigOrd(r.signal)}>
|
||||
<td class="ticker">{r.asset.ticker}</td>
|
||||
<td class="num">{m.Price ?? '—'}</td>
|
||||
<td><VerdictPill label={v.label} /></td>
|
||||
<td class="score-cell" title={v.scoreSummary}>{v.scoreSummary}</td>
|
||||
{#if type === 'STOCK'}
|
||||
<td><span class="tag sm">{m.Sector ?? '—'}</span></td>
|
||||
<!-- Classification -->
|
||||
<td><span class="tag sm cap-tag">{m['Cap Tier'] ?? '—'}</span></td>
|
||||
<td><span class="tag sm style-tag">{m['Style'] ?? '—'}</span></td>
|
||||
<!-- Valuation -->
|
||||
<td class="num">{m['P/E'] ?? '—'}</td>
|
||||
<td class="num">{m['PEG'] ?? '—'}</td>
|
||||
<!-- Quality -->
|
||||
<td class="num">{m['GrossM%'] ?? '—'}</td>
|
||||
<td class="num">{m['ROE%'] ?? '—'}</td>
|
||||
<td class="num">{m['OpMgn%'] ?? '—'}</td>
|
||||
<td class="num">{m['FCF Yld%'] ?? '—'}</td>
|
||||
<!-- Risk -->
|
||||
<td class="num">{m['D/E'] ?? '—'}</td>
|
||||
<!-- 52-week movement — green if up, red if down -->
|
||||
<td class="num {signClass(m['52W Chg'])}">{m['52W Chg'] ?? '—'}</td>
|
||||
<td class="num {signClass(m['From High'])}">{m['From High'] ?? '—'}</td>
|
||||
<!-- Expert signals -->
|
||||
<td class="analyst-cell">{m['Analyst'] ?? '—'}</td>
|
||||
<td class="num {signClass(m['Upside'])}">{m['Upside'] ?? '—'}</td>
|
||||
<td class="num {signClass(m['DCF Safety'])}">{m['DCF Safety'] ?? '—'}</td>
|
||||
<!-- Risk flags -->
|
||||
<td class="flags">
|
||||
{#each v.audit?.riskFlags ?? [] as flag}
|
||||
<span class="flag">⚠ {flag}</span>
|
||||
@@ -105,15 +145,32 @@
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Score cell — truncates long gate summaries, full text via title tooltip */
|
||||
/* Score cell — truncates long gate summaries, tooltip shows full text */
|
||||
.score-cell {
|
||||
color: var(--text-dim);
|
||||
font-size: var(--fs-sm);
|
||||
max-width: 140px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.flags { display: flex; flex-direction: column; gap: 2px; }
|
||||
.flag { color: var(--orange); font-size: var(--fs-sm); }
|
||||
/* Classification tags */
|
||||
.cap-tag { color: var(--blue-light, #93c5fd); border-color: var(--blue-dim, #1e3a5f); }
|
||||
.style-tag { color: var(--text-muted); }
|
||||
|
||||
/* Signed % colouring */
|
||||
.pos { color: var(--green); }
|
||||
.neg { color: var(--red); }
|
||||
|
||||
/* Analyst label — not a number */
|
||||
.analyst-cell {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Risk flags column */
|
||||
.flags { display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
|
||||
.flag { color: var(--orange); font-size: var(--fs-sm); white-space: nowrap; }
|
||||
</style>
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
{ label: '10Y', value: ctx.riskFreeRate?.toFixed(2) + '%' },
|
||||
{ label: 'VIX', value: ctx.vixLevel?.toFixed(1) },
|
||||
{ label: 'S&P', value: ctx.sp500Price?.toLocaleString() },
|
||||
{ label: 'S&P P/E', value: fmtPE(ctx.benchmarks?.marketPE?.toFixed(1)) },
|
||||
{ label: 'Tech P/E', value: fmtPE(ctx.benchmarks?.techPE?.toFixed(1)) },
|
||||
{ label: 'S&P P/E', value: fmtPE(ctx.benchmarks?.marketPE) },
|
||||
{ label: 'Tech P/E', value: fmtPE(ctx.benchmarks?.techPE) },
|
||||
{ label: 'REIT Yld', value: ctx.benchmarks?.reitYield?.toFixed(2) + '%' },
|
||||
{ label: 'IG Sprd', value: ctx.benchmarks?.igSpread?.toFixed(2) + '%' },
|
||||
{ label: 'Rates', value: ctx.rateRegime, regime: ctx.rateRegime },
|
||||
@@ -36,7 +36,6 @@
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ctx-chip {
|
||||
|
||||
+6
-127
@@ -1,127 +1,6 @@
|
||||
import type {
|
||||
ScreenerResult,
|
||||
MarketContext,
|
||||
MarketCall,
|
||||
CalendarEvent,
|
||||
CatalystStory,
|
||||
LLMAnalysis,
|
||||
PortfolioHolding,
|
||||
PortfolioAdvice,
|
||||
} from '$lib/types.js';
|
||||
|
||||
const BASE = '/api';
|
||||
|
||||
// ── Screener ──────────────────────────────────────────────────────────────────
|
||||
|
||||
export async function screenTickers(tickers: string[]): Promise<ScreenerResult> {
|
||||
const res = await fetch(`${BASE}/screen`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ tickers }),
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function fetchCatalysts(): Promise<{ tickers: string[]; stories: CatalystStory[] }> {
|
||||
const res = await fetch(`${BASE}/screen/catalysts`);
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function analyzeTickers(tickers: string[]): Promise<{ analysis: LLMAnalysis | null }> {
|
||||
const res = await fetch(`${BASE}/analyze`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ tickers }),
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// ── Finance / Portfolio ───────────────────────────────────────────────────────
|
||||
|
||||
export async function fetchPortfolio(): Promise<{
|
||||
advice: PortfolioAdvice[];
|
||||
holdings: PortfolioHolding[];
|
||||
marketContext: MarketContext | null;
|
||||
netWorth: number | null;
|
||||
error?: string;
|
||||
}> {
|
||||
const res = await fetch(`${BASE}/finance/portfolio`);
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function addHolding(
|
||||
holding: Omit<PortfolioHolding, never>,
|
||||
): Promise<{ holdings: PortfolioHolding[] }> {
|
||||
const res = await fetch(`${BASE}/finance/holdings`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(holding),
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function removeHolding(ticker: string): Promise<{ holdings: PortfolioHolding[] }> {
|
||||
const res = await fetch(`${BASE}/finance/holdings/${ticker}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function fetchMarketContext(): Promise<MarketContext> {
|
||||
const res = await fetch(`${BASE}/finance/market-context`);
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// ── Market Calls ──────────────────────────────────────────────────────────────
|
||||
|
||||
export async function fetchCalls(): Promise<{ calls: MarketCall[] }> {
|
||||
const res = await fetch(`${BASE}/calls`);
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function fetchCall(id: string): Promise<MarketCall & { current: ScreenerResult }> {
|
||||
const res = await fetch(`${BASE}/calls/${id}`);
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function createCall(payload: {
|
||||
title: string;
|
||||
quarter: string;
|
||||
thesis: string;
|
||||
tickers: string[];
|
||||
date?: string;
|
||||
}): Promise<MarketCall> {
|
||||
const res = await fetch(`${BASE}/calls`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function deleteCall(id: string): Promise<{ ok: boolean }> {
|
||||
const res = await fetch(`${BASE}/calls/${id}`, { method: 'DELETE' });
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function fetchCallsCalendar(
|
||||
tickers: string[] | null = null,
|
||||
): Promise<{ events: CalendarEvent[] }> {
|
||||
const url = tickers?.length
|
||||
? `${BASE}/calls/calendar?tickers=${tickers.join(',')}`
|
||||
: `${BASE}/calls/calendar`;
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
// ── Backward-compat shim ──────────────────────────────────────────────────
|
||||
// All API functions now live in $lib/api/*.ts domain modules.
|
||||
// This file re-exports everything so existing import sites are unaffected.
|
||||
// New code should import directly from the domain module:
|
||||
// import { screenTickers } from '$lib/api/screener.js'
|
||||
export * from './api/index.js';
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
import type { MarketCall, CalendarEvent, ScreenerResult } from '$lib/types.js';
|
||||
|
||||
const BASE = '/api';
|
||||
|
||||
export async function fetchCalls(): Promise<{ calls: MarketCall[] }> {
|
||||
const res = await fetch(`${BASE}/calls`);
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function fetchCall(id: string): Promise<MarketCall & { current: ScreenerResult }> {
|
||||
const res = await fetch(`${BASE}/calls/${id}`);
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function createCall(payload: {
|
||||
title: string;
|
||||
quarter: string;
|
||||
thesis: string;
|
||||
tickers: string[];
|
||||
date?: string;
|
||||
}): Promise<MarketCall> {
|
||||
const res = await fetch(`${BASE}/calls`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function deleteCall(id: string): Promise<{ ok: boolean }> {
|
||||
const res = await fetch(`${BASE}/calls/${id}`, { method: 'DELETE' });
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function fetchCallsCalendar(
|
||||
tickers: string[] | null = null,
|
||||
): Promise<{ events: CalendarEvent[] }> {
|
||||
const url = tickers?.length
|
||||
? `${BASE}/calls/calendar?tickers=${tickers.join(',')}`
|
||||
: `${BASE}/calls/calendar`;
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import type { MarketContext, PortfolioHolding, PortfolioAdvice } from '$lib/types.js';
|
||||
|
||||
const BASE = '/api';
|
||||
|
||||
export async function fetchPortfolio(): Promise<{
|
||||
advice: PortfolioAdvice[];
|
||||
holdings: PortfolioHolding[];
|
||||
marketContext: MarketContext | null;
|
||||
netWorth: number | null;
|
||||
error?: string;
|
||||
}> {
|
||||
const res = await fetch(`${BASE}/finance/portfolio`);
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function addHolding(
|
||||
holding: PortfolioHolding,
|
||||
): Promise<{ holdings: PortfolioHolding[] }> {
|
||||
const res = await fetch(`${BASE}/finance/holdings`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(holding),
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function removeHolding(ticker: string): Promise<{ holdings: PortfolioHolding[] }> {
|
||||
const res = await fetch(`${BASE}/finance/holdings/${ticker}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function fetchMarketContext(): Promise<MarketContext> {
|
||||
const res = await fetch(`${BASE}/finance/market-context`);
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
// ── API module barrel ─────────────────────────────────────────────────────
|
||||
// Drop-in replacement for the old $lib/api.ts flat file.
|
||||
// Existing imports from '$lib/api.js' continue to work via api.ts re-export.
|
||||
|
||||
export { screenTickers, fetchCatalysts, analyzeTickers } from './screener.js';
|
||||
export { fetchPortfolio, addHolding, removeHolding, fetchMarketContext } from './finance.js';
|
||||
export { fetchCalls, fetchCall, createCall, deleteCall, fetchCallsCalendar } from './calls.js';
|
||||
@@ -0,0 +1,32 @@
|
||||
import type { ScreenerResult } from '$lib/types.js';
|
||||
import type { LLMAnalysis, CatalystStory } from '$lib/types.js';
|
||||
|
||||
const BASE = '/api';
|
||||
|
||||
export async function screenTickers(tickers: string[]): Promise<ScreenerResult> {
|
||||
const res = await fetch(`${BASE}/screen`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ tickers }),
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function fetchCatalysts(): Promise<{ tickers: string[]; stories: CatalystStory[] }> {
|
||||
const res = await fetch(`${BASE}/screen/catalysts`);
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function analyzeTickers(
|
||||
tickers: string[],
|
||||
): Promise<{ analysis: LLMAnalysis | null; reason?: string | null }> {
|
||||
const res = await fetch(`${BASE}/analyze`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ tickers }),
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
<script lang="ts">
|
||||
import type { CalendarEvent } from '$lib/types.js';
|
||||
|
||||
let { events }: { events: CalendarEvent[] } = $props();
|
||||
|
||||
type EventType = 'earnings' | 'exdividend' | 'dividend';
|
||||
const eventIcon = (t: EventType): string => ({ earnings: '📊', exdividend: '💰', dividend: '💵' })[t] ?? '📅';
|
||||
const eventColor = (t: EventType): string =>
|
||||
({ earnings: '#60a5fa', exdividend: '#facc15', dividend: '#4ade80' })[t] ?? '#94a3b8';
|
||||
|
||||
const fmtMoney = (n: number | null | undefined): string | null => n == null ? null :
|
||||
n >= 1e9 ? '$' + (n / 1e9).toFixed(1) + 'B' :
|
||||
n >= 1e6 ? '$' + (n / 1e6).toFixed(1) + 'M' : '$' + n.toFixed(2);
|
||||
|
||||
const upcoming = $derived(events.filter(e => !e.isPast).slice(0, 20));
|
||||
const past = $derived(events.filter(e => e.isPast).slice(0, 10));
|
||||
</script>
|
||||
|
||||
{#if events.length > 0}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h2>📅 Upcoming Events</h2>
|
||||
<span class="count">{upcoming.length} upcoming</span>
|
||||
{#if past.length > 0}
|
||||
<span class="count" style="margin-left:4px">{past.length} recent</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="cal-grid">
|
||||
{#each upcoming as ev}
|
||||
<div class="cal-event">
|
||||
<div class="cal-date">{ev.date}</div>
|
||||
<div class="cal-content">
|
||||
<span class="cal-ticker">{ev.ticker}</span>
|
||||
<span class="cal-type" style="color:{eventColor(ev.type)}">
|
||||
{eventIcon(ev.type)} {ev.label}
|
||||
{#if ev.detail}<span class="cal-detail">· {ev.detail}</span>{/if}
|
||||
</span>
|
||||
{#if ev.epsEstimate != null}
|
||||
<span class="cal-est">EPS est. ${ev.epsEstimate.toFixed(2)} · Rev est. {fmtMoney(ev.revEstimate)}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
{#if past.length > 0}
|
||||
<div class="cal-divider">— Past —</div>
|
||||
{#each past as ev}
|
||||
<div class="cal-event past">
|
||||
<div class="cal-date">{ev.date}</div>
|
||||
<div class="cal-content">
|
||||
<span class="cal-ticker">{ev.ticker}</span>
|
||||
<span class="cal-type past-type">{eventIcon(ev.type)} {ev.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
<script lang="ts">
|
||||
interface TickerSnapshot {
|
||||
price: number | null;
|
||||
signal: string | null;
|
||||
}
|
||||
|
||||
interface MarketCall {
|
||||
id: string;
|
||||
title: string;
|
||||
quarter: string;
|
||||
date: string;
|
||||
thesis: string;
|
||||
tickers: string[];
|
||||
snapshot: Record<string, TickerSnapshot>;
|
||||
}
|
||||
|
||||
let {
|
||||
call,
|
||||
onDelete,
|
||||
}: {
|
||||
call: MarketCall;
|
||||
onDelete: (id: string) => void;
|
||||
} = $props();
|
||||
|
||||
const signalColor = (s: string | null | undefined): string => {
|
||||
if (s?.includes('Strong')) return '#4ade80';
|
||||
if (s?.includes('Momentum')) return '#60a5fa';
|
||||
if (s?.includes('Neutral')) return '#94a3b8';
|
||||
if (s?.includes('Speculation')) return '#fb923c';
|
||||
return '#f87171';
|
||||
};
|
||||
</script>
|
||||
|
||||
<section class="section call-card">
|
||||
<div class="section-header">
|
||||
<div class="call-card-meta">
|
||||
<a href="/calls/{call.id}" class="call-card-title">{call.title}</a>
|
||||
<div class="call-card-badges">
|
||||
<span class="tag">{call.quarter}</span>
|
||||
<span class="call-date-badge">{call.date}</span>
|
||||
<span class="count">{call.tickers.length} tickers</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-call-delete" onclick={() => onDelete(call.id)}>✕</button>
|
||||
</div>
|
||||
|
||||
<div class="call-card-body">
|
||||
<p class="call-thesis">{call.thesis}</p>
|
||||
|
||||
{#if Object.keys(call.snapshot ?? {}).length}
|
||||
<div class="snapshot-grid">
|
||||
{#each call.tickers as ticker}
|
||||
{@const snap = call.snapshot[ticker]}
|
||||
{#if snap}
|
||||
<a href="/calls/{call.id}" class="snap-card">
|
||||
<div class="snap-ticker">{ticker}</div>
|
||||
<div class="snap-price">${snap.price?.toFixed(2) ?? '—'}</div>
|
||||
<div class="snap-signal" style="color:{signalColor(snap.signal)}">
|
||||
{snap.signal?.replace(/[✅⚡⚠️🔄❌]/u, '').trim() ?? '—'}
|
||||
</div>
|
||||
</a>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
<a href="/calls/{call.id}" class="call-view-link">View performance →</a>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
<script lang="ts">
|
||||
import Spinner from '$lib/Spinner.svelte';
|
||||
|
||||
interface FormData {
|
||||
title: string;
|
||||
quarter: string;
|
||||
date: string;
|
||||
thesis: string;
|
||||
tickers: string;
|
||||
}
|
||||
|
||||
let {
|
||||
saving = false,
|
||||
error = null,
|
||||
onSubmit,
|
||||
onCancel,
|
||||
}: {
|
||||
saving?: boolean;
|
||||
error?: string | null;
|
||||
onSubmit: (data: FormData) => void;
|
||||
onCancel: () => void;
|
||||
} = $props();
|
||||
|
||||
function currentQuarter(): string {
|
||||
const d = new Date();
|
||||
return `Q${Math.ceil((d.getMonth() + 1) / 3)} ${d.getFullYear()}`;
|
||||
}
|
||||
|
||||
let form = $state<FormData>({
|
||||
title: '',
|
||||
quarter: currentQuarter(),
|
||||
date: new Date().toISOString().slice(0, 10),
|
||||
thesis: '',
|
||||
tickers: '',
|
||||
});
|
||||
|
||||
function handleSubmit(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
onSubmit({ ...form });
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="section form-section">
|
||||
<div class="section-header"><h2>New Market Call</h2></div>
|
||||
<form class="call-form" onsubmit={handleSubmit}>
|
||||
<div class="call-form-row">
|
||||
<label>
|
||||
<span>Title</span>
|
||||
<input bind:value={form.title} placeholder="Q3 2025 — Rate pivot & tech rotation" required />
|
||||
</label>
|
||||
<label class="narrow">
|
||||
<span>Quarter</span>
|
||||
<input bind:value={form.quarter} placeholder="Q3 2025" required />
|
||||
</label>
|
||||
<label class="narrow">
|
||||
<span>Date</span>
|
||||
<input type="date" bind:value={form.date} required />
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
<span>Thesis</span>
|
||||
<textarea
|
||||
bind:value={form.thesis}
|
||||
rows="4"
|
||||
placeholder="Describe the macro thesis behind this call — why these tickers, why now..."
|
||||
required
|
||||
></textarea>
|
||||
</label>
|
||||
<label>
|
||||
<span>Tickers to track</span>
|
||||
<input bind:value={form.tickers} placeholder="AAPL, MSFT, TLT, GLD …" required />
|
||||
<span class="call-hint">Comma or space separated. Current prices will be snapshot automatically.</span>
|
||||
</label>
|
||||
{#if error}
|
||||
<div class="form-error-block">⚠ {error}</div>
|
||||
{/if}
|
||||
<div class="call-form-actions">
|
||||
<button type="submit" class="btn-primary" disabled={saving}>
|
||||
{#if saving}<Spinner size="sm" /><span>Snapshotting prices…</span>
|
||||
{:else}Save Call{/if}
|
||||
</button>
|
||||
<button type="button" class="btn-ghost" onclick={onCancel}>Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
<script lang="ts">
|
||||
import { fmt, fmtShort } from '$lib/utils.js';
|
||||
import type { PersonalFinance } from '$lib/types.js';
|
||||
|
||||
let { pf }: { pf: PersonalFinance } = $props();
|
||||
</script>
|
||||
|
||||
<div class="pnl-grid">
|
||||
<div class="pnl-card"><div class="pnl-label">Net Worth</div>
|
||||
<div class="pnl-value {pf.netWorth >= 0 ? 'green' : 'red'}">{fmtShort(pf.netWorth)}</div></div>
|
||||
<div class="pnl-card"><div class="pnl-label">Total Assets</div>
|
||||
<div class="pnl-value">{fmtShort(pf.totalAssets)}</div></div>
|
||||
<div class="pnl-card"><div class="pnl-label">Liabilities</div>
|
||||
<div class="pnl-value red">{fmtShort(pf.totalLiabilities)}</div></div>
|
||||
<div class="pnl-card"><div class="pnl-label">Cash ({pf.cashPct}%)</div>
|
||||
<div class="pnl-value">{fmtShort(pf.totalCash)}</div></div>
|
||||
<div class="pnl-card"><div class="pnl-label">Investments ({pf.investPct}%)</div>
|
||||
<div class="pnl-value">{fmtShort(pf.totalInvestments)}</div></div>
|
||||
{#if pf.savingsRate != null}
|
||||
<div class="pnl-card"><div class="pnl-label">Savings Rate</div>
|
||||
<div class="pnl-value {parseFloat(pf.savingsRate) >= 20 ? 'green' : 'yellow'}">{pf.savingsRate}%</div></div>
|
||||
{/if}
|
||||
<div class="pnl-card"><div class="pnl-label">Monthly Income</div>
|
||||
<div class="pnl-value">{fmtShort(pf.totalIncome)}</div></div>
|
||||
<div class="pnl-card"><div class="pnl-label">Monthly Spend</div>
|
||||
<div class="pnl-value">{fmtShort(pf.totalSpend)}</div></div>
|
||||
</div>
|
||||
|
||||
<div class="accounts-two-col">
|
||||
<section class="accounts-section">
|
||||
<h2>Accounts</h2>
|
||||
<table>
|
||||
<thead><tr><th>Account</th><th>Type</th><th>Institution</th><th class="right">Balance</th></tr></thead>
|
||||
<tbody>
|
||||
{#each pf.accounts as a}
|
||||
<tr>
|
||||
<td class="ticker">{a.name}</td>
|
||||
<td><span class="tag">{a.type}</span></td>
|
||||
<td class="gray">{a.org}</td>
|
||||
<td class="num right {a.balance >= 0 ? 'green' : 'red'}">{fmt(a.balance)}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section class="accounts-section">
|
||||
<h2>Spending — Last 30 Days</h2>
|
||||
<table>
|
||||
<thead><tr><th>Category</th><th class="right">Amount</th><th class="right">%</th><th>Share</th></tr></thead>
|
||||
<tbody>
|
||||
{#each pf.categoryBreakdown.slice(0, 10) as c}
|
||||
<tr>
|
||||
<td>{c.category}</td>
|
||||
<td class="num right">{fmt(c.amount)}</td>
|
||||
<td class="num right gray">{c.pct}%</td>
|
||||
<td style="width:100px">
|
||||
<div class="spend-bar-bg"><div class="spend-bar-fill" style="width:{Math.min(c.pct,100)}%"></div></div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
<script lang="ts">
|
||||
import type { HoldingFormData } from '$lib/types.js';
|
||||
|
||||
let {
|
||||
saving = false,
|
||||
error = null as string | null,
|
||||
onSubmit,
|
||||
onClose,
|
||||
}: {
|
||||
saving?: boolean;
|
||||
error?: string | null;
|
||||
onSubmit: (data: HoldingFormData) => void;
|
||||
onClose: () => void;
|
||||
} = $props();
|
||||
|
||||
let form = $state({ ticker: '', shares: '', costBasis: '', type: 'stock', source: 'Robinhood' });
|
||||
|
||||
function handleSubmit() {
|
||||
const ticker = form.ticker.trim().toUpperCase();
|
||||
const shares = parseFloat(form.shares);
|
||||
const costBasis = parseFloat(form.costBasis) || 0;
|
||||
if (!ticker || !shares || shares <= 0) return;
|
||||
onSubmit({
|
||||
ticker,
|
||||
shares,
|
||||
costBasis,
|
||||
type: form.type as HoldingFormData['type'],
|
||||
source: form.source,
|
||||
});
|
||||
form = { ticker: '', shares: '', costBasis: '', type: 'stock', source: 'Robinhood' };
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="add-form">
|
||||
<div class="add-form-title">Add Holding</div>
|
||||
<div class="add-form-row">
|
||||
<div class="field">
|
||||
<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 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 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 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>
|
||||
<option value="crypto">Crypto</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="form-source">Source</label>
|
||||
<input id="form-source" bind:value={form.source} placeholder="Robinhood" />
|
||||
</div>
|
||||
<button class="btn-form-save" onclick={handleSubmit} disabled={saving}>
|
||||
{saving ? 'Saving…' : 'Save'}
|
||||
</button>
|
||||
<button class="btn-form-cancel" onclick={onClose}>✕</button>
|
||||
</div>
|
||||
{#if error}
|
||||
<div class="form-error">⚠ {error}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
<script lang="ts">
|
||||
import SignalBadge from '$lib/SignalBadge.svelte';
|
||||
import { sigOrd, fmt, fmtShort, glClass, advClass } from '$lib/utils.js';
|
||||
import type { AdviceRow } from '$lib/types.js';
|
||||
|
||||
export interface UpdateData {
|
||||
shares: number;
|
||||
costBasis: number;
|
||||
type: string;
|
||||
source: string;
|
||||
}
|
||||
|
||||
let {
|
||||
rows,
|
||||
onUpdate,
|
||||
onDelete,
|
||||
}: {
|
||||
rows: AdviceRow[];
|
||||
onUpdate: (ticker: string, data: UpdateData) => void;
|
||||
onDelete: (ticker: string) => void;
|
||||
} = $props();
|
||||
|
||||
// ── Sort ──────────────────────────────────────────────────────────
|
||||
let sortCol = $state('ticker');
|
||||
let sortDir = $state(1);
|
||||
|
||||
function toggleSort(col: string) {
|
||||
if (sortCol === col) sortDir = sortDir === 1 ? -1 : 1;
|
||||
else { sortCol = col; sortDir = 1; }
|
||||
}
|
||||
|
||||
const sortIcon = (col: string) => sortCol !== col ? '⇅' : sortDir === 1 ? '↑' : '↓';
|
||||
|
||||
const sorted = $derived.by(() => [...rows].sort((a, b) => {
|
||||
let av: string | number, bv: string | number;
|
||||
switch (sortCol) {
|
||||
case 'ticker': av = a.ticker; bv = b.ticker; break;
|
||||
case 'type': av = a.type ?? ''; bv = b.type ?? ''; break;
|
||||
case 'shares': av = a.shares ?? 0; bv = b.shares ?? 0; break;
|
||||
case 'cost': av = a.costBasis ?? 0; bv = b.costBasis ?? 0; break;
|
||||
case 'current': av = parseFloat(a.currentPrice ?? '0') || 0; bv = parseFloat(b.currentPrice ?? '0') || 0; break;
|
||||
case 'value': av = parseFloat(a.marketValue ?? '0') || 0; bv = parseFloat(b.marketValue ?? '0') || 0; break;
|
||||
case 'gl': av = parseFloat(a.gainLossPct ?? '0') || 0; bv = parseFloat(b.gainLossPct ?? '0') || 0; break;
|
||||
case 'signal': av = sigOrd(a.signal); bv = sigOrd(b.signal); break;
|
||||
default: return 0;
|
||||
}
|
||||
return av < bv ? -sortDir : av > bv ? sortDir : 0;
|
||||
}));
|
||||
|
||||
// ── Totals ────────────────────────────────────────────────────────
|
||||
const totalValue = $derived(rows.reduce((s, a) => s + (parseFloat(a.marketValue ?? '0') || 0), 0));
|
||||
const totalCost = $derived(rows.reduce((s, a) => s + (a.costBasis ?? 0) * a.shares, 0));
|
||||
const totalGL = $derived(totalValue - totalCost);
|
||||
|
||||
// ── Inline edit ───────────────────────────────────────────────────
|
||||
interface InlineEdit { ticker: string; shares: string; costBasis: string; type: string; source: string }
|
||||
let editing: InlineEdit | null = $state(null);
|
||||
let saving = $state(false);
|
||||
|
||||
function startEdit(a: AdviceRow) {
|
||||
editing = {
|
||||
ticker: a.ticker,
|
||||
shares: String(a.shares),
|
||||
costBasis: String(a.costBasis ?? 0),
|
||||
type: a.type ?? 'stock',
|
||||
source: a.source ?? 'Robinhood',
|
||||
};
|
||||
}
|
||||
|
||||
async function saveEdit() {
|
||||
if (!editing) return;
|
||||
saving = true;
|
||||
onUpdate(editing.ticker, {
|
||||
shares: parseFloat(editing.shares),
|
||||
costBasis: parseFloat(editing.costBasis) || 0,
|
||||
type: editing.type,
|
||||
source: editing.source,
|
||||
});
|
||||
editing = null;
|
||||
saving = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- P&L Summary -->
|
||||
<div class="pnl-grid">
|
||||
<div class="pnl-card">
|
||||
<div class="pnl-label-row">
|
||||
<span class="pnl-label">Total Value</span>
|
||||
<span class="stip-wrap">
|
||||
<span class="stip-anchor">?</span>
|
||||
<span class="stip-box">Current market value of all holdings. Shares × live price from Yahoo Finance.</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="pnl-value">{fmtShort(totalValue)}</div>
|
||||
</div>
|
||||
<div class="pnl-card">
|
||||
<div class="pnl-label-row">
|
||||
<span class="pnl-label">Total Cost</span>
|
||||
<span class="stip-wrap">
|
||||
<span class="stip-anchor">?</span>
|
||||
<span class="stip-box">Total amount invested — sum of cost basis × shares across all positions.</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="pnl-value">{fmtShort(totalCost)}</div>
|
||||
</div>
|
||||
<div class="pnl-card">
|
||||
<div class="pnl-label-row">
|
||||
<span class="pnl-label">Total G/L</span>
|
||||
<span class="stip-wrap">
|
||||
<span class="stip-anchor">?</span>
|
||||
<span class="stip-box">Total unrealised gain or loss — Total Value minus Total Cost.</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="pnl-value {totalGL >= 0 ? 'green' : 'red'}">{fmtShort(totalGL)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Holdings table -->
|
||||
<section class="advice-section">
|
||||
<h2>Holdings — Hold / Sell / Add Advice</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sortable" onclick={() => toggleSort('ticker')}>Ticker {sortIcon('ticker')}</th>
|
||||
<th class="sortable" onclick={() => toggleSort('type')}>Type {sortIcon('type')}</th>
|
||||
<th class="sortable" onclick={() => toggleSort('shares')}>Shares {sortIcon('shares')}</th>
|
||||
<th class="sortable" onclick={() => toggleSort('cost')}>Cost {sortIcon('cost')}</th>
|
||||
<th class="sortable" onclick={() => toggleSort('current')}>Current {sortIcon('current')}</th>
|
||||
<th class="sortable" onclick={() => toggleSort('value')}>Value {sortIcon('value')}</th>
|
||||
<th class="sortable" onclick={() => toggleSort('gl')}>G/L {sortIcon('gl')}</th>
|
||||
<th class="sortable" onclick={() => toggleSort('signal')}>Signal {sortIcon('signal')}</th>
|
||||
<th>Advice</th><th>Reason</th><th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each sorted as a}
|
||||
{@const isEditing = editing?.ticker === a.ticker}
|
||||
<tr class:editing={isEditing}>
|
||||
<td class="ticker">{a.ticker}</td>
|
||||
<td>
|
||||
{#if isEditing && editing}
|
||||
<select class="inline-select" bind:value={editing.type}>
|
||||
<option value="stock">stock</option>
|
||||
<option value="etf">etf</option>
|
||||
<option value="bond">bond</option>
|
||||
<option value="crypto">crypto</option>
|
||||
</select>
|
||||
{:else}
|
||||
<span class="tag">{a.type}</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="num">
|
||||
{#if isEditing && editing}
|
||||
<input class="inline-input" bind:value={editing.shares} type="number" min="0" step="any" />
|
||||
{:else}
|
||||
{a.shares}
|
||||
{/if}
|
||||
</td>
|
||||
<td class="num">
|
||||
{#if isEditing && editing}
|
||||
<input class="inline-input" bind:value={editing.costBasis} type="number" min="0" step="any" />
|
||||
{:else}
|
||||
{fmt(a.costBasis)}
|
||||
{/if}
|
||||
</td>
|
||||
<td class="num">{fmt(a.currentPrice != null ? parseFloat(a.currentPrice) : null)}</td>
|
||||
<td class="num">{fmt(a.marketValue != null ? parseFloat(a.marketValue) : null)}</td>
|
||||
<td class="num {glClass(a.gainLossPct)}">{a.gainLossPct != null ? a.gainLossPct + '%' : '—'}</td>
|
||||
<td>{#if a.signal}<SignalBadge signal={a.signal} />{:else}<span class="gray">—</span>{/if}</td>
|
||||
<td class={advClass(a.advice)}>{a.advice}</td>
|
||||
<td class="reason">{a.reason}</td>
|
||||
<td class="advice-row-actions">
|
||||
{#if isEditing}
|
||||
<button class="btn-save-inline" onclick={saveEdit} disabled={saving}>{saving ? '…' : '✓'}</button>
|
||||
<button class="btn-cancel-inline" onclick={() => editing = null}>✕</button>
|
||||
{:else}
|
||||
<button class="btn-row-edit" onclick={() => startEdit(a)} title="Edit">✎</button>
|
||||
<button class="btn-row-delete" onclick={() => onDelete(a.ticker)} title="Remove">✕</button>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
import { addHolding, removeHolding } from '$lib/api.js';
|
||||
import type { MarketContext, AdviceRow, PersonalFinance, HoldingFormData } from '$lib/types.js';
|
||||
|
||||
interface PortfolioData {
|
||||
advice: AdviceRow[];
|
||||
marketContext: MarketContext | null;
|
||||
personalFinance: PersonalFinance | null;
|
||||
}
|
||||
|
||||
class PortfolioStore {
|
||||
// ── State ──────────────────────────────────────────────────────────
|
||||
data = $state<PortfolioData | null>(null);
|
||||
loading = $state(true);
|
||||
refreshing = $state(false);
|
||||
loadError = $state<string | null>(null);
|
||||
formOpen = $state(false);
|
||||
saving = $state(false);
|
||||
formError = $state<string | null>(null);
|
||||
|
||||
// ── Fetch ──────────────────────────────────────────────────────────
|
||||
fetch(showFullSpinner = false): void {
|
||||
if (showFullSpinner) this.loading = true;
|
||||
else this.refreshing = true;
|
||||
this.loadError = null;
|
||||
|
||||
window
|
||||
.fetch('/api/finance/portfolio')
|
||||
.then((res) =>
|
||||
res.ok
|
||||
? res.json()
|
||||
: res.text().then((t) => {
|
||||
throw new Error(t);
|
||||
}),
|
||||
)
|
||||
.then((json: PortfolioData) => {
|
||||
this.data = json;
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
this.loadError = e.message;
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
this.refreshing = false;
|
||||
});
|
||||
}
|
||||
|
||||
// ── Add holding ────────────────────────────────────────────────────
|
||||
async add(formData: HoldingFormData): Promise<void> {
|
||||
this.formError = null;
|
||||
this.saving = true;
|
||||
try {
|
||||
await addHolding(formData);
|
||||
// Optimistic: insert placeholder row immediately
|
||||
const exists = this.data?.advice?.find((a) => a.ticker === formData.ticker);
|
||||
if (this.data?.advice && !exists) {
|
||||
this.data = {
|
||||
...this.data,
|
||||
advice: [
|
||||
...this.data.advice,
|
||||
{
|
||||
ticker: formData.ticker,
|
||||
shares: formData.shares,
|
||||
costBasis: formData.costBasis,
|
||||
type: formData.type,
|
||||
source: formData.source,
|
||||
currentPrice: null,
|
||||
marketValue: null,
|
||||
gainLossPct: null,
|
||||
signal: null,
|
||||
advice: '⏳ Fetching…',
|
||||
reason: 'Screener data loading in background.',
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
this.formOpen = false;
|
||||
this.fetch(false);
|
||||
} catch (e) {
|
||||
this.formError = (e as Error).message;
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Update holding ─────────────────────────────────────────────────
|
||||
async update(
|
||||
ticker: string,
|
||||
updated: { shares: number; costBasis: number; type: string; source: string },
|
||||
): Promise<void> {
|
||||
try {
|
||||
await addHolding({ ticker, ...updated, type: updated.type as HoldingFormData['type'] });
|
||||
if (this.data?.advice) {
|
||||
this.data = {
|
||||
...this.data,
|
||||
advice: this.data.advice.map((a) =>
|
||||
a.ticker === ticker
|
||||
? {
|
||||
...a,
|
||||
...updated,
|
||||
marketValue: String(updated.shares * (parseFloat(a.currentPrice ?? '0') || 0)),
|
||||
gainLossPct: a.currentPrice
|
||||
? (
|
||||
((parseFloat(a.currentPrice) - updated.costBasis) / updated.costBasis) *
|
||||
100
|
||||
).toFixed(1)
|
||||
: null,
|
||||
}
|
||||
: a,
|
||||
),
|
||||
};
|
||||
}
|
||||
this.fetch(false);
|
||||
} catch (e) {
|
||||
this.loadError = (e as Error).message;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Delete holding ─────────────────────────────────────────────────
|
||||
async remove(ticker: string): Promise<void> {
|
||||
if (!confirm(`Remove ${ticker} from your portfolio?`)) return;
|
||||
if (this.data?.advice) {
|
||||
this.data = { ...this.data, advice: this.data.advice.filter((a) => a.ticker !== ticker) };
|
||||
}
|
||||
try {
|
||||
await removeHolding(ticker);
|
||||
this.fetch(false);
|
||||
} catch (e) {
|
||||
this.loadError = (e as Error).message;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Form helpers ───────────────────────────────────────────────────
|
||||
openForm(): void {
|
||||
this.formOpen = true;
|
||||
this.formError = null;
|
||||
}
|
||||
closeForm(): void {
|
||||
this.formOpen = false;
|
||||
this.formError = null;
|
||||
}
|
||||
}
|
||||
|
||||
export const portfolioStore = new PortfolioStore();
|
||||
export type { PortfolioData };
|
||||
@@ -0,0 +1,91 @@
|
||||
import { fetchCatalysts, screenTickers, analyzeTickers } from '$lib/api.js';
|
||||
import { sorted } from '$lib/utils.js';
|
||||
import type { ScreenerResult, AssetType, SidebarState } from '$lib/types.js';
|
||||
|
||||
class ScreenerStore {
|
||||
// ── State ──────────────────────────────────────────────────────────
|
||||
input = $state('');
|
||||
results = $state<ScreenerResult | null>(null);
|
||||
screenedAt = $state('');
|
||||
loading = $state(false);
|
||||
loadingCats = $state(false);
|
||||
error = $state<string | null>(null);
|
||||
sidebar = $state<SidebarState>({
|
||||
open: false,
|
||||
loading: false,
|
||||
analysis: null,
|
||||
type: null,
|
||||
error: null,
|
||||
});
|
||||
|
||||
// ── Derived ────────────────────────────────────────────────────────
|
||||
ctx = $derived(this.results?.marketContext ?? null);
|
||||
|
||||
allAssets = $derived(
|
||||
this.results ? sorted([...this.results.STOCK, ...this.results.ETF, ...this.results.BOND]) : [],
|
||||
);
|
||||
|
||||
// ── Actions ────────────────────────────────────────────────────────
|
||||
async screen(): Promise<void> {
|
||||
this.error = null;
|
||||
this.loading = true;
|
||||
try {
|
||||
const tickers = this.input
|
||||
.split(/[\s,]+/)
|
||||
.map((t) => t.trim().toUpperCase())
|
||||
.filter(Boolean);
|
||||
this.results = await screenTickers(tickers);
|
||||
this.screenedAt = new Date().toLocaleTimeString();
|
||||
} catch (e) {
|
||||
this.error = (e as Error).message;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async reloadCatalysts(): Promise<void> {
|
||||
this.loadingCats = true;
|
||||
this.error = null;
|
||||
try {
|
||||
const cat = await fetchCatalysts();
|
||||
this.input = cat.tickers.join(', ');
|
||||
this.results = await screenTickers(cat.tickers);
|
||||
this.screenedAt = new Date().toLocaleTimeString();
|
||||
} catch (e) {
|
||||
this.error = (e as Error).message;
|
||||
} finally {
|
||||
this.loadingCats = false;
|
||||
}
|
||||
}
|
||||
|
||||
async runTabAnalysis(type: AssetType): Promise<void> {
|
||||
const tickers = (this.results?.[type] ?? []).map((r) => r.asset.ticker);
|
||||
if (!tickers.length) return;
|
||||
this.sidebar = { open: true, loading: true, analysis: null, type, error: null };
|
||||
try {
|
||||
const res = await analyzeTickers(tickers);
|
||||
const reason = res.reason === 'no_stories' ? 'No recent news found for these tickers.' : null;
|
||||
this.sidebar = {
|
||||
open: true,
|
||||
loading: false,
|
||||
analysis: res.analysis,
|
||||
type,
|
||||
error: res.analysis ? null : (reason ?? 'Analysis failed — check server logs for details.'),
|
||||
};
|
||||
} catch (e) {
|
||||
this.sidebar = {
|
||||
open: true,
|
||||
loading: false,
|
||||
analysis: null,
|
||||
type,
|
||||
error: (e as Error).message,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
closeSidebar(): void {
|
||||
this.sidebar = { ...this.sidebar, open: false };
|
||||
}
|
||||
}
|
||||
|
||||
export const screenerStore = new ScreenerStore();
|
||||
+126
-95
@@ -1,88 +1,100 @@
|
||||
// ── Shared UI types ───────────────────────────────────────────────────────
|
||||
// Mirror of the server's domain types, used across Svelte components.
|
||||
// ── UI type layer ─────────────────────────────────────────────────────────
|
||||
// Shared domain types are imported from the server's canonical model files
|
||||
// via the $types alias (→ server/types/). Only UI-specific types live here.
|
||||
//
|
||||
// All consumers should import from '$lib/types.js' as before — nothing changes
|
||||
// at the call site.
|
||||
|
||||
export type Signal =
|
||||
| '✅ Strong Buy'
|
||||
| '⚡ Momentum'
|
||||
| '⚠️ Speculation'
|
||||
| '🔄 Neutral'
|
||||
| '❌ Avoid';
|
||||
// ── Re-export shared domain types ────────────────────────────────────────
|
||||
export type {
|
||||
Signal,
|
||||
AssetType,
|
||||
ScoreMode,
|
||||
ScoreResult,
|
||||
AssetResult,
|
||||
ScreenerResult,
|
||||
} from '$types/asset.model.js';
|
||||
|
||||
export type AssetType = 'STOCK' | 'ETF' | 'BOND';
|
||||
export type ScoreMode = 'inflated' | 'fundamental';
|
||||
export type {
|
||||
RateRegime,
|
||||
VolatilityRegime,
|
||||
Benchmarks,
|
||||
MarketContext,
|
||||
} from '$types/market.model.js';
|
||||
|
||||
export interface Benchmarks {
|
||||
marketPE: number | null;
|
||||
techPE: number | null;
|
||||
reitYield: number | null;
|
||||
igSpread: number | null;
|
||||
}
|
||||
export type { HoldingType, PortfolioHolding, PortfolioAdvice } from '$types/portfolio.model.js';
|
||||
|
||||
export interface MarketContext {
|
||||
sp500Price: number | null;
|
||||
riskFreeRate: number | null;
|
||||
vixLevel: number | null;
|
||||
rateRegime: 'HIGH' | 'NORMAL' | 'LOW';
|
||||
volatilityRegime: 'HIGH' | 'NORMAL' | 'LOW';
|
||||
benchmarks: Benchmarks;
|
||||
}
|
||||
export type { TickerSnapshot, MarketCall } from '$types/calls.model.js';
|
||||
|
||||
export interface ScoreResult {
|
||||
label: string;
|
||||
score: number;
|
||||
scoreSummary: string;
|
||||
audit: {
|
||||
riskFlags?: string[];
|
||||
[key: string]: unknown;
|
||||
};
|
||||
}
|
||||
export type { LLMAnalysis, CatalystStory, CalendarEvent } from '$types/finance.model.js';
|
||||
|
||||
// ── UI-only types (not on the server) ────────────────────────────────────
|
||||
|
||||
import type { AssetType } from '$types/asset.model.js';
|
||||
import type { LLMAnalysis } from '$types/finance.model.js';
|
||||
|
||||
/** Detailed display metrics rendered per asset row in the screener table. */
|
||||
export interface AssetDisplayMetrics {
|
||||
// ── Common ──────────────────────────────────────────────────────────
|
||||
Price?: string;
|
||||
|
||||
// ── Stock: classification ────────────────────────────────────────────
|
||||
Sector?: string;
|
||||
'Cap Tier'?: string; // Mega Cap / Large Cap / Mid Cap / Small Cap / Micro Cap
|
||||
Style?: string; // High Growth / Growth / Stable / Value / Turnaround / Declining
|
||||
|
||||
// ── Stock: valuation ─────────────────────────────────────────────────
|
||||
'P/E'?: string;
|
||||
PEG?: string;
|
||||
'P/B'?: string;
|
||||
|
||||
// ── Stock: quality ───────────────────────────────────────────────────
|
||||
'GrossM%'?: string; // gross margin — key for tech/software moat
|
||||
'ROE%'?: string;
|
||||
'OpMgn%'?: string;
|
||||
'NetMgn%'?: string;
|
||||
'FCF Yld%'?: string;
|
||||
'Div%'?: string;
|
||||
|
||||
// ── Stock: risk ───────────────────────────────────────────────────────
|
||||
'D/E'?: string;
|
||||
Quick?: string;
|
||||
Beta?: string;
|
||||
|
||||
// ── Stock: 52-week movement ───────────────────────────────────────────
|
||||
'52W Pos'?: string; // % position within the 52-week range
|
||||
'52W Chg'?: string; // total price return over last 52 weeks (signed %)
|
||||
'From High'?: string; // % below 52-week high (negative = drawdown)
|
||||
'From Low'?: string; // % above 52-week low (positive = recovery)
|
||||
|
||||
// ── Stock: analyst consensus ──────────────────────────────────────────
|
||||
Analyst?: string; // Strong Buy / Buy / Hold / Sell / Strong Sell
|
||||
'# Analysts'?: string;
|
||||
Target?: string; // analyst consensus price target
|
||||
Upside?: string; // % upside to analyst target (signed %)
|
||||
|
||||
// ── Stock: DCF intrinsic value ────────────────────────────────────────
|
||||
'DCF Value'?: string; // intrinsic value per share
|
||||
'DCF Safety'?: string; // margin of safety % (positive = undervalued)
|
||||
|
||||
// ── Stock: REIT-specific ──────────────────────────────────────────────
|
||||
'P/FFO'?: string;
|
||||
|
||||
// ── ETF ───────────────────────────────────────────────────────────────
|
||||
'Exp Ratio%'?: string;
|
||||
'Yield%'?: string;
|
||||
AUM?: string;
|
||||
'5Y Return%'?: string;
|
||||
|
||||
// ── Bond ──────────────────────────────────────────────────────────────
|
||||
'YTM%'?: string;
|
||||
Duration?: string;
|
||||
Rating?: string;
|
||||
|
||||
[key: string]: string | null | undefined;
|
||||
}
|
||||
|
||||
export interface AssetResult {
|
||||
asset: {
|
||||
ticker: string;
|
||||
currentPrice: number;
|
||||
type: AssetType;
|
||||
displayMetrics: AssetDisplayMetrics;
|
||||
};
|
||||
signal: Signal;
|
||||
inflated: ScoreResult;
|
||||
fundamental: ScoreResult;
|
||||
}
|
||||
|
||||
export interface ScreenerResult {
|
||||
STOCK: AssetResult[];
|
||||
ETF: AssetResult[];
|
||||
BOND: AssetResult[];
|
||||
ERROR: Array<{ ticker: string; message: string }>;
|
||||
marketContext: MarketContext;
|
||||
}
|
||||
|
||||
export interface LLMAnalysis {
|
||||
summary: string;
|
||||
sentiment: 'BULLISH' | 'BEARISH' | 'NEUTRAL';
|
||||
affectedIndustries: Array<{ name: string; reason: string }>;
|
||||
relatedTickers: Array<{ ticker: string; reason: string }>;
|
||||
}
|
||||
|
||||
/** State object for the LLM analysis slide-over sidebar. */
|
||||
export interface SidebarState {
|
||||
open: boolean;
|
||||
loading: boolean;
|
||||
@@ -91,49 +103,68 @@ export interface SidebarState {
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
export interface PortfolioHolding {
|
||||
/** Transient state for inline row editing in the portfolio table. */
|
||||
export interface InlineEdit {
|
||||
ticker: string;
|
||||
shares: string;
|
||||
costBasis: string;
|
||||
type: string;
|
||||
source: string;
|
||||
}
|
||||
|
||||
// ── Portfolio component types ─────────────────────────────────────────────
|
||||
|
||||
import type { Signal } from '$types/asset.model.js';
|
||||
|
||||
/** A single row in the portfolio advice table. */
|
||||
export 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;
|
||||
}
|
||||
|
||||
/** Form data for adding or updating a holding. */
|
||||
export interface HoldingFormData {
|
||||
ticker: string;
|
||||
shares: number;
|
||||
costBasis: number;
|
||||
source: string;
|
||||
type: 'stock' | 'etf' | 'bond' | 'crypto';
|
||||
source: string;
|
||||
}
|
||||
|
||||
export interface TickerSnapshot {
|
||||
price: number | null;
|
||||
signal: Signal | null;
|
||||
interface SimpleFINAccount {
|
||||
name: string;
|
||||
type: string;
|
||||
org: string;
|
||||
balance: number;
|
||||
}
|
||||
|
||||
export interface MarketCall {
|
||||
id: string;
|
||||
title: string;
|
||||
quarter: string;
|
||||
date: string;
|
||||
thesis: string;
|
||||
tickers: string[];
|
||||
snapshot: Record<string, TickerSnapshot>;
|
||||
interface CategoryBreakdown {
|
||||
category: string;
|
||||
amount: number;
|
||||
pct: number;
|
||||
}
|
||||
|
||||
export interface CalendarEvent {
|
||||
ticker: string;
|
||||
type: 'earnings' | 'dividend';
|
||||
date: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export interface CatalystStory {
|
||||
title: string;
|
||||
link: string;
|
||||
publisher: string;
|
||||
publishedAt: string;
|
||||
relatedTickers: string[];
|
||||
}
|
||||
|
||||
export interface PortfolioAdvice {
|
||||
ticker: string;
|
||||
action: 'hold' | 'sell' | 'add' | 'watch';
|
||||
reason: string;
|
||||
signal: Signal | null;
|
||||
currentPrice: number | null;
|
||||
gainLossPct: number | null;
|
||||
/** Personal finance summary from SimpleFIN. */
|
||||
export interface PersonalFinance {
|
||||
netWorth: number;
|
||||
totalAssets: number;
|
||||
totalLiabilities: number;
|
||||
totalCash: number;
|
||||
totalInvestments: number;
|
||||
totalIncome: number;
|
||||
totalSpend: number;
|
||||
cashPct: number;
|
||||
investPct: number;
|
||||
savingsRate: string | null;
|
||||
accounts: SimpleFINAccount[];
|
||||
categoryBreakdown: CategoryBreakdown[];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user