@soba-so/react 0.0.27 → 0.0.28

package/dist/styles.css

@@ -1533,6 +1533,7 @@ a.sc-btn {
 
 .sc-mp-label {
   min-width: 0;
+  max-width: 24ch;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1544,6 +1545,274 @@ a.sc-btn {
   color: var(--sc-faint, #a1a1aa);
 }
 
+.sc-mm {
+  position: fixed;
+  inset: auto;
+  z-index: 2147483647;
+  display: flex;
+  flex-direction: column;
+  min-width: calc(240px * var(--sc-scale, 1));
+  max-width: min(calc(340px * var(--sc-scale, 1)), calc(100vw - 16px));
+  width: max-content;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--sc-line, #e9e9eb);
+  border-radius: calc(12px * var(--sc-scale, 1));
+  background: var(--sc-tray-card, #ffffff);
+  box-shadow:
+    0 12px 32px rgba(0, 0, 0, 0.12),
+    0 2px 6px rgba(0, 0, 0, 0.06);
+  color: var(--sc-text, #1a1a1c);
+  font-size: var(--sc-fs-small, 13px);
+  line-height: 1.3;
+  outline: none;
+}
+
+.sc-mm-search {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--sc-line, #e9e9eb);
+  color: var(--sc-faint, #a1a1aa);
+}
+
+.sc-mm-find {
+  flex: none;
+  width: 14px;
+  height: 14px;
+}
+
+.sc-mm-search input {
+  flex: 1;
+  min-width: 0;
+  height: calc(38px * var(--sc-scale, 1));
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  
+  font-size: max(16px, var(--sc-fs-small, 13px));
+  color: var(--sc-text, #1a1a1c);
+  outline: none;
+}
+@media (pointer: fine) {
+  .sc-mm-search input {
+    font-size: inherit;
+  }
+}
+.sc-mm-search input::placeholder {
+  color: var(--sc-faint, #a1a1aa);
+}
+
+.sc-mm-list {
+  flex: 1;
+  min-height: 0;
+  padding: 4px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: 4px;
+}
+
+.sc-menu,
+.sc-mm-list,
+.sc-mm-flyout {
+  scrollbar-width: none;
+}
+.sc-menu::-webkit-scrollbar,
+.sc-mm-list::-webkit-scrollbar,
+.sc-mm-flyout::-webkit-scrollbar {
+  display: none;
+}
+
+.sc-mm-group + .sc-mm-group {
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid var(--sc-line, #e9e9eb);
+}
+
+.sc-mm-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 8px 4px;
+  font-size: var(--sc-fs-label);
+  font-weight: 500;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-mm-logo {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+}
+
+.sc-mm-emoji {
+  display: inline-grid;
+  place-items: center;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.sc-mm-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: calc(32px * var(--sc-scale, 1));
+  padding: 0 8px;
+  border-radius: calc(7px * var(--sc-scale, 1));
+  cursor: pointer;
+  user-select: none;
+}
+
+.sc-mm-item[data-active] {
+  background: var(--sc-tray-sunk, #f4f4f5);
+}
+
+.sc-mm-inline {
+  position: static;
+  z-index: auto;
+  max-height: 380px;
+}
+
+.sc-mm-item[data-locked] {
+  cursor: default;
+}
+
+.sc-mm-item[data-locked] .sc-mm-label {
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-mm-label {
+  flex: none;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sc-mm-item[aria-selected="true"] .sc-mm-label {
+  font-weight: 500;
+}
+
+.sc-mm-note {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-mm-item .sc-menu-check {
+  margin-left: auto;
+  width: 14px;
+  height: 14px;
+}
+
+.sc-mm-empty {
+  padding: 16px 8px;
+  text-align: center;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-mm-tile {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  object-fit: cover;
+}
+.sc-mm-tile-box {
+  display: inline-grid;
+  place-items: center;
+  background: color-mix(in srgb, currentColor 6%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent);
+  color: var(--sc-text, #1a1a1c);
+}
+.sc-mm-tile-glyph {
+  width: 11px;
+  height: 11px;
+}
+.sc-mm-tile-dim {
+  opacity: 0.5;
+  filter: grayscale(1);
+}
+.sc-mm-tile.sc-mm-emoji {
+  font-size: 11px;
+}
+
+.sc-mm-sub .sc-chev {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  margin-left: auto;
+  color: var(--sc-muted, #6b6b73);
+}
+.sc-mm-sub .sc-mm-label {
+  flex: 1;
+  min-width: 0;
+}
+.sc-mm-sub[data-locked] .sc-mm-tile {
+  opacity: 0.5;
+  filter: grayscale(1);
+}
+
+.sc-mm-pill {
+  flex: none;
+  margin-left: auto;
+  padding: 1px 6px;
+  border-radius: 999px;
+  box-shadow: inset 0 0 0 1px var(--sc-line, #e9e9eb);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  color: var(--sc-muted, #6b6b73);
+}
+.sc-mm-sub .sc-mm-pill {
+  margin-left: 0;
+}
+
+.sc-mm-dot {
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--sc-text, #1a1a1c) 60%, transparent);
+}
+
+.sc-mm-rule {
+  height: 1px;
+  margin: 4px -4px;
+  background: var(--sc-line, #e9e9eb);
+}
+.sc-mm-label-row {
+  padding: 6px 8px 4px;
+  font-size: var(--sc-fs-label, 12px);
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-mm-flyout {
+  position: fixed;
+  z-index: 1;
+  padding: 4px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border: 1px solid var(--sc-line, #e9e9eb);
+  border-radius: calc(12px * var(--sc-scale, 1));
+  background: var(--sc-tray-card, #ffffff);
+  box-shadow:
+    0 12px 32px rgba(0, 0, 0, 0.12),
+    0 2px 6px rgba(0, 0, 0, 0.06);
+}
+.sc-mm-inline {
+  position: relative;
+  overflow: visible;
+}
+
 .sc-atile .sc-runtime-logo {
   width: calc(25px * var(--sc-scale, 1));
   height: calc(25px * var(--sc-scale, 1));
@@ -1936,6 +2205,19 @@ a.sc-btn {
   color: var(--sc-muted, #6b6b73);
 }
 
+.sc-plan-feature::before {
+  content: "✓ ";
+  color: var(--sc-text, currentColor);
+}
+
+.sc-plan-feature-absent {
+  text-decoration: line-through;
+  opacity: 0.6;
+}
+.sc-plan-feature-absent::before {
+  content: "✕ ";
+}
+
 .sc-plan-badge {
   font-size: var(--sc-fs-label, 11px);
   padding: 2px 6px;

package/dist/types.d.ts

@@ -127,9 +127,10 @@ export type Launch =
  * 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 type ModelOptionKind = "auto" | "size" | "named" | "provider";
 export interface ModelOption {
-    /** `auto`, `small`, `large`, or `<runtime>/<model>`. */
+    /** `auto`, `small`, `large`, `<runtime>/<model>`, or `@<provider>/<model>`
+     *  for one of the app's own providers. */
     id: string;
     kind: ModelOptionKind;
     /** `Automatic`, `Fast`, `Opus`, `llama3.2:3b`. */
@@ -153,6 +154,87 @@ export interface ModelOption {
     costClass?: string;
     /** The machine advertising it, when exactly one of theirs does. */
     machine?: string;
+    /** The app's provider serving it, on a provider's model only. */
+    providerId?: string;
+    /** That provider's name, as the app's owner gave it. */
+    providerName?: string;
+    /** Whose API it is — `openai`, `groq` — for `<ProviderMark />`. */
+    providerMark?: string;
+    /** Listed and not pickable: the plan does not reach this provider, or its
+     *  allowance is used. Draw it as an upgrade, never select it. */
+    locked?: "plan" | "allowance";
+    /** The app's own entry this was made from — a name set on Providers (its
+     *  alias) or a `ModelChoice.id` in code: the app's words on a real model. */
+    choice?: string;
+    /** A name's run may land on any of these classes. */
+    costClasses?: string[];
+    /** A name's own logo, set on the dashboard: an https address or one emoji.
+     *  Drawn in place of the provider's mark. */
+    icon?: string;
+}
+/** How a picker lays out the app's providers. See `UseModelOptions.layout`. */
+export type ModelLayout = "providers" | "models" | "choices" | "automatic";
+/** One entry the app writes itself, naming a model it exposes. */
+export interface ModelChoice {
+    /** Stable; the pick is stored as `choice:<id>`. */
+    id: string;
+    /** "Fast", "Smart". */
+    label: string;
+    /** The quiet clause beside it. */
+    note?: string;
+    /** The model it runs, as the provider names it: `gpt-5-mini`. */
+    model: string;
+    /** Which provider, when two expose it: `openai`, its dashboard name, or its
+     *  id. Any provider when left out. */
+    provider?: string;
+    /** Or one of the person's own agents, `claude-code`, for one of its models. */
+    runtime?: string;
+}
+/** One of the app's own providers, as `/v1/model-options` lists it. */
+export interface ModelProviderWire {
+    id: string;
+    provider: string | null;
+    name: string;
+    cost_class: "open-weights" | "frontier";
+    locked: "plan" | "allowance" | null;
+    models: {
+        model: string;
+        default?: true;
+    }[];
+}
+/** One of the app's own names for a model, set on Providers. */
+export interface ModelNameWire {
+    alias: string;
+    label: string;
+    note: string | null;
+    /** Its logo, set on the dashboard: an https address or one emoji. */
+    icon?: string;
+    cost_classes: string[];
+    provider: string | null;
+    locked: "plan" | "allowance" | null;
+    default?: true;
+}
+export interface ModelOptionsWire {
+    route: {
+        allow: string[];
+        prefer: string[];
+    };
+    providers: ModelProviderWire[];
+    names: ModelNameWire[];
+    layout: "providers" | "models" | "choices" | "automatic";
+    /** Whether Fast and Best are offered, as designed on Connect. Absent from a
+     *  gateway older than the setting, which offered them. */
+    sizes?: boolean;
+    /** Which of Automatic, Fast and Best each layout offers, for an app whose
+     *  code picks another than the one designed. Absent from an older gateway:
+     *  `sizes` stands in for both sizes, and Automatic is always there. */
+    rowsByLayout?: Partial<Record<"providers" | "models" | "choices" | "automatic", {
+        auto: boolean;
+        fast: boolean;
+        best: boolean;
+        own?: boolean;
+        search?: boolean;
+    }>>;
 }
 export interface ModelGroup {
     /** Null for the first group — Automatic and the sizes head nothing. */
@@ -209,7 +291,11 @@ export interface Plan {
     price: number;
     interval: string;
     unit: string;
+    /** Runs a month on AI the app pays for. Null is unlimited. */
     included_units: number | null;
+    /** Runs a month on the user's own AI, counted apart from `included_units`.
+     *  Null is unlimited. Optional so an older server that omits it parses. */
+    own_included_units?: number | null;
     /** What happens past the allowance: `stop` or `meter`. The difference
      *  between a wall and a bill, and not guessable from the price. */
     overage: string;
@@ -232,10 +318,21 @@ export interface Plan {
     ask_to_connect?: boolean;
     /** Whether it can be taken without a payment rail. */
     selectable: boolean;
+    /** What the app calls a run, plural: "tasks". Optional for older servers;
+     *  absent reads "runs". */
+    task_noun?: string;
+    /** About how many runs a credit plan's allowance buys at this app's typical
+     *  run cost: "About 265 tasks a month". Null when it cannot be said. */
+    estimated_tasks?: number | null;
+    /** A plan sold by conversation: "Talk to us" links here. */
+    contact_url?: string | null;
+    /** "Everything in" this plan id; its card lists that, then `features_own`. */
+    features_from?: string | null;
+    features_own?: PlanFeatureWire[] | null;
     /**
      * WHAT CONNECTING THEIR OWN COMPUTE EARNS THEM.
      *
-     * `none` | `unlimited` | `included` | `credit`. The one dimension no other
+     * `none` | `included` | `credit`. The one dimension no other
      * pricing component has a column for, and the reason a free plan on this
      * product can be worth choosing.
      */
@@ -244,16 +341,49 @@ export interface Plan {
     connected_included_units: number | null;
     /** Dollars back per interval on a `credit` reward. Zero otherwise. */
     connected_credit: number;
+    /** What the vendor's app enforces, as the card lists it (INT-91). Optional
+     *  so an older server that omits it parses. */
+    features?: PlanFeatureWire[];
 }
 export interface CurrentPlan {
     plan_id: string;
+    /** Spent against `included_units`. */
     units_used: number;
+    /** Spent against `own_included_units`. Optional for older servers. */
+    own_units_used?: number;
+    /**
+     * WHAT SOBA ENFORCES: both allowances, what is left, when they reset. The
+     * gateway stops a run here; your app never has to. Optional for older
+     * servers, null when the plan is no longer in the catalogue.
+     */
+    limits?: {
+        unit: string;
+        included_units: number | null;
+        units_used: number;
+        remaining: number | null;
+        own_included_units: number | null;
+        own_units_used: number;
+        own_remaining: number | null;
+        resets_at: string | null;
+    } | null;
+    /**
+     * WHAT YOUR APP ENFORCES (INT-91): feature id to value, as this person
+     * bought it. Soba stops nothing on these; read them and decide.
+     */
+    features?: Record<string, boolean | number | string | null>;
+    /** How many of each priced feature are in use, as your app last reported
+     *  (`{ seats: 12 }`). Separate from `features`, where `seats` is the cap. */
+    quantities?: Record<string, number>;
     period_end: string | null;
     trial_ends_at: string | null;
+    /** A free plan past its time limit: runs are refused, and every feature
+     *  reads as off, so stop what the plan carried too. Absent on older servers. */
+    ended?: boolean;
 }
 export interface ConnectApi {
     context(): Promise<ConnectContext>;
     machines(): Promise<Machine[]>;
+    modelOptions(): Promise<ModelOptionsWire | null>;
     plans(): Promise<{
         plans: Plan[];
         current: CurrentPlan | null;
@@ -347,3 +477,47 @@ export interface Message {
     role: "user" | "assistant";
     content: string;
 }
+/** A plan feature: what the vendor's app enforces, never Soba (INT-91). */
+export interface PlanFeatureWire {
+    id: string;
+    name: string;
+    type: "boolean" | "number" | "text";
+    /** `true`/`false`, a whole number, or null for unlimited. */
+    value: boolean | number | string | null;
+    unit?: string;
+    /** "month": the count starts over each billing period. Absent: never. */
+    resets?: "month";
+    /** Seats: a price per unit, in micros, past `included` units. */
+    price?: {
+        amountMicros: number;
+        included: number;
+    };
+}
+/**
+ * WHY A FEATURE IS NOT AVAILABLE, in the words an app branches on — the same
+ * four `soba.users.check` answers with. Declared here, not imported from
+ * connect-ui, because connect-ui is private and bundled: a published type
+ * that pointed at it would not resolve in an app.
+ */
+export type FeatureDenial = "no_plan" | "plan_ended" | "not_included" | "limit_reached";
+/** What the browser's check says about one feature. */
+export interface FeatureCheck {
+    feature: string;
+    allowed: boolean;
+    /** Null when allowed. */
+    reason: FeatureDenial | null;
+    /** The plan's number for it: a cap, or null for unlimited. Null for a switch. */
+    limit: number | null;
+    /** How many are in use now. Zero for a switch. */
+    used: number;
+    /** What is left under the cap, never below zero. Null when unlimited or a switch. */
+    remaining: number | null;
+    unlimited: boolean;
+}
+/** One line of a plan's features on its card, and whether the plan has it —
+ *  a "no" is drawn crossed out. Declared here for the reason `FeatureCheck`
+ *  is: connect-ui is bundled, and a published type cannot name it. */
+export interface FeatureItem {
+    text: string;
+    included: boolean;
+}

package/dist/useCurrentPlan.d.ts

@@ -14,9 +14,9 @@ import type { CurrentPlan, Plan } from "./types.js";
  * - `connected_reward: "included"` RAISES the ceiling to
  *   `connected_included_units` while a machine is attached, awake or not,
  *   because a larger allowance is a promise about the month.
- * - `connected_reward: "unlimited"` raises nothing. It takes the runs their own
- *   AI SERVES out of the count, so the ceiling stays the plan's and the number
- *   simply stops rising for those runs.
+ * - Runs their own AI SERVES never count toward `included_units`: they have
+ *   their own allowance, `own_included_units` (INT-20). So the number here
+ *   only rises for runs the app pays for, whatever the reward.
  * - `credit` touches neither: it settles at renewal.
  *
  * Those last three mirror `allowanceFor` in `@soba-platform/core`, which is the
@@ -94,5 +94,11 @@ export interface CurrentPlanView {
     /** One sentence, already chosen from the state above. The thing a billing
      *  page has to get right and the reason this hook exists. */
     summary: string;
+    /**
+     * WHAT YOUR APP ENFORCES (INT-91): feature id to value, as this person
+     * bought it — `features.projects`, `features.export`. Soba stops nothing on
+     * these; everything above is what it does stop. Empty with no plan.
+     */
+    features: Record<string, boolean | number | string | null>;
 }
 export declare function useCurrentPlan(): CurrentPlanView;

package/dist/useFeature.d.ts

@@ -0,0 +1,27 @@
+import type { FeatureCheck } from "./types.js";
+/**
+ * MAY THIS PERSON DO THIS — for drawing the button, not for trusting it.
+ *
+ * The same rule the server's `soba.users.check` runs, applied in the browser
+ * to the plan the provider already holds: the features they bought, how many
+ * are in use, and whether a free plan's time is up. So a "New workspace"
+ * button can be drawn disabled, with the reason, before anyone presses it.
+ *
+ * It decides what to SHOW. What actually happens is still the server's call:
+ * create the workspace behind `soba.users.check(user, "workspaces", { use: 1 })`
+ * and the count and the limit are tested together. After a server-side
+ * `check` with `use` or a `track`, call `refresh()` for the new count.
+ */
+export interface FeatureView extends FeatureCheck {
+    /** The feature's name on the plan ("Workspaces"), or its id. */
+    name: string;
+    /** What it counts ("workspaces"), for "3 of 3 workspaces". */
+    unit: string | null;
+    loading: boolean;
+    error: Error | null;
+    /** Reload the plan and the counts. */
+    refresh(): Promise<void>;
+}
+export declare function useFeature(feature: string, options?: {
+    use?: number;
+}): FeatureView;