@soba-so/react 0.0.5

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright © 2026 Soba. All rights reserved.
+
+This software is licensed, not sold, and it is not open source.
+
+Subject to your agreement with Soba, you are granted a non-exclusive,
+non-transferable, non-sublicensable, revocable licence to install this package
+and use it in your own applications for the sole purpose of interfacing with
+the Soba service.
+
+You may not redistribute it, publish it, sell it, sublicense it, incorporate it
+into another distributed library, or create and distribute derivative works of
+it. No rights are granted in the Soba name or logo.
+
+This software is provided "as is", without warranty of any kind, express or
+implied. To the maximum extent permitted by law, Soba shall not be liable for
+any claim, damages or other liability arising from the software or its use.
+
+Nothing here limits any right you have that cannot be limited by the law that
+applies to you.

package/README.md

@@ -0,0 +1,151 @@
+# @soba-so/react
+
+**Let your users bring the AI they already pay for, from your own React app.**
+
+```jsx
+import { SobaProvider, ConnectCompute, ComputeStatus } from "@soba-so/react"
+
+<SobaProvider sessionEndpoint="/api/soba/session" user={session.user.id}>
+  <ConnectCompute />
+  <ComputeStatus />
+</SobaProvider>
+```
+
+Drop that in your settings page. A person pairs their machine once, and their
+Claude Code, Codex or local model starts serving your runs, **with no change at
+your call site**.
+
+## The one thing your server has to do
+
+A browser cannot mint a Soba session: that takes your `sk_soba_` secret key, and
+that key can start runs and read every user's usage. So the provider asks a route
+of **yours** for a short-lived, single-user credential, the way Stripe's
+ephemeral keys work.
+
+```ts
+// app/api/soba/session/route.ts
+export async function POST() {
+  const session = await auth()                      // your auth, your rules
+  const res = await fetch("https://www.soba.so/v1/end_users/session", {
+    method: "POST",
+    headers: {
+      authorization: `Bearer ${process.env.SOBA_KEY}`,
+      "content-type": "application/json",
+    },
+    body: JSON.stringify({ user: session.user.id }),
+  })
+  return Response.json(await res.json())
+}
+```
+
+That is the whole integration. `user` is the same id you pass on a run, which is
+what makes the person whose machine this is and the person a run is attributed to
+the same row.
+
+The session lives ten minutes. A settings page left open for an hour is the
+ordinary case, so the provider refreshes it before it expires **and** heals a
+request that meets a dead one: a 401 mints a new session and retries once, for
+every component in the tree.
+
+If you would rather mint it yourself, pass `session` instead. It cannot be
+refreshed, and the provider says so rather than failing quietly at minute eleven.
+
+## The components
+
+### `<ConnectCompute />`
+
+The connect step, and the component that carries the real friction. It asks which
+compute they have, shows the one command to run on the machine they want to use,
+takes the short code that command prints, and then **waits for the machine to
+actually appear**.
+
+That last part is the whole design. A pairing that never dials the gateway looks
+exactly like a successful one right up until the first run fails, so the panel
+does not stop at "approved". Detected, not asserted.
+
+Nothing is ever pasted back. The credential is written straight to that machine,
+at `~/.soba/worker.json`, and neither this component nor your app ever sees it.
+
+### `<ComputeStatus />`
+
+The component with no equivalent in an auth product. When the compute is
+someone's own laptop, the state of that laptop is user-facing: asleep, offline,
+signed out of its CLI, or serving a run right now are all things only the person
+in front of it can fix, so all of them are shown.
+
+`authenticated` stays **tri-state** all the way to the screen. `true` is signed
+in, `false` is a positive finding that it is signed out, and `null` means we could
+not tell. Rendering the third as the second tells someone their working setup is
+broken.
+
+Several of these on one page is still one request: they read the provider's
+polling rather than starting their own, and a hidden tab does not poll at all.
+
+## The hook
+
+```js
+const { compute, connect, run, client, session } = useSoba()
+```
+
+| | |
+|---|---|
+| `compute` | `machines`, `connected`, `online`, `loading`, `error`, `refresh()` |
+| `connect` | `app`, `command`, `publishableKey` |
+| `run` | Start a run through your own endpoint and read its events |
+| `client` | The framework-free API underneath, for anything the hook does not cover |
+
+`connected` means they have paired something. `online` means something of theirs
+could serve a run right now. They are different questions and a UI usually needs
+both.
+
+## Runs from the browser
+
+A run is started by **your** server, because starting one takes your secret key.
+Point the provider at a route that does it, and the hook will read the stream:
+
+```ts
+// app/api/soba/run/route.ts
+import { Soba } from "@soba-so/sdk"
+
+export async function POST(request: Request) {
+  const session = await auth()
+  const soba = new Soba({ apiKey: process.env.SOBA_KEY })
+  const run = await soba.run({ user: session.user.id, ...(await request.json()) })
+  return new Response(toSSE(run), { headers: { "content-type": "text/event-stream" } })
+}
+```
+
+```jsx
+const { run } = useSoba()
+const events = await run({ prompt: "Summarise everything I saved this week" })
+for await (const event of events) {
+  if (event.type === "delta") append(event.text)
+}
+```
+
+Only the five frozen event types reach the browser. A tool call never does: your
+server already executed it, against the data it already touches.
+
+## Styling
+
+The stylesheet injects itself once, so there is no import to get wrong in an RSC
+tree. Everything is scoped under `.soba-connect` with no element selectors and no
+assumed reset, and every colour is a custom property you can redefine:
+
+```css
+.soba-connect {
+  --sc-accent: #1a1a1c;
+  --sc-r: 6px;
+}
+```
+
+Pass `injectStyles={false}` to the provider and import `@soba-so/react/styles.css`
+yourself if you would rather own it.
+
+## Requirements
+
+React 18 or newer, as a peer dependency. No other runtime dependencies. The
+package is a client component: it carries its own `"use client"`, so it works in
+a Next app router tree without a wrapper.
+
+© 2026 Soba. All rights reserved. Licensed for use with the Soba service; see LICENSE.

package/dist/ComputeStatus.d.ts

@@ -0,0 +1,15 @@
+export interface ComputeStatusProps {
+    className?: string;
+}
+/**
+ * What this person has connected, and what it is doing right now.
+ *
+ * The component with no equivalent in an auth product. When the compute is
+ * someone's own laptop, the state of that laptop is user-facing: asleep,
+ * offline, signed out of its CLI or serving a run are all things only the
+ * person in front of it can do anything about, so all of them are shown.
+ *
+ * It reads the provider's polling rather than starting its own, so three of
+ * these on one page is still one request.
+ */
+export declare function ComputeStatus({ className }: ComputeStatusProps): import("react").JSX.Element;

package/dist/ConnectCompute.d.ts

@@ -0,0 +1,21 @@
+import type { Machine } from "./types.js";
+export interface ConnectComputeProps {
+    /** From `?code=` when they arrived from a terminal that already has one. */
+    initialCode?: string;
+    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. */
+    showStatus?: boolean;
+}
+/**
+ * The connect step, and the component that carries the real friction.
+ *
+ * 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.
+ *
+ * This is the same panel the hosted page uses. The only difference is where the
+ * session comes from, which is what <SobaProvider> is for.
+ */
+export declare function ConnectCompute({ initialCode, onConnected, className, showStatus, }: ConnectComputeProps): import("react").JSX.Element;

package/dist/SobaCheckout.d.ts

@@ -0,0 +1,28 @@
+import type { Plan } from "./types.js";
+export interface SobaCheckoutProps {
+    /** The plan to buy. A free one is refused by the endpoint — use `<SobaPlans />`,
+     *  which routes free and priced plans to the right place on its own. */
+    plan: Plan;
+    /** Where Stripe returns on success. Defaults to the page they are on, which
+     *  is right for a settings page and wrong for a landing page. */
+    successUrl?: string;
+    cancelUrl?: string;
+    /** Override the button's words. The default names the plan and its price,
+     *  because a button that says "Subscribe" makes the reader look back up. */
+    label?: string;
+    className?: string;
+}
+/**
+ * THE BUY BUTTON, and everything it deliberately does not do.
+ *
+ * It creates a Checkout Session and navigates. It does not take a card number,
+ * it never sees one, and it grants nothing: the entitlement is written by
+ * Stripe's webhook when the money actually moves. That split is the whole
+ * security model — a component that granted the plan on redirect would hand one
+ * to anyone who could reach the URL and close the tab.
+ *
+ * The payment lands on the APP's own Stripe account, with Soba's fee taken off
+ * the top. Their user sees their name on the statement, because they are the
+ * merchant; Soba is the rail underneath.
+ */
+export declare function SobaCheckout({ plan, successUrl, cancelUrl, label, className }: SobaCheckoutProps): import("react").JSX.Element;

package/dist/SobaPlans.d.ts

@@ -0,0 +1,35 @@
+import type { Plan } from "./types.js";
+export interface SobaPlansProps {
+    /**
+     * Handle a priced plan yourself instead of using Soba's checkout.
+     *
+     * The default is to send them to Stripe — the app's own connected account,
+     * with Soba's fee off the top. Pass this only when you already have billing
+     * and want Soba to stay out of the money: you take the payment, then your
+     * server puts the user on the plan.
+     */
+    onSelect?: (plan: Plan) => void;
+    /** Where Stripe returns after a successful payment. Defaults to this page. */
+    successUrl?: string;
+    cancelUrl?: string;
+    /** Hide the compute row. It is shown by default because on this product the
+     *  plan decides which compute a run reaches, which is the differentiator. */
+    showCompute?: boolean;
+    className?: string;
+}
+/**
+ * THE PRICE LIST, rendered from the plans themselves.
+ *
+ * `docs/components.md`: "Prices, allowances and the connected reward all come
+ * from the plan objects, so a pricing change is not a deploy." That is the whole
+ * design. Nothing here is configured in the app — the cards are whatever
+ * `/v1/plans` returns, so editing a plan in the dashboard changes this page.
+ *
+ * What makes it worth shipping rather than leaving to every app's own markup is
+ * the compute row. A plan here does not only decide what someone is charged; it
+ * decides WHICH COMPUTE their runs may reach, and that is the thing a person
+ * choosing between two plans most needs to see. It is also the thing an app
+ * would have to hand-maintain in a second place, and get wrong the first time
+ * the plan changed.
+ */
+export declare function SobaPlans({ onSelect, successUrl, cancelUrl, showCompute, className, }: SobaPlansProps): import("react").JSX.Element;

package/dist/SobaProvider.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+export interface SobaProviderProps {
+    children: ReactNode;
+    /**
+     * An `est_` session you minted on your server. Cannot be refreshed, so prefer
+     * `sessionEndpoint` for anything a person leaves open.
+     */
+    session?: string;
+    /**
+     * Your own route. The provider POSTs `{ user }` to it with your cookies, and
+     * expects `{ session, expires_in }` back. Four lines on your server:
+     *
+     * ```ts
+     * const res = await fetch("https://www.soba.so/v1/end_users/session", {
+     *   method: "POST",
+     *   headers: { authorization: `Bearer ${process.env.SOBA_KEY}` },
+     *   body: JSON.stringify({ user: session.user.id }),
+     * })
+     * return Response.json(await res.json())
+     * ```
+     */
+    sessionEndpoint?: string;
+    /** The same id you pass as `user` on a run. It is what makes the person whose
+     *  machine this is and the person a run is attributed to the same row. */
+    user?: string;
+    /** Your route that starts a run with `@soba-so/sdk` and forwards the stream. */
+    runEndpoint?: string;
+    baseUrl?: string;
+    pollMs?: number;
+    /** The stylesheet injects itself once. Turn it off to ship your own. */
+    injectStyles?: boolean;
+    fetchImpl?: typeof fetch;
+    onError?: (error: Error) => void;
+}
+/**
+ * Holds the one thing everything else needs: a live session for one of your
+ * users. Everything below it, component or hook, reads from here.
+ */
+export declare function SobaProvider(props: SobaProviderProps): import("react").JSX.Element;

package/dist/context.d.ts

@@ -0,0 +1,82 @@
+import type { AgentEvent, ConnectApi, CurrentPlan, Machine, Message, Plan } from "./types.js";
+/** What your endpoint is asked for. Everything but `signal` is forwarded to it
+ *  verbatim, because the run's shape is `soba.run()`'s and yours to widen. */
+export interface RunRequest {
+    prompt?: string;
+    messages?: Message[];
+    model?: string;
+    system?: string;
+    signal?: AbortSignal;
+    [key: string]: unknown;
+}
+export interface ComputeState {
+    /** Every machine this person has paired, in whatever state it is in. */
+    machines: Machine[];
+    /** They have paired something. It may still be asleep. */
+    connected: boolean;
+    /** Something of theirs could serve a run right now. */
+    online: boolean;
+    loading: boolean;
+    error: Error | null;
+    refresh(): Promise<void>;
+}
+export interface ConnectState {
+    /** Your app's name, as the person connecting will see it. */
+    app: {
+        name: string;
+    } | null;
+    /** The exact command to run on the machine being paired. */
+    command: string | null;
+    publishableKey: string | null;
+    loading: boolean;
+    error: Error | null;
+}
+/**
+ * The plans this app sells, and the one this user is on.
+ *
+ * `docs/components.md` lists `plan` beside `compute` and `connect` as "the
+ * user's current plan, allowance and usage", and it belongs there for the same
+ * reason `compute` does: on this product the plan decides which COMPUTE a run
+ * may reach, so it is user-facing in a way a subscription tier usually is not.
+ */
+export interface PlanState {
+    /** Everything the app sells, cheapest first. */
+    plans: Plan[];
+    /** The user's assignment, or null when they are on no plan. */
+    current: CurrentPlan | null;
+    /** The plan object behind `current`, resolved for convenience. */
+    plan: Plan | null;
+    loading: boolean;
+    error: Error | null;
+    /** Take a plan. A priced one rejects with `payment_required`; send it to
+     *  `checkout` instead, which is what `<SobaCheckout />` does. */
+    select(planId: string): Promise<void>;
+    /**
+     * Start a Stripe checkout for a priced plan and return where to send the
+     * person. Nothing is granted by this call — the entitlement is written when
+     * Stripe reports the payment, so a caller that navigates and never comes back
+     * still gets what they paid for, and one that never pays gets nothing.
+     */
+    checkout(planId: string, urls?: {
+        successUrl?: string;
+        cancelUrl?: string;
+    }): Promise<string>;
+    /** Leave the current plan; the ceiling falls back to the environment's. */
+    leave(): Promise<void>;
+    refresh(): Promise<void>;
+}
+export interface SobaContextValue {
+    /** The `est_` session, once there is one. */
+    session: string | null;
+    /** The framework-free client, for anything the hook does not cover. */
+    client: ConnectApi | null;
+    error: Error | null;
+    compute: ComputeState;
+    connect: ConnectState;
+    plan: PlanState;
+    /** Start a run through YOUR endpoint and read its events. Throws when the
+     *  provider was given no `runEndpoint`, since a browser cannot start one. */
+    run(request: RunRequest): Promise<AsyncIterable<AgentEvent>>;
+}
+export declare const SobaContext: import("react").Context<SobaContextValue | null>;
+export declare function useSoba(): SobaContextValue;

package/dist/events.d.ts

@@ -0,0 +1,7 @@
+import type { AgentEvent } from "./types.js";
+export declare function parseEvent(raw: string): AgentEvent | null;
+/** Server-sent events off a response body. Also reads newline-delimited JSON,
+ *  since a hand-written proxy route usually forwards lines rather than frames. */
+export declare function readEvents(response: Response): AsyncGenerator<AgentEvent>;
+/** Everything a run said, for a caller that only wants the answer. */
+export declare function collectText(events: AsyncIterable<AgentEvent>): Promise<string>;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { ComputeStatus, type ComputeStatusProps } from "./ComputeStatus.js";
+export { ConnectCompute, type ConnectComputeProps } from "./ConnectCompute.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";
+export { SobaPlans, type SobaPlansProps } from "./SobaPlans.js";
+export { SobaProvider, type SobaProviderProps } from "./SobaProvider.js";
+export { injectStyles } from "./styles.js";
+export type { AgentEvent, AgentEventType, ConnectApi, ConnectContext, CostClass, CurrentPlan, Machine, MachineState, Message, PendingCode, Plan, Runtime, RunUsage, } from "./types.js";

package/dist/index.mjs

@@ -0,0 +1,306 @@
+"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 {
+  --sc-ground: #ffffff;
+  --sc-sheet: #ffffff;
+  --sc-raised: #f6f6f7;
+  --sc-line: #e9e9eb;
+  --sc-line-2: #dcdce0;
+  --sc-text: #1a1a1c;
+  --sc-text-2: #3f3f46;
+  --sc-muted: #6b6b73;
+  --sc-accent: #18181b;
+  --sc-accent-fg: #ffffff;
+  --sc-ok: #22a06b;
+  --sc-warn: #b06f14;
+  --sc-r: 10px;
+
+  box-sizing: border-box;
+  max-width: 560px;
+  margin: 0 auto;
+  color: var(--sc-text);
+  font-family: "Inter", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
+  font-size: 15px;
+  line-height: 1.5;
+  letter-spacing: -0.005em;
+}
+.soba-connect *,
+.soba-connect *::before,
+.soba-connect *::after {
+  box-sizing: inherit;
+}
+
+.sc-card {
+  background: var(--sc-sheet);
+  border: 1px solid var(--sc-line);
+  border-radius: var(--sc-r);
+  padding: 20px;
+}
+.sc-card + .sc-card {
+  margin-top: 12px;
+}
+
+.sc-title {
+  font-size: 20px;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  margin: 0 0 4px;
+}
+.sc-sub {
+  color: var(--sc-muted);
+  margin: 0 0 16px;
+}
+.sc-label {
+  font-size: 13px;
+  color: var(--sc-muted);
+  margin: 0 0 6px;
+  letter-spacing: -0.005em;
+}
+
+.sc-choices {
+  display: grid;
+  gap: 8px;
+}
+.sc-choice {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: var(--sc-sheet);
+  border: 1px solid var(--sc-line-2);
+  border-radius: var(--sc-r);
+  padding: 12px 14px;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+.sc-choice:hover {
+  background: var(--sc-raised);
+}
+.sc-choice[aria-pressed="true"] {
+  border-color: var(--sc-accent);
+  box-shadow: inset 0 0 0 1px var(--sc-accent);
+}
+.sc-choice-title {
+  font-weight: 550;
+}
+.sc-choice-meta {
+  color: var(--sc-muted);
+  font-size: 13px;
+}
+
+.sc-code {
+  display: block;
+  background: var(--sc-raised);
+  border: 1px solid var(--sc-line);
+  border-radius: 8px;
+  padding: 12px 14px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 13px;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.sc-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.sc-row-between {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+}
+.sc-stack {
+  display: grid;
+  gap: 12px;
+}
+
+.sc-btn {
+  font: inherit;
+  font-weight: 550;
+  border-radius: 8px;
+  padding: 9px 14px;
+  border: 1px solid var(--sc-line-2);
+  background: var(--sc-sheet);
+  color: var(--sc-text);
+  cursor: pointer;
+}
+.sc-btn:hover {
+  background: var(--sc-raised);
+}
+
+a.sc-btn {
+  display: inline-block;
+  text-align: center;
+  text-decoration: none;
+}
+.sc-btn-primary {
+  background: var(--sc-accent);
+  color: var(--sc-accent-fg);
+  border-color: var(--sc-accent);
+}
+.sc-btn-primary:hover {
+  opacity: 0.9;
+  background: var(--sc-accent);
+}
+.sc-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.sc-input {
+  font: inherit;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 10px 12px;
+  border: 1px solid var(--sc-line-2);
+  border-radius: 8px;
+  background: var(--sc-sheet);
+  color: inherit;
+  width: 100%;
+}
+
+.sc-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: none;
+  background: var(--sc-muted);
+}
+.sc-dot-ok {
+  background: var(--sc-ok);
+}
+.sc-dot-busy {
+  background: var(--sc-warn);
+}
+.sc-dot-off {
+  background: var(--sc-line-2);
+}
+
+.sc-tone-ok {
+  color: var(--sc-ok);
+}
+.sc-tone-warn {
+  color: var(--sc-warn);
+}
+.sc-tone-unknown {
+  color: var(--sc-muted);
+}
+
+.sc-error {
+  color: var(--sc-warn);
+  font-size: 14px;
+}
+.sc-note {
+  color: var(--sc-muted);
+  font-size: 13px;
+}
+
+.sc-facts {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.sc-fact {
+  display: flex;
+  gap: 10px;
+  font-size: 14px;
+}
+.sc-fact-key {
+  color: var(--sc-muted);
+  min-width: 92px;
+}
+
+.sc-machine {
+  border-top: 1px solid var(--sc-line);
+  padding-top: 12px;
+  margin-top: 12px;
+}
+.sc-machine:first-child {
+  border-top: 0;
+  padding-top: 0;
+  margin-top: 0;
+}
+.sc-runtimes {
+  display: grid;
+  gap: 4px;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+  font-size: 14px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .soba-connect:not([data-theme="light"]) {
+    --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;
+  
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.sc-plan {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 16px;
+  border: 1px solid var(--sc-line, #e5e5e7);
+  border-radius: var(--sc-radius, 10px);
+  background: var(--sc-card, #fff);
+}
+
+.sc-plan-current {
+  border-color: var(--sc-text, #18181b);
+}
+
+.sc-plan-badge {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: var(--sc-text, #18181b);
+  color: var(--sc-card, #fff);
+}
+
+.sc-plan-price {
+  margin: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+}
+
+.sc-plan-amount {
+  font-size: 28px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  
+  font-variant-numeric: tabular-nums;
+}
+
+.sc-plan-interval {
+  font-size: 13px;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-plan .sc-btn {
+  margin-top: auto;
+}
+`,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};

package/dist/session.d.ts

@@ -0,0 +1,60 @@
+/**
+ * THE PIECE THE BROWSER CANNOT DO FOR ITSELF.
+ *
+ * `ConnectClient` takes an `est_` session token and uses it. Nothing in a
+ * browser can MINT one: that takes the app's `sk_soba_` secret key, which must
+ * never leave the customer's server. So this holds a session, asks the
+ * customer's own endpoint for a new one when there is none, and refreshes it
+ * before and after it expires.
+ *
+ * Sessions live ten minutes. A settings page left open for an hour is the
+ * ordinary case, not the edge case, so refresh is not optional: without it every
+ * component in the tree would quietly start failing at minute eleven.
+ *
+ * Framework-free, so the same logic is testable without a renderer.
+ */
+export interface SessionResponse {
+    /** The `est_` token. `session` is the platform's own field name, so a
+     *  customer can proxy `POST /v1/end_users/session` verbatim. */
+    session?: string;
+    /** Seconds. `token` and `expires_in` are accepted as aliases because a
+     *  hand-rolled endpoint tends to invent one of them. */
+    token?: string;
+    expires_in?: number;
+    expiresIn?: number;
+}
+export interface SessionSourceOptions {
+    /** A token you minted yourself. Cannot be refreshed: when it expires, the
+     *  holder reports it rather than pretending. */
+    token?: string;
+    /** Your route. POSTed `{ user }`, expected to answer `{ session, expires_in }`. */
+    endpoint?: string;
+    /** Passed to your endpoint so it knows whose session to mint. */
+    user?: string;
+    fetchImpl?: typeof fetch;
+}
+export declare class SessionHolder {
+    #private;
+    constructor(options: SessionSourceOptions);
+    get token(): string | null;
+    /** When the current token stops working, if the endpoint said. */
+    get expiresAt(): number | null;
+    /** False for a token handed in directly: there is nowhere to get another. */
+    get canRefresh(): boolean;
+    /** When to ask for the next one, or null when there is nothing to schedule. */
+    get refreshAt(): number | null;
+    subscribe(listener: () => void): () => void;
+    /** The token, minting one if there is none. Concurrent callers share a
+     *  request: three components mounting together must not mint three sessions. */
+    ensure(): Promise<string>;
+    refresh(): Promise<string>;
+}
+/**
+ * A `fetch` that heals a dead session.
+ *
+ * `ConnectClient` writes the `Authorization` header itself from the token it was
+ * built with, so a refresh has to rewrite the header on the retry rather than
+ * hope the client picks it up. One retry only: a 401 that survives a fresh
+ * session is a real 401, and retrying it forever would hammer the endpoint.
+ */
+export declare function createSessionFetch(holder: SessionHolder, base?: typeof fetch): typeof fetch;

package/dist/styles.css

@@ -0,0 +1,301 @@
+.soba-connect {
+  --sc-ground: #ffffff;
+  --sc-sheet: #ffffff;
+  --sc-raised: #f6f6f7;
+  --sc-line: #e9e9eb;
+  --sc-line-2: #dcdce0;
+  --sc-text: #1a1a1c;
+  --sc-text-2: #3f3f46;
+  --sc-muted: #6b6b73;
+  --sc-accent: #18181b;
+  --sc-accent-fg: #ffffff;
+  --sc-ok: #22a06b;
+  --sc-warn: #b06f14;
+  --sc-r: 10px;
+
+  box-sizing: border-box;
+  max-width: 560px;
+  margin: 0 auto;
+  color: var(--sc-text);
+  font-family: "Inter", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
+  font-size: 15px;
+  line-height: 1.5;
+  letter-spacing: -0.005em;
+}
+.soba-connect *,
+.soba-connect *::before,
+.soba-connect *::after {
+  box-sizing: inherit;
+}
+
+.sc-card {
+  background: var(--sc-sheet);
+  border: 1px solid var(--sc-line);
+  border-radius: var(--sc-r);
+  padding: 20px;
+}
+.sc-card + .sc-card {
+  margin-top: 12px;
+}
+
+.sc-title {
+  font-size: 20px;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  margin: 0 0 4px;
+}
+.sc-sub {
+  color: var(--sc-muted);
+  margin: 0 0 16px;
+}
+.sc-label {
+  font-size: 13px;
+  color: var(--sc-muted);
+  margin: 0 0 6px;
+  letter-spacing: -0.005em;
+}
+
+.sc-choices {
+  display: grid;
+  gap: 8px;
+}
+.sc-choice {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: var(--sc-sheet);
+  border: 1px solid var(--sc-line-2);
+  border-radius: var(--sc-r);
+  padding: 12px 14px;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+.sc-choice:hover {
+  background: var(--sc-raised);
+}
+.sc-choice[aria-pressed="true"] {
+  border-color: var(--sc-accent);
+  box-shadow: inset 0 0 0 1px var(--sc-accent);
+}
+.sc-choice-title {
+  font-weight: 550;
+}
+.sc-choice-meta {
+  color: var(--sc-muted);
+  font-size: 13px;
+}
+
+.sc-code {
+  display: block;
+  background: var(--sc-raised);
+  border: 1px solid var(--sc-line);
+  border-radius: 8px;
+  padding: 12px 14px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 13px;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.sc-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.sc-row-between {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+}
+.sc-stack {
+  display: grid;
+  gap: 12px;
+}
+
+.sc-btn {
+  font: inherit;
+  font-weight: 550;
+  border-radius: 8px;
+  padding: 9px 14px;
+  border: 1px solid var(--sc-line-2);
+  background: var(--sc-sheet);
+  color: var(--sc-text);
+  cursor: pointer;
+}
+.sc-btn:hover {
+  background: var(--sc-raised);
+}
+
+a.sc-btn {
+  display: inline-block;
+  text-align: center;
+  text-decoration: none;
+}
+.sc-btn-primary {
+  background: var(--sc-accent);
+  color: var(--sc-accent-fg);
+  border-color: var(--sc-accent);
+}
+.sc-btn-primary:hover {
+  opacity: 0.9;
+  background: var(--sc-accent);
+}
+.sc-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.sc-input {
+  font: inherit;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 10px 12px;
+  border: 1px solid var(--sc-line-2);
+  border-radius: 8px;
+  background: var(--sc-sheet);
+  color: inherit;
+  width: 100%;
+}
+
+.sc-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: none;
+  background: var(--sc-muted);
+}
+.sc-dot-ok {
+  background: var(--sc-ok);
+}
+.sc-dot-busy {
+  background: var(--sc-warn);
+}
+.sc-dot-off {
+  background: var(--sc-line-2);
+}
+
+.sc-tone-ok {
+  color: var(--sc-ok);
+}
+.sc-tone-warn {
+  color: var(--sc-warn);
+}
+.sc-tone-unknown {
+  color: var(--sc-muted);
+}
+
+.sc-error {
+  color: var(--sc-warn);
+  font-size: 14px;
+}
+.sc-note {
+  color: var(--sc-muted);
+  font-size: 13px;
+}
+
+.sc-facts {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.sc-fact {
+  display: flex;
+  gap: 10px;
+  font-size: 14px;
+}
+.sc-fact-key {
+  color: var(--sc-muted);
+  min-width: 92px;
+}
+
+.sc-machine {
+  border-top: 1px solid var(--sc-line);
+  padding-top: 12px;
+  margin-top: 12px;
+}
+.sc-machine:first-child {
+  border-top: 0;
+  padding-top: 0;
+  margin-top: 0;
+}
+.sc-runtimes {
+  display: grid;
+  gap: 4px;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+  font-size: 14px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .soba-connect:not([data-theme="light"]) {
+    --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;
+  
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.sc-plan {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 16px;
+  border: 1px solid var(--sc-line, #e5e5e7);
+  border-radius: var(--sc-radius, 10px);
+  background: var(--sc-card, #fff);
+}
+
+.sc-plan-current {
+  border-color: var(--sc-text, #18181b);
+}
+
+.sc-plan-badge {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: var(--sc-text, #18181b);
+  color: var(--sc-card, #fff);
+}
+
+.sc-plan-price {
+  margin: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+}
+
+.sc-plan-amount {
+  font-size: 28px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  
+  font-variant-numeric: tabular-nums;
+}
+
+.sc-plan-interval {
+  font-size: 13px;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-plan .sc-btn {
+  margin-top: auto;
+}

package/dist/styles.d.ts

@@ -0,0 +1 @@
+export declare function injectStyles(): void;

package/dist/types.d.ts

@@ -0,0 +1,155 @@
+/**
+ * THE BROWSER-FACING SHAPES.
+ *
+ * These are the JSON shapes of `GET /v1/machines`, so they are snake_case. That
+ * is deliberate: renaming fields on the way through would make the network tab
+ * and the code disagree about what a thing is called.
+ */
+export type MachineState = "online" | "busy" | "offline";
+export type CostClass = "user-hardware" | "user-subscription" | "open-weights" | "frontier";
+export interface Runtime {
+    id: string;
+    display_name: string;
+    version: string | null;
+    models: string[];
+    cost_class: CostClass;
+    supports_tools: boolean;
+    /**
+     * TRI-STATE, and it stays tri-state all the way to the screen. `true` is
+     * signed in, `false` is a positive finding that it is signed OUT and the one
+     * a person can fix, and `null` means the probe could not tell. Rendering the
+     * third as the second tells someone their working setup is broken.
+     */
+    authenticated: boolean | null;
+    auth_hint: string | null;
+}
+export interface Machine {
+    id: string;
+    label: string | null;
+    platform: string | null;
+    arch: string | null;
+    version: string | null;
+    state: MachineState;
+    active: number;
+    capacity: number;
+    always_on: boolean;
+    last_seen_at: string | null;
+    runtimes: Runtime[];
+}
+/** A device code someone is being asked to approve. */
+export interface PendingCode {
+    user_code: string;
+    client: string | null;
+    hostname: string | null;
+    platform: string | null;
+    arch: string | null;
+    labels: string[];
+    requested_at: string;
+    expires_at: string;
+    approved: boolean;
+    denied: boolean;
+}
+/** Everything the approval page needs, in one request. */
+export interface ConnectContext {
+    app: {
+        name: string;
+    };
+    publishable_key: string | null;
+    /** The link a person pastes into Soba Connect. */
+    connect_url: string | null;
+    /** Retired: always null. There is no pairing command any more. */
+    command: string | null;
+}
+/**
+ * The escape hatch, as an interface rather than the class behind it. Structural
+ * on purpose: you can stub it in a test, and nothing about the class leaks into
+ * this package's public types.
+ */
+/** A plan, as the pricing endpoints return it. */
+export interface Plan {
+    id: string;
+    name: string;
+    description: string | null;
+    /** Dollars per interval. */
+    price: number;
+    interval: string;
+    unit: string;
+    included_units: number | null;
+    /** Dollars per unit past the allowance. */
+    overage_per_unit: number;
+    trial_days: number;
+    /** What a run on this plan may use, in order. The dimension no other pricing
+     *  component has, and the reason these plans are worth rendering from data. */
+    route_prefer: string[];
+    route_allow: string[] | null;
+    /** Whether it can be taken without a payment rail. */
+    selectable: boolean;
+}
+export interface CurrentPlan {
+    plan_id: string;
+    units_used: number;
+    period_end: string | null;
+    trial_ends_at: string | null;
+}
+export interface ConnectApi {
+    context(): Promise<ConnectContext>;
+    machines(): Promise<Machine[]>;
+    plans(): Promise<{
+        plans: Plan[];
+        current: CurrentPlan | null;
+    }>;
+    selectPlan(planId: string): Promise<unknown>;
+    checkoutPlan(planId: string, urls?: {
+        successUrl?: string;
+        cancelUrl?: string;
+    }): Promise<{
+        url: string | null;
+    }>;
+    leavePlan(): Promise<{
+        ok: true;
+    }>;
+    lookup(code: string): Promise<PendingCode>;
+    approve(code: string): Promise<{
+        ok: true;
+    }>;
+    deny(code: string): Promise<{
+        ok: true;
+    }>;
+}
+/**
+ * THE EVENT STREAM.
+ *
+ * The five type values are stable. New information arrives as optional fields
+ * on the existing types, never as a new type, so a client written against this
+ * list stays correct. Declared here so a browser app does not have to install a
+ * server SDK to read five field names.
+ */
+export type AgentEventType = "delta" | "thinking" | "status" | "done" | "error";
+export interface RunUsage {
+    costClass?: CostClass;
+    costMicros?: number;
+    model: string;
+    provider?: string;
+    inputTokens: number;
+    outputTokens: number;
+    cacheReadTokens: number;
+    cacheWriteTokens: number;
+    webSearches: number;
+}
+export interface AgentEvent {
+    type: AgentEventType;
+    /** `delta`: the NEW text, append it. `thinking`: the RUNNING TOTAL, replace it. */
+    text?: string;
+    /** `status` / `error`: human-readable copy, safe to show a user. */
+    message?: string;
+    /** On a `status` raised by a tool: a stable slug to map to an icon. */
+    tool?: string;
+    /** On `done`: what the run consumed, when the runtime could report it. */
+    usage?: RunUsage;
+    /** Which economics is serving this run, announced before any output. */
+    tier?: CostClass;
+}
+export interface Message {
+    role: "user" | "assistant";
+    content: string;
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@soba-so/react",
+  "version": "0.0.5",
+  "description": "Connect the AI your users already pay for, from your own React app.",
+  "license": "UNLICENSED",
+  "homepage": "https://soba.so/docs/components",
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "!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"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "keywords": [
+    "soba",
+    "react",
+    "byoc",
+    "claude",
+    "codex"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}