AISE502/project_exercise/ui_sketches/05_optimisation.html

58 lines
5.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html><head><meta charset="utf-8"><title>Sketch 5 – Risk and optimisation</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 ok">LLM API: closed (healthy)</span>
<div class="nav"><span>Portfolio</span><span>Market data</span><span>News &amp; Insights</span><span>Advisor</span><span class="active">Optimisation</span><span>System</span></div>
</div>
<h1 class="page">Risk &amp; optimisation <span class="small">· deterministic: same input → same output · pinned by reference test vectors</span></h1>
<div class="grid" style="grid-template-columns: 0.9fr 1.3fr 1fr;">
<div class="card sk">
<h3>Parameters <span class="src">OptimizationService</span></h3>
<div class="small">Objective</div><div class="input" style="width:100%">mean–variance (Markowitz)</div>
<div class="small" style="margin-top:6px">Risk target (annual vol)</div><div class="input" style="width:100%">16 %</div>
<div class="small" style="margin-top:6px">Max weight per asset</div><div class="input" style="width:100%">25 %</div>
<div class="small" style="margin-top:6px">Max weight per sector</div><div class="input" style="width:100%">25 %</div>
<div class="small" style="margin-top:6px">Constraints</div><div class="input" style="width:100%">long-only · fully invested</div>
<div class="small" style="margin-top:6px">Price history</div><div class="input" style="width:100%">1y · as of 2026-09-07 06:00</div>
<div style="margin-top:12px"><span class="btn primary">Run optimisation</span></div>
<div class="small" style="margin-top:10px">Tests: <span class="pill ok">42/42 reference vectors pass</span></div>
</div>
<div class="card sk">
<h3>Efficient frontier <span class="src">RiskService · OptimizationService</span></h3>
<div style="height:300px">
<svg class="chart" viewBox="0 0 520 300">
<line class="axis" x1="45" y1="270" x2="505" y2="270"/><line class="axis" x1="45" y1="15" x2="45" y2="270"/>
<path d="M120 240 C 150 150, 220 100, 330 70 S 470 40, 500 38"/>
<circle cx="330" cy="150" r="6" fill="#a83a2e"/><text x="340" y="154" style="fill:#a83a2e">current (18.2 %, 8.1 %)</text>
<circle cx="255" cy="104" r="6" fill="#3f7d4e"/><text x="120" y="98" style="fill:#3f7d4e">proposed (15.9 %, 7.5 %)</text>
<line x1="255" y1="104" x2="330" y2="150" stroke="#7a7a7a" stroke-dasharray="4 4"/>
<text x="400" y="290">volatility →</text><text x="50" y="28">return ↑</text>
</svg>
</div>
<div class="small">Frontier and both points computed by the services; the chart only draws their output.</div>
</div>
<div class="card sk">
<h3>Allocation: current → proposed <span class="src">OptimizationService</span></h3>
<table class="sk-table">
<tr><th>Asset</th><th class="num">Now</th><th class="num">Proposed</th><th></th></tr>
<tr><td>NVDA</td><td class="num">22.1 %</td><td class="num">15.0 %</td><td><div class="bar warn" style="width:70px"><i style="width:60%"></i></div></td></tr>
<tr><td>ASML</td><td class="num">13.4 %</td><td class="num">10.0 %</td><td><div class="bar warn" style="width:70px"><i style="width:40%"></i></div></td></tr>
<tr><td>NESN</td><td class="num">18.1 %</td><td class="num">18.0 %</td><td><div class="bar" style="width:70px"><i style="width:72%"></i></div></td></tr>
<tr><td>ROG</td><td class="num">16.1 %</td><td class="num">18.0 %</td><td><div class="bar" style="width:70px"><i style="width:72%"></i></div></td></tr>
<tr><td>MSFT</td><td class="num">18.6 %</td><td class="num">21.0 %</td><td><div class="bar" style="width:70px"><i style="width:84%"></i></div></td></tr>
<tr><td>Cash</td><td class="num">11.7 %</td><td class="num">18.0 %</td><td><div class="bar" style="width:70px"><i style="width:72%"></i></div></td></tr>
</table>
<h3 style="margin-top:12px">Explanation <span class="src">OptimizationAgent</span></h3>
<p class="small" style="margin:4px 0">"The proposal trims the two semiconductor names to respect the 25 % sector cap, which removes most of the concentration risk; expected return falls by 0.6 pp while volatility falls by 2.3 pp. The cash weight is a by-product of the caps, not a market view."</p>
<div class="small">Figures quoted from the service output · no number originates in the agent.</div>
</div>
</div>
<div class="note" style="left: 330px; top: 96px;"><b>1</b>Performance, Risk, Optimization services are pure and deterministic; exact tests against the provided reference vectors (§2.3, §4.3).</div>
<div class="note r" style="left: 1040px; top: 600px;"><b>2</b>Agents explain the numbers; the OptimizationAgent calls OptimizationService and never computes an allocation itself (§2.5).</div>
<div class="watermark">SKETCH 5/7 · wireframe, not a specification</div>
</div></body></html>