@rizal72/oc-models-pro 0.2.0 → 0.3.0

package/README.md

@@ -1,7 +1,7 @@
 # @rizal72/oc-models-pro
 
-A model picker that shows what a request costs: price in and out, context, intelligence, `tok/s` and
-the Go credit, sorted by what a request actually costs. Enter switches.
+A model picker that shows what a request costs: price in and out, context, intelligence, `tok/s` and the
+Go credit, sorted by what a request actually costs. Enter switches.
 
 ## Install
 
@@ -15,7 +15,7 @@ Or by hand, one line in `~/.config/opencode/opencode.jsonc`:
 "plugins": ["@rizal72/oc-models-pro"]
 ```
 
-## Use
+## TUI
 
 `/models-pro`, or `Ctrl+X` then `p`, inside a session.
 
@@ -30,7 +30,12 @@ Or by hand, one line in `~/.config/opencode/opencode.jsonc`:
 | `ctrl+u` | clear the search |
 | `esc` | clear the search, else close |
 
-## Where the numbers come from
+## GUI
+
+The same table as a side panel: `mod+shift+m`, `/models-pro`, or the session menu. Click a column to sort
+by it, a star to favourite, a row to switch. The search box, the scope buttons and a refresh sit above it.
+
+## How it works
 
 | column | source |
 |---|---|
@@ -40,7 +45,8 @@ Or by hand, one line in `~/.config/opencode/opencode.jsonc`:
 | ~tok/s | Artificial Analysis, with a free key |
 | cred | the Go plan page, cached 1 day, `opencode-go` only |
 
-Favourites and recents are the native picker's (`~/.local/state/opencode/model.json`), so both agree.
+Favourites and recents are the native picker's (`~/.local/state/opencode/model.json`), so both agree. The
+switch is the app's own path, never a write to the session or that file.
 
 ## Optional: tok/s for models you have not run
 

package/bench.ts

@@ -91,7 +91,10 @@ export async function benchIndex(): Promise<Map<string, Bench>> {
 	const previous = await cached()
 	if (previous && Date.now() - previous.fetched < GRACE_MS) return indexOf(previous)
 	try {
-		const response = await fetch(CATALOG, { headers: { "user-agent": "oc-models-pro" } })
+		const response = await fetch(CATALOG, {
+			headers: { "user-agent": "oc-models-pro" },
+			signal: AbortSignal.timeout(20_000),
+		})
 		if (!response.ok) throw new Error("HTTP " + response.status)
 		const built = buildIndex(await response.json())
 		if (built.size === 0) throw new Error("catalog shape changed")
@@ -115,7 +118,7 @@ export function benchFor(index: Map<string, Bench>, name: string, id: string): B
 // Self-check: node plugins/oc-models-pro/bench.ts --self-check
 if (process.argv[2] === "--self-check") {
 	const run = async () => {
-		const response = await fetch(CATALOG)
+		const response = await fetch(CATALOG, { signal: AbortSignal.timeout(20_000) })
 		if (!response.ok) throw new Error("self-check: HTTP " + response.status)
 		const index = buildIndex(await response.json())
 		if (index.size < 200) throw new Error("self-check: only " + index.size + " models keyed")

package/dist/gui-experimental.cjs

@@ -0,0 +1,58 @@
+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"),r=require("@opencode/plugin/rpc");var i={type:`number`},a={type:`object`,properties:{rows:{type:`array`,items:{type:`object`,properties:{providerID:{type:`string`},modelID:{type:`string`},name:{type:`string`},provider:{type:`string`},tag:{type:`string`},input:i,output:i,context:i,credit:i,promo:i,peak:i,int:i,tps:i,measured:i,enabled:{type:`boolean`}},required:[`providerID`,`modelID`,`name`,`provider`,`tag`,`credit`,`enabled`],additionalProperties:!1}},favorites:{type:`array`,items:{type:`string`}},offers:i,withSpeed:i,credits:{type:`boolean`},problems:{type:`array`,items:{type:`string`}}},required:[`rows`,`favorites`,`offers`,`withSpeed`,`credits`],additionalProperties:!1},o=r.Rpc.define({id:`models`,methods:{snapshot:{input:{type:`object`,properties:{force:{type:`boolean`}},additionalProperties:!1},output:a},setFavorite:{input:{type:`object`,properties:{providerID:{type:`string`},modelID:{type:`string`},on:{type:`boolean`}},required:[`providerID`,`modelID`],additionalProperties:!1},output:{type:`object`,properties:{ok:{type:`boolean`},favorites:{type:`array`,items:{type:`string`}}},required:[`ok`,`favorites`],additionalProperties:!1}}},events:{}});function s(e){if(e.input!==void 0)return e.input/(e.credit||1)}function c(e){return e.input===0&&e.output===0}function l(e){return e.measured??e.tps}var u={effective:{label:`effective price`,short:`effective↑`,value:s},input:{label:`input price`,short:`in↑`,value:e=>e.input},output:{label:`output price`,short:`out↑`,value:e=>e.output},inputSum:{label:`input + output`,short:`in+out↑`,value:e=>e.input===void 0||e.output===void 0?void 0:(e.input+e.output)/(e.credit||1)},context:{label:`context window`,short:`ctx↓`,desc:!0,value:e=>e.context},int:{label:`intelligence`,short:`int↓`,desc:!0,value:e=>e.int},speed:{label:`speed`,short:`speed↓`,desc:!0,value:e=>l(e)},recent:{label:`recently used`,short:`recent`,value:(e,t)=>t.recent.get(e.providerID+`/`+e.modelID)},provider:{label:`provider`,short:`provider`,value:()=>0},name:{label:`name`,short:`name`,value:()=>0}},d=[`effective`,`input`,`output`,`inputSum`,`context`,`int`,`speed`,`recent`,`provider`,`name`];function f(e){return u[e].desc?-1:1}var p=e=>e.providerID+`/`+e.modelID;function m(e,t,n,r,i=f(e)){if(e===`name`||e===`provider`){let r=e===`name`?t.name:t.provider,a=e===`name`?n.name:n.provider,o=r.localeCompare(a);return o===0?p(t).localeCompare(p(n)):o*i}let a=u[e].value(t,r),o=u[e].value(n,r);return a===void 0||o===void 0?a===o?t.name.localeCompare(n.name):a===void 0?1:-1:a===o?t.name.localeCompare(n.name):(a<o?-1:1)*i}function h(e,t){let n=t.inUse===void 0?void 0:e.find(e=>p(e)===t.inUse);if(!t.grouped){let t=n?e.filter(e=>e!==n):e,r=t.filter(e=>!c(e)),i=t.filter(e=>c(e));return[...n?[{rows:[n]}]:[],...r.length?[{rows:r}]:[],...i.length?[{title:`Free`,rows:i}]:[]]}let r=new Map;for(let t of e){let e=r.get(t.providerID)??{title:t.provider,rows:[]},n=e.rows.findIndex(e=>c(e)&&!c(t));n===-1?e.rows.push(t):e.rows.splice(n,0,t),r.set(t.providerID,e)}let i=[...r.entries()].sort(([e,t],[n,r])=>(t.title??``).localeCompare(r.title??``)||e.localeCompare(n)).map(([,e])=>e);if(n){let e=i.indexOf(r.get(n.providerID));e>0&&i.unshift(...i.splice(e,1));let t=i[0];t&&(t.rows=[n,...t.rows.filter(e=>e!==n)])}return i}if(typeof process<`u`&&process.argv?.[2]===`--self-check`){let e=(e={})=>({name:`Model`,providerID:`p`,modelID:`m`,provider:`Provider`,tag:`PR`,credit:1,enabled:!0,...e}),t={recent:new Map([[`p/m`,0]])},n=(e,t)=>{if(!e)throw Error(`self-check: `+t)};n(s(e())===void 0,`an unknown input price is not zero`),n(s(e({input:.8,credit:8}))===.1,`the credit divides the input price`),n(s(e({input:.8,credit:0}))===.8,`a zero credit must not divide by zero`),n(!c(e()),`a missing price is not free`),n(!c(e({input:0,output:2})),`a zero input with a paid output is not free`),n(c(e({input:0,output:0})),`both at zero is free`),n(l(e({tps:40,measured:12}))===12,`a measured speed outranks a borrowed one`),n(l(e())===void 0,`no speed is no speed`);let r=(e,n)=>[...n].sort((n,r)=>m(e,n,r,t)),i=e({name:`cheap`,input:1,output:1}),a=e({name:`dear`,input:10,output:10}),o=e({name:`unknown`});n(r(`input`,[o,a,i]).map(e=>e.name)[0]===`cheap`,`in↑ starts at the cheapest`),n(r(`input`,[o,a,i]).map(e=>e.name)[2]===`unknown`,`an unknown price sorts last`);let u=[e({name:`few`,context:1e3,int:10}),e({name:`many`,context:1e5,int:50}),o];n(r(`context`,u)[0].name===`many`,`ctx↓ starts at the widest window`),n(r(`context`,u)[2].name===`unknown`,`a missing window sorts last, not first`),n(r(`int`,u)[0].name===`many`,`int↓ starts at the highest score`),n(r(`int`,u)[2].name===`unknown`,`a missing score sorts last, not first`),n(r(`speed`,u)[2].name===`unknown`,`a missing speed sorts last, not first`);let p=(e,n)=>[...n].sort((n,r)=>m(e,n,r,t,-1));n(p(`input`,[o,a,i])[2].name===`unknown`,`in↓ puts an unknown price last too`),n(p(`input`,[o,a,i])[0].name===`dear`,`in↓ starts at the dearest`),n(p(`context`,u)[2].name===`unknown`,`ctx↑ puts a missing window last too`),n(p(`int`,u)[2].name===`unknown`,`int↑ puts a missing score last too`),n(p(`speed`,u)[2].name===`unknown`,`speed↑ puts a missing speed last too`),n(p(`effective`,[o,a,i])[2].name===`unknown`,`effective↓ puts an unknown price last too`);let g={recent:new Map([[`p/fresh`,0]])},_=e({name:`fresh`,modelID:`fresh`});n([e({name:`stale`,modelID:`stale`}),_].sort((e,t)=>m(`recent`,e,t,g))[0].name===`fresh`,`the recent list orders by its index`),n(m(`input`,i,a,t,-1)>0,`the sign the caller passes flips the order`),n(m(`name`,e({name:`a`}),e({name:`b`}),t)<0,`name compares text`),n(m(`provider`,e({provider:`a`}),e({provider:`b`}),t)<0,`provider compares text`),n(f(`effective`)===1&&f(`int`)===-1,`the default direction follows the order`);let v=e({name:`a`,modelID:`a`,providerID:`pa`,provider:`A`,input:2,output:2}),y=e({name:`b`,modelID:`b`,providerID:`pa`,provider:`A`,input:0,output:0}),b=e({name:`c`,modelID:`c`,providerID:`pb`,provider:`B`,input:3,output:3}),x=h([v,y,b],{inUse:`pb/c`,grouped:!0});n(x.map(e=>e.title).join()===`B,A`,`the provider in use leads the list`),n(x[0].rows[0]===b,`and its model leads inside it`),n(x[1].rows.map(e=>e.name).join()===`a,b`,`paying before free inside a group`);let S=h([v,y,b],{inUse:`pa/b`,grouped:!0});n(S[0].title===`A`&&S[0].rows[0]===y,`the in-use row leads inside a group that has others`),n(S[0].rows.map(e=>e.name).join()===`b,a`,`and the rest of the group keeps its order`);let C=h([v,y,b],{inUse:`pa/b`,grouped:!1});n(C[0].rows[0]===y,`flat: a free model in use still leads`),n(!C.some(e=>e.title===`Free`),`flat: and is not repeated in the free bucket`);let w=h([b],{inUse:`pb/c`,grouped:!0});n(w.length===1&&w[0].title===`B`,`the only row a filter kept still has its own group`);let T=h([y,b,v],{inUse:`pb/c`,grouped:!1});n(T[0].rows[0]===b,`flat: the model in use leads the list`),n(T[T.length-1].title===`Free`,`flat: the free bucket is last`),n(T[T.length-1].rows[0]===y,`flat: and holds the free row`);let E=e({name:`twin`,modelID:`twin`,providerID:`p2`,provider:`A`,input:4,output:4}),D=h([v,E],{inUse:`p2/twin`,grouped:!0});n(D.length===2,`two providers sharing a display name stay two groups`),n(D[0].rows[0]===E,`and the one in use leads by id, not by the shared name`),console.log(`self-check ok: `+d.length+` orders, unknown figures last in every one of them`)}var g=(0,e.template)(`<button>`),_=(0,e.template)(`<span class=omp-dot>●`),v=(0,e.template)(`<div class=omp-row><div class=omp-name><button class=omp-fav></button><span class=omp-tag></span></div><div class=omp-num></div><div class="omp-num omp-out"></div><div class="omp-num omp-ctx"></div><div class="omp-num omp-int"></div><div class="omp-num omp-tps"></div><div class="omp-num omp-credit"></div><div class="omp-num omp-note">`),y=(0,e.template)(`<div class=omp-warn>`),b=(0,e.template)(`<div class=omp-warn>Go credit unknown: the plan page could not be read.`),x=(0,e.template)(`<div class=omp-empty>`),S=(0,e.template)(`<div class=omp><div class=omp-bar><div class=omp-scopes><button class=omp-scope>groups</button></div></div><div class=omp-head><span class="omp-num omp-credit">×</span><span class="omp-num omp-note">note</span></div><div class=omp-body></div><div class=omp-fine>*N = the tariff at peak · +N = a promotion`),C=(0,e.template)(`<button class=omp-scope>`),w=(0,e.template)(`<div class=omp-group>`),T=3e5,E=15e3,D=(e,t)=>new Promise((n,r)=>{let i=setTimeout(()=>r(Error(`rpc timed out after ${t}ms`)),t);e.then(e=>{clearTimeout(i),n(e)},e=>{clearTimeout(i),r(e)})}),O=`
+.omp { container-type: inline-size; display: flex; flex-direction: column; height: 100%; min-height: 0;
+  font-size: 12px; }
+.omp-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; flex-wrap: wrap; }
+.omp-scopes { display: flex; gap: 2px; margin-left: auto; }
+.omp-scope { background: none; border: 0; border-radius: 4px; color: inherit; cursor: pointer; font: inherit;
+  opacity: .55; padding: 2px 6px; }
+.omp-scope[data-on] { background: color-mix(in srgb, currentColor 12%, transparent); opacity: 1; }
+.omp-head, .omp-row { display: grid; align-items: center; gap: 6px; padding: 2px 8px;
+  grid-template-columns: minmax(9rem, 1fr) 2.8rem 3.4rem 3.4rem 2.4rem 2.4rem 2.6rem 2.2rem; }
+.omp-head { border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); opacity: .7;
+  padding-right: calc(8px + var(--omp-gutter, 0px)); }
+.omp-head button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 0;
+  text-align: left; }
+.omp-head .omp-num { text-align: right; }
+.omp-body { overflow: auto; min-height: 0; }
+.omp-group { padding: 8px 8px 4px; text-transform: uppercase; letter-spacing: .04em; font-size: 10px;
+  position: sticky; top: 0; z-index: 1;
+  background: var(--v2-background-bg-base, Canvas);
+  color: color-mix(in srgb, currentColor 55%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
+.omp-row { cursor: pointer; border-radius: 4px; }
+.omp-row:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
+.omp-row[data-mine] { background: color-mix(in srgb, currentColor 12%, transparent); }
+/* A figure wider than its track is cut, as the terminal cuts every cell: it must never push into the
+   column beside it and read as that column's number. */
+.omp-num { text-align: right; font-variant-numeric: tabular-nums; overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap; }
+.omp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.omp-tag { opacity: .5; margin-right: 6px; font-variant-numeric: tabular-nums; }
+.omp-mine { opacity: .9; }
+.omp-dot { opacity: .8; margin-right: 4px; }
+.omp-fav { background: none; border: 0; cursor: pointer; color: inherit; font: inherit; opacity: .35;
+  padding: 0 4px; }
+.omp-fav[data-on] { opacity: 1; }
+.omp-empty { padding: 12px 8px; opacity: .6; }
+.omp-warn { padding: 4px 8px; opacity: .7; }
+.omp-fine { padding: 4px 8px; opacity: .55; font-size: 11px;
+  border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); }
+/* The terminal's cascade, in pixels: the name shrinks first (the track is elastic), then whole columns
+   go in the order fit.ts uses — tok/s, then context, then intelligence. The three price figures never
+   go: they are what the list is for. Below the last rung the name truncates instead of scrolling. */
+@container (max-width: 560px) {
+  .omp-tps, .omp-note { display: none; }
+  .omp-head, .omp-row { grid-template-columns: minmax(9rem, 1fr) 2.8rem 3.4rem 3.4rem 2.4rem 2.6rem; }
+}
+@container (max-width: 500px) {
+  .omp-ctx { display: none; }
+  .omp-head, .omp-row { grid-template-columns: minmax(9rem, 1fr) 2.8rem 3.4rem 2.4rem 2.6rem; }
+}
+@container (max-width: 440px) {
+  .omp-int { display: none; }
+  .omp-head, .omp-row { grid-template-columns: minmax(9rem, 1fr) 2.8rem 3.4rem 2.6rem; }
+}
+@container (max-width: 390px) {
+  .omp-head, .omp-row { grid-template-columns: minmax(0, 1fr) 2.8rem 3.4rem 2.6rem; }
+}
+`,k=new Set([`name`,`input`,`output`,`context`,`int`,`speed`]),A=e=>e===void 0?``:e===0?`free`:String(Math.round(e*1e3)/1e3),j=e=>e===void 0?``:e>=1e6?(e/1e6).toFixed(e%1e6==0?0:1)+`M`:e>=1e3?Math.round(e/1e3)+`K`:String(e),M=e=>e.peak?`*`+e.peak:e.promo?`+`+e.promo:``,N=e=>e.providerID+`/`+e.modelID,P=t.Plugin.define({setup(r){let[i,a]=(0,n.createSignal)(void 0),[s,l]=(0,n.createSignal)(``),[p,P]=(0,n.createSignal)(`effective`),[F,I]=(0,n.createSignal)(!0),[L,R]=(0,n.createSignal)(`all`),[z,ee]=(0,n.createSignal)(!0),[B,V]=(0,n.createSignal)([]),[H,U]=(0,n.createSignal)(!1),W,G=async e=>{if(H())return;let t=K()?.server.client;if(t){U(!0);try{a(await D(t.rpc(o).snapshot(e?{force:!0}:{}),E))}catch(e){r.toast.show({title:`Models`,description:e instanceof Error?e.message:String(e),variant:`error`})}finally{U(!1)}}},K=()=>r.sessions.current(),q=()=>{let e=r.screen.current()?.composer.model();return e?e.providerID+`/`+e.modelID:void 0},J=(0,n.createMemo)(()=>{let e=i();if(!e)return[];let t=new Set(e.favorites),n=q(),r=s().trim().toLowerCase(),a=e.rows.filter(e=>!e.enabled||L()===`favorites`&&!t.has(N(e))&&N(e)!==n||L()===`paying`&&c(e)&&N(e)!==n?!1:!r||(e.name+` `+e.provider+` `+e.modelID).toLowerCase().includes(r)),o=k.has(p())&&!F()?-1:1,l={recent:new Map(B().map((e,t)=>[e,t]))};return[...a].sort((e,t)=>m(p(),e,t,l,o))}),Y=(0,n.createMemo)(()=>h(J(),{inUse:q(),grouped:z()})),X=e=>{let t=r.screen.current()?.composer;if(!t)return;let n=N(e);t.setModel({providerID:e.providerID,modelID:e.modelID})?V([n,...B().filter(e=>e!==n)].slice(0,20)):r.toast.show({title:`Models`,description:`${e.name} is not available on this server`,variant:`error`})},Z=e=>{let t=N(e),n=i()?.favorites.includes(t)??!1,s=K()?.server.client;s&&D(s.rpc(o).setFavorite({providerID:e.providerID,modelID:e.modelID,on:!n}),E).then(e=>{let t=e;if(!t.ok){r.toast.show({title:`Models`,description:`model.json could not be written`,variant:`error`});return}let n=i();n&&a({...n,favorites:t.favorites})}).catch(()=>{r.toast.show({title:`Models`,description:`the favourite did not reach the server`,variant:`error`})})},Q=(t,n,r=``)=>(()=>{var i=g();return i.$$click=()=>{p()===t?I(!F()):(P(t),I(f(t)===1))},(0,e.className)(i,r),(0,e.insert)(i,n,null),(0,e.insert)(i,(()=>{var n=(0,e.memo)(()=>p()===t);return()=>n()?F()?` ↑`:` ↓`:``})(),null),i})(),te=t=>{let r=t.row,a=N(r),o=()=>i()?.favorites.includes(a)??!1,s=()=>a===q();return(()=>{var t=v(),i=t.firstChild,a=i.firstChild,c=a.nextSibling,l=i.nextSibling,u=l.nextSibling,d=u.nextSibling,f=d.nextSibling,p=f.nextSibling,m=p.nextSibling,h=m.nextSibling;return t.$$click=()=>X(r),a.$$click=e=>{e.stopPropagation(),Z(r)},(0,e.insert)(a,()=>o()?`★`:`☆`),(0,e.insert)(i,(0,e.createComponent)(n.Show,{get when(){return s()},get children(){return _()}}),c),(0,e.insert)(c,()=>r.tag),(0,e.insert)(i,()=>r.name,null),(0,e.insert)(l,()=>A(r.input)),(0,e.insert)(u,()=>A(r.output)),(0,e.insert)(d,()=>j(r.context)),(0,e.insert)(f,(()=>{var t=(0,e.memo)(()=>r.int!==void 0);return()=>t()?r.int.toFixed(1):``})()),(0,e.insert)(p,(()=>{var t=(0,e.memo)(()=>r.measured!==void 0);return()=>t()?Math.round(r.measured):(0,e.memo)(()=>r.tps!==void 0)()?`~`+Math.round(r.tps):``})()),(0,e.insert)(m,(()=>{var t=(0,e.memo)(()=>r.credit!==1);return()=>t()?`×`+r.credit:``})()),(0,e.insert)(h,()=>M(r)),(0,e.effect)(n=>{var r=s()?``:void 0,c=!!s(),l=o()?``:void 0;return r!==n.e&&(0,e.setAttribute)(t,`data-mine`,n.e=r),c!==n.t&&i.classList.toggle(`omp-mine`,n.t=c),l!==n.a&&(0,e.setAttribute)(a,`data-on`,n.a=l),n},{e:void 0,t:void 0,a:void 0}),t})()},ne=()=>{let t=()=>i(),a,o=()=>{let e=a?.querySelector(`.omp-body`);a&&e&&a.style.setProperty(`--omp-gutter`,e.offsetWidth-e.clientWidth+`px`)};return(0,n.createEffect)(()=>{Y(),o()}),(0,n.createEffect)(()=>{let e=new ResizeObserver(o);a&&e.observe(a),(0,n.onCleanup)(()=>e.disconnect())}),(()=>{var i=S(),o=i.firstChild,c=o.firstChild,m=c.firstChild,h=o.nextSibling,g=h.firstChild,_=h.nextSibling;return(0,e.use)(e=>a=e,i),(0,e.insert)(o,(0,e.createComponent)(r.ui.TextInput,{label:`Search models`,placeholder:`Search models`,type:`search`,get value(){return s()},onInput:l}),c),(0,e.insert)(o,(0,e.createComponent)(r.ui.Menu,{trigger:`button`,get label(){return`${u[p()].label}${k.has(p())?F()?` ↑`:` ↓`:``}`},get items(){return d.map(e=>({label:u[e].label,icon:p()===e?`check`:void 0,onSelect:()=>{p()===e?k.has(e)&&I(!F()):(P(e),I(f(e)===1))}}))}}),c),(0,e.insert)(o,(0,e.createComponent)(r.ui.IconButton,{icon:`refresh`,label:`Refresh`,get busy(){return H()},onClick:()=>void G(!0)}),c),(0,e.insert)(c,(0,e.createComponent)(n.For,{each:[`all`,`favorites`,`paying`],children:t=>(()=>{var n=C();return n.$$click=()=>R(t),(0,e.insert)(n,t),(0,e.effect)(()=>(0,e.setAttribute)(n,`data-on`,L()===t?``:void 0)),n})()}),m),m.$$click=()=>ee(!z()),(0,e.insert)(i,(0,e.createComponent)(n.Show,{get when(){return t()?.problems?.length},get children(){var n=y();return(0,e.insert)(n,()=>t()?.problems?.join(` · `)),n}}),h),(0,e.insert)(i,(0,e.createComponent)(n.Show,{get when(){return(0,e.memo)(()=>!!t())()&&!t().credits},get children(){return b()}}),h),(0,e.insert)(h,()=>Q(`name`,`model`),g),(0,e.insert)(h,()=>Q(`input`,`$/M in`,`omp-num`),g),(0,e.insert)(h,()=>Q(`output`,`$/M out`,`omp-num omp-out`),g),(0,e.insert)(h,()=>Q(`context`,`context`,`omp-num omp-ctx`),g),(0,e.insert)(h,()=>Q(`int`,`int`,`omp-num omp-int`),g),(0,e.insert)(h,()=>Q(`speed`,`tok/s`,`omp-num omp-tps`),g),(0,e.insert)(_,(0,e.createComponent)(n.Show,{get when(){return Y().length===0},get children(){var n=x();return(0,e.insert)(n,()=>t()?`no model matches`:`reading the catalogue…`),n}}),null),(0,e.insert)(_,(0,e.createComponent)(n.For,{get each(){return Y()},children:t=>[(0,e.createComponent)(n.Show,{get when(){return t.title},get children(){var n=w();return(0,e.insert)(n,()=>t.title),n}}),(0,e.createComponent)(n.For,{get each(){return t.rows},children:t=>(0,e.createComponent)(te,{row:t})})]}),null),(0,e.effect)(()=>(0,e.setAttribute)(m,`data-on`,z()?``:void 0)),i})()},re={id:`main`,get title(){return`Models`},closable:`hover`};r.add(t.Style,O),r.add(t.Panel,{id:`main`,region:`side`,wide:!0,list:e=>e.open.includes(`main`)?[re]:[],render:()=>(0,e.createComponent)(ne,{}),focus:()=>void G(!1)});let $=()=>{let e=K();e&&(r.layout.toggle(`${r.id}:main`,e),G(!1))};return r.add(t.Command,()=>({id:`open`,title:`Models: the table`,description:`Prices, context, intelligence and the Go credit, side by side`,keywords:`model price context credit list`,section:`model`,bind:`mod+shift+m`,slash:{name:`models-pro`},featured:!0,enabled:!!K(),run:$})),r.add(t.MenuItem,()=>{let e=K();return{menu:`session.panel`,id:`models`,title:`Models`,icon:`models`,description:`compare and switch`,keybind:`${r.id}.open`,opened:!!e&&r.layout.state(`${r.id}:main`,e)!==`closed`,run:$}}),W=setInterval(()=>{let e=K();e&&r.layout.state(`${r.id}:main`,e)!==`closed`&&G(!1)},T),()=>{W&&clearInterval(W)}}});(0,e.delegateEvents)([`click`]),exports.default=P;

package/index.ts

@@ -1,7 +1,148 @@
-// oc-models-pro — server half. Empty on purpose: the model list is TUI-only.
+// oc-models-pro — server half, for the desktop.
+//
+// The terminal reads the catalogue and the four sources in-process. A plugin window cannot: `bun:sqlite`,
+// `node:fs` and the three fetches are all outside its reach — and the AA key lives in this process's
+// environment, which is where the server has it and the window does not. So the whole table is assembled
+// here and the window asks for it over `models.snapshot`.
+//
+// The rows are the terminal's, field for field, so the two views can be compared: same catalogue, same
+// credits, same speeds. Only the rendering differs.
 import { Plugin } from "@opencode/plugin"
 
+import { aaIndex } from "./aa.ts"
+import { benchFor, benchIndex, benchKey, type Bench } from "./bench.ts"
+import { credits, goPlan, key as creditKey, nativePeak, type Credits } from "./multipliers.ts"
+import { prefKey, readFavourites, toggleFavorite } from "./prefs.ts"
+import { tagsFor } from "./tags.ts"
+import { speedIndex } from "./tps.ts"
+import { Models, type ModelsSnapshot } from "./rpc.ts"
+import type { Row } from "./rows.ts"
+
+/**
+ * The fetch-backed sources refresh on their own TTLs (6 h, 1 day, 6 h); the measured speeds cost about a
+ * second here and are worth keeping for a minute, which is also what keeps a poll cheap.
+ */
+const CACHE_MS = 60_000
+
+const isGo = (providerID: string) => providerID === "opencode-go"
+
+interface Sources {
+	bench?: Map<string, Bench>
+	credits?: Map<string, Credits>
+	creditsKnown: boolean
+	estimated?: Map<string, number>
+	measured?: Map<string, number>
+}
+
 export default Plugin.define({
 	id: "oc-models-pro",
-	async setup() {},
+	async setup(ctx) {
+		let cache: { at: number; value: ModelsSnapshot } | undefined
+
+		/** The four sources, each failure named instead of swallowed: a thin column must look thin. */
+		async function sources(problems: string[]): Promise<Sources> {
+			const [plan, bench, estimates, speeds] = await Promise.allSettled([
+				goPlan(),
+				benchIndex(),
+				aaIndex(),
+				speedIndex(),
+			])
+			const out: Sources = { creditsKnown: false }
+			if (plan.status === "fulfilled" && plan.value) {
+				out.credits = credits(plan.value)
+				out.creditsKnown = true
+			} else problems.push("go plan: no credit multipliers")
+			if (bench.status === "fulfilled") out.bench = bench.value
+			else problems.push("bench: no intelligence")
+			if (estimates.status === "fulfilled") out.estimated = estimates.value
+			else problems.push("aa: no borrowed speed")
+			if (speeds.status === "fulfilled")
+				out.measured = new Map([...speeds.value.speeds].map(([key, speed]) => [key, speed.tps]))
+			else problems.push("measured: the session store could not be read")
+			return out
+		}
+
+		async function build(force: boolean): Promise<ModelsSnapshot> {
+			if (!force && cache && Date.now() - cache.at < CACHE_MS) return cache.value
+
+			const problems: string[] = []
+			const [models, providers, src] = await Promise.all([
+				ctx.model.list({}),
+				ctx.provider.list({}),
+				sources(problems),
+			])
+			const offers: any[] = (models as any)?.data ?? (models as any) ?? []
+			const names = new Map<string, string>(
+				(((providers as any)?.data ?? (providers as any) ?? []) as any[]).map((provider) => [
+					provider.id,
+					provider.name,
+				]),
+			)
+			const tags = tagsFor([...names].map(([id, name]) => ({ id, name })))
+
+			const rows: Row[] = []
+			let withSpeed = 0
+			for (const model of offers) {
+				const cost = (model.cost ?? []).find((entry: any) => !entry.tier) ?? model.cost?.[0]
+				const limit = model.limit ?? {}
+				const score = benchFor(src.bench ?? new Map(), model.name, model.modelID)
+				// Three sources, one order: what this machine measured, then Artificial Analysis, then the
+				// catalogue. A measured figure is never displaced by an estimate.
+				const mine = src.measured?.get(model.providerID + "/" + model.modelID)
+				const theirs =
+					mine === undefined
+						? (src.estimated?.get(benchKey(model.name)) ?? src.estimated?.get(benchKey(model.modelID)) ?? score?.tps)
+						: undefined
+				if (mine !== undefined || theirs !== undefined) withSpeed += 1
+				// The measured ratio from the Go plan page first, the native rule second: one is data, the
+				// other is the fact no table reports (the catalogue lists a single DeepSeek price).
+				const planPeak = isGo(model.providerID) ? src.credits?.get(creditKey(model.modelID))?.peak : undefined
+				const peak = planPeak ?? nativePeak(model.providerID)
+				rows.push({
+					providerID: model.providerID,
+					modelID: model.modelID,
+					name: model.name,
+					provider: (names.get(model.providerID) ?? model.providerID).replace(/^(.+?) \/ (.+)$/, "$2 ($1)"),
+					tag: tags.get(model.providerID) ?? model.providerID.slice(0, 2).toUpperCase(),
+					...(typeof cost?.input === "number" ? { input: cost.input } : {}),
+					...(typeof cost?.output === "number" ? { output: cost.output } : {}),
+					...(typeof limit.context === "number" ? { context: limit.context } : {}),
+					credit: isGo(model.providerID) ? (src.credits?.get(creditKey(model.modelID))?.credit ?? 1) : 1,
+					...(isGo(model.providerID) && src.credits?.get(creditKey(model.modelID))?.promo !== undefined
+						? { promo: src.credits.get(creditKey(model.modelID))!.promo }
+						: {}),
+					...(peak !== undefined ? { peak } : {}),
+					...(score?.int !== undefined ? { int: score.int } : {}),
+					...(theirs !== undefined ? { tps: theirs } : {}),
+					...(mine !== undefined ? { measured: mine } : {}),
+					enabled: model.enabled !== false,
+				})
+			}
+
+			const favourites = readFavourites()
+			if (!favourites) problems.push("model.json: favourites unreadable")
+			const value: ModelsSnapshot = {
+				rows,
+				favorites: (favourites ?? []).map((entry) => prefKey(entry.providerID, entry.modelID)),
+				offers: offers.length,
+				withSpeed,
+				credits: src.creditsKnown,
+				...(problems.length ? { problems } : {}),
+			}
+			cache = { at: Date.now(), value }
+			return value
+		}
+
+		await ctx.rpc.register(Models, {
+			snapshot: async (input: any) => build(input?.force === true),
+			setFavorite: async (input: any) => {
+				const on = toggleFavorite(String(input.providerID), String(input.modelID), input.on)
+				// The rows carry no favourite flag, so the cache stays usable; the list is the only thing that moved.
+				const favourites = readFavourites() ?? []
+				const favorites = favourites.map((entry) => prefKey(entry.providerID, entry.modelID))
+				if (cache) cache = { at: cache.at, value: { ...cache.value, favorites } }
+				return { ok: on !== undefined, favorites }
+			},
+		})
+	},
 })

package/multipliers.ts

@@ -54,6 +54,15 @@ export interface Credits {
 	peak?: number
 }
 
+/** The native DeepSeek tariff doubles at peak, and the catalogue lists the **off-peak** figure: measured
+ *  2026-10-28 against DeepSeek's own pricing page — `deepseek-flash` $0.15 off-peak / $0.30 peak, and the
+ *  catalogue carries 0.15. Duplicated from `oc-budget/peak.ts` on purpose: the two packages are published
+ *  apart and neither may import the other, so each carries the one fact it needs. That copy also owns the
+ *  clock and the wallet; this one only knows which *list* price doubles, so the note stays static. */
+export function nativePeak(providerID: string): number | undefined {
+	return providerID === "deepseek" ? 2 : undefined
+}
+
 const CACHE_DIR = process.env.XDG_CACHE_HOME || join(homedir(), ".cache")
 const CACHE = join(CACHE_DIR, "oc-models-pro", "go-limits.json")
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rizal72/oc-models-pro",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"type": "module",
 	"description": "OpenCode v2 model picker with prices, context, intelligence, tok/s, Go credit and the cost of a request",
 	"repository": {
@@ -11,7 +11,8 @@
 	"files": [
 		"*.ts",
 		"tui.js",
-		"README.md"
+		"README.md",
+		"dist"
 	],
 	"keywords": [
 		"opencode",
@@ -25,6 +26,8 @@
 	},
 	"exports": {
 		".": "./index.ts",
-		"./tui": "./tui.js"
+		"./tui": "./tui.js",
+		"./rpc": "./rpc.ts",
+		"./gui-experimental": "./dist/gui-experimental.cjs"
 	}
 }

package/prefs.ts

@@ -0,0 +1,92 @@
+// oc-models-pro/prefs.ts — the picker's own state file, `~/.local/state/opencode/model.json`.
+//
+// Both halves need it: the terminal draws the list and toggles a favourite from the panel, the desktop
+// writes the same file through its server half. It lives here so the recipe exists once — a second copy
+// is a second way to lose `recent[]` or `variant{}`.
+//
+// The host watches this path and `model.json.*`. The write is `.model.json.tmp` then rename: the leading
+// dot keeps the temp name outside that glob, so the host never sees half a file.
+import { readFileSync, renameSync, writeFileSync } from "node:fs"
+import { homedir } from "node:os"
+import { join } from "node:path"
+
+/** The picker's state file. Exported for the message a failed write shows. */
+export const PREFS_FILE = join(homedir(), ".local/state/opencode/model.json")
+const TEMP_FILE = join(homedir(), ".local/state/opencode", ".model.json.tmp")
+
+export const prefKey = (providerID: string, modelID: string): string => providerID + "/" + modelID
+
+/** `favorite[]` and `recent[]` are `{ providerID, modelID }`. */
+export interface Entry {
+	providerID: string
+	modelID: string
+}
+
+export interface Prefs {
+	favorite: Set<string>
+	recent: Map<string, number>
+	/** `variant{ "provider/model": "high" }`: a saved variant per model, "default" included. */
+	variants: Map<string, string>
+}
+
+/** The host's `favorite[]` as it is in the file: a key cannot be split back — a model id may hold a slash. */
+export function readFavourites(): Entry[] | undefined {
+	try {
+		const data = JSON.parse(readFileSync(PREFS_FILE, "utf8"))
+		if (!Array.isArray(data.favorite)) return []
+		return data.favorite.filter(
+			(entry: any) => typeof entry?.providerID === "string" && typeof entry?.modelID === "string",
+		)
+	} catch (error) {
+		// A missing file is not an error: starting empty creates it on the write. Anything else is.
+		if ((error as NodeJS.ErrnoException)?.code === "ENOENT") return []
+		console.error("[oc-models-pro] favourites: " + (error instanceof Error ? error.message : String(error)))
+		return undefined
+	}
+}
+
+/** Rewrites `favorite[]` with the rest of the file untouched. */
+export function writeFavourites(list: Entry[]): boolean {
+	try {
+		let raw: any
+		try {
+			raw = JSON.parse(readFileSync(PREFS_FILE, "utf8"))
+		} catch (error) {
+			if ((error as NodeJS.ErrnoException)?.code !== "ENOENT") throw error
+			raw = {}
+		}
+		raw.favorite = list
+		writeFileSync(TEMP_FILE, JSON.stringify(raw))
+		renameSync(TEMP_FILE, PREFS_FILE)
+		return true
+	} catch (error) {
+		console.error("[oc-models-pro] favourites: " + (error instanceof Error ? error.message : String(error)))
+		return false
+	}
+}
+
+/** Adds or removes one model; `undefined` when the file could not be read or written. */
+export function toggleFavorite(providerID: string, modelID: string, on?: boolean): boolean | undefined {
+	const key = prefKey(providerID, modelID)
+	const list = readFavourites()
+	if (!list) return undefined
+	const kept = list.filter((entry) => prefKey(entry.providerID, entry.modelID) !== key)
+	const next = on ?? kept.length === list.length
+	return writeFavourites(next ? [...kept, { providerID, modelID }] : kept) ? next : undefined
+}
+
+export function readPrefs(): Prefs {
+	const parsed: Prefs = { favorite: new Set(), recent: new Map(), variants: new Map() }
+	try {
+		const data = JSON.parse(readFileSync(PREFS_FILE, "utf8"))
+		for (const entry of data.favorite ?? []) parsed.favorite.add(prefKey(entry.providerID, entry.modelID))
+		for (const [index, entry] of (data.recent ?? []).entries())
+			parsed.recent.set(prefKey(entry.providerID, entry.modelID), index)
+		for (const [model, variant] of Object.entries(data.variant ?? {}))
+			if (typeof variant === "string") parsed.variants.set(model, variant)
+	} catch (error) {
+		// A corrupt state file empties the favourites and the recent list: say so instead of pretending.
+		console.error("[oc-models-pro] prefs unreadable: " + (error instanceof Error ? error.message : String(error)))
+	}
+	return parsed
+}

package/rows.ts

@@ -0,0 +1,301 @@
+// oc-models-pro/rows.ts — the facts both surfaces read the same way.
+//
+// The terminal draws a monospace table and the desktop draws a grid, but what a row *means* is not the
+// renderer's business: the effective price, what counts as free, and the ten orders are one definition
+// here. Two copies would drift the way they already did once — the terminal kept free models out of the
+// price order and the desktop did not.
+//
+// Runnable standalone for its self-check: node plugins/oc-models-pro/rows.ts --self-check
+
+export interface Row {
+	name: string
+	providerID: string
+	modelID: string
+	provider: string
+	/** Two letters from `tags.ts`: the provider's, unique in the catalogue. */
+	tag: string
+	/** Undefined when the catalogue has no price for the model: an unknown figure, not a free one. */
+	input?: number
+	output?: number
+	/** Undefined when the model carries no limit. */
+	context?: number
+	/** Monthly limit ÷ the $10 plan: the ordering multiplier, shown so the order explains itself. */
+	credit: number
+	/** Allowance ÷ its normal one, when the page marks a promotion. */
+	promo?: number
+	/** Peak price ÷ off-peak price, for a model with two tariffs. */
+	peak?: number
+	/** Stencil's intelligence score and its speed; absent when the catalogue has no row for the model. */
+	int?: number
+	tps?: number
+	/** Tokens per second measured here, on this provider. Outranks `tps` and carries no tilde. */
+	measured?: number
+	enabled: boolean
+}
+
+/** What the Go plan makes a model cost: the figure the effective order sorts by. An unknown price is
+ *  `undefined`, not infinity, so an order can tell "not measured" from "very expensive". */
+export function effective(row: Row): number | undefined {
+	if (row.input === undefined) return undefined
+	return row.input / (row.credit || 1)
+}
+
+/** A missing price is not a free one: both figures must be there, and be zero. */
+export function isFree(row: Row): boolean {
+	return row.input === 0 && row.output === 0
+}
+
+/** The speed to sort and print: what this machine measured first, the borrowed figure after. */
+export function speedOf(row: Row): number | undefined {
+	return row.measured ?? row.tps
+}
+
+export type SortKey =
+	| "effective"
+	| "input"
+	| "output"
+	| "inputSum"
+	| "context"
+	| "int"
+	| "speed"
+	| "recent"
+	| "provider"
+	| "name"
+
+export interface SortContext {
+	/** `providerID/modelID` → its place in the recent list; smaller is more recent. */
+	recent: Map<string, number>
+}
+
+export interface Order {
+	/** The long name: a footer, a menu, a title. */
+	label: string
+	/** The short name the terminal prints in its title bar. */
+	short: string
+	/** True when more is better, so the first row is the largest figure. */
+	desc?: true
+	/** `undefined` when the order cannot measure this row — the caller sorts it last, in either direction. */
+	value(row: Row, context: SortContext): number | undefined
+}
+
+/** Whatever an order cannot measure sorts last, never first, and in either direction: an unknown price is
+ *  not the cheapest thing on the list, and a missing score is not the highest. */
+
+export const ORDERS: Record<SortKey, Order> = {
+	effective: { label: "effective price", short: "effective↑", value: effective },
+	input: { label: "input price", short: "in↑", value: (row) => row.input },
+	output: { label: "output price", short: "out↑", value: (row) => row.output },
+	inputSum: {
+		label: "input + output",
+		short: "in+out↑",
+		value: (row) =>
+			row.input === undefined || row.output === undefined ? undefined : (row.input + row.output) / (row.credit || 1),
+	},
+	context: { label: "context window", short: "ctx↓", desc: true, value: (row) => row.context },
+	// A missing score sorts last, never first: Pi's rule, and the honest one.
+	int: { label: "intelligence", short: "int↓", desc: true, value: (row) => row.int },
+	speed: { label: "speed", short: "speed↓", desc: true, value: (row) => speedOf(row) },
+	recent: {
+		label: "recently used",
+		short: "recent",
+		value: (row, context) => context.recent.get(row.providerID + "/" + row.modelID),
+	},
+	provider: { label: "provider", short: "provider", value: () => 0 },
+	name: { label: "name", short: "name", value: () => 0 },
+}
+
+/** The orders in the cycle the terminal walks with `ctrl+o`, in the same sequence. */
+export const ORDER: SortKey[] = [
+	"effective",
+	"input",
+	"output",
+	"inputSum",
+	"context",
+	"int",
+	"speed",
+	"recent",
+	"provider",
+	"name",
+]
+
+/** The direction an order reads in when nothing else says otherwise. */
+export function direction(key: SortKey): 1 | -1 {
+	return ORDERS[key].desc ? -1 : 1
+}
+
+const id = (row: Row) => row.providerID + "/" + row.modelID
+
+/**
+ * The comparator both surfaces sort with. The two label orders compare text; every other order compares
+ * a number, and the direction is passed in because the desktop lets the reader flip it. Ties fall back to
+ * the name so the list never reshuffles between two reads of the same data.
+ */
+export function compare(key: SortKey, a: Row, b: Row, context: SortContext, sign: 1 | -1 = direction(key)): number {
+	if (key === "name" || key === "provider") {
+		const left = key === "name" ? a.name : a.provider
+		const right = key === "name" ? b.name : b.provider
+		const delta = left.localeCompare(right)
+		return delta !== 0 ? delta * sign : id(a).localeCompare(id(b))
+	}
+	const left = ORDERS[key].value(a, context)
+	const right = ORDERS[key].value(b, context)
+	// The direction flips what can be measured, never what cannot: an unknown figure goes last when the
+	// arrow points up and when it points down, or flipping a column would head the list with blanks.
+	if (left === undefined || right === undefined) {
+		if (left === right) return a.name.localeCompare(b.name)
+		return left === undefined ? 1 : -1
+	}
+	if (left === right) return a.name.localeCompare(b.name)
+	return (left < right ? -1 : 1) * sign
+}
+
+/** What a list of rows looks like once it is drawn: one section per provider, or the flat blocks. */
+export interface Section {
+	/** The provider's name, or `Free` for the free bucket. `undefined` when the block needs no label: the
+	 *  leading one, and the paying block after it in the flat layout. */
+	title?: string
+	rows: Row[]
+}
+
+/**
+ * The order the surfaces draw, which is not the order they sort: free models never enter a price order,
+ * so they follow their provider's paying rows; and the model in use is never buried — it leads its
+ * provider, and its provider leads the list. Both surfaces held a copy of this (`gui.tsx` and
+ * `tui.tsx`), and the copies drifted the moment a filter was added.
+ */
+export function arrange(list: Row[], options: { inUse?: string; grouped: boolean }): Section[] {
+	const used = options.inUse === undefined ? undefined : list.find((row) => id(row) === options.inUse)
+
+	if (!options.grouped) {
+		const rest = used ? list.filter((row) => row !== used) : list
+		const paying = rest.filter((row) => !isFree(row))
+		const free = rest.filter((row) => isFree(row))
+		return [
+			...(used ? [{ rows: [used] }] : []),
+			...(paying.length ? [{ rows: paying }] : []),
+			...(free.length ? [{ title: "Free", rows: free }] : []),
+		]
+	}
+
+	// Built from the whole list, the in-use row included: leaving it out left its provider with no group
+	// at all when it was the only row a filter kept, and the row surfaced under the first header.
+	const groups = new Map<string, Section>()
+	for (const row of list) {
+		const group = groups.get(row.providerID) ?? { title: row.provider, rows: [] }
+		// Paying first, then free: `isFree` sorts false before true.
+		const at = group.rows.findIndex((entry) => isFree(entry) && !isFree(row))
+		if (at === -1) group.rows.push(row)
+		else group.rows.splice(at, 0, row)
+		groups.set(row.providerID, group)
+	}
+	// By name, and by id when two providers share one: the id decides, the name only labels.
+	const sections = [...groups.entries()]
+		.sort(([idA, a], [idB, b]) => (a.title ?? "").localeCompare(b.title ?? "") || idA.localeCompare(idB))
+		.map(([, section]) => section)
+	if (used) {
+		// The in-use provider leads, and its model leads inside it.
+		const at = sections.indexOf(groups.get(used.providerID)!)
+		if (at > 0) sections.unshift(...sections.splice(at, 1))
+		const first = sections[0]
+		if (first) first.rows = [used, ...first.rows.filter((row) => row !== used)]
+	}
+	return sections
+}
+
+// Self-check: node plugins/oc-models-pro/rows.ts --self-check
+// Guarded: this module is also bundled into the desktop window, where `process` does not exist.
+if (typeof process !== "undefined" && process.argv?.[2] === "--self-check") {
+	const row = (over: Partial<Row> = {}): Row => ({
+		name: "Model",
+		providerID: "p",
+		modelID: "m",
+		provider: "Provider",
+		tag: "PR",
+		credit: 1,
+		enabled: true,
+		...over,
+	})
+	const context: SortContext = { recent: new Map([["p/m", 0]]) }
+	const check = (ok: boolean, message: string) => {
+		if (!ok) throw new Error("self-check: " + message)
+	}
+
+	check(effective(row()) === undefined, "an unknown input price is not zero")
+	check(effective(row({ input: 0.8, credit: 8 })) === 0.1, "the credit divides the input price")
+	check(effective(row({ input: 0.8, credit: 0 })) === 0.8, "a zero credit must not divide by zero")
+	check(!isFree(row()), "a missing price is not free")
+	check(!isFree(row({ input: 0, output: 2 })), "a zero input with a paid output is not free")
+	check(isFree(row({ input: 0, output: 0 })), "both at zero is free")
+	check(speedOf(row({ tps: 40, measured: 12 })) === 12, "a measured speed outranks a borrowed one")
+	check(speedOf(row()) === undefined, "no speed is no speed")
+
+	// The price orders put an unknown figure last, and the descending ones put a missing figure last too.
+	const sorts = (key: SortKey, rows: Row[]) => [...rows].sort((a, b) => compare(key, a, b, context))
+	const cheap = row({ name: "cheap", input: 1, output: 1 })
+	const dear = row({ name: "dear", input: 10, output: 10 })
+	const unknown = row({ name: "unknown" })
+	check(sorts("input", [unknown, dear, cheap]).map((r) => r.name)[0] === "cheap", "in↑ starts at the cheapest")
+	check(sorts("input", [unknown, dear, cheap]).map((r) => r.name)[2] === "unknown", "an unknown price sorts last")
+	const winning: Row[] = [row({ name: "few", context: 1000, int: 10 }), row({ name: "many", context: 100_000, int: 50 }), unknown]
+	check(sorts("context", winning)[0].name === "many", "ctx↓ starts at the widest window")
+	check(sorts("context", winning)[2].name === "unknown", "a missing window sorts last, not first")
+	check(sorts("int", winning)[0].name === "many", "int↓ starts at the highest score")
+	check(sorts("int", winning)[2].name === "unknown", "a missing score sorts last, not first")
+	check(sorts("speed", winning)[2].name === "unknown", "a missing speed sorts last, not first")
+	// Flipping a column is the reader's right, and it must never bring the blanks to the top: this is the
+	// state two clicks reach, and the one the sentinels used to get wrong.
+	const flipped = (key: SortKey, rows: Row[]) => [...rows].sort((a, b) => compare(key, a, b, context, -1))
+	check(flipped("input", [unknown, dear, cheap])[2].name === "unknown", "in↓ puts an unknown price last too")
+	check(flipped("input", [unknown, dear, cheap])[0].name === "dear", "in↓ starts at the dearest")
+	check(flipped("context", winning)[2].name === "unknown", "ctx↑ puts a missing window last too")
+	check(flipped("int", winning)[2].name === "unknown", "int↑ puts a missing score last too")
+	check(flipped("speed", winning)[2].name === "unknown", "speed↑ puts a missing speed last too")
+	check(flipped("effective", [unknown, dear, cheap])[2].name === "unknown", "effective↓ puts an unknown price last too")
+	const recentContext: SortContext = { recent: new Map([["p/fresh", 0]]) }
+	const fresh = row({ name: "fresh", modelID: "fresh" })
+	const stale = row({ name: "stale", modelID: "stale" })
+	check(
+		[stale, fresh].sort((a, b) => compare("recent", a, b, recentContext))[0].name === "fresh",
+		"the recent list orders by its index",
+	)
+	check(compare("input", cheap, dear, context, -1) > 0, "the sign the caller passes flips the order")
+	check(compare("name", row({ name: "a" }), row({ name: "b" }), context) < 0, "name compares text")
+	check(compare("provider", row({ provider: "a" }), row({ provider: "b" }), context) < 0, "provider compares text")
+	check(direction("effective") === 1 && direction("int") === -1, "the default direction follows the order")
+
+	// The order the surfaces draw: the cases that each cost a bug.
+	const a = row({ name: "a", modelID: "a", providerID: "pa", provider: "A", input: 2, output: 2 })
+	const b = row({ name: "b", modelID: "b", providerID: "pa", provider: "A", input: 0, output: 0 })
+	const c = row({ name: "c", modelID: "c", providerID: "pb", provider: "B", input: 3, output: 3 })
+
+	const grouped = arrange([a, b, c], { inUse: "pb/c", grouped: true })
+	check(grouped.map((s) => s.title).join() === "B,A", "the provider in use leads the list")
+	check(grouped[0].rows[0] === c, "and its model leads inside it")
+	check(grouped[1].rows.map((r) => r.name).join() === "a,b", "paying before free inside a group")
+
+	// The in-use row shares its group here: hoisting the provider is not enough, the row itself must move,
+	// and this is the shape the panel depends on (its sort does not pre-hoist, unlike the terminal's).
+	const inner = arrange([a, b, c], { inUse: "pa/b", grouped: true })
+	check(inner[0].title === "A" && inner[0].rows[0] === b, "the in-use row leads inside a group that has others")
+	check(inner[0].rows.map((r) => r.name).join() === "b,a", "and the rest of the group keeps its order")
+
+	// Free in use: it leads the list in both layouts, and never falls into the free bucket.
+	const freeUsed = arrange([a, b, c], { inUse: "pa/b", grouped: false })
+	check(freeUsed[0].rows[0] === b, "flat: a free model in use still leads")
+	check(!freeUsed.some((s) => s.title === "Free"), "flat: and is not repeated in the free bucket")
+
+	const solo = arrange([c], { inUse: "pb/c", grouped: true })
+	check(solo.length === 1 && solo[0].title === "B", "the only row a filter kept still has its own group")
+
+	const flat = arrange([b, c, a], { inUse: "pb/c", grouped: false })
+	check(flat[0].rows[0] === c, "flat: the model in use leads the list")
+	check(flat[flat.length - 1].title === "Free", "flat: the free bucket is last")
+	check(flat[flat.length - 1].rows[0] === b, "flat: and holds the free row")
+
+	const twin = row({ name: "twin", modelID: "twin", providerID: "p2", provider: "A", input: 4, output: 4 })
+	const twins = arrange([a, twin], { inUse: "p2/twin", grouped: true })
+	check(twins.length === 2, "two providers sharing a display name stay two groups")
+	check(twins[0].rows[0] === twin, "and the one in use leads by id, not by the shared name")
+
+	console.log("self-check ok: " + ORDER.length + " orders, unknown figures last in every one of them")
+}

package/rpc.ts

@@ -0,0 +1,108 @@
+// What the desktop's panel reads: a plugin window has no Node built-ins, so every file and every fetch
+// stays in the server half and the window asks for the finished table.
+import { Rpc } from "@opencode/plugin/rpc"
+
+import type { Row } from "./rows.ts"
+
+const Count = { type: "number" }
+
+const Row = {
+	type: "object",
+	properties: {
+		providerID: { type: "string" },
+		modelID: { type: "string" },
+		name: { type: "string" },
+		/** The provider's display name, account first as the host writes it. */
+		provider: { type: "string" },
+		/** Two letters from `tags.ts`. */
+		tag: { type: "string" },
+		/** Prices per million tokens; absent when the catalogue has none — an unknown figure, not a free one. */
+		input: Count,
+		output: Count,
+		context: Count,
+		/** Monthly limit ÷ the $10 plan. 1 when the plan is unknown. */
+		credit: Count,
+		promo: Count,
+		peak: Count,
+		int: Count,
+		/** Borrowed from Artificial Analysis, or the catalogue's own when it still carries one. */
+		tps: Count,
+		/** Measured on this machine, on this provider. Outranks `tps` and carries no tilde. */
+		measured: Count,
+		enabled: { type: "boolean" },
+	},
+	required: ["providerID", "modelID", "name", "provider", "tag", "credit", "enabled"],
+	additionalProperties: false,
+} as const
+
+const Snapshot = {
+	type: "object",
+	properties: {
+		rows: { type: "array", items: Row },
+		/** `providerID/modelID` of the models the host keeps as favourites, from `model.json`. */
+		favorites: { type: "array", items: { type: "string" } },
+		/** How many offers the catalogue holds, and how many came out with a speed — the pair that tells a
+		 *  thin source from a broken key. */
+		offers: Count,
+		withSpeed: Count,
+		/** False when the Go plan could not be read and no cache was there: every credit is 1. */
+		credits: { type: "boolean" },
+		/** What failed, in the words the panel shows. Empty when everything came back. */
+		problems: { type: "array", items: { type: "string" } },
+	},
+	required: ["rows", "favorites", "offers", "withSpeed", "credits"],
+	additionalProperties: false,
+} as const
+
+export const Models = Rpc.define({
+	id: "models",
+	methods: {
+		snapshot: {
+			input: {
+				type: "object",
+				properties: { force: { type: "boolean" } },
+				additionalProperties: false,
+			},
+			output: Snapshot,
+		},
+		setFavorite: {
+			input: {
+				type: "object",
+				properties: {
+					providerID: { type: "string" },
+					modelID: { type: "string" },
+					/** Absent toggles. */
+					on: { type: "boolean" },
+				},
+				required: ["providerID", "modelID"],
+				additionalProperties: false,
+			},
+			output: {
+				type: "object",
+				properties: {
+					/** False when the file could not be read or written: the panel says so instead of pretending. */
+					ok: { type: "boolean" },
+					favorites: { type: "array", items: { type: "string" } },
+				},
+				required: ["ok", "favorites"],
+				additionalProperties: false,
+			},
+		},
+	},
+	// Present (empty) on purpose: a missing events map fails the whole plugin.
+	events: {},
+})
+
+/** The wire form is the row both surfaces sort: one shape, declared once. */
+export type ModelRow = Row
+
+export interface ModelsSnapshot {
+	rows: ModelRow[]
+	favorites: string[]
+	offers: number
+	withSpeed: number
+	credits: boolean
+	problems?: string[]
+}
+
+export default Models

package/tui.js

@@ -18,139 +18,24 @@ import { createElement as _$createElement } from "@opentui/solid";
 // is the first row whatever it costs: the free/paying split never buries it.
 import { Plugin } from "@opencode/plugin/tui";
 import { For, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js";
-import { appendFileSync, readFileSync, renameSync, watch, writeFileSync } from "node:fs";
+import { appendFileSync, readFileSync, watch, writeFileSync } from "node:fs";
 import { homedir, tmpdir } from "node:os";
 import { join } from "node:path";
 import { benchFor, benchIndex, benchKey } from "./bench.ts";
 import { aaIndex } from "./aa.ts";
 import { speedIndex } from "./tps.ts";
-import { credits, goPlan, key } from "./multipliers.ts";
+import { credits, goPlan, key, nativePeak } from "./multipliers.ts";
 import { LEGEND_MIN, fit, hintLines, rowWidth } from "./fit.ts";
 import { tagsFor } from "./tags.ts";
+import { prefKey, readFavourites, readPrefs, toggleFavorite, writeFavourites, PREFS_FILE } from "./prefs.ts";
+import { ORDER, ORDERS, arrange, compare, isFree } from "./rows.ts";
 const SCOPES = ["all", "favorites", "paying"];
-const prefKey = (providerID, modelID) => providerID + "/" + modelID;
-
-/** The picker's own state file: `favorite[]` and `recent[]` are `{ providerID, modelID }`. */
-
-const PREFS_FILE = join(homedir(), ".local/state/opencode/model.json");
-/** Same directory, a leading dot: the host watches `model.json.*`, not this. */
-const TEMP_FILE = join(homedir(), ".local/state/opencode", ".model.json.tmp");
 let prefs = {
   favorite: new Set(),
   recent: new Map(),
   variants: new Map()
 };
 
-/** The host's `favorite[]` as it is in the file: a key cannot be split back — a model id may hold a slash. */
-function readFavourites() {
-  try {
-    const data = JSON.parse(readFileSync(PREFS_FILE, "utf8"));
-    if (!Array.isArray(data.favorite)) return [];
-    return data.favorite.filter(entry => typeof entry?.providerID === "string" && typeof entry?.modelID === "string");
-  } catch (error) {
-    // A missing file is not an error: starting empty creates it on the write. Anything else is.
-    if (error?.code === "ENOENT") return [];
-    trace("favourites: " + (error instanceof Error ? error.message : String(error)));
-    return undefined;
-  }
-}
-
-/** Rewrites `favorite[]` with the rest of the file untouched. The host watches this path and
- *  `model.json.*`, so the atomic rename is seen and the native picker, `model.cycle_favorite` and this
- *  list stay in step; a dot in front keeps the temp name outside that glob. */
-function writeFavourites(list) {
-  try {
-    let raw;
-    try {
-      raw = JSON.parse(readFileSync(PREFS_FILE, "utf8"));
-    } catch (error) {
-      if (error?.code !== "ENOENT") throw error;
-      raw = {};
-    }
-    raw.favorite = list;
-    writeFileSync(TEMP_FILE, JSON.stringify(raw));
-    renameSync(TEMP_FILE, PREFS_FILE);
-    return true;
-  } catch (error) {
-    trace("favourites: " + (error instanceof Error ? error.message : String(error)));
-    return false;
-  }
-}
-function toggleFavorite(providerID, modelID) {
-  const key = prefKey(providerID, modelID);
-  const list = readFavourites();
-  if (!list) return undefined;
-  const kept = list.filter(entry => prefKey(entry.providerID, entry.modelID) !== key);
-  const on = kept.length === list.length;
-  return writeFavourites(on ? [...kept, {
-    providerID,
-    modelID
-  }] : kept) ? on : undefined;
-}
-function readPrefs() {
-  const parsed = {
-    favorite: new Set(),
-    recent: new Map(),
-    variants: new Map()
-  };
-  try {
-    const data = JSON.parse(readFileSync(PREFS_FILE, "utf8"));
-    for (const entry of data.favorite ?? []) parsed.favorite.add(prefKey(entry.providerID, entry.modelID));
-    for (const [index, entry] of (data.recent ?? []).entries()) parsed.recent.set(prefKey(entry.providerID, entry.modelID), index);
-    for (const [model, variant] of Object.entries(data.variant ?? {})) if (typeof variant === "string") parsed.variants.set(model, variant);
-  } catch (error) {
-    // A corrupt state file empties the favourites and the recent list: say so instead of pretending.
-    trace("prefs unreadable: " + (error instanceof Error ? error.message : String(error)));
-  }
-  return parsed;
-}
-
-/** What the Go plan makes a model cost: the figure the effective order sorts by. An unknown price is
- *  not zero — it sorts last, or it would sit at the top of the cheapest list forever. */
-function effective(row) {
-  if (row.input === undefined) return Number.POSITIVE_INFINITY;
-  return row.input / (row.credit || 1);
-}
-const SORTS = [{
-  label: "effective price",
-  short: "effective↑",
-  value: effective
-}, {
-  label: "input price",
-  short: "in↑",
-  value: row => row.input ?? Number.POSITIVE_INFINITY
-}, {
-  label: "output price",
-  short: "out↑",
-  value: row => row.output ?? Number.POSITIVE_INFINITY
-}, {
-  label: "input + output",
-  short: "in+out↑",
-  value: row => row.input === undefined || row.output === undefined ? Number.POSITIVE_INFINITY : (row.input + row.output) / (row.credit || 1)
-}, {
-  label: "context window",
-  short: "ctx↓",
-  value: row => row.context === undefined ? Number.POSITIVE_INFINITY : -row.context
-},
-// A missing score sorts last, never first: Pi's rule, and the honest one.
-{
-  label: "intelligence",
-  short: "int↓",
-  value: row => -(row.int ?? -1)
-}, {
-  label: "speed",
-  short: "speed↓",
-  value: row => -(row.measured ?? row.tps ?? -1)
-}, {
-  label: "recently used",
-  short: "recent",
-  value: row => prefs.recent.get(prefKey(row.providerID, row.modelID)) ?? 1e9
-}, {
-  label: "name",
-  short: "name",
-  value: row => 0
-}];
-
 /** Fallbacks, used only when the theme defines none of the candidates. */
 const FALLBACK_DIM = "#8a8a8a";
 const FALLBACK_ACCENT = "#5a9fd4";
@@ -193,9 +78,6 @@ function price(value, width) {
 function isGo(providerID) {
   return providerID === "opencode-go";
 }
-function free(row) {
-  return row.input === 0 && row.output === 0;
-}
 function headerRow(f) {
   return ["  ", "    ", "model".padEnd(f.name), cell("in", 6), cell("out", 6), ...(f.ctx ? [cell("ctx", 5)] : []), ...(f.int ? [cell("int", 5)] : []), ...(f.tkps ? [cell("tok/s", 6)] : []), cell("cred", 4), ...(f.note ? [cell("note", 6)] : [])].join(" ");
 }
@@ -289,7 +171,7 @@ export default Plugin.define({
     let creditsKnown = false;
     // Signals, not plain variables: the header shows them, and a plain variable left the title
     // saying "effective price" whatever the list was actually sorted by.
-    const [sort, setSort] = createSignal(0);
+    const [sort, setSort] = createSignal("effective");
     const [grouped, setGrouped] = createSignal(true);
     const [scope, setScope] = createSignal("all");
     function fail(label, error) {
@@ -349,7 +231,9 @@ export default Plugin.define({
           // "DeepSeek V4.1 Flash" inherited the Go credit.
           credit: isGo(model.providerID) ? creditIndex.get(key(model.modelID))?.credit ?? 1 : 1,
           promo: isGo(model.providerID) ? creditIndex.get(key(model.modelID))?.promo : undefined,
-          peak: isGo(model.providerID) ? creditIndex.get(key(model.modelID))?.peak : undefined,
+          // Measured on the Go plan first, then the native rule: the catalogue lists one
+          // DeepSeek price, so only the second can say it doubles.
+          peak: (isGo(model.providerID) ? creditIndex.get(key(model.modelID))?.peak : undefined) ?? nativePeak(model.providerID),
           int: score?.int,
           tps: theirs,
           measured: mine,
@@ -502,66 +386,35 @@ export default Plugin.define({
         const needle = query().trim().toLowerCase();
         let list = rows().filter(row => row.enabled);
         if (scope() === "favorites") list = list.filter(row => prefs.favorite.has(prefKey(row.providerID, row.modelID)) || prefKey(row.providerID, row.modelID) === mine);
-        if (scope() === "paying") list = list.filter(row => !free(row) || prefKey(row.providerID, row.modelID) === mine);
+        if (scope() === "paying") list = list.filter(row => !isFree(row) || prefKey(row.providerID, row.modelID) === mine);
         if (needle) list = list.filter(row => (row.name + " " + row.provider + " " + row.providerID).toLowerCase().includes(needle));
         list = [...list].sort((a, b) => {
           const mineA = prefKey(a.providerID, a.modelID) === mine;
           const mineB = prefKey(b.providerID, b.modelID) === mine;
           if (mineA !== mineB) return mineA ? -1 : 1;
-          if (SORTS[sort()].label !== "name") {
-            const delta = SORTS[sort()].value(a) - SORTS[sort()].value(b);
-            if (delta) return delta;
-          }
-          return a.name.localeCompare(b.name);
+          return compare(sort(), a, b, {
+            recent: prefs.recent
+          });
         });
 
         // Free models never enter the price order: they are not cheap, they are unmetered, and at
         // the top they hide everything that costs something. Grouped, each one still sits under
         // its own provider, after that provider's paying rows — the group answers "who serves
         // this", and a global "Free" bucket would answer it wrong. Flat, they keep one bucket.
+        // What is drawn, and in which order, is `arrange`'s business — the same function the
+        // desktop panel calls. This half only turns sections into the headers and rows a
+        // terminal list wants.
         const items = [];
-        if (grouped()) {
-          const groups = new Map();
-          for (const row of list) {
-            const bucket = groups.get(row.provider) ?? [];
-            bucket.push(row);
-            groups.set(row.provider, bucket);
-          }
-          // Two bits: the model in use first, then the active order inside each of the two classes.
-          // It leads its group even when it is free — it is the state of the session, not a price.
-          for (const bucket of groups.values()) bucket.sort((a, b) => {
-            const mineA = prefKey(a.providerID, a.modelID) === mine;
-            const mineB = prefKey(b.providerID, b.modelID) === mine;
-            if (mineA !== mineB) return mineA ? -1 : 1;
-            return Number(free(a)) - Number(free(b));
+        for (const section of arrange(list, {
+          inUse: mine,
+          grouped: grouped()
+        })) {
+          if (section.title) items.push({
+            header: section.title
           });
-          const names = [...groups.keys()].sort((a, b) => a.localeCompare(b));
-          // The provider of the model in use comes first, like the native picker.
-          const mineProvider = list.find(row => prefKey(row.providerID, row.modelID) === mine)?.provider;
-          if (mineProvider) names.sort((a, b) => a === mineProvider ? -1 : b === mineProvider ? 1 : 0);
-          for (const name of names) {
-            items.push({
-              header: name
-            });
-            for (const row of groups.get(name)) items.push({
-              row
-            });
-          }
-        } else {
-          // The model in use leads the list, free or not: it is the state of the session, not a
-          // price to compare. The other free models keep the bucket at the end.
-          for (const row of list) if (!free(row) || prefKey(row.providerID, row.modelID) === mine) items.push({
+          for (const row of section.rows) items.push({
             row
           });
-          const freeRows = list.filter(row => free(row) && prefKey(row.providerID, row.modelID) !== mine);
-          if (freeRows.length) {
-            items.push({
-              header: "Free"
-            });
-            for (const row of freeRows) items.push({
-              row
-            });
-          }
         }
         return items;
       });
@@ -713,10 +566,10 @@ export default Plugin.define({
         trace("variant set: " + chosen + " -> " + applied);
       }
       function cycleSort() {
-        setSort((sort() + 1) % SORTS.length);
+        setSort(ORDER[(ORDER.indexOf(sort()) + 1) % ORDER.length]);
       }
       function recentSort() {
-        setSort(SORTS.findIndex(entry => entry.label === "recently used"));
+        setSort("recent");
       }
       function toggleGroups() {
         setGrouped(!grouped());
@@ -873,7 +726,7 @@ export default Plugin.define({
         _$insertNode(_el$6, _el$8);
         _$setProp(_el$6, "fg", DIM);
         _$setProp(_el$6, "wrapMode", "none");
-        _$insert(_el$6, () => "sort: " + SORTS[sort()].short, _el$8);
+        _$insert(_el$6, () => "sort: " + ORDERS[sort()].short, _el$8);
         _$insertNode(_el$9, _el$0);
         _$setProp(_el$9, "fg", BASE);
         _$setProp(_el$9, "wrapMode", "none");

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" })],
+})