@tangle-network/sandbox-ui 0.15.1 → 0.15.2

package/dist/dashboard.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-export { B as BillingBalance, a as BillingDashboard, b as BillingDashboardProps, c as BillingSubscription, d as BillingUsage, P as PricingPage, e as PricingPageProps, f as PricingTier, T as TemplateCard, g as TemplateCardData, h as TemplateCardProps, U as UsageChart, i as UsageChartProps, j as UsageDataPoint, k as formatPrice } from './template-card-UhV3pmRC.js';
+export { B as BillingBalance, a as BillingDashboard, b as BillingDashboardProps, c as BillingSubscription, d as BillingUsage, M as ModelInfo, e as ModelPicker, f as ModelPickerProps, g as ModelPickerVariant, h as ModelPreset, P as PricingPage, i as PricingPageProps, j as PricingTier, T as TemplateCard, k as TemplateCardData, l as TemplateCardProps, U as UsageChart, m as UsageChartProps, n as UsageDataPoint, o as canonicalModelId, p as formatContext, q as formatPrice, r as formatPricing } from './template-card-DStb8boW.js';
 
 interface SidebarUser {
     email: string;
@@ -320,94 +320,6 @@ interface HarnessPickerProps extends Omit<BackendSelectorProps, "backends" | "se
  */
 declare function HarnessPicker({ value, onChange, available, optionsOverride, label, ...rest }: HarnessPickerProps): react_jsx_runtime.JSX.Element;
 
-/**
- * Wire-format model entry as returned by `/v1/models` on the Tangle Router
- * (and most OpenAI-compatible gateways). Field names match the upstream
- * response so consumers can pass `data.data` straight through.
- */
-interface ModelInfo {
-    /** Provider-local id, e.g. "gpt-5.4" or "anthropic/claude-sonnet-4-6". */
-    id: string;
-    /** Human label (defaults to id if absent). */
-    name?: string;
-    /** Provider key, e.g. "openai", "anthropic". Underscored for compat with router. */
-    _provider?: string;
-    /** Alternative provider field on some gateways. */
-    provider?: string;
-    /**
-     * Per-token prices in USD as decimal strings. Multiply by 1_000_000 for
-     * the conventional $/M tokens display.
-     */
-    pricing?: {
-        prompt?: string | null;
-        completion?: string | null;
-    };
-    context_length?: number;
-    description?: string | null;
-    architecture?: {
-        modality?: string;
-        input_modalities?: string[];
-        output_modalities?: string[];
-    };
-}
-/**
- * Curated preset bucket. Three are surfaced by default — they map to typical
- * cost/quality tradeoffs without forcing the consumer to pick a specific
- * model. `match` resolves the preset against the loaded model list.
- */
-interface ModelPreset {
-    id: "fast" | "balanced" | "best" | string;
-    label: string;
-    hint: string;
-    icon?: React.ComponentType<{
-        className?: string;
-    }>;
-    /**
-     * Pick the canonical model id for this preset given the loaded list.
-     * Should return undefined if no acceptable model is loaded yet.
-     */
-    match: (models: ModelInfo[]) => string | undefined;
-}
-type ModelPickerVariant = "field" | "pill";
-interface ModelPickerProps {
-    /** Canonical model id (provider-prefixed, e.g. "openai/gpt-5.4"). */
-    value: string;
-    onChange: (modelId: string) => void;
-    /** Models to choose from. Pass `[]` while loading. */
-    models: ModelInfo[];
-    /** Show the loading state (overrides empty-list copy). */
-    loading?: boolean;
-    /** Recently-used canonical ids to surface at the top. */
-    recents?: ReadonlyArray<string>;
-    /**
-     * Curated presets shown above the full list. Defaults to Fast/Balanced/Best
-     * resolved against common gpt-5/Claude families.
-     */
-    presets?: ReadonlyArray<ModelPreset>;
-    /** Drop providers from the picker entirely (e.g. "audio", "embedding"). */
-    excludeProviders?: ReadonlyArray<string>;
-    /** Restrict to these architectures (e.g. ["text"]). Default: all. */
-    modalities?: ReadonlyArray<string>;
-    /** Trigger appearance. "field" = full-width form field; "pill" = inline chat input pill. */
-    variant?: ModelPickerVariant;
-    label?: string;
-    placeholder?: string;
-    className?: string;
-    disabled?: boolean;
-}
-/**
- * Resolve the canonical id for a model. Some upstreams already prefix the
- * provider in the id (e.g. "anthropic/claude-haiku-4.5"); others put it in
- * `_provider` and leave the id bare. Always returns "<provider>/<model>"
- * unless the id is already prefixed.
- */
-declare function canonicalModelId(model: ModelInfo): string;
-/** Format $/M tokens. Returns null if pricing is missing or zero. */
-declare function formatPricing(pricing: ModelInfo["pricing"]): string | null;
-/** Format context length compactly (e.g. 200_000 → "200k"). */
-declare function formatContext(ctx: number | undefined): string | null;
-declare function ModelPicker({ value, onChange, models, loading, recents, presets, excludeProviders, modalities, variant, label, placeholder, className, disabled, }: ModelPickerProps): react_jsx_runtime.JSX.Element;
-
 type ProductVariant = "sandbox";
 interface NavItem {
     id: string;
@@ -688,4 +600,4 @@ interface InfoPanelProps {
 }
 declare function InfoPanel({ label, title, description, className }: InfoPanelProps): react_jsx_runtime.JSX.Element;
 
-export { type Backend, BackendConfig, type BackendConfigProps, BackendSelector, type BackendSelectorProps, type BackendStatusData, ClusterStatusBar, type ClusterStatusBarProps, type ClusterStatusItem, CreditBalance, type CreditBalanceProps, DashboardLayout, type DashboardLayoutProps, type Profile as DashboardProfile, type SnapshotInfo as DashboardSnapshotInfo, type DashboardUser, type ExposedPort, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, HARNESS_OPTIONS, HarnessPicker, type HarnessPickerProps, type HarnessType, InfoPanel, type InfoPanelProps, type Invoice, InvoiceTable, type InvoiceTableProps, type McpServer, type ModelInfo, ModelPicker, type ModelPickerProps, type ModelPickerVariant, type ModelPreset, type NavItem, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, NewSandboxCard, type NewSandboxCardProps, type PlanCardData, PlanCards, type PlanCardsProps, type PlanFeature, PortsList, type PortsListProps, type ProcessInfo, ProcessList, type ProcessListProps, type ProductVariant, ProfileAvatar, type ProfileAvatarProps, ProfileComparison, type ProfileComparisonProps, ProfileSelector, type ProfileSelectorProps, PromoBanner, type PromoBannerProps, RailButton, type RailButtonProps, RailModeButton, type RailModeButtonProps, RailSeparator, type RailSeparatorProps, ResourceMeter, type ResourceMeterProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, type SandboxCardData, type SandboxCardProps, type SandboxStatus, SandboxTable, type SandboxTableProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarPanel, SidebarPanelContent, type SidebarPanelContentProps, SidebarPanelHeader, type SidebarPanelHeaderProps, type SidebarPanelProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarRailFooter, type SidebarRailFooterProps, SidebarRailHeader, type SidebarRailHeaderProps, SidebarRailNav, type SidebarRailNavProps, type SidebarRailProps, type SidebarUser, SnapshotList, type SnapshotListProps, SystemLogsViewer, type SystemLogsViewerProps, type TeamRole, UsageSummary, type UsageSummaryData, type UsageSummaryProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus, canAdminSandbox, canonicalModelId, formatContext, formatPricing, useSidebar };
+export { type Backend, BackendConfig, type BackendConfigProps, BackendSelector, type BackendSelectorProps, type BackendStatusData, ClusterStatusBar, type ClusterStatusBarProps, type ClusterStatusItem, CreditBalance, type CreditBalanceProps, DashboardLayout, type DashboardLayoutProps, type Profile as DashboardProfile, type SnapshotInfo as DashboardSnapshotInfo, type DashboardUser, type ExposedPort, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, HARNESS_OPTIONS, HarnessPicker, type HarnessPickerProps, type HarnessType, InfoPanel, type InfoPanelProps, type Invoice, InvoiceTable, type InvoiceTableProps, type McpServer, type NavItem, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, NewSandboxCard, type NewSandboxCardProps, type PlanCardData, PlanCards, type PlanCardsProps, type PlanFeature, PortsList, type PortsListProps, type ProcessInfo, ProcessList, type ProcessListProps, type ProductVariant, ProfileAvatar, type ProfileAvatarProps, ProfileComparison, type ProfileComparisonProps, ProfileSelector, type ProfileSelectorProps, PromoBanner, type PromoBannerProps, RailButton, type RailButtonProps, RailModeButton, type RailModeButtonProps, RailSeparator, type RailSeparatorProps, ResourceMeter, type ResourceMeterProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, type SandboxCardData, type SandboxCardProps, type SandboxStatus, SandboxTable, type SandboxTableProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarPanel, SidebarPanelContent, type SidebarPanelContentProps, SidebarPanelHeader, type SidebarPanelHeaderProps, type SidebarPanelProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarRailFooter, type SidebarRailFooterProps, SidebarRailHeader, type SidebarRailHeaderProps, SidebarRailNav, type SidebarRailNavProps, type SidebarRailProps, type SidebarUser, SnapshotList, type SnapshotListProps, SystemLogsViewer, type SystemLogsViewerProps, type TeamRole, UsageSummary, type UsageSummaryData, type UsageSummaryProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus, canAdminSandbox, useSidebar };

package/dist/dashboard.js

@@ -8,7 +8,6 @@ import {
   HARNESS_OPTIONS,
   HarnessPicker,
   InvoiceTable,
-  ModelPicker,
   NetworkConfig,
   NewSandboxCard,
   PlanCards,
@@ -43,19 +42,20 @@ import {
   UsageSummary,
   VariantList,
   canAdminSandbox,
-  canonicalModelId,
-  formatContext,
-  formatPricing,
   useSidebar
-} from "./chunk-AHBZCBDO.js";
+} from "./chunk-HLZTKSGT.js";
 import {
   BillingDashboard,
   InfoPanel,
+  ModelPicker,
   PricingPage,
   TemplateCard,
   UsageChart,
-  formatPrice
-} from "./chunk-DNZ4DTNA.js";
+  canonicalModelId,
+  formatContext,
+  formatPrice,
+  formatPricing
+} from "./chunk-ENMWGVDL.js";
 import "./chunk-7ZA5SEK3.js";
 import "./chunk-EI44GEQ5.js";
 export {

package/dist/index.d.ts

@@ -8,8 +8,8 @@ export { Collaborator, CollaboratorsList, ConnectionState, DocumentEditorBackend
 export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from '@tangle-network/ui/run';
 export { CommandPreview, DiffPreview, GlobResultsPreview, GrepResultsPreview, QuestionPreview, WebSearchPreview, WriteFilePreview } from '@tangle-network/ui/tool-previews';
 export { FileArtifactPane, FileArtifactPaneProps, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, filterFileTree } from '@tangle-network/ui/files';
-export { Backend, BackendConfig, BackendConfigProps, BackendSelector, BackendSelectorProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, ExposedPort, GitCommitData, GitPanel, GitPanelProps, GitStatusData, HARNESS_OPTIONS, HarnessPicker, HarnessPickerProps, HarnessType, InfoPanel, InfoPanelProps, Invoice, InvoiceTable, InvoiceTableProps, McpServer, ModelInfo, ModelPicker, ModelPickerProps, ModelPickerVariant, ModelPreset, NavItem, NetworkConfig, NetworkConfigData, NetworkConfigProps, NewSandboxCard, NewSandboxCardProps, PlanCardData, PlanCards, PlanCardsProps, PlanFeature, PortsList, PortsListProps, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailModeButton, RailModeButtonProps, RailSeparator, RailSeparatorProps, ResourceMeter, ResourceMeterProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxCardData, SandboxCardProps, SandboxStatus, SandboxTable, SandboxTableProps, Sidebar, SidebarContent, SidebarContentProps, SidebarPanel, SidebarPanelContent, SidebarPanelContentProps, SidebarPanelHeader, SidebarPanelHeaderProps, SidebarPanelProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailFooter, SidebarRailFooterProps, SidebarRailHeader, SidebarRailHeaderProps, SidebarRailNav, SidebarRailNavProps, SidebarRailProps, SidebarUser, SnapshotList, SnapshotListProps, SystemLogsViewer, SystemLogsViewerProps, TeamRole, UsageSummary, UsageSummaryData, UsageSummaryProps, Variant, VariantList, VariantListProps, VariantOutcome, VariantStatus, canAdminSandbox, canonicalModelId, formatContext, formatPricing, useSidebar } from './dashboard.js';
-export { B as BillingBalance, a as BillingDashboard, b as BillingDashboardProps, c as BillingSubscription, d as BillingUsage, P as PricingPage, e as PricingPageProps, f as PricingTier, T as TemplateCard, g as TemplateCardData, h as TemplateCardProps, U as UsageChart, i as UsageChartProps, j as UsageDataPoint, k as formatPrice } from './template-card-UhV3pmRC.js';
+export { Backend, BackendConfig, BackendConfigProps, BackendSelector, BackendSelectorProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, ExposedPort, GitCommitData, GitPanel, GitPanelProps, GitStatusData, HARNESS_OPTIONS, HarnessPicker, HarnessPickerProps, HarnessType, InfoPanel, InfoPanelProps, Invoice, InvoiceTable, InvoiceTableProps, McpServer, NavItem, NetworkConfig, NetworkConfigData, NetworkConfigProps, NewSandboxCard, NewSandboxCardProps, PlanCardData, PlanCards, PlanCardsProps, PlanFeature, PortsList, PortsListProps, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailModeButton, RailModeButtonProps, RailSeparator, RailSeparatorProps, ResourceMeter, ResourceMeterProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxCardData, SandboxCardProps, SandboxStatus, SandboxTable, SandboxTableProps, Sidebar, SidebarContent, SidebarContentProps, SidebarPanel, SidebarPanelContent, SidebarPanelContentProps, SidebarPanelHeader, SidebarPanelHeaderProps, SidebarPanelProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailFooter, SidebarRailFooterProps, SidebarRailHeader, SidebarRailHeaderProps, SidebarRailNav, SidebarRailNavProps, SidebarRailProps, SidebarUser, SnapshotList, SnapshotListProps, SystemLogsViewer, SystemLogsViewerProps, TeamRole, UsageSummary, UsageSummaryData, UsageSummaryProps, Variant, VariantList, VariantListProps, VariantOutcome, VariantStatus, canAdminSandbox, useSidebar } from './dashboard.js';
+export { B as BillingBalance, a as BillingDashboard, b as BillingDashboardProps, c as BillingSubscription, d as BillingUsage, M as ModelInfo, e as ModelPicker, f as ModelPickerProps, g as ModelPickerVariant, h as ModelPreset, P as PricingPage, i as PricingPageProps, j as PricingTier, T as TemplateCard, k as TemplateCardData, l as TemplateCardProps, U as UsageChart, m as UsageChartProps, n as UsageDataPoint, o as canonicalModelId, p as formatContext, q as formatPrice, r as formatPricing } from './template-card-DStb8boW.js';
 export { AuthHeader, AuthHeaderProps, GitHubLoginButton, GitHubLoginButtonProps, LoginLayout, LoginLayoutProps, SessionUser, UserMenu, UserMenuProps } from '@tangle-network/ui/auth';
 export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AuthUser, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, TaskStreamEvent, TerminalStreamEvent, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useLiveTime, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream } from '@tangle-network/ui/hooks';
 export { SandboxMetrics, SidecarMetricsPayload, UsePtySessionOptions, UsePtySessionReturn, UseSandboxMetricsOptions, UseSandboxMetricsResult, useCreateSession, useDeleteSession, usePtySession, useRenameSession, useSandboxMetrics, useSessions } from './hooks.js';

package/dist/index.js

@@ -153,7 +153,6 @@ import {
   HARNESS_OPTIONS,
   HarnessPicker,
   InvoiceTable,
-  ModelPicker,
   NetworkConfig,
   NewSandboxCard,
   PlanCards,
@@ -188,19 +187,20 @@ import {
   UsageSummary,
   VariantList,
   canAdminSandbox,
-  canonicalModelId,
-  formatContext,
-  formatPricing,
   useSidebar
-} from "./chunk-AHBZCBDO.js";
+} from "./chunk-HLZTKSGT.js";
 import {
   BillingDashboard,
   InfoPanel,
+  ModelPicker,
   PricingPage,
   TemplateCard,
   UsageChart,
-  formatPrice
-} from "./chunk-DNZ4DTNA.js";
+  canonicalModelId,
+  formatContext,
+  formatPrice,
+  formatPricing
+} from "./chunk-ENMWGVDL.js";
 import {
   Avatar,
   AvatarFallback,

package/dist/pages.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { c as BillingSubscription, B as BillingBalance, d as BillingUsage, j as UsageDataPoint, f as PricingTier, g as TemplateCardData } from './template-card-UhV3pmRC.js';
+import { c as BillingSubscription, B as BillingBalance, d as BillingUsage, n as UsageDataPoint, j as PricingTier, M as ModelInfo, k as TemplateCardData } from './template-card-DStb8boW.js';
 import * as React from 'react';
 
 type ProductVariant$1 = "sandbox";
@@ -38,11 +38,6 @@ interface ResourceLimits {
     ramMaxGB?: number;
     storageMaxGB?: number;
 }
-interface ModelOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-}
 interface PricingRates {
     cpuPerHr: number;
     ramPerGbHr: number;
@@ -81,8 +76,15 @@ interface ProvisioningWizardProps {
     onLoadStartupScripts?: () => Promise<StartupScriptEntry[]>;
     /** Plan-based resource limits — caps the slider maximums */
     resourceLimits?: ResourceLimits;
-    /** Override the list of model engines shown in step 3 */
-    modelOptions?: ModelOption[];
+    /**
+     * Models to surface in step 3, typically the wire-format payload from
+     * Tangle Router's `/v1/models`. The wizard stores the canonical id
+     * (`<provider>/<model>`) on `ProvisioningConfig.modelTier`, which is
+     * the same shape the API expects for `backend.model.model`. While the
+     * list is empty (e.g. router fetch in flight) the picker renders a
+     * disabled trigger with "no models available" copy.
+     */
+    models?: ModelInfo[];
     /** Real pricing rates from the API for accurate cost calculation */
     pricingRates?: PricingRates;
     /**
@@ -117,7 +119,7 @@ interface ProvisioningConfig {
     startupScriptIds?: string[];
 }
 declare function resolveEnvironment(env: EnvironmentEntry): EnvironmentOption;
-declare function ProvisioningWizard({ environments: environmentsProp, onLoadEnvironments, onSubmit, onBack, className, variant, defaultEnvironment, defaultConfig, skipToReview, onLoadStartupScripts, resourceLimits, modelOptions, pricingRates, planTiers, }: ProvisioningWizardProps): react_jsx_runtime.JSX.Element;
+declare function ProvisioningWizard({ environments: environmentsProp, onLoadEnvironments, onSubmit, onBack, className, variant, defaultEnvironment, defaultConfig, skipToReview, onLoadStartupScripts, resourceLimits, models, pricingRates, planTiers, }: ProvisioningWizardProps): react_jsx_runtime.JSX.Element;
 
 type ProductVariant = "sandbox";
 interface StandalonePricingPageProps {
@@ -280,7 +282,7 @@ interface StartupScriptsPageProps {
 declare function StartupScriptsPage({ apiClient, className }: StartupScriptsPageProps): react_jsx_runtime.JSX.Element;
 
 type TemplateCategory = "blockchain" | "ai-ml" | "frontend" | "infrastructure" | "general";
-type TemplatePreset = Omit<ProvisioningConfig, "name" | "gitUrl" | "envVars" | "driver" | "startupScriptIds">;
+type TemplatePreset = Omit<ProvisioningConfig, "name" | "gitUrl" | "envVars" | "driver" | "startupScriptIds" | "modelTier">;
 declare function getPresetForTemplate(id: string): TemplatePreset;
 
-export { BillingPage, type BillingPageData, type BillingPageProps, type EnvironmentEntry, type EnvironmentOption, type ModelOption, type PlanTierInfo, type PricingRates, PricingTier, type ProductVariant$1 as ProductVariant, type Profile, type ProfileFormData, type ProfileMetrics, ProfilesPage, type ProfilesPageProps, type ProvisioningConfig, ProvisioningWizard, type ProvisioningWizardProps, type ResourceLimits, type ScriptType, type Secret, type SecretsApiClient, SecretsPage, type SecretsPageProps, StandalonePricingPage, type StandalonePricingPageProps, type StartupScript, type StartupScriptEntry, type StartupScriptFormData, type StartupScriptsApiClient, StartupScriptsPage, type StartupScriptsPageProps, type TemplateCategory, type TemplatePreset, TemplatesPage, type TemplatesPageProps, getPresetForTemplate, resolveEnvironment };
+export { BillingPage, type BillingPageData, type BillingPageProps, type EnvironmentEntry, type EnvironmentOption, ModelInfo, type PlanTierInfo, type PricingRates, PricingTier, type ProductVariant$1 as ProductVariant, type Profile, type ProfileFormData, type ProfileMetrics, ProfilesPage, type ProfilesPageProps, type ProvisioningConfig, ProvisioningWizard, type ProvisioningWizardProps, type ResourceLimits, type ScriptType, type Secret, type SecretsApiClient, SecretsPage, type SecretsPageProps, StandalonePricingPage, type StandalonePricingPageProps, type StartupScript, type StartupScriptEntry, type StartupScriptFormData, type StartupScriptsApiClient, StartupScriptsPage, type StartupScriptsPageProps, type TemplateCategory, type TemplatePreset, TemplatesPage, type TemplatesPageProps, getPresetForTemplate, resolveEnvironment };

package/dist/pages.js

@@ -1,10 +1,12 @@
 import {
   BillingDashboard,
   InfoPanel,
+  ModelPicker,
   PricingPage,
   TemplateCard,
-  UsageChart
-} from "./chunk-DNZ4DTNA.js";
+  UsageChart,
+  canonicalModelId
+} from "./chunk-ENMWGVDL.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -287,10 +289,6 @@ var VALID_DRIVERS = /* @__PURE__ */ new Set([
   "firecracker",
   "tangle"
 ]);
-var DEFAULT_MODEL_OPTIONS = [
-  { value: "claude-sonnet", label: "Claude Sonnet 4.6 (Highly Capable)" }
-];
-var DEFAULT_MODEL_TIER = DEFAULT_MODEL_OPTIONS[0]?.value ?? "claude-sonnet";
 var STACK_DISPLAY = {
   universal: {
     name: "Default",
@@ -453,7 +451,7 @@ function ProvisioningWizard({
   skipToReview,
   onLoadStartupScripts,
   resourceLimits,
-  modelOptions,
+  models,
   pricingRates,
   planTiers
 }) {
@@ -539,23 +537,17 @@ function ProvisioningWizard({
       (prev) => snapSliderValue(prev, STORAGE_MIN, storageMax, storageStep)
     );
   }, [cpuMax, ramMax, storageMax, cpuStep, ramStep, storageStep]);
-  const [modelTier, setModelTier] = React2.useState(
-    dc?.modelTier ?? DEFAULT_MODEL_TIER
-  );
+  const [modelTier, setModelTier] = React2.useState(dc?.modelTier ?? "");
   const [systemPrompt, setSystemPrompt] = React2.useState(
     dc?.systemPrompt ?? ""
   );
   React2.useEffect(() => {
-    const options = modelOptions ?? DEFAULT_MODEL_OPTIONS;
-    if (options.length === 0) return;
-    const currentOption = options.find((o) => o.value === modelTier);
-    if (!currentOption || currentOption.disabled) {
-      const firstAvailable = options.find((o) => !o.disabled);
-      if (firstAvailable && firstAvailable.value !== modelTier) {
-        setModelTier(firstAvailable.value);
-      }
-    }
-  }, [modelOptions, modelTier]);
+    if (!models || models.length === 0) return;
+    const ids = models.map(canonicalModelId);
+    if (ids.includes(modelTier)) return;
+    const next = ids[0];
+    if (next && next !== modelTier) setModelTier(next);
+  }, [models, modelTier]);
   const [name, setName] = React2.useState(dc?.name ?? "");
   const [gitUrl, setGitUrl] = React2.useState(dc?.gitUrl ?? "");
   const [envVars, setEnvVars] = React2.useState(dc?.envVars ?? [{ key: "", value: "" }]);
@@ -755,11 +747,8 @@ function ProvisioningWizard({
                 setStorageGB(
                   snapSliderValue(128, STORAGE_MIN, storageMax, storageStep)
                 );
-                const resetOptions = modelOptions ?? DEFAULT_MODEL_OPTIONS;
-                const firstAvailable = resetOptions.find(
-                  (o) => !o.disabled
-                );
-                setModelTier(firstAvailable?.value ?? DEFAULT_MODEL_TIER);
+                const first = models?.[0];
+                setModelTier(first ? canonicalModelId(first) : "");
                 setSystemPrompt("");
                 setName("");
                 setGitUrl("");
@@ -954,27 +943,17 @@ function ProvisioningWizard({
               /* @__PURE__ */ jsxs2("div", { children: [
                 /* @__PURE__ */ jsx2("label", { className: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Model Engine" }),
                 /* @__PURE__ */ jsx2(
-                  "select",
+                  ModelPicker,
                   {
+                    label: "",
                     value: modelTier,
-                    onChange: (e) => setModelTier(e.target.value),
-                    disabled: modelOptions && modelOptions.filter((o) => !o.disabled).length === 0,
-                    className: "w-full bg-card border border-border rounded-xl h-12 px-4 font-bold text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none disabled:opacity-50 disabled:cursor-not-allowed",
-                    children: (modelOptions ?? DEFAULT_MODEL_OPTIONS).map(
-                      (option) => /* @__PURE__ */ jsx2(
-                        "option",
-                        {
-                          value: option.value,
-                          disabled: option.disabled,
-                          className: "bg-gray-900",
-                          children: option.label
-                        },
-                        option.value
-                      )
-                    )
+                    onChange: setModelTier,
+                    models: models ?? [],
+                    loading: !models,
+                    disabled: !models || models.length === 0,
+                    triggerClassName: "rounded-xl h-12 px-4 font-bold"
                   }
-                ),
-                modelOptions && modelOptions.length > 0 && modelOptions.every((o) => o.disabled) && /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground mt-2", children: "All model options are currently disabled. Please upgrade your plan or contact support." })
+                )
               ] }),
               /* @__PURE__ */ jsxs2("div", { children: [
                 /* @__PURE__ */ jsx2("label", { className: "block font-label text-xs font-bold uppercase tracking-widest text-muted-foreground mb-2", children: "Core Directives (System Prompt)" }),
@@ -1334,7 +1313,7 @@ function ProvisioningWizard({
             {
               type: "button",
               onClick: handleDeploy,
-              disabled: isDeploying || !selectedEnv,
+              disabled: isDeploying || !selectedEnv || !modelTier && !bare,
               className: "w-full h-12 bg-primary text-primary-foreground font-extrabold text-sm rounded-2xl tracking-wide shadow-md disabled:opacity-50 hover:brightness-110 active:scale-[0.98] transition-all",
               children: isDeploying ? /* @__PURE__ */ jsxs2("span", { className: "flex items-center justify-center gap-2", children: [
                 /* @__PURE__ */ jsx2(Loader2, { className: "h-4 w-4 animate-spin" }),
@@ -1356,7 +1335,7 @@ function ProvisioningWizard({
           {
             type: "button",
             onClick: handleDeploy,
-            disabled: isDeploying || !selectedEnv,
+            disabled: isDeploying || !selectedEnv || !modelTier && !bare,
             className: "w-full h-12 bg-primary text-primary-foreground font-extrabold text-sm rounded-2xl tracking-wide shadow-md disabled:opacity-50 hover:brightness-110 active:scale-[0.98] transition-all",
             children: isDeploying ? /* @__PURE__ */ jsxs2("span", { className: "flex items-center justify-center gap-2", children: [
               /* @__PURE__ */ jsx2(Loader2, { className: "h-4 w-4 animate-spin" }),
@@ -3576,7 +3555,6 @@ var CATEGORY_DEFAULTS = {
     cpuCores: 4,
     ramGB: 16,
     storageGB: 128,
-    modelTier: "claude-sonnet",
     systemPrompt: "You are a blockchain development assistant. Help with smart contract development, testing, and deployment. Follow security best practices and suggest gas optimizations where relevant.",
     bare: false
   },
@@ -3585,7 +3563,6 @@ var CATEGORY_DEFAULTS = {
     cpuCores: 8,
     ramGB: 32,
     storageGB: 256,
-    modelTier: "claude-sonnet",
     systemPrompt: "You are an AI/ML development assistant. Help with model training, data processing, and experiment management. Suggest efficient approaches for the available compute resources.",
     bare: false
   },
@@ -3594,7 +3571,6 @@ var CATEGORY_DEFAULTS = {
     cpuCores: 2,
     ramGB: 4,
     storageGB: 50,
-    modelTier: "claude-sonnet",
     systemPrompt: "You are a frontend development assistant. Help build modern, accessible, and performant user interfaces.",
     bare: false
   },
@@ -3603,7 +3579,6 @@ var CATEGORY_DEFAULTS = {
     cpuCores: 4,
     ramGB: 16,
     storageGB: 128,
-    modelTier: "claude-sonnet",
     systemPrompt: "You are an infrastructure and DevOps assistant. Help with service configuration, deployment, monitoring, and operational best practices.",
     bare: false
   },
@@ -3612,7 +3587,6 @@ var CATEGORY_DEFAULTS = {
     cpuCores: 4,
     ramGB: 16,
     storageGB: 128,
-    modelTier: "claude-sonnet",
     systemPrompt: "",
     bare: false
   }

package/dist/template-card-DStb8boW.d.ts

@@ -0,0 +1,183 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * Wire-format model entry as returned by `/v1/models` on the Tangle Router
+ * (and most OpenAI-compatible gateways). Field names match the upstream
+ * response so consumers can pass `data.data` straight through.
+ */
+interface ModelInfo {
+    /** Provider-local id, e.g. "gpt-5.4" or "anthropic/claude-sonnet-4-6". */
+    id: string;
+    /** Human label (defaults to id if absent). */
+    name?: string;
+    /** Provider key, e.g. "openai", "anthropic". Underscored for compat with router. */
+    _provider?: string;
+    /** Alternative provider field on some gateways. */
+    provider?: string;
+    /**
+     * Per-token prices in USD as decimal strings. Multiply by 1_000_000 for
+     * the conventional $/M tokens display.
+     */
+    pricing?: {
+        prompt?: string | null;
+        completion?: string | null;
+    };
+    context_length?: number;
+    description?: string | null;
+    architecture?: {
+        modality?: string;
+        input_modalities?: string[];
+        output_modalities?: string[];
+    };
+}
+/**
+ * Curated preset bucket. Three are surfaced by default — they map to typical
+ * cost/quality tradeoffs without forcing the consumer to pick a specific
+ * model. `match` resolves the preset against the loaded model list.
+ */
+interface ModelPreset {
+    id: "fast" | "balanced" | "best" | string;
+    label: string;
+    hint: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    /**
+     * Pick the canonical model id for this preset given the loaded list.
+     * Should return undefined if no acceptable model is loaded yet.
+     */
+    match: (models: ModelInfo[]) => string | undefined;
+}
+type ModelPickerVariant = "field" | "pill";
+interface ModelPickerProps {
+    /** Canonical model id (provider-prefixed, e.g. "openai/gpt-5.4"). */
+    value: string;
+    onChange: (modelId: string) => void;
+    /** Models to choose from. Pass `[]` while loading. */
+    models: ModelInfo[];
+    /** Show the loading state (overrides empty-list copy). */
+    loading?: boolean;
+    /** Recently-used canonical ids to surface at the top. */
+    recents?: ReadonlyArray<string>;
+    /**
+     * Curated presets shown above the full list. Defaults to Fast/Balanced/Best
+     * resolved against common gpt-5/Claude families.
+     */
+    presets?: ReadonlyArray<ModelPreset>;
+    /** Drop providers from the picker entirely (e.g. "audio", "embedding"). */
+    excludeProviders?: ReadonlyArray<string>;
+    /** Restrict to these architectures (e.g. ["text"]). Default: all. */
+    modalities?: ReadonlyArray<string>;
+    /** Trigger appearance. "field" = full-width form field; "pill" = inline chat input pill. */
+    variant?: ModelPickerVariant;
+    label?: string;
+    placeholder?: string;
+    className?: string;
+    /**
+     * Extra classes merged onto the trigger button itself (after the
+     * built-in defaults, so callers can override sizing/radius/font to
+     * match a surrounding form). Distinct from `className`, which on the
+     * "field" variant styles the outer wrapper.
+     */
+    triggerClassName?: string;
+    disabled?: boolean;
+}
+/**
+ * Resolve the canonical id for a model. Some upstreams already prefix the
+ * provider in the id (e.g. "anthropic/claude-haiku-4.5"); others put it in
+ * `_provider` and leave the id bare. Always returns "<provider>/<model>"
+ * unless the id is already prefixed.
+ */
+declare function canonicalModelId(model: ModelInfo): string;
+/** Format $/M tokens. Returns null if pricing is missing or zero. */
+declare function formatPricing(pricing: ModelInfo["pricing"]): string | null;
+/** Format context length compactly (e.g. 200_000 → "200k"). */
+declare function formatContext(ctx: number | undefined): string | null;
+declare function ModelPicker({ value, onChange, models, loading, recents, presets, excludeProviders, modalities, variant, label, placeholder, className, triggerClassName, disabled, }: ModelPickerProps): react_jsx_runtime.JSX.Element;
+
+interface BillingSubscription {
+    status: string;
+    tierName: string;
+    renewsAt: string;
+}
+interface BillingBalance {
+    available: number;
+    used: number;
+}
+interface BillingUsage {
+    period: string;
+    total: number;
+    byModel: Record<string, number>;
+}
+interface BillingDashboardProps {
+    subscription: BillingSubscription | null;
+    balance: BillingBalance;
+    usage: BillingUsage;
+    onManageSubscription: () => void;
+    onAddCredits: () => void;
+    variant?: "sandbox";
+    className?: string;
+    cardClassName?: string;
+}
+declare function BillingDashboard({ subscription, balance, usage, onManageSubscription, onAddCredits, variant, className, cardClassName, }: BillingDashboardProps): react_jsx_runtime.JSX.Element;
+
+interface PricingTier {
+    id: string;
+    name: string;
+    description: string;
+    monthlyPriceCents: number;
+    yearlyPriceCents?: number;
+    features: string[];
+    recommended?: boolean;
+    creditsPerMonth?: number;
+    monthlyPriceId?: string;
+    yearlyPriceId?: string;
+}
+interface PricingPageProps {
+    tiers: PricingTier[];
+    currentTierId?: string;
+    billingPeriod: "monthly" | "yearly";
+    onBillingPeriodChange: (period: "monthly" | "yearly") => void;
+    onSelectTier: (tierId: string) => void;
+    variant?: "sandbox";
+    loading?: boolean;
+    className?: string;
+    cardClassName?: string;
+}
+/**
+ * Formats an integer cent amount as a human-readable USD price.
+ * Whole-dollar amounts omit decimals ($10), fractional amounts show two ($10.99).
+ * Returns "$0" for non-finite or negative inputs.
+ * @param cents - Amount in whole US cents (e.g. 1099 for $10.99).
+ */
+declare function formatPrice(cents: number): string;
+declare function PricingPage({ tiers, currentTierId, billingPeriod, onBillingPeriodChange, onSelectTier, loading, className, }: PricingPageProps): react_jsx_runtime.JSX.Element;
+
+interface UsageDataPoint {
+    date: string;
+    value: number;
+}
+interface UsageChartProps {
+    data: UsageDataPoint[];
+    title: string;
+    unit: string;
+    className?: string;
+}
+declare function UsageChart({ data, title, unit, className }: UsageChartProps): react_jsx_runtime.JSX.Element;
+
+interface TemplateCardData {
+    id: string;
+    name: string;
+    description: string;
+    icon?: React.ReactNode;
+    tags?: string[];
+}
+interface TemplateCardProps {
+    template: TemplateCardData;
+    onUseTemplate: (templateId: string) => void;
+    className?: string;
+}
+declare function TemplateCard({ template, onUseTemplate, className }: TemplateCardProps): react_jsx_runtime.JSX.Element;
+
+export { type BillingBalance as B, type ModelInfo as M, PricingPage as P, TemplateCard as T, UsageChart as U, BillingDashboard as a, type BillingDashboardProps as b, type BillingSubscription as c, type BillingUsage as d, ModelPicker as e, type ModelPickerProps as f, type ModelPickerVariant as g, type ModelPreset as h, type PricingPageProps as i, type PricingTier as j, type TemplateCardData as k, type TemplateCardProps as l, type UsageChartProps as m, type UsageDataPoint as n, canonicalModelId as o, formatContext as p, formatPrice as q, formatPricing as r };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",