@tangle-network/sandbox-ui 0.10.9 → 0.12.0

package/dist/dashboard.d.ts

@@ -1,4 +1,4 @@
-export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, ah as DashboardProfile, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, m as PlanCardData, n as PlanCards, o as PlanCardsProps, ai as PlanFeature, p as ProductVariant, q as ProfileAvatar, r as ProfileAvatarProps, s as ProfileComparison, t as ProfileComparisonProps, u as ProfileSelector, v as ProfileSelectorProps, R as RailButton, w as RailButtonProps, x as RailModeButton, y as RailModeButtonProps, z as RailSeparator, A as RailSeparatorProps, E as ResourceMeter, F as ResourceMeterProps, S as SIDEBAR_MOBILE_WIDTH, G as SIDEBAR_PANEL_WIDTH, H as SIDEBAR_RAIL_WIDTH, J as SIDEBAR_TOTAL_WIDTH, K as SandboxCard, L as SandboxCardData, M as SandboxCardProps, O as SandboxStatus, Q as SandboxTable, T as SandboxTableProps, U as Sidebar, V as SidebarContent, W as SidebarContentProps, X as SidebarPanel, Y as SidebarPanelContent, Z as SidebarPanelContentProps, _ as SidebarPanelHeader, $ as SidebarPanelHeaderProps, a0 as SidebarPanelProps, a1 as SidebarProps, a2 as SidebarProvider, a3 as SidebarProviderProps, a4 as SidebarRail, a5 as SidebarRailFooter, a6 as SidebarRailFooterProps, a7 as SidebarRailHeader, a8 as SidebarRailHeaderProps, a9 as SidebarRailNav, aa as SidebarRailNavProps, ab as SidebarRailProps, ac as SidebarUser, aj as TeamRole, ak as Variant, ae as VariantList, af as VariantListProps, al as VariantOutcome, am as VariantStatus, an as canAdminSandbox, ag as useSidebar } from './variant-list-DAhiR-7S.js';
+export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, at as DashboardProfile, h as DashboardUser, H as HARNESS_OPTIONS, i as HarnessPicker, j as HarnessPickerProps, k as HarnessType, I as Invoice, l as InvoiceTable, m as InvoiceTableProps, M as ModelInfo, n as ModelPicker, o as ModelPickerProps, p as ModelPickerVariant, q as ModelPreset, N as NavItem, r as NewSandboxCard, s as NewSandboxCardProps, t as PlanCardData, u as PlanCards, v as PlanCardsProps, au as PlanFeature, w as ProductVariant, x as ProfileAvatar, y as ProfileAvatarProps, z as ProfileComparison, A as ProfileComparisonProps, E as ProfileSelector, F as ProfileSelectorProps, R as RailButton, G as RailButtonProps, J as RailModeButton, K as RailModeButtonProps, L as RailSeparator, O as RailSeparatorProps, Q as ResourceMeter, S as ResourceMeterProps, T as SIDEBAR_MOBILE_WIDTH, U as SIDEBAR_PANEL_WIDTH, V as SIDEBAR_RAIL_WIDTH, W as SIDEBAR_TOTAL_WIDTH, X as SandboxCard, Y as SandboxCardData, Z as SandboxCardProps, _ as SandboxStatus, $ as SandboxTable, a0 as SandboxTableProps, a1 as Sidebar, a2 as SidebarContent, a3 as SidebarContentProps, a4 as SidebarPanel, a5 as SidebarPanelContent, a6 as SidebarPanelContentProps, a7 as SidebarPanelHeader, a8 as SidebarPanelHeaderProps, a9 as SidebarPanelProps, aa as SidebarProps, ab as SidebarProvider, ac as SidebarProviderProps, ad as SidebarRail, ae as SidebarRailFooter, af as SidebarRailFooterProps, ag as SidebarRailHeader, ah as SidebarRailHeaderProps, ai as SidebarRailNav, aj as SidebarRailNavProps, ak as SidebarRailProps, al as SidebarUser, av as TeamRole, aw as Variant, an as VariantList, ao as VariantListProps, ax as VariantOutcome, ay as VariantStatus, az as canAdminSandbox, ap as canonicalModelId, aq as formatContext, ar as formatPricing, as as useSidebar } from './variant-list-BrHYcBCk.js';
 export { a as BillingBalance, c as BillingDashboard, d as BillingDashboardProps, B as BillingSubscription, b as BillingUsage, e as PricingPage, f as PricingPageProps, P as PricingTier, g as UsageChart, h as UsageChartProps, U as UsageDataPoint, i as formatPrice } from './usage-chart-CPTcNlGs.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 export { a as TemplateCard, T as TemplateCardData, b as TemplateCardProps } from './template-card-BAtvcAkU.js';

package/dist/dashboard.js

@@ -7,7 +7,10 @@ import {
   ClusterStatusBar,
   CreditBalance,
   DashboardLayout,
+  HARNESS_OPTIONS,
+  HarnessPicker,
   InvoiceTable,
+  ModelPicker,
   NewSandboxCard,
   PlanCards,
   ProfileAvatar,
@@ -35,8 +38,11 @@ import {
   SidebarRailNav,
   VariantList,
   canAdminSandbox,
+  canonicalModelId,
+  formatContext,
+  formatPricing,
   useSidebar
-} from "./chunk-Z5PSS3VD.js";
+} from "./chunk-NKUPJC34.js";
 import {
   BillingDashboard,
   PricingPage,
@@ -931,8 +937,11 @@ export {
   CreditBalance,
   DashboardLayout,
   GitPanel,
+  HARNESS_OPTIONS,
+  HarnessPicker,
   InfoPanel,
   InvoiceTable,
+  ModelPicker,
   NetworkConfig,
   NewSandboxCard,
   PlanCards,
@@ -970,6 +979,9 @@ export {
   UsageSummary,
   VariantList,
   canAdminSandbox,
+  canonicalModelId,
+  formatContext,
   formatPrice,
+  formatPricing,
   useSidebar
 };

package/dist/files.d.ts

@@ -1,12 +1,72 @@
-import { a as FileTabData } from './file-tabs-BLfxfmAH.js';
-export { F as FileNode, b as FileTabs, c as FileTabsProps, d as FileTree, e as FileTreeProps, f as FileTreeVisibilityOptions, g as filterFileTree } from './file-tabs-BLfxfmAH.js';
+import { F as FileNode, a as FileTabData } from './file-tabs-BLfxfmAH.js';
+export { b as FileTabs, c as FileTabsProps, d as FileTree, e as FileTreeProps, f as FileTreeVisibilityOptions, g as filterFileTree } from './file-tabs-BLfxfmAH.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { GitStatusEntry, ContextMenuItem, ContextMenuOpenContext, GitStatus } from '@pierre/trees';
+import { ReactNode, CSSProperties } from 'react';
 import { b as DocumentEditorMode, D as DocumentEditorBackend, d as DocumentEditorPaneCollaborationConfig } from './document-editor-pane-A70-EhdQ.js';
 import { A as ArtifactPaneProps } from './artifact-pane-Bh45Ssco.js';
-import 'react';
 import '@hocuspocus/provider';
 import 'yjs';
 
+/**
+ * Re-export Pierre's git-status union under a stable name so consumers
+ * don't import directly from the dep. If we ever swap the underlying
+ * implementation, only this file changes.
+ */
+type RichFileTreeGitStatus = GitStatus;
+type RichFileTreeGitEntry = GitStatusEntry;
+interface RichFileTreeProps {
+    /**
+     * Either a recursive `FileNode` tree (matches the existing FileTree
+     * input) or a flat list of canonical paths. Pass exactly one.
+     */
+    root?: FileNode;
+    paths?: ReadonlyArray<string>;
+    /** Currently-selected path. Pierre supports multi-select internally; the
+     * wrapper exposes a single string for parity with FileTree. */
+    selectedPath?: string;
+    /** Called whenever the selection changes (single-select fan-out). */
+    onSelect?: (path: string) => void;
+    /** Show the inline search input. Defaults to true. */
+    search?: boolean;
+    /** Open / closed initial expansion. Defaults to "open" — match FileTree. */
+    initialExpansion?: "open" | "closed";
+    /** Optional git-status decorations per path. */
+    gitStatus?: ReadonlyArray<RichFileTreeGitEntry>;
+    /**
+     * Right-click / button-lane menu content. Receives the row and the
+     * trigger context (which interaction opened the menu).
+     */
+    renderContextMenu?: (item: ContextMenuItem, context: ContextMenuOpenContext) => ReactNode;
+    /** Optional header rendered above the tree rows. */
+    header?: ReactNode;
+    /**
+     * Theme override map for shadow-DOM CSS variables. Most consumers can
+     * leave this — defaults derive from the host element's computed
+     * tokens via `cssVarFromToken()`.
+     */
+    themeOverrides?: Partial<RichFileTreeThemeVars>;
+    className?: string;
+    style?: CSSProperties;
+    /** Inline height (or set via `style.height`). Defaults to 100% of parent. */
+    height?: number | string;
+}
+interface RichFileTreeThemeVars {
+    /** Selected-row background. */
+    selectedBg: string;
+    /** Selected-row foreground. */
+    selectedFg: string;
+    /** Default row foreground. */
+    fg: string;
+    /** Hover background. */
+    hoverBg: string;
+    /** Border / divider color. */
+    border: string;
+    /** Muted (parent path, breadcrumb) foreground. */
+    mutedFg: string;
+}
+declare function RichFileTree({ root, paths, selectedPath, onSelect, search, initialExpansion, gitStatus, renderContextMenu, header, themeOverrides, className, style, height, }: RichFileTreeProps): react_jsx_runtime.JSX.Element;
+
 /**
  * FilePreview — universal file renderer.
  *
@@ -66,4 +126,4 @@ interface FileArtifactPaneProps extends Omit<FilePreviewProps, "className"> {
  */
 declare function FileArtifactPane({ filename, content, blobUrl, mimeType, onClose, onDownload, path, tabs, activeTabId, onTabSelect, onTabClose, eyebrow, meta, toolbar, footer, className, editor, }: FileArtifactPaneProps): react_jsx_runtime.JSX.Element;
 
-export { FileArtifactPane, type FileArtifactPaneProps, FilePreview, type FilePreviewProps, FileTabData };
+export { FileArtifactPane, type FileArtifactPaneProps, FileNode, FilePreview, type FilePreviewProps, FileTabData, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars };

package/dist/files.js

@@ -1,3 +1,6 @@
+import {
+  RichFileTree
+} from "./chunk-LQNEZDRM.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -13,5 +16,6 @@ export {
   FilePreview,
   FileTabs,
   FileTree,
+  RichFileTree,
   filterFileTree
 };

package/dist/globals.css

@@ -1082,6 +1082,9 @@
   .h-\[380px\] {
     height: 380px;
   }
+  .h-\[480px\] {
+    height: 480px;
+  }
   .h-\[500px\] {
     height: 500px;
   }
@@ -1139,6 +1142,9 @@
   .max-h-\[160px\] {
     max-height: 160px;
   }
+  .max-h-\[440px\] {
+    max-height: 440px;
+  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -1343,6 +1349,9 @@
   .w-\[var\(--indicator-dot-size\)\] {
     width: var(--indicator-dot-size);
   }
+  .w-\[var\(--radix-dropdown-menu-trigger-width\)\] {
+    width: var(--radix-dropdown-menu-trigger-width);
+  }
   .w-\[var\(--radix-select-trigger-width\)\] {
     width: var(--radix-select-trigger-width);
   }
@@ -1403,12 +1412,18 @@
   .max-w-\[150px\] {
     max-width: 150px;
   }
+  .max-w-\[160px\] {
+    max-width: 160px;
+  }
   .max-w-\[250px\] {
     max-width: 250px;
   }
   .max-w-\[300px\] {
     max-width: 300px;
   }
+  .max-w-\[460px\] {
+    max-width: 460px;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -1448,6 +1463,9 @@
   .min-w-\[180px\] {
     min-width: 180px;
   }
+  .min-w-\[320px\] {
+    min-width: 320px;
+  }
   .min-w-\[var\(--radix-select-trigger-width\)\] {
     min-width: var(--radix-select-trigger-width);
   }
@@ -2602,6 +2620,9 @@
   .pt-1 {
     padding-top: calc(var(--spacing) * 1);
   }
+  .pt-1\.5 {
+    padding-top: calc(var(--spacing) * 1.5);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -2641,6 +2662,9 @@
   .pb-0 {
     padding-bottom: calc(var(--spacing) * 0);
   }
+  .pb-0\.5 {
+    padding-bottom: calc(var(--spacing) * 0.5);
+  }
   .pb-1 {
     padding-bottom: calc(var(--spacing) * 1);
   }

package/dist/index.d.ts

@@ -14,8 +14,8 @@ import * as React$1 from 'react';
 import { b as ToolPart } from './parts-CyGkM6Fp.js';
 export { R as ReasoningPart, S as SessionMessage, a as SessionPart, T as TextPart, c as ToolState, d as ToolStatus, e as ToolTime } from './parts-CyGkM6Fp.js';
 export { F as FileNode, a as FileTabData, b as FileTabs, c as FileTabsProps, d as FileTree, e as FileTreeProps, f as FileTreeVisibilityOptions, g as filterFileTree } from './file-tabs-BLfxfmAH.js';
-export { FileArtifactPane, FileArtifactPaneProps, FilePreview, FilePreviewProps } from './files.js';
-export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, P as PanelConfig, m as PlanCardData, n as PlanCards, o as PlanCardsProps, p as ProductVariant, q as ProfileAvatar, r as ProfileAvatarProps, s as ProfileComparison, t as ProfileComparisonProps, u as ProfileSelector, v as ProfileSelectorProps, R as RailButton, w as RailButtonProps, x as RailModeButton, y as RailModeButtonProps, z as RailSeparator, A as RailSeparatorProps, E as ResourceMeter, F as ResourceMeterProps, S as SIDEBAR_MOBILE_WIDTH, G as SIDEBAR_PANEL_WIDTH, H as SIDEBAR_RAIL_WIDTH, J as SIDEBAR_TOTAL_WIDTH, K as SandboxCard, L as SandboxCardData, M as SandboxCardProps, O as SandboxStatus, Q as SandboxTable, T as SandboxTableProps, U as Sidebar, V as SidebarContent, W as SidebarContentProps, X as SidebarPanel, Y as SidebarPanelContent, Z as SidebarPanelContentProps, _ as SidebarPanelHeader, $ as SidebarPanelHeaderProps, a0 as SidebarPanelProps, a1 as SidebarProps, a2 as SidebarProvider, a3 as SidebarProviderProps, a4 as SidebarRail, a5 as SidebarRailFooter, a6 as SidebarRailFooterProps, a7 as SidebarRailHeader, a8 as SidebarRailHeaderProps, a9 as SidebarRailNav, aa as SidebarRailNavProps, ab as SidebarRailProps, ac as SidebarUser, ad as TopNavLink, ae as VariantList, af as VariantListProps, ag as useSidebar } from './variant-list-DAhiR-7S.js';
+export { FileArtifactPane, FileArtifactPaneProps, FilePreview, FilePreviewProps, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars } from './files.js';
+export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, h as DashboardUser, H as HARNESS_OPTIONS, i as HarnessPicker, j as HarnessPickerProps, k as HarnessType, I as Invoice, l as InvoiceTable, m as InvoiceTableProps, M as ModelInfo, n as ModelPicker, o as ModelPickerProps, p as ModelPickerVariant, q as ModelPreset, N as NavItem, r as NewSandboxCard, s as NewSandboxCardProps, P as PanelConfig, t as PlanCardData, u as PlanCards, v as PlanCardsProps, w as ProductVariant, x as ProfileAvatar, y as ProfileAvatarProps, z as ProfileComparison, A as ProfileComparisonProps, E as ProfileSelector, F as ProfileSelectorProps, R as RailButton, G as RailButtonProps, J as RailModeButton, K as RailModeButtonProps, L as RailSeparator, O as RailSeparatorProps, Q as ResourceMeter, S as ResourceMeterProps, T as SIDEBAR_MOBILE_WIDTH, U as SIDEBAR_PANEL_WIDTH, V as SIDEBAR_RAIL_WIDTH, W as SIDEBAR_TOTAL_WIDTH, X as SandboxCard, Y as SandboxCardData, Z as SandboxCardProps, _ as SandboxStatus, $ as SandboxTable, a0 as SandboxTableProps, a1 as Sidebar, a2 as SidebarContent, a3 as SidebarContentProps, a4 as SidebarPanel, a5 as SidebarPanelContent, a6 as SidebarPanelContentProps, a7 as SidebarPanelHeader, a8 as SidebarPanelHeaderProps, a9 as SidebarPanelProps, aa as SidebarProps, ab as SidebarProvider, ac as SidebarProviderProps, ad as SidebarRail, ae as SidebarRailFooter, af as SidebarRailFooterProps, ag as SidebarRailHeader, ah as SidebarRailHeaderProps, ai as SidebarRailNav, aj as SidebarRailNavProps, ak as SidebarRailProps, al as SidebarUser, am as TopNavLink, an as VariantList, ao as VariantListProps, ap as canonicalModelId, aq as formatContext, ar as formatPricing, as as useSidebar } from './variant-list-BrHYcBCk.js';
 export { c as BillingDashboard, d as BillingDashboardProps, e as PricingCards, f as PricingPageProps, g as UsageChart, h as UsageChartProps, U as UsageDataPoint } from './usage-chart-CPTcNlGs.js';
 export { AuthHeader, GitHubLoginButton, LoginLayout, LoginLayoutProps, UserMenu } from './auth.js';
 export { CodeBlock, CodeBlock as CodeBlockDisplay, CopyButton, Markdown, MarkdownProps } from './markdown.js';
@@ -40,6 +40,7 @@ import '@radix-ui/react-label';
 import '@hocuspocus/provider';
 import 'yjs';
 import '@tiptap/react';
+import '@pierre/trees';
 import 'nanostores';
 import 'clsx';
 

package/dist/index.js

@@ -169,6 +169,9 @@ import {
   TableHeader,
   TableRow
 } from "./chunk-34I7UFSX.js";
+import {
+  RichFileTree
+} from "./chunk-LQNEZDRM.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -189,7 +192,10 @@ import {
   ClusterStatusBar,
   CreditBalance,
   DashboardLayout,
+  HARNESS_OPTIONS,
+  HarnessPicker,
   InvoiceTable,
+  ModelPicker,
   NewSandboxCard,
   PlanCards,
   ProfileAvatar,
@@ -216,8 +222,11 @@ import {
   SidebarRailHeader,
   SidebarRailNav,
   VariantList,
+  canonicalModelId,
+  formatContext,
+  formatPricing,
   useSidebar
-} from "./chunk-Z5PSS3VD.js";
+} from "./chunk-NKUPJC34.js";
 import {
   BillingDashboard,
   PricingPage,
@@ -428,6 +437,8 @@ export {
   GitHubLoginButton,
   GlobResultsPreview,
   GrepResultsPreview,
+  HARNESS_OPTIONS,
+  HarnessPicker,
   InlineCode,
   InlineThinkingItem,
   InlineToolItem,
@@ -438,6 +449,7 @@ export {
   Logo,
   Markdown,
   MessageList,
+  ModelPicker,
   NewSandboxCard,
   OpenUIArtifactRenderer,
   PlanCards,
@@ -452,6 +464,7 @@ export {
   RailSeparator,
   RealtimeSessionRegistry,
   ResourceMeter,
+  RichFileTree,
   RunGroup,
   RuntimePane,
   SIDEBAR_MOBILE_WIDTH,
@@ -530,12 +543,15 @@ export {
   WriteFilePreview,
   badgeVariants,
   buttonVariants,
+  canonicalModelId,
   cn,
   copyText,
   createAuthFetcher,
   filterFileTree,
   formatBytes,
+  formatContext,
   formatDuration,
+  formatPricing,
   formatUptime,
   getToolCategory,
   getToolDisplayMetadata,

package/dist/styles.css

@@ -1082,6 +1082,9 @@
   .h-\[380px\] {
     height: 380px;
   }
+  .h-\[480px\] {
+    height: 480px;
+  }
   .h-\[500px\] {
     height: 500px;
   }
@@ -1139,6 +1142,9 @@
   .max-h-\[160px\] {
     max-height: 160px;
   }
+  .max-h-\[440px\] {
+    max-height: 440px;
+  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -1343,6 +1349,9 @@
   .w-\[var\(--indicator-dot-size\)\] {
     width: var(--indicator-dot-size);
   }
+  .w-\[var\(--radix-dropdown-menu-trigger-width\)\] {
+    width: var(--radix-dropdown-menu-trigger-width);
+  }
   .w-\[var\(--radix-select-trigger-width\)\] {
     width: var(--radix-select-trigger-width);
   }
@@ -1403,12 +1412,18 @@
   .max-w-\[150px\] {
     max-width: 150px;
   }
+  .max-w-\[160px\] {
+    max-width: 160px;
+  }
   .max-w-\[250px\] {
     max-width: 250px;
   }
   .max-w-\[300px\] {
     max-width: 300px;
   }
+  .max-w-\[460px\] {
+    max-width: 460px;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -1448,6 +1463,9 @@
   .min-w-\[180px\] {
     min-width: 180px;
   }
+  .min-w-\[320px\] {
+    min-width: 320px;
+  }
   .min-w-\[var\(--radix-select-trigger-width\)\] {
     min-width: var(--radix-select-trigger-width);
   }
@@ -2602,6 +2620,9 @@
   .pt-1 {
     padding-top: calc(var(--spacing) * 1);
   }
+  .pt-1\.5 {
+    padding-top: calc(var(--spacing) * 1.5);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -2641,6 +2662,9 @@
   .pb-0 {
     padding-bottom: calc(var(--spacing) * 0);
   }
+  .pb-0\.5 {
+    padding-bottom: calc(var(--spacing) * 0.5);
+  }
   .pb-1 {
     padding-bottom: calc(var(--spacing) * 1);
   }

package/dist/{variant-list-DAhiR-7S.d.ts → variant-list-BrHYcBCk.d.ts}

@@ -358,6 +358,125 @@ interface BackendSelectorProps {
 }
 declare function BackendSelector({ backends, selected, onChange, label, placeholder, className, }: BackendSelectorProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Sandbox agent harness types — mirrors `BackendType` from
+ * `@tangle-network/sandbox` SDK. Kept in lockstep with that enum:
+ * if the SDK adds a backend, add it here too.
+ */
+type HarnessType = "opencode" | "claude-code" | "codex" | "amp" | "factory-droids" | "cli-base";
+interface HarnessOption extends Backend {
+    type: HarnessType;
+}
+/**
+ * Default option list with human-readable copy. Order is curated so the
+ * recommended choice (`opencode`) appears first; `cli-base` (no agent) last.
+ */
+declare const HARNESS_OPTIONS: readonly HarnessOption[];
+interface HarnessPickerProps extends Omit<BackendSelectorProps, "backends" | "selected" | "onChange"> {
+    value: HarnessType;
+    onChange: (next: HarnessType) => void;
+    /** Filter the available harnesses (e.g. by plan tier). Defaults to all. */
+    available?: ReadonlyArray<HarnessType>;
+    /** Override or extend the option metadata. Keys are HarnessType. */
+    optionsOverride?: Partial<Record<HarnessType, Partial<Omit<HarnessOption, "type">>>>;
+}
+/**
+ * Type-safe harness/backend selector for sandbox-backed agent products.
+ *
+ * Wraps the generic {@link BackendSelector} with the canonical harness list
+ * baked in, so consumers don't have to re-declare it (or risk drifting from
+ * the SDK enum).
+ */
+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;
+
 interface Profile {
     id: string;
     name: string;
@@ -418,4 +537,4 @@ interface VariantListProps {
 }
 declare function VariantList({ variants, selectedId, onSelect, onAccept, onReject, isActioning, className, }: VariantListProps): react_jsx_runtime.JSX.Element;
 
-export { type SidebarPanelHeaderProps as $, type RailSeparatorProps as A, type Backend as B, ClusterStatusBar as C, DashboardLayout as D, ResourceMeter as E, type ResourceMeterProps as F, SIDEBAR_PANEL_WIDTH as G, SIDEBAR_RAIL_WIDTH as H, type Invoice as I, SIDEBAR_TOTAL_WIDTH as J, SandboxCard as K, type SandboxCardData as L, type SandboxCardProps as M, type NavItem as N, type SandboxStatus as O, type PanelConfig as P, SandboxTable as Q, RailButton as R, SIDEBAR_MOBILE_WIDTH as S, type SandboxTableProps as T, Sidebar as U, SidebarContent as V, type SidebarContentProps as W, SidebarPanel as X, SidebarPanelContent as Y, type SidebarPanelContentProps as Z, SidebarPanelHeader as _, BackendSelector as a, type SidebarPanelProps as a0, type SidebarProps as a1, SidebarProvider as a2, type SidebarProviderProps as a3, SidebarRail as a4, SidebarRailFooter as a5, type SidebarRailFooterProps as a6, SidebarRailHeader as a7, type SidebarRailHeaderProps as a8, SidebarRailNav as a9, type SidebarRailNavProps as aa, type SidebarRailProps as ab, type SidebarUser as ac, type TopNavLink as ad, VariantList as ae, type VariantListProps as af, useSidebar as ag, type Profile as ah, type PlanFeature as ai, type TeamRole as aj, type Variant as ak, type VariantOutcome as al, type VariantStatus as am, canAdminSandbox as an, type BackendSelectorProps as b, type ClusterStatusBarProps as c, type ClusterStatusItem as d, CreditBalance as e, type CreditBalanceProps as f, type DashboardLayoutProps as g, type DashboardUser as h, InvoiceTable as i, type InvoiceTableProps as j, NewSandboxCard as k, type NewSandboxCardProps as l, type PlanCardData as m, PlanCards as n, type PlanCardsProps as o, type ProductVariant as p, ProfileAvatar as q, type ProfileAvatarProps as r, ProfileComparison as s, type ProfileComparisonProps as t, ProfileSelector as u, type ProfileSelectorProps as v, type RailButtonProps as w, RailModeButton as x, type RailModeButtonProps as y, RailSeparator as z };
+export { SandboxTable as $, type ProfileComparisonProps as A, type Backend as B, ClusterStatusBar as C, DashboardLayout as D, ProfileSelector as E, type ProfileSelectorProps as F, type RailButtonProps as G, HARNESS_OPTIONS as H, type Invoice as I, RailModeButton as J, type RailModeButtonProps as K, RailSeparator as L, type ModelInfo as M, type NavItem as N, type RailSeparatorProps as O, type PanelConfig as P, ResourceMeter as Q, RailButton as R, type ResourceMeterProps as S, SIDEBAR_MOBILE_WIDTH as T, SIDEBAR_PANEL_WIDTH as U, SIDEBAR_RAIL_WIDTH as V, SIDEBAR_TOTAL_WIDTH as W, SandboxCard as X, type SandboxCardData as Y, type SandboxCardProps as Z, type SandboxStatus as _, BackendSelector as a, type SandboxTableProps as a0, Sidebar as a1, SidebarContent as a2, type SidebarContentProps as a3, SidebarPanel as a4, SidebarPanelContent as a5, type SidebarPanelContentProps as a6, SidebarPanelHeader as a7, type SidebarPanelHeaderProps as a8, type SidebarPanelProps as a9, type SidebarProps as aa, SidebarProvider as ab, type SidebarProviderProps as ac, SidebarRail as ad, SidebarRailFooter as ae, type SidebarRailFooterProps as af, SidebarRailHeader as ag, type SidebarRailHeaderProps as ah, SidebarRailNav as ai, type SidebarRailNavProps as aj, type SidebarRailProps as ak, type SidebarUser as al, type TopNavLink as am, VariantList as an, type VariantListProps as ao, canonicalModelId as ap, formatContext as aq, formatPricing as ar, useSidebar as as, type Profile as at, type PlanFeature as au, type TeamRole as av, type Variant as aw, type VariantOutcome as ax, type VariantStatus as ay, canAdminSandbox as az, type BackendSelectorProps as b, type ClusterStatusBarProps as c, type ClusterStatusItem as d, CreditBalance as e, type CreditBalanceProps as f, type DashboardLayoutProps as g, type DashboardUser as h, HarnessPicker as i, type HarnessPickerProps as j, type HarnessType as k, InvoiceTable as l, type InvoiceTableProps as m, ModelPicker as n, type ModelPickerProps as o, type ModelPickerVariant as p, type ModelPreset as q, NewSandboxCard as r, type NewSandboxCardProps as s, type PlanCardData as t, PlanCards as u, type PlanCardsProps as v, type ProductVariant as w, ProfileAvatar as x, type ProfileAvatarProps as y, ProfileComparison as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.10.9",
+  "version": "0.12.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -151,6 +151,7 @@
   },
   "dependencies": {
     "@nanostores/react": "^1.1.0",
+    "@pierre/trees": "1.0.0-beta.3",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.0",