@soba-so/react 0.0.8 → 0.0.9

package/dist/ConnectButton.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from "react";
+import type { Machine } from "./types.js";
+export interface ConnectButtonProps {
+    /** Override the label. Defaults to "Connect compute", or to what they have. */
+    children?: ReactNode;
+    /**
+     * `outline` is the same control at lower volume, for a settings row that
+     * already has a primary action on it. The design shows both.
+     */
+    variant?: "primary" | "outline";
+    className?: string;
+    /** From `?code=` on a `verification_uri_complete`. Implies `defaultOpen`. */
+    initialCode?: string;
+    onConnected?: (machines: Machine[]) => void;
+    /** Open on mount. */
+    defaultOpen?: boolean;
+    /** Controlled. Pass both or neither. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the button reports what is connected instead of saying "Connect
+     * compute". Left true: a button that still asks after they have connected is
+     * the screen telling them it did not work.
+     */
+    showConnected?: boolean;
+}
+/**
+ * ONE CONTROL: IT OPENS THE MODAL, THEN REPORTS WHAT IT OPENED.
+ *
+ * The whole connect flow behind a single button a host can place and style,
+ * which is the shape every payment and auth product converged on — and the
+ * reason is not fashion. The flow has seven steps and needs the screen; the
+ * settings page that hosts it has one line to spare.
+ *
+ * Nothing here fetches. The connected label is read from the machines the
+ * provider is already polling.
+ */
+export declare function ConnectButton({ children, variant, className, initialCode, onConnected, defaultOpen, open: controlledOpen, onOpenChange, showConnected, }: ConnectButtonProps): import("react").JSX.Element;

package/dist/ConnectCompute.d.ts

@@ -5,17 +5,23 @@ export interface ConnectComputeProps {
     onConnected?: (machines: Machine[]) => void;
     className?: string;
     /** False when you place `<ComputeStatus />` yourself, so the machines are not
-     *  told twice. Left true the panel opens on what this person already has. */
+     *  told twice. Left true this draws them above the button. */
     showStatus?: boolean;
 }
 /**
- * The connect step, and the component that carries the real friction.
+ * THE COMPUTE SECTION: what this person has, and the way to add one.
  *
- * It does not stop at "approved": a pairing that never dials the gateway looks
- * exactly like a successful one right up until the first run fails, so it waits
- * for the machine to actually appear. Detected, not asserted.
+ * The flow itself moved into a modal, which is the change. It used to unfold in
+ * place — seven steps, a code to read, a machine to wait for — inside whatever
+ * page a customer had put it on. That made the page's height a function of how
+ * far through pairing somebody was, and it put the most demanding moment in the
+ * product in a column it had to share with everything else on a settings screen.
  *
- * This is the same panel the hosted page uses. The only difference is where the
- * session comes from, which is what <SobaProvider> is for.
+ * What is left here is the part that belongs on a page: the machines, and one
+ * control. `<ConnectButton />` is that control alone, for an app that places
+ * the status itself.
+ *
+ * `showStatus` keeps the meaning it has always had, so every existing caller
+ * carries on working untouched.
  */
 export declare function ConnectCompute({ initialCode, onConnected, className, showStatus, }: ConnectComputeProps): import("react").JSX.Element;

package/dist/ConnectModal.d.ts

@@ -0,0 +1,23 @@
+import type { Machine } from "./types.js";
+export interface ConnectModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** From `?code=` on a `verification_uri_complete`, when they came from a
+     *  terminal that already has one. */
+    initialCode?: string;
+    onConnected?: (machines: Machine[]) => void;
+    /** Whether the panel draws the machines they already have, or the app does. */
+    showStatus?: boolean;
+}
+/**
+ * THE CONNECT FLOW, IN A DIALOG.
+ *
+ * Exported for a host that wants its own trigger — a menu item, a row in a
+ * table, a prompt raised by a run that failed for want of a machine. Most apps
+ * want `<ConnectButton />`, which is this plus the control.
+ *
+ * Every failure renders INSIDE the sheet. They used to render where the panel
+ * was, which is now where the button is: an error that replaces the thing you
+ * were about to press is worse than one inside the thing you just opened.
+ */
+export declare function ConnectModal({ open, onOpenChange, initialCode, onConnected, showStatus, }: ConnectModalProps): import("react").JSX.Element;

package/dist/SobaProvider.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import type { ConnectContext, CurrentPlan, Machine, Plan } from "./types.js";
+import type { ConnectContext, ConnectTheme, CurrentPlan, Machine, Plan } from "./types.js";
 export interface SobaProviderProps {
     children: ReactNode;
     /**
@@ -52,6 +52,12 @@ export interface SobaProviderProps {
     initialPlans?: Plan[];
     /** What that user is on, if the server asked. Pairs with `initialPlans`. */
     initialCurrentPlan?: CurrentPlan | null;
+    /**
+     * Overrides what the app's own settings say, for a page that knows better —
+     * a docs example rendering both, or an app whose theme is per-user rather
+     * than per-app. Most apps set this once in the dashboard instead.
+     */
+    theme?: ConnectTheme;
     pollMs?: number;
     /** The stylesheet injects itself once. Turn it off to ship your own. */
     injectStyles?: boolean;

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { ComputeStatus, type ComputeStatusProps } from "./ComputeStatus.js";
+export { ConnectButton, type ConnectButtonProps } from "./ConnectButton.js";
 export { ConnectCompute, type ConnectComputeProps } from "./ConnectCompute.js";
+export { ConnectModal, type ConnectModalProps } from "./ConnectModal.js";
 export { type ComputeState, type ConnectState, type PlanState, type RunRequest, type SobaContextValue, useSoba, } from "./context.js";
 export { collectText, parseEvent, readEvents } from "./events.js";
 export { SobaCheckout, type SobaCheckoutProps } from "./SobaCheckout.js";

package/dist/index.mjs

@@ -1,8 +1,8 @@
 "use client"
-var se=class extends Error{status;constructor(t,n){super(t),this.name="ConnectError",this.status=n}},Z=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 se(u,s.status)}return r}};function me(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 he(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 _,jsxs as H}from"react/jsx-runtime";function V({machines:e,onApproveRuntime:t}){return e.length?_("div",{children:e.map(n=>{let c=he(n);return H("div",{className:"sc-machine",children:[H("div",{className:"sc-row-between",children:[H("div",{className:"sc-row",children:[_("span",{className:`sc-dot sc-dot-${c.tone}`,"aria-hidden":"true"}),_("strong",{children:n.label??"This machine"})]}),_("span",{className:"sc-note",children:c.text})]}),_("p",{className:"sc-note",children:[n.platform,n.arch,n.version&&`worker ${n.version}`,n.always_on&&"always on"].filter(Boolean).join(" \xB7 ")}),H("ul",{className:"sc-runtimes",children:[n.runtimes.map(s=>{let r=me(s);return s.quarantined?H("li",{className:"sc-row-between",children:[_("span",{children:s.display_name}),t?_("button",{type:"button",className:"sc-btn",onClick:()=>t(n.id,s.id),children:"New here. Let it serve"}):_("span",{className:"sc-tone-warn",children:"new, not serving yet"})]},s.id):H("li",{className:"sc-row-between",children:[_("span",{children:s.display_name}),_("span",{className:`sc-tone-${r.tone}`,children:r.text})]},s.id)}),!n.runtimes.length&&_("li",{className:"sc-note",children:"No runtime advertised. Install Claude Code, Codex or Ollama on that machine."})]})]},n.id)})}):_("p",{className:"sc-note",children:"Nothing connected yet."})}import{useCallback as re,useEffect as oe,useMemo as Je,useRef as Ye,useState as L}from"react";var fe=[{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 Ae,jsx as a,jsxs as g}from"react/jsx-runtime";var ze=2e3,Ke=1e4;function ge({client:e,initialCode:t,onConnected:n,showStatus:c=!0,initialContext:s=null,initialMachines:r}){let u=!!s&&r!==void 0,[p,d]=L(u?t?"code":c&&(r?.length??0)>0?"manage":"choose":"loading"),[y,S]=L(s),[o,f]=L(r??[]),[b,te]=L(null),[C,ne]=L(t??""),[v,le]=L(null),[P,M]=L(null),[U,T]=L(!1),J=Ye(null);oe(()=>{if(!e||u)return;let l=!0;return Promise.all([e.context(),e.machines()]).then(([E,w])=>{l&&(S(E),f(w),J.current=new Set(w.map(G=>G.id)),t?d("code"):c&&w.length>0?d("manage"):d("choose"))}).catch(E=>{l&&(M(E.message),d("choose"))}),()=>{l=!1}},[e,t,c,u]),oe(()=>{r&&f(r)},[r]),oe(()=>{if(!e||p!=="manage")return;let l=!0,E=setInterval(async()=>{try{let w=await e.machines();l&&f(w)}catch{}},Ke);return()=>{l=!1,clearInterval(E)}},[p,e]),oe(()=>{if(!e||p!=="waiting")return;let l=!0,E=setInterval(async()=>{try{let w=await e.machines();if(!l)return;f(w);let G=w.filter(K=>!J.current?.has(K.id));(G.find(K=>K.state!=="offline")??G[0])&&(d("connected"),n?.(w))}catch{}},ze);return()=>{l=!1,clearInterval(E)}},[p,e,n]);let D=re(async()=>{if(e){M(null),T(!0);try{let l=await e.lookup(C);le(l),d("confirm")}catch(l){M(l.message)}finally{T(!1)}}},[e,C]),q=re(async()=>{if(e){M(null),T(!0);try{await e.approve(C),d("waiting")}catch(l){M(l.message)}finally{T(!1)}}},[e,C]),ue=re(async()=>{if(e){T(!0);try{await e.deny(C),d("denied")}catch(l){M(l.message)}finally{T(!1)}}},[e,C]),Y=Je(()=>y?.connect_url??null,[y]),B=re(async(l,E)=>{if(e)try{await e.approveRuntime(l,E),f(await e.machines())}catch(w){M(w.message)}},[e]);return p==="loading"?a("div",{className:"soba-connect",children:a("div",{className:"sc-card",children:a("p",{className:"sc-note",children:"Loading\u2026"})})}):g("div",{className:"soba-connect",children:[p==="manage"&&g("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Your compute"}),g("p",{className:"sc-sub",children:[y?.app.name??"This app"," runs on these machines, while they are awake."]}),a(V,{machines:o,onApproveRuntime:B}),P&&a("p",{className:"sc-error",children:P}),a("button",{type:"button",className:"sc-btn",style:{marginTop:16},onClick:()=>d("choose"),children:"Connect another machine"})]}),p==="choose"&&g("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Use the AI you already pay for"}),g("p",{className:"sc-sub",children:[y?.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:fe.map(l=>g("button",{type:"button",className:"sc-choice","aria-pressed":b?.id===l.id,onClick:()=>te(l),children:[a("span",{className:"sc-choice-title",children:l.title}),a("br",{}),g("span",{className:"sc-choice-meta",children:[l.cost," \xB7 ",l.prerequisite]})]},l.id))}),b&&g("div",{className:"sc-stack",style:{marginTop:16},children:[a("p",{className:"sc-note",children:b.hint}),Y?g(Ae,{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:Y}),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:()=>d("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."})]})]}),p==="code"&&g("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."}),g("form",{className:"sc-stack",onSubmit:l=>{l.preventDefault(),D()},children:[a("input",{className:"sc-input",value:C,onChange:l=>ne(l.target.value),placeholder:"ACDE-F234",autoComplete:"off",autoFocus:!0,"aria-label":"Pairing code"}),P&&a("p",{className:"sc-error",children:P}),a("button",{type:"submit",className:"sc-btn sc-btn-primary",disabled:U||C.length<8,children:U?"Checking\u2026":"Continue"})]})]}),p==="confirm"&&v&&g("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Attach this machine to your account?"}),g("p",{className:"sc-sub",children:["Once you approve, ",y?.app.name??"this app"," may send your runs to it. It can never see the account or the keys on it."]}),g("ul",{className:"sc-facts",children:[a(ee,{k:"Code",v:v.user_code}),a(ee,{k:"Machine",v:v.hostname??"not stated"}),a(ee,{k:"System",v:[v.platform,v.arch].filter(Boolean).join(" / ")||"not stated"}),a(ee,{k:"Asked by",v:v.client??"not stated"}),v.labels.length>0&&a(ee,{k:"Labels",v: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."}),P&&a("p",{className:"sc-error",children:P}),g("div",{className:"sc-row",style:{marginTop:16},children:[a("button",{type:"button",className:"sc-btn sc-btn-primary",onClick:()=>void q(),disabled:U,children:"Approve"}),a("button",{type:"button",className:"sc-btn",onClick:()=>void ue(),disabled:U,children:"No, deny it"})]})]}),p==="waiting"&&g("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."})]}),p==="connected"&&g("div",{className:"sc-card",children:[a("h2",{className:"sc-title",children:"Connected"}),g("p",{className:"sc-sub",children:[y?.app.name??"This app"," will use this machine from now on, while it is awake."]}),c&&g(Ae,{children:[a(V,{machines:o,onApproveRuntime:B}),a("button",{type:"button",className:"sc-btn",style:{marginTop:16},onClick:()=>d("manage"),children:"Done"})]})]}),p==="denied"&&g("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 ee({k:e,v:t}){return g("li",{className:"sc-fact",children:[a("span",{className:"sc-fact-key",children:e}),a("span",{children:t})]})}import{createContext as Qe,useContext as Xe}from"react";var ye=Qe(null);function A(){let e=Xe(ye);if(!e)throw new Error("useSoba() must be used inside a <SobaProvider>.");return e}import{jsx as W}from"react/jsx-runtime";function Ze({className:e}){let{compute:t}=A(),n=e?`soba-connect ${e}`:"soba-connect";return t.loading&&!t.machines.length?W("div",{className:n,children:W("p",{className:"sc-note",children:"Loading\u2026"})}):t.error&&!t.machines.length?W("div",{className:n,children:W("p",{className:"sc-error",children:t.error.message})}):W("div",{className:n,children:W(V,{machines:t.machines})})}import{createContext as Ie,useContext as Oe}from"react";var be=Ie(null);function Le(){return Oe(be)}var ve=Ie({context:null,machines:void 0});function $e(){return Oe(ve)}import{jsx as $}from"react/jsx-runtime";function et({initialCode:e,onConnected:t,className:n,showStatus:c}){let{error:s}=A(),r=Le(),u=$e();return s?$("div",{className:Ue(n),children:$("div",{className:"sc-card",children:$("p",{className:"sc-error",children:s.message})})}):!r&&!u.context?$("div",{className:Ue(n),children:$("div",{className:"sc-card",children:$("p",{className:"sc-note",children:"Loading\u2026"})})}):$("div",{className:n,children:$(ge,{client:r,initialContext:u.context,initialMachines:u.machines,...e?{initialCode:e}:{},...t?{onConnected:t}:{},...c===void 0?{}:{showStatus:c}})})}function Ue(e){return e?`soba-connect ${e}`:"soba-connect"}var tt=new Set(["delta","thinking","status","done","error"]);function ae(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"||!tt.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*Ce(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 d=await c.read();if(d.done)break;for(r+=s.decode(d.value,{stream:!0});;){let y=r.indexOf(`
-`);if(y===-1)break;let S=Fe(r.slice(0,y));if(r=r.slice(y+1),n){let o=S.trim()?ae(S):null;o&&(yield o);continue}if(S===""){let o=u.join(`
-`);if(u=[],o==="[DONE]")return;let f=o?ae(o):null;f&&(yield f);continue}qe(S,u)}}!n&&r&&qe(Fe(r),u);let p=n?r.trim():u.join(`
-`);if(p&&p!=="[DONE]"){let d=ae(p);d&&(yield d)}}finally{c.cancel().catch(()=>{})}}function qe(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 Fe(e){return e.endsWith("\r")?e.slice(0,-1):e}async function nt(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 je}from"react";import{jsx as De,jsxs as rt}from"react/jsx-runtime";function st({plan:e,successUrl:t,cancelUrl:n,label:c,className:s}){let{plan:r}=A(),[u,p]=je(!1),[d,y]=je(null);async function S(){p(!0),y(null);try{let o=await r.checkout(e.id,{...t?{successUrl:t}:{},...n?{cancelUrl:n}:{}});window.location.assign(o)}catch(o){y(o.message),p(!1)}}return rt("div",{className:s?`soba-connect ${s}`:"soba-connect",children:[De("button",{type:"button",className:"sc-btn sc-btn-primary",disabled:u,onClick:()=>void S(),children:u?"Opening\u2026":c??`Subscribe \u2014 $${e.price.toLocaleString()}/${e.interval}`}),d&&De("p",{className:"sc-error",children:d})]})}import{useState as Be}from"react";import{Fragment as ct,jsx as h,jsxs as N}from"react/jsx-runtime";var ot={"user-hardware":"your own machine","user-subscription":"your own AI subscription","open-weights":"open models we host",frontier:"frontier models"},at=new Set(["user-hardware","user-subscription"]);function ie(e){return e?`soba-connect ${e}`:"soba-connect"}function it({onSelect:e,successUrl:t,cancelUrl:n,showCompute:c=!0,className:s}){let{plan:r}=A(),[u,p]=Be(null),[d,y]=Be(null);if(r.error)return h("div",{className:ie(s),children:h("div",{className:"sc-card",children:h("p",{className:"sc-error",children:r.error.message})})});if(r.loading)return h("div",{className:ie(s),children:h("div",{className:"sc-card",children:h("p",{className:"sc-note",children:"Loading plans\u2026"})})});if(r.plans.length===0)return h("div",{className:ie(s),children:h("div",{className:"sc-card",children:h("p",{className:"sc-note",children:"This app has no plans yet."})})});async function S(o){p(o.id),y(null);try{if(o.selectable)await r.select(o.id);else if(e)e(o);else{let f=await r.checkout(o.id,{...t?{successUrl:t}:{},...n?{cancelUrl:n}:{}});window.location.assign(f);return}}catch(f){y(f.message)}finally{p(null)}}return N("div",{className:ie(s),children:[h("div",{className:"sc-plans",children:r.plans.map(o=>{let f=r.current?.plan_id===o.id;return N("div",{className:f?"sc-plan sc-plan-current":"sc-plan",children:[N("div",{className:"sc-row-between",children:[h("span",{className:"sc-title",children:o.name}),f&&h("span",{className:"sc-plan-badge",children:"Current"})]}),o.description&&h("p",{className:"sc-sub",children:o.description}),h("p",{className:"sc-plan-price",children:o.price===0?h("span",{className:"sc-plan-amount",children:"Free"}):N(ct,{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:[h("span",{className:"sc-fact-key",children:"Included"}),h("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:[h("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:[h("span",{className:"sc-fact-key",children:"Trial"}),N("span",{children:[o.trial_days," days"]})]}),c&&N("div",{className:"sc-plan-compute",children:[h("span",{className:"sc-fact-key",children:"Runs on"}),o.route_allow===null||o.route_allow.length===0?h("span",{children:o.route_allow===null?"any compute":"no compute"}):h("ul",{className:"sc-compute",children:o.route_allow.map(b=>h("li",{className:at.has(b)?"sc-compute-own":void 0,children:ot[b]??b},b))})]})]}),h("button",{type:"button",className:f?"sc-btn":"sc-btn sc-btn-primary",disabled:f||u!==null,onClick:()=>void S(o),children:f?"Your plan":u===o.id?o.selectable?"Switching\u2026":"Opening\u2026":o.selectable?"Choose":`Subscribe \u2014 $${o.price.toLocaleString()}/${o.interval}`})]},o.id)})}),d&&h("p",{className:"sc-error",children:d})]})}import{useCallback as F,useEffect as j,useMemo as xe,useRef as ut,useState as R}from"react";var ce=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 p of this.#r)p();return r})();try{return await this.#n}finally{this.#n=null}}};function Ge(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,lt(c,r))}}function lt(e,t){let n=new Headers(e?.headers);return n.set("authorization",`Bearer ${t}`),{...e,headers:n}}var He="data-soba-react",Ve=!1;function we(){if(Ve||typeof document>"u"||(Ve=!0,document.querySelector(`style[${He}]`)))return;let e=document.createElement("style");e.setAttribute(He,""),e.textContent=`.soba-connect {
+var ye=class extends Error{status;constructor(t,n){super(t),this.name="ConnectError",this.status=n}},de=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,o){let s=await this.doFetch(`${this.baseUrl}${n}`,{method:t,headers:{authorization:`Bearer ${this.session}`,...o?{"content-type":"application/json"}:{}},...o?{body:JSON.stringify(o)}:{}}),r={};try{r=await s.json()}catch{}if(!s.ok){let m=typeof r.error=="string"?r.error:`Request failed (${s.status})`;throw new ye(m,s.status)}return r}};function Ee(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 _e(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 O,jsxs as se}from"react/jsx-runtime";function G({machines:e,onApproveRuntime:t}){return e.length?O("div",{children:e.map(n=>{let o=_e(n);return se("div",{className:"sc-machine",children:[se("div",{className:"sc-row-between",children:[se("div",{className:"sc-row",children:[O("span",{className:`sc-dot sc-dot-${o.tone}`,"aria-hidden":"true"}),O("strong",{children:n.label??"This machine"})]}),O("span",{className:"sc-note",children:o.text})]}),O("p",{className:"sc-note",children:[n.platform,n.arch,n.version&&`worker ${n.version}`,n.always_on&&"always on"].filter(Boolean).join(" \xB7 ")}),se("ul",{className:"sc-runtimes",children:[n.runtimes.map(s=>{let r=Ee(s);return s.quarantined?se("li",{className:"sc-row-between",children:[O("span",{children:s.display_name}),t?O("button",{type:"button",className:"sc-btn",onClick:()=>t(n.id,s.id),children:"New here. Let it serve"}):O("span",{className:"sc-tone-warn",children:"new, not serving yet"})]},s.id):se("li",{className:"sc-row-between",children:[O("span",{children:s.display_name}),O("span",{className:`sc-tone-${r.tone}`,children:r.text})]},s.id)}),!n.runtimes.length&&O("li",{className:"sc-note",children:"No runtime advertised. Install Claude Code, Codex or Ollama on that machine."})]})]},n.id)})}):O("p",{className:"sc-note",children:"Nothing connected yet."})}import{useCallback as ve,useEffect as W,useId as St,useMemo as me,useRef as Pt,useState as L}from"react";import{jsx as z,jsxs as xt}from"react/jsx-runtime";function Me({className:e}){return xt("svg",{viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false",className:e,children:[z("path",{d:"M18.125 7.039A8.6 8.6 0 1 0 18.125 16.961A6 6 0 0 1 18.125 7.039Z",fill:"currentColor"}),z("path",{d:"M19.925 7.039A8.6 8.6 0 0 1 19.925 16.961A6 6 0 0 0 19.925 7.039Z",fill:"currentColor"})]})}function Xe({className:e}){return z("svg",{viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false",className:e,children:z("path",{fill:"currentColor",d:"M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"})})}function Qe({className:e}){return z("svg",{viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false",className:e,children:z("path",{fill:"currentColor",d:"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"})})}function et({className:e}){return z("svg",{viewBox:"0 0 24 24","aria-hidden":"true",focusable:"false",className:e,children:z("path",{d:"M4 5h16v11H4zM9 20h6M12 16v4",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}var tt={claude:Xe,chatgpt:Qe,local:et};var pe=[{id:"claude",label:"Continue with 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",label:"Continue with 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",label:"Use a model on this machine",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"]}];var nt="soba.connect.choice",Nt=180*24*60*60*1e3;function kt(e){let t=2166136261;for(let n=0;n<e.length;n++)t^=e.charCodeAt(n),t=Math.imul(t,16777619);return(t>>>0).toString(36)}function Re(e,t){return e?t?`${nt}.${e}.${kt(t)}`:`${nt}.${e}`:null}function Te(e){if(!e||typeof localStorage>"u")return null;try{let t=localStorage.getItem(e);if(!t)return null;let n=JSON.parse(t);if(Date.now()-Date.parse(n.at)>Nt)return null;let o=pe.find(s=>s.id===n.choice);return o?o.id:null}catch{return null}}function Ie(e,t){if(!(!e||typeof localStorage>"u"))try{localStorage.setItem(e,JSON.stringify({choice:t,at:new Date().toISOString()}))}catch{}}function Ae(e,t){if(!e)return{kind:"unasked"};if(!t)return{kind:"bare"};let n=t.runtimes??[];if(n.length===0)return{kind:"bare"};let o=n.find(s=>e.expects.includes(s.id));return o?o.quarantined?{kind:"held",runtime:o}:o.authenticated===!1?{kind:"signed-out",runtime:o}:o.authenticated===null||o.authenticated===void 0?{kind:"unsure",runtime:o}:{kind:"matched",runtime:o}:{kind:"missing",found:n}}function Oe(e){return e.kind!=="bare"&&e.kind!=="missing"}function Le(e){return e.kind==="matched"||e.kind==="signed-out"||e.kind==="unsure"||e.kind==="held"}import{Fragment as ot,jsx as c,jsxs as b}from"react/jsx-runtime";var st=2e3,Et=1e4,_t=15e3,Mt=9e4;function Rt(e){let t=Math.max(0,Math.round(e/1e3));return`${Math.floor(t/60)}:${String(t%60).padStart(2,"0")}`}function $e({client:e,initialCode:t,onConnected:n,showStatus:o=!0,initialContext:s=null,initialMachines:r,onClose:m,headingId:h,theme:u}){let v=!!s&&r!==void 0,[d,a]=L(v?t?"code":o&&(r?.length??0)>0?"manage":"choose":"loading"),[f,R]=L(s),[w,T]=L(r??[]),[x,I]=L(null),[N,Y]=L(t??""),[g,B]=L(null),[j,U]=L(null),[V,q]=L(!1),[H,ke]=L(0),[K,ae]=L(()=>Date.now()),[ie,fe]=L(null),[X,Se]=L(null),Q=St(),ee=h??Q,te=Pt(null);W(()=>{if(!e||v)return;let i=!0;return Promise.all([e.context(),e.machines()]).then(([C,P])=>{i&&(R(C),T(P),t?a("code"):o&&P.length>0?a("manage"):a("choose"))}).catch(C=>{i&&(U(C.message),a("choose"))}),()=>{i=!1}},[e,t,o,v]),W(()=>{r&&T(r)},[r]),W(()=>{if(!e||d!=="manage")return;let i=!0,C=setInterval(async()=>{try{let P=await e.machines();i&&T(P)}catch{}},Et);return()=>{i=!1,clearInterval(C)}},[d,e]),W(()=>{if(!e||d!=="waiting")return;let i=!0,C=setInterval(async()=>{try{let P=await e.machines();if(!i)return;T(P);let ne=te.current;if(!ne)return;let l=P.filter(A=>!ne.has(A.id)),k=l.find(A=>A.state!=="offline")??l[0];k&&(Se(k.id),a("connected"),n?.(P))}catch{}},st);return()=>{i=!1,clearInterval(C)}},[d,e,n]);let ce=ve(async()=>{if(e){U(null),q(!0);try{let i=await e.lookup(N);B(i),a("confirm")}catch(i){U(i.message)}finally{q(!1)}}},[e,N]),ge=ve(async()=>{if(e){U(null),q(!0);try{try{te.current=new Set((await e.machines()).map(i=>i.id))}catch{te.current=new Set(w.map(i=>i.id))}await e.approve(N),a("waiting"),ke(Date.now())}catch(i){U(i.message)}finally{q(!1)}}},[e,N,w]),be=ve(async()=>{if(e){q(!0);try{await e.deny(N),a("denied")}catch(i){U(i.message)}finally{q(!1)}}},[e,N]),le=me(()=>f?.connect_url??null,[f]),D=me(()=>Re(f?.publishable_key??null),[f?.publishable_key]);W(()=>fe(Te(D)),[D]);let S=me(()=>w.find(i=>i.id===X),[w,X]),p=me(()=>Ae(x,S),[x,S]);W(()=>{if(!e||d!=="connected"||Oe(p))return;let i=Date.now()+_t,C=setInterval(async()=>{if(Date.now()>i)return clearInterval(C);try{T(await e.machines())}catch{}},st);return()=>clearInterval(C)},[e,d,p]),W(()=>{d!=="connected"||!x||Le(p)&&Ie(D,x.id)},[d,x,p,D]);let E=me(()=>{if(!g)return null;if(g.approved||g.denied)return"answered";let i=g.expires_at?Date.parse(g.expires_at):Number.NaN;return Number.isFinite(i)&&i<=K?"expired":"live"},[g,K]);function F({verdict:i,choice:C}){if(i.kind==="unasked"||i.kind==="matched")return null;if(i.kind==="signed-out")return b("p",{className:"sc-note sc-tone-warn",children:[i.runtime.display_name," is on that machine but"," ",i.runtime.auth_hint??"signed out",". ",C?.hint]});if(i.kind==="unsure")return b("p",{className:"sc-note",children:[i.runtime.display_name," is there. We could not tell whether it is signed in \u2014 the first run will say for certain."]});if(i.kind==="held")return b("p",{className:"sc-note sc-tone-warn",children:[i.runtime.display_name," appeared after pairing, so it is waiting for you to let it serve."]});if(i.kind==="missing"){let P=i.found.map(ne=>ne.display_name).join(", ");return b("p",{className:"sc-note sc-tone-warn",children:["That machine is not advertising ",C?.prerequisite.split(",")[0]??"what you picked",". It has ",P,", and runs will go there instead. ",C?.hint]})}return c("p",{className:"sc-note sc-tone-warn",children:"No runtime advertised yet. Install Claude Code, Codex or Ollama on that machine and it will appear here."})}W(()=>{if(!(d==="confirm"&&E==="live"||d==="waiting"))return;let C=setInterval(()=>ae(Date.now()),1e3);return()=>clearInterval(C)},[d,E]);let ue=ve(async(i,C)=>{if(e)try{await e.approveRuntime(i,C),T(await e.machines())}catch(P){U(P.message)}},[e]);return d==="loading"?c("div",{className:"soba-connect",...u?{"data-theme":u}:{},children:c("div",{className:"sc-card",children:c("p",{className:"sc-note",children:"Loading\u2026"})})}):b("div",{className:"soba-connect",...u?{"data-theme":u}:{},children:[m&&c("button",{type:"button",className:"sc-modal-close",onClick:m,"aria-label":"Close",children:"\xD7"}),d==="manage"&&b("div",{className:"sc-card",children:[c("h2",{className:"sc-title",children:"Your compute"}),b("p",{className:"sc-sub",children:[f?.app.name??"This app"," runs on these machines, while they are awake."]}),c(G,{machines:w,onApproveRuntime:ue}),j&&c("p",{className:"sc-error",children:j}),c("button",{type:"button",className:"sc-btn",style:{marginTop:16},onClick:()=>a("choose"),children:"Connect another machine"})]}),d==="choose"&&b("div",{className:"sc-card",children:[c("span",{className:"sc-mark","aria-hidden":"true",children:c(Me,{})}),c("h2",{className:"sc-h",id:ee,children:"Connect your AI"}),c("p",{className:"sc-p",children:"Use access you already have. Nothing here is charged to you."}),c("div",{className:"sc-opts",children:pe.map(i=>{let C=tt[i.id];return b("button",{type:"button",className:"sc-opt","aria-pressed":x?.id===i.id,onClick:()=>I(i),children:[C&&c(C,{className:"sc-opt-mark"}),c("span",{className:"sc-opt-label",children:i.label}),ie===i.id&&c("span",{className:"sc-opt-last",children:"last used"})]},i.id)})}),x&&b("div",{className:"sc-stack",style:{marginTop:16},children:[c("p",{className:"sc-note",children:x.hint}),le?b(ot,{children:[c("p",{className:"sc-label",children:"Install Soba Connect on the machine you want to use"}),c("a",{className:"sc-btn sc-btn-primary",href:"https://soba.so/soba-connect",target:"_blank",rel:"noreferrer noopener",children:"Get Soba Connect"}),c("p",{className:"sc-label",children:"Then paste this link into it"}),c("code",{className:"sc-code",children:le}),c("p",{className:"sc-note",children:"It will show you a short code. Nothing is pasted back: the credential is written straight to that machine."}),c("button",{type:"button",className:"sc-btn",onClick:()=>a("code"),children:"I have a code"})]}):c("p",{className:"sc-error",children:"This app has no publishable key yet, so there is nothing to pair against."})]})]}),d==="code"&&b("div",{className:"sc-card",children:[c("h2",{className:"sc-title",children:"Enter the code from that machine"}),c("p",{className:"sc-sub",children:"Eight characters, shown by Soba Connect once you paste the link."}),b("form",{className:"sc-stack",onSubmit:i=>{i.preventDefault(),ce()},children:[c("input",{className:"sc-input",value:N,onChange:i=>Y(i.target.value),placeholder:"ACDE-F234",autoComplete:"off",autoFocus:!0,"aria-label":"Pairing code"}),j&&c("p",{className:"sc-error",children:j}),c("button",{type:"submit",className:"sc-btn sc-btn-primary",disabled:V||N.length<8,children:V?"Checking\u2026":"Continue"})]})]}),d==="confirm"&&g&&b("div",{className:"sc-card",children:[c("h2",{className:"sc-title",children:"Attach this machine to your account?"}),b("p",{className:"sc-sub",children:["Once you approve, ",f?.app.name??"this app"," may send your runs to it. It can never see the account or the keys on it."]}),b("ul",{className:"sc-facts",children:[c(he,{k:"Code",v:g.user_code}),c(he,{k:"Machine",v:g.hostname??"not stated"}),c(he,{k:"System",v:[g.platform,g.arch].filter(Boolean).join(" / ")||"not stated"}),c(he,{k:"Asked by",v:g.client??"not stated"}),g.labels.length>0&&c(he,{k:"Labels",v:g.labels.join(", ")})]}),c("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."}),E==="expired"&&c("p",{className:"sc-error",children:"That code has expired. Ask the machine for a new one \u2014 it prints a fresh code each time it starts."}),E==="answered"&&c("p",{className:"sc-error",children:"That code has already been answered. If it was not you, deny the next one."}),j&&c("p",{className:"sc-error",children:j}),b("div",{className:"sc-row",style:{marginTop:16},children:[c("button",{type:"button",className:"sc-btn sc-btn-primary",onClick:()=>void ge(),disabled:V||E!=="live",children:"Approve"}),c("button",{type:"button",className:"sc-btn",onClick:()=>void be(),disabled:V||E==="answered",children:"No, deny it"}),c("button",{type:"button",className:"sc-btn sc-btn-quiet",onClick:()=>a("code"),disabled:V,children:"Back"})]}),E==="live"&&g.expires_at&&b("p",{className:"sc-note",style:{marginTop:10},children:["This code expires in ",Rt(Date.parse(g.expires_at)-K),"."]})]}),d==="waiting"&&b("div",{className:"sc-card",children:[c("h2",{className:"sc-title",id:ee,children:"Approved. Waiting for it to connect\u2026"}),c("p",{className:"sc-sub",children:"The worker is starting on that machine. This page will change on its own the moment it arrives."}),c("p",{className:"sc-note",children:"If nothing happens, look at Soba Connect on that machine: it says what it is doing."}),H>0&&K-H>Mt&&b("div",{className:"sc-stack",style:{marginTop:14},children:[c("p",{className:"sc-note sc-tone-warn",children:"Still nothing. Soba Connect may not be running on that machine, or it may not have finished starting. This keeps watching either way."}),c("button",{type:"button",className:"sc-btn",onClick:()=>a("choose"),children:"Start over"})]})]}),d==="connected"&&b("div",{className:"sc-card",children:[c("h2",{className:"sc-title",id:ee,children:"Connected"}),b("p",{className:"sc-sub",children:[f?.app.name??"This app"," will use this machine from now on, while it is awake."]}),c(F,{verdict:p,choice:x}),o&&b(ot,{children:[c(G,{machines:w,onApproveRuntime:ue}),c("button",{type:"button",className:"sc-btn",style:{marginTop:16},onClick:()=>a("manage"),children:"Done"})]})]}),d==="denied"&&b("div",{className:"sc-card",children:[c("h2",{className:"sc-title",id:ee,children:"Declined"}),c("p",{className:"sc-sub",children:"That machine was not attached to your account, and the terminal has been told so."}),c("button",{type:"button",className:"sc-btn",style:{marginTop:16},onClick:()=>a("choose"),children:"Back to the start"})]})]})}function he({k:e,v:t}){return b("li",{className:"sc-fact",children:[c("span",{className:"sc-fact-key",children:e}),c("span",{children:t})]})}import{useEffect as Tt,useRef as qe}from"react";var Ce=0,Ue=null;function rt(){if(typeof document>"u")return()=>{};Ce===0&&(Ue=document.body.style.overflow,document.body.style.overflow="hidden"),Ce+=1;let e=!1;return()=>{e||(e=!0,Ce-=1,Ce===0&&(document.body.style.overflow=Ue??"",Ue=null))}}import{jsx as at}from"react/jsx-runtime";function Be({open:e,onClose:t,labelledBy:n,theme:o,children:s}){let r=qe(null),m=qe(null),h=qe(null);return Tt(()=>{let u=r.current;if(u){if(!e){u.open&&u.close();return}return u.open||u.showModal(),document.activeElement===u&&m.current?.focus(),rt()}},[e]),at("dialog",{ref:r,className:"soba-connect sc-modal","aria-labelledby":n,...o?{"data-theme":o}:{},onCancel:u=>{u.preventDefault(),t()},onPointerDown:u=>{h.current=u.target},onClick:u=>{u.target===u.currentTarget&&h.current===u.currentTarget&&t()},children:at("div",{className:"sc-modal-sheet",ref:m,tabIndex:-1,children:s})})}import{createContext as It,useContext as At}from"react";var De=It(null);function _(){let e=At(De);if(!e)throw new Error("useSoba() must be used inside a <SobaProvider>.");return e}import{jsx as oe}from"react/jsx-runtime";function Ot({className:e}){let{compute:t}=_(),n=e?`soba-connect ${e}`:"soba-connect";return t.loading&&!t.machines.length?oe("div",{className:n,children:oe("p",{className:"sc-note",children:"Loading\u2026"})}):t.error&&!t.machines.length?oe("div",{className:n,children:oe("p",{className:"sc-error",children:t.error.message})}):oe("div",{className:n,children:oe(G,{machines:t.machines})})}import{useEffect as $t,useRef as dt,useState as Ut}from"react";import{useId as Lt}from"react";import{createContext as it,useContext as ct}from"react";var Fe=it(null);function lt(){return ct(Fe)}var je=it({context:null,machines:void 0,theme:"light"});function ut(){return ct(je)}import{jsx as re,jsxs as Ve}from"react/jsx-runtime";function He({open:e,onOpenChange:t,initialCode:n,onConnected:o,showStatus:s}){let{error:r}=_(),m=lt(),h=ut(),u=()=>t(!1),v=Lt();return Ve(Be,{open:e,onClose:u,labelledBy:v,theme:h.theme,children:[r?Ve("div",{className:"sc-card",children:[re("h2",{className:"sc-title",id:v,children:"Could not start"}),re("p",{className:"sc-error",children:r.message})]}):!m&&!h.context?Ve("div",{className:"sc-card",children:[re("h2",{className:"sc-title",id:v,children:"One moment"}),re("p",{className:"sc-note",children:"Getting your compute\u2026"})]}):re($e,{client:m,onClose:u,headingId:v,theme:h.theme,initialContext:h.context,...h.machines!==void 0?{initialMachines:h.machines}:{},...n?{initialCode:n}:{},...o?{onConnected:o}:{},...s===void 0?{}:{showStatus:s}}),re("p",{className:"sc-modal-foot",children:"Secured by Soba"})]})}import{Fragment as pt,jsx as Ge,jsxs as mt}from"react/jsx-runtime";function ze({children:e,variant:t,className:n,initialCode:o,onConnected:s,defaultOpen:r,open:m,onOpenChange:h,showConnected:u=!0}){let{compute:v}=_(),[d,a]=Ut(r??!!o),f=dt(null),R=m!==void 0,w=R?m:d,T=B=>{R||a(B),h?.(B)},x=dt(w);$t(()=>{x.current&&!w&&f.current?.focus(),x.current=w},[w]);let I=v.machines.find(B=>B.state!=="offline")??v.machines[0],N=I?.runtimes?.find(B=>!B.quarantined)??I?.runtimes?.[0],Y=u&&I!==void 0,g=I?.state==="online"?"ok":I?.state==="busy"?"busy":"off";return mt(pt,{children:[Ge("button",{ref:f,type:"button",className:["sc-btn",Y?"sc-btn-connected":t==="outline"?"":"sc-btn-primary",n].filter(Boolean).join(" "),onClick:()=>T(!0),children:e??(Y?mt(pt,{children:[Ge("i",{className:`sc-dot sc-dot-${g}`,"aria-hidden":"true"}),N?.display_name??"Connected",I?.label?` \xB7 ${I.label}`:""]}):"Connect compute")}),Ge(He,{open:w,onOpenChange:T,...o?{initialCode:o}:{},...s?{onConnected:s}:{}})]})}import{jsx as We,jsxs as Bt}from"react/jsx-runtime";function qt({initialCode:e,onConnected:t,className:n,showStatus:o=!0}){let{compute:s}=_(),r=s.machines.length>0;return Bt("div",{className:n?`soba-connect ${n}`:"soba-connect",children:[o&&We(G,{machines:s.machines}),We("div",{style:{marginTop:o&&r?14:0},children:We(ze,{variant:o&&r?"outline":"primary",...e?{initialCode:e}:{},...t?{onConnected:t}:{}})})]})}var Dt=new Set(["delta","thinking","status","done","error"]);function we(e){let t;try{t=JSON.parse(e)}catch{return null}if(!t||typeof t!="object")return null;let n=t,o=n.type==="event"?n.event:n;if(!o||typeof o!="object")return null;let s=o;if(typeof s.type!="string"||!Dt.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*Ke(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"),o=t.getReader(),s=new TextDecoder,r="",m=[];try{for(;;){let u=await o.read();if(u.done)break;for(r+=s.decode(u.value,{stream:!0});;){let v=r.indexOf(`
+`);if(v===-1)break;let d=ft(r.slice(0,v));if(r=r.slice(v+1),n){let a=d.trim()?we(d):null;a&&(yield a);continue}if(d===""){let a=m.join(`
+`);if(m=[],a==="[DONE]")return;let f=a?we(a):null;f&&(yield f);continue}ht(d,m)}}!n&&r&&ht(ft(r),m);let h=n?r.trim():m.join(`
+`);if(h&&h!=="[DONE]"){let u=we(h);u&&(yield u)}}finally{o.cancel().catch(()=>{})}}function ht(e,t){if(!e||e.startsWith(":"))return;let n=e.indexOf(":");if(n===-1||e.slice(0,n)!=="data")return;let o=e.slice(n+1);t.push(o.startsWith(" ")?o.slice(1):o)}function ft(e){return e.endsWith("\r")?e.slice(0,-1):e}async function Ft(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 gt}from"react";import{jsx as bt,jsxs as Vt}from"react/jsx-runtime";function jt({plan:e,successUrl:t,cancelUrl:n,label:o,className:s}){let{plan:r}=_(),[m,h]=gt(!1),[u,v]=gt(null);async function d(){h(!0),v(null);try{let a=await r.checkout(e.id,{...t?{successUrl:t}:{},...n?{cancelUrl:n}:{}});window.location.assign(a)}catch(a){v(a.message),h(!1)}}return Vt("div",{className:s?`soba-connect ${s}`:"soba-connect",children:[bt("button",{type:"button",className:"sc-btn sc-btn-primary",disabled:m,onClick:()=>void d(),children:m?"Opening\u2026":o??`Subscribe \u2014 $${e.price.toLocaleString()}/${e.interval}`}),u&&bt("p",{className:"sc-error",children:u})]})}import{useState as yt}from"react";import{Fragment as Wt,jsx as y,jsxs as M}from"react/jsx-runtime";var Ht={"user-hardware":"your own machine","user-subscription":"your own AI subscription","open-weights":"open models we host",frontier:"frontier models"},Gt=new Set(["user-hardware","user-subscription"]);function xe(e){return e?`soba-connect ${e}`:"soba-connect"}function zt({onSelect:e,successUrl:t,cancelUrl:n,showCompute:o=!0,className:s}){let{plan:r}=_(),[m,h]=yt(null),[u,v]=yt(null);if(r.error)return y("div",{className:xe(s),children:y("div",{className:"sc-card",children:y("p",{className:"sc-error",children:r.error.message})})});if(r.loading)return y("div",{className:xe(s),children:y("div",{className:"sc-card",children:y("p",{className:"sc-note",children:"Loading plans\u2026"})})});if(r.plans.length===0)return y("div",{className:xe(s),children:y("div",{className:"sc-card",children:y("p",{className:"sc-note",children:"This app has no plans yet."})})});async function d(a){h(a.id),v(null);try{if(a.selectable)await r.select(a.id);else if(e)e(a);else{let f=await r.checkout(a.id,{...t?{successUrl:t}:{},...n?{cancelUrl:n}:{}});window.location.assign(f);return}}catch(f){v(f.message)}finally{h(null)}}return M("div",{className:xe(s),children:[y("div",{className:"sc-plans",children:r.plans.map(a=>{let f=r.current?.plan_id===a.id;return M("div",{className:f?"sc-plan sc-plan-current":"sc-plan",children:[M("div",{className:"sc-row-between",children:[y("span",{className:"sc-title",children:a.name}),f&&y("span",{className:"sc-plan-badge",children:"Current"})]}),a.description&&y("p",{className:"sc-sub",children:a.description}),y("p",{className:"sc-plan-price",children:a.price===0?y("span",{className:"sc-plan-amount",children:"Free"}):M(Wt,{children:[M("span",{className:"sc-plan-amount",children:["$",a.price.toLocaleString()]}),M("span",{className:"sc-plan-interval",children:["/",a.interval]})]})}),M("div",{className:"sc-facts",children:[M("div",{className:"sc-fact",children:[y("span",{className:"sc-fact-key",children:"Included"}),y("span",{children:a.included_units===null?"Unlimited":`${a.included_units.toLocaleString()} ${a.unit}${a.included_units===1?"":"s"}`})]}),a.overage_per_unit>0&&M("div",{className:"sc-fact",children:[y("span",{className:"sc-fact-key",children:"Then"}),M("span",{children:["$",a.overage_per_unit," / ",a.unit]})]}),a.trial_days>0&&M("div",{className:"sc-fact",children:[y("span",{className:"sc-fact-key",children:"Trial"}),M("span",{children:[a.trial_days," days"]})]}),o&&M("div",{className:"sc-plan-compute",children:[y("span",{className:"sc-fact-key",children:"Runs on"}),a.route_allow===null||a.route_allow.length===0?y("span",{children:a.route_allow===null?"any compute":"no compute"}):y("ul",{className:"sc-compute",children:a.route_allow.map(R=>y("li",{className:Gt.has(R)?"sc-compute-own":void 0,children:Ht[R]??R},R))})]})]}),y("button",{type:"button",className:f?"sc-btn":"sc-btn sc-btn-primary",disabled:f||m!==null,onClick:()=>void d(a),children:f?"Your plan":m===a.id?a.selectable?"Switching\u2026":"Opening\u2026":a.selectable?"Choose":`Subscribe \u2014 $${a.price.toLocaleString()}/${a.interval}`})]},a.id)})}),u&&y("p",{className:"sc-error",children:u})]})}import{useCallback as J,useEffect as Z,useMemo as Ze,useRef as Jt,useState as $}from"react";var Ne=class{#t;#s=null;#n=null;#e;#o=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.#o.add(t),()=>this.#o.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 o=await n(t,{method:"POST",headers:{"content-type":"application/json"},credentials:"same-origin",body:JSON.stringify(this.#e.user?{user:this.#e.user}:{})});if(!o.ok)throw new Error(`Could not start a Soba session (${o.status} from ${t}).`);let s=await o.json(),r=s.session??s.token;if(!r)throw new Error(`${t} answered without a \`session\`. See @soba-so/react's README.`);let m=s.expires_in??s.expiresIn;this.#t=r,this.#s=typeof m=="number"?Date.now()+m*1e3:null;for(let h of this.#o)h();return r})();try{return await this.#n}finally{this.#n=null}}};function vt(e,t=fetch.bind(globalThis)){return async(n,o)=>{let s=await t(n,o);if(s.status!==401||!e.canRefresh)return s;let r;try{r=await e.refresh()}catch{return s}return t(n,Kt(o,r))}}function Kt(e,t){let n=new Headers(e?.headers);return n.set("authorization",`Bearer ${t}`),{...e,headers:n}}var Ct="data-soba-react",wt=!1;function Je(){if(wt||typeof document>"u"||(wt=!0,document.querySelector(`style[${Ct}]`)))return;let e=document.createElement("style");e.setAttribute(Ct,""),e.textContent=`.soba-connect {
   --sc-ground: #ffffff;
   --sc-sheet: #ffffff;
   --sc-raised: #f6f6f7;
@@ -16,6 +16,8 @@ var se=class extends Error{status;constructor(t,n){super(t),this.name="ConnectEr
   --sc-ok: #22a06b;
   --sc-warn: #b06f14;
   --sc-r: 10px;
+  
+  --sc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 
   box-sizing: border-box;
   max-width: 560px;
@@ -236,8 +238,13 @@ a.sc-btn {
   font-size: 14px;
 }
 
+.soba-connect[data-theme="dark"],
+.soba-connect[data-theme="system"] {
+  color-scheme: dark;
+}
+
 @media (prefers-color-scheme: dark) {
-  .soba-connect:not([data-theme="light"]) {
+  .soba-connect[data-theme="system"] {
     --sc-ground: #0f0f11;
     --sc-sheet: #161618;
     --sc-raised: #1d1d20;
@@ -251,6 +258,19 @@ a.sc-btn {
   }
 }
 
+.soba-connect[data-theme="dark"] {
+  --sc-ground: #0f0f11;
+  --sc-sheet: #161618;
+  --sc-raised: #1d1d20;
+  --sc-line: #26262a;
+  --sc-line-2: #34343a;
+  --sc-text: #f2f2f3;
+  --sc-text-2: #c9c9cd;
+  --sc-muted: #8d8d95;
+  --sc-accent: #f2f2f3;
+  --sc-accent-fg: #131316;
+}
+
 .sc-plans {
   display: grid;
   gap: 12px;
@@ -374,4 +394,187 @@ a.sc-btn {
   border-bottom: 1px solid var(--sc-line, #e9e9eb);
   margin-bottom: 2px;
 }
-`,document.head.appendChild(e)}import{jsx as Se}from"react/jsx-runtime";var pt="https://www.soba.so",dt=15e3;function mt(e){let{children:t,session:n,sessionEndpoint:c,user:s,runEndpoint:r,initialMachines:u,initialConnect:p=null,initialPlans:d,initialCurrentPlan:y=null,baseUrl:S=pt,pollMs:o=dt,injectStyles:f=!0,fetchImpl:b,onError:te}=e,[C,ne]=R(n??null),[v,le]=R(null),[P,M]=R(p),[U,T]=R(null),[J,D]=R(p===null),[q,ue]=R(u??[]),[Y,B]=R(null),[l,E]=R(u===void 0),[w,G]=R(d??[]),[z,K]=R(y),[Ne,pe]=R(null),[Pe,Ee]=R(d===void 0),ke=ut(te);ke.current=te;let Q=F(i=>{le(i),ke.current?.(i)},[]);j(()=>{f&&we()},[f]);let k=xe(()=>new ce({...n?{token:n}:{},...c?{endpoint:c}:{},...s?{user:s}:{},...b?{fetchImpl:b}:{}}),[n,c,s,b]);j(()=>{let i=!0,x=k.subscribe(()=>{i&&ne(k.token)});return!k.token&&!k.canRefresh?Q(new Error("<SobaProvider> needs a `session` or a `sessionEndpoint`. A browser cannot mint one: that takes your secret key.")):k.ensure().then(()=>i&&ne(k.token),O=>i&&Q(O)),()=>{i=!1,x()}},[k,Q]),j(()=>{v&&(D(!1),E(!1),Ee(!1),T(i=>i??v),B(i=>i??v),pe(i=>i??v))},[v]),j(()=>{let i=k.refreshAt;if(i===null)return;let x=setTimeout(()=>{k.refresh().catch(O=>Q(O))},Math.max(0,i-Date.now()));return()=>clearTimeout(x)},[k,Q,C]);let m=xe(()=>C?new Z({session:C,baseUrl:S,fetchImpl:Ge(k,b??fetch.bind(globalThis))}):null,[C,S,k,b]);j(()=>{if(!m)return;let i=!0;return D(!0),m.context().then(x=>{i&&(M(x),T(null),D(!1))},x=>{i&&(T(x),D(!1))}),()=>{i=!1}},[m]);let X=F(async()=>{if(m)try{let i=await m.machines();ue(i),B(null)}catch(i){B(i)}finally{E(!1)}},[m]),I=F(async()=>{if(m)try{let i=await m.plans();G(i.plans),K(i.current),pe(null)}catch(i){pe(i)}finally{Ee(!1)}},[m]);j(()=>{m&&I()},[m,I]);let _e=F(async i=>{if(!m)throw new Error("No session yet.");await m.selectPlan(i),await I()},[m,I]),Re=F(async(i,x)=>{if(!m)throw new Error("No session yet.");let O=await m.checkoutPlan(i,x);if(!O.url)throw new Error("Checkout could not be started.");return O.url},[m]),Te=F(async()=>{if(!m)throw new Error("No session yet.");await m.leavePlan(),await I()},[m,I]);j(()=>{if(!m)return;let i=!0;X();let x=setInterval(()=>{typeof document<"u"&&document.hidden||i&&X()},o);return()=>{i=!1,clearInterval(x)}},[m,X,o]);let Me=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:x,...O}=i,de=await(b??fetch.bind(globalThis))(r,{method:"POST",headers:{"content-type":"application/json",accept:"text/event-stream"},credentials:"same-origin",body:JSON.stringify(O),...x?{signal:x}:{}});if(!de.ok)throw new Error(`${r} answered ${de.status}.`);return Ce(de)},[r,b]),We=xe(()=>({session:C,client:m,error:v,plan:{plans:w,current:z,plan:z?w.find(i=>i.id===z.plan_id)??null:null,loading:Pe,error:Ne,select:_e,checkout:Re,leave:Te,refresh:I},compute:{machines:q,connected:q.length>0,online:q.some(i=>i.state!=="offline"),loading:l,error:Y,refresh:X},connect:{app:P?.app??null,command:P?.command??null,publishableKey:P?.publishable_key??null,loading:J,error:U},run:Me}),[C,m,v,q,l,Y,X,w,z,Pe,Ne,_e,Re,Te,I,P,J,U,Me]);return Se(be.Provider,{value:m,children:Se(ve.Provider,{value:{context:P,machines:l?void 0:q},children:Se(ye.Provider,{value:We,children:t})})})}export{Ze as ComputeStatus,et as ConnectCompute,st as SobaCheckout,it as SobaPlans,mt as SobaProvider,nt as collectText,we as injectStyles,ae as parseEvent,Ce as readEvents,A as useSoba};
+
+.sc-modal {
+  
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+  margin: 0;
+  padding: 16px;
+  border: 0;
+  background: transparent;
+  overflow: auto;
+  
+  display: grid;
+  place-items: center;
+}
+
+.sc-modal::backdrop {
+  background: rgb(15 15 17 / 55%);
+}
+
+.sc-modal-sheet {
+  position: relative;
+  width: 100%;
+  
+  max-width: 420px;
+  background: var(--sc-sheet, #ffffff);
+  border: 1.5px solid var(--sc-line, #e9e9eb);
+  border-radius: 14px;
+  box-shadow: 0 24px 60px -12px rgb(15 15 17 / 22%);
+  
+  outline: none;
+}
+
+.sc-modal-close {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  z-index: 1;
+  border: 0;
+  background: transparent;
+  color: var(--sc-muted, #6b6b73);
+  font: inherit;
+  font-size: 20px;
+  line-height: 1;
+  padding: 4px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.sc-modal-close:hover {
+  background: var(--sc-raised, #f6f6f7);
+  color: var(--sc-text, #1a1a1c);
+}
+
+.sc-modal-sheet .sc-card {
+  padding: 26px 24px 22px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.sc-modal-foot {
+  padding: 11px 14px;
+  border-top: 1.5px solid var(--sc-line, #e9e9eb);
+  text-align: center;
+  font-size: 12.5px;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-mark {
+  width: 44px;
+  height: 44px;
+  margin: 0 auto 14px;
+  border-radius: 11px;
+  
+  background: var(--sc-accent, #18181b);
+  display: grid;
+  place-items: center;
+}
+
+.sc-mark svg {
+  width: 24px;
+  height: 24px;
+  color: var(--sc-accent-fg, #ffffff);
+}
+
+.sc-h {
+  font-size: 19px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin: 0;
+  text-align: center;
+}
+
+.sc-p {
+  font-size: 14px;
+  color: var(--sc-muted, #6b6b73);
+  margin: 7px auto 0;
+  max-width: 40ch;
+  text-align: center;
+}
+
+.sc-opts {
+  display: grid;
+  gap: 10px;
+  margin-top: 20px;
+  text-align: left;
+}
+
+.sc-opt {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 12px 14px;
+  border: 1.5px solid var(--sc-line-2, #dcdce0);
+  border-radius: 9px;
+  background: var(--sc-sheet, #ffffff);
+  color: var(--sc-text, #1a1a1c);
+  font: inherit;
+  font-size: 14.5px;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+
+.sc-opt:hover {
+  background: var(--sc-raised, #f6f6f7);
+}
+
+.sc-opt[aria-pressed="true"] {
+  border-color: var(--sc-accent, #18181b);
+}
+
+.sc-opt-mark {
+  width: 17px;
+  height: 17px;
+  flex: none;
+  
+  color: currentColor;
+}
+
+.sc-opt-label {
+  min-width: 0;
+}
+
+.sc-opt-last {
+  margin-left: auto;
+  flex: none;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--sc-muted, #6b6b73);
+  background: var(--sc-raised, #f6f6f7);
+  border-radius: 5px;
+  padding: 3px 7px;
+}
+
+.sc-btn-quiet {
+  border-color: transparent;
+  background: transparent;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-btn-quiet:hover {
+  background: var(--sc-raised, #f6f6f7);
+  color: var(--sc-text, #1a1a1c);
+}
+
+.sc-btn-connected {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  font-family: var(--sc-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 13px;
+}
+
+.sc-btn-connected .sc-dot {
+  flex: none;
+}
+`,document.head.appendChild(e)}import{jsx as Ye}from"react/jsx-runtime";var Zt="https://www.soba.so",Yt=15e3;function Xt(e){let{children:t,session:n,sessionEndpoint:o,user:s,runEndpoint:r,theme:m,initialMachines:h,initialConnect:u=null,initialPlans:v,initialCurrentPlan:d=null,baseUrl:a=Zt,pollMs:f=Yt,injectStyles:R=!0,fetchImpl:w,onError:T}=e,[x,I]=$(n??null),[N,Y]=$(null),[g,B]=$(u),[j,U]=$(null),[V,q]=$(u===null),[H,ke]=$(h??[]),[K,ae]=$(null),[ie,fe]=$(h===void 0),[X,Se]=$(v??[]),[Q,ee]=$(d),[te,ce]=$(null),[ge,be]=$(v===void 0),le=Jt(T);le.current=T;let D=J(l=>{Y(l),le.current?.(l)},[]);Z(()=>{R&&Je()},[R]);let S=Ze(()=>new Ne({...n?{token:n}:{},...o?{endpoint:o}:{},...s?{user:s}:{},...w?{fetchImpl:w}:{}}),[n,o,s,w]);Z(()=>{let l=!0,k=S.subscribe(()=>{l&&I(S.token)});return!S.token&&!S.canRefresh?D(new Error("<SobaProvider> needs a `session` or a `sessionEndpoint`. A browser cannot mint one: that takes your secret key.")):S.ensure().then(()=>l&&I(S.token),A=>l&&D(A)),()=>{l=!1,k()}},[S,D]),Z(()=>{N&&(q(!1),fe(!1),be(!1),U(l=>l??N),ae(l=>l??N),ce(l=>l??N))},[N]),Z(()=>{let l=S.refreshAt;if(l===null)return;let k=setTimeout(()=>{S.refresh().catch(A=>D(A))},Math.max(0,l-Date.now()));return()=>clearTimeout(k)},[S,D,x]);let p=Ze(()=>x?new de({session:x,baseUrl:a,fetchImpl:vt(S,w??fetch.bind(globalThis))}):null,[x,a,S,w]);Z(()=>{if(!p)return;let l=!0;return q(!0),p.context().then(k=>{l&&(B(k),U(null),q(!1))},k=>{l&&(U(k),q(!1))}),()=>{l=!1}},[p]);let E=J(async()=>{if(p)try{let l=await p.machines();ke(l),ae(null)}catch(l){ae(l)}finally{fe(!1)}},[p]),F=J(async()=>{if(p)try{let l=await p.plans();Se(l.plans),ee(l.current),ce(null)}catch(l){ce(l)}finally{be(!1)}},[p]);Z(()=>{p&&F()},[p,F]);let ue=J(async l=>{if(!p)throw new Error("No session yet.");await p.selectPlan(l),await F()},[p,F]),i=J(async(l,k)=>{if(!p)throw new Error("No session yet.");let A=await p.checkoutPlan(l,k);if(!A.url)throw new Error("Checkout could not be started.");return A.url},[p]),C=J(async()=>{if(!p)throw new Error("No session yet.");await p.leavePlan(),await F()},[p,F]);Z(()=>{if(!p)return;let l=!0;E();let k=setInterval(()=>{typeof document<"u"&&document.hidden||l&&E()},f);return()=>{l=!1,clearInterval(k)}},[p,E,f]);let P=J(async l=>{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:k,...A}=l,Pe=await(w??fetch.bind(globalThis))(r,{method:"POST",headers:{"content-type":"application/json",accept:"text/event-stream"},credentials:"same-origin",body:JSON.stringify(A),...k?{signal:k}:{}});if(!Pe.ok)throw new Error(`${r} answered ${Pe.status}.`);return Ke(Pe)},[r,w]),ne=Ze(()=>({session:x,client:p,error:N,plan:{plans:X,current:Q,plan:Q?X.find(l=>l.id===Q.plan_id)??null:null,loading:ge,error:te,select:ue,checkout:i,leave:C,refresh:F},compute:{machines:H,connected:H.length>0,online:H.some(l=>l.state!=="offline"),loading:ie,error:K,refresh:E},connect:{app:g?.app??null,command:g?.command??null,publishableKey:g?.publishable_key??null,loading:V,error:j},run:P}),[x,p,N,H,ie,K,E,X,Q,ge,te,ue,i,C,F,g,V,j,P]);return Ye(Fe.Provider,{value:p,children:Ye(je.Provider,{value:{context:g,machines:ie?void 0:H,theme:m??g?.theme??"light"},children:Ye(De.Provider,{value:ne,children:t})})})}export{Ot as ComputeStatus,ze as ConnectButton,qt as ConnectCompute,He as ConnectModal,jt as SobaCheckout,zt as SobaPlans,Xt as SobaProvider,Ft as collectText,Je as injectStyles,we as parseEvent,Ke as readEvents,_ as useSoba};

package/dist/styles.css

@@ -12,6 +12,8 @@
   --sc-ok: #22a06b;
   --sc-warn: #b06f14;
   --sc-r: 10px;
+  
+  --sc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 
   box-sizing: border-box;
   max-width: 560px;
@@ -232,8 +234,13 @@ a.sc-btn {
   font-size: 14px;
 }
 
+.soba-connect[data-theme="dark"],
+.soba-connect[data-theme="system"] {
+  color-scheme: dark;
+}
+
 @media (prefers-color-scheme: dark) {
-  .soba-connect:not([data-theme="light"]) {
+  .soba-connect[data-theme="system"] {
     --sc-ground: #0f0f11;
     --sc-sheet: #161618;
     --sc-raised: #1d1d20;
@@ -247,6 +254,19 @@ a.sc-btn {
   }
 }
 
+.soba-connect[data-theme="dark"] {
+  --sc-ground: #0f0f11;
+  --sc-sheet: #161618;
+  --sc-raised: #1d1d20;
+  --sc-line: #26262a;
+  --sc-line-2: #34343a;
+  --sc-text: #f2f2f3;
+  --sc-text-2: #c9c9cd;
+  --sc-muted: #8d8d95;
+  --sc-accent: #f2f2f3;
+  --sc-accent-fg: #131316;
+}
+
 .sc-plans {
   display: grid;
   gap: 12px;
@@ -370,3 +390,186 @@ a.sc-btn {
   border-bottom: 1px solid var(--sc-line, #e9e9eb);
   margin-bottom: 2px;
 }
+
+.sc-modal {
+  
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+  margin: 0;
+  padding: 16px;
+  border: 0;
+  background: transparent;
+  overflow: auto;
+  
+  display: grid;
+  place-items: center;
+}
+
+.sc-modal::backdrop {
+  background: rgb(15 15 17 / 55%);
+}
+
+.sc-modal-sheet {
+  position: relative;
+  width: 100%;
+  
+  max-width: 420px;
+  background: var(--sc-sheet, #ffffff);
+  border: 1.5px solid var(--sc-line, #e9e9eb);
+  border-radius: 14px;
+  box-shadow: 0 24px 60px -12px rgb(15 15 17 / 22%);
+  
+  outline: none;
+}
+
+.sc-modal-close {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  z-index: 1;
+  border: 0;
+  background: transparent;
+  color: var(--sc-muted, #6b6b73);
+  font: inherit;
+  font-size: 20px;
+  line-height: 1;
+  padding: 4px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.sc-modal-close:hover {
+  background: var(--sc-raised, #f6f6f7);
+  color: var(--sc-text, #1a1a1c);
+}
+
+.sc-modal-sheet .sc-card {
+  padding: 26px 24px 22px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.sc-modal-foot {
+  padding: 11px 14px;
+  border-top: 1.5px solid var(--sc-line, #e9e9eb);
+  text-align: center;
+  font-size: 12.5px;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-mark {
+  width: 44px;
+  height: 44px;
+  margin: 0 auto 14px;
+  border-radius: 11px;
+  
+  background: var(--sc-accent, #18181b);
+  display: grid;
+  place-items: center;
+}
+
+.sc-mark svg {
+  width: 24px;
+  height: 24px;
+  color: var(--sc-accent-fg, #ffffff);
+}
+
+.sc-h {
+  font-size: 19px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin: 0;
+  text-align: center;
+}
+
+.sc-p {
+  font-size: 14px;
+  color: var(--sc-muted, #6b6b73);
+  margin: 7px auto 0;
+  max-width: 40ch;
+  text-align: center;
+}
+
+.sc-opts {
+  display: grid;
+  gap: 10px;
+  margin-top: 20px;
+  text-align: left;
+}
+
+.sc-opt {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 12px 14px;
+  border: 1.5px solid var(--sc-line-2, #dcdce0);
+  border-radius: 9px;
+  background: var(--sc-sheet, #ffffff);
+  color: var(--sc-text, #1a1a1c);
+  font: inherit;
+  font-size: 14.5px;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+
+.sc-opt:hover {
+  background: var(--sc-raised, #f6f6f7);
+}
+
+.sc-opt[aria-pressed="true"] {
+  border-color: var(--sc-accent, #18181b);
+}
+
+.sc-opt-mark {
+  width: 17px;
+  height: 17px;
+  flex: none;
+  
+  color: currentColor;
+}
+
+.sc-opt-label {
+  min-width: 0;
+}
+
+.sc-opt-last {
+  margin-left: auto;
+  flex: none;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--sc-muted, #6b6b73);
+  background: var(--sc-raised, #f6f6f7);
+  border-radius: 5px;
+  padding: 3px 7px;
+}
+
+.sc-btn-quiet {
+  border-color: transparent;
+  background: transparent;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-btn-quiet:hover {
+  background: var(--sc-raised, #f6f6f7);
+  color: var(--sc-text, #1a1a1c);
+}
+
+.sc-btn-connected {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  font-family: var(--sc-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 13px;
+}
+
+.sc-btn-connected .sc-dot {
+  flex: none;
+}

package/dist/types.d.ts

@@ -22,6 +22,18 @@ export interface Runtime {
      */
     authenticated: boolean | null;
     auth_hint: string | null;
+    /**
+     * A runtime that appeared on a machine that was ALREADY paired, so it waits
+     * for the person to say so — what arrived with the pairing was approved by
+     * the pairing, and this did not.
+     *
+     * Optional, which is how it went missing from this copy: `types-parity.ts`
+     * compares the two shapes both ways, and an interface with an extra OPTIONAL
+     * property still extends one without it, in both directions. So the guard
+     * passes on a drift of exactly this kind. Worth knowing before trusting it.
+     */
+    quarantined?: boolean;
+    first_seen_at?: string;
 }
 export interface Machine {
     id: string;
@@ -50,7 +62,17 @@ export interface PendingCode {
     denied: boolean;
 }
 /** Everything the approval page needs, in one request. */
+export type ConnectTheme = "light" | "dark" | "system";
 export interface ConnectContext {
+    /**
+     * How this app wants the component to look, set on its Settings page.
+     *
+     * Light unless the app says otherwise, and `system` is the opt-in — a
+     * component inside somebody else's page should not follow the reader's OS
+     * into dark on its own. Optional so an older server that does not send it
+     * still parses.
+     */
+    theme?: ConnectTheme;
     app: {
         name: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soba-so/react",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Connect the AI your users already pay for, from your own React app.",
   "license": "UNLICENSED",
   "homepage": "https://soba.so/docs/components",
@@ -19,18 +19,13 @@
     "!dist/**/*.map",
     "README.md"
   ],
-  "scripts": {
-    "build": "node ../../scripts/build-react.mjs",
-    "typecheck": "tsc -p tsconfig.json",
-    "prepublishOnly": "node ../../scripts/build-react.mjs"
-  },
   "peerDependencies": {
     "react": ">=18"
   },
   "devDependencies": {
-    "@soba-so/connect-ui": "workspace:*",
     "@types/react": "^19.0.0",
-    "typescript": "^7.0.2"
+    "typescript": "^7.0.2",
+    "@soba-so/connect-ui": "0.1.0"
   },
   "engines": {
     "node": ">=22"
@@ -44,5 +39,9 @@
   ],
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "node ../../scripts/build-react.mjs",
+    "typecheck": "tsc -p tsconfig.json"
   }
-}
+}