@tangle-network/sandbox-ui 0.19.0 → 0.20.2

package/dist/dashboard.d.ts

@@ -149,6 +149,54 @@ interface CreditBalanceProps {
 }
 declare function CreditBalance({ amount, description, onTopUp, quickAmounts, className, }: CreditBalanceProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Canonical "out of credits" UX, shared across every Tangle product.
+ *
+ * Backends emit a 402 with `{ error, code: "insufficient_balance", manageUrl,
+ * plan?, remainingBalanceUsd? }` when a billable action can't be funded. The
+ * frontend catches it, calls {@link parseInsufficientBalance} to extract the
+ * shape, and renders {@link OutOfCreditsModal} — a single "add credits /
+ * subscribe" CTA that links to the platform billing page (`manageUrl`).
+ *
+ * This replaces the per-app bespoke handling (silent failures, raw errors,
+ * un-clickable text) with one component so the funnel is uniform + testable.
+ */
+declare const INSUFFICIENT_BALANCE_CODE = "insufficient_balance";
+interface InsufficientBalance {
+    /** Platform billing URL to add credits / subscribe / connect a card. */
+    manageUrl: string;
+    /** Current plan, when the backend includes it. */
+    plan?: string;
+    /** Remaining balance (USD), when included. */
+    remainingBalanceUsd?: number;
+    /** Backend-supplied human message, when included. */
+    message?: string;
+}
+/**
+ * Detect + parse an insufficient-balance 402 from a parsed JSON body. Returns
+ * the typed shape when the body is an insufficient-balance error, else `null`.
+ * Falls back to the platform default billing URL when the backend omits
+ * `manageUrl` so the CTA is never dead.
+ */
+declare function parseInsufficientBalance(payload: unknown, opts?: {
+    defaultManageUrl?: string;
+}): InsufficientBalance | null;
+interface OutOfCreditsModalProps {
+    /** Parsed insufficient-balance details (from {@link parseInsufficientBalance}). */
+    balance: InsufficientBalance | null;
+    /** Dismiss handler. When omitted the modal cannot be closed (hard paywall). */
+    onClose?: () => void;
+    /** Override the primary CTA label. Default "Add credits". */
+    ctaLabel?: string;
+    className?: string;
+}
+/**
+ * Modal shown when a user runs out of credits. Renders nothing when
+ * `balance` is null. The primary CTA opens the platform billing page where
+ * the user can add credits, subscribe, or connect a card for pay-per-use.
+ */
+declare function OutOfCreditsModal({ balance, onClose, ctaLabel, className, }: OutOfCreditsModalProps): react_jsx_runtime.JSX.Element | null;
+
 interface ClusterStatusItem {
     icon?: React.ReactNode;
     label: string;
@@ -622,4 +670,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 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 };
+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, INSUFFICIENT_BALANCE_CODE, InfoPanel, type InfoPanelProps, type InsufficientBalance, type Invoice, InvoiceTable, type InvoiceTableProps, type McpServer, type NavItem, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, NewSandboxCard, type NewSandboxCardProps, OutOfCreditsModal, type OutOfCreditsModalProps, 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, parseInsufficientBalance, useSidebar };

package/dist/dashboard.js

@@ -7,9 +7,11 @@ import {
   GitPanel,
   HARNESS_OPTIONS,
   HarnessPicker,
+  INSUFFICIENT_BALANCE_CODE,
   InvoiceTable,
   NetworkConfig,
   NewSandboxCard,
+  OutOfCreditsModal,
   PlanCards,
   PortsList,
   ProcessList,
@@ -42,8 +44,9 @@ import {
   UsageSummary,
   VariantList,
   canAdminSandbox,
+  parseInsufficientBalance,
   useSidebar
-} from "./chunk-5I363RL7.js";
+} from "./chunk-R6QNJQRH.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -68,11 +71,13 @@ export {
   GitPanel,
   HARNESS_OPTIONS,
   HarnessPicker,
+  INSUFFICIENT_BALANCE_CODE,
   InfoPanel,
   InvoiceTable,
   ModelPicker,
   NetworkConfig,
   NewSandboxCard,
+  OutOfCreditsModal,
   PlanCards,
   PortsList,
   PricingPage,
@@ -112,5 +117,6 @@ export {
   formatContext,
   formatPrice,
   formatPricing,
+  parseInsufficientBalance,
   useSidebar
 };

package/dist/globals.css

@@ -601,6 +601,10 @@
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export { ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport,
 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, 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 { 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, INSUFFICIENT_BALANCE_CODE, InfoPanel, InfoPanelProps, InsufficientBalance, Invoice, InvoiceTable, InvoiceTableProps, McpServer, NavItem, NetworkConfig, NetworkConfigData, NetworkConfigProps, NewSandboxCard, NewSandboxCardProps, OutOfCreditsModal, OutOfCreditsModalProps, 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, parseInsufficientBalance, 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, P as PricingPage, h as PricingPageProps, i as PricingTier, T as TemplateCard, j as TemplateCardData, k as TemplateCardProps, U as UsageChart, l as UsageChartProps, m as UsageDataPoint, n as canonicalModelId, o as formatContext, p as formatPrice, q as formatPricing } from './template-card-gf-InrfN.js';
 export { AuthHeader, AuthHeaderProps, GitHubLoginButton, GitHubLoginButtonProps, LoginLayout, LoginLayoutProps, SessionUser, UserMenu, UserMenuProps } from '@tangle-network/ui/auth';
 export { TangleLoginButton, TangleLoginButtonProps } from './auth.js';

package/dist/index.js

@@ -143,9 +143,11 @@ import {
   GitPanel,
   HARNESS_OPTIONS,
   HarnessPicker,
+  INSUFFICIENT_BALANCE_CODE,
   InvoiceTable,
   NetworkConfig,
   NewSandboxCard,
+  OutOfCreditsModal,
   PlanCards,
   PortsList,
   ProcessList,
@@ -178,8 +180,9 @@ import {
   UsageSummary,
   VariantList,
   canAdminSandbox,
+  parseInsufficientBalance,
   useSidebar
-} from "./chunk-5I363RL7.js";
+} from "./chunk-R6QNJQRH.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -372,6 +375,7 @@ export {
   GrepResultsPreview,
   HARNESS_OPTIONS,
   HarnessPicker,
+  INSUFFICIENT_BALANCE_CODE,
   InfoPanel,
   InlineCode,
   InlineThinkingItem,
@@ -388,6 +392,7 @@ export {
   NetworkConfig,
   NewSandboxCard,
   OpenUIArtifactRenderer,
+  OutOfCreditsModal,
   PlanCards,
   PortsList,
   PricingPage,
@@ -518,6 +523,7 @@ export {
   hasBackgroundRunningSessions,
   isStreamingAtom,
   messagesAtom,
+  parseInsufficientBalance,
   partMapAtom,
   registerActiveSession,
   resetActiveSessions,

package/dist/integrations.js

@@ -20,6 +20,86 @@ function statusVariant(status) {
 function defaultConnectorOf(provider) {
   return provider.connectors?.[0]?.connectorId ?? provider.providerId;
 }
+var PROVIDER_LOGO_SLUGS = {
+  gmail: "gmail",
+  googlemail: "gmail",
+  google: "google",
+  "google-drive": "googledrive",
+  googledrive: "googledrive",
+  drive: "googledrive",
+  "google-calendar": "googlecalendar",
+  googlecalendar: "googlecalendar",
+  calendar: "googlecalendar",
+  "google-sheets": "googlesheets",
+  instagram: "instagram",
+  facebook: "facebook",
+  meta: "meta",
+  linkedin: "linkedin",
+  twitter: "x",
+  x: "x",
+  tiktok: "tiktok",
+  youtube: "youtube",
+  slack: "slack",
+  discord: "discord",
+  notion: "notion",
+  hubspot: "hubspot",
+  salesforce: "salesforce",
+  stripe: "stripe",
+  github: "github",
+  gitlab: "gitlab",
+  linear: "linear",
+  jira: "jira",
+  asana: "asana",
+  trello: "trello",
+  dropbox: "dropbox",
+  box: "box",
+  outlook: "microsoftoutlook",
+  "microsoft-outlook": "microsoftoutlook",
+  "microsoft-teams": "microsoftteams",
+  zoom: "zoom",
+  shopify: "shopify",
+  mailchimp: "mailchimp",
+  airtable: "airtable",
+  zendesk: "zendesk",
+  intercom: "intercom"
+};
+function normalizeProviderId(id) {
+  return id.toLowerCase().replace(/[_\s]+/g, "-").replace(/-(business|oauth|api|app|v\d+)$/g, "");
+}
+function providerLogoUrl(provider) {
+  if (provider.iconUrl) return provider.iconUrl;
+  const id = provider.providerId.toLowerCase();
+  const slug = PROVIDER_LOGO_SLUGS[id] ?? PROVIDER_LOGO_SLUGS[normalizeProviderId(id)];
+  return slug ? `https://cdn.simpleicons.org/${slug}` : void 0;
+}
+function ProviderLogo({ provider }) {
+  const [failed, setFailed] = React.useState(false);
+  const url = providerLogoUrl(provider);
+  const label = (provider.displayName ?? provider.providerId).trim();
+  const initial = label.charAt(0).toUpperCase() || "?";
+  if (!url || failed) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "flex size-6 shrink-0 items-center justify-center rounded bg-muted text-[11px] font-semibold text-muted-foreground",
+        "aria-hidden": true,
+        children: initial
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: url,
+      alt: "",
+      width: 24,
+      height: 24,
+      loading: "lazy",
+      className: "size-6 shrink-0 rounded object-contain",
+      onError: () => setFailed(true)
+    }
+  );
+}
 function buildConnectionIndex(connections) {
   const index = /* @__PURE__ */ new Map();
   for (const conn of connections) {
@@ -78,6 +158,7 @@ function IntegrationsPanel({
           /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-2 space-y-0", children: [
             /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(ProviderLogo, { provider }),
                 /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold capitalize text-foreground", children: headline }),
                 live ? /* @__PURE__ */ jsx(Badge, { variant: statusVariant(live.status), className: "text-xs", children: live.status }) : null
               ] }),

package/dist/styles.css

@@ -601,6 +601,10 @@
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }

package/package.json

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