npm - @savvly/mcp-server - Versions diffs - 1.0.5 → 1.0.19 - Mend

@savvly/mcp-server 1.0.5 → 1.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/cli.js CHANGED Viewed

@@ -21704,7 +21704,915 @@ var PRODUCT_COMPARISON = {
 var VALID_PRODUCT_TYPES = COMPARISONS.map((c) => c.product_type);
 // ../../src/mcp/version.ts
-var SERVER_VERSION = "1.0.5";
+var SERVER_VERSION = "1.0.19";
+// ../../src/mcp/ui/payout-chart.ts
+var PAYOUT_UI_URI = "ui://savvly/payout-chart.html";
+var PAYOUT_CHART_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Savvly payout projection</title>
+<style>
+  html,body { margin:0; padding:0; background:transparent;
+    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#111827; }
+  body.dark { color:#e5e7eb; }
+  .wrap { padding:12px 14px; }
+  h1 { font-size:15px; font-weight:600; margin:0 0 2px; }
+  .legend { font-size:12px; display:flex; gap:16px; margin:0 0 6px; align-items:center; flex-wrap:wrap; }
+  .legend span { display:inline-flex; align-items:center; gap:6px; }
+  .sw { width:11px; height:11px; border-radius:2px; display:inline-block; }
+  /* Editable assumptions form \u2014 left column; chart fills the same height on the right */
+  .layout { display:flex; gap:14px; align-items:flex-start; margin:8px 0 4px; }
+  .chartwrap { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
+  /* chartwrap height is set in JS (render) to the sidebar height; #chart flex-grows
+     to fill the space below the legend, and the SVG fills #chart. The SVG is drawn
+     at #chart's measured px size (viewBox == box) so it maps 1:1 (crisp). */
+  #chart { flex:1 1 auto; min-height:170px; display:flex; }
+  #chart svg { width:100%; height:100%; display:block; }
+  .controls { flex:0 0 180px; display:flex; flex-direction:column; gap:17px;
+    padding:13px 12px; border:1px solid rgba(0,0,0,.09); border-radius:8px; background:rgba(52,120,235,.04); }
+  body.dark .controls { border-color:rgba(255,255,255,.14); background:rgba(52,120,235,.08); }
+  .controls:empty { display:none; }
+  .controls.busy { opacity:.5; pointer-events:none; }
+  /* The mode fields render inside #fldwrap, so the gap must live here too (the
+     parent .controls gap only spaces toggle \u2194 fields \u2194 button). Same value so
+     every input label gets equal padding above it. */
+  #fldwrap { display:flex; flex-direction:column; gap:17px; }
+  /* Narrow widgets (e.g. a tight side panel): stack the form above the chart. */
+  @media (max-width:430px){ .layout{flex-direction:column;} .controls{flex:0 0 auto;} #chart{min-height:0; flex:0 0 auto;} #chart svg{height:auto;} }
+  .fld { display:flex; flex-direction:column; gap:3px; min-width:0; }
+  .fld label { font-size:11px; opacity:.75; font-weight:500; }
+  .fld input { font:inherit; font-size:13px; padding:5px 8px; border-radius:6px; box-sizing:border-box; width:100%;
+    border:1.5px solid rgba(52,120,235,.3); background:#fff; color:#111827; }
+  body.dark .fld input { background:#1f2937; color:#e5e7eb; border-color:rgba(52,120,235,.5); }
+  .fld input:focus { outline:none; border-color:#3478eb; box-shadow:0 0 0 3px rgba(52,120,235,.18); }
+  /* Secondary selector \u2014 deliberately lighter than the solid-blue Update button:
+     tinted "on" state, smaller + lighter weight, thinner border. */
+  .seg { display:flex; flex-direction:column; gap:5px; }
+  .seg button { font:inherit; font-size:11.5px; font-weight:500; padding:5px 8px; border-radius:6px; cursor:pointer;
+    border:1px solid rgba(52,120,235,.25); background:#fff; color:#6b7280; text-align:center; }
+  body.dark .seg button { background:#1f2937; color:#9ca3af; border-color:rgba(255,255,255,.18); }
+  .seg button.on { background:rgba(52,120,235,.12); color:#3478eb; border-color:rgba(52,120,235,.55); font-weight:600; }
+  body.dark .seg button.on { background:rgba(52,120,235,.22); color:#9bbcf2; border-color:rgba(52,120,235,.6); }
+  .seg button:focus { outline:none; box-shadow:0 0 0 3px rgba(52,120,235,.18); }
+  .fld.act { justify-content:flex-end; gap:0; }
+  button#go { font:inherit; font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:6px; cursor:pointer;
+    border:1.5px solid #3478eb; background:#3478eb; color:#fff; width:100%; }
+  button#go:hover { background:#2f6cd6; }
+  button#go:focus { outline:none; box-shadow:0 0 0 3px rgba(52,120,235,.25); }
+  .status { font-size:11px; color:#3478eb; min-height:0; }
+  .assume { font-size:11.5px; opacity:.85; margin:12px 0 0; line-height:1.5; }
+  .assume:empty { display:none; }
+  .disc { font-size:10.5px; opacity:.7; margin:8px 0 0; line-height:1.45; }
+  .disc a { color:#3478eb; }
+  svg { width:100%; height:auto; display:block; }
+  .empty { font-size:13px; opacity:.6; padding:24px 0; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <h1>Savvly Payout Projection</h1>
+  <div class="layout">
+    <form class="controls" id="frm"></form>
+    <div class="chartwrap">
+      <div class="legend">
+        <span><i class="sw" style="background:#3478eb"></i>With Savvly</span>
+        <span><i class="sw" style="background:#c7c3c1"></i>Market Alone</span>
+      </div>
+      <div id="chart"><p class="empty">Loading projection\u2026</p></div>
+    </div>
+  </div>
+  <p class="assume" id="assume"></p>
+  <p class="disc" id="disc"></p>
+</div>
+<script>
+(function(){
+  "use strict";
+  var SAVVLY = "#3478eb", BASE = "#c7c3c1";
+  var lastSC = null, lastChartW = -1;
+  function post(msg){ try { window.parent.postMessage(msg, "*"); } catch(e){} }
+  function usd(n){ if(n==null||isNaN(n)) return "n/a";
+    return new Intl.NumberFormat("en-US",{style:"currency",currency:"USD",maximumFractionDigits:0}).format(n); }
+  // $0 / $750K / $1.3M \u2014 thousands end in K, millions in M (matches the retirement chart).
+  function usdK(n){ if(n==null||isNaN(n)) return ""; if(n===0) return "$0";
+    if(n>=1e6) return "$"+(n/1e6).toFixed(1).replace(/\\.0$/,"")+"M";
+    if(n>=1e3) return "$"+(n/1e3).toFixed(1).replace(/\\.0$/,"")+"K";
+    return "$"+Math.round(n); }
+  function esc(s){ return String(s==null?"":s).replace(/[&<>]/g,function(c){return c==="&"?"&amp;":c==="<"?"&lt;":"&gt;";}); }
+  // Rounded y-axis step (~6 gridlines) at a 1/2/2.5/5 x 10^n value, so ticks land
+  // on equal round units ($1M, $2M, \u2026) instead of yMax/5 (which gave $828K, $1.7M\u2026).
+  function niceStep(range, ticks){
+    if(!(range>0)) return 10000;
+    var raw=range/ticks, mag=Math.pow(10,Math.floor(Math.log10(raw))), n=raw/mag;
+    return (n<=1?1:n<=2?2:n<=2.5?2.5:n<=5?5:10)*mag;
+  }
+  // Bar value labels: whole numbers only \u2014 no decimals on the thousands ($586K,
+  // not $585.9K). Millions keep one decimal so adjacent bars stay distinguishable.
+  function usdBar(n){ if(n==null||isNaN(n)) return "$0"; if(n===0) return "$0";
+    if(n>=1e6) return "$"+(n/1e6).toFixed(1).replace(/\\.0$/,"")+"M";
+    if(n>=1e3) return "$"+Math.round(n/1e3)+"K";
+    return "$"+Math.round(n); }
+  // One plain-English sentence naming the inputs that AREN'T editable in the
+  // form. Lump-sum exposes every input, so it has none. Monthly's only hidden
+  // input is the optional annual contribution increase (shown when present).
+  function assumptions(inputs){
+    if(inputs.monthly_amount!=null && inputs.installment_increase_percentage!=null)
+      return "Also assumes a "+inputs.installment_increase_percentage+"% annual increase in monthly contributions.";
+    return "";
+  }
+  // ---- editable assumptions form (re-runs the tool via the host) ----
+  // Two shapes share this widget: lump-sum (funding_amount) and monthly
+  // (monthly_amount + contribution_years). Monthly exposes "Retirement age" and
+  // derives contribution_years = retirement_age \u2212 current_age on submit (the
+  // schema has no retirement_age field). __ret is the synthetic derived field.
+  var LUMP=[
+    ["pf_age","current_age","Current Age",'min="25" max="79" step="any"'],
+    ["pf_amount","funding_amount","Investment Amount ($)",'min="100" step="any"'],
+    ["pf_return","average_return","S&P 500 Return (%)",'min="1" max="15" step="any"']
+  ];
+  var MONTHLY=[
+    ["pf_age","current_age","Current Age",'min="25" max="79" step="any"'],
+    ["pf_monthly","monthly_amount","Monthly Deposit ($)",'min="10" step="any"'],
+    ["pf_ret","__ret","Retirement Age",'min="26" max="80" step="any"'],
+    ["pf_return","average_return","S&P 500 Return (%)",'min="1" max="15" step="any"']
+  ];
+  // Projection-type toggle (the first input). Switches which tool re-runs.
+  var SEG=[["monthly","Monthly Deposit"],["lumpsum","Single Upfront Deposit"]];
+  var mode=null, fields=null, formBuilt=false, statusTimer=null, pinH=0;
+  function elv(id){ return document.getElementById(id); }
+  function numOr(id,fb){ var el=elv(id); if(!el) return fb; var v=el.value; if(v===""||v==null) return fb; var n=Number(v); return isFinite(n)?n:fb; }
+  function detectMode(inputs){ if(!inputs) return null; if(inputs.funding_amount!=null) return "lumpsum"; if(inputs.monthly_amount!=null) return "monthly"; return null; }
+  function setStatus(msg,sticky){ var s=elv("status"); if(!s) return; s.textContent=msg||"";
+    if(statusTimer){ clearTimeout(statusTimer); statusTimer=null; }
+    if(msg && !sticky){ statusTimer=setTimeout(function(){ var s2=elv("status"); if(s2) s2.textContent=""; },2600); } }
+  function setBusy(b){ var f=elv("frm"); if(f){ if(b) f.classList.add("busy"); else f.classList.remove("busy"); } var g=elv("go"); if(g) g.disabled=!!b; }
+  // (Re)build the mode-specific fields into #fldwrap and sync the toggle highlight.
+  function renderFields(){
+    fields = mode==="lumpsum" ? LUMP : MONTHLY;
+    var w=elv("fldwrap"); if(!w) return; var h="",i;
+    for(i=0;i<fields.length;i++){ var sp=fields[i];
+      h+='<div class="fld"><label for="'+sp[0]+'">'+sp[2]+'</label><input id="'+sp[0]+'" type="number" '+sp[3]+' inputmode="numeric" /></div>'; }
+    w.innerHTML=h;
+    var bs=document.querySelectorAll("#seg button"),j;
+    for(j=0;j<bs.length;j++){ if(bs[j].getAttribute("data-m")===mode) bs[j].className="on"; else bs[j].className=""; }
+  }
+  function switchMode(m){
+    if(!m || m===mode) return;
+    // carry the shared assumptions across the switch; default the mode-specific ones
+    var age=Math.round(numOr("pf_age",40)), ret=numOr("pf_return",8);
+    mode=m; renderFields();
+    if(elv("pf_age")) elv("pf_age").value=age;
+    if(elv("pf_return")) elv("pf_return").value=ret;
+    if(mode==="lumpsum"){ if(elv("pf_amount")) elv("pf_amount").value=10000; }
+    else { if(elv("pf_monthly")) elv("pf_monthly").value=100; if(elv("pf_ret")) elv("pf_ret").value=age+27; }
+    recalc();
+  }
+  function buildForm(inputs){
+    if(formBuilt) return; mode=detectMode(inputs); if(!mode) return;
+    var f=elv("frm"); if(!f) return; var seg="",i;
+    for(i=0;i<SEG.length;i++){ seg+='<button type="button" data-m="'+SEG[i][0]+'">'+SEG[i][1]+'</button>'; }
+    f.innerHTML='<div class="fld"><label>Projection Type</label><div class="seg" id="seg">'+seg+'</div></div>'
+      +'<div id="fldwrap"></div>'
+      +'<div class="fld act"><button type="submit" id="go">Update Projection</button><span class="status" id="status"></span></div>';
+    formBuilt=true;
+    renderFields();
+    reserveHeight();
+    f.addEventListener("submit",function(e){ e.preventDefault(); recalc(); });
+    var bs=document.querySelectorAll("#seg button"),j;
+    for(j=0;j<bs.length;j++){ (function(btn){ btn.addEventListener("click",function(){ switchMode(btn.getAttribute("data-m")); }); })(bs[j]); }
+  }
+  // Pin the sidebar to the TALLER monthly layout so the toggle doesn't resize it
+  // (the chart matches via align-items:stretch). Measure by SUMMING children +
+  // gaps + padding so we get the form's true content height \u2014 not the height the
+  // flex row has stretched #frm to (which baked in phantom slack). Removing the
+  // Withdrawal Age field naturally shrinks this measured height.
+  function reserveHeight(){
+    var f=elv("frm"); if(!f) return;
+    var save=mode;
+    f.style.height=""; f.style.minHeight="";   // clear so offsetHeight is the CONTENT height
+    mode="monthly"; renderFields();
+    var h=f.offsetHeight;                       // true monthly content (.layout is align-items:flex-start \u2192 no stretch)
+    mode=save; renderFields();
+    // Pin to the tallest (monthly) content so the sidebar doesn't resize on toggle;
+    // lump-sum shows the one-field difference as space below the button. minHeight
+    // (not height) so it can never clip if a font/zoom makes content slightly taller.
+    if(h>0){ pinH=Math.ceil(h); f.style.minHeight=pinH+"px"; }
+  }
+  function fillForm(inputs){ if(!fields) return; for(var i=0;i<fields.length;i++){ var sp=fields[i],el=elv(sp[0]);
+    if(!el||el===document.activeElement) continue;
+    if(sp[1]==="__ret"){ if(inputs.current_age!=null && inputs.contribution_years!=null) el.value=inputs.current_age+inputs.contribution_years; }
+    else { var v=inputs[sp[1]]; if(v!=null) el.value=v; } } }
+  // Build the tool args from the FORM (not lastSC) so a mode switch sends correct
+  // args even though the prior result was the other tool. Falls back to lastSC /
+  // schema defaults for any blank field.
+  function recalc(){
+    if(!mode) return;
+    var base=(lastSC && lastSC.inputs) || {};
+    var age=Math.max(25,Math.min(79,Math.round(numOr("pf_age", base.current_age!=null?base.current_age:40))));
+    var ret=Math.max(1,Math.min(15,Math.round(numOr("pf_return", base.average_return!=null?base.average_return:8))));
+    var args, tool;
+    if(mode==="lumpsum"){
+      args={ current_age:age, average_return:ret,
+        funding_amount:Math.max(100,numOr("pf_amount", base.funding_amount!=null?base.funding_amount:10000)) };
+      tool="project_savvly_lumpsum";
+    } else {
+      var retage=Math.round(numOr("pf_ret", age+(base.contribution_years!=null?base.contribution_years:27)));
+      args={ current_age:age, average_return:ret,
+        monthly_amount:Math.max(10,numOr("pf_monthly", base.monthly_amount!=null?base.monthly_amount:100)),
+        contribution_years:Math.max(1,Math.min(55, retage-age)) }; // schema has years, not retirement age
+      if(base.installment_increase_percentage!=null) args.installment_increase_percentage=base.installment_increase_percentage;
+      tool="project_savvly_monthly";
+    }
+    // Withdrawal age has no UI field \u2014 carry whatever the tool last used (its
+    // default when unset) so re-runs don't reset it.
+    if(base.withdrawal_age!=null) args.withdrawal_age=base.withdrawal_age;
+    setBusy(true); // dim the form while re-running; no "Updating\u2026" label
+    callTool(tool,args).then(function(res){
+      var nsc=(res && res.structuredContent) || parseContent(res);
+      if(nsc && nsc.result){ lastSC=nsc; render(); setStatus(""); }
+      else setStatus("No update returned");
+    }).catch(function(){ setStatus("Update failed \u2014 try again"); }).then(function(){ setBusy(false); });
+  }
+  function render(){
+    var sc = lastSC;
+    if(!sc || !sc.result || !Array.isArray(sc.result.payout_age_dependent_values)) return;
+    var rows = sc.result.payout_age_dependent_values;
+    document.getElementById("assume").textContent = assumptions(sc.inputs || {});
+    buildForm(sc.inputs);
+    if(sc.inputs) fillForm(sc.inputs);
+    var dark = document.body.classList.contains("dark");
+    var FG = dark ? "#e5e7eb" : "#111827";
+    var MUTED = dark ? "#9ca3af" : "#6b7280";
+    var GRID = dark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.08)";
+    // Draw at the chart container's ACTUAL pixel size so the SVG maps 1:1 \u2014 it
+    // fills the (fixed) sidebar height AND keeps text crisp at the stated px
+    // sizes (no preserveAspectRatio stretch, which was squishing the numbers).
+    var box = document.getElementById("chart");
+    var lay = document.querySelector(".layout");
+    var cw = document.querySelector(".chartwrap");
+    var rowMode = !!(lay && getComputedStyle(lay).flexDirection==="row");
+    // Pin the whole visualization block (legend + chart) to the sidebar's ACTUAL
+    // rendered height (robust even if pinH and the real content drift), then draw
+    // the SVG at the chart area's ACTUAL pixel size so it maps 1:1 (crisp, fills).
+    var frm = elv("frm");
+    if(cw) cw.style.height = (rowMode && frm) ? Math.round(frm.getBoundingClientRect().height)+"px" : "";
+    var W = Math.max(360, Math.round((box && box.clientWidth) || 560));
+    var H = Math.max(170, Math.round((box && box.clientHeight) || (rowMode ? 320 : W*0.62)));
+    lastChartW = W;
+    var padL=62, padR=18, padT=18, padB=46;
+    var plotW=W-padL-padR, plotH=H-padT-padB;
+    var peak=0, i;
+    for(i=0;i<rows.length;i++){ if((rows[i].savvly_payout_upper||0)>peak) peak=rows[i].savvly_payout_upper; }
+    var yStep=niceStep(peak,6);            // rounded, equal tick spacing ($1M, $200K, \u2026)
+    var yMax=Math.max(peak*1.08, yStep);   // headroom above the tallest bar for its value label
+    function y(v){ return padT+plotH-((v||0)/yMax)*plotH; }
+    // Tight blue+gray PAIR (small intra-gap) with a wider gap BETWEEN age groups,
+    // so each age reads as one group. between-group (~0.36\xB7groupW) >> intra (0.12).
+    var n=rows.length, groupW=plotW/Math.max(n,1), barW=groupW*0.26, gap=groupW*0.12;
+    var s=[];
+    s.push('<svg width="'+W+'" height="'+H+'" viewBox="0 0 '+W+' '+H+'" role="img" aria-label="Savvly payouts by milestone age">');
+    for(var g=0; g<=yMax+1; g+=yStep){
+      var gy=y(g);
+      s.push('<line x1="'+padL+'" y1="'+gy.toFixed(1)+'" x2="'+(W-padR)+'" y2="'+gy.toFixed(1)+'" stroke="'+GRID+'"/>');
+      s.push('<text x="'+(padL-8)+'" y="'+(gy+4).toFixed(1)+'" font-size="12" fill="'+MUTED+'" text-anchor="end">'+usdK(g)+'</text>');
+    }
+    for(var j=0;j<n;j++){
+      var r=rows[j];
+      var cx=padL+j*groupW+groupW/2;
+      var x1=cx-barW-gap/2, x2=cx+gap/2;
+      var sv=r.savvly_payout_upper||0, mk=r.payout_market_alone_upper||0;
+      s.push('<rect x="'+x1.toFixed(1)+'" y="'+y(sv).toFixed(1)+'" width="'+barW.toFixed(1)+'" height="'+(plotH-(y(sv)-padT)).toFixed(1)+'" rx="2" fill="'+SAVVLY+'"/>');
+      s.push('<rect x="'+x2.toFixed(1)+'" y="'+y(mk).toFixed(1)+'" width="'+barW.toFixed(1)+'" height="'+(plotH-(y(mk)-padT)).toFixed(1)+'" rx="2" fill="'+BASE+'"/>');
+      s.push('<text x="'+(x1+barW/2).toFixed(1)+'" y="'+(y(sv)-7).toFixed(1)+'" font-size="12" fill="'+SAVVLY+'" text-anchor="middle" font-weight="600">'+usdBar(sv)+'</text>');
+      s.push('<text x="'+(x2+barW/2).toFixed(1)+'" y="'+(y(mk)-7).toFixed(1)+'" font-size="12" fill="'+MUTED+'" text-anchor="middle">'+usdBar(mk)+'</text>');
+      s.push('<text x="'+cx.toFixed(1)+'" y="'+(H-padB+24).toFixed(1)+'" font-size="13" fill="'+FG+'" text-anchor="middle" font-weight="600">Age '+r.payout_age+'</text>');
+    }
+    s.push('</svg>');
+    document.getElementById("chart").innerHTML = s.join("");
+    var d = sc.disclosure || {};
+    if(d.text){
+      document.getElementById("disc").innerHTML =
+        esc(d.text) + (d.url ? ' <a href="'+esc(d.url)+'" target="_blank" rel="noopener">'+esc(d.url)+'</a>' : "");
+    }
+  }
+  // app -> host tool call (promise over JSON-RPC), used by the editable form to
+  // re-run the projection live. Same pattern as compare-chart.ts.
+  var rpcId=2, pending={};
+  function callTool(name,args){ return new Promise(function(resolve,reject){
+    var id=rpcId++; pending[id]={resolve:resolve,reject:reject};
+    post({ jsonrpc:"2.0", id:id, method:"tools/call", params:{ name:name, arguments:args } });
+    setTimeout(function(){ if(pending[id]){ delete pending[id]; reject(new Error("timeout")); } },20000);
+  }); }
+  function parseContent(res){ try{ var c=res&&res.content&&res.content[0]; return c&&c.text?JSON.parse(c.text):null; }catch(e){ return null; } }
+  var INIT_ID = 1;
+  window.addEventListener("message", function(ev){
+    var m = ev && ev.data; if(!m || m.jsonrpc!=="2.0") return;
+    if(m.id===INIT_ID && m.result){
+      var ctx = m.result.hostContext || {};
+      if(ctx.theme==="dark") document.body.classList.add("dark"); else document.body.classList.remove("dark");
+      post({ jsonrpc:"2.0", method:"ui/notifications/initialized", params:{} });
+      render();
+      return;
+    }
+    if(m.id===INIT_ID && m.error){ var le=document.getElementById("chart"); if(le) le.innerHTML='<p class="empty">Chart unavailable (init error '+((m.error&&m.error.code)||"")+').</p>'; return; }
+    if(m.id && (m.result||m.error) && pending[m.id]){
+      var p=pending[m.id]; delete pending[m.id];
+      if(m.error) p.reject(new Error((m.error&&m.error.message)||"tool error")); else p.resolve(m.result);
+      return;
+    }
+    if(!m.id && m.method==="ui/notifications/tool-result"){
+      lastSC = (m.params || {}).structuredContent || null;
+      render();
+    }
+    if(!m.id && m.method==="ui/notifications/host-context-changed"){
+      var c2 = (m.params || {}).hostContext || {};
+      if(c2.theme==="dark") document.body.classList.add("dark"); else document.body.classList.remove("dark");
+      render();
+    }
+  });
+  // Report content size so the host sizes the iframe to fit (flexible maxHeight
+  // mode) \u2014 without this the host uses a tiny default height and the widget scrolls.
+  function sendSize(){ try{ post({ jsonrpc:"2.0", method:"ui/notifications/size-changed", params:{ width:Math.ceil(document.documentElement.scrollWidth), height:Math.ceil(document.documentElement.scrollHeight) } }); }catch(e){} }
+  if(window.ResizeObserver){ new ResizeObserver(function(){ sendSize();
+    // Width changed \u2192 redraw so the chart re-measures and stays 1:1 (crisp).
+    var box=document.getElementById("chart");
+    if(box && lastSC && Math.abs((box.clientWidth||0)-lastChartW)>2) render();
+  }).observe(document.body); }
+  post({ jsonrpc:"2.0", id:INIT_ID, method:"ui/initialize", params:{
+    protocolVersion:"2026-01-26",
+    appInfo:{ name:"savvly-payout-chart", version:"1.0.0" },
+    capabilities:{},
+    appCapabilities:{ availableDisplayModes:["inline"] }
+  }});
+})();
+</script>
+</body>
+</html>`;
+// ../../src/mcp/ui/retirement-chart.ts
+var RETIREMENT_UI_URI = "ui://savvly/retirement-chart.html";
+var MCP_APP_MIME_TYPE = "text/html;profile=mcp-app";
+var RETIREMENT_CHART_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Savvly retirement projection</title>
+<style>
+  html,body { margin:0; padding:0; background:transparent;
+    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#111827; }
+  body.dark { color:#e5e7eb; }
+  .wrap { padding:12px 14px; }
+  h1 { font-size:15px; font-weight:600; margin:0 0 2px; }
+  .legend { font-size:12px; display:flex; gap:16px; margin:0 0 6px; align-items:center; flex-wrap:wrap; }
+  .legend span { display:inline-flex; align-items:center; gap:6px; }
+  .sw { width:20px; height:11px; border-radius:2px; display:inline-block; }
+  /* Editable assumptions form \u2014 left column; chart fills the same height on the right */
+  .layout { display:flex; gap:14px; align-items:flex-start; margin:8px 0 4px; }
+  .chartwrap { flex:1 1 auto; min-width:0; }
+  .controls { flex:0 0 180px; display:flex; flex-direction:column; gap:9px;
+    padding:11px 12px; border:1px solid rgba(0,0,0,.09); border-radius:8px; background:rgba(52,120,235,.04); }
+  body.dark .controls { border-color:rgba(255,255,255,.14); background:rgba(52,120,235,.08); }
+  .controls.busy { opacity:.5; pointer-events:none; }
+  /* Narrow widgets (e.g. a tight side panel): stack the form above the chart. */
+  @media (max-width:430px){ .layout{flex-direction:column;} .controls{flex:0 0 auto;} }
+  .fld { display:flex; flex-direction:column; gap:3px; min-width:0; }
+  .fld label { font-size:11px; opacity:.75; font-weight:500; }
+  .fld input { font:inherit; font-size:13px; padding:5px 8px; border-radius:6px; box-sizing:border-box; width:100%;
+    border:1.5px solid rgba(52,120,235,.3); background:#fff; color:#111827; }
+  body.dark .fld input { background:#1f2937; color:#e5e7eb; border-color:rgba(52,120,235,.5); }
+  .fld input:focus { outline:none; border-color:#3478eb; box-shadow:0 0 0 3px rgba(52,120,235,.18); }
+  .fld.act { justify-content:flex-end; gap:0; }
+  button#go { font:inherit; font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:6px; cursor:pointer;
+    border:1.5px solid #3478eb; background:#3478eb; color:#fff; width:100%; }
+  button#go:hover { background:#2f6cd6; }
+  button#go:focus { outline:none; box-shadow:0 0 0 3px rgba(52,120,235,.25); }
+  .status { font-size:11px; color:#3478eb; min-height:0; }
+  .disc { font-size:10.5px; opacity:.7; margin:12px 0 0; line-height:1.45; }
+  .disc a { color:#3478eb; }
+  svg { width:100%; height:auto; display:block; }
+  .empty { font-size:13px; opacity:.6; padding:24px 0; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <h1>Retirement Forecast</h1>
+  <div class="layout">
+    <form class="controls" id="frm">
+      <div class="fld"><label for="f_age">Current Age</label><input id="f_age" type="number" min="25" max="79" step="any" inputmode="numeric" /></div>
+      <div class="fld"><label for="f_savings">Current Savings ($)</label><input id="f_savings" type="number" min="0" step="any" inputmode="numeric" /></div>
+      <div class="fld"><label for="f_contrib">Monthly Contribution ($)</label><input id="f_contrib" type="number" min="0" step="any" inputmode="numeric" /></div>
+      <div class="fld"><label for="f_paycheck">Retirement Paycheck ($/mo)</label><input id="f_paycheck" type="number" min="0" step="any" inputmode="numeric" /></div>
+      <div class="fld"><label for="f_other">Other Income ($/mo \xB7 Optional)</label><input id="f_other" type="number" min="0" step="any" inputmode="numeric" placeholder="0" /></div>
+      <div class="fld act"><button type="submit" id="go">Update Forecast</button><span class="status" id="status"></span></div>
+    </form>
+    <div class="chartwrap">
+      <div class="legend">
+        <span><i class="sw" style="background:#c7c3c1"></i>Current Retirement Forecast</span>
+        <span><i class="sw" style="background:#3478eb"></i>With a Longevity Solution in the Portfolio</span>
+      </div>
+      <div id="chart"><p class="empty">Loading projection\u2026</p></div>
+    </div>
+  </div>
+  <p class="disc" id="disc"></p>
+</div>
+<script>
+(function(){
+  "use strict";
+  var SAVVLY = "#3478eb";
+  var lastSC = null;
+  function post(msg){ try { window.parent.postMessage(msg, "*"); } catch(e){} }
+  function esc(s){ return String(s==null?"":s).replace(/[&<>]/g,function(c){return c==="&"?"&amp;":c==="<"?"&lt;":"&gt;";}); }
+  // Mirrors estimator_web's nFormatter: $ 0 / $250K / $1M / $1.3M / $1.5M.
+  function nfmt(num){ if(num>=1e9) return (num/1e9).toFixed(1).replace(/\\.0$/,"")+"G";
+    if(num>=1e6) return (num/1e6).toFixed(1).replace(/\\.0$/,"")+"M";
+    if(num>=1e3) return (num/1e3).toFixed(1).replace(/\\.0$/,"")+"K";
+    return Number(num).toFixed(1).replace(/\\.0$/,""); }
+  function axisUsd(n){ return n===0 ? "$ 0" : "$"+nfmt(n); }
+  // Rounded y-axis step (~6 gridlines) at a 1/2/2.5/5 x 10^n value, so the axis
+  // stays legible whether the peak is $2M or $30M. A fixed step crammed 100+
+  // overlapping labels once monthly contributions pushed the peak high.
+  function niceStep(range, ticks){
+    if(!(range>0)) return 10000;
+    var raw=range/ticks, mag=Math.pow(10,Math.floor(Math.log10(raw))), n=raw/mag;
+    return (n<=1?1:n<=2?2:n<=2.5?2.5:n<=5?5:10)*mag;
+  }
+  // ---- editable assumptions form (re-runs the tool via the host) ----
+  var FIELDS=[
+    ["f_age","current_age"],["f_savings","current_retirement_savings"],
+    ["f_contrib","monthly_contribution"],["f_paycheck","monthly_paycheck"],
+    ["f_other","other_retirement_income"]
+  ];
+  var formBuilt=false, statusTimer=null;
+  function elv(id){ return document.getElementById(id); }
+  function numOr(id,fb){ var el=elv(id); if(!el) return fb; var v=el.value; if(v===""||v==null) return fb; var n=Number(v); return isFinite(n)?n:fb; }
+  function setStatus(msg,sticky){ var s=elv("status"); if(!s) return; s.textContent=msg||"";
+    if(statusTimer){ clearTimeout(statusTimer); statusTimer=null; }
+    if(msg && !sticky){ statusTimer=setTimeout(function(){ var s2=elv("status"); if(s2) s2.textContent=""; },2600); } }
+  function setBusy(b){ var f=elv("frm"); if(f){ if(b) f.classList.add("busy"); else f.classList.remove("busy"); } var g=elv("go"); if(g) g.disabled=!!b; }
+  function buildForm(){ if(formBuilt) return; var f=elv("frm"); if(!f) return; formBuilt=true;
+    f.addEventListener("submit",function(e){ e.preventDefault(); recalc(); }); }
+  // Prefill inputs from the current tool result; never clobber the field the user is editing.
+  function fillForm(inputs){ for(var i=0;i<FIELDS.length;i++){ var el=elv(FIELDS[i][0]); if(!el||el===document.activeElement) continue;
+    var v=inputs[FIELDS[i][1]]; if(v!=null) el.value=v; } }
+  function recalc(){
+    var base=(lastSC && lastSC.inputs) || null; if(!base) return;
+    // Copy ALL 13 inputs forward so untouched assumptions (retirement_age,
+    // returns, % in Savvly, \u2026) are preserved, then override the 5 editable ones.
+    var merged={},k; for(k in base){ if(Object.prototype.hasOwnProperty.call(base,k)) merged[k]=base[k]; }
+    merged.current_age=Math.max(25,Math.min(79,Math.round(numOr("f_age",base.current_age))));
+    merged.current_retirement_savings=Math.max(0,numOr("f_savings",base.current_retirement_savings));
+    merged.monthly_contribution=Math.max(0,numOr("f_contrib",base.monthly_contribution));
+    merged.monthly_paycheck=Math.max(0,numOr("f_paycheck",base.monthly_paycheck));
+    merged.other_retirement_income=Math.max(0,numOr("f_other",0)); // optional \u2192 blank means none
+    setBusy(true); // dim the form while re-running; no "Updating\u2026" label
+    callTool("project_retirement_with_savvly",merged).then(function(res){
+      var nsc=(res && res.structuredContent) || parseContent(res);
+      if(nsc && nsc.result){ lastSC=nsc; render(); setStatus(""); }
+      else setStatus("No update returned");
+    }).catch(function(){ setStatus("Update failed \u2014 try again"); }).then(function(){ setBusy(false); });
+  }
+  function render(){
+    var sc = lastSC;
+    if(!sc || !sc.result || !Array.isArray(sc.result.age_dependent_values)) return;
+    var rows = sc.result.age_dependent_values;
+    if(!rows.length) return;
+    buildForm();
+    if(sc.inputs) fillForm(sc.inputs);
+    var dark = document.body.classList.contains("dark");
+    var FG = dark ? "#e5e7eb" : "#111827";
+    var MUTED = dark ? "#9ca3af" : "#6b7280";
+    var GRID = dark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.08)";
+    var GRAYFILL = "#c7c3c1"; // "Current Retirement Forecast" (estimator_web GRAPH_NEGATIVE_DATA)
+    var WITH = "retirement_savings_with_savvly_in_the_portfolio";
+    var WO = "retirement_savings_without_savvly_in_the_portfolio";
+    var W=640, H=360, padL=64, padR=16, padT=16, padB=40;
+    var plotW=W-padL-padR, plotH=H-padT-padB;
+    var i, peak=0;
+    for(i=0;i<rows.length;i++){ var a=rows[i][WITH]||0, b=rows[i][WO]||0; if(a>peak)peak=a; if(b>peak)peak=b; }
+    var yStep = niceStep(peak, 6);            // rounded tick spacing, scales with the peak
+    var yMax = Math.max(peak * 1.04, yStep);  // a little headroom above the data
+    var xMin = rows[0].age, xMax = rows[rows.length-1].age, xDen=(xMax-xMin)||1;
+    function x(age){ return padL + (age-xMin)/xDen*plotW; }
+    function y(v){ return padT+plotH-((v||0)/yMax)*plotH; }
+    var baseY=(padT+plotH).toFixed(1);
+    function P(f){ var a=[],k; for(k=0;k<rows.length;k++) a.push({x:x(rows[k].age),y:y(rows[k][f])}); return a; }
+    function cl(v){ return v<padT?padT:(v>padT+plotH?padT+plotH:v); }
+    // Chart.js splineCurve (cardinal spline) control points at tension 0.4.
+    function ctrl(pts){ var c=[],i; for(i=0;i<pts.length;i++){ var p0=pts[i-1]||pts[i],p1=pts[i],p2=pts[i+1]||pts[i];
+      var d01=Math.hypot(p1.x-p0.x,p1.y-p0.y),d12=Math.hypot(p2.x-p1.x,p2.y-p1.y),sm=d01+d12,s01=sm?d01/sm:0,s12=sm?d12/sm:0,fa=0.4*s01,fb=0.4*s12;
+      c.push({pX:p1.x-fa*(p2.x-p0.x),pY:cl(p1.y-fa*(p2.y-p0.y)),nX:p1.x+fb*(p2.x-p0.x),nY:cl(p1.y+fb*(p2.y-p0.y))}); } return c; }
+    function smooth(pts){ if(pts.length<2) return ""; var c=ctrl(pts),d="M"+pts[0].x.toFixed(1)+","+pts[0].y.toFixed(1),i;
+      for(i=0;i<pts.length-1;i++){ d+=" C"+c[i].nX.toFixed(1)+","+c[i].nY.toFixed(1)+" "+c[i+1].pX.toFixed(1)+","+c[i+1].pY.toFixed(1)+" "+pts[i+1].x.toFixed(1)+","+pts[i+1].y.toFixed(1); } return d; }
+    function areaD(pts){ return smooth(pts)+" L"+pts[pts.length-1].x.toFixed(1)+","+baseY+" L"+pts[0].x.toFixed(1)+","+baseY+" Z"; }
+    var s=[];
+    s.push('<svg viewBox="0 0 '+W+' '+H+'" role="img" aria-label="Retirement forecast with vs without a longevity solution">');
+    for(var g=0; g<=yMax+1; g+=yStep){ var gy=y(g);
+      s.push('<line x1="'+padL+'" y1="'+gy.toFixed(1)+'" x2="'+(W-padR)+'" y2="'+gy.toFixed(1)+'" stroke="'+GRID+'"/>');
+      s.push('<text x="'+(padL-8)+'" y="'+(gy+4).toFixed(1)+'" font-size="10" fill="'+MUTED+'" text-anchor="end">'+axisUsd(g)+'</text>');
+    }
+    var a0=Math.ceil(xMin/5)*5; for(var ax=a0; ax<=xMax; ax+=5){
+      s.push('<text x="'+x(ax).toFixed(1)+'" y="'+(H-padB+18)+'" font-size="10" fill="'+FG+'" text-anchor="middle">'+ax+'</text>');
+    }
+    s.push('<text x="'+((padL+(W-padR))/2).toFixed(1)+'" y="'+(H-4)+'" font-size="11" fill="'+MUTED+'" text-anchor="middle">Age</text>');
+    // Tension-0.4 spline-smoothed filled areas, matching the estimator_web
+    // RetirementCalculator Chart.js config. Blue behind, gray on top (gray
+    // accumulation hump reads through; Savvly milestone-payout spikes emerge in
+    // blue as the traditional portfolio depletes); blue stroke traces with-Savvly.
+    var PW=P(WITH), PO=P(WO);
+    s.push('<path d="'+areaD(PW)+'" fill="'+SAVVLY+'"/>');
+    s.push('<path d="'+areaD(PO)+'" fill="'+GRAYFILL+'"/>');
+    s.push('<path d="'+smooth(PW)+'" fill="none" stroke="'+SAVVLY+'" stroke-width="2"/>');
+    s.push('</svg>');
+    document.getElementById("chart").innerHTML = s.join("");
+    var d = sc.disclosure || {};
+    if(d.text){
+      document.getElementById("disc").innerHTML =
+        esc(d.text) + (d.url ? ' <a href="'+esc(d.url)+'" target="_blank" rel="noopener">'+esc(d.url)+'</a>' : "");
+    }
+  }
+  // app -> host tool call (promise over JSON-RPC), used by the editable form to
+  // re-run the projection live. Same pattern as compare-chart.ts.
+  var rpcId=2, pending={};
+  function callTool(name,args){ return new Promise(function(resolve,reject){
+    var id=rpcId++; pending[id]={resolve:resolve,reject:reject};
+    post({ jsonrpc:"2.0", id:id, method:"tools/call", params:{ name:name, arguments:args } });
+    setTimeout(function(){ if(pending[id]){ delete pending[id]; reject(new Error("timeout")); } },20000);
+  }); }
+  function parseContent(res){ try{ var c=res&&res.content&&res.content[0]; return c&&c.text?JSON.parse(c.text):null; }catch(e){ return null; } }
+  var INIT_ID = 1;
+  window.addEventListener("message", function(ev){
+    var m = ev && ev.data; if(!m || m.jsonrpc!=="2.0") return;
+    if(m.id===INIT_ID && m.result){
+      var ctx = m.result.hostContext || {};
+      if(ctx.theme==="dark") document.body.classList.add("dark"); else document.body.classList.remove("dark");
+      post({ jsonrpc:"2.0", method:"ui/notifications/initialized", params:{} });
+      buildForm();
+      render();
+      return;
+    }
+    if(m.id===INIT_ID && m.error){ var le=document.getElementById("chart"); if(le) le.innerHTML='<p class="empty">Chart unavailable (init error '+((m.error&&m.error.code)||"")+').</p>'; return; }
+    if(m.id && (m.result||m.error) && pending[m.id]){
+      var p=pending[m.id]; delete pending[m.id];
+      if(m.error) p.reject(new Error((m.error&&m.error.message)||"tool error")); else p.resolve(m.result);
+      return;
+    }
+    if(!m.id && m.method==="ui/notifications/tool-result"){
+      lastSC = (m.params || {}).structuredContent || null;
+      render();
+    }
+    if(!m.id && m.method==="ui/notifications/host-context-changed"){
+      var c2 = (m.params || {}).hostContext || {};
+      if(c2.theme==="dark") document.body.classList.add("dark"); else document.body.classList.remove("dark");
+      render();
+    }
+  });
+  // Report content size so the host sizes the iframe to fit (flexible maxHeight
+  // mode) \u2014 without this the host uses a tiny default height and the widget scrolls.
+  function sendSize(){ try{ post({ jsonrpc:"2.0", method:"ui/notifications/size-changed", params:{ width:Math.ceil(document.documentElement.scrollWidth), height:Math.ceil(document.documentElement.scrollHeight) } }); }catch(e){} }
+  if(window.ResizeObserver){ new ResizeObserver(function(){ sendSize(); }).observe(document.body); }
+  post({ jsonrpc:"2.0", id:INIT_ID, method:"ui/initialize", params:{
+    protocolVersion:"2026-01-26",
+    appInfo:{ name:"savvly-retirement-chart", version:"1.0.0" },
+    capabilities:{},
+    appCapabilities:{ availableDisplayModes:["inline"] }
+  }});
+})();
+</script>
+</body>
+</html>`;
+// ../../src/mcp/ui/compare-chart.ts
+var COMPARE_UI_URI = "ui://savvly/compare-matrix.html";
+var COMPARE_MATRIX_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Savvly comparison</title>
+<style>
+  :root { --fg:#111827; --muted:#6b7280; --line:rgba(0,0,0,.09); --seg:rgba(0,0,0,.12); --savvly:#3478eb; }
+  body.dark { --fg:#e5e7eb; --muted:#9ca3af; --line:rgba(255,255,255,.14); --seg:rgba(255,255,255,.18); }
+  html,body { margin:0; padding:0; background:transparent; color:var(--fg);
+    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
+  .wrap { padding:12px 14px; }
+  .row-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 0 10px; flex-wrap:wrap; }
+  h1 { font-size:15px; font-weight:600; margin:0; }
+  label.pick { font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:6px; }
+  select { font:inherit; font-size:12.5px; font-weight:600; padding:6px 28px 6px 10px; border-radius:6px;
+    border:1.5px solid var(--savvly); background:rgba(52,120,235,0.08); color:var(--savvly); cursor:pointer;
+    appearance:none; -webkit-appearance:none;
+    background-image:linear-gradient(45deg,transparent 50%,var(--savvly) 50%),linear-gradient(135deg,var(--savvly) 50%,transparent 50%);
+    background-position:right 13px center, right 8px center; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
+  select:hover, select:focus { outline:none; box-shadow:0 0 0 3px rgba(52,120,235,0.2); }
+  table { width:100%; border-collapse:collapse; font-size:12.5px; }
+  th,td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
+  th.s { color:var(--savvly); }
+  td.dim { color:var(--muted); white-space:nowrap; }
+  .bars { display:inline-flex; gap:2px; vertical-align:middle; margin-right:6px; }
+  .seg { width:9px; height:9px; border-radius:2px; display:inline-block; }
+  .lab { font-size:11.5px; }
+  .disc { font-size:10.5px; opacity:.7; margin-top:10px; line-height:1.45; }
+  .disc a { color:var(--savvly); }
+  .empty { font-size:13px; opacity:.6; padding:24px 0; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <div class="row-top">
+    <h1 id="title">Savvly comparison</h1>
+    <label class="pick">Compare Savvly with <select id="alt" title="Change the product to compare"></select></label>
+  </div>
+  <div id="grid"><p class="empty">Loading comparison\u2026</p></div>
+  <p class="disc" id="disc"></p>
+</div>
+<script>
+(function(){
+  "use strict";
+  var SAVVLY="#3478eb", BASE="#c7c3c1";
+  var ALTS=[
+    ["fixed_annuity","Fixed annuity"],["variable_annuity","Variable annuity"],
+    ["indexed_annuity","Indexed annuity"],["target_date_fund","Target-date fund"],
+    ["managed_payout_fund","Managed payout fund"],["social_security_delay","Delaying Social Security"],
+    ["self_managed_drawdown","Self-managed drawdown"]
+  ];
+  var DIMS=[
+    ["longevity_protection","Longevity protection","rating"],
+    ["market_upside","Market upside","rating"],
+    ["liquidity","Liquidity","rating"],
+    ["portability","Portability","rating"],
+    ["inflation_protection","Inflation protection","rating"],
+    ["counterparty_risk","Counterparty risk (lower = better)","rating"],
+    ["complexity","Complexity (lower = better)","rating"],
+    ["fees","Fees","fees"],
+    ["minimum_investment","Minimum investment","min"],
+    ["death_benefit","Death benefit","text"],
+    ["tax_treatment","Tax treatment","text"],
+    ["regulatory_oversight","Regulatory oversight","text"]
+  ];
+  var savvly=null, current=null, disclaimer=null;
+  function post(msg){ try { window.parent.postMessage(msg,"*"); } catch(e){} }
+  function esc(s){ return String(s==null?"":s).replace(/[&<>]/g,function(c){return c==="&"?"&amp;":c==="<"?"&lt;":"&gt;";}); }
+  function bar(score,color){ var n=Math.max(0,Math.min(5,Math.round(score||0))),h="",k;
+    for(k=0;k<5;k++){ h+='<i class="seg" style="background:'+(k<n?color:"var(--seg)")+'"></i>'; }
+    return '<span class="bars">'+h+'</span>'; }
+  function cell(val,type,color){
+    if(val==null) return '<span class="lab" style="opacity:.5">\u2014</span>';
+    if(type==="rating") return bar(val.score,color)+'<span class="lab">'+esc(val.label)+'</span>';
+    if(type==="fees") return '<span class="lab">'+esc(val.range||val.summary||"")+'</span>';
+    if(type==="min") return '<span class="lab">'+esc(val.amount!=null?val.amount:val)+'</span>';
+    return '<span class="lab">'+esc(val)+'</span>';
+  }
+  function ingest(sc){
+    if(!sc) return;
+    if(sc.savvly) savvly=sc.savvly;
+    if(sc.metadata && sc.metadata.disclaimer) disclaimer=sc.metadata.disclaimer;
+    if(sc.comparison) current=sc.comparison;
+    else if(Array.isArray(sc.comparisons) && sc.comparisons.length){
+      var want=document.getElementById("alt").value;
+      current=sc.comparisons.filter(function(c){return c.product_type===want;})[0] || sc.comparisons[0];
+    }
+  }
+  function buildDropdown(){
+    var sel=document.getElementById("alt"); if(sel.options.length) return;
+    var html=""; for(var i=0;i<ALTS.length;i++){ html+='<option value="'+ALTS[i][0]+'">'+esc(ALTS[i][1])+'</option>'; }
+    sel.innerHTML=html;
+    sel.addEventListener("change",function(){
+      callTool("compare_savvly_vs_alternative",{alternative:sel.value}).then(function(res){
+        var nsc=(res&&res.structuredContent)||parseContent(res); if(nsc){ ingest(nsc); render(); }
+      }).catch(function(){});
+    });
+  }
+  function render(){
+    buildDropdown();
+    if(!savvly || !current) return;
+    if(current.product_type) document.getElementById("alt").value=current.product_type;
+    var altName=current.display_name||current.product_type||"alternative";
+    document.getElementById("title").textContent="Savvly vs "+altName;
+    var ad=current.dimensions||{};
+    var s=['<table><thead><tr><th>Dimension</th><th class="s">Savvly</th><th>'+esc(altName)+'</th></tr></thead><tbody>'];
+    for(var i=0;i<DIMS.length;i++){
+      var key=DIMS[i][0], label=DIMS[i][1], type=DIMS[i][2];
+      s.push('<tr><td class="dim">'+esc(label)+'</td><td>'+cell(savvly[key],type,SAVVLY)+'</td><td>'+cell(ad[key],type,BASE)+'</td></tr>');
+    }
+    s.push('</tbody></table>');
+    document.getElementById("grid").innerHTML=s.join("");
+    var url=disclaimer&&disclaimer.full_disclosures_url;
+    var txt=(disclaimer&&disclaimer.summary)||"Comparison is illustrative. Ratings are Savvly's own assessment.";
+    document.getElementById("disc").innerHTML=esc(txt)+(url?' <a href="'+esc(url)+'" target="_blank" rel="noopener">'+esc(url)+'</a>':"");
+  }
+  // app -> host tool call (promise over JSON-RPC)
+  var rpcId=2, pending={};
+  function callTool(name,args){ return new Promise(function(resolve,reject){
+    var id=rpcId++; pending[id]={resolve:resolve,reject:reject};
+    post({jsonrpc:"2.0",id:id,method:"tools/call",params:{name:name,arguments:args}});
+    setTimeout(function(){ if(pending[id]){ delete pending[id]; reject(new Error("timeout")); } },15000);
+  }); }
+  function parseContent(res){ try{ var c=res&&res.content&&res.content[0]; return c&&c.text?JSON.parse(c.text):null; }catch(e){ return null; } }
+  var INIT_ID=1;
+  window.addEventListener("message",function(ev){
+    var m=ev&&ev.data; if(!m||m.jsonrpc!=="2.0") return;
+    if(m.id===INIT_ID&&m.result){
+      var ctx=m.result.hostContext||{};
+      if(ctx.theme==="dark") document.body.classList.add("dark"); else document.body.classList.remove("dark");
+      post({ jsonrpc:"2.0", method:"ui/notifications/initialized", params:{} });
+      render(); return;
+    }
+    if(m.id===INIT_ID && m.error){ var le=document.getElementById("grid"); if(le) le.innerHTML='<p class="empty">Comparison unavailable (init error '+((m.error&&m.error.code)||"")+').</p>'; return; }
+    if(m.id&&(m.result||m.error)&&pending[m.id]){
+      var p=pending[m.id]; delete pending[m.id];
+      if(m.error) p.reject(new Error(m.error.message||"tool error")); else p.resolve(m.result);
+      return;
+    }
+    if(!m.id&&m.method==="ui/notifications/tool-result"){ ingest((m.params||{}).structuredContent); render(); }
+    if(!m.id&&m.method==="ui/notifications/host-context-changed"){
+      var c2=(m.params||{}).hostContext||{};
+      if(c2.theme==="dark") document.body.classList.add("dark"); else document.body.classList.remove("dark");
+      render();
+    }
+  });
+  function sendSize(){ try{ post({jsonrpc:"2.0",method:"ui/notifications/size-changed",params:{width:Math.ceil(document.documentElement.scrollWidth),height:Math.ceil(document.documentElement.scrollHeight)}}); }catch(e){} }
+  if(window.ResizeObserver){ new ResizeObserver(function(){ sendSize(); }).observe(document.body); }
+  post({jsonrpc:"2.0",id:INIT_ID,method:"ui/initialize",params:{
+    protocolVersion:"2026-01-26",
+    appInfo:{name:"savvly-compare-matrix",version:"1.0.0"},
+    capabilities:{},
+    appCapabilities:{availableDisplayModes:["inline"]}
+  }});
+})();
+</script>
+</body>
+</html>`;
+// ../../src/mcp/ui/product-card.ts
+var PRODUCT_UI_URI = "ui://savvly/product-card.html";
+var PRODUCT_CARD_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Savvly product overview</title>
+<style>
+  :root { --fg:#111827; --muted:#6b7280; --line:rgba(0,0,0,.09); --card:rgba(0,0,0,.03); --savvly:#3478eb; }
+  body.dark { --fg:#e5e7eb; --muted:#9ca3af; --line:rgba(255,255,255,.14); --card:rgba(255,255,255,.05); }
+  html,body { margin:0; padding:0; background:transparent; color:var(--fg);
+    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
+  .wrap { padding:12px 14px; }
+  h1 { font-size:16px; font-weight:600; margin:0 0 2px; }
+  .tag { font-size:12.5px; color:var(--muted); margin:0 0 10px; }
+  .grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 12px; }
+  .fact { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
+  .fact .k { font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
+  .fact .v { font-size:13px; margin-top:2px; }
+  .acc { color:var(--savvly); font-weight:600; }
+  h2 { font-size:12.5px; font-weight:600; margin:4px 0 6px; }
+  svg { width:100%; height:auto; display:block; }
+  .disc { font-size:10.5px; opacity:.7; margin-top:10px; line-height:1.45; }
+  .disc a { color:var(--savvly); }
+  .empty { font-size:13px; opacity:.6; padding:24px 0; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <h1 id="name">Savvly</h1>
+  <p class="tag" id="tag"></p>
+  <div class="grid" id="facts"></div>
+  <h2 id="psh" style="display:none">Payout schedule</h2>
+  <div id="chart"></div>
+  <p class="disc" id="disc"></p>
+  <p class="empty" id="empty">Loading product info\u2026</p>
+</div>
+<script>
+(function(){
+  "use strict";
+  var SAVVLY="#3478eb";
+  var lastSC=null;
+  function post(msg){ try { window.parent.postMessage(msg,"*"); } catch(e){} }
+  function esc(s){ return String(s==null?"":s).replace(/[&<>]/g,function(c){return c==="&"?"&amp;":c==="<"?"&lt;":"&gt;";}); }
+  function fact(k,v){ if(v==null||v==="") return ""; return '<div class="fact"><div class="k">'+esc(k)+'</div><div class="v">'+v+'</div></div>'; }
+  function render(){
+    var p=lastSC; if(!p||!p.name) return;
+    document.getElementById("empty").style.display="none";
+    document.getElementById("name").textContent=p.name;
+    document.getElementById("tag").textContent=p.tagline||"";
+    var inv=p.investment||{}, fees=p.fees||{}, reg=p.regulatory||{};
+    var minStr="";
+    if(inv.minimum_monthly&&inv.minimum_monthly.amount!=null) minStr+="$"+inv.minimum_monthly.amount+"/mo";
+    if(inv.minimum_lumpsum&&inv.minimum_lumpsum.amount!=null) minStr+=(minStr?" \xB7 ":"")+"$"+inv.minimum_lumpsum.amount+" lump";
+    var feeStr="";
+    if(fees.blended_range_bps&&fees.blended_range_bps.low!=null) feeStr=fees.blended_range_bps.low+"\u2013"+fees.blended_range_bps.high+" bps blended";
+    var notIns=(reg.is_insurance===false&&reg.is_annuity===false)?"Not an annuity or insurance":"";
+    var g="";
+    g+=fact("Underlying", inv.underlying_assets ? esc(inv.underlying_assets) : null);
+    g+=fact("Minimum", minStr || null);
+    g+=fact("Fees", feeStr ? esc(feeStr) : null);
+    g+=fact("Structure", reg.type ? esc(reg.type) : null);
+    g+=fact("Adviser", reg.adviser ? esc(reg.adviser) : null);
+    g+=fact("Important", notIns ? '<span class="acc">'+esc(notIns)+'</span>' : null);
+    document.getElementById("facts").innerHTML=g;
+    renderPayout(Array.isArray(p.payout_schedule)?p.payout_schedule:[]);
+    var d=p.disclaimers||{};
+    var url=d.full_disclosures_url;
+    var txt=d.chart_summary||d.projections||"";
+    document.getElementById("disc").innerHTML=esc(txt)+(url?' <a href="'+esc(url)+'" target="_blank" rel="noopener">'+esc(url)+'</a>':"");
+  }
+  function renderPayout(rows){
+    if(!rows.length){ return; }
+    document.getElementById("psh").style.display="";
+    var dark=document.body.classList.contains("dark");
+    var FG=dark?"#e5e7eb":"#111827", MUTED=dark?"#9ca3af":"#6b7280", GRID=dark?"rgba(255,255,255,0.12)":"rgba(0,0,0,0.08)";
+    var W=560,H=210,padL=20,padR=14,padT=20,padB=34, plotW=W-padL-padR, plotH=H-padT-padB;
+    var peak=0,i; for(i=0;i<rows.length;i++){ if((rows[i].percentage||0)>peak) peak=rows[i].percentage; }
+    // Just enough top room (padT) for the value label above the tallest bar \u2014 no
+    // extra yMax headroom, so the heading-to-bars gap stays tight.
+    var yMax=Math.max(peak,0.1);
+    function y(v){ return padT+plotH-((v||0)/yMax)*plotH; }
+    var n=rows.length, groupW=plotW/Math.max(n,1), barW=groupW*0.5;
+    var s=['<svg viewBox="0 0 '+W+' '+H+'" role="img" aria-label="Savvly payout schedule by age">'];
+    s.push('<line x1="'+padL+'" y1="'+(padT+plotH).toFixed(1)+'" x2="'+(W-padR)+'" y2="'+(padT+plotH).toFixed(1)+'" stroke="'+GRID+'"/>');
+    for(var j=0;j<n;j++){
+      var r=rows[j], cx=padL+j*groupW+groupW/2, x=cx-barW/2;
+      var pct=r.percentage||0, hh=plotH-(y(pct)-padT);
+      s.push('<rect x="'+x.toFixed(1)+'" y="'+y(pct).toFixed(1)+'" width="'+barW.toFixed(1)+'" height="'+hh.toFixed(1)+'" rx="3" fill="'+SAVVLY+'"/>');
+      s.push('<text x="'+cx.toFixed(1)+'" y="'+(y(pct)-5).toFixed(1)+'" font-size="11" fill="'+SAVVLY+'" text-anchor="middle" font-weight="600">'+Math.round(pct*100)+'%</text>');
+      s.push('<text x="'+cx.toFixed(1)+'" y="'+(H-padB+18)+'" font-size="11" fill="'+FG+'" text-anchor="middle">Age '+esc(r.age)+'</text>');
+    }
+    s.push('</svg>');
+    document.getElementById("chart").innerHTML=s.join("");
+  }
+  var INIT_ID=1;
+  window.addEventListener("message",function(ev){
+    var m=ev&&ev.data; if(!m||m.jsonrpc!=="2.0") return;
+    if(m.id===INIT_ID&&m.result){
+      var ctx=m.result.hostContext||{};
+      if(ctx.theme==="dark") document.body.classList.add("dark"); else document.body.classList.remove("dark");
+      post({ jsonrpc:"2.0", method:"ui/notifications/initialized", params:{} });
+      render(); return;
+    }
+    if(m.id===INIT_ID&&m.error){ var le=document.getElementById("empty"); if(le){le.style.display="";le.textContent="INIT ERROR "+(m.error.code||"")+": "+(m.error.message||JSON.stringify(m.error));} return; }
+    if(!m.id&&m.method==="ui/notifications/tool-result"){ lastSC=(m.params||{}).structuredContent||null; render(); }
+    if(!m.id&&m.method==="ui/notifications/host-context-changed"){
+      var c2=(m.params||{}).hostContext||{};
+      if(c2.theme==="dark") document.body.classList.add("dark"); else document.body.classList.remove("dark");
+      render();
+    }
+  });
+  function sendSize(){ try{ post({jsonrpc:"2.0",method:"ui/notifications/size-changed",params:{width:Math.ceil(document.documentElement.scrollWidth),height:Math.ceil(document.documentElement.scrollHeight)}}); }catch(e){} }
+  if(window.ResizeObserver){ new ResizeObserver(function(){ sendSize(); }).observe(document.body); }
+  post({jsonrpc:"2.0",id:INIT_ID,method:"ui/initialize",params:{
+    protocolVersion:"2026-01-26",
+    appInfo:{name:"savvly-product-card",version:"1.0.0"},
+    capabilities:{},
+    appCapabilities:{availableDisplayModes:["inline"]}
+  }});
+})();
+</script>
+</body>
+</html>`;
 // ../../src/data/faq.ts
 var FAQ = [
@@ -22542,7 +23450,7 @@ var PayoutAgeRowSchema = external_exports.object({
   savvly_upside_upper: external_exports.number().describe(
     "USD. Upper bound for the incremental Savvly upside at this age. Tends to be large at 90/95 where the market alone portfolio is depleted."
   )
-});
+}).passthrough();
 var PayoutEnvelopeSchema = external_exports.object({
   total_savvly_upside_lower: external_exports.number().describe(
     "USD. Lower bound of the cumulative incremental upside Savvly provides vs. investing in the market alone, summed across all milestone payout ages."
@@ -22580,7 +23488,7 @@ var PayoutEnvelopeSchema = external_exports.object({
   payout_age_dependent_values: external_exports.array(PayoutAgeRowSchema).describe(
     "Per-milestone-age breakdown of the projection. Typically 4 rows for ages 80, 85, 90, 95. Each row contains the with Savvly payout, the market alone counterfactual, and the incremental Savvly upside for that age, each with `_lower`/`_upper` bounds."
   )
-});
+}).passthrough();
 var RetirementAgeRowSchema = external_exports.object({
   age: external_exports.number().int().describe("Age (years) the row reports."),
   retirement_savings_without_savvly_in_the_portfolio: external_exports.number().describe(
@@ -22595,7 +23503,7 @@ var RetirementAgeRowSchema = external_exports.object({
   savvly_value_alone: external_exports.number().describe(
     "USD. Standalone value attributable to the Savvly allocation at this age, excluding the rest of the retirement portfolio."
   )
-});
+}).passthrough();
 var RetirementEnvelopeSchema = external_exports.object({
   gap_score: external_exports.number().describe(
     "Server-computed score summarizing how well the projected retirement savings meet the desired monthly paycheck across the planning horizon."
@@ -22610,7 +23518,7 @@ var RetirementEnvelopeSchema = external_exports.object({
   age_dependent_values: external_exports.array(RetirementAgeRowSchema).describe(
     "Per-age timeline across the planning horizon (current_age \u2192 life_expectancy). One row per year."
   )
-});
+}).passthrough();
 var TopLevelDisclosureSchema = external_exports.object({
   required: external_exports.literal(true).describe(
     "Always true. Signals to the calling AI client that the `text` and `url` fields MUST be displayed to the end user whenever any number from this response is shown. Required by SEC Marketing Rule and FINRA Rule 2210."
@@ -22657,6 +23565,38 @@ var ProjectionSummarySchema = external_exports.object({
     "Human-readable English sentence summarizing the projection. Always ends with 'Payouts are not guarantees. See full disclosures at <url>.' \u2014 display the URL verbatim alongside any figures."
   )
 });
+var ChartSpecSchema = external_exports.object({
+  type: external_exports.enum(["area", "line", "bar"]).describe("Chart type the client should render."),
+  reference: external_exports.string().optional().describe("Canonical Savvly visualization this chart mirrors."),
+  x_axis: external_exports.object({ field: external_exports.string(), label: external_exports.string() }).passthrough().describe("Per-row field mapped to the x-axis, plus its display label."),
+  y_axis: external_exports.object({ label: external_exports.string(), format: external_exports.string() }).passthrough().describe("Y-axis label and value format (e.g. 'currency_usd')."),
+  series: external_exports.array(
+    external_exports.object({
+      field: external_exports.string().describe("Per-row field plotted by this series."),
+      label: external_exports.string().describe("Legend label for this series."),
+      color: external_exports.string().describe(
+        "Hex color for this series. The series representing Savvly is always #3478eb (the Savvly brand blue)."
+      )
+    }).passthrough()
+  ).describe(
+    "One entry per plotted series \u2014 typically Savvly vs. the baseline / market-alone counterfactual."
+  ),
+  tooltip: external_exports.record(external_exports.string()).optional().describe("Optional `field -> human label` map for chart tooltips."),
+  rendering_notes: external_exports.array(external_exports.string()).describe("Plain-English rendering guidance for the client.")
+}).passthrough();
+var VisualizationSchema = external_exports.object({
+  recommended: external_exports.literal(true).describe(
+    "Always true. Signals to the calling AI client that it SHOULD render `chart` whenever it can display a graph."
+  ),
+  instruction: external_exports.string().describe(
+    "Plain-English instruction telling the client to render `chart` from the per-row data in `result`, color the Savvly series #3478eb, and show the `disclosure` alongside the chart."
+  ),
+  chart: ChartSpecSchema.describe(
+    "Machine-readable chart spec: type, axes, series (with brand colors), and rendering notes."
+  )
+}).passthrough().describe(
+  "VISUALIZATION RECOMMENDED: render `chart` from the per-row data in `result` (Savvly series colored #3478eb) whenever the consuming surface can display a graph."
+);
 var ProjectionResponseSchema = external_exports.object({
   inputs: external_exports.record(external_exports.unknown()).describe("Echo of the validated input arguments passed to the tool."),
   result: PayoutEnvelopeSchema.describe(
@@ -22665,15 +23605,21 @@ var ProjectionResponseSchema = external_exports.object({
   summary: ProjectionSummarySchema.describe(
     "Convenience summary including a human-readable narrative."
   ),
+  visualization: VisualizationSchema.optional().describe(
+    "Recommended chart for this projection \u2014 a grouped bar chart of the milestone payouts in `result.payout_age_dependent_values` (Savvly vs market alone). Render it when the surface can display a graph."
+  ),
   disclosure: TopLevelDisclosureSchema.describe(
     "DISCLOSURE REQUIRED: display `disclosure.text` and link `disclosure.url` to the user whenever you present any number from this response. Required by SEC Marketing Rule and FINRA Rule 2210. The richer block under `metadata.disclaimer` is supplementary detail; this top-level field is the must-display."
   ),
   metadata: external_exports.object({
     disclaimer: DisclaimerMetadataSchema,
+    methodology: external_exports.string().describe(
+      "Plain-English explanation of how the Savvly vs market-alone payout figures are computed (the matched-drawdown counterfactual). Present on lumpsum and monthly projections."
+    ),
     field_descriptions: external_exports.record(external_exports.string()).describe(
       "Flat `field_name -> short description` map covering every field in `result` and `result.payout_age_dependent_values[]`. Useful for MCP clients that don't surface outputSchema to the LLM."
     )
-  })
+  }).passthrough()
 });
 var DisplayHintsSchema = external_exports.object({
   chart: external_exports.object({
@@ -22689,17 +23635,18 @@ var DisplayHintsSchema = external_exports.object({
         fill: external_exports.string()
       })
     ),
-    interpolation: external_exports.literal("linear"),
+    interpolation: external_exports.string(),
+    tension: external_exports.number().optional(),
     show_markers: external_exports.boolean(),
     tooltip: external_exports.record(external_exports.string())
-  }),
+  }).passthrough(),
   layout: external_exports.object({
     above_chart: external_exports.string(),
     below_chart: external_exports.string()
   }),
   rendering_notes: external_exports.array(external_exports.string())
 }).describe(
-  "Rendering guidance for the retirement projection chart. Tells AI clients to render `age_dependent_values` as a stacked area chart matching estimator.savvly.com \u2014 linear interpolation (no spline), no markers, so Savvly milestone payouts at ages 80/85/90/95 appear as sharp spikes with visible year-by-year depletion between them. KPI cards above and a narrative paragraph below the chart are encouraged."
+  "Rendering guidance for the retirement projection chart. Tells AI clients to render `age_dependent_values` as a stacked area chart matching estimator.savvly.com \u2014 MILD smoothing (Chart.js tension 0.4), no markers, so Savvly milestone payouts at ages 80/85/90/95 still read as distinct spikes with visible year-by-year depletion between them. KPI cards above and a narrative paragraph below the chart are encouraged."
 );
 var RetirementResponseSchema = external_exports.object({
   inputs: external_exports.record(external_exports.unknown()),
@@ -22711,14 +23658,23 @@ var RetirementResponseSchema = external_exports.object({
   }).describe(
     "Convenience summary. The narrative carries the canonical full-disclosures URL inline; display it verbatim alongside any figures from this response."
   ),
+  visualization: VisualizationSchema.optional().describe(
+    "Recommended chart for this projection \u2014 a year-by-year area chart of `result.age_dependent_values` (savings with vs. without Savvly). Render it when the surface can display a graph. The richer `metadata.display_hints` block carries the same chart plus layout/tooltip detail."
+  ),
   disclosure: TopLevelDisclosureSchema.describe(
     "DISCLOSURE REQUIRED: display `disclosure.text` and link `disclosure.url` to the user whenever you present any number from this response. Required by SEC Marketing Rule and FINRA Rule 2210."
   ),
   metadata: external_exports.object({
     disclaimer: DisclaimerMetadataSchema,
     field_descriptions: external_exports.record(external_exports.string()),
-    display_hints: DisplayHintsSchema
-  })
+    // Optional: the REST API (src/routes/projections.ts) always includes this,
+    // but the MCP projection tools STRIP it (and the top-level `visualization`)
+    // from their response — those are model-facing chart-render nudges and the
+    // tools ship a self-contained inline widget instead. See `widgetPayload` in
+    // src/mcp/server.ts. Optional here so the stripped structuredContent still
+    // validates against this schema.
+    display_hints: DisplayHintsSchema.optional()
+  }).passthrough()
 });
 var PAYOUT_FIELD_DESCRIPTIONS = {
   total_savvly_upside_lower: "USD. Lower bound of cumulative Savvly upside vs market alone.",
@@ -22843,6 +23799,8 @@ function formatUsd(n) {
     maximumFractionDigits: 0
   }).format(n);
 }
+var SAVVLY_BLUE = "#3478eb";
+var BASELINE_GRAY = "#c7c3c1";
 function disclaimerBlock() {
   return {
     summary: PRODUCT.disclaimers.chart_summary,
@@ -22860,6 +23818,8 @@ function disclosureBlock() {
   };
 }
 var DISCLOSURE_REQUIRED_TERSE = "DISCLOSURE REQUIRED: display `disclosure.text` verbatim and link `disclosure.url` to the user alongside any figures from this response. Required by SEC Marketing Rule and FINRA Rule 2210 \u2014 do not paraphrase or omit.";
+var VISUALIZATION_RECOMMENDED_TERSE = "VISUALIZATION: this tool renders its chart inline as an interactive widget (MCP Apps \u2014 see `_meta.ui`); your host displays it automatically from the tool result. That widget IS the visualization \u2014 do NOT draw, generate, or render your own chart, graph, or table of these numbers (no duplicate). Summarize the key figures in prose and show the `disclosure` text and link.";
+var INPUTS_OPTIONAL_NO_PROMPT_TERSE = "INPUTS: every parameter is OPTIONAL and defaults to a sensible value. Call this tool IMMEDIATELY \u2014 pass only the values the user explicitly stated and omit the rest. Do NOT ask the user for starting values, assumptions, or missing parameters before calling; the rendered widget has editable fields so they adjust age, amounts, and other assumptions inline after it appears.";
 var SAVVLY_VS_MARKET_ALONE_PAYOUT_METHODOLOGY = "Payout methodology \u2014 Savvly vs market alone: the payout values are calculated by comparing two investors of the same age committing the same principal. Investor 1 invests in the market with Savvly's Longevity Benefit Fund; Investor 2 invests in the market alone (no longevity overlay). To make the comparison apples-to-apples, at each milestone age (80, 85, 90, 95) Investor 2 withdraws from their market alone portfolio the same dollar amount Investor 1 receives as a payout from Savvly. The `payout_market_alone_*` and `total_market_alone_*` figures are therefore what Investor 2 can actually withdraw to match Savvly's payouts before running out \u2014 they fall to 0 once the market alone portfolio is depleted. The `savvly_upside_*` (and `total_savvly_upside_*`) fields quantify how much more total money Investor 1 receives in payouts from Savvly than Investor 2 is able to withdraw over time to match those payouts.";
 function summarizePayouts(envelope, depositType, deposited) {
   const totalSavvly = envelope.total_savvly_upper ?? null;
@@ -22885,6 +23845,7 @@ function payoutPayload(inputs, result, depositType, deposited) {
     inputs,
     result,
     summary: summarizePayouts(result, depositType, deposited),
+    visualization: visualizationBlock("payout"),
     disclosure: disclosureBlock(),
     metadata: {
       disclaimer: disclaimerBlock(),
@@ -22903,17 +23864,18 @@ var RETIREMENT_DISPLAY_HINTS = {
       {
         field: "retirement_savings_without_savvly_in_the_portfolio",
         label: "Current Retirement Forecast",
-        color: "#9CA3AF",
+        color: BASELINE_GRAY,
         fill: "solid"
       },
       {
         field: "retirement_savings_with_savvly_in_the_portfolio",
         label: "With a longevity solution in the portfolio",
-        color: "#3B82F6",
+        color: SAVVLY_BLUE,
         fill: "solid"
       }
     ],
-    interpolation: "linear",
+    interpolation: "smooth",
+    tension: 0.4,
     show_markers: false,
     tooltip: {
       age: "Age",
@@ -22927,11 +23889,53 @@ var RETIREMENT_DISPLAY_HINTS = {
     below_chart: "narrative"
   },
   rendering_notes: [
-    "Plot `age_dependent_values` rows exactly as returned \u2014 one row per year. Savvly milestone payouts at ages 80/85/90/95 must appear as sharp vertical spikes on the with-Savvly series; year-by-year monthly-paycheck withdrawals show as the depletion between spikes. Do NOT smooth/spline the line \u2014 smoothing rounds the spikes off into bumps and misrepresents the payout schedule.",
+    "Plot `age_dependent_values` rows exactly as returned \u2014 one row per year. Match estimator.savvly.com: a stacked-area chart with MILD smoothing (Chart.js `tension: 0.4`) and no point markers. Keep the smoothing mild \u2014 the Savvly milestone payouts at ages 80/85/90/95 must still read as distinct spikes on the with-Savvly series (the year-by-year monthly-paycheck withdrawals show as the depletion between them). Do NOT over-smooth (heavy spline) or add markers \u2014 that rounds the spikes into gentle bumps and misrepresents the payout schedule.",
     "Render the without-Savvly series exactly as returned. It drops to 0 once the traditional portfolio is exhausted; do not extrapolate past that.",
     "If `monthly_paycheck` was omitted (default 0), neither series will deplete and the chart is a pure accumulation curve \u2014 surface that caveat to the user."
   ]
 };
+var PAYOUT_CHART_SPEC = {
+  type: "bar",
+  reference: "https://estimator.savvly.com \u2014 payout illustration",
+  x_axis: { field: "payout_age", label: "Payout age" },
+  y_axis: { label: "Payout (USD)", format: "currency_usd" },
+  series: [
+    {
+      field: "savvly_payout_upper",
+      label: "With Savvly",
+      color: SAVVLY_BLUE
+    },
+    {
+      field: "payout_market_alone_upper",
+      label: "Market alone",
+      color: BASELINE_GRAY
+    }
+  ],
+  tooltip: {
+    payout_age: "Payout age",
+    savvly_payout_upper: "With Savvly",
+    payout_market_alone_upper: "Market alone",
+    savvly_upside_upper: "Savvly upside"
+  },
+  rendering_notes: [
+    "Plot one clustered bar pair per row in `result.payout_age_dependent_values` (ages 80/85/90/95). Use the `_upper` fields as the central illustrative estimate; the `_lower` fields communicate downside if you show a range.",
+    "The market-alone bar falls to 0 once the counterfactual portfolio is depleted (often by age 90/95) \u2014 render the empty/zero bar, do not hide it. That gap is the point of the comparison, not missing data.",
+    "Optionally annotate each Savvly bar with `savvly_upside_upper` \u2014 the incremental dollars Savvly pays out beyond what market alone can match."
+  ]
+};
+var RETIREMENT_CHART_SPEC = {
+  ...RETIREMENT_DISPLAY_HINTS.chart,
+  rendering_notes: RETIREMENT_DISPLAY_HINTS.rendering_notes
+};
+function visualizationBlock(kind) {
+  const chart = kind === "payout" ? PAYOUT_CHART_SPEC : RETIREMENT_CHART_SPEC;
+  const source = kind === "payout" ? "`result.payout_age_dependent_values`" : "`result.age_dependent_values`";
+  return {
+    recommended: true,
+    instruction: `This tool ships an interactive inline widget (MCP Apps). If your client renders it, that widget IS the visualization \u2014 do NOT draw a second copy as your own chart or table. ONLY if your client does not render the widget (e.g. a text/terminal client) should you render a ${chart.type} chart from ${source} using \`visualization.chart\`, Savvly series ${SAVVLY_BLUE} (market alone in gray). Either way, show the \`disclosure\` text and link.`,
+    chart
+  };
+}
 function disclosureNarrative(kind) {
   const lead = kind === "retirement" ? "Hypothetical retirement projection \u2014 projections are based on assumed rates of return and are not guarantees of future performance." : "Hypothetical illustration of Savvly Longevity Benefit growth across the payout ages \u2014 not a guarantee of future performance.";
   return `${lead} See full disclosures at ${PRODUCT.disclaimers.full_disclosures_url}.`;
@@ -22941,6 +23945,7 @@ function retirementPayload(inputs, result) {
     inputs,
     result,
     summary: { narrative: disclosureNarrative("retirement") },
+    visualization: visualizationBlock("retirement"),
     disclosure: disclosureBlock(),
     metadata: {
       disclaimer: disclaimerBlock(),
@@ -23084,6 +24089,22 @@ var READ_ONLY_TOOL_ANNOTATIONS = {
   destructiveHint: false,
   openWorldHint: false
 };
+function uiMeta(resourceUri) {
+  return {
+    "ui/resourceUri": resourceUri,
+    ui: { resourceUri, visibility: ["model", "app"] }
+  };
+}
+function widgetPayload(payload) {
+  const clone2 = { ...payload };
+  delete clone2.visualization;
+  if (clone2.metadata && typeof clone2.metadata === "object") {
+    const meta = { ...clone2.metadata };
+    delete meta.display_hints;
+    clone2.metadata = meta;
+  }
+  return clone2;
+}
 function searchQaLibrary(opts) {
   const q = opts.query?.trim().toLowerCase();
   const sub = opts.subsection?.trim().toLowerCase();
@@ -23165,13 +24186,55 @@ function createMcpServer() {
       ]
     })
   );
+  server.registerResource(
+    "payout-chart",
+    PAYOUT_UI_URI,
+    { mimeType: MCP_APP_MIME_TYPE },
+    async (uri) => ({
+      contents: [
+        { uri: uri.href, mimeType: MCP_APP_MIME_TYPE, text: PAYOUT_CHART_HTML }
+      ]
+    })
+  );
+  server.registerResource(
+    "retirement-chart",
+    RETIREMENT_UI_URI,
+    { mimeType: MCP_APP_MIME_TYPE },
+    async (uri) => ({
+      contents: [
+        { uri: uri.href, mimeType: MCP_APP_MIME_TYPE, text: RETIREMENT_CHART_HTML }
+      ]
+    })
+  );
+  server.registerResource(
+    "compare-matrix",
+    COMPARE_UI_URI,
+    { mimeType: MCP_APP_MIME_TYPE },
+    async (uri) => ({
+      contents: [
+        { uri: uri.href, mimeType: MCP_APP_MIME_TYPE, text: COMPARE_MATRIX_HTML }
+      ]
+    })
+  );
+  server.registerResource(
+    "product-card",
+    PRODUCT_UI_URI,
+    { mimeType: MCP_APP_MIME_TYPE },
+    async (uri) => ({
+      contents: [
+        { uri: uri.href, mimeType: MCP_APP_MIME_TYPE, text: PRODUCT_CARD_HTML }
+      ]
+    })
+  );
   server.registerTool(
     "get_savvly_product_info",
     {
       title: "Get Savvly Product Info",
       description: "Get complete product information about Savvly, an SEC-registered investment fund offering a Longevity Benefit. Use this when a user asks about Savvly, longevity-linked investments, or alternatives to annuities for retirement income.",
       outputSchema: ProductInfoOutputSchema,
-      annotations: READ_ONLY_TOOL_ANNOTATIONS
+      annotations: READ_ONLY_TOOL_ANNOTATIONS,
+      // MCP Apps: render the product overview card inline (see uiMeta).
+      _meta: uiMeta(PRODUCT_UI_URI)
     },
     wrapToolHandler("get_savvly_product_info", async () => ({
       content: [{ type: "text", text: JSON.stringify(PRODUCT, null, 2) }],
@@ -23196,7 +24259,9 @@ function createMcpServer() {
         ]).describe("The product type to compare against Savvly, or 'all' for the full matrix")
       },
       outputSchema: ComparisonOutputSchema,
-      annotations: READ_ONLY_TOOL_ANNOTATIONS
+      annotations: READ_ONLY_TOOL_ANNOTATIONS,
+      // MCP Apps: render the comparison matrix inline (see uiMeta).
+      _meta: uiMeta(COMPARE_UI_URI)
     },
     wrapToolHandler("compare_savvly_vs_alternative", async ({ alternative }) => {
       const payload = alternative === "all" ? PRODUCT_COMPARISON : {
@@ -23216,20 +24281,22 @@ function createMcpServer() {
     "project_savvly_lumpsum",
     {
       title: "Project Savvly Lump-Sum Investment",
-      description: "Retirement projection for a lump-sum investment in Savvly's Longevity Benefit Fund. Returns payout amounts at each milestone age (80, 85, 90, 95) with Savvly vs market alone cumulative totals, per-age breakdowns, and server-provided `_lower`/`_upper` range bounds. Use `_upper` as the central illustrative estimate and `_lower` to communicate downside. Suitable for retirement income planning, annuity alternative analysis, and longevity benefit illustration. Response embeds SEC-style disclaimers and per-field interpretation hints under `metadata`. " + SAVVLY_VS_MARKET_ALONE_PAYOUT_METHODOLOGY + " " + DISCLOSURE_REQUIRED_TERSE,
+      description: "Retirement projection for a lump-sum investment in Savvly's Longevity Benefit Fund. Returns payout amounts at each milestone age (80, 85, 90, 95) with Savvly vs market alone cumulative totals, per-age breakdowns, and server-provided `_lower`/`_upper` range bounds. Use `_upper` as the central illustrative estimate and `_lower` to communicate downside. Suitable for retirement income planning, annuity alternative analysis, and longevity benefit illustration. Response embeds SEC-style disclaimers and per-field interpretation hints under `metadata`. " + SAVVLY_VS_MARKET_ALONE_PAYOUT_METHODOLOGY + " " + DISCLOSURE_REQUIRED_TERSE + " " + VISUALIZATION_RECOMMENDED_TERSE + " " + INPUTS_OPTIONAL_NO_PROMPT_TERSE,
       inputSchema: {
-        current_age: external_exports.number().int().min(25).max(79).describe("Investor's current age"),
-        funding_amount: external_exports.number().min(100).describe("Lump sum investment in USD"),
-        average_return: external_exports.number().int().min(1).max(15).describe("Expected average annual return %"),
-        withdrawal_age: external_exports.number().int().min(25).max(120).describe("Optional early-withdrawal age \u2014 drives `early_withdrawal_value` and `total_payout_at_withdrawal_age_*` in the response").optional()
+        current_age: external_exports.number().int().min(25).max(79).default(40).describe("Investor's current age (default 40)"),
+        funding_amount: external_exports.number().min(100).default(1e4).describe("Lump sum investment in USD (default 10000)"),
+        average_return: external_exports.number().int().min(1).max(15).default(8).describe("Expected average annual S&P 500 return % (default 8)"),
+        withdrawal_age: external_exports.number().int().min(25).max(120).default(82).describe("Early-withdrawal age (default 82) \u2014 drives `early_withdrawal_value` and `total_payout_at_withdrawal_age_*` in the response")
       },
       outputSchema: ProjectionResponseSchema.passthrough(),
-      annotations: READ_ONLY_TOOL_ANNOTATIONS
+      annotations: READ_ONLY_TOOL_ANNOTATIONS,
+      // MCP Apps: render the shared payout chart inline (see uiMeta).
+      _meta: uiMeta(PAYOUT_UI_URI)
     },
     wrapToolHandler("project_savvly_lumpsum", async ({ current_age, funding_amount, average_return, withdrawal_age }) => {
       const inputs = { current_age, funding_amount, average_return, withdrawal_age };
       const result = await simulateLumpsum(inputs);
-      const payload = payoutPayload(inputs, result, "single", funding_amount);
+      const payload = widgetPayload(payoutPayload(inputs, result, "single", funding_amount));
       return {
         content: [{ type: "text", text: JSON.stringify(payload, null, 2) }],
         structuredContent: payload
@@ -23240,17 +24307,19 @@ function createMcpServer() {
     "project_savvly_monthly",
     {
       title: "Project Savvly Monthly Contributions",
-      description: "Retirement projection for monthly contributions to Savvly's Longevity Benefit Fund over a number of years. Returns payout amounts at milestone ages 80/85/90/95 with Savvly vs market alone cumulative totals, per-age breakdowns, and server-provided `_lower`/`_upper` range bounds. Use `_upper` as the central illustrative estimate and `_lower` to communicate downside. Suitable for retirement savings planning, annuity alternative comparison, and longevity benefit illustration. Supports an optional annual contribution increase and an optional early-withdrawal age. Disclaimers + per-field hints under `metadata`. " + SAVVLY_VS_MARKET_ALONE_PAYOUT_METHODOLOGY + " " + DISCLOSURE_REQUIRED_TERSE,
+      description: "Retirement projection for monthly contributions to Savvly's Longevity Benefit Fund over a number of years. Returns payout amounts at milestone ages 80/85/90/95 with Savvly vs market alone cumulative totals, per-age breakdowns, and server-provided `_lower`/`_upper` range bounds. Use `_upper` as the central illustrative estimate and `_lower` to communicate downside. Suitable for retirement savings planning, annuity alternative comparison, and longevity benefit illustration. Supports an optional annual contribution increase and an optional early-withdrawal age. Disclaimers + per-field hints under `metadata`. " + SAVVLY_VS_MARKET_ALONE_PAYOUT_METHODOLOGY + " " + DISCLOSURE_REQUIRED_TERSE + " " + VISUALIZATION_RECOMMENDED_TERSE + " " + INPUTS_OPTIONAL_NO_PROMPT_TERSE,
       inputSchema: {
-        current_age: external_exports.number().int().min(25).max(79).describe("Investor's current age"),
-        monthly_amount: external_exports.number().min(10).describe("Monthly contribution in USD"),
-        contribution_years: external_exports.number().int().min(1).max(55).describe("Number of years contributing"),
-        average_return: external_exports.number().int().min(1).max(15).describe("Expected average annual return %"),
+        current_age: external_exports.number().int().min(25).max(79).default(40).describe("Investor's current age (default 40)"),
+        monthly_amount: external_exports.number().min(10).default(100).describe("Monthly deposit in USD (default 100)"),
+        contribution_years: external_exports.number().int().min(1).max(55).default(27).describe("Number of years contributing (default 27 = retirement age 67 \u2212 current age 40)"),
+        average_return: external_exports.number().int().min(1).max(15).default(8).describe("Expected average annual S&P 500 return % (default 8)"),
         installment_increase_percentage: external_exports.number().min(0).max(20).describe("Optional annual % increase applied to monthly contributions").optional(),
-        withdrawal_age: external_exports.number().int().min(25).max(120).describe("Optional early-withdrawal age \u2014 drives `early_withdrawal_value` and `total_payout_at_withdrawal_age_*` in the response").optional()
+        withdrawal_age: external_exports.number().int().min(25).max(120).default(82).describe("Early-withdrawal age (default 82) \u2014 drives `early_withdrawal_value` and `total_payout_at_withdrawal_age_*` in the response")
       },
       outputSchema: ProjectionResponseSchema.passthrough(),
-      annotations: READ_ONLY_TOOL_ANNOTATIONS
+      annotations: READ_ONLY_TOOL_ANNOTATIONS,
+      // MCP Apps: render the shared payout chart inline (see uiMeta).
+      _meta: uiMeta(PAYOUT_UI_URI)
     },
     wrapToolHandler("project_savvly_monthly", async ({
       current_age,
@@ -23273,7 +24342,7 @@ function createMcpServer() {
         gender: "Genderless"
       });
       const deposited = monthly_amount * contribution_years * 12;
-      const payload = payoutPayload(inputs, result, "monthly", deposited);
+      const payload = widgetPayload(payoutPayload(inputs, result, "monthly", deposited));
       return {
         content: [{ type: "text", text: JSON.stringify(payload, null, 2) }],
         structuredContent: payload
@@ -23284,27 +24353,29 @@ function createMcpServer() {
     "project_retirement_with_savvly",
     {
       title: "Project Retirement Trajectory With Savvly",
-      description: "Full retirement simulation showing the projected savings trajectory WITH and WITHOUT a Savvly allocation across the planning horizon (current_age \u2192 life_expectancy). Returns `gap_score`, `possible_higher_monthly_paycheck`, a server-provided headline message, and a per-year `age_dependent_values[]` timeline. Disclaimers + per-field hints under `metadata`. " + DISCLOSURE_REQUIRED_TERSE,
+      description: "Full retirement simulation showing the projected savings trajectory WITH and WITHOUT a Savvly allocation across the planning horizon (current_age \u2192 life_expectancy). Returns `gap_score`, `possible_higher_monthly_paycheck`, a server-provided headline message, and a per-year `age_dependent_values[]` timeline. Disclaimers + per-field hints under `metadata`. " + DISCLOSURE_REQUIRED_TERSE + " " + VISUALIZATION_RECOMMENDED_TERSE + " " + INPUTS_OPTIONAL_NO_PROMPT_TERSE,
       inputSchema: {
-        current_age: external_exports.number().int().min(25).max(79).describe("Current age"),
-        retirement_age: external_exports.number().int().min(50).max(80).describe("Planned retirement age"),
-        life_expectancy: external_exports.number().int().min(60).max(120).default(100).describe("Planning horizon (default 100)").optional(),
-        monthly_contribution: external_exports.number().min(0).describe("Monthly retirement contribution in USD"),
-        current_retirement_savings: external_exports.number().min(0).describe("Current total retirement savings in USD"),
-        monthly_paycheck: external_exports.number().min(0).default(0).describe("Desired monthly retirement paycheck (USD)").optional(),
-        other_retirement_income: external_exports.number().min(0).default(0).describe("Other monthly retirement income (USD)").optional(),
-        annual_income_increase: external_exports.number().min(0).max(20).default(0).describe("Annual contribution % increase").optional(),
-        percentage_in_savvly: external_exports.number().min(0).max(50).default(5).describe("Percentage of retirement savings allocated to Savvly").optional(),
-        pre_retirement_return: external_exports.number().default(6).describe("Expected pre-retirement annual return %").optional(),
-        post_retirement_return: external_exports.number().default(5).describe("Expected post-retirement annual return %").optional(),
-        inflation_rate: external_exports.number().default(3).describe("Expected annual inflation rate %").optional()
+        current_age: external_exports.number().int().min(25).max(79).default(40).describe("Current age (default 40)"),
+        retirement_age: external_exports.number().int().min(50).max(80).default(68).describe("Planned retirement age (default 68)"),
+        life_expectancy: external_exports.number().int().min(60).max(120).default(100).describe("Planning horizon (default 100)"),
+        monthly_contribution: external_exports.number().min(0).default(1e3).describe("Monthly retirement contribution in USD (default 1000)"),
+        current_retirement_savings: external_exports.number().min(0).default(6e4).describe("Current total retirement savings in USD (default 60000)"),
+        monthly_paycheck: external_exports.number().min(0).default(4500).describe("Desired monthly retirement paycheck in USD (default 4500)"),
+        other_retirement_income: external_exports.number().min(0).default(1600).describe("Other monthly retirement income in USD (default 1600)"),
+        annual_income_increase: external_exports.number().min(0).max(20).default(2).describe("Annual contribution % increase (default 2)"),
+        percentage_in_savvly: external_exports.number().min(0).max(50).default(5).describe("Percentage of the retirement portfolio allocated to Savvly (default 5)"),
+        pre_retirement_return: external_exports.number().default(6).describe("Expected pre-retirement annual return % (default 6)"),
+        post_retirement_return: external_exports.number().default(5).describe("Expected post-retirement annual return % (default 5)"),
+        inflation_rate: external_exports.number().default(3).describe("Expected annual inflation rate % (default 3)")
       },
       outputSchema: RetirementResponseSchema.passthrough(),
-      annotations: READ_ONLY_TOOL_ANNOTATIONS
+      annotations: READ_ONLY_TOOL_ANNOTATIONS,
+      // MCP Apps: render the retirement timeline chart inline (see uiMeta).
+      _meta: uiMeta(RETIREMENT_UI_URI)
     },
     wrapToolHandler("project_retirement_with_savvly", async (params) => {
       const result = await simulateRetirement(params);
-      const payload = retirementPayload(params, result);
+      const payload = widgetPayload(retirementPayload(params, result));
       return {
         content: [{ type: "text", text: JSON.stringify(payload, null, 2) }],
         structuredContent: payload