@soba-so/react 0.0.17 → 0.0.18

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,33 @@ 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. */

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;

package/dist/useCompute.d.ts

@@ -0,0 +1,91 @@
+import type { Machine, Runtime } from "./types.js";
+/**
+ * WHAT THIS PERSON HAS CONNECTED, IN WORDS — the headless half of
+ * `<ComputeStatus />` and `<ConnectCompute />`.
+ *
+ * `useSoba().compute` is already the raw list, and it is not enough to draw
+ * from. Every surface that tried re-derived the same five judgements, and the
+ * two below are ones this repo has got wrong in production:
+ *
+ * **"Nothing connected yet" is a claim about somebody's ACCOUNT**, and it is
+ * only true once the account has been read. While the first poll is in flight,
+ * or after it has failed, the honest answer is that we do not know — and saying
+ * the empty thing instead tells a person with a paired laptop that it has
+ * vanished, during an outage they cannot see and did not cause. `view` is that
+ * decision, made once. Two of our own components drew this list and only one of
+ * them knew the rule.
+ *
+ * **Machines in hand beat both flags.** The provider polls, so `loading` and
+ * `error` come back around; a poll that fails on its fourth round must not
+ * blank a list somebody is already reading.
+ *
+ * The rest is naming: a hostname is not what anybody calls the laptop on their
+ * desk, `darwin · arm64` is what a kernel calls itself, and a runtime's
+ * `authenticated` is tri-state all the way to the screen — "could not tell" is
+ * not "signed out", and rendering it as one tells somebody their working setup
+ * is broken.
+ */
+export interface ComputeRuntime {
+    runtime: Runtime;
+    /** "Claude Code". */
+    name: string;
+    /** Signed in, signed out, or we could not tell — with the tone to draw it
+     *  in. Never collapse `unknown` into `warn`. */
+    auth: {
+        tone: "ok" | "warn" | "unknown";
+        text: string;
+    };
+    /** It arrived on a machine that was already paired, so it waits to be let in
+     *  and serves nothing until somebody says so. */
+    quarantined: boolean;
+}
+export interface ComputeMachine {
+    machine: Machine;
+    /** What to call it: the name they gave it, else a tidied hostname. */
+    name: string;
+    /** One word plus a tone, for a dot. Agrees with the panel's own badge. */
+    state: {
+        tone: "ok" | "busy" | "off";
+        word: string;
+    };
+    /** The sentence version — "serving 2 of 4" — for where there is room. */
+    status: {
+        tone: "ok" | "busy" | "off";
+        text: string;
+    };
+    /** "MacBook · Apple silicon", or null when the worker reported nothing. */
+    hardware: string | null;
+    /** "3 days ago", or null while it is here. */
+    lastSeen: string | null;
+    /** The agents a person may send runs to: let in, and never the shell. */
+    runtimes: ComputeRuntime[];
+    /** Which agent this app's next run on it goes to, and whose decision that
+     *  was — the app's, the person's, or the machine's own first-found default. */
+    runsOn: {
+        by: "app" | "you" | "default";
+        name: string | null;
+    };
+}
+export interface ComputeView {
+    /**
+     * WHAT TO DRAW, decided once instead of by each surface. `empty` is a claim
+     * about the account and is only reached once one has actually been read.
+     */
+    view: "loading" | "error" | "empty" | "machines";
+    /** Every machine, named and worded, best-present first. */
+    machines: ComputeMachine[];
+    /** The one the panel is about: serving beats awake beats asleep, and within a
+     *  state the one heard from most recently. Null with nothing connected. */
+    primary: ComputeMachine | null;
+    /** Something paired. It may still be asleep — see `online`. */
+    connected: boolean;
+    /** Something of theirs could serve a run right now. */
+    online: boolean;
+    /** Paired and not reachable: the state an app goes silent in unless it says
+     *  something. `<ConnectNudge />`'s `stalled` reason is this one. */
+    stalled: ComputeMachine | null;
+    loading: boolean;
+    error: Error | null;
+    refresh: () => Promise<void>;
+}
+export declare function useCompute(): ComputeView;