@rizal72/oc-tps-meter 0.0.0-stage → 0.0.1

package/README.md

@@ -1,3 +1,64 @@
-# Temporary Holding Version
+# oc-tps-meter
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Tokens per second, step by step: how fast each answer in the session came, in a panel of the desktop app.
+A bar per step — the session scrolls sideways when it outgrows the panel — the model behind it,
+and what the session spent in tokens.
+
+## Install
+
+```sh
+opencode plugin add @rizal72/oc-tps-meter
+```
+
+Or by hand, one line in `~/.config/opencode/opencode.jsonc`:
+
+```jsonc
+"plugins": ["@rizal72/oc-tps-meter"]
+```
+
+## Update
+
+V2 checks package plugins at startup and never applies the update, so a package only moves when you ask:
+
+```sh
+opencode plugin check     # which of the installed packages are behind
+opencode plugin update    # apply them, and let the server reload
+```
+
+Or install [`@rizal72/oc-plugin-updates`](https://www.npmjs.com/package/@rizal72/oc-plugin-updates): the
+count appears in a pill above the composer, with the update one click away.
+
+## GUI
+
+A tab in the session's side panel: the `+` menu beside the tabs, the command palette, or `/tps`. It opens
+360 px wide every time; drag it wider when a model name needs the room.
+
+Top to bottom: the speed of the last step it could measure, with the model that produced it and the wait for
+the first token; the histogram, one bar per step, newest on the right, a dashed line at the median and one at
+the top of the drawing, where the tallest bar ends — and, when the peak is beyond the scale, a bright cap on
+the bars that cross it — and a gap where a step could not be measured. Pointing at a bar turns the block at the
+top into that step, its time in place of the label. Then a pair of lines per model with how many of its steps
+were measured, its median and its peak; and the totals, cache included.
+
+The chart scrolls sideways: two fingers on the trackpad, shift and the wheel, or the scrollbar, and the small
+hint between the two times says which way there is more. A time carries its date once it is not today's, at
+the ends of the axis and in the label alike. A bar turns red when that step waited more than ten seconds for
+its first token — and the wait in the block above turns red too — because that wait, not the speed, is what
+says you are queued. Bar heights follow the fastest step — only a step more than twice the 95th percentile is
+cut at the top edge, and it keeps its real figure in the block above when it is pointed at — so one exceptional
+step does not flatten the rest.
+
+## What it leaves out
+
+No live speed: a step counts once it has finished, so nothing moves while a reply is streaming. No subagents:
+they run in their own session. No cost and no quota — the app's own header shows what the session cost, and
+[`oc-budget`](../oc-budget/README.md) shows what is left to spend. No history: the session on screen is the
+only thing it measures.
+
+## How it works
+
+It reads the session's own messages through the app every two seconds while the tab is open, and measures each
+step between its first token and the end of the stream. Nothing is stored, nothing leaves the machine. The
+measurement, its thresholds and the traps behind it: [`docs/oc-tps-meter.md`](../../docs/oc-tps-meter.md).
+
+Requires OpenCode v2. TypeScript, no server half, no runtime dependencies.

package/dist/gui-experimental.cjs

@@ -0,0 +1,49 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require("solid-js/web"),t=require("@opencode/plugin/gui"),n=require("solid-js");var r=e=>e!==void 0&&e>1e4,i=e=>typeof e==`number`&&Number.isFinite(e)?e:0,a=e=>typeof e==`number`&&Number.isFinite(e)?e:void 0,o=e=>e.time?.completed!==void 0,s=e=>{let t=a(e.time?.firstToken);if(t!==void 0)return t;let n;for(let t of e.content??[]){if(t?.type!==`reasoning`)continue;let e=a(t.time?.created);e!==void 0&&(n===void 0||e<n)&&(n=e)}return n},c=e=>{let t=i(e.tokens?.output)+i(e.tokens?.reasoning),n=i(e.time?.created),r=s(e),o=a(e.time?.streamed),c=r!==void 0&&o!==void 0?o-r:void 0,l=c!==void 0&&c>=200&&t>=20,u=e.model?.providerID&&e.model?.id?e.model.providerID+`/`+e.model.id:``;return{id:e.id??``,created:n,tokens:t,tps:l&&c!==void 0?t/(c/1e3):void 0,ttft:r!==void 0&&n!==0?r-n:void 0,model:u,measured:l}},l=e=>{if(e.length===0)return;let t=[...e].sort((e,t)=>e-t),n=Math.floor(t.length/2);return t.length%2?t[n]:(t[n-1]+t[n])/2},u=e=>{if(e.length===0)return;let t=[...e].sort((e,t)=>e-t);return t[Math.max(0,Math.ceil(t.length*.95)-1)]},d=e=>{if(e.length===0)return;let t=Math.max(...e);return Math.min(t,2*(u(e)??t))},f=(e,t)=>{let n=t?e.findIndex(e=>e.id===t):-1;return n===-1?{messages:[...e],found:!1}:{messages:e.slice(0,n),found:!0}},ee=e=>{let t=new Map;for(let n of e){if(n.tps===void 0)continue;let e=t.get(n.model)??[];e.push(n.tps),t.set(n.model,e)}return[...t].map(([e,t])=>({model:e,steps:t.length,median:l(t),peak:Math.max(...t)})).sort((e,t)=>t.steps-e.steps||e.model.localeCompare(t.model))},te=(e,t,n)=>{if(e<=0)return{first:0,last:-1};let r=Math.max(0,Math.min(e-1,Math.floor(t/4)));return{first:r,last:Math.min(e-1,Math.max(r,Math.ceil((t+n)/4)-1))}},p=(e,t,n)=>t-n-e<=1,m=(e,t)=>t.user?p(t.scrollLeft,t.scrollWidth,t.clientWidth):e,ne=e=>{let t=e.filter(o),n=t.map(c).sort((e,t)=>e.created-t.created),r={input:0,output:0,reasoning:0,cacheRead:0,cacheWrite:0};for(let e of t)r.input+=i(e.tokens?.input),r.output+=i(e.tokens?.output),r.reasoning+=i(e.tokens?.reasoning),r.cacheRead+=i(e.tokens?.cache?.read),r.cacheWrite+=i(e.tokens?.cache?.write);let a=r.input+r.cacheRead+r.cacheWrite;a>0&&(r.cacheHit=r.cacheRead/a);let s=n.flatMap(e=>e.tps===void 0?[]:[e.tps]),u=n.filter(e=>e.measured);return{steps:n,totals:r,measured:u.length,median:l(s),peak:s.length?Math.max(...s):void 0,scale:d(s),last:u[u.length-1]}},h=(0,e.template)(`<div class=tpsm-total><span></span><span class=tpsm-amount>`),g=(0,e.template)(`<span class=tpsm-num>`),re=(0,e.template)(`<div class=tpsm-block><div class=tpsm-label></div><div class=tpsm-figure><span class=tpsm-unit> t/s</span></div><div class=tpsm-sub><span class=tpsm-smodel>`),ie=(0,e.template)(`<svg><line x1=0 stroke=currentColor stroke-width=1 stroke-dasharray="3 3"opacity=0.3></svg>`,!1,!0,!1),ae=(0,e.template)(`<svg><line x1=0 y1=0.5 y2=0.5 stroke=currentColor stroke-width=1 stroke-dasharray="3 3"opacity=0.3></svg>`,!1,!0,!1),oe=(0,e.template)(`<div class=tpsm-warn>the revert point is older than the messages read: undone steps may be counted`),se=(0,e.template)(`<div class=tpsm-block><div class=tpsm-chart><svg class=tpsm-hist height=120 role=img></svg></div><div class=tpsm-axis><span></span><span class=tpsm-pan></span><span class=tpsm-end></span></div><div class=tpsm-counts></div><div class=tpsm-models><div class=tpsm-label>by model`),ce=(0,e.template)(`<div class=tpsm-block><div class=tpsm-label>totals`),le=(0,e.template)(`<div class=tpsm>`),ue=(0,e.template)(`<div class=tpsm-block><div class=tpsm-label>stale</div><div class=tpsm-sub>read <!> ago, the last attempt failed: `),de=(0,e.template)(`<div class=tpsm-note>`),fe=(0,e.template)(`<div class=tpsm-note>The messages could not be read: `),pe=(0,e.template)(`<div class=tpsm-note>No assistant step yet.`),me=(0,e.template)(`<span>`),he=(0,e.template)(`<svg><rect fill=currentColor></svg>`,!1,!0,!1),ge=(0,e.template)(`<svg><rect y=0 height=2 fill=currentColor opacity=1></svg>`,!1,!0,!1),_=(0,e.template)(`<div class=tpsm-mrow><div class=tpsm-mname></div><div class=tpsm-mnum>`),_e=2e3,v=360,y=120,b=200,x=2e3,S=`
+/* Muted small capitals for labels, one large figure, hairlines between blocks, no borders and no cards. */
+.tpsm { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: auto; font-size: 12px;
+  color: var(--v2-text-text-base); }
+.tpsm-block { padding: 14px 12px; }
+.tpsm-block + .tpsm-block { border-top: 1px solid color-mix(in srgb, var(--v2-text-text-base) 8%, transparent); }
+.tpsm-label { color: var(--v2-text-text-faint); text-transform: uppercase; letter-spacing: .06em; font-size: 11px;
+  font-weight: 600; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
+.tpsm-figure { font-size: 28px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; }
+/* The unit is a label, not part of the figure: bold digits, a quiet "t/s" beside them. */
+.tpsm-unit { font-size: 14px; font-weight: 400; opacity: .7; }
+/* One line of room kept even when a step carries neither model nor time, so the chart never jumps a row. */
+.tpsm-sub { color: var(--v2-text-text-faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis;
+  white-space: nowrap; min-height: 1.4em; }
+/* The chart pans sideways and nothing else: a step is a fixed 4 px, so a long session scrolls natively. */
+.tpsm-chart { display: flex; overflow-x: auto; overflow-y: hidden; }
+.tpsm-hist { display: block; flex: 0 0 auto; margin-left: auto; height: ${y}px;
+  color: var(--v2-text-text-base); }
+.tpsm-axis { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: baseline; margin-top: 4px;
+  color: var(--v2-text-text-faint); font-variant-numeric: tabular-nums; }
+/* The way to the earlier steps, between the two dates: the only place it belongs, and silent when it all fits. */
+.tpsm-pan { font-size: 10px; letter-spacing: .04em; opacity: .8; }
+.tpsm-end { text-align: right; }
+/* The model of the step being described: white, so a name keeps its own against the figure above it. */
+.tpsm-smodel { color: var(--v2-text-text-base); }
+/* A figure the line exists for — a median, a peak, a time to first token: white and bold, the words around
+   it keeping the faint they had. */
+.tpsm-num { color: var(--v2-text-text-base); font-weight: 600; }
+/* A slow step wears the theme's danger at the weight it had at 45% alpha — mixed with the surface, because the
+   bar's opacity is 1 — and the pointer raises a bar to the danger itself. The figure above wears that danger
+   unmixed: eleven pixels of text at the muted tone would not be readable, and the figure is what is read.
+   Kept after the num rule on purpose: same specificity, so the later one wins. */
+.tpsm-slow { color: var(--v2-state-fg-danger); }
+.tpsm-hot { fill: color-mix(in srgb, var(--v2-state-fg-danger) 45%, var(--v2-background-bg-base)); }
+.tpsm-hot-on { fill: var(--v2-state-fg-danger); }
+.tpsm-counts { margin-top: 6px; color: var(--v2-text-text-faint); line-height: 1.4; font-variant-numeric: tabular-nums; }
+.tpsm-warn { margin-top: 4px; color: var(--v2-text-text-faint); line-height: 1.4; }
+.tpsm-models { margin-top: 6px; }
+/* One model per block, two lines read as one unit: the same rhythm as the block above, and the space that
+   tells two models apart on the pair's top only, never between a name and its numbers. */
+.tpsm-mrow { line-height: 1.4; }
+.tpsm-mrow + .tpsm-mrow { padding-top: 6px; }
+.tpsm-mname { overflow-wrap: anywhere; }
+.tpsm-mnum { color: var(--v2-text-text-faint); font-variant-numeric: tabular-nums; }
+.tpsm-total { display: flex; justify-content: space-between; gap: 12px; line-height: 1.4; }
+.tpsm-total > :first-child { color: var(--v2-text-text-faint); }
+.tpsm-amount { font-variant-numeric: tabular-nums; }
+.tpsm-note { padding: 12px; color: var(--v2-text-text-faint); }
+`,C=e=>e>=100?String(Math.round(e)):e.toFixed(1),ve=e=>e.toLocaleString(),w=(e,t)=>new Date(e).toDateString()===new Date(t).toDateString(),T=(e,t)=>t?new Date(e).toLocaleString(void 0,{month:`numeric`,day:`numeric`,hour:`2-digit`,minute:`2-digit`}):new Date(e).toLocaleTimeString(void 0,{hour:`2-digit`,minute:`2-digit`}),ye=e=>e<6e4?Math.round(e/1e3)+`s`:Math.round(e/6e4)+`m`,be=(e,t)=>t?new Date(e).toLocaleString(void 0,{month:`numeric`,day:`numeric`,hour:`2-digit`,minute:`2-digit`,second:`2-digit`}):new Date(e).toLocaleTimeString(void 0,{hour:`2-digit`,minute:`2-digit`,second:`2-digit`}),xe=e=>e.map(e=>typeof e==`string`?e:e.figure).join(``),E=e=>e===void 0?`—`:C(e),Se=async e=>{let t=[],n;for(;;){let r=await e.server.client.message.list({sessionID:e.id,limit:b,...n?{cursor:n}:{order:`desc`}});t.push(...r.data);let i=r.cursor?.next??void 0;if(!i)return{messages:t.reverse(),truncated:!1};if(t.length>=x)return{messages:t.reverse(),truncated:!0};n=i}},Ce=async e=>{try{return(await e.server.client.session.get({sessionID:e.id})).revert?.messageID}catch(e){throw Error(`the revert point could not be read (`+(e instanceof Error?e.message:String(e))+`)`)}},D=t=>(()=>{var n=h(),r=n.firstChild,i=r.nextSibling;return(0,e.insert)(r,()=>t.label),(0,e.insert)(i,()=>t.value),n})(),O=t=>(0,e.createComponent)(n.For,{get each(){return t.pieces},children:t=>typeof t==`string`?t:(()=>{var n=g();return(0,e.insert)(n,()=>t.figure),n})()}),k=t.Plugin.define({setup(i){let a=()=>i.sessions.current(),o=()=>{let[o,s]=(0,n.createSignal)(void 0),[c,l]=(0,n.createSignal)(void 0),[u,d]=(0,n.createSignal)(!1),[h,g]=(0,n.createSignal)(Date.now()),[b,x]=(0,n.createSignal)(0),[S,k]=(0,n.createSignal)(0),[A,j]=(0,n.createSignal)(void 0),M,N=!0,P,F=0;(0,t.createKeyed)(()=>a()?.key,e=>{let t=!0,r=0;s(void 0),l(void 0),d(!0),j(void 0),k(0),N=!0;let i=async()=>{let n=a();if(!n||n.key!==e)return;let i=r+=1,o=()=>t&&i===r&&a()?.key===e;try{let[e,t]=await Promise.all([Se(n),Ce(n)]);if(!o())return;let r=f(e.messages,t),i=r.messages.filter(e=>e.type===`assistant`);F=performance.now()+150,s({readAt:Date.now(),summary:ne(i),truncated:e.truncated,revertLost:t!==void 0&&!r.found&&e.truncated}),l(void 0),requestAnimationFrame(()=>G())}catch(e){if(!o())return;l({at:Date.now(),error:e instanceof Error?e.message:String(e)})}finally{t&&i===r&&d(!1)}};i();let o=setInterval(()=>{g(Date.now()),i()},_e);(0,n.onCleanup)(()=>{t=!1,clearInterval(o)})},{otherwise:()=>{s(void 0),l(void 0),d(!1),j(void 0),k(0),N=!0}});let I=()=>o(),L=()=>o()?.summary,R=()=>{let e=o(),t=c();return e&&t&&t.at>e.readAt?t:void 0},z=()=>L()?.steps??[],we=()=>L()?.last,Te=()=>L()?.median,B=()=>L()?.scale??1,V=e=>Math.max(0,y-e/(B()||1)*y),Ee=e=>e>B(),H=()=>z().length*4,U=()=>Math.max(H(),b()),W=()=>Math.max(0,U()-H()),De=()=>te(z().length,S(),b());(0,n.onMount)(()=>{i.layout.side.width(`tps`)!==v&&i.layout.side.resize(`tps`,v)});let G=()=>{let e=M;if(!e)return;F=performance.now()+150;let t=Math.max(0,e.scrollWidth-e.clientWidth),n=N?t:Math.min(e.scrollLeft,t);n!==e.scrollLeft&&(P=n,e.scrollLeft=n),k(n)},Oe=()=>{let e=M;if(!e)return;if(k(e.scrollLeft),j(void 0),P!==void 0&&Math.abs(e.scrollLeft-P)<=1){P=void 0;return}let t=performance.now()>F;N=m(N,{user:t,scrollLeft:e.scrollLeft,scrollWidth:e.scrollWidth,clientWidth:e.clientWidth})},K,ke=e=>{M=e,K?.disconnect(),K=new ResizeObserver(()=>{x(e.clientWidth),requestAnimationFrame(G)}),K.observe(e),x(e.clientWidth),requestAnimationFrame(G)};(0,n.onCleanup)(()=>K?.disconnect());let Ae=e=>{let t=z();if(!t.length)return;let n=e.currentTarget.getBoundingClientRect().left,r=Math.floor((e.clientX-n-W())/4);j(Math.max(0,Math.min(t.length-1,r)))},q=()=>{let e=A();return e!==void 0&&e<z().length?e:void 0},J=()=>{let e=q();return e===void 0?we():z()[e]},je=()=>{let e=J();return q()!==void 0&&e?be(e.created,!w(e.created,h())):`last measured`},Me=()=>ee(z()),Y=()=>{let e=Te();return e===void 0?void 0:V(e)},Ne=()=>{let e=J();return e?.tps===void 0?`—`:C(e.tps)},X=()=>J()?.model??``,Pe=()=>{let e=J()?.ttft;if(e!==void 0)return e<1e3?[String(Math.round(e)),` ms`]:[(e/1e3).toFixed(1),` s`]},Z=()=>{let e=z(),{first:t,last:n}=De(),r=e[t]?.created,i=e[n]?.created;if(r===void 0||i===void 0)return[``,``];let a=!w(r,i),o=h();return[T(r,a||!w(r,o)),T(i,a||!w(i,o))]},Fe=()=>{if(H()<=b())return``;let e=p(S(),H(),b());return S()<=1?`scroll →`:e?`← scroll`:`← scroll →`},Q=()=>{let e=L();if(!e)return[];let t=[e.steps.length+` steps · `+e.measured+` measured · median `,{figure:E(e.median)},` t/s · peak `,{figure:E(e.peak)},` t/s`];return o()?.truncated&&t.push(` · truncated`),t},Ie=()=>xe(Q()),Le=e=>[(e.steps===1?`1 step`:e.steps+` steps`)+` · med `,{figure:E(e.median)},` t/s · peak `,{figure:E(e.peak)},` t/s`],$=e=>{let t=L()?.totals;return t?ve(e(t)):``},Re=()=>{let e=L()?.totals.cacheHit;return e===void 0?`—`:Math.round(e*100)+`%`};return(()=>{var t=le();return(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return R()},children:t=>(()=>{var n=ue(),r=n.firstChild.nextSibling,i=r.firstChild.nextSibling;return i.nextSibling,(0,e.insert)(r,()=>ye(h()-(I()?.readAt??h())),i),(0,e.insert)(r,()=>t().error,null),n})()}),null),(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return I()},get fallback(){return(0,e.createComponent)(n.Show,{get when(){return c()},get fallback(){return(()=>{var t=de();return(0,e.insert)(t,()=>u()?`reading this session's messages…`:`No session is routed.`),t})()},children:t=>(()=>{var n=fe();return n.firstChild,(0,e.insert)(n,()=>t().error,null),n})()})},get children(){return(0,e.createComponent)(n.Show,{get when(){return z().length>0},get fallback(){return pe()},get children(){return[(()=>{var t=re(),i=t.firstChild,a=i.nextSibling,o=a.firstChild,s=a.nextSibling,c=s.firstChild;return(0,e.insert)(i,je),(0,e.insert)(a,Ne,o),(0,e.insert)(c,X),(0,e.insert)(s,(0,e.createComponent)(n.Show,{get when(){return Pe()},children:t=>[(0,e.memo)(()=>X()?` · `:``),`TTFT`,` `,(()=>{var n=me();return(0,e.insert)(n,()=>t()[0]),(0,e.effect)(()=>(0,e.className)(n,r(J()?.ttft)?`tpsm-num tpsm-slow`:`tpsm-num`)),n})(),(0,e.memo)(()=>t()[1])]}),null),t})(),(()=>{var t=se(),i=t.firstChild,a=i.firstChild,s=i.nextSibling,c=s.firstChild,l=c.nextSibling,u=l.nextSibling,d=s.nextSibling,f=d.nextSibling;return f.firstChild,i.addEventListener(`scroll`,Oe),(0,e.use)(ke,i),a.addEventListener(`pointerleave`,()=>j(void 0)),a.$$pointermove=Ae,(0,e.insert)(a,(0,e.createComponent)(n.For,{get each(){return z()},children:(t,i)=>{let a=t.tps;return a===void 0?null:[(()=>{var n=he();return(0,e.setAttribute)(n,`width`,3),(0,e.effect)(o=>{var s=W()+i()*4,c=V(a),l=y-V(a),u=r(t.ttft)?i()===A()?`tpsm-hot tpsm-hot-on`:`tpsm-hot`:void 0,d=r(t.ttft)||i()===A()?1:i()===z().length-1?.9:.45;return s!==o.e&&(0,e.setAttribute)(n,`x`,o.e=s),c!==o.t&&(0,e.setAttribute)(n,`y`,o.t=c),l!==o.a&&(0,e.setAttribute)(n,`height`,o.a=l),u!==o.o&&(0,e.setAttribute)(n,`class`,o.o=u),d!==o.i&&(0,e.setAttribute)(n,`opacity`,o.i=d),o},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),n})(),(0,e.createComponent)(n.Show,{get when(){return Ee(a)},get children(){var t=ge();return(0,e.setAttribute)(t,`width`,3),(0,e.effect)(()=>(0,e.setAttribute)(t,`x`,W()+i()*4)),t}})]}}),null),(0,e.insert)(a,(0,e.createComponent)(n.Show,{get when(){return Y()!==void 0},get children(){var t=ie();return(0,e.effect)(n=>{var r=U(),i=Y(),a=Y();return r!==n.e&&(0,e.setAttribute)(t,`x2`,n.e=r),i!==n.t&&(0,e.setAttribute)(t,`y1`,n.t=i),a!==n.a&&(0,e.setAttribute)(t,`y2`,n.a=a),n},{e:void 0,t:void 0,a:void 0}),t}}),null),(0,e.insert)(a,(0,e.createComponent)(n.Show,{get when(){return L()?.scale},get children(){var t=ae();return(0,e.effect)(()=>(0,e.setAttribute)(t,`x2`,U())),t}}),null),(0,e.insert)(c,()=>Z()[0]),(0,e.insert)(l,Fe),(0,e.insert)(u,()=>Z()[1]),(0,e.insert)(d,(0,e.createComponent)(O,{get pieces(){return Q()}})),(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return o()?.revertLost},get children(){return oe()}}),f),(0,e.insert)(f,(0,e.createComponent)(n.For,{get each(){return Me()},children:t=>(()=>{var n=_(),r=n.firstChild,i=r.nextSibling;return(0,e.insert)(r,()=>t.model||`—`),(0,e.insert)(i,(0,e.createComponent)(O,{get pieces(){return Le(t)}})),n})()}),null),(0,e.effect)(t=>{var n=U(),r=Ie();return n!==t.e&&(0,e.setAttribute)(a,`width`,t.e=n),r!==t.t&&(0,e.setAttribute)(a,`aria-label`,t.t=r),t},{e:void 0,t:void 0}),t})(),(()=>{var t=ce();return t.firstChild,(0,e.insert)(t,(0,e.createComponent)(D,{label:`input`,get value(){return $(e=>e.input)}}),null),(0,e.insert)(t,(0,e.createComponent)(D,{label:`output`,get value(){return $(e=>e.output)}}),null),(0,e.insert)(t,(0,e.createComponent)(D,{label:`reasoning`,get value(){return $(e=>e.reasoning)}}),null),(0,e.insert)(t,(0,e.createComponent)(D,{label:`cache read`,get value(){return $(e=>e.cacheRead)}}),null),(0,e.insert)(t,(0,e.createComponent)(D,{label:`cache write`,get value(){return $(e=>e.cacheWrite)}}),null),(0,e.insert)(t,(0,e.createComponent)(D,{label:`cache hit`,get value(){return Re()}}),null),t})()]}})}}),null),t})()},s={id:`tps`,get title(){return`TPS`},closable:`hover`};i.add(t.Style,S),i.add(t.Panel,{id:`tps`,region:`side`,width:v,list:e=>e.open.includes(`tps`)?[s]:[],render:()=>(0,e.createComponent)(o,{})});let c=()=>{let e=a();e&&i.layout.toggle(`${i.id}:tps`,e)};i.add(t.Command,()=>({id:`open`,title:`TPS Meter`,description:`Decode speed of every closed step in this session`,keywords:`tps speed tokens decode throughput latency ttft`,section:`session`,slash:{name:`tps`},enabled:!!a(),run:c})),i.add(t.MenuItem,()=>{let e=a();return{menu:`session.panel`,id:`tps`,title:`TPS Meter`,icon:`window-analytics`,keybind:`${i.id}.open`,opened:!!e&&i.layout.state(`${i.id}:tps`,e)!==`closed`,run:c}})}});(0,e.delegateEvents)([`pointermove`]),exports.default=k;

package/gui.tsx

@@ -0,0 +1,655 @@
+// oc-tps-meter — GUI half: a side panel drawing tokens per second for every closed step of the session on
+// screen, as a histogram, with the figures around it. The metric is `metrics.ts`.
+import { Command, MenuItem, Panel, Plugin, Style, createKeyed, type MountedSession, type PanelTab } from "@opencode/plugin/gui"
+import { For, Show, createSignal, onCleanup, onMount } from "solid-js"
+
+import {
+	BAR_PX,
+	atRightEnd,
+	followAfter,
+	byModel,
+	isSlow,
+	revertCut,
+	STEP_PX,
+	summarise,
+	visibleRange,
+	type Step,
+	type StepMessage,
+	type ModelStats,
+	type Summary,
+} from "./metrics.ts"
+
+const REFRESH_MS = 2_000
+/** The panel's width, re-applied at every open. */
+const PANEL_WIDTH = 360
+/** The drawing's height in pixels, where a bar's top is measured from the baseline of a 0-based scale. */
+const HEIGHT = 120
+/** What a read asks for in one page, and the most it will accumulate before saying so. */
+const PAGE = 200
+const MAX_MESSAGES = 2_000
+
+const CSS = `
+/* Muted small capitals for labels, one large figure, hairlines between blocks, no borders and no cards. */
+.tpsm { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: auto; font-size: 12px;
+  color: var(--v2-text-text-base); }
+.tpsm-block { padding: 14px 12px; }
+.tpsm-block + .tpsm-block { border-top: 1px solid color-mix(in srgb, var(--v2-text-text-base) 8%, transparent); }
+.tpsm-label { color: var(--v2-text-text-faint); text-transform: uppercase; letter-spacing: .06em; font-size: 11px;
+  font-weight: 600; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
+.tpsm-figure { font-size: 28px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; }
+/* The unit is a label, not part of the figure: bold digits, a quiet "t/s" beside them. */
+.tpsm-unit { font-size: 14px; font-weight: 400; opacity: .7; }
+/* One line of room kept even when a step carries neither model nor time, so the chart never jumps a row. */
+.tpsm-sub { color: var(--v2-text-text-faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis;
+  white-space: nowrap; min-height: 1.4em; }
+/* The chart pans sideways and nothing else: a step is a fixed 4 px, so a long session scrolls natively. */
+.tpsm-chart { display: flex; overflow-x: auto; overflow-y: hidden; }
+.tpsm-hist { display: block; flex: 0 0 auto; margin-left: auto; height: ${HEIGHT}px;
+  color: var(--v2-text-text-base); }
+.tpsm-axis { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: baseline; margin-top: 4px;
+  color: var(--v2-text-text-faint); font-variant-numeric: tabular-nums; }
+/* The way to the earlier steps, between the two dates: the only place it belongs, and silent when it all fits. */
+.tpsm-pan { font-size: 10px; letter-spacing: .04em; opacity: .8; }
+.tpsm-end { text-align: right; }
+/* The model of the step being described: white, so a name keeps its own against the figure above it. */
+.tpsm-smodel { color: var(--v2-text-text-base); }
+/* A figure the line exists for — a median, a peak, a time to first token: white and bold, the words around
+   it keeping the faint they had. */
+.tpsm-num { color: var(--v2-text-text-base); font-weight: 600; }
+/* A slow step wears the theme's danger at the weight it had at 45% alpha — mixed with the surface, because the
+   bar's opacity is 1 — and the pointer raises a bar to the danger itself. The figure above wears that danger
+   unmixed: eleven pixels of text at the muted tone would not be readable, and the figure is what is read.
+   Kept after the num rule on purpose: same specificity, so the later one wins. */
+.tpsm-slow { color: var(--v2-state-fg-danger); }
+.tpsm-hot { fill: color-mix(in srgb, var(--v2-state-fg-danger) 45%, var(--v2-background-bg-base)); }
+.tpsm-hot-on { fill: var(--v2-state-fg-danger); }
+.tpsm-counts { margin-top: 6px; color: var(--v2-text-text-faint); line-height: 1.4; font-variant-numeric: tabular-nums; }
+.tpsm-warn { margin-top: 4px; color: var(--v2-text-text-faint); line-height: 1.4; }
+.tpsm-models { margin-top: 6px; }
+/* One model per block, two lines read as one unit: the same rhythm as the block above, and the space that
+   tells two models apart on the pair's top only, never between a name and its numbers. */
+.tpsm-mrow { line-height: 1.4; }
+.tpsm-mrow + .tpsm-mrow { padding-top: 6px; }
+.tpsm-mname { overflow-wrap: anywhere; }
+.tpsm-mnum { color: var(--v2-text-text-faint); font-variant-numeric: tabular-nums; }
+.tpsm-total { display: flex; justify-content: space-between; gap: 12px; line-height: 1.4; }
+.tpsm-total > :first-child { color: var(--v2-text-text-faint); }
+.tpsm-amount { font-variant-numeric: tabular-nums; }
+.tpsm-note { padding: 12px; color: var(--v2-text-text-faint); }
+`
+
+type Reading = {
+	readAt: number
+	summary: Summary
+	truncated: boolean
+	/** A revert was staged and its message was older than what the read reached. */
+	revertLost: boolean
+}
+
+type Failure = { at: number; error: string }
+
+/** A speed that reads at a glance: whole numbers once they are three digits. */
+const speed = (value: number) => (value >= 100 ? String(Math.round(value)) : value.toFixed(1))
+
+const count = (value: number) => value.toLocaleString()
+
+/** Whether two instants fall on the same local day: what decides if a time needs its date beside it. */
+const sameDay = (a: number, b: number) => new Date(a).toDateString() === new Date(b).toDateString()
+
+const clock = (at: number, withDay: boolean) =>
+	withDay
+		? new Date(at).toLocaleString(undefined, { month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit" })
+		: new Date(at).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })
+
+const age = (ms: number) => (ms < 60_000 ? Math.round(ms / 1000) + "s" : Math.round(ms / 60_000) + "m")
+
+/** `HH:MM:SS`, the granularity one step's instant needs, behind its date when that is not today. */
+const stamp = (at: number, withDay: boolean) =>
+	withDay
+		? new Date(at).toLocaleString(undefined, {
+				month: "numeric",
+				day: "numeric",
+				hour: "2-digit",
+				minute: "2-digit",
+				second: "2-digit",
+			})
+		: new Date(at).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit", second: "2-digit" })
+
+/** A line as the words around a `figure`: the words stay faint, a figure is drawn bright, because it is the
+ *  number the line exists for. One shape for the median, the peak and the time to first token, so they read
+ *  the same wherever they appear. */
+type Piece = string | { figure: string }
+
+const piecesText = (pieces: Piece[]) => pieces.map((piece) => (typeof piece === "string" ? piece : piece.figure)).join("")
+
+/** A speed, or the dash a line shows where it has none. */
+const tps = (value: number | undefined) => (value === undefined ? "—" : speed(value))
+
+/** Every message of the session, assistant and otherwise, handed back oldest first: the revert cut has to find
+ *  the message it points at, which is usually a user one. */
+const readAll = async (session: MountedSession): Promise<{ messages: StepMessage[]; truncated: boolean }> => {
+	const messages: StepMessage[] = []
+	let cursor: string | undefined
+	for (;;) {
+		// The order belongs to the first request only: a cursor carries its own direction.
+		const page = await session.server.client.message.list({
+			sessionID: session.id,
+			limit: PAGE,
+			...(cursor ? { cursor } : { order: "desc" as const }),
+		})
+		messages.push(...page.data)
+		const next = page.cursor?.next ?? undefined
+		if (!next) return { messages: messages.reverse(), truncated: false }
+		if (messages.length >= MAX_MESSAGES) return { messages: messages.reverse(), truncated: true }
+		cursor = next
+	}
+}
+
+/** The revert point, when the session carries a staged revert. A failure is not a blank panel: it is thrown so
+ *  the read keeps the figures it has, and the note says this is why. */
+const revertOf = async (session: MountedSession): Promise<string | undefined> => {
+	try {
+		const info = await session.server.client.session.get({ sessionID: session.id })
+		return info.revert?.messageID
+	} catch (error) {
+		throw new Error("the revert point could not be read (" + (error instanceof Error ? error.message : String(error)) + ")")
+	}
+}
+
+const Total = (props: { label: string; value: string }) => (
+	<div class="tpsm-total">
+		<span>{props.label}</span>
+		<span class="tpsm-amount">{props.value}</span>
+	</div>
+)
+
+const Figures = (props: { pieces: Piece[] }) => (
+	<For each={props.pieces}>
+		{(piece) => (typeof piece === "string" ? piece : <span class="tpsm-num">{piece.figure}</span>)}
+	</For>
+)
+
+export default Plugin.define({
+	setup(ctx) {
+		const current = () => ctx.sessions.current()
+
+		const View = () => {
+			const [reading, setReading] = createSignal<Reading | undefined>(undefined)
+			const [failure, setFailure] = createSignal<Failure | undefined>(undefined)
+			const [loading, setLoading] = createSignal(false)
+			/** The instant the note about age is read against, bumped by the poll so it never freezes. */
+			const [now, setNow] = createSignal(Date.now())
+			const [viewport, setViewport] = createSignal(0)
+			const [scrolled, setScrolled] = createSignal(0)
+			const [hovered, setHovered] = createSignal<number | undefined>(undefined)
+			let box: HTMLDivElement | undefined
+			/** True while the window sits at the right end. Written by the user's own scrolling only, so a read
+			 *  that lands while they are reading back does not yank them forward. */
+			let follow = true
+			/** Where this plugin last scrolled to itself: its own event must not touch `follow`. */
+			let ownScroll: number | undefined
+			/** Until this instant every scroll event is the layout's doing — a clamp, a resize, our own settle —
+			 *  never the user's word on where they want to be. */
+			let programmaticUntil = 0
+
+			// Keyed by `session.key`: another session means another read, and it starts blank so no figure of
+			// the session before is ever drawn under this one's name. Each run owns its timer and its
+			// `live` flag, so a late reply for the key it replaced is dropped twice over.
+			createKeyed(
+				() => current()?.key,
+				(key: string) => {
+					let live = true
+					/** This key's reads, in the order they started: only the latest may write, errors included. */
+					let sequence = 0
+					setReading(undefined)
+					setFailure(undefined)
+					setLoading(true)
+					// A new session inherits no offset: the right end, no hover, and following back on.
+					setHovered(undefined)
+					setScrolled(0)
+					follow = true
+
+					const read = async () => {
+						const session = current()
+						if (!session || session.key !== key) return
+						const mine = (sequence += 1)
+						const latest = () => live && mine === sequence && current()?.key === key
+						try {
+							const [page, revert] = await Promise.all([readAll(session), revertOf(session)])
+							if (!latest()) return
+							const cut = revertCut(page.messages, revert)
+							// Assistant messages only are steps; the user and compaction ones existed for the cut.
+							const kept = cut.messages.filter((message) => message.type === "assistant")
+							// The content is about to change width: any scroll event until the layout settles is
+							// the browser's, not the user's.
+							programmaticUntil = performance.now() + 150
+							setReading({
+								readAt: Date.now(),
+								summary: summarise(kept),
+								truncated: page.truncated,
+								revertLost: revert !== undefined && !cut.found && page.truncated,
+							})
+							setFailure(undefined)
+							requestAnimationFrame(() => settle())
+						} catch (error) {
+							if (!latest()) return
+							setFailure({ at: Date.now(), error: error instanceof Error ? error.message : String(error) })
+						} finally {
+							if (live && mine === sequence) setLoading(false)
+						}
+					}
+					void read()
+					// The app pushes no change event for message data, so the panel asks on a clock; the same tick
+					// moves the instant the stale age is read against.
+					const timer = setInterval(() => {
+						setNow(Date.now())
+						void read()
+					}, REFRESH_MS)
+					onCleanup(() => {
+						live = false
+						clearInterval(timer)
+					})
+				},
+				{
+					otherwise: () => {
+						setReading(undefined)
+						setFailure(undefined)
+						setLoading(false)
+						setHovered(undefined)
+						setScrolled(0)
+						follow = true
+					},
+				},
+			)
+
+			const value = () => reading()
+			const summary = () => reading()?.summary
+			/** A failed read after a good one: the figures stay, their age says they are old. */
+			const stale = () => {
+				const last = reading()
+				const missed = failure()
+				return last && missed && missed.at > last.readAt ? missed : undefined
+			}
+
+			const steps = () => summary()?.steps ?? []
+			const lastStep = () => summary()?.last
+			const medianTps = () => summary()?.median
+			// The drawing stops at the peak, or at twice the 95th percentile when one step is beyond both: that
+			// step is cut at the top edge instead of flattening all the others. A short session's p95 is its peak.
+			const scale = () => summary()?.scale ?? 1
+			const y = (tps: number) => Math.max(0, HEIGHT - (tps / (scale() || 1)) * HEIGHT)
+			const clipped = (tps: number) => tps > scale()
+
+			// The chart is one bar per step in real pixels, so it can be wider than the panel and scrolls sideways.
+			const contentWidth = () => steps().length * STEP_PX
+			const chartWidth = () => Math.max(contentWidth(), viewport())
+			const chartLeft = () => Math.max(0, chartWidth() - contentWidth())
+			const range = () => visibleRange(steps().length, scrolled(), viewport())
+
+			// The width is re-applied once at mount, never reactively, so a drag is not fought.
+			onMount(() => {
+				if (ctx.layout.side.width("tps") !== PANEL_WIDTH) ctx.layout.side.resize("tps", PANEL_WIDTH)
+			})
+			/** After a render: follow the newest only when the window was already at the right end, and clamp an
+			 *  offset the content no longer has. */
+			const settle = () => {
+				const element = box
+				if (!element) return
+				programmaticUntil = performance.now() + 150
+				const end = Math.max(0, element.scrollWidth - element.clientWidth)
+				const target = follow ? end : Math.min(element.scrollLeft, end)
+				if (target !== element.scrollLeft) {
+					ownScroll = target
+					element.scrollLeft = target
+				}
+				setScrolled(target)
+			}
+			const onScroll = () => {
+				const element = box
+				if (!element) return
+				setScrolled(element.scrollLeft)
+				// The bar the pointer was over is no longer where it pointed, so the block goes back to the newest
+				// measured step rather than describe a bar that has moved.
+				setHovered(undefined)
+				// The scroll this plugin just made arrives as an event too, and it is not the user's word.
+				if (ownScroll !== undefined && Math.abs(element.scrollLeft - ownScroll) <= 1) {
+					ownScroll = undefined
+					return
+				}
+				// Only a scroll the user made may move the latch: a clamp after the content shrank arrives as a
+				// scroll event too, and it always lands at the right end (docs/oc-tps-meter.md, Traps).
+				const user = performance.now() > programmaticUntil
+				follow = followAfter(follow, {
+					user,
+					scrollLeft: element.scrollLeft,
+					scrollWidth: element.scrollWidth,
+					clientWidth: element.clientWidth,
+				})
+			}
+			/** The chart's own wrapper, which the observer has to follow: it comes and goes with the steps. */
+			let observer: ResizeObserver | undefined
+			const watch = (element: HTMLDivElement) => {
+				box = element
+				observer?.disconnect()
+				observer = new ResizeObserver(() => {
+					setViewport(element.clientWidth)
+					requestAnimationFrame(settle)
+				})
+				observer.observe(element)
+				setViewport(element.clientWidth)
+				requestAnimationFrame(settle)
+			}
+			onCleanup(() => observer?.disconnect())
+			/** A step's slot is hoverable whether or not it was measured: the block above says which it was. */
+			const point = (event: PointerEvent & { currentTarget: SVGSVGElement }) => {
+				const list = steps()
+				if (!list.length) return
+				const left = event.currentTarget.getBoundingClientRect().left
+				const index = Math.floor((event.clientX - left - chartLeft()) / STEP_PX)
+				setHovered(Math.max(0, Math.min(list.length - 1, index)))
+			}
+			/** The bar under the pointer, when the list still holds it: a poll appends, a revert cuts the tail, and
+			 *  either can leave the stored index past the end. */
+			const over = (): number | undefined => {
+				const index = hovered()
+				return index !== undefined && index < steps().length ? index : undefined
+			}
+			/** The step the block describes: the one under the pointer, else the newest measured one. Nothing
+			 *  hovered means the panel keeps its headline, so panning never moves the big figure. */
+			const shown = (): Step | undefined => {
+				const index = over()
+				return index === undefined ? lastStep() : steps()[index]
+			}
+			/** What the block is describing: the hovered step's time, or the headline's own label. */
+			const blockLabel = () => {
+				const step = shown()
+				return over() !== undefined && step ? stamp(step.created, !sameDay(step.created, now())) : "last measured"
+			}
+			const models = () => byModel(steps())
+			const medianLine = () => {
+				const value = medianTps()
+				return value === undefined ? undefined : y(value)
+			}
+			const figure = () => {
+				const step = shown()
+				return step?.tps === undefined ? "—" : speed(step.tps)
+			}
+			const model = () => shown()?.model ?? ""
+			const ttft = () => {
+				const value = shown()?.ttft
+				// Milliseconds below a second, where the digits mean something; seconds above, where they do not.
+				if (value === undefined) return undefined
+				return value < 1000 ? ([String(Math.round(value)), " ms"] as const) : ([(value / 1000).toFixed(1), " s"] as const)
+			}
+			/** Absolute local times at the two ends of the visible window. A window that crosses midnight dates
+			 *  both ends — 23:58 and 00:08 alone would not say the day changed — and an end that is not today's
+			 *  carries its date, so panned back onto yesterday the axis cannot be mistaken for this morning. */
+			const axis = () => {
+				const list = steps()
+				const { first, last } = range()
+				const start = list[first]?.created
+				const end = list[last]?.created
+				if (start === undefined || end === undefined) return ["", ""]
+				const crosses = !sameDay(start, end)
+				const today = now()
+				return [clock(start, crosses || !sameDay(start, today)), clock(end, crosses || !sameDay(end, today))]
+			}
+			/** Which way there is more to see, between the two dates: nothing when the whole session fits. */
+			const pan = () => {
+				if (contentWidth() <= viewport()) return ""
+				const right = atRightEnd(scrolled(), contentWidth(), viewport())
+				if (scrolled() <= 1) return "scroll →"
+				return right ? "← scroll" : "← scroll →"
+			}
+			const countsLine = (): Piece[] => {
+				const value = summary()
+				if (!value) return []
+				const pieces: Piece[] = [
+					value.steps.length + " steps · " + value.measured + " measured · median ",
+					{ figure: tps(value.median) },
+					" t/s · peak ",
+					{ figure: tps(value.peak) },
+					" t/s",
+				]
+				if (reading()?.truncated) pieces.push(" · truncated")
+				return pieces
+			}
+			const counts = () => piecesText(countsLine())
+			const modelLine = (row: ModelStats): Piece[] => [
+				(row.steps === 1 ? "1 step" : row.steps + " steps") + " · med ",
+				{ figure: tps(row.median) },
+				" t/s · peak ",
+				{ figure: tps(row.peak) },
+				" t/s",
+			]
+			const amount = (pick: (totals: Summary["totals"]) => number) => {
+				const totals = summary()?.totals
+				return totals ? count(pick(totals)) : ""
+			}
+			const hit = () => {
+				const value = summary()?.totals.cacheHit
+				return value === undefined ? "—" : Math.round(value * 100) + "%"
+			}
+
+			return (
+				<div class="tpsm">
+					<Show when={stale()}>
+						{(missed: () => Failure) => (
+							<div class="tpsm-block">
+								<div class="tpsm-label">stale</div>
+								<div class="tpsm-sub">
+									read {age(now() - (value()?.readAt ?? now()))} ago, the last attempt failed:{" "}
+									{missed().error}
+								</div>
+							</div>
+						)}
+					</Show>
+					<Show when={value()} fallback={
+						<Show
+							when={failure()}
+							fallback={
+								<div class="tpsm-note">
+									{loading() ? "reading this session's messages…" : "No session is routed."}
+								</div>
+							}
+						>
+							{(missed: () => Failure) => (
+								<div class="tpsm-note">The messages could not be read: {missed().error}</div>
+							)}
+						</Show>
+					}>
+						<Show when={steps().length > 0} fallback={<div class="tpsm-note">No assistant step yet.</div>}>
+							<div class="tpsm-block">
+								<div class="tpsm-label">{blockLabel()}</div>
+								<div class="tpsm-figure">{figure()}<span class="tpsm-unit"> t/s</span></div>
+								<div class="tpsm-sub">
+									<span class="tpsm-smodel">{model()}</span>
+									<Show when={ttft()}>
+										{(pair) => (
+											<>
+												{model() ? " · " : ""}TTFT{" "}
+												<span class={isSlow(shown()?.ttft) ? "tpsm-num tpsm-slow" : "tpsm-num"}>
+													{pair()[0]}
+												</span>
+												{pair()[1]}
+											</>
+										)}
+									</Show>
+								</div>
+							</div>
+							<div class="tpsm-block">
+								<div class="tpsm-chart" ref={watch} onScroll={onScroll}>
+									<svg
+										class="tpsm-hist"
+										width={chartWidth()}
+										height={HEIGHT}
+										role="img"
+										aria-label={counts()}
+										onPointerMove={point}
+										onPointerLeave={() => setHovered(undefined)}
+									>
+										{/* One drawing for every step, in real pixels: an unmeasured step leaves its slot empty, and the
+										    two dashed lines are strokes at one pixel over the whole width. */}
+										<For each={steps()}>
+											{(step: Step, index) => {
+												const tps = step.tps
+												if (tps === undefined) return null
+												return (
+													<>
+														{/* Red when that step waited too long for its first token: the bar's height is the
+														    speed, so the colour carries the wait, which is the other reason to switch provider.
+														    A slow bar is filled with the muted red and keeps full opacity, so the pointer
+														    has to show itself through the fill instead — hence the brighter class below. */}
+														<rect
+															x={chartLeft() + index() * STEP_PX}
+															y={y(tps)}
+															width={BAR_PX}
+															height={HEIGHT - y(tps)}
+															fill="currentColor"
+															class={
+																isSlow(step.ttft)
+																	? index() === hovered()
+																		? "tpsm-hot tpsm-hot-on"
+																		: "tpsm-hot"
+																	: undefined
+															}
+															opacity={
+																isSlow(step.ttft) || index() === hovered()
+																	? 1
+																	: index() === steps().length - 1
+																		? 0.9
+																		: 0.45
+															}
+														/>
+														{/* Cut at the top: a bright cap says the bar goes on, and the block above
+														    still carries its real figure when pointed at. */}
+														<Show when={clipped(tps)}>
+															<rect
+																x={chartLeft() + index() * STEP_PX}
+																y={0}
+																width={BAR_PX}
+																height={2}
+																fill="currentColor"
+																opacity={1}
+															/>
+														</Show>
+													</>
+												)
+											}}
+										</For>
+										<Show when={medianLine() !== undefined}>
+											<line
+												x1="0"
+												x2={chartWidth()}
+												y1={medianLine()}
+												y2={medianLine()}
+												stroke="currentColor"
+												stroke-width="1"
+												stroke-dasharray="3 3"
+												opacity="0.3"
+											/>
+										</Show>
+										{/* The top of the drawing, drawn whatever the data does: the block's padding is black on
+										    black, so without this line the edge is invisible and a cut bar has nothing to be cut
+										    against. The tallest bar reaches it, unless the fence cut it. */}
+										<Show when={summary()?.scale}>
+											<line
+												x1="0"
+												x2={chartWidth()}
+												y1="0.5"
+												y2="0.5"
+												stroke="currentColor"
+												stroke-width="1"
+												stroke-dasharray="3 3"
+												opacity="0.3"
+											/>
+										</Show>
+									</svg>
+								</div>
+								<div class="tpsm-axis">
+									<span>{axis()[0]}</span>
+									<span class="tpsm-pan">{pan()}</span>
+									<span class="tpsm-end">{axis()[1]}</span>
+								</div>
+								<div class="tpsm-counts"><Figures pieces={countsLine()} /></div>
+								<Show when={reading()?.revertLost}>
+									<div class="tpsm-warn">
+										the revert point is older than the messages read: undone steps may be counted
+									</div>
+								</Show>
+								<div class="tpsm-models">
+									<div class="tpsm-label">by model</div>
+									<For each={models()}>
+										{(row) => (
+											<div class="tpsm-mrow">
+												<div class="tpsm-mname">{row.model || "—"}</div>
+												<div class="tpsm-mnum"><Figures pieces={modelLine(row)} /></div>
+											</div>
+										)}
+									</For>
+								</div>
+							</div>
+							<div class="tpsm-block">
+								<div class="tpsm-label">totals</div>
+								<Total label="input" value={amount((totals) => totals.input)} />
+								<Total label="output" value={amount((totals) => totals.output)} />
+								<Total label="reasoning" value={amount((totals) => totals.reasoning)} />
+								<Total label="cache read" value={amount((totals) => totals.cacheRead)} />
+								<Total label="cache write" value={amount((totals) => totals.cacheWrite)} />
+								<Total label="cache hit" value={hit()} />
+							</div>
+						</Show>
+					</Show>
+				</div>
+			)
+		}
+
+		const tab: PanelTab = {
+			id: "tps",
+			get title() {
+				return "TPS"
+			},
+			closable: "hover",
+		}
+
+		ctx.add(Style, CSS)
+		ctx.add(Panel, {
+			id: "tps",
+			region: "side",
+			// The declared width puts the panel on the app's per-panel width store, which is what a drag writes.
+			width: PANEL_WIDTH,
+			list: (input) => (input.open.includes("tps") ? [tab] : []),
+			render: () => <View />,
+		})
+
+		const toggle = () => {
+			const session = current()
+			if (!session) return
+			ctx.layout.toggle(`${ctx.id}:tps`, session)
+		}
+
+		ctx.add(Command, (): Command => ({
+			id: "open",
+			title: "TPS Meter",
+			description: "Decode speed of every closed step in this session",
+			keywords: "tps speed tokens decode throughput latency ttft",
+			section: "session",
+			slash: { name: "tps" },
+			enabled: !!current(),
+			run: toggle,
+		}))
+
+		ctx.add(MenuItem, (): MenuItem => {
+			const session = current()
+			return {
+				menu: "session.panel",
+				id: "tps",
+				title: "TPS Meter",
+				icon: "window-analytics",
+				keybind: `${ctx.id}.open`,
+				opened: !!session && ctx.layout.state(`${ctx.id}:tps`, session) !== "closed",
+				run: toggle,
+			}
+		})
+	},
+})

package/metrics.ts

@@ -0,0 +1,229 @@
+// oc-tps-meter — the metric, as pure functions over the messages the client returns. No imports: the test
+// reads exactly what the panel reads. A step's speed is its own decode window, first token to last, and a
+// step without a usable one is unmeasured, never zero.
+
+export const MIN_TOKENS = 20
+export const MIN_SPAN_MS = 200
+
+/** The wait for a first token above which a step is read as queued rather than merely slow: above the 95th
+ *  percentile of everything measured on this machine, so a flagged step is never ordinary slowness. The
+ *  measurement behind it is in `docs/oc-tps-meter.md`, *a red bar is a wait* — the number is not repeated here. */
+export const SLOW_TTFT_MS = 10_000
+
+export const isSlow = (ttft: number | undefined) => ttft !== undefined && ttft > SLOW_TTFT_MS
+
+export type MessageTime = {
+	created?: number
+	firstToken?: number
+	streamed?: number
+	completed?: number
+}
+
+export type MessageTokens = {
+	input?: number
+	output?: number
+	reasoning?: number
+	cache?: { read?: number; write?: number }
+}
+
+export type StepMessage = {
+	id?: string
+	/** `assistant`, `user`, `compaction`… Only the assistant ones are steps, but the revert cut needs them all. */
+	type?: string
+	time?: MessageTime
+	tokens?: MessageTokens
+	model?: { providerID?: string; id?: string; variant?: string }
+	content?: readonly { type?: string; time?: null | { created?: number } }[]
+}
+
+export type Step = {
+	id: string
+	/** Epoch ms. */
+	created: number
+	tokens: number
+	/** Only on a measured step. */
+	tps?: number
+	ttft?: number
+	/** `providerID/modelID`, or empty when the message carried neither. */
+	model: string
+	measured: boolean
+}
+
+export type Totals = {
+	input: number
+	output: number
+	reasoning: number
+	cacheRead: number
+	cacheWrite: number
+	/** `cache.read / (input + cache.read + cache.write)`; undefined when all three are zero. */
+	cacheHit?: number
+}
+
+export type Summary = {
+	/** Oldest first, whether the messages arrived oldest or newest first. */
+	steps: Step[]
+	/** Sums over the same messages, measured or not. */
+	totals: Totals
+	measured: number
+	/** The median of the measured speeds, not the mean. */
+	median?: number
+	peak?: number
+	/** The top of the drawing: the 95th percentile, so one freak step cannot flatten the other 95%. */
+	scale?: number
+	/** The newest measured step. */
+	last?: Step
+}
+
+const number = (value: number | undefined) => (typeof value === "number" && Number.isFinite(value) ? value : 0)
+
+/** A finite instant, or nothing: a non-finite one cannot measure a window. */
+const instant = (value: number | undefined) =>
+	typeof value === "number" && Number.isFinite(value) ? value : undefined
+
+/** A step is closed only once `completed` is there: a message still streaming is not history. */
+export const closed = (message: StepMessage) => message.time?.completed !== undefined
+
+/** The instant generation started: the provider's own first token, and for the messages recorded before that
+ *  field existed, the first **reasoning** part. Only reasoning: a tool part's time is when the call begins,
+ *  after the model has already generated, and using it collapses the window — on real rows it turned 365 tokens
+ *  into 1388 t/s. A text part carries no time at all, so an old text-only or tool-only message stays a gap. */
+const started = (message: StepMessage): number | undefined => {
+	const firstToken = instant(message.time?.firstToken)
+	if (firstToken !== undefined) return firstToken
+	let earliest: number | undefined
+	for (const part of message.content ?? []) {
+		if (part?.type !== "reasoning") continue
+		const at = instant(part.time?.created)
+		if (at !== undefined && (earliest === undefined || at < earliest)) earliest = at
+	}
+	return earliest
+}
+
+export const stepOf = (message: StepMessage): Step => {
+	const tokens = number(message.tokens?.output) + number(message.tokens?.reasoning)
+	const created = number(message.time?.created)
+	const firstToken = started(message)
+	const streamed = instant(message.time?.streamed)
+	const span = firstToken !== undefined && streamed !== undefined ? streamed - firstToken : undefined
+	const measured = span !== undefined && span >= MIN_SPAN_MS && tokens >= MIN_TOKENS
+	const model =
+		message.model?.providerID && message.model?.id ? message.model.providerID + "/" + message.model.id : ""
+	return {
+		id: message.id ?? "",
+		created,
+		tokens,
+		tps: measured && span !== undefined ? tokens / (span / 1000) : undefined,
+		ttft: firstToken !== undefined && created !== 0 ? firstToken - created : undefined,
+		model,
+		measured,
+	}
+}
+
+/** The middle value, averaging the two middles on an even count. Undefined for no value at all. */
+export const median = (values: readonly number[]): number | undefined => {
+	if (values.length === 0) return undefined
+	const sorted = [...values].sort((a, b) => a - b)
+	const middle = Math.floor(sorted.length / 2)
+	return sorted.length % 2 ? sorted[middle] : (sorted[middle - 1] + sorted[middle]) / 2
+}
+
+/** The value 95% of the speeds sit at or below, by nearest rank. */
+export const p95 = (values: readonly number[]): number | undefined => {
+	if (values.length === 0) return undefined
+	const sorted = [...values].sort((a, b) => a - b)
+	return sorted[Math.max(0, Math.ceil(sorted.length * 0.95) - 1)]
+}
+
+/** The top of the drawing: the peak itself, unless one step is more than twice the 95th percentile — then the
+ *  scale stops at that fence, so a freak bar is cut instead of flattening every other one. With no such step
+ *  this is exactly the peak. */
+export const scaleOf = (values: readonly number[]): number | undefined => {
+	if (values.length === 0) return undefined
+	const max = Math.max(...values)
+	return Math.min(max, 2 * (p95(values) ?? max))
+}
+
+/** A staged revert leaves the messages it undid stored but no longer part of the session: the message it points
+ *  at and everything newer are dropped. The list is oldest first. `found` says whether that message was in it:
+ *  an id from outside the window cuts nothing, and the caller has to say so. */
+export type RevertCut = {
+	messages: StepMessage[]
+	found: boolean
+}
+
+export const revertCut = (messages: readonly StepMessage[], revertMessageID: string | undefined): RevertCut => {
+	const stop = revertMessageID ? messages.findIndex((message) => message.id === revertMessageID) : -1
+	return stop === -1 ? { messages: [...messages], found: false } : { messages: messages.slice(0, stop), found: true }
+}
+
+/** One row per model with at least one measured step, the busiest first and ties by name. The counts are of
+ *  measured steps, which is what the row's speeds speak about. */
+export type ModelStats = { model: string; steps: number; median?: number; peak?: number }
+
+export const byModel = (steps: readonly Step[]): ModelStats[] => {
+	const held = new Map<string, number[]>()
+	for (const step of steps) {
+		if (step.tps === undefined) continue
+		const speeds = held.get(step.model) ?? []
+		speeds.push(step.tps)
+		held.set(step.model, speeds)
+	}
+	return [...held]
+		.map(([model, speeds]) => ({ model, steps: speeds.length, median: median(speeds), peak: Math.max(...speeds) }))
+		.sort((a, b) => b.steps - a.steps || a.model.localeCompare(b.model))
+}
+
+/** A bar is one step: 3 px of bar and the 1 px gap after it, so the chart is four pixels per step wide. */
+export const BAR_PX = 3
+export const STEP_PX = 4
+
+/** The steps the window shows, as inclusive indices: the slot the left edge falls in and the one the right edge
+ *  reaches. Nothing in view is `last < first`. */
+export const visibleRange = (count: number, scrollLeft: number, viewport: number): { first: number; last: number } => {
+	if (count <= 0) return { first: 0, last: -1 }
+	const first = Math.max(0, Math.min(count - 1, Math.floor(scrollLeft / STEP_PX)))
+	const last = Math.min(count - 1, Math.max(first, Math.ceil((scrollLeft + viewport) / STEP_PX) - 1))
+	return { first, last }
+}
+
+/** Whether the window sits at its right end, within the native scroll's 1 px — and true when nothing overflows. */
+export const atRightEnd = (scrollLeft: number, scrollWidth: number, clientWidth: number) =>
+	scrollWidth - clientWidth - scrollLeft <= 1
+
+/** Whether the window follows the newest step after a scroll event: only a scroll the user made can move that
+ *  latch. A clamp after the content shrank, a resize and our own settle all arrive as scroll events too, and
+ *  every one of them lands at the right end — reading them as intent would drag the user forward on the next
+ *  read, which is exactly what the latch exists to prevent. */
+export const followAfter = (
+	current: boolean,
+	event: { user: boolean; scrollLeft: number; scrollWidth: number; clientWidth: number },
+): boolean =>
+	event.user ? atRightEnd(event.scrollLeft, event.scrollWidth, event.clientWidth) : current
+
+export const summarise = (messages: readonly StepMessage[]): Summary => {
+	const history = messages.filter(closed)
+	const steps = history.map(stepOf).sort((a, b) => a.created - b.created)
+	const totals: Totals = { input: 0, output: 0, reasoning: 0, cacheRead: 0, cacheWrite: 0 }
+	for (const message of history) {
+		totals.input += number(message.tokens?.input)
+		totals.output += number(message.tokens?.output)
+		totals.reasoning += number(message.tokens?.reasoning)
+		totals.cacheRead += number(message.tokens?.cache?.read)
+		totals.cacheWrite += number(message.tokens?.cache?.write)
+	}
+	const spent = totals.input + totals.cacheRead + totals.cacheWrite
+	if (spent > 0) totals.cacheHit = totals.cacheRead / spent
+
+	const speeds = steps.flatMap((step) => (step.tps === undefined ? [] : [step.tps]))
+	const measured = steps.filter((step) => step.measured)
+	return {
+		steps,
+		totals,
+		measured: measured.length,
+		median: median(speeds),
+		peak: speeds.length ? Math.max(...speeds) : undefined,
+		// A session with few steps gets its peak back: 95% of ten values is still nearly all of them.
+		scale: scaleOf(speeds),
+		last: measured[measured.length - 1],
+	}
+}

package/package.json

@@ -1,6 +1,31 @@
 {
-  "name": "@rizal72/oc-tps-meter",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@rizal72/oc-tps-meter",
+	"version": "0.0.1",
+	"type": "module",
+	"description": "Tokens per second for every closed step of an OpenCode v2 session: a histogram in the desktop side panel, with the median, the peak, TTFT and the token totals",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/rizal72/opencode-plugins.git"
+	},
+	"license": "MIT",
+	"files": [
+		"*.ts",
+		"*.tsx",
+		"README.md",
+		"dist",
+		"!*.test.ts"
+	],
+	"keywords": [
+		"opencode",
+		"opencode-plugin",
+		"tps",
+		"tokens",
+		"throughput"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"exports": {
+		"./gui-experimental": "./dist/gui-experimental.cjs"
+	}
+}

package/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite"
+import { gui } from "@opencode/plugin/gui/vite"
+
+export default defineConfig({
+	plugins: [gui({ entry: "gui.tsx", outFile: "dist/gui-experimental.cjs" })],
+})