@soba-so/react 0.0.16 → 0.0.18

package/dist/session.d.ts

@@ -32,6 +32,18 @@ export interface SessionSourceOptions {
     /** Passed to your endpoint so it knows whose session to mint. */
     user?: string;
     fetchImpl?: typeof fetch;
+    /**
+     * WHO IS SIGNED IN, to reuse their session across page loads and tabs.
+     *
+     * Without it every page load mints a session: one request to your server and
+     * one to Soba. With it the session is kept in `localStorage` until it is
+     * about to expire, under this key, so a reload or a second tab reuses it.
+     *
+     * It must change when the person does — their user id, not a constant —
+     * because a session acts as the person it was minted for. A second person
+     * signing in on the same browser under the same key would act as the first.
+     */
+    cacheKey?: string;
 }
 export declare class SessionHolder {
     #private;

package/dist/styles.css

@@ -197,6 +197,10 @@ a.sc-btn {
   color: var(--sc-muted, #6b6b73);
 }
 
+.sc-tone-absent {
+  color: var(--sc-faint, #a1a1aa);
+}
+
 .sc-error {
   color: var(--sc-warn, #b06f14);
   font-size: var(--sc-fs-body);
@@ -263,6 +267,13 @@ a.sc-btn {
   padding: 0 2px 3px 12px;
 }
 
+.sc-cap-acts {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
 .sc-group-title {
   flex: 1;
   min-width: 0;
@@ -402,6 +413,71 @@ a.sc-btn {
   color: var(--sc-line-2, #dcdce0);
 }
 
+.sc-mrow-btn {
+  width: calc(100% + 4px);
+  margin-left: -4px;
+  padding-left: 4px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.sc-mrow-btn:hover {
+  background: var(--sc-tray-sunk, #f6f6f7);
+}
+
+.sc-mrow-btn:hover .sc-mbadge {
+  box-shadow: 0 0 0 2.5px var(--sc-tray-sunk, #f6f6f7);
+}
+
+.sc-chev {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  color: var(--sc-muted, #6b6b73);
+  transition: transform 120ms ease;
+}
+
+.sc-chev-open {
+  transform: rotate(90deg);
+}
+
+.sc-rrow {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 6px 12px 6px 0;
+}
+
+.sc-rrow .sc-runtime-tile {
+  margin-top: 1px;
+}
+
+.sc-rtop {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.sc-rtop .sc-averdict {
+  font-variant-numeric: tabular-nums;
+}
+
+.sc-rstep {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-size: var(--sc-fs-label);
+  line-height: 1.4;
+  color: var(--sc-muted, #6b6b73);
+}
+
 .sc-arow {
   display: flex;
   align-items: center;
@@ -436,6 +512,10 @@ a.sc-btn {
   font-size: var(--sc-fs-small);
 }
 
+.sc-aname-absent {
+  color: var(--sc-muted, #6b6b73);
+}
+
 .sc-aversion {
   color: var(--sc-muted, #6b6b73);
 }
@@ -449,6 +529,18 @@ a.sc-btn {
   color: var(--sc-muted, #6b6b73);
 }
 
+.sc-sglyph {
+  flex: none;
+  width: 11px;
+  height: 11px;
+  color: var(--sc-ok, #22a06b);
+}
+
+.sc-aserving {
+  margin-left: 5px;
+  font-variant-numeric: tabular-nums;
+}
+
 .sc-orow {
   display: flex;
   align-items: center;
@@ -517,6 +609,11 @@ a.sc-btn {
   background: var(--sc-tray-sunk, #f6f6f7);
 }
 
+.sc-open-app {
+  color: inherit;
+  text-decoration: none;
+}
+
 .sc-hrow {
   padding-bottom: 2px;
 }
@@ -529,6 +626,246 @@ a.sc-btn {
   color: var(--sc-muted, #6b6b73);
 }
 
+.sc-runs-to {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  max-width: 62%;
+  font-size: var(--sc-fs-label);
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-runs-cap {
+  flex: none;
+  white-space: nowrap;
+}
+
+.sc-runs-fixed,
+.sc-runs-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  height: 24px;
+  padding: 0 6px;
+  font-size: var(--sc-fs-label);
+  font-weight: 500;
+  color: var(--sc-text-2, #3f3f46);
+}
+
+.sc-runs-btn {
+  padding-right: 4px;
+  border: 0;
+  border-radius: var(--sc-r-pill, 999px);
+  background: transparent;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+
+.sc-runs-btn:hover:not(:disabled),
+.sc-runs-btn[aria-expanded="true"] {
+  background: var(--sc-tray-card, #ffffff);
+  color: var(--sc-text, #1a1a1c);
+}
+
+.sc-runs-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.sc-runs-glyph {
+  flex: none;
+  width: 12px;
+  height: 12px;
+}
+
+.sc-runs-mark {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 14px;
+  height: 14px;
+}
+
+.sc-runs-mark > * {
+  max-width: 14px;
+  max-height: 14px;
+}
+
+.sc-runs-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sc-runs-btn .sc-chev {
+  width: 11px;
+  height: 11px;
+  color: var(--sc-faint, #a1a1aa);
+}
+
+.sc-menu {
+  position: fixed;
+  inset: auto;
+  z-index: 2147483647;
+  width: 248px;
+  margin: 0;
+  padding: 4px;
+  border: 1px solid var(--sc-line, #e9e9eb);
+  border-radius: 12px;
+  background: var(--sc-tray-card, #ffffff);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
+  color: var(--sc-text, #1a1a1c);
+  
+  max-height: 60vh;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.sc-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 34px;
+  padding: 5px 8px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  font: inherit;
+  font-size: var(--sc-fs-small);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.sc-menu-item:hover,
+.sc-menu-item:focus-visible {
+  background: var(--sc-tray-sunk, #f6f6f7);
+  outline: none;
+}
+
+.sc-menu-text {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.sc-menu-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sc-menu-note {
+  font-size: var(--sc-fs-label);
+  line-height: 1.4;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-menu-check {
+  flex: none;
+  width: 15px;
+  height: 15px;
+  color: var(--sc-text-2, #3f3f46);
+}
+
+.sc-menu-sep {
+  height: 1px;
+  margin: 4px 6px;
+  background: var(--sc-line, #e9e9eb);
+}
+
+.sc-menu-head {
+  margin: 6px 6px 2px;
+  padding-top: 7px;
+  border-top: 1px solid var(--sc-line, #e9e9eb);
+  font-size: var(--sc-fs-label);
+  font-weight: 500;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-menu > .sc-menu-head:first-child {
+  margin-top: 2px;
+  padding-top: 0;
+  border-top: 0;
+}
+
+.sc-mp {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  max-width: 100%;
+  min-width: 0;
+  font-size: var(--sc-fs-label);
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-mp-cap {
+  flex: none;
+  white-space: nowrap;
+}
+
+.sc-mp-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  height: 26px;
+  padding: 0 5px 0 7px;
+  border: 0;
+  border-radius: var(--sc-r-pill, 999px);
+  background: transparent;
+  font: inherit;
+  font-size: var(--sc-fs-label);
+  font-weight: 500;
+  color: var(--sc-text-2, #3f3f46);
+  cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+
+.sc-mp-btn:hover:not(:disabled),
+.sc-mp-btn[aria-expanded="true"] {
+  background: var(--sc-raised, #f6f6f7);
+  color: var(--sc-text, #1a1a1c);
+}
+
+.sc-mp-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.sc-mp-mark {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 13px;
+  height: 13px;
+}
+
+.sc-mp-glyph {
+  max-width: 13px;
+  max-height: 13px;
+}
+
+.sc-mp-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sc-mp-btn .sc-chev {
+  width: 11px;
+  height: 11px;
+  color: var(--sc-faint, #a1a1aa);
+}
+
 .sc-row-act {
   flex: none;
   padding: 3px 9px;
@@ -605,7 +942,9 @@ a.sc-btn {
   .sc-spin {
     animation: none;
   }
-  .sc-pair {
+  .sc-pair,
+  .sc-mrow-btn,
+  .sc-chev {
     transition: none;
   }
 }
@@ -680,6 +1019,15 @@ a.sc-btn {
   --sc-shadow-2: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 64%);
 }
 
+.soba-connect.sc-inline {
+  display: inline-flex;
+  width: auto;
+  max-width: 100%;
+  margin-inline: 0;
+  
+  line-height: 1;
+}
+
 .soba-connect.sc-fill {
   max-width: none;
   
@@ -1520,9 +1868,12 @@ a.sc-btn {
 .sc-step-lead:focus-visible,
 .sc-step-links a:focus-visible,
 .sc-alt-link:focus-visible,
+.sc-runs-btn:focus-visible,
+.sc-mp-btn:focus-visible,
 .sc-row-act:focus-visible,
 .sc-disc:focus-visible,
 .sc-pair:focus-visible,
+.sc-mrow-btn:focus-visible,
 .sc-input:focus-visible,
 .sc-modal-close:focus-visible {
   outline: 2px solid var(--sc-accent, #18181b);

package/dist/tier.d.ts

@@ -0,0 +1,35 @@
+import type { CostClass } from "./types.js";
+/**
+ * WHERE THE ANSWER CAME FROM, IN WORDS — a pure function, because there is no
+ * state in it.
+ *
+ * `status` carries the cost class BEFORE any output, which is the whole reason
+ * an app renders it: a run that quietly fell back from somebody's laptop to a
+ * metered API says so on the screen rather than in a bill. So every surface
+ * that shows a run shows this, and every one of them wrote the map itself.
+ *
+ * THIS SHIPPED BECAUSE THE COPIES DISAGREED. Four of them, across our own
+ * examples and the `create-soba` template: `user-hardware` was "your own
+ * hardware", "your own computer" and "your own machine" depending on which page
+ * you were on. That is a glossary problem, not a styling one — the names of the
+ * five economics this product is about should not depend on the file.
+ *
+ * And three of the copies had the same bug, which is the part worth having a
+ * test for: they were written as an if-chain ending in `return "a frontier
+ * model we paid for"`, so `user-api-key` — somebody's OWN key, costing the app
+ * nothing — was reported to them as the app's most expensive supply.
+ *
+ * A BARE NOUN PHRASE, so the sentence stays the app's. "running on …" while it
+ * is, "ran on …" afterwards, or the words on their own beside an icon; a
+ * function that returned a whole sentence would have to pick a tense, and the
+ * one surface that shows this both during and after a run needs both.
+ *
+ * `null` for a run that has not said yet — the value every page holds before
+ * the first `status` — so `{tierLabel(tier)}` is a complete integration.
+ *
+ * Not the same words as a PLAN's compute line, deliberately: `usePlans()`
+ * describes supply a plan is allowed to reach ("your own AI subscription", a
+ * thing you might go and connect), and this describes where one run actually
+ * landed. Same five classes, two different claims.
+ */
+export declare function tierLabel(tier: CostClass | string | null | undefined): string | null;

package/dist/types.d.ts

@@ -51,6 +51,85 @@ export interface Machine {
     always_on: boolean;
     last_seen_at: string | null;
     runtimes: Runtime[];
+    /**
+     * WHICH AGENT GETS THIS APP'S RUNS, and whose decision that is.
+     *
+     * `requested_runtime` is what the app named on its latest run here: set, the
+     * app has chosen and the person's pick does not apply. Null, the app does not
+     * mind, and `preferred_runtime` is the person's pick — or null for the
+     * machine's own first-found default. Both optional: a server older than the
+     * fields sends neither, which reads as "nothing picked".
+     *
+     * MISSING FROM THIS COPY UNTIL `useModel()` NEEDED THEM, and the parity guard
+     * could not catch it. `test/types-parity.ts` compares this interface against
+     * the panel's both ways, and an interface WITHOUT an optional property still
+     * extends one that has it — in both directions. So the two shapes drifted by
+     * exactly the amount the guard is blind to, and the fields arrived at the
+     * browser on every poll with nothing here to read them. The same note is on
+     * `Runtime.quarantined`, which drifted the same way first.
+     */
+    preferred_runtime?: string | null;
+    requested_runtime?: string | null;
+}
+/**
+ * WHAT PRESSING "OPEN SOBA" LOOKED LIKE — mirrored from the panel for the
+ * reason the shapes above it are, and it is the one that was caught by the
+ * published artefact rather than by a review: `useOpenSobaConnect.d.ts` shipped
+ * importing this type out of the private panel package, which no customer can
+ * install. The build has a check for exactly that, and the name in it was
+ * spelled `@soba` rather than `@soba-so`, so it had never once fired.
+ *
+ * (Written without the specifier spelled out, because the check greps the
+ * emitted declarations and prose in them is still text it has to read.)
+ *
+ * No browser will tell a page whether a scheme handler exists. The only
+ * observable consequence of one is that something else takes the foreground.
+ */
+export type Launch = 
+/** Something took the foreground. Almost certainly the app. */
+"opened"
+/** Nothing did, within the window. Probably not installed. */
+ | "absent"
+/** The tab was already in the background, so the signal means nothing. */
+ | "unknown";
+/**
+ * A MODEL THIS PERSON COULD BE ANSWERED BY — mirrored from the panel, like
+ * `Machine` above it, so no published declaration names a private package.
+ *
+ * Derived from what they have connected rather than configured anywhere: see
+ * `useModel()`, and `models.ts` in the panel for the three facts it reconciles.
+ */
+export type ModelOptionKind = "auto" | "size" | "named";
+export interface ModelOption {
+    /** `auto`, `small`, `large`, or `<runtime>/<model>`. */
+    id: string;
+    kind: ModelOptionKind;
+    /** `Automatic`, `Fast`, `Opus`, `llama3.2:3b`. */
+    label: string;
+    note?: string;
+    /** What goes on the run as `model`. */
+    model: string;
+    /**
+     * What goes on the run as `runtime`, on a named model only.
+     *
+     * THE TWO TRAVEL TOGETHER OR NOT AT ALL. The broker applies the person's
+     * preferred agent only to a run whose model is blank or a size, so `opus`
+     * sent on its own is handed to whichever agent the broker finds first — and
+     * on somebody running Codex that is a run that dies on a model name Codex
+     * has never heard of. `ModelView.run` is the pair; spread it.
+     */
+    runtime?: string;
+    /** The agent's own name, which is the heading this model sits under. */
+    runtimeName?: string;
+    /** Who pays for a run served here. */
+    costClass?: string;
+    /** The machine advertising it, when exactly one of theirs does. */
+    machine?: string;
+}
+export interface ModelGroup {
+    /** Null for the first group — Automatic and the sizes head nothing. */
+    heading: string | null;
+    options: ModelOption[];
 }
 /** A device code someone is being asked to approve. */
 export interface PendingCode {
@@ -201,6 +280,40 @@ export interface AgentEvent {
     usage?: RunUsage;
     /** Which economics is serving this run, announced before any output. */
     tier?: CostClass;
+    /** On a `status` from a terminal run: what the agent said at the end of a turn. */
+    turn?: {
+        text: string;
+    };
+    /** On `done` / `error`: the runtime's conversation id, for a follow-up run. */
+    session?: string;
+    /** On a tool `status`: what the tool was pointed at — a path, a command. */
+    toolInput?: string;
+    /** On a `status` from a run in a git checkout: where its branch stands. */
+    git?: {
+        branch: string;
+        base: string;
+        head: string;
+        ahead: number;
+        behind: number;
+        files: {
+            path: string;
+            status: "A" | "M" | "D" | "R";
+            added: number;
+            removed: number;
+        }[];
+        commits: {
+            sha: string;
+            subject: string;
+        }[];
+        dirty: boolean;
+    };
+    /** On an `error`: a stable code to branch on, e.g. `run_too_long`. */
+    reason?: string;
+    /** On an `error`: false when starting the same run again will end the same way. */
+    retryable?: boolean;
+    /** On a `status` from Soba: the computer serving the run went offline
+     *  (`interrupted`) or came back (`resumed`). The run goes on either way. */
+    state?: "interrupted" | "resumed";
 }
 export interface Message {
     role: "user" | "assistant";

package/dist/useCheckout.d.ts

@@ -0,0 +1,41 @@
+import type { Plan } from "./types.js";
+/**
+ * THE BUY BUTTON'S BEHAVIOUR — the headless half of `<SobaCheckout />`.
+ *
+ * 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, and it is the reason this is worth a hook rather than a
+ * snippet — an app that wrote its own and granted the plan on redirect would
+ * hand one to anybody 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, so their user sees their name on the statement. Soba is the rail
+ * underneath.
+ */
+export interface CheckoutView {
+    /** "Subscribe for $20/month", or "Opening…" while it is. The default label,
+     *  because a button that says "Subscribe" makes the reader look back up. */
+    label: string;
+    /** A session is being created, or the navigation is already under way. */
+    busy: boolean;
+    /** Why it did not open, or null. Cleared on the next attempt. */
+    error: string | null;
+    /** Create the session and go. Resolves only when it did NOT navigate. */
+    buy: () => Promise<void>;
+    /** The URL, for an app that would rather navigate itself — a native wrapper,
+     *  or a flow that wants to open it in a new tab. `buy()` is the usual one. */
+    session: () => Promise<string>;
+}
+export interface UseCheckoutOptions {
+    /** The plan to buy. A free one is refused by the endpoint — `usePlans()`
+     *  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 words. */
+    label?: string;
+}
+export declare function useCheckout({ plan, successUrl, cancelUrl, label, }: UseCheckoutOptions): CheckoutView;