@tangle-network/sandbox-ui 0.97.0 → 0.99.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,9 +2,7 @@ import * as React from 'react';
2
2
  import React__default, { ReactNode } from 'react';
3
3
  import { HarnessType } from '@tangle-network/agent-interface';
4
4
  export { HarnessType } from '@tangle-network/agent-interface';
5
- import * as Popover from '@radix-ui/react-dropdown-menu';
6
- import { b as ModelInfo } from './model-brand-CuXKfTMh.js';
7
- export { M as ModelBrandIdentity, a as ModelBrandStack, c as canonicalModelId, m as modelBrandFor } from './model-brand-CuXKfTMh.js';
5
+ export { M as ModelBrandIdentity, a as ModelBrandStack, b as ModelInfo, c as canonicalModelId, m as modelBrandFor } from './model-brand-BNnaUKKZ.js';
8
6
  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-Bn-Bw5xC.js';
9
7
  export { E as ExposedPort, P as PortsList, a as PortsListProps } from './ports-list-CDIvTNnX.js';
10
8
 
@@ -705,10 +703,10 @@ interface BackendSelectorProps {
705
703
  selected: string;
706
704
  onChange: (selected: string) => void;
707
705
  /**
708
- * Trigger appearance. "pill" (default) = compact inline pill matching the
709
- * ModelPicker pill — logo + short label only. "field" = full-width form
710
- * field with a label above. Either way the long descriptor lives only as
711
- * subtext inside the open dropdown, never on the closed trigger.
706
+ * Trigger appearance. "pill" (default) = compact inline pill — logo + short
707
+ * label only. "field" = full-width form field with a label above. Either
708
+ * way the long descriptor lives only as subtext inside the open dropdown,
709
+ * never on the closed trigger.
712
710
  */
713
711
  variant?: BackendSelectorVariant;
714
712
  label?: string;
@@ -781,89 +779,13 @@ interface HarnessLogoProps {
781
779
  className?: string;
782
780
  }
783
781
  /**
784
- * Brand chip for a harness, matching {@link BrandLogo}'s render contract in
785
- * model-picker: a rounded `bg-background ring-1 ring-border` chip wrapping
782
+ * Brand chip for a harness, matching `BrandLogo`'s render contract in
783
+ * `lib/model-brand`: a rounded `bg-background ring-1 ring-border` chip wrapping
786
784
  * either a foreground-filled CSS-mask of the brand SVG or a lucide fallback
787
785
  * glyph. Keeps harness pills visually consistent with model pills.
788
786
  */
789
787
  declare function HarnessLogo({ type, size, className }: HarnessLogoProps): React.JSX.Element;
790
788
 
791
- type ModelPickerVariant = "field" | "pill";
792
- interface ModelPickerProps {
793
- /** Canonical model id (provider-prefixed, e.g. "openai/gpt-5.4"). */
794
- value: string;
795
- onChange: (modelId: string) => void;
796
- /** Models to choose from. Pass `[]` while loading. */
797
- models: ModelInfo[];
798
- /** Show the loading state (overrides empty-list copy). */
799
- loading?: boolean;
800
- /** Recently-used canonical ids to surface at the top. */
801
- recents?: ReadonlyArray<string>;
802
- /**
803
- * Canonical model ids to surface in a "Popular" section above the full
804
- * list. Each id is resolved against `models`; ids not present in the
805
- * loaded catalog are silently skipped, so callers can pass a stable
806
- * curation list without worrying about provider availability.
807
- */
808
- popular?: ReadonlyArray<string>;
809
- /** Drop providers from the picker entirely (e.g. "audio", "embedding"). */
810
- excludeProviders?: ReadonlyArray<string>;
811
- /** Restrict to these architectures (e.g. ["text"]). Default: all. */
812
- modalities?: ReadonlyArray<string>;
813
- /** Trigger appearance. "field" = full-width form field; "pill" = inline chat input pill. */
814
- variant?: ModelPickerVariant;
815
- label?: string;
816
- placeholder?: string;
817
- className?: string;
818
- /**
819
- * Extra classes merged onto the trigger button itself (after the
820
- * built-in defaults, so callers can override sizing/radius/font to
821
- * match a surrounding form). Distinct from `className`, which on the
822
- * "field" variant styles the outer wrapper.
823
- */
824
- triggerClassName?: string;
825
- disabled?: boolean;
826
- /** Side the menu opens toward. Defaults to Radix's "bottom". */
827
- side?: Popover.DropdownMenuContentProps["side"];
828
- /**
829
- * Let Radix flip the menu to the opposite side when it would overflow the
830
- * viewport. Defaults to `true` (Radix default). Pass `false` to pin the menu
831
- * to `side` — e.g. a composer floating in open space that should always open
832
- * downward rather than flipping up over the heading.
833
- */
834
- avoidCollisions?: boolean;
835
- }
836
- /**
837
- * Stable key used to collapse catalog duplicates. The Tangle Router lists the
838
- * same underlying model under several host prefixes (e.g. `openai/gpt-5.4`,
839
- * `tcloud/gpt-5.4`, `openrouter/openai/gpt-5.4`); they all name one model and
840
- * should occupy a single row. The key is `<lab>/<model-id>`: the authoring lab
841
- * (inferred via {@link resolveModelBrandIdentity}, which already maps
842
- * `gpt-5.4` → openai, `kimi-k2` → moonshot, etc.) plus the final id segment,
843
- * so a model collapses to one identity regardless of which host serves it.
844
- */
845
- declare function modelDedupKey(model: ModelInfo): string;
846
- /**
847
- * Collapse catalog duplicates to one row per {@link modelDedupKey}. When a
848
- * model is served under multiple hosts the preferred row wins: a `featured`
849
- * row beats a non-featured one, otherwise the first occurrence is kept (so
850
- * caller-controlled catalog order still decides ties). Input order is
851
- * preserved for the surviving rows.
852
- */
853
- declare function dedupeModels(models: ReadonlyArray<ModelInfo>): ModelInfo[];
854
- /**
855
- * Fallback "Recommended" seed — latest frontier models per major lab, matched
856
- * by {@link modelDedupKey} against the loaded catalog. Used only when no
857
- * catalog row carries an explicit `featured` flag, so a standard router
858
- * catalog still gets a curated top section without per-deployment config.
859
- */
860
- declare const DEFAULT_FEATURED_MODEL_IDS: ReadonlyArray<string>;
861
- /** Format $/M tokens. Returns null if pricing is missing or zero. */
862
- declare function formatPricing(pricing: ModelInfo["pricing"]): string | null;
863
- /** Format context length compactly (e.g. 200_000 → "200k"). */
864
- declare function formatContext(ctx: number | undefined): string | null;
865
- declare function ModelPicker({ value, onChange, models, loading, recents, popular, excludeProviders, modalities, variant, label, placeholder, className, triggerClassName, disabled, side, avoidCollisions, }: ModelPickerProps): React.JSX.Element;
866
-
867
789
  type ProductVariant = "sandbox";
868
790
  interface NavItem {
869
791
  id: string;
@@ -1353,4 +1275,4 @@ interface InfoPanelProps {
1353
1275
  }
1354
1276
  declare function InfoPanel({ label, title, description, className }: InfoPanelProps): React.JSX.Element;
1355
1277
 
1356
- export { ActivityFeed, type ActivityFeedProps, type ActivityItem, type AppearanceController, type Backend, BackendConfig, type BackendConfigProps, BackendSelector, type BackendSelectorProps, type BackendStatusData, ClusterStatusBar, type ClusterStatusBarProps, type ClusterStatusItem, CreditBalance, type CreditBalanceProps, DEFAULT_FEATURED_MODEL_IDS, DashboardLayout, type DashboardLayoutProps, type Profile as DashboardProfile, type SnapshotInfo as DashboardSnapshotInfo, type DashboardUser, type GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, HARNESS_BRAND, HARNESS_OPTIONS, type HarnessBrand, HarnessLogo, type HarnessLogoProps, HarnessPicker, type HarnessPickerProps, INSUFFICIENT_BALANCE_CODE, InfoPanel, type InfoPanelProps, type InsufficientBalance, type Invoice, InvoiceTable, type InvoiceTableProps, type McpServer, MetricAreaChart, type MetricAreaChartProps, type MetricChartPoint, type MetricChartTone, ModelInfo, ModelPicker, type ModelPickerProps, type ModelPickerVariant, type NavItem, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, NewSandboxCard, type NewSandboxCardProps, OutOfCreditsModal, type OutOfCreditsModalProps, type PlanCardData, PlanCards, type PlanCardsProps, type PlanFeature, type ProcessInfo, ProcessList, type ProcessListProps, type ProductVariant, ProfileAvatar, type ProfileAvatarProps, ProfileComparison, type ProfileComparisonProps, ProfileSelector, type ProfileSelectorProps, PromoBanner, type PromoBannerProps, RailButton, type RailButtonProps, RailCollapseToggle, type RailCollapseToggleProps, RailExpandable, type RailExpandableProps, type RailExpandableSubItem, RailFlyout, type RailFlyoutProps, RailHeader, type RailHeaderProps, RailModeButton, type RailModeButtonProps, RailSeparator, type RailSeparatorProps, RailThemeToggle, RailTooltip, type RailTooltipProps, ResourceMeter, type ResourceMeterProps, ResourceSnapshot, type ResourceSnapshotItem, type ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, type SandboxCardData, type SandboxCardProps, type SandboxStatus, SandboxTable, type SandboxTableProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarLayout, type SidebarLayoutFlyoutItem, type SidebarLayoutNavItem, type SidebarLayoutProps, 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, type ThemeMode, UsageSummary, type UsageSummaryData, type UsageSummaryProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus, canAdminSandbox, chatCapableHarnesses, dedupeModels, formatContext, formatPricing, modelDedupKey, parseInsufficientBalance, useSidebar };
1278
+ export { ActivityFeed, type ActivityFeedProps, type ActivityItem, type AppearanceController, 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 GitCommitData, GitPanel, type GitPanelProps, type GitStatusData, HARNESS_BRAND, HARNESS_OPTIONS, type HarnessBrand, HarnessLogo, type HarnessLogoProps, HarnessPicker, type HarnessPickerProps, INSUFFICIENT_BALANCE_CODE, InfoPanel, type InfoPanelProps, type InsufficientBalance, type Invoice, InvoiceTable, type InvoiceTableProps, type McpServer, MetricAreaChart, type MetricAreaChartProps, type MetricChartPoint, type MetricChartTone, type NavItem, NetworkConfig, type NetworkConfigData, type NetworkConfigProps, NewSandboxCard, type NewSandboxCardProps, OutOfCreditsModal, type OutOfCreditsModalProps, type PlanCardData, PlanCards, type PlanCardsProps, type PlanFeature, type ProcessInfo, ProcessList, type ProcessListProps, type ProductVariant, ProfileAvatar, type ProfileAvatarProps, ProfileComparison, type ProfileComparisonProps, ProfileSelector, type ProfileSelectorProps, PromoBanner, type PromoBannerProps, RailButton, type RailButtonProps, RailCollapseToggle, type RailCollapseToggleProps, RailExpandable, type RailExpandableProps, type RailExpandableSubItem, RailFlyout, type RailFlyoutProps, RailHeader, type RailHeaderProps, RailModeButton, type RailModeButtonProps, RailSeparator, type RailSeparatorProps, RailThemeToggle, RailTooltip, type RailTooltipProps, ResourceMeter, type ResourceMeterProps, ResourceSnapshot, type ResourceSnapshotItem, type ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, type SandboxCardData, type SandboxCardProps, type SandboxStatus, SandboxTable, type SandboxTableProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarLayout, type SidebarLayoutFlyoutItem, type SidebarLayoutNavItem, type SidebarLayoutProps, 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, type ThemeMode, UsageSummary, type UsageSummaryData, type UsageSummaryProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus, canAdminSandbox, chatCapableHarnesses, parseInsufficientBalance, useSidebar };
package/dist/dashboard.js CHANGED
@@ -1,10 +1,15 @@
1
1
  import {
2
2
  ActivityFeed,
3
3
  BackendConfig,
4
+ BackendSelector,
4
5
  ClusterStatusBar,
5
6
  CreditBalance,
6
7
  DashboardLayout,
7
8
  GitPanel,
9
+ HARNESS_BRAND,
10
+ HARNESS_OPTIONS,
11
+ HarnessLogo,
12
+ HarnessPicker,
8
13
  INSUFFICIENT_BALANCE_CODE,
9
14
  InvoiceTable,
10
15
  MetricAreaChart,
@@ -52,9 +57,10 @@ import {
52
57
  UsageSummary,
53
58
  VariantList,
54
59
  canAdminSandbox,
60
+ chatCapableHarnesses,
55
61
  parseInsufficientBalance,
56
62
  useSidebar
57
- } from "./chunk-VQZ6XDRR.js";
63
+ } from "./chunk-Y4OTBMZS.js";
58
64
  import {
59
65
  BillingDashboard,
60
66
  InfoPanel,
@@ -64,27 +70,11 @@ import {
64
70
  formatPrice
65
71
  } from "./chunk-OMUIPJQZ.js";
66
72
  import "./chunk-4ZZUMXPX.js";
67
- import {
68
- BackendSelector,
69
- HARNESS_BRAND,
70
- HARNESS_OPTIONS,
71
- HarnessLogo,
72
- HarnessPicker,
73
- chatCapableHarnesses
74
- } from "./chunk-WSN2RZC6.js";
75
- import {
76
- DEFAULT_FEATURED_MODEL_IDS,
77
- ModelPicker,
78
- dedupeModels,
79
- formatContext,
80
- formatPricing,
81
- modelDedupKey
82
- } from "./chunk-WMVUJ5SA.js";
83
73
  import {
84
74
  ModelBrandStack,
85
75
  canonicalModelId,
86
76
  modelBrandFor
87
- } from "./chunk-5XRAKVIV.js";
77
+ } from "./chunk-RQZRXKMR.js";
88
78
  import "./chunk-EI44GEQ5.js";
89
79
  import "./chunk-CZ7CSFO4.js";
90
80
  export {
@@ -94,7 +84,6 @@ export {
94
84
  BillingDashboard,
95
85
  ClusterStatusBar,
96
86
  CreditBalance,
97
- DEFAULT_FEATURED_MODEL_IDS,
98
87
  DashboardLayout,
99
88
  GitPanel,
100
89
  HARNESS_BRAND,
@@ -106,7 +95,6 @@ export {
106
95
  InvoiceTable,
107
96
  MetricAreaChart,
108
97
  ModelBrandStack,
109
- ModelPicker,
110
98
  NetworkConfig,
111
99
  NewSandboxCard,
112
100
  OutOfCreditsModal,
@@ -156,12 +144,8 @@ export {
156
144
  canAdminSandbox,
157
145
  canonicalModelId,
158
146
  chatCapableHarnesses,
159
- dedupeModels,
160
- formatContext,
161
147
  formatPrice,
162
- formatPricing,
163
148
  modelBrandFor,
164
- modelDedupKey,
165
149
  parseInsufficientBalance,
166
150
  useSidebar
167
151
  };
package/dist/globals.css CHANGED
@@ -685,9 +685,6 @@
685
685
  .table {
686
686
  display: table;
687
687
  }
688
- .table-row {
689
- display: table-row;
690
- }
691
688
  .aspect-\[9\/16\] {
692
689
  aspect-ratio: 9/16;
693
690
  }
@@ -916,9 +913,6 @@
916
913
  .max-h-\[min\(60vh\,420px\)\] {
917
914
  max-height: min(60vh, 420px);
918
915
  }
919
- .max-h-\[min\(440px\,var\(--radix-dropdown-menu-content-available-height\)\)\] {
920
- max-height: min(440px, var(--radix-dropdown-menu-content-available-height));
921
- }
922
916
  .max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
923
917
  max-height: var(--radix-dropdown-menu-content-available-height);
924
918
  }
@@ -976,9 +970,6 @@
976
970
  .min-h-\[300px\] {
977
971
  min-height: 300px;
978
972
  }
979
- .min-h-\[560px\] {
980
- min-height: 560px;
981
- }
982
973
  .min-h-\[640px\] {
983
974
  min-height: 640px;
984
975
  }
@@ -1171,9 +1162,6 @@
1171
1162
  .w-\[680px\] {
1172
1163
  width: 680px;
1173
1164
  }
1174
- .w-\[720px\] {
1175
- width: 720px;
1176
- }
1177
1165
  .w-\[760px\] {
1178
1166
  width: 760px;
1179
1167
  }
@@ -1201,9 +1189,6 @@
1201
1189
  .w-\[var\(--indicator-dot-size\)\] {
1202
1190
  width: var(--indicator-dot-size);
1203
1191
  }
1204
- .w-\[var\(--radix-dropdown-menu-trigger-width\)\] {
1205
- width: var(--radix-dropdown-menu-trigger-width);
1206
- }
1207
1192
  .w-\[var\(--radix-select-trigger-width\)\] {
1208
1193
  width: var(--radix-select-trigger-width);
1209
1194
  }
@@ -1273,9 +1258,6 @@
1273
1258
  .max-w-\[150px\] {
1274
1259
  max-width: 150px;
1275
1260
  }
1276
- .max-w-\[180px\] {
1277
- max-width: 180px;
1278
- }
1279
1261
  .max-w-\[250px\] {
1280
1262
  max-width: 250px;
1281
1263
  }
@@ -1288,9 +1270,6 @@
1288
1270
  .max-w-\[420px\] {
1289
1271
  max-width: 420px;
1290
1272
  }
1291
- .max-w-\[460px\] {
1292
- max-width: 460px;
1293
- }
1294
1273
  .max-w-\[480px\] {
1295
1274
  max-width: 480px;
1296
1275
  }
@@ -1354,9 +1333,6 @@
1354
1333
  .min-w-\[240px\] {
1355
1334
  min-width: 240px;
1356
1335
  }
1357
- .min-w-\[320px\] {
1358
- min-width: 320px;
1359
- }
1360
1336
  .min-w-\[360px\] {
1361
1337
  min-width: 360px;
1362
1338
  }
@@ -2046,12 +2022,6 @@
2046
2022
  .border-primary {
2047
2023
  border-color: var(--color-primary);
2048
2024
  }
2049
- .border-primary\/10 {
2050
- border-color: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
2051
- @supports (color: color-mix(in lab, red, red)) {
2052
- border-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
2053
- }
2054
- }
2055
2025
  .border-primary\/20 {
2056
2026
  border-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
2057
2027
  @supports (color: color-mix(in lab, red, red)) {
@@ -2418,12 +2388,6 @@
2418
2388
  background-color: color-mix(in oklab, var(--color-muted) 10%, transparent);
2419
2389
  }
2420
2390
  }
2421
- .bg-muted\/20 {
2422
- background-color: color-mix(in srgb, hsl(var(--muted)) 20%, transparent);
2423
- @supports (color: color-mix(in lab, red, red)) {
2424
- background-color: color-mix(in oklab, var(--color-muted) 20%, transparent);
2425
- }
2426
- }
2427
2391
  .bg-muted\/30 {
2428
2392
  background-color: color-mix(in srgb, hsl(var(--muted)) 30%, transparent);
2429
2393
  @supports (color: color-mix(in lab, red, red)) {
@@ -2484,12 +2448,6 @@
2484
2448
  background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
2485
2449
  }
2486
2450
  }
2487
- .bg-primary\/\[0\.04\] {
2488
- background-color: color-mix(in srgb, hsl(var(--primary)) 4%, transparent);
2489
- @supports (color: color-mix(in lab, red, red)) {
2490
- background-color: color-mix(in oklab, var(--color-primary) 4%, transparent);
2491
- }
2492
- }
2493
2451
  .bg-red-500 {
2494
2452
  background-color: var(--color-red-500);
2495
2453
  }
@@ -2508,9 +2466,6 @@
2508
2466
  background-color: color-mix(in oklab, var(--color-red-600) 20%, transparent);
2509
2467
  }
2510
2468
  }
2511
- .bg-ring {
2512
- background-color: var(--color-ring);
2513
- }
2514
2469
  .bg-secondary {
2515
2470
  background-color: var(--color-secondary);
2516
2471
  }
@@ -2834,9 +2789,6 @@
2834
2789
  .pt-12 {
2835
2790
  padding-top: calc(var(--spacing) * 12);
2836
2791
  }
2837
- .pt-14 {
2838
- padding-top: calc(var(--spacing) * 14);
2839
- }
2840
2792
  .pt-16 {
2841
2793
  padding-top: calc(var(--spacing) * 16);
2842
2794
  }
@@ -2858,9 +2810,6 @@
2858
2810
  .pb-0 {
2859
2811
  padding-bottom: 0px;
2860
2812
  }
2861
- .pb-0\.5 {
2862
- padding-bottom: calc(var(--spacing) * 0.5);
2863
- }
2864
2813
  .pb-1 {
2865
2814
  padding-bottom: var(--spacing);
2866
2815
  }
@@ -2876,9 +2825,6 @@
2876
2825
  .pb-8 {
2877
2826
  padding-bottom: calc(var(--spacing) * 8);
2878
2827
  }
2879
- .pb-12 {
2880
- padding-bottom: calc(var(--spacing) * 12);
2881
- }
2882
2828
  .pl-2 {
2883
2829
  padding-left: calc(var(--spacing) * 2);
2884
2830
  }
@@ -3084,10 +3030,6 @@
3084
3030
  --tw-leading: var(--leading-tight);
3085
3031
  line-height: var(--leading-tight);
3086
3032
  }
3087
- .font-\[var\(--font-display\)\] {
3088
- --tw-font-weight: var(--font-display);
3089
- font-weight: var(--font-display);
3090
- }
3091
3033
  .font-bold {
3092
3034
  --tw-font-weight: var(--font-weight-bold);
3093
3035
  font-weight: var(--font-weight-bold);
@@ -3297,6 +3239,9 @@
3297
3239
  .text-\[var\(--surface-warning-text\)\] {
3298
3240
  color: var(--surface-warning-text);
3299
3241
  }
3242
+ .text-\[var\(--text-dim\)\] {
3243
+ color: var(--text-dim);
3244
+ }
3300
3245
  .text-\[var\(--text-muted\)\] {
3301
3246
  color: var(--text-muted);
3302
3247
  }
@@ -3309,6 +3254,9 @@
3309
3254
  .text-\[var\(--text-primary\,hsl\(var\(--foreground\)\)\)\] {
3310
3255
  color: var(--text-primary,hsl(var(--foreground)));
3311
3256
  }
3257
+ .text-\[var\(--text-secondary\)\] {
3258
+ color: var(--text-secondary);
3259
+ }
3312
3260
  .text-accent-foreground {
3313
3261
  color: var(--color-accent-foreground);
3314
3262
  }
@@ -3467,9 +3415,6 @@
3467
3415
  -webkit-font-smoothing: antialiased;
3468
3416
  -moz-osx-font-smoothing: grayscale;
3469
3417
  }
3470
- .accent-foreground {
3471
- accent-color: var(--color-foreground);
3472
- }
3473
3418
  .accent-primary {
3474
3419
  accent-color: var(--color-primary);
3475
3420
  }
@@ -3638,10 +3583,6 @@
3638
3583
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
3639
3584
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
3640
3585
  }
3641
- .backdrop-filter {
3642
- -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
3643
- backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
3644
- }
3645
3586
  .transition {
3646
3587
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
3647
3588
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3797,10 +3738,6 @@
3797
3738
  --tw-font-weight: var(--font-weight-medium);
3798
3739
  font-weight: var(--font-weight-medium);
3799
3740
  }
3800
- .placeholder\:font-normal::placeholder {
3801
- --tw-font-weight: var(--font-weight-normal);
3802
- font-weight: var(--font-weight-normal);
3803
- }
3804
3741
  .placeholder\:text-muted-foreground::placeholder {
3805
3742
  color: var(--color-muted-foreground);
3806
3743
  }
@@ -3954,9 +3891,6 @@
3954
3891
  border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
3955
3892
  }
3956
3893
  }
3957
- .hover\:border-transparent:hover {
3958
- border-color: transparent;
3959
- }
3960
3894
  .hover\:\!bg-primary:hover {
3961
3895
  background-color: var(--color-primary) !important;
3962
3896
  }
@@ -4110,14 +4044,6 @@
4110
4044
  background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
4111
4045
  }
4112
4046
  }
4113
- .hover\:bg-muted\/60:hover {
4114
- background-color: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
4115
- }
4116
- @supports (color: color-mix(in lab, red, red)) {
4117
- .hover\:bg-muted\/60:hover {
4118
- background-color: color-mix(in oklab, var(--color-muted) 60%, transparent);
4119
- }
4120
- }
4121
4047
  .hover\:bg-muted\/80:hover {
4122
4048
  background-color: color-mix(in srgb, hsl(var(--muted)) 80%, transparent);
4123
4049
  }
@@ -4286,12 +4212,6 @@
4286
4212
  background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
4287
4213
  }
4288
4214
  }
4289
- .focus\:bg-primary\/15:focus {
4290
- background-color: color-mix(in srgb, hsl(var(--primary)) 15%, transparent);
4291
- @supports (color: color-mix(in lab, red, red)) {
4292
- background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
4293
- }
4294
- }
4295
4215
  .focus\:text-\[var\(--surface-danger-text\)\]:focus {
4296
4216
  color: var(--surface-danger-text);
4297
4217
  }
@@ -4541,9 +4461,6 @@
4541
4461
  .data-\[state\=open\]\:border-\[var\(--md3-outline-variant\)\][data-state="open"] {
4542
4462
  border-color: var(--md3-outline-variant);
4543
4463
  }
4544
- .data-\[state\=open\]\:border-transparent[data-state="open"] {
4545
- border-color: transparent;
4546
- }
4547
4464
  .data-\[state\=open\]\:bg-\[var\(--accent-surface-strong\)\][data-state="open"] {
4548
4465
  background-color: var(--accent-surface-strong);
4549
4466
  }
@@ -4556,18 +4473,9 @@
4556
4473
  background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
4557
4474
  }
4558
4475
  }
4559
- .data-\[state\=open\]\:bg-muted\/60[data-state="open"] {
4560
- background-color: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
4561
- @supports (color: color-mix(in lab, red, red)) {
4562
- background-color: color-mix(in oklab, var(--color-muted) 60%, transparent);
4563
- }
4564
- }
4565
4476
  .data-\[state\=open\]\:bg-surface-container-high[data-state="open"] {
4566
4477
  background-color: var(--color-surface-container-high);
4567
4478
  }
4568
- .data-\[state\=open\]\:text-foreground[data-state="open"] {
4569
- color: var(--color-foreground);
4570
- }
4571
4479
  .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
4572
4480
  color: var(--color-muted-foreground);
4573
4481
  }
@@ -5555,6 +5463,17 @@
5555
5463
  --border-default: rgba(120, 108, 158, 0.18);
5556
5464
  --border-hover: rgba(120, 108, 158, 0.28);
5557
5465
  }
5466
+ :root:not([data-theme]),
5467
+ [data-sandbox-ui]:not([data-theme]),
5468
+ [data-theme="dark"],
5469
+ .dark:not([data-theme]) {
5470
+ --text-dim: #92929a;
5471
+ }
5472
+ [data-sandbox-theme="vault"]:not([data-theme]),
5473
+ [data-theme="light"],
5474
+ .light:not([data-theme]) {
5475
+ --text-dim: #6b6b75;
5476
+ }
5558
5477
  .sandbox-tree-surface {
5559
5478
  --trees-bg-override: var(--md3-surface-container-lowest);
5560
5479
  --trees-bg-muted-override: var(--md3-surface-container-low);
package/dist/index.d.ts CHANGED
@@ -5,11 +5,13 @@ export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, Ap
5
5
  export { ArtifactView, BRAND_PRISM_THEME, CodeSurface, CodeSurfaceProps, CodeView, CodeViewProps, DiffStats, DiffView, DiffViewProps, FileBreadcrumb, FileBreadcrumbProps, GitStatusBadge, PanelHeader, PanelHeaderProps, PillTabItem, PillTabs, PillTabsProps, PreviewView, PreviewViewProps, SandboxArtifact, SandboxArtifactPane, SandboxArtifactPaneProps, SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage } from './workbench.js';
6
6
  export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from '@tangle-network/ui/openui';
7
7
  export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from '@tangle-network/ui/chat';
8
- export { AgentComposer, AgentComposerMention, AgentComposerProps, AgentProfileCapability, AgentProfileDraft, AgentProfileOption, AgentProfilePicker, AgentProfilePickerProps, AgentSessionControls, AgentSessionControlsProps, AgentSessionHarnessControl, AgentSessionModelControl, AgentSessionProfileControl, AgentSessionReasoningControl, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, ComposerFile, ComposerFileRejection, ComposerFileValidationConfig, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, MENTION_PILL_CLASS, MentionItem, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport, isAcceptedType, isModelCompatibleWithHarness, snapModelToHarness, validateComposerFiles } from './chat.js';
8
+ export { AgentComposer, AgentComposerMention, AgentComposerProps, AgentProfileCapability, AgentProfileDraft, AgentProfileOption, AgentProfilePicker, AgentProfilePickerProps, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, ComposerFile, ComposerFileRejection, ComposerFileValidationConfig, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, MENTION_PILL_CLASS, MentionItem, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport, isAcceptedType, validateComposerFiles } from './chat.js';
9
+ export { HarnessType, modelProvider, snapHarnessToModel } from '@tangle-network/agent-interface';
9
10
  export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from '@tangle-network/ui/run';
10
11
  export { CommandPreview, DiffPreview, GlobResultsPreview, GrepResultsPreview, QuestionPreview, WebSearchPreview, WriteFilePreview } from '@tangle-network/ui/tool-previews';
11
12
  export { FileArtifactPane, FileArtifactPaneProps, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, filterFileTree } from '@tangle-network/ui/files';
12
- export { ActivityFeed, ActivityFeedProps, ActivityItem, AppearanceController, Backend, BackendConfig, BackendConfigProps, BackendSelector, BackendSelectorProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DEFAULT_FEATURED_MODEL_IDS, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, GitCommitData, GitPanel, GitPanelProps, GitStatusData, HARNESS_BRAND, HARNESS_OPTIONS, HarnessBrand, HarnessLogo, HarnessLogoProps, HarnessPicker, HarnessPickerProps, INSUFFICIENT_BALANCE_CODE, InfoPanel, InfoPanelProps, InsufficientBalance, Invoice, InvoiceTable, InvoiceTableProps, McpServer, MetricAreaChart, MetricAreaChartProps, MetricChartPoint, MetricChartTone, ModelPicker, ModelPickerProps, ModelPickerVariant, NavItem, NetworkConfig, NetworkConfigData, NetworkConfigProps, NewSandboxCard, NewSandboxCardProps, OutOfCreditsModal, OutOfCreditsModalProps, PlanCardData, PlanCards, PlanCardsProps, PlanFeature, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailCollapseToggle, RailCollapseToggleProps, RailExpandable, RailExpandableProps, RailExpandableSubItem, RailFlyout, RailFlyoutProps, RailHeader, RailHeaderProps, RailModeButton, RailModeButtonProps, RailSeparator, RailSeparatorProps, RailThemeToggle, RailTooltip, RailTooltipProps, ResourceMeter, ResourceMeterProps, ResourceSnapshot, ResourceSnapshotItem, ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxCardData, SandboxCardProps, SandboxStatus, SandboxTable, SandboxTableProps, Sidebar, SidebarContent, SidebarContentProps, SidebarLayout, SidebarLayoutFlyoutItem, SidebarLayoutNavItem, SidebarLayoutProps, SidebarPanel, SidebarPanelContent, SidebarPanelContentProps, SidebarPanelHeader, SidebarPanelHeaderProps, SidebarPanelProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailFooter, SidebarRailFooterProps, SidebarRailHeader, SidebarRailHeaderProps, SidebarRailNav, SidebarRailNavProps, SidebarRailProps, SidebarUser, SnapshotList, SnapshotListProps, SystemLogsViewer, SystemLogsViewerProps, TeamRole, ThemeMode, UsageSummary, UsageSummaryData, UsageSummaryProps, Variant, VariantList, VariantListProps, VariantOutcome, VariantStatus, canAdminSandbox, chatCapableHarnesses, dedupeModels, formatContext, formatPricing, modelDedupKey, parseInsufficientBalance, useSidebar } from './dashboard.js';
13
+ export { ActivityFeed, ActivityFeedProps, ActivityItem, AppearanceController, Backend, BackendConfig, BackendConfigProps, BackendSelector, BackendSelectorProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, GitCommitData, GitPanel, GitPanelProps, GitStatusData, HARNESS_BRAND, HARNESS_OPTIONS, HarnessBrand, HarnessLogo, HarnessLogoProps, HarnessPicker, HarnessPickerProps, INSUFFICIENT_BALANCE_CODE, InfoPanel, InfoPanelProps, InsufficientBalance, Invoice, InvoiceTable, InvoiceTableProps, McpServer, MetricAreaChart, MetricAreaChartProps, MetricChartPoint, MetricChartTone, NavItem, NetworkConfig, NetworkConfigData, NetworkConfigProps, NewSandboxCard, NewSandboxCardProps, OutOfCreditsModal, OutOfCreditsModalProps, PlanCardData, PlanCards, PlanCardsProps, PlanFeature, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailCollapseToggle, RailCollapseToggleProps, RailExpandable, RailExpandableProps, RailExpandableSubItem, RailFlyout, RailFlyoutProps, RailHeader, RailHeaderProps, RailModeButton, RailModeButtonProps, RailSeparator, RailSeparatorProps, RailThemeToggle, RailTooltip, RailTooltipProps, ResourceMeter, ResourceMeterProps, ResourceSnapshot, ResourceSnapshotItem, ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxCardData, SandboxCardProps, SandboxStatus, SandboxTable, SandboxTableProps, Sidebar, SidebarContent, SidebarContentProps, SidebarLayout, SidebarLayoutFlyoutItem, SidebarLayoutNavItem, SidebarLayoutProps, SidebarPanel, SidebarPanelContent, SidebarPanelContentProps, SidebarPanelHeader, SidebarPanelHeaderProps, SidebarPanelProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailFooter, SidebarRailFooterProps, SidebarRailHeader, SidebarRailHeaderProps, SidebarRailNav, SidebarRailNavProps, SidebarRailProps, SidebarUser, SnapshotList, SnapshotListProps, SystemLogsViewer, SystemLogsViewerProps, TeamRole, ThemeMode, UsageSummary, UsageSummaryData, UsageSummaryProps, Variant, VariantList, VariantListProps, VariantOutcome, VariantStatus, canAdminSandbox, chatCapableHarnesses, parseInsufficientBalance, useSidebar } from './dashboard.js';
14
+ export { M as ModelBrandIdentity, a as ModelBrandStack, b as ModelInfo, c as canonicalModelId, m as modelBrandFor } from './model-brand-BNnaUKKZ.js';
13
15
  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-Bn-Bw5xC.js';
14
16
  export { E as ExposedPort, P as PortsList, a as PortsListProps } from './ports-list-CDIvTNnX.js';
15
17
  export { AuthHeader, AuthHeaderProps, GitHubLoginButton, GitHubLoginButtonProps, LoginLayout, LoginLayoutProps, SessionUser, UserMenu, UserMenuProps } from '@tangle-network/ui/auth';
@@ -22,8 +24,6 @@ export { ChatSession, connectSession, disconnectSession, sessionAtom } from './s
22
24
  export { AgentBranding, CustomToolRenderer, DisplayVariant, FinalTextPart, GroupedMessage, MessageRun, MessageUser, ReasoningPart, Run, RunStats, SessionMessage, SessionPart, TextPart, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime } from '@tangle-network/ui/types';
23
25
  export { Session } from './types.js';
24
26
  export { TOOL_CATEGORY_ICONS, cn, copyText, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText } from '@tangle-network/ui/utils';
25
- export { HarnessType, modelProvider, snapHarnessToModel } from '@tangle-network/agent-interface';
26
- export { M as ModelBrandIdentity, a as ModelBrandStack, b as ModelInfo, c as canonicalModelId, m as modelBrandFor } from './model-brand-CuXKfTMh.js';
27
27
  import 'react';
28
28
  import '@radix-ui/react-dropdown-menu';
29
29
  import '@tanstack/react-query';