@soba-so/react 0.0.5 → 0.0.7

package/dist/SobaProvider.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import type { CurrentPlan, Plan } from "./types.js";
 export interface SobaProviderProps {
     children: ReactNode;
     /**
@@ -26,6 +27,23 @@ export interface SobaProviderProps {
     /** Your route that starts a run with `@soba-so/sdk` and forwards the stream. */
     runEndpoint?: string;
     baseUrl?: string;
+    /**
+     * PLANS THE SERVER ALREADY FETCHED, so the first paint has prices in it.
+     *
+     * Without these the component cannot draw a price until two round trips have
+     * finished in sequence — mint an `est_` session, then read `/v1/plans` with
+     * it — and both start after mount, so every pricing page opened on a spinner.
+     * Neither trip can move to the server, because the session is per end user
+     * and the browser is the only party that has one.
+     *
+     * A server holding the app's secret key can read the same list directly
+     * (`soba.plans.list()`), and passing it here seeds the state rather than
+     * replacing the fetch: the provider still refreshes in the background, so a
+     * price changed since the page was rendered still corrects itself.
+     */
+    initialPlans?: Plan[];
+    /** What that user is on, if the server asked. Pairs with `initialPlans`. */
+    initialCurrentPlan?: CurrentPlan | null;
     pollMs?: number;
     /** The stylesheet injects itself once. Turn it off to ship your own. */
     injectStyles?: boolean;

package/dist/index.mjs

@@ -1,8 +1,8 @@
 "use client"
-var ee=class extends Error{status;constructor(t,n){super(t),this.name="ConnectError",this.status=n}},Q=class{session;baseUrl;doFetch;constructor(t){this.session=t.session,this.baseUrl=(t.baseUrl??"").replace(/\/+$/,""),this.doFetch=t.fetchImpl??fetch.bind(globalThis)}context(){return this.request("GET","/v1/connect")}async machines(){return(await this.request("GET","/v1/machines")).machines}lookup(t){return this.request("GET",`/v1/device/lookup?code=${encodeURIComponent(t)}`)}approve(t){return this.request("POST","/v1/device/approve",{user_code:t})}deny(t){return this.request("POST","/v1/device/deny",{user_code:t})}plans(){return this.request("GET","/v1/plans")}selectPlan(t){return this.request("POST","/v1/plans/select",{plan:t})}checkoutPlan(t,n){return this.request("POST","/v1/plans/checkout",{plan:t,...n?.successUrl?{success_url:n.successUrl}:{},...n?.cancelUrl?{cancel_url:n.cancelUrl}:{}})}leavePlan(){return this.request("DELETE","/v1/plans/select")}approveRuntime(t,n){return this.request("POST","/v1/runtimes/approve",{machine_id:t,runtime_id:n})}async request(t,n,i){let s=await this.doFetch(`${this.baseUrl}${n}`,{method:t,headers:{authorization:`Bearer ${this.session}`,...i?{"content-type":"application/json"}:{}},...i?{body:JSON.stringify(i)}:{}}),r={};try{r=await s.json()}catch{}if(!s.ok){let u=typeof r.error=="string"?r.error:`Request failed (${s.status})`;throw new ee(u,s.status)}return r}};function ae(e){return e.authenticated===!0?{tone:"ok",text:"signed in"}:e.authenticated===!1?{tone:"warn",text:e.auth_hint??"signed out on that machine"}:{tone:"unknown",text:"could not tell"}}function ie(e){return e.state==="busy"?{tone:"busy",text:`serving ${e.active} of ${e.capacity}`}:e.state==="online"?{tone:"ok",text:"connected"}:{tone:"off",text:"asleep or offline"}}import{jsx as P,jsxs as G}from"react/jsx-runtime";function H({machines:e,onApproveRuntime:t}){return e.length?P("div",{children:e.map(n=>{let i=ie(n);return G("div",{className:"sc-machine",children:[G("div",{className:"sc-row-between",children:[G("div",{className:"sc-row",children:[P("span",{className:`sc-dot sc-dot-${i.tone}`,"aria-hidden":"true"}),P("strong",{children:n.label??"This machine"})]}),P("span",{className:"sc-note",children:i.text})]}),P("p",{className:"sc-note",children:[n.platform,n.arch,n.version&&`worker ${n.version}`,n.always_on&&"always on"].filter(Boolean).join(" \xB7 ")}),G("ul",{className:"sc-runtimes",children:[n.runtimes.map(s=>{let r=ae(s);return s.quarantined?G("li",{className:"sc-row-between",children:[P("span",{children:s.display_name}),t?P("button",{type:"button",className:"sc-btn",onClick:()=>t(n.id,s.id),children:"New here. Let it serve"}):P("span",{className:"sc-tone-warn",children:"new, not serving yet"})]},s.id):G("li",{className:"sc-row-between",children:[P("span",{children:s.display_name}),P("span",{className:`sc-tone-${r.tone}`,children:r.text})]},s.id)}),!n.runtimes.length&&P("li",{className:"sc-note",children:"No runtime advertised. Install Claude Code, Codex or Ollama on that machine."})]})]},n.id)})}):P("p",{className:"sc-note",children:"Nothing connected yet."})}import{useCallback as te,useEffect as le,useMemo as qe,useRef as je,useState as O}from"react";var ce=[{id:"claude",title:"The Claude plan you already pay for",cost:"Nothing beyond the plan",prerequisite:"Claude Code installed, and signed in",hint:"Install it from claude.ai/code, then run `claude` once and sign in.",expects:["claude-code"]},{id:"chatgpt",title:"The ChatGPT plan you already pay for",cost:"Nothing beyond the plan",prerequisite:"Codex installed, and signed in",hint:"Install Codex, then run `codex` once and sign in.",expects:["codex"]},{id:"local",title:"A model on your own machine",cost:"Free. You bought the hardware",prerequisite:"Ollama running, with a model pulled",hint:"Install Ollama, then `ollama pull` a model before pairing.",expects:["ollama","openai-api"]}];import{Fragment as Pe,jsx as a,jsxs as f}from"react/jsx-runtime";var Fe=2e3,De=1e4;function ue({client:e,initialCode:t,onConnected:n,showStatus:i=!0}){let[s,r]=O("loading"),[u,y]=O(null),[g,h]=O([]),[b,o]=O(null),[d,$]=O(t??""),[E,j]=O(null),[M,k]=O(null),[U,_]=O(!1),F=je(null);le(()=>{let l=!0;return Promise.all([e.context(),e.machines()]).then(([C,w])=>{l&&(y(C),h(w),F.current=new Set(w.map(R=>R.id)),t?r("code"):i&&w.length>0?r("manage"):r("choose"))}).catch(C=>{l&&(k(C.message),r("choose"))}),()=>{l=!1}},[e,t,i]),le(()=>{if(s!=="manage")return;let l=!0,C=setInterval(async()=>{try{let w=await e.machines();l&&h(w)}catch{}},De);return()=>{l=!1,clearInterval(C)}},[s,e]),le(()=>{if(s!=="waiting")return;let l=!0,C=setInterval(async()=>{try{let w=await e.machines();if(!l)return;h(w);let R=w.filter(B=>!F.current?.has(B.id));(R.find(B=>B.state!=="offline")??R[0])&&(r("connected"),n?.(w))}catch{}},Fe);return()=>{l=!1,clearInterval(C)}},[s,e,n]);let D=te(async()=>{k(null),_(!0);try{let l=await e.lookup(d);j(l),r("confirm")}catch(l){k(l.message)}finally{_(!1)}},[e,d]),re=te(async()=>{k(null),_(!0);try{await e.approve(d),r("waiting")}catch(l){k(l.message)}finally{_(!1)}},[e,d]),Z=te(async()=>{_(!0);try{await e.deny(d),r("denied")}catch(l){k(l.message)}finally{_(!1)}},[e,d]),W=qe(()=>u?.connect_url??null,[u]),Y=te(async(l,C)=>{try{await e.approveRuntime(l,C),h(await e.machines())}catch(w){k(w.message)}},[e]);return s==="loading"?a("div",{className:"soba-connect",children:a("div",{className:"sc-card",children:a("p",{className:"sc-note",children:"Loading\u2026"})})}):f("div",{className:"soba-connect",children:[s==="manage"&&f("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Your compute"}),f("p",{className:"sc-sub",children:[u?.app.name??"This app"," runs on these machines, while they are awake."]}),a(H,{machines:g,onApproveRuntime:Y}),M&&a("p",{className:"sc-error",children:M}),a("button",{type:"button",className:"sc-btn",style:{marginTop:16},onClick:()=>r("choose"),children:"Connect another machine"})]}),s==="choose"&&f("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Use the AI you already pay for"}),f("p",{className:"sc-sub",children:[u?.app.name??"This app"," can run on your machine instead of selling you credits. Pick what you already have."]}),a("div",{className:"sc-choices",children:ce.map(l=>f("button",{type:"button",className:"sc-choice","aria-pressed":b?.id===l.id,onClick:()=>o(l),children:[a("span",{className:"sc-choice-title",children:l.title}),a("br",{}),f("span",{className:"sc-choice-meta",children:[l.cost," \xB7 ",l.prerequisite]})]},l.id))}),b&&f("div",{className:"sc-stack",style:{marginTop:16},children:[a("p",{className:"sc-note",children:b.hint}),W?f(Pe,{children:[a("p",{className:"sc-label",children:"Install Soba Connect on the machine you want to use"}),a("a",{className:"sc-btn sc-btn-primary",href:"https://soba.so/soba-connect",target:"_blank",rel:"noreferrer noopener",children:"Get Soba Connect"}),a("p",{className:"sc-label",children:"Then paste this link into it"}),a("code",{className:"sc-code",children:W}),a("p",{className:"sc-note",children:"It will show you a short code. Nothing is pasted back: the credential is written straight to that machine."}),a("button",{type:"button",className:"sc-btn",onClick:()=>r("code"),children:"I have a code"})]}):a("p",{className:"sc-error",children:"This app has no publishable key yet, so there is nothing to pair against."})]})]}),s==="code"&&f("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Enter the code from that machine"}),a("p",{className:"sc-sub",children:"Eight characters, shown by Soba Connect once you paste the link."}),f("form",{className:"sc-stack",onSubmit:l=>{l.preventDefault(),D()},children:[a("input",{className:"sc-input",value:d,onChange:l=>$(l.target.value),placeholder:"ACDE-F234",autoComplete:"off",autoFocus:!0,"aria-label":"Pairing code"}),M&&a("p",{className:"sc-error",children:M}),a("button",{type:"submit",className:"sc-btn sc-btn-primary",disabled:U||d.length<8,children:U?"Checking\u2026":"Continue"})]})]}),s==="confirm"&&E&&f("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Attach this machine to your account?"}),f("p",{className:"sc-sub",children:["Once you approve, ",u?.app.name??"this app"," may send your runs to it. It can never see the account or the keys on it."]}),f("ul",{className:"sc-facts",children:[a(X,{k:"Code",v:E.user_code}),a(X,{k:"Machine",v:E.hostname??"not stated"}),a(X,{k:"System",v:[E.platform,E.arch].filter(Boolean).join(" / ")||"not stated"}),a(X,{k:"Asked by",v:E.client??"not stated"}),E.labels.length>0&&a(X,{k:"Labels",v:E.labels.join(", ")})]}),a("p",{className:"sc-note",style:{marginTop:12},children:"Every line above is what that machine said about itself. If none of it looks like a computer of yours, say no."}),M&&a("p",{className:"sc-error",children:M}),f("div",{className:"sc-row",style:{marginTop:16},children:[a("button",{type:"button",className:"sc-btn sc-btn-primary",onClick:()=>void re(),disabled:U,children:"Approve"}),a("button",{type:"button",className:"sc-btn",onClick:()=>void Z(),disabled:U,children:"No, deny it"})]})]}),s==="waiting"&&f("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Approved. Waiting for it to connect\u2026"}),a("p",{className:"sc-sub",children:"The worker is starting on that machine. This page will change on its own the moment it arrives."}),a("p",{className:"sc-note",children:"If nothing happens, look at Soba Connect on that machine: it says what it is doing."})]}),s==="connected"&&f("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Connected"}),f("p",{className:"sc-sub",children:[u?.app.name??"This app"," will use this machine from now on, while it is awake."]}),i&&f(Pe,{children:[a(H,{machines:g,onApproveRuntime:Y}),a("button",{type:"button",className:"sc-btn",style:{marginTop:16},onClick:()=>r("manage"),children:"Done"})]})]}),s==="denied"&&f("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Declined"}),a("p",{className:"sc-sub",children:"That machine was not attached to your account, and the terminal has been told so."})]})]})}function X({k:e,v:t}){return f("li",{className:"sc-fact",children:[a("span",{className:"sc-fact-key",children:e}),a("span",{children:t})]})}import{createContext as Be,useContext as Ge}from"react";var pe=Be(null);function T(){let e=Ge(pe);if(!e)throw new Error("useSoba() must be used inside a <SobaProvider>.");return e}import{jsx as V}from"react/jsx-runtime";function He({className:e}){let{compute:t}=T(),n=e?`soba-connect ${e}`:"soba-connect";return t.loading&&!t.machines.length?V("div",{className:n,children:V("p",{className:"sc-note",children:"Loading\u2026"})}):t.error&&!t.machines.length?V("div",{className:n,children:V("p",{className:"sc-error",children:t.error.message})}):V("div",{className:n,children:V(H,{machines:t.machines})})}import{createContext as Ve,useContext as Je}from"react";var de=Ve(null);function xe(){return Je(de)}import{jsx as L}from"react/jsx-runtime";function We({initialCode:e,onConnected:t,className:n,showStatus:i}){let{error:s}=T(),r=xe();return s?L("div",{className:Ee(n),children:L("div",{className:"sc-card",children:L("p",{className:"sc-error",children:s.message})})}):r?L("div",{className:n,children:L(ue,{client:r,...e?{initialCode:e}:{},...t?{onConnected:t}:{},...i===void 0?{}:{showStatus:i}})}):L("div",{className:Ee(n),children:L("div",{className:"sc-card",children:L("p",{className:"sc-note",children:"Loading\u2026"})})})}function Ee(e){return e?`soba-connect ${e}`:"soba-connect"}var Ye=new Set(["delta","thinking","status","done","error"]);function ne(e){let t;try{t=JSON.parse(e)}catch{return null}if(!t||typeof t!="object")return null;let n=t,i=n.type==="event"?n.event:n;if(!i||typeof i!="object")return null;let s=i;if(typeof s.type!="string"||!Ye.has(s.type))return null;let r={type:s.type};return typeof s.text=="string"&&(r.text=s.text),typeof s.message=="string"&&(r.message=s.message),typeof s.tool=="string"&&(r.tool=s.tool),typeof s.tier=="string"&&(r.tier=s.tier),s.usage&&typeof s.usage=="object"&&(r.usage=s.usage),r}async function*me(e){let t=e.body;if(!t)throw new Error("That run response had no body to stream.");let n=(e.headers.get("content-type")??"").includes("ndjson"),i=t.getReader(),s=new TextDecoder,r="",u=[];try{for(;;){let g=await i.read();if(g.done)break;for(r+=s.decode(g.value,{stream:!0});;){let h=r.indexOf(`
-`);if(h===-1)break;let b=_e(r.slice(0,h));if(r=r.slice(h+1),n){let o=b.trim()?ne(b):null;o&&(yield o);continue}if(b===""){let o=u.join(`
-`);if(u=[],o==="[DONE]")return;let d=o?ne(o):null;d&&(yield d);continue}ke(b,u)}}!n&&r&&ke(_e(r),u);let y=n?r.trim():u.join(`
-`);if(y&&y!=="[DONE]"){let g=ne(y);g&&(yield g)}}finally{i.cancel().catch(()=>{})}}function ke(e,t){if(!e||e.startsWith(":"))return;let n=e.indexOf(":");if(n===-1||e.slice(0,n)!=="data")return;let i=e.slice(n+1);t.push(i.startsWith(" ")?i.slice(1):i)}function _e(e){return e.endsWith("\r")?e.slice(0,-1):e}async function ze(e){let t="";for await(let n of e)if(n.type==="delta"&&n.text&&(t+=n.text),n.type==="error")throw new Error(n.message??"The run ended with an error.");return t}import{useState as Re}from"react";import{jsx as Te,jsxs as Qe}from"react/jsx-runtime";function Ke({plan:e,successUrl:t,cancelUrl:n,label:i,className:s}){let{plan:r}=T(),[u,y]=Re(!1),[g,h]=Re(null);async function b(){y(!0),h(null);try{let o=await r.checkout(e.id,{...t?{successUrl:t}:{},...n?{cancelUrl:n}:{}});window.location.assign(o)}catch(o){h(o.message),y(!1)}}return Qe("div",{className:s,children:[Te("button",{type:"button",className:"sc-btn sc-btn-primary",disabled:u,onClick:()=>void b(),children:u?"Opening\u2026":i??`Subscribe \u2014 $${e.price.toLocaleString()}/${e.interval}`}),g&&Te("p",{className:"sc-error",children:g})]})}import{useState as Me}from"react";import{Fragment as et,jsx as m,jsxs as N}from"react/jsx-runtime";var Xe={"user-hardware":"your own machine","user-subscription":"your own AI subscription","open-weights":"open models we host",frontier:"frontier models"};function Ze({onSelect:e,successUrl:t,cancelUrl:n,showCompute:i=!0,className:s}){let{plan:r}=T(),[u,y]=Me(null),[g,h]=Me(null);if(r.error)return m("div",{className:s,children:m("div",{className:"sc-card",children:m("p",{className:"sc-error",children:r.error.message})})});if(r.loading)return m("div",{className:s,children:m("div",{className:"sc-card",children:m("p",{className:"sc-note",children:"Loading plans\u2026"})})});if(r.plans.length===0)return m("div",{className:s,children:m("div",{className:"sc-card",children:m("p",{className:"sc-note",children:"This app has no plans yet."})})});async function b(o){y(o.id),h(null);try{if(o.selectable)await r.select(o.id);else if(e)e(o);else{let d=await r.checkout(o.id,{...t?{successUrl:t}:{},...n?{cancelUrl:n}:{}});window.location.assign(d);return}}catch(d){h(d.message)}finally{y(null)}}return N("div",{className:s,children:[m("div",{className:"sc-plans",children:r.plans.map(o=>{let d=r.current?.plan_id===o.id;return N("div",{className:d?"sc-plan sc-plan-current":"sc-plan",children:[N("div",{className:"sc-row-between",children:[m("span",{className:"sc-title",children:o.name}),d&&m("span",{className:"sc-plan-badge",children:"Current"})]}),o.description&&m("p",{className:"sc-sub",children:o.description}),m("p",{className:"sc-plan-price",children:o.price===0?m("span",{className:"sc-plan-amount",children:"Free"}):N(et,{children:[N("span",{className:"sc-plan-amount",children:["$",o.price.toLocaleString()]}),N("span",{className:"sc-plan-interval",children:["/",o.interval]})]})}),N("div",{className:"sc-facts",children:[N("div",{className:"sc-fact",children:[m("span",{className:"sc-fact-key",children:"Included"}),m("span",{children:o.included_units===null?"Unlimited":`${o.included_units.toLocaleString()} ${o.unit}${o.included_units===1?"":"s"}`})]}),o.overage_per_unit>0&&N("div",{className:"sc-fact",children:[m("span",{className:"sc-fact-key",children:"Then"}),N("span",{children:["$",o.overage_per_unit," / ",o.unit]})]}),o.trial_days>0&&N("div",{className:"sc-fact",children:[m("span",{className:"sc-fact-key",children:"Trial"}),N("span",{children:[o.trial_days," days"]})]}),i&&N("div",{className:"sc-fact",children:[m("span",{className:"sc-fact-key",children:"Runs on"}),m("span",{children:o.route_allow===null?"any compute":o.route_allow.length===0?"no compute":o.route_allow.map($=>Xe[$]??$).join(", ")})]})]}),m("button",{type:"button",className:d?"sc-btn":"sc-btn sc-btn-primary",disabled:d||u!==null,onClick:()=>void b(o),children:d?"Your plan":u===o.id?o.selectable?"Switching\u2026":"Opening\u2026":o.selectable?"Choose":`Subscribe \u2014 $${o.price.toLocaleString()}/${o.interval}`})]},o.id)})}),g&&m("p",{className:"sc-error",children:g})]})}import{useCallback as q,useEffect as J,useMemo as fe,useRef as nt,useState as x}from"react";var se=class{#t;#s=null;#n=null;#e;#r=new Set;constructor(t){this.#e=t,this.#t=t.token??null}get token(){return this.#t}get expiresAt(){return this.#s}get canRefresh(){return!!this.#e.endpoint}get refreshAt(){return!this.canRefresh||this.#s===null?null:Math.max(Date.now()+1e4,this.#s-6e4)}subscribe(t){return this.#r.add(t),()=>this.#r.delete(t)}async ensure(){return this.#t?this.#t:this.refresh()}async refresh(){if(this.#n)return this.#n;let t=this.#e.endpoint;if(!t)throw new Error("This Soba session cannot be refreshed. Pass `sessionEndpoint` so the provider can mint a new one.");let n=this.#e.fetchImpl??fetch.bind(globalThis);this.#n=(async()=>{let i=await n(t,{method:"POST",headers:{"content-type":"application/json"},credentials:"same-origin",body:JSON.stringify(this.#e.user?{user:this.#e.user}:{})});if(!i.ok)throw new Error(`Could not start a Soba session (${i.status} from ${t}).`);let s=await i.json(),r=s.session??s.token;if(!r)throw new Error(`${t} answered without a \`session\`. See @soba-so/react's README.`);let u=s.expires_in??s.expiresIn;this.#t=r,this.#s=typeof u=="number"?Date.now()+u*1e3:null;for(let y of this.#r)y();return r})();try{return await this.#n}finally{this.#n=null}}};function Ae(e,t=fetch.bind(globalThis)){return async(n,i)=>{let s=await t(n,i);if(s.status!==401||!e.canRefresh)return s;let r;try{r=await e.refresh()}catch{return s}return t(n,tt(i,r))}}function tt(e,t){let n=new Headers(e?.headers);return n.set("authorization",`Bearer ${t}`),{...e,headers:n}}var Ie="data-soba-react",Oe=!1;function he(){if(Oe||typeof document>"u"||(Oe=!0,document.querySelector(`style[${Ie}]`)))return;let e=document.createElement("style");e.setAttribute(Ie,""),e.textContent=`.soba-connect {
+var te=class extends Error{status;constructor(t,n){super(t),this.name="ConnectError",this.status=n}},Q=class{session;baseUrl;doFetch;constructor(t){this.session=t.session,this.baseUrl=(t.baseUrl??"").replace(/\/+$/,""),this.doFetch=t.fetchImpl??fetch.bind(globalThis)}context(){return this.request("GET","/v1/connect")}async machines(){return(await this.request("GET","/v1/machines")).machines}lookup(t){return this.request("GET",`/v1/device/lookup?code=${encodeURIComponent(t)}`)}approve(t){return this.request("POST","/v1/device/approve",{user_code:t})}deny(t){return this.request("POST","/v1/device/deny",{user_code:t})}plans(){return this.request("GET","/v1/plans")}selectPlan(t){return this.request("POST","/v1/plans/select",{plan:t})}checkoutPlan(t,n){return this.request("POST","/v1/plans/checkout",{plan:t,...n?.successUrl?{success_url:n.successUrl}:{},...n?.cancelUrl?{cancel_url:n.cancelUrl}:{}})}leavePlan(){return this.request("DELETE","/v1/plans/select")}approveRuntime(t,n){return this.request("POST","/v1/runtimes/approve",{machine_id:t,runtime_id:n})}async request(t,n,c){let s=await this.doFetch(`${this.baseUrl}${n}`,{method:t,headers:{authorization:`Bearer ${this.session}`,...c?{"content-type":"application/json"}:{}},...c?{body:JSON.stringify(c)}:{}}),r={};try{r=await s.json()}catch{}if(!s.ok){let u=typeof r.error=="string"?r.error:`Request failed (${s.status})`;throw new te(u,s.status)}return r}};function ce(e){return e.authenticated===!0?{tone:"ok",text:"signed in"}:e.authenticated===!1?{tone:"warn",text:e.auth_hint??"signed out on that machine"}:{tone:"unknown",text:"could not tell"}}function le(e){return e.state==="busy"?{tone:"busy",text:`serving ${e.active} of ${e.capacity}`}:e.state==="online"?{tone:"ok",text:"connected"}:{tone:"off",text:"asleep or offline"}}import{jsx as E,jsxs as V}from"react/jsx-runtime";function W({machines:e,onApproveRuntime:t}){return e.length?E("div",{children:e.map(n=>{let c=le(n);return V("div",{className:"sc-machine",children:[V("div",{className:"sc-row-between",children:[V("div",{className:"sc-row",children:[E("span",{className:`sc-dot sc-dot-${c.tone}`,"aria-hidden":"true"}),E("strong",{children:n.label??"This machine"})]}),E("span",{className:"sc-note",children:c.text})]}),E("p",{className:"sc-note",children:[n.platform,n.arch,n.version&&`worker ${n.version}`,n.always_on&&"always on"].filter(Boolean).join(" \xB7 ")}),V("ul",{className:"sc-runtimes",children:[n.runtimes.map(s=>{let r=ce(s);return s.quarantined?V("li",{className:"sc-row-between",children:[E("span",{children:s.display_name}),t?E("button",{type:"button",className:"sc-btn",onClick:()=>t(n.id,s.id),children:"New here. Let it serve"}):E("span",{className:"sc-tone-warn",children:"new, not serving yet"})]},s.id):V("li",{className:"sc-row-between",children:[E("span",{children:s.display_name}),E("span",{className:`sc-tone-${r.tone}`,children:r.text})]},s.id)}),!n.runtimes.length&&E("li",{className:"sc-note",children:"No runtime advertised. Install Claude Code, Codex or Ollama on that machine."})]})]},n.id)})}):E("p",{className:"sc-note",children:"Nothing connected yet."})}import{useCallback as ne,useEffect as pe,useMemo as De,useRef as Be,useState as U}from"react";var ue=[{id:"claude",title:"The Claude plan you already pay for",cost:"Nothing beyond the plan",prerequisite:"Claude Code installed, and signed in",hint:"Install it from claude.ai/code, then run `claude` once and sign in.",expects:["claude-code"]},{id:"chatgpt",title:"The ChatGPT plan you already pay for",cost:"Nothing beyond the plan",prerequisite:"Codex installed, and signed in",hint:"Install Codex, then run `codex` once and sign in.",expects:["codex"]},{id:"local",title:"A model on your own machine",cost:"Free. You bought the hardware",prerequisite:"Ollama running, with a model pulled",hint:"Install Ollama, then `ollama pull` a model before pairing.",expects:["ollama","openai-api"]}];import{Fragment as ke,jsx as a,jsxs as h}from"react/jsx-runtime";var Ge=2e3,He=1e4;function de({client:e,initialCode:t,onConnected:n,showStatus:c=!0}){let[s,r]=U("loading"),[u,y]=U(null),[f,g]=U([]),[b,o]=U(null),[m,w]=U(t??""),[_,R]=U(null),[A,P]=U(null),[D,T]=U(!1),B=Be(null);pe(()=>{let l=!0;return Promise.all([e.context(),e.machines()]).then(([S,v])=>{l&&(y(S),g(v),B.current=new Set(v.map(I=>I.id)),t?r("code"):c&&v.length>0?r("manage"):r("choose"))}).catch(S=>{l&&(P(S.message),r("choose"))}),()=>{l=!1}},[e,t,c]),pe(()=>{if(s!=="manage")return;let l=!0,S=setInterval(async()=>{try{let v=await e.machines();l&&g(v)}catch{}},He);return()=>{l=!1,clearInterval(S)}},[s,e]),pe(()=>{if(s!=="waiting")return;let l=!0,S=setInterval(async()=>{try{let v=await e.machines();if(!l)return;g(v);let I=v.filter(O=>!B.current?.has(O.id));(I.find(O=>O.state!=="offline")??I[0])&&(r("connected"),n?.(v))}catch{}},Ge);return()=>{l=!1,clearInterval(S)}},[s,e,n]);let Z=ne(async()=>{P(null),T(!0);try{let l=await e.lookup(m);R(l),r("confirm")}catch(l){P(l.message)}finally{T(!1)}},[e,m]),G=ne(async()=>{P(null),T(!0);try{await e.approve(m),r("waiting")}catch(l){P(l.message)}finally{T(!1)}},[e,m]),H=ne(async()=>{T(!0);try{await e.deny(m),r("denied")}catch(l){P(l.message)}finally{T(!1)}},[e,m]),ee=De(()=>u?.connect_url??null,[u]),Y=ne(async(l,S)=>{try{await e.approveRuntime(l,S),g(await e.machines())}catch(v){P(v.message)}},[e]);return s==="loading"?a("div",{className:"soba-connect",children:a("div",{className:"sc-card",children:a("p",{className:"sc-note",children:"Loading\u2026"})})}):h("div",{className:"soba-connect",children:[s==="manage"&&h("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Your compute"}),h("p",{className:"sc-sub",children:[u?.app.name??"This app"," runs on these machines, while they are awake."]}),a(W,{machines:f,onApproveRuntime:Y}),A&&a("p",{className:"sc-error",children:A}),a("button",{type:"button",className:"sc-btn",style:{marginTop:16},onClick:()=>r("choose"),children:"Connect another machine"})]}),s==="choose"&&h("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Use the AI you already pay for"}),h("p",{className:"sc-sub",children:[u?.app.name??"This app"," can run on your machine instead of selling you credits. Pick what you already have."]}),a("div",{className:"sc-choices",children:ue.map(l=>h("button",{type:"button",className:"sc-choice","aria-pressed":b?.id===l.id,onClick:()=>o(l),children:[a("span",{className:"sc-choice-title",children:l.title}),a("br",{}),h("span",{className:"sc-choice-meta",children:[l.cost," \xB7 ",l.prerequisite]})]},l.id))}),b&&h("div",{className:"sc-stack",style:{marginTop:16},children:[a("p",{className:"sc-note",children:b.hint}),ee?h(ke,{children:[a("p",{className:"sc-label",children:"Install Soba Connect on the machine you want to use"}),a("a",{className:"sc-btn sc-btn-primary",href:"https://soba.so/soba-connect",target:"_blank",rel:"noreferrer noopener",children:"Get Soba Connect"}),a("p",{className:"sc-label",children:"Then paste this link into it"}),a("code",{className:"sc-code",children:ee}),a("p",{className:"sc-note",children:"It will show you a short code. Nothing is pasted back: the credential is written straight to that machine."}),a("button",{type:"button",className:"sc-btn",onClick:()=>r("code"),children:"I have a code"})]}):a("p",{className:"sc-error",children:"This app has no publishable key yet, so there is nothing to pair against."})]})]}),s==="code"&&h("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Enter the code from that machine"}),a("p",{className:"sc-sub",children:"Eight characters, shown by Soba Connect once you paste the link."}),h("form",{className:"sc-stack",onSubmit:l=>{l.preventDefault(),Z()},children:[a("input",{className:"sc-input",value:m,onChange:l=>w(l.target.value),placeholder:"ACDE-F234",autoComplete:"off",autoFocus:!0,"aria-label":"Pairing code"}),A&&a("p",{className:"sc-error",children:A}),a("button",{type:"submit",className:"sc-btn sc-btn-primary",disabled:D||m.length<8,children:D?"Checking\u2026":"Continue"})]})]}),s==="confirm"&&_&&h("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Attach this machine to your account?"}),h("p",{className:"sc-sub",children:["Once you approve, ",u?.app.name??"this app"," may send your runs to it. It can never see the account or the keys on it."]}),h("ul",{className:"sc-facts",children:[a(X,{k:"Code",v:_.user_code}),a(X,{k:"Machine",v:_.hostname??"not stated"}),a(X,{k:"System",v:[_.platform,_.arch].filter(Boolean).join(" / ")||"not stated"}),a(X,{k:"Asked by",v:_.client??"not stated"}),_.labels.length>0&&a(X,{k:"Labels",v:_.labels.join(", ")})]}),a("p",{className:"sc-note",style:{marginTop:12},children:"Every line above is what that machine said about itself. If none of it looks like a computer of yours, say no."}),A&&a("p",{className:"sc-error",children:A}),h("div",{className:"sc-row",style:{marginTop:16},children:[a("button",{type:"button",className:"sc-btn sc-btn-primary",onClick:()=>void G(),disabled:D,children:"Approve"}),a("button",{type:"button",className:"sc-btn",onClick:()=>void H(),disabled:D,children:"No, deny it"})]})]}),s==="waiting"&&h("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Approved. Waiting for it to connect\u2026"}),a("p",{className:"sc-sub",children:"The worker is starting on that machine. This page will change on its own the moment it arrives."}),a("p",{className:"sc-note",children:"If nothing happens, look at Soba Connect on that machine: it says what it is doing."})]}),s==="connected"&&h("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Connected"}),h("p",{className:"sc-sub",children:[u?.app.name??"This app"," will use this machine from now on, while it is awake."]}),c&&h(ke,{children:[a(W,{machines:f,onApproveRuntime:Y}),a("button",{type:"button",className:"sc-btn",style:{marginTop:16},onClick:()=>r("manage"),children:"Done"})]})]}),s==="denied"&&h("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Declined"}),a("p",{className:"sc-sub",children:"That machine was not attached to your account, and the terminal has been told so."})]})]})}function X({k:e,v:t}){return h("li",{className:"sc-fact",children:[a("span",{className:"sc-fact-key",children:e}),a("span",{children:t})]})}import{createContext as Ve,useContext as We}from"react";var me=Ve(null);function M(){let e=We(me);if(!e)throw new Error("useSoba() must be used inside a <SobaProvider>.");return e}import{jsx as J}from"react/jsx-runtime";function Je({className:e}){let{compute:t}=M(),n=e?`soba-connect ${e}`:"soba-connect";return t.loading&&!t.machines.length?J("div",{className:n,children:J("p",{className:"sc-note",children:"Loading\u2026"})}):t.error&&!t.machines.length?J("div",{className:n,children:J("p",{className:"sc-error",children:t.error.message})}):J("div",{className:n,children:J(W,{machines:t.machines})})}import{createContext as Ye,useContext as ze}from"react";var he=Ye(null);function _e(){return ze(he)}import{jsx as q}from"react/jsx-runtime";function Ke({initialCode:e,onConnected:t,className:n,showStatus:c}){let{error:s}=M(),r=_e();return s?q("div",{className:Re(n),children:q("div",{className:"sc-card",children:q("p",{className:"sc-error",children:s.message})})}):r?q("div",{className:n,children:q(de,{client:r,...e?{initialCode:e}:{},...t?{onConnected:t}:{},...c===void 0?{}:{showStatus:c}})}):q("div",{className:Re(n),children:q("div",{className:"sc-card",children:q("p",{className:"sc-note",children:"Loading\u2026"})})})}function Re(e){return e?`soba-connect ${e}`:"soba-connect"}var Qe=new Set(["delta","thinking","status","done","error"]);function se(e){let t;try{t=JSON.parse(e)}catch{return null}if(!t||typeof t!="object")return null;let n=t,c=n.type==="event"?n.event:n;if(!c||typeof c!="object")return null;let s=c;if(typeof s.type!="string"||!Qe.has(s.type))return null;let r={type:s.type};return typeof s.text=="string"&&(r.text=s.text),typeof s.message=="string"&&(r.message=s.message),typeof s.tool=="string"&&(r.tool=s.tool),typeof s.tier=="string"&&(r.tier=s.tier),s.usage&&typeof s.usage=="object"&&(r.usage=s.usage),r}async function*fe(e){let t=e.body;if(!t)throw new Error("That run response had no body to stream.");let n=(e.headers.get("content-type")??"").includes("ndjson"),c=t.getReader(),s=new TextDecoder,r="",u=[];try{for(;;){let f=await c.read();if(f.done)break;for(r+=s.decode(f.value,{stream:!0});;){let g=r.indexOf(`
+`);if(g===-1)break;let b=Me(r.slice(0,g));if(r=r.slice(g+1),n){let o=b.trim()?se(b):null;o&&(yield o);continue}if(b===""){let o=u.join(`
+`);if(u=[],o==="[DONE]")return;let m=o?se(o):null;m&&(yield m);continue}Te(b,u)}}!n&&r&&Te(Me(r),u);let y=n?r.trim():u.join(`
+`);if(y&&y!=="[DONE]"){let f=se(y);f&&(yield f)}}finally{c.cancel().catch(()=>{})}}function Te(e,t){if(!e||e.startsWith(":"))return;let n=e.indexOf(":");if(n===-1||e.slice(0,n)!=="data")return;let c=e.slice(n+1);t.push(c.startsWith(" ")?c.slice(1):c)}function Me(e){return e.endsWith("\r")?e.slice(0,-1):e}async function Xe(e){let t="";for await(let n of e)if(n.type==="delta"&&n.text&&(t+=n.text),n.type==="error")throw new Error(n.message??"The run ended with an error.");return t}import{useState as Ae}from"react";import{jsx as Ie,jsxs as et}from"react/jsx-runtime";function Ze({plan:e,successUrl:t,cancelUrl:n,label:c,className:s}){let{plan:r}=M(),[u,y]=Ae(!1),[f,g]=Ae(null);async function b(){y(!0),g(null);try{let o=await r.checkout(e.id,{...t?{successUrl:t}:{},...n?{cancelUrl:n}:{}});window.location.assign(o)}catch(o){g(o.message),y(!1)}}return et("div",{className:s?`soba-connect ${s}`:"soba-connect",children:[Ie("button",{type:"button",className:"sc-btn sc-btn-primary",disabled:u,onClick:()=>void b(),children:u?"Opening\u2026":c??`Subscribe \u2014 $${e.price.toLocaleString()}/${e.interval}`}),f&&Ie("p",{className:"sc-error",children:f})]})}import{useState as Oe}from"react";import{Fragment as rt,jsx as d,jsxs as N}from"react/jsx-runtime";var tt={"user-hardware":"your own machine","user-subscription":"your own AI subscription","open-weights":"open models we host",frontier:"frontier models"},nt=new Set(["user-hardware","user-subscription"]);function re(e){return e?`soba-connect ${e}`:"soba-connect"}function st({onSelect:e,successUrl:t,cancelUrl:n,showCompute:c=!0,className:s}){let{plan:r}=M(),[u,y]=Oe(null),[f,g]=Oe(null);if(r.error)return d("div",{className:re(s),children:d("div",{className:"sc-card",children:d("p",{className:"sc-error",children:r.error.message})})});if(r.loading)return d("div",{className:re(s),children:d("div",{className:"sc-card",children:d("p",{className:"sc-note",children:"Loading plans\u2026"})})});if(r.plans.length===0)return d("div",{className:re(s),children:d("div",{className:"sc-card",children:d("p",{className:"sc-note",children:"This app has no plans yet."})})});async function b(o){y(o.id),g(null);try{if(o.selectable)await r.select(o.id);else if(e)e(o);else{let m=await r.checkout(o.id,{...t?{successUrl:t}:{},...n?{cancelUrl:n}:{}});window.location.assign(m);return}}catch(m){g(m.message)}finally{y(null)}}return N("div",{className:re(s),children:[d("div",{className:"sc-plans",children:r.plans.map(o=>{let m=r.current?.plan_id===o.id;return N("div",{className:m?"sc-plan sc-plan-current":"sc-plan",children:[N("div",{className:"sc-row-between",children:[d("span",{className:"sc-title",children:o.name}),m&&d("span",{className:"sc-plan-badge",children:"Current"})]}),o.description&&d("p",{className:"sc-sub",children:o.description}),d("p",{className:"sc-plan-price",children:o.price===0?d("span",{className:"sc-plan-amount",children:"Free"}):N(rt,{children:[N("span",{className:"sc-plan-amount",children:["$",o.price.toLocaleString()]}),N("span",{className:"sc-plan-interval",children:["/",o.interval]})]})}),N("div",{className:"sc-facts",children:[N("div",{className:"sc-fact",children:[d("span",{className:"sc-fact-key",children:"Included"}),d("span",{children:o.included_units===null?"Unlimited":`${o.included_units.toLocaleString()} ${o.unit}${o.included_units===1?"":"s"}`})]}),o.overage_per_unit>0&&N("div",{className:"sc-fact",children:[d("span",{className:"sc-fact-key",children:"Then"}),N("span",{children:["$",o.overage_per_unit," / ",o.unit]})]}),o.trial_days>0&&N("div",{className:"sc-fact",children:[d("span",{className:"sc-fact-key",children:"Trial"}),N("span",{children:[o.trial_days," days"]})]}),c&&N("div",{className:"sc-plan-compute",children:[d("span",{className:"sc-fact-key",children:"Runs on"}),o.route_allow===null||o.route_allow.length===0?d("span",{children:o.route_allow===null?"any compute":"no compute"}):d("ul",{className:"sc-compute",children:o.route_allow.map(w=>d("li",{className:nt.has(w)?"sc-compute-own":void 0,children:tt[w]??w},w))})]})]}),d("button",{type:"button",className:m?"sc-btn":"sc-btn sc-btn-primary",disabled:m||u!==null,onClick:()=>void b(o),children:m?"Your plan":u===o.id?o.selectable?"Switching\u2026":"Opening\u2026":o.selectable?"Choose":`Subscribe \u2014 $${o.price.toLocaleString()}/${o.interval}`})]},o.id)})}),f&&d("p",{className:"sc-error",children:f})]})}import{useCallback as F,useEffect as j,useMemo as ye,useRef as at,useState as k}from"react";var oe=class{#t;#s=null;#n=null;#e;#r=new Set;constructor(t){this.#e=t,this.#t=t.token??null}get token(){return this.#t}get expiresAt(){return this.#s}get canRefresh(){return!!this.#e.endpoint}get refreshAt(){return!this.canRefresh||this.#s===null?null:Math.max(Date.now()+1e4,this.#s-6e4)}subscribe(t){return this.#r.add(t),()=>this.#r.delete(t)}async ensure(){return this.#t?this.#t:this.refresh()}async refresh(){if(this.#n)return this.#n;let t=this.#e.endpoint;if(!t)throw new Error("This Soba session cannot be refreshed. Pass `sessionEndpoint` so the provider can mint a new one.");let n=this.#e.fetchImpl??fetch.bind(globalThis);this.#n=(async()=>{let c=await n(t,{method:"POST",headers:{"content-type":"application/json"},credentials:"same-origin",body:JSON.stringify(this.#e.user?{user:this.#e.user}:{})});if(!c.ok)throw new Error(`Could not start a Soba session (${c.status} from ${t}).`);let s=await c.json(),r=s.session??s.token;if(!r)throw new Error(`${t} answered without a \`session\`. See @soba-so/react's README.`);let u=s.expires_in??s.expiresIn;this.#t=r,this.#s=typeof u=="number"?Date.now()+u*1e3:null;for(let y of this.#r)y();return r})();try{return await this.#n}finally{this.#n=null}}};function Le(e,t=fetch.bind(globalThis)){return async(n,c)=>{let s=await t(n,c);if(s.status!==401||!e.canRefresh)return s;let r;try{r=await e.refresh()}catch{return s}return t(n,ot(c,r))}}function ot(e,t){let n=new Headers(e?.headers);return n.set("authorization",`Bearer ${t}`),{...e,headers:n}}var $e="data-soba-react",Ue=!1;function ge(){if(Ue||typeof document>"u"||(Ue=!0,document.querySelector(`style[${$e}]`)))return;let e=document.createElement("style");e.setAttribute($e,""),e.textContent=`.soba-connect {
   --sc-ground: #ffffff;
   --sc-sheet: #ffffff;
   --sc-raised: #f6f6f7;
@@ -20,7 +20,7 @@ var ee=class extends Error{status;constructor(t,n){super(t),this.name="ConnectEr
   box-sizing: border-box;
   max-width: 560px;
   margin: 0 auto;
-  color: var(--sc-text);
+  color: var(--sc-text, #1a1a1c);
   font-family: "Inter", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
   font-size: 15px;
   line-height: 1.5;
@@ -33,9 +33,9 @@ var ee=class extends Error{status;constructor(t,n){super(t),this.name="ConnectEr
 }
 
 .sc-card {
-  background: var(--sc-sheet);
-  border: 1px solid var(--sc-line);
-  border-radius: var(--sc-r);
+  background: var(--sc-sheet, #ffffff);
+  border: 1px solid var(--sc-line, #e9e9eb);
+  border-radius: var(--sc-r, 10px);
   padding: 20px;
 }
 .sc-card + .sc-card {
@@ -49,12 +49,12 @@ var ee=class extends Error{status;constructor(t,n){super(t),this.name="ConnectEr
   margin: 0 0 4px;
 }
 .sc-sub {
-  color: var(--sc-muted);
+  color: var(--sc-muted, #6b6b73);
   margin: 0 0 16px;
 }
 .sc-label {
   font-size: 13px;
-  color: var(--sc-muted);
+  color: var(--sc-muted, #6b6b73);
   margin: 0 0 6px;
   letter-spacing: -0.005em;
 }
@@ -67,33 +67,33 @@ var ee=class extends Error{status;constructor(t,n){super(t),this.name="ConnectEr
   display: block;
   width: 100%;
   text-align: left;
-  background: var(--sc-sheet);
-  border: 1px solid var(--sc-line-2);
-  border-radius: var(--sc-r);
+  background: var(--sc-sheet, #ffffff);
+  border: 1px solid var(--sc-line-2, #dcdce0);
+  border-radius: var(--sc-r, 10px);
   padding: 12px 14px;
   cursor: pointer;
   font: inherit;
   color: inherit;
 }
 .sc-choice:hover {
-  background: var(--sc-raised);
+  background: var(--sc-raised, #f6f6f7);
 }
 .sc-choice[aria-pressed="true"] {
-  border-color: var(--sc-accent);
-  box-shadow: inset 0 0 0 1px var(--sc-accent);
+  border-color: var(--sc-accent, #18181b);
+  box-shadow: inset 0 0 0 1px var(--sc-accent, #18181b);
 }
 .sc-choice-title {
   font-weight: 550;
 }
 .sc-choice-meta {
-  color: var(--sc-muted);
+  color: var(--sc-muted, #6b6b73);
   font-size: 13px;
 }
 
 .sc-code {
   display: block;
-  background: var(--sc-raised);
-  border: 1px solid var(--sc-line);
+  background: var(--sc-raised, #f6f6f7);
+  border: 1px solid var(--sc-line, #e9e9eb);
   border-radius: 8px;
   padding: 12px 14px;
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
@@ -123,13 +123,13 @@ var ee=class extends Error{status;constructor(t,n){super(t),this.name="ConnectEr
   font-weight: 550;
   border-radius: 8px;
   padding: 9px 14px;
-  border: 1px solid var(--sc-line-2);
-  background: var(--sc-sheet);
-  color: var(--sc-text);
+  border: 1px solid var(--sc-line-2, #dcdce0);
+  background: var(--sc-sheet, #ffffff);
+  color: var(--sc-text, #1a1a1c);
   cursor: pointer;
 }
 .sc-btn:hover {
-  background: var(--sc-raised);
+  background: var(--sc-raised, #f6f6f7);
 }
 
 a.sc-btn {
@@ -138,13 +138,13 @@ a.sc-btn {
   text-decoration: none;
 }
 .sc-btn-primary {
-  background: var(--sc-accent);
-  color: var(--sc-accent-fg);
-  border-color: var(--sc-accent);
+  background: var(--sc-accent, #18181b);
+  color: var(--sc-accent-fg, #ffffff);
+  border-color: var(--sc-accent, #18181b);
 }
 .sc-btn-primary:hover {
   opacity: 0.9;
-  background: var(--sc-accent);
+  background: var(--sc-accent, #18181b);
 }
 .sc-btn:disabled {
   opacity: 0.5;
@@ -157,9 +157,9 @@ a.sc-btn {
   letter-spacing: 0.08em;
   text-transform: uppercase;
   padding: 10px 12px;
-  border: 1px solid var(--sc-line-2);
+  border: 1px solid var(--sc-line-2, #dcdce0);
   border-radius: 8px;
-  background: var(--sc-sheet);
+  background: var(--sc-sheet, #ffffff);
   color: inherit;
   width: 100%;
 }
@@ -169,34 +169,34 @@ a.sc-btn {
   height: 8px;
   border-radius: 50%;
   flex: none;
-  background: var(--sc-muted);
+  background: var(--sc-muted, #6b6b73);
 }
 .sc-dot-ok {
-  background: var(--sc-ok);
+  background: var(--sc-ok, #22a06b);
 }
 .sc-dot-busy {
-  background: var(--sc-warn);
+  background: var(--sc-warn, #b06f14);
 }
 .sc-dot-off {
-  background: var(--sc-line-2);
+  background: var(--sc-line-2, #dcdce0);
 }
 
 .sc-tone-ok {
-  color: var(--sc-ok);
+  color: var(--sc-ok, #22a06b);
 }
 .sc-tone-warn {
-  color: var(--sc-warn);
+  color: var(--sc-warn, #b06f14);
 }
 .sc-tone-unknown {
-  color: var(--sc-muted);
+  color: var(--sc-muted, #6b6b73);
 }
 
 .sc-error {
-  color: var(--sc-warn);
+  color: var(--sc-warn, #b06f14);
   font-size: 14px;
 }
 .sc-note {
-  color: var(--sc-muted);
+  color: var(--sc-muted, #6b6b73);
   font-size: 13px;
 }
 
@@ -213,12 +213,12 @@ a.sc-btn {
   font-size: 14px;
 }
 .sc-fact-key {
-  color: var(--sc-muted);
+  color: var(--sc-muted, #6b6b73);
   min-width: 92px;
 }
 
 .sc-machine {
-  border-top: 1px solid var(--sc-line);
+  border-top: 1px solid var(--sc-line, #e9e9eb);
   padding-top: 12px;
   margin-top: 12px;
 }
@@ -254,8 +254,9 @@ a.sc-btn {
 .sc-plans {
   display: grid;
   gap: 12px;
+  align-items: stretch;
   
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 
 .sc-plan {
@@ -264,8 +265,8 @@ a.sc-btn {
   gap: 10px;
   padding: 16px;
   border: 1px solid var(--sc-line, #e5e5e7);
-  border-radius: var(--sc-radius, 10px);
-  background: var(--sc-card, #fff);
+  border-radius: var(--sc-r, 10px);
+  background: var(--sc-sheet, #fff);
 }
 
 .sc-plan-current {
@@ -277,7 +278,7 @@ a.sc-btn {
   padding: 2px 6px;
   border-radius: 999px;
   background: var(--sc-text, #18181b);
-  color: var(--sc-card, #fff);
+  color: var(--sc-sheet, #fff);
 }
 
 .sc-plan-price {
@@ -302,5 +303,75 @@ a.sc-btn {
 
 .sc-plan .sc-btn {
   margin-top: auto;
+  width: 100%;
+}
+
+.sc-plan .sc-facts {
+  gap: 6px;
+  padding-bottom: 4px;
+}
+
+.sc-plan .sc-fact {
+  gap: 8px;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.sc-plan .sc-fact-key {
+  min-width: 0;
+  flex: none;
+}
+
+.sc-plan .sc-fact > :last-child {
+  text-align: right;
+}
+
+.sc-plan-compute {
+  display: grid;
+  gap: 4px;
+  font-size: 14px;
+}
+
+.sc-compute {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 3px;
+}
+
+.sc-compute li {
+  position: relative;
+  padding-left: 16px;
+  color: var(--sc-muted, #6b6b73);
+  line-height: 1.4;
+}
+
+.sc-compute li::before {
+  content: "\u2013";
+  position: absolute;
+  left: 2px;
+}
+
+.sc-compute li.sc-compute-own {
+  color: var(--sc-text-2, #3f3f46);
+}
+
+.sc-compute li.sc-compute-own::before {
+  content: "\u2713";
+  color: var(--sc-ok, #22a06b);
+  font-size: 11px;
+  top: 1px;
+}
+
+.sc-plan .sc-sub {
+  min-height: 2.8em;
+  margin: 0;
+}
+
+.sc-plan .sc-plan-price {
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--sc-line, #e9e9eb);
+  margin-bottom: 2px;
 }
-`,document.head.appendChild(e)}import{jsx as Le}from"react/jsx-runtime";var st="https://www.soba.so",rt=15e3;function ot(e){let{children:t,session:n,sessionEndpoint:i,user:s,runEndpoint:r,baseUrl:u=st,pollMs:y=rt,injectStyles:g=!0,fetchImpl:h,onError:b}=e,[o,d]=x(n??null),[$,E]=x(null),[j,M]=x(null),[k,U]=x(null),[_,F]=x(!0),[D,re]=x([]),[Z,W]=x(null),[Y,l]=x(!0),[C,w]=x([]),[R,ge]=x(null),[B,ye]=x(null),[be,$e]=x(!0),ve=nt(b);ve.current=b;let z=q(c=>{E(c),ve.current?.(c)},[]);J(()=>{g&&he()},[g]);let S=fe(()=>new se({...n?{token:n}:{},...i?{endpoint:i}:{},...s?{user:s}:{},...h?{fetchImpl:h}:{}}),[n,i,s,h]);J(()=>{let c=!0,v=S.subscribe(()=>{c&&d(S.token)});return!S.token&&!S.canRefresh?z(new Error("<SobaProvider> needs a `session` or a `sessionEndpoint`. A browser cannot mint one: that takes your secret key.")):S.ensure().then(()=>c&&d(S.token),I=>c&&z(I)),()=>{c=!1,v()}},[S,z]),J(()=>{let c=S.refreshAt;if(c===null)return;let v=setTimeout(()=>{S.refresh().catch(I=>z(I))},Math.max(0,c-Date.now()));return()=>clearTimeout(v)},[S,z,o]);let p=fe(()=>o?new Q({session:o,baseUrl:u,fetchImpl:Ae(S,h??fetch.bind(globalThis))}):null,[o,u,S,h]);J(()=>{if(!p)return;let c=!0;return F(!0),p.context().then(v=>{c&&(M(v),U(null),F(!1))},v=>{c&&(U(v),F(!1))}),()=>{c=!1}},[p]);let K=q(async()=>{if(p)try{let c=await p.machines();re(c),W(null)}catch(c){W(c)}finally{l(!1)}},[p]),A=q(async()=>{if(p)try{let c=await p.plans();w(c.plans),ge(c.current),ye(null)}catch(c){ye(c)}finally{$e(!1)}},[p]);J(()=>{p&&A()},[p,A]);let Ce=q(async c=>{if(!p)throw new Error("No session yet.");await p.selectPlan(c),await A()},[p,A]),we=q(async(c,v)=>{if(!p)throw new Error("No session yet.");let I=await p.checkoutPlan(c,v);if(!I.url)throw new Error("Checkout could not be started.");return I.url},[p]),Ne=q(async()=>{if(!p)throw new Error("No session yet.");await p.leavePlan(),await A()},[p,A]);J(()=>{if(!p)return;let c=!0;K();let v=setInterval(()=>{typeof document<"u"&&document.hidden||c&&K()},y);return()=>{c=!1,clearInterval(v)}},[p,K,y]);let Se=q(async c=>{if(!r)throw new Error("Pass `runEndpoint` to <SobaProvider> to start runs from the browser. It is your own route: it holds your secret key, calls soba.run(), and forwards the stream.");let{signal:v,...I}=c,oe=await(h??fetch.bind(globalThis))(r,{method:"POST",headers:{"content-type":"application/json",accept:"text/event-stream"},credentials:"same-origin",body:JSON.stringify(I),...v?{signal:v}:{}});if(!oe.ok)throw new Error(`${r} answered ${oe.status}.`);return me(oe)},[r,h]),Ue=fe(()=>({session:o,client:p,error:$,plan:{plans:C,current:R,plan:R?C.find(c=>c.id===R.plan_id)??null:null,loading:be,error:B,select:Ce,checkout:we,leave:Ne,refresh:A},compute:{machines:D,connected:D.length>0,online:D.some(c=>c.state!=="offline"),loading:Y,error:Z,refresh:K},connect:{app:j?.app??null,command:j?.command??null,publishableKey:j?.publishable_key??null,loading:_,error:k},run:Se}),[o,p,$,D,Y,Z,K,C,R,be,B,Ce,we,Ne,A,j,_,k,Se]);return Le(de.Provider,{value:p,children:Le(pe.Provider,{value:Ue,children:t})})}export{He as ComputeStatus,We as ConnectCompute,Ke as SobaCheckout,Ze as SobaPlans,ot as SobaProvider,ze as collectText,he as injectStyles,ne as parseEvent,me as readEvents,T as useSoba};
+`,document.head.appendChild(e)}import{jsx as qe}from"react/jsx-runtime";var it="https://www.soba.so",ct=15e3;function lt(e){let{children:t,session:n,sessionEndpoint:c,user:s,runEndpoint:r,initialPlans:u,initialCurrentPlan:y=null,baseUrl:f=it,pollMs:g=ct,injectStyles:b=!0,fetchImpl:o,onError:m}=e,[w,_]=k(n??null),[R,A]=k(null),[P,D]=k(null),[T,B]=k(null),[Z,G]=k(!0),[H,ee]=k([]),[Y,l]=k(null),[S,v]=k(!0),[I,be]=k(u??[]),[O,Fe]=k(y),[ve,ae]=k(null),[Ce,we]=k(u===void 0),Ne=at(m);Ne.current=m;let z=F(i=>{A(i),Ne.current?.(i)},[]);j(()=>{b&&ge()},[b]);let x=ye(()=>new oe({...n?{token:n}:{},...c?{endpoint:c}:{},...s?{user:s}:{},...o?{fetchImpl:o}:{}}),[n,c,s,o]);j(()=>{let i=!0,C=x.subscribe(()=>{i&&_(x.token)});return!x.token&&!x.canRefresh?z(new Error("<SobaProvider> needs a `session` or a `sessionEndpoint`. A browser cannot mint one: that takes your secret key.")):x.ensure().then(()=>i&&_(x.token),$=>i&&z($)),()=>{i=!1,C()}},[x,z]),j(()=>{R&&(G(!1),v(!1),we(!1),B(i=>i??R),l(i=>i??R),ae(i=>i??R))},[R]),j(()=>{let i=x.refreshAt;if(i===null)return;let C=setTimeout(()=>{x.refresh().catch($=>z($))},Math.max(0,i-Date.now()));return()=>clearTimeout(C)},[x,z,w]);let p=ye(()=>w?new Q({session:w,baseUrl:f,fetchImpl:Le(x,o??fetch.bind(globalThis))}):null,[w,f,x,o]);j(()=>{if(!p)return;let i=!0;return G(!0),p.context().then(C=>{i&&(D(C),B(null),G(!1))},C=>{i&&(B(C),G(!1))}),()=>{i=!1}},[p]);let K=F(async()=>{if(p)try{let i=await p.machines();ee(i),l(null)}catch(i){l(i)}finally{v(!1)}},[p]),L=F(async()=>{if(p)try{let i=await p.plans();be(i.plans),Fe(i.current),ae(null)}catch(i){ae(i)}finally{we(!1)}},[p]);j(()=>{p&&L()},[p,L]);let Pe=F(async i=>{if(!p)throw new Error("No session yet.");await p.selectPlan(i),await L()},[p,L]),Se=F(async(i,C)=>{if(!p)throw new Error("No session yet.");let $=await p.checkoutPlan(i,C);if(!$.url)throw new Error("Checkout could not be started.");return $.url},[p]),xe=F(async()=>{if(!p)throw new Error("No session yet.");await p.leavePlan(),await L()},[p,L]);j(()=>{if(!p)return;let i=!0;K();let C=setInterval(()=>{typeof document<"u"&&document.hidden||i&&K()},g);return()=>{i=!1,clearInterval(C)}},[p,K,g]);let Ee=F(async i=>{if(!r)throw new Error("Pass `runEndpoint` to <SobaProvider> to start runs from the browser. It is your own route: it holds your secret key, calls soba.run(), and forwards the stream.");let{signal:C,...$}=i,ie=await(o??fetch.bind(globalThis))(r,{method:"POST",headers:{"content-type":"application/json",accept:"text/event-stream"},credentials:"same-origin",body:JSON.stringify($),...C?{signal:C}:{}});if(!ie.ok)throw new Error(`${r} answered ${ie.status}.`);return fe(ie)},[r,o]),je=ye(()=>({session:w,client:p,error:R,plan:{plans:I,current:O,plan:O?I.find(i=>i.id===O.plan_id)??null:null,loading:Ce,error:ve,select:Pe,checkout:Se,leave:xe,refresh:L},compute:{machines:H,connected:H.length>0,online:H.some(i=>i.state!=="offline"),loading:S,error:Y,refresh:K},connect:{app:P?.app??null,command:P?.command??null,publishableKey:P?.publishable_key??null,loading:Z,error:T},run:Ee}),[w,p,R,H,S,Y,K,I,O,Ce,ve,Pe,Se,xe,L,P,Z,T,Ee]);return qe(he.Provider,{value:p,children:qe(me.Provider,{value:je,children:t})})}export{Je as ComputeStatus,Ke as ConnectCompute,Ze as SobaCheckout,st as SobaPlans,lt as SobaProvider,Xe as collectText,ge as injectStyles,se as parseEvent,fe as readEvents,M as useSoba};

package/dist/styles.css

@@ -16,7 +16,7 @@
   box-sizing: border-box;
   max-width: 560px;
   margin: 0 auto;
-  color: var(--sc-text);
+  color: var(--sc-text, #1a1a1c);
   font-family: "Inter", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
   font-size: 15px;
   line-height: 1.5;
@@ -29,9 +29,9 @@
 }
 
 .sc-card {
-  background: var(--sc-sheet);
-  border: 1px solid var(--sc-line);
-  border-radius: var(--sc-r);
+  background: var(--sc-sheet, #ffffff);
+  border: 1px solid var(--sc-line, #e9e9eb);
+  border-radius: var(--sc-r, 10px);
   padding: 20px;
 }
 .sc-card + .sc-card {
@@ -45,12 +45,12 @@
   margin: 0 0 4px;
 }
 .sc-sub {
-  color: var(--sc-muted);
+  color: var(--sc-muted, #6b6b73);
   margin: 0 0 16px;
 }
 .sc-label {
   font-size: 13px;
-  color: var(--sc-muted);
+  color: var(--sc-muted, #6b6b73);
   margin: 0 0 6px;
   letter-spacing: -0.005em;
 }
@@ -63,33 +63,33 @@
   display: block;
   width: 100%;
   text-align: left;
-  background: var(--sc-sheet);
-  border: 1px solid var(--sc-line-2);
-  border-radius: var(--sc-r);
+  background: var(--sc-sheet, #ffffff);
+  border: 1px solid var(--sc-line-2, #dcdce0);
+  border-radius: var(--sc-r, 10px);
   padding: 12px 14px;
   cursor: pointer;
   font: inherit;
   color: inherit;
 }
 .sc-choice:hover {
-  background: var(--sc-raised);
+  background: var(--sc-raised, #f6f6f7);
 }
 .sc-choice[aria-pressed="true"] {
-  border-color: var(--sc-accent);
-  box-shadow: inset 0 0 0 1px var(--sc-accent);
+  border-color: var(--sc-accent, #18181b);
+  box-shadow: inset 0 0 0 1px var(--sc-accent, #18181b);
 }
 .sc-choice-title {
   font-weight: 550;
 }
 .sc-choice-meta {
-  color: var(--sc-muted);
+  color: var(--sc-muted, #6b6b73);
   font-size: 13px;
 }
 
 .sc-code {
   display: block;
-  background: var(--sc-raised);
-  border: 1px solid var(--sc-line);
+  background: var(--sc-raised, #f6f6f7);
+  border: 1px solid var(--sc-line, #e9e9eb);
   border-radius: 8px;
   padding: 12px 14px;
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
@@ -119,13 +119,13 @@
   font-weight: 550;
   border-radius: 8px;
   padding: 9px 14px;
-  border: 1px solid var(--sc-line-2);
-  background: var(--sc-sheet);
-  color: var(--sc-text);
+  border: 1px solid var(--sc-line-2, #dcdce0);
+  background: var(--sc-sheet, #ffffff);
+  color: var(--sc-text, #1a1a1c);
   cursor: pointer;
 }
 .sc-btn:hover {
-  background: var(--sc-raised);
+  background: var(--sc-raised, #f6f6f7);
 }
 
 a.sc-btn {
@@ -134,13 +134,13 @@ a.sc-btn {
   text-decoration: none;
 }
 .sc-btn-primary {
-  background: var(--sc-accent);
-  color: var(--sc-accent-fg);
-  border-color: var(--sc-accent);
+  background: var(--sc-accent, #18181b);
+  color: var(--sc-accent-fg, #ffffff);
+  border-color: var(--sc-accent, #18181b);
 }
 .sc-btn-primary:hover {
   opacity: 0.9;
-  background: var(--sc-accent);
+  background: var(--sc-accent, #18181b);
 }
 .sc-btn:disabled {
   opacity: 0.5;
@@ -153,9 +153,9 @@ a.sc-btn {
   letter-spacing: 0.08em;
   text-transform: uppercase;
   padding: 10px 12px;
-  border: 1px solid var(--sc-line-2);
+  border: 1px solid var(--sc-line-2, #dcdce0);
   border-radius: 8px;
-  background: var(--sc-sheet);
+  background: var(--sc-sheet, #ffffff);
   color: inherit;
   width: 100%;
 }
@@ -165,34 +165,34 @@ a.sc-btn {
   height: 8px;
   border-radius: 50%;
   flex: none;
-  background: var(--sc-muted);
+  background: var(--sc-muted, #6b6b73);
 }
 .sc-dot-ok {
-  background: var(--sc-ok);
+  background: var(--sc-ok, #22a06b);
 }
 .sc-dot-busy {
-  background: var(--sc-warn);
+  background: var(--sc-warn, #b06f14);
 }
 .sc-dot-off {
-  background: var(--sc-line-2);
+  background: var(--sc-line-2, #dcdce0);
 }
 
 .sc-tone-ok {
-  color: var(--sc-ok);
+  color: var(--sc-ok, #22a06b);
 }
 .sc-tone-warn {
-  color: var(--sc-warn);
+  color: var(--sc-warn, #b06f14);
 }
 .sc-tone-unknown {
-  color: var(--sc-muted);
+  color: var(--sc-muted, #6b6b73);
 }
 
 .sc-error {
-  color: var(--sc-warn);
+  color: var(--sc-warn, #b06f14);
   font-size: 14px;
 }
 .sc-note {
-  color: var(--sc-muted);
+  color: var(--sc-muted, #6b6b73);
   font-size: 13px;
 }
 
@@ -209,12 +209,12 @@ a.sc-btn {
   font-size: 14px;
 }
 .sc-fact-key {
-  color: var(--sc-muted);
+  color: var(--sc-muted, #6b6b73);
   min-width: 92px;
 }
 
 .sc-machine {
-  border-top: 1px solid var(--sc-line);
+  border-top: 1px solid var(--sc-line, #e9e9eb);
   padding-top: 12px;
   margin-top: 12px;
 }
@@ -250,8 +250,9 @@ a.sc-btn {
 .sc-plans {
   display: grid;
   gap: 12px;
+  align-items: stretch;
   
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 
 .sc-plan {
@@ -260,8 +261,8 @@ a.sc-btn {
   gap: 10px;
   padding: 16px;
   border: 1px solid var(--sc-line, #e5e5e7);
-  border-radius: var(--sc-radius, 10px);
-  background: var(--sc-card, #fff);
+  border-radius: var(--sc-r, 10px);
+  background: var(--sc-sheet, #fff);
 }
 
 .sc-plan-current {
@@ -273,7 +274,7 @@ a.sc-btn {
   padding: 2px 6px;
   border-radius: 999px;
   background: var(--sc-text, #18181b);
-  color: var(--sc-card, #fff);
+  color: var(--sc-sheet, #fff);
 }
 
 .sc-plan-price {
@@ -298,4 +299,74 @@ a.sc-btn {
 
 .sc-plan .sc-btn {
   margin-top: auto;
+  width: 100%;
+}
+
+.sc-plan .sc-facts {
+  gap: 6px;
+  padding-bottom: 4px;
+}
+
+.sc-plan .sc-fact {
+  gap: 8px;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.sc-plan .sc-fact-key {
+  min-width: 0;
+  flex: none;
+}
+
+.sc-plan .sc-fact > :last-child {
+  text-align: right;
+}
+
+.sc-plan-compute {
+  display: grid;
+  gap: 4px;
+  font-size: 14px;
+}
+
+.sc-compute {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 3px;
+}
+
+.sc-compute li {
+  position: relative;
+  padding-left: 16px;
+  color: var(--sc-muted, #6b6b73);
+  line-height: 1.4;
+}
+
+.sc-compute li::before {
+  content: "–";
+  position: absolute;
+  left: 2px;
+}
+
+.sc-compute li.sc-compute-own {
+  color: var(--sc-text-2, #3f3f46);
+}
+
+.sc-compute li.sc-compute-own::before {
+  content: "✓";
+  color: var(--sc-ok, #22a06b);
+  font-size: 11px;
+  top: 1px;
+}
+
+.sc-plan .sc-sub {
+  min-height: 2.8em;
+  margin: 0;
+}
+
+.sc-plan .sc-plan-price {
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--sc-line, #e9e9eb);
+  margin-bottom: 2px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soba-so/react",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Connect the AI your users already pay for, from your own React app.",
   "license": "UNLICENSED",
   "homepage": "https://soba.so/docs/components",