56 lines
5.0 KiB
HTML
56 lines
5.0 KiB
HTML
<!doctype html><html><head><meta charset="utf-8"><title>Sketch 1 – Portfolio overview</title><link rel="stylesheet" href="sketch.css"></head><body>
|
||
<div class="app">
|
||
<div class="topbar sk">
|
||
<div class="brand">Portfolio Intelligence Platform <small>thin dashboard · no business logic · calls the API</small></div>
|
||
<span class="pill ok">Market API: live</span>
|
||
<span class="pill err">LLM API: circuit OPEN</span>
|
||
<div class="nav"><span class="active">Portfolio</span><span>Market data</span><span>News & Insights</span><span>Advisor</span><span>Optimisation</span><span>System</span></div>
|
||
</div>
|
||
|
||
<div class="banner err">⚠ News insights and the advisor are <b>paused</b>: the LLM API circuit breaker opened at 09:12 (3 timeouts). All figures below are computed by deterministic services and are <b>unaffected</b>.</div>
|
||
|
||
<h1 class="page">Portfolio "Student Fund 01" <span class="small">· CHF 100 000 nominal · 6 positions</span></h1>
|
||
<div class="sub">Analysis as of last completed ingestion: <b>2026-09-07 06:00</b> (snapshot) · positions from <b>PortfolioService</b> · prices from <b>MarketDataService</b></div>
|
||
|
||
<div class="kpis">
|
||
<div class="kpi sk"><div class="l">Cumulative return (YTD)</div><div class="v">+12.4 %</div><div class="s">PerformanceService</div></div>
|
||
<div class="kpi sk"><div class="l">Sharpe ratio (1y)</div><div class="v">1.08</div><div class="s">PerformanceService</div></div>
|
||
<div class="kpi sk"><div class="l">Volatility (annualised)</div><div class="v">18.2 %</div><div class="s">RiskService</div></div>
|
||
<div class="kpi sk"><div class="l">Value-at-Risk 95 % / 1 day</div><div class="v">−2.7 %</div><div class="s">RiskService</div></div>
|
||
</div>
|
||
|
||
<div class="grid" style="grid-template-columns: 1.55fr 1fr; margin-top: 12px;">
|
||
<div class="card sk">
|
||
<h3>Holdings <span class="src">PortfolioService · PerformanceService</span></h3>
|
||
<table class="sk-table">
|
||
<tr><th>Ticker</th><th>Name</th><th>Sector</th><th class="num">Qty</th><th class="num">Price</th><th class="num">Weight</th><th class="num">1d</th></tr>
|
||
<tr><td>NVDA</td><td>NVIDIA</td><td>Semiconductors</td><td class="num">120</td><td class="num">184.10</td><td class="num">22.1 %</td><td class="num">+1.9 %</td></tr>
|
||
<tr><td>ASML</td><td>ASML Holding</td><td>Semiconductors</td><td class="num">18</td><td class="num">742.30</td><td class="num">13.4 %</td><td class="num">+3.2 %</td></tr>
|
||
<tr><td>NESN</td><td>Nestlé</td><td>Consumer staples</td><td class="num">210</td><td class="num">86.40</td><td class="num">18.1 %</td><td class="num">−0.4 %</td></tr>
|
||
<tr><td>ROG</td><td>Roche</td><td>Healthcare</td><td class="num">60</td><td class="num">268.90</td><td class="num">16.1 %</td><td class="num">+0.6 %</td></tr>
|
||
<tr><td>MSFT</td><td>Microsoft</td><td>Software</td><td class="num">45</td><td class="num">412.70</td><td class="num">18.6 %</td><td class="num">+0.8 %</td></tr>
|
||
<tr><td>CASH</td><td>CHF cash</td><td>—</td><td class="num">—</td><td class="num">—</td><td class="num">11.7 %</td><td class="num">0.0 %</td></tr>
|
||
</table>
|
||
<div class="small" style="margin-top:6px">Sector concentration: Semiconductors <b>35.5 %</b> (RiskService) · <span class="tag neu">exposure by sector →</span></div>
|
||
</div>
|
||
<div class="card sk">
|
||
<h3>Portfolio value, 12 months <span class="src">chart of PerformanceService output</span></h3>
|
||
<div style="height:170px">
|
||
<svg class="chart" viewBox="0 0 420 170">
|
||
<line class="axis" x1="30" y1="150" x2="410" y2="150"/><line class="axis" x1="30" y1="10" x2="30" y2="150"/>
|
||
<line class="grid" x1="30" y1="100" x2="410" y2="100"/><line class="grid" x1="30" y1="50" x2="410" y2="50"/>
|
||
<path class="fill" d="M30 120 L70 118 L110 126 L150 110 L190 112 L230 96 L270 102 L310 84 L350 90 L390 70 L405 66 L405 150 L30 150 Z"/>
|
||
<path d="M30 120 L70 118 L110 126 L150 110 L190 112 L230 96 L270 102 L310 84 L350 90 L390 70 L405 66"/>
|
||
<text x="34" y="20">CHF 115k</text><text x="34" y="146">CHF 95k</text><text x="300" y="165">months →</text>
|
||
</svg>
|
||
</div>
|
||
<div class="small">Latest validated insights (3) — see News & Insights: <span class="tag pos">ASML guidance ↑</span><span class="tag neg">NESN recall</span><span class="tag neu">ROG trial data</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note" style="left: 560px; top: 118px;"><b>1</b>Graceful degradation (§4.2): when the LLM or a data API is down, deterministic analysis still works and the UI says so.</div>
|
||
<div class="note r" style="left: 1060px; top: 250px;"><b>2</b>Every figure names the deterministic service that computed it (§2.3) — agents never compute numbers.</div>
|
||
<div class="note" style="left: 40px; top: 690px;"><b>3</b>Freshness stamp: "as of last completed ingestion" — the advisor may never claim fresher data.</div>
|
||
<div class="watermark">SKETCH 1/7 · wireframe, not a specification</div>
|
||
</div></body></html>
|