@tangle-network/sandbox-ui 0.17.0 → 0.18.0

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, 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-Dufxl4hV.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';
 
 interface SidebarUser {
     email: string;

package/dist/dashboard.js

@@ -55,7 +55,7 @@ import {
   formatContext,
   formatPrice,
   formatPricing
-} from "./chunk-27X3DWMO.js";
+} from "./chunk-N5RYCDLD.js";
 import "./chunk-7ZA5SEK3.js";
 import "./chunk-EI44GEQ5.js";
 export {

package/dist/globals.css

@@ -390,6 +390,9 @@
       max-width: 96rem;
     }
   }
+  .mx-1 {
+    margin-inline: calc(var(--spacing) * 1);
+  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -588,6 +591,9 @@
   .h-\[3px\] {
     height: 3px;
   }
+  .h-\[72\%\] {
+    height: 72%;
+  }
   .h-\[500px\] {
     height: 500px;
   }
@@ -624,6 +630,9 @@
   .min-h-\[2px\] {
     min-height: 2px;
   }
+  .min-h-\[44px\] {
+    min-height: 44px;
+  }
   .min-h-\[72px\] {
     min-height: 72px;
   }
@@ -708,6 +717,9 @@
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
@@ -717,6 +729,9 @@
   .w-\[3px\] {
     width: 3px;
   }
+  .w-\[72\%\] {
+    width: 72%;
+  }
   .w-\[260px\] {
     width: 260px;
   }
@@ -789,6 +804,9 @@
   .max-w-\[460px\] {
     max-width: 460px;
   }
+  .max-w-\[480px\] {
+    max-width: 480px;
+  }
   .max-w-md {
     max-width: var(--container-md);
   }
@@ -819,6 +837,9 @@
   .min-w-\[320px\] {
     min-width: 320px;
   }
+  .min-w-\[360px\] {
+    min-width: 360px;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -1493,6 +1514,9 @@
     --tw-gradient-to: transparent;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .object-contain {
+    object-fit: contain;
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -2005,6 +2029,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2148,6 +2176,12 @@
       outline-style: none;
     }
   }
+  .placeholder\:font-normal {
+    &::placeholder {
+      --tw-font-weight: var(--font-weight-normal);
+      font-weight: var(--font-weight-normal);
+    }
+  }
   .after\:absolute {
     &::after {
       content: var(--tw-content);

package/dist/index.d.ts

@@ -4,11 +4,12 @@ export { CodeBlock as CodeBlockDisplay, Markdown, MarkdownProps } from '@tangle-
 export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, ApprovalQueueProps, AuditCheck, AuditResults, AuditResultsProps, BannerType, CalendarEvent, CalendarView, CalendarViewProps, ContextBadge, DirectoryPane, DirectoryPaneProps, FormAudit, RuntimePane, RuntimePaneProps, SandboxWorkbench, SandboxWorkbenchArtifact, SandboxWorkbenchCustomArtifact, SandboxWorkbenchFileArtifact, SandboxWorkbenchLayoutOptions, SandboxWorkbenchMarkdownArtifact, SandboxWorkbenchOpenUIArtifact, SandboxWorkbenchProps, SandboxWorkbenchSessionProps, SessionActivityMonitor, SessionActivityMonitorProps, SessionSidebar, SessionSidebarBadge, SessionSidebarFilter, SessionSidebarItem, SessionSidebarLink, SessionSidebarProps, StatusBanner, StatusBannerProps, StatusBar, StatusBarProps, TaskBoard, TaskBoardColumn, TaskBoardItem, TaskBoardProps, TerminalLine, TerminalPanel, TerminalProps, WorkspaceLayout, WorkspaceLayoutProps } from './workspace.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from '@tangle-network/ui/openui';
 export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatInput, ChatInputProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, PendingFile, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from '@tangle-network/ui/chat';
+export { ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, DEFAULT_REASONING_LEVEL_OPTIONS, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport } from './chat.js';
 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 { 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-Dufxl4hV.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';
 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';

package/dist/index.js

@@ -88,13 +88,17 @@ import {
 } from "./chunk-CMY7W45U.js";
 import {
   AgentTimeline,
+  ArtifactAgentDock,
   ChatContainer,
   ChatInput,
   ChatMessage,
+  DEFAULT_REASONING_LEVEL_OPTIONS,
   MessageList,
+  ReasoningLevelPicker,
   ThinkingIndicator,
-  UserMessage
-} from "./chunk-QPAJR74X.js";
+  UserMessage,
+  createFetchTransport
+} from "./chunk-CNVE6KOM.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
@@ -187,7 +191,7 @@ import {
   formatContext,
   formatPrice,
   formatPricing
-} from "./chunk-27X3DWMO.js";
+} from "./chunk-N5RYCDLD.js";
 import {
   Avatar,
   AvatarFallback,
@@ -298,6 +302,7 @@ export {
   AgentTimeline,
   AgentWorkbench,
   ApprovalQueue,
+  ArtifactAgentDock,
   ArtifactPane,
   AuditResults,
   AuthHeader,
@@ -325,6 +330,7 @@ export {
   CommandPreview,
   CopyButton,
   CreditBalance,
+  DEFAULT_REASONING_LEVEL_OPTIONS,
   DashboardLayout,
   Dialog,
   DialogClose,
@@ -396,6 +402,7 @@ export {
   RailModeButton,
   RailSeparator,
   RealtimeSessionRegistry,
+  ReasoningLevelPicker,
   ResourceMeter,
   RichFileTree,
   RunGroup,
@@ -489,6 +496,7 @@ export {
   connectSession,
   copyText,
   createAuthFetcher,
+  createFetchTransport,
   disconnectSession,
   filterFileTree,
   formatBytes,

package/dist/openui.d.ts

@@ -1,5 +1,4 @@
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from '@tangle-network/ui/openui';
-import '@tangle-network/ui/chat';
 import '@tangle-network/ui/run';
 import '@tangle-network/ui/files';
 import '@tangle-network/ui/utils';

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, m as UsageDataPoint, i as PricingTier, M as ModelInfo, j as TemplateCardData } from './template-card-Dufxl4hV.js';
+import { c as BillingSubscription, B as BillingBalance, d as BillingUsage, m as UsageDataPoint, i as PricingTier, M as ModelInfo, j as TemplateCardData } from './template-card-gf-InrfN.js';
 import * as React from 'react';
 
 type ProductVariant$1 = "sandbox";

package/dist/pages.js

@@ -6,7 +6,7 @@ import {
   TemplateCard,
   UsageChart,
   canonicalModelId
-} from "./chunk-27X3DWMO.js";
+} from "./chunk-N5RYCDLD.js";
 import {
   Badge,
   Button,

package/dist/styles.css

@@ -390,6 +390,9 @@
       max-width: 96rem;
     }
   }
+  .mx-1 {
+    margin-inline: calc(var(--spacing) * 1);
+  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -588,6 +591,9 @@
   .h-\[3px\] {
     height: 3px;
   }
+  .h-\[72\%\] {
+    height: 72%;
+  }
   .h-\[500px\] {
     height: 500px;
   }
@@ -624,6 +630,9 @@
   .min-h-\[2px\] {
     min-height: 2px;
   }
+  .min-h-\[44px\] {
+    min-height: 44px;
+  }
   .min-h-\[72px\] {
     min-height: 72px;
   }
@@ -708,6 +717,9 @@
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
@@ -717,6 +729,9 @@
   .w-\[3px\] {
     width: 3px;
   }
+  .w-\[72\%\] {
+    width: 72%;
+  }
   .w-\[260px\] {
     width: 260px;
   }
@@ -789,6 +804,9 @@
   .max-w-\[460px\] {
     max-width: 460px;
   }
+  .max-w-\[480px\] {
+    max-width: 480px;
+  }
   .max-w-md {
     max-width: var(--container-md);
   }
@@ -819,6 +837,9 @@
   .min-w-\[320px\] {
     min-width: 320px;
   }
+  .min-w-\[360px\] {
+    min-width: 360px;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -1493,6 +1514,9 @@
     --tw-gradient-to: transparent;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .object-contain {
+    object-fit: contain;
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -2005,6 +2029,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2148,6 +2176,12 @@
       outline-style: none;
     }
   }
+  .placeholder\:font-normal {
+    &::placeholder {
+      --tw-font-weight: var(--font-weight-normal);
+      font-weight: var(--font-weight-normal);
+    }
+  }
   .after\:absolute {
     &::after {
       content: var(--tw-content);

package/dist/{template-card-Dufxl4hV.d.ts → template-card-gf-InrfN.d.ts}

@@ -30,7 +30,19 @@ interface ModelInfo {
         input_modalities?: string[];
         output_modalities?: string[];
     };
+    /** Hosting company or router that serves the request. Defaults to `_provider` / `provider`. */
+    hostProvider?: string;
+    /** Lab/company that authored the model. Inferred from model id/name when omitted. */
+    modelLab?: string;
+    /** Optional explicit logo keys when provider/lab ids are not stable. */
+    logos?: {
+        host?: ModelBrandKey;
+        lab?: ModelBrandKey;
+        hostUrl?: string;
+        labUrl?: string;
+    };
 }
+type ModelBrandKey = "ai21" | "alibaba" | "anthropic" | "azure" | "bedrock" | "cartesia" | "cerebras" | "cohere" | "deepseek" | "elevenlabs" | "fal" | "fireworks" | "google" | "groq" | "kuaishou" | "luma" | "meta" | "mistral" | "moonshot" | "openai" | "openrouter" | "perplexity" | "pika" | "replicate" | "runway" | "stability" | "tangle" | "tcloud" | "together" | "vertex" | "xai" | "zai" | "unknown";
 type ModelPickerVariant = "field" | "pill";
 interface ModelPickerProps {
     /** Canonical model id (provider-prefixed, e.g. "openai/gpt-5.4"). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -136,6 +136,7 @@
     }
   },
   "dependencies": {
+    "@lobehub/icons-static-svg": "^1.90.0",
     "@radix-ui/react-dropdown-menu": "^2.1.0",
     "@radix-ui/react-select": "^2.1.0",
     "lucide-react": "^0.469.0",