49 lines
4.6 KiB
HTML
49 lines
4.6 KiB
HTML
<!doctype html><html><head><meta charset="utf-8"><title>Sketch 0 – Users and journey</title><link rel="stylesheet" href="sketch.css">
|
||
<style>
|
||
.step { padding: 10px 12px; text-align: center; }
|
||
.step .n { display:inline-block; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; line-height: 26px; font-weight: bold; margin-bottom: 4px; }
|
||
.step h4 { margin: 2px 0 4px 0; font-size: 15px; }
|
||
.step p { margin: 0; font-size: 12.5px; color: var(--ink-light); }
|
||
.step .svc { font-size: 11px; color: var(--accent); margin-top: 4px; }
|
||
.persona { padding: 10px 12px; }
|
||
.persona h4 { margin: 0 0 4px 0; }
|
||
.flow { display: grid; grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr; align-items: center; gap: 4px; }
|
||
.arr { text-align: center; font-size: 28px; color: var(--ink-light); }
|
||
.degraded { border-style: dashed; background: #fff3d6; }
|
||
</style></head><body>
|
||
<div class="app">
|
||
<div class="topbar sk"><div class="brand">Portfolio Intelligence Platform <small>who uses it, and the path through one working day</small></div>
|
||
<div class="nav"><span class="active">Users & journey</span></div></div>
|
||
|
||
<h1 class="page">Three users, one system</h1>
|
||
<div class="grid" style="grid-template-columns: 1fr 1fr 1fr;">
|
||
<div class="persona sk"><h4>👩💼 Portfolio analyst <span class="small">(primary)</span></h4><p class="small" style="margin:0">Checks the portfolio every morning, reads what the news means for her positions, asks the advisor for an explained view, reviews an optimisation proposal. Wants numbers she can trust and explanations she can check.</p></div>
|
||
<div class="persona sk"><h4>🧑⚖️ Compliance reviewer</h4><p class="small" style="margin:0">Needs every claim traceable: which news item, which model, which prompt version, which service computed the figure. Reads the audit trail, never the chat.</p></div>
|
||
<div class="persona sk"><h4>🧑💻 Developer / operator <span class="small">(you)</span></h4><p class="small" style="margin:0">Keeps the deterministic core green, watches cost and latency budgets, opens circuit breakers before the demo does, gates every prompt change with the eval harness.</p></div>
|
||
</div>
|
||
|
||
<h1 class="page" style="margin-top:14px">The analyst's journey <span class="small">· each step maps to a screen and to the services behind it</span></h1>
|
||
<div class="flow">
|
||
<div class="step sk"><div class="n">1</div><h4>Open the portfolio</h4><p>holdings, weights, return, Sharpe, volatility, VaR</p><div class="svc">PortfolioService · Performance · Risk</div></div>
|
||
<div class="arr">→</div>
|
||
<div class="step sk"><div class="n">2</div><h4>Check market data</h4><p>live prices — or the snapshot, clearly marked</p><div class="svc">MarketDataService (+ cache fallback)</div></div>
|
||
<div class="arr">→</div>
|
||
<div class="step sk"><div class="n">3</div><h4>Read the insights</h4><p>news → validated Insight: sentiment, tickers, event type</p><div class="svc">NewsIngestion · ResearchAgent · ontology guard</div></div>
|
||
<div class="arr">→</div>
|
||
<div class="step sk"><div class="n">4</div><h4>Ask the advisor</h4><p>explained, cited answer; numbers from services</p><div class="svc">AdvisorAgent · Risk/OptimizationAgent · gateway</div></div>
|
||
<div class="arr">→</div>
|
||
<div class="step sk"><div class="n">5</div><h4>Review the proposal</h4><p>allocation, frontier, caveats; decide herself</p><div class="svc">OptimizationService · OptimizationAgent</div></div>
|
||
</div>
|
||
|
||
<div class="grid" style="grid-template-columns: 1fr 1fr; margin-top: 14px;">
|
||
<div class="card sk degraded"><h3>The same day when the LLM API is down</h3>
|
||
<p class="small" style="margin:2px 0">Steps 1, 2 and 5 work unchanged (deterministic). Step 3 shows the last completed ingestion with a "paused" banner; step 4 says "advisor unavailable — here are your figures". Nothing is silently missing, nothing is invented.</p></div>
|
||
<div class="card sk"><h3>What the reviewer sees behind step 4</h3>
|
||
<p class="small" style="margin:2px 0">request id → agent trace → each LLM call (prompt version, model, tokens, latency) → guard verdicts → cited Insight ids → the service calls that produced every number. Exportable as an audit record.</p></div>
|
||
</div>
|
||
|
||
<div class="note" style="left: 40px; top: 545px;"><b>1</b>API-first: every screen only calls the HTTP/JSON API; the dashboard holds no business logic (§2.6).</div>
|
||
<div class="note r" style="left: 470px; top: 545px;"><b>2</b>Degrade gracefully and say so in the UI (§4.2) — the demo will hit a failing API.</div>
|
||
<div class="watermark">SKETCH 0/7 · wireframe, not a specification</div>
|
||
</div></body></html>
|