@tangle-network/sandbox-ui 0.32.0 → 0.33.1

package/dist/chat.d.ts

@@ -1,20 +1,19 @@
 import { MessageRole } from '@tangle-network/ui/chat';
 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';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReasoningEffort, HarnessType } from '@tangle-network/agent-interface';
 import * as React from 'react';
 import { M as ModelInfo } from './model-picker-Cmisf9Y8.js';
-import { e as HarnessType } from './harness-picker-lyeEncN4.js';
 
 /**
- * Thinking-effort ladder — the superset of the per-harness reasoning scales so
- * one control covers every backend. Consumers map each level onto what the
- * chosen harness/model supports (and degrade unsupported ones):
- *   - OpenAI / Codex reasoning_effort: minimal · low · medium · high · xhigh
- *   - Anthropic (Claude) extended thinking: … · high · max
- *   - Claude Code: … · high · max · ultracode
- *   - generic: low · medium · high
+ * A reasoning selection: `auto` is a UI-only sentinel ("let the harness/model default decide",
+ * sends no explicit override); every other value is the canonical `ReasoningEffort` from
+ * `@tangle-network/agent-interface` (the single source of truth — `none` … `ultracode`). The picker
+ * shows only the levels the chosen harness/model supports — see `reasoningEffortsFor` + the
+ * `available` prop — so unsupported levels (codex's `xhigh`/`ultracode`, kimi's mid-range) never
+ * appear rather than being silently degraded.
  */
-type ReasoningLevel = "auto" | "minimal" | "low" | "medium" | "high" | "xhigh" | "max" | "ultracode";
+type ReasoningLevel = "auto" | ReasoningEffort;
 interface ReasoningLevelOption {
     value: ReasoningLevel;
     label: string;
@@ -27,9 +26,16 @@ interface ReasoningLevelPickerProps {
     className?: string;
     triggerClassName?: string;
     options?: ReadonlyArray<ReasoningLevelOption>;
+    /**
+     * Capability filter — the reasoning efforts the currently-selected harness/model supports, from
+     * `reasoningEffortsFor(harness, model)`. When provided, the picker shows ONLY these (plus the
+     * `auto` sentinel), so a harness that can't do `ultracode`/`xhigh` (e.g. codex) never offers it.
+     * Omit to show every option.
+     */
+    available?: ReadonlyArray<ReasoningEffort>;
 }
 declare const DEFAULT_REASONING_LEVEL_OPTIONS: ReadonlyArray<ReasoningLevelOption>;
-declare function ReasoningLevelPicker({ value, onChange, disabled, className, triggerClassName, options, }: ReasoningLevelPickerProps): react_jsx_runtime.JSX.Element;
+declare function ReasoningLevelPicker({ value, onChange, disabled, className, triggerClassName, options, available, }: ReasoningLevelPickerProps): react_jsx_runtime.JSX.Element;
 
 interface AgentSessionHarnessControl {
     value: HarnessType;
@@ -63,6 +69,11 @@ interface AgentSessionReasoningControl {
     onChange: (value: ReasoningLevel) => void;
     options?: ReadonlyArray<ReasoningLevelOption>;
     disabled?: boolean;
+    /**
+     * Reasoning efforts to offer when no harness is selected (e.g. a model-derived capability set).
+     * When a harness IS present the strip derives this from `reasoningEffortsFor(harness)` instead.
+     */
+    available?: ReadonlyArray<ReasoningEffort>;
 }
 interface AgentSessionControlsProps {
     /**
@@ -130,7 +141,7 @@ interface HarnessModelPolicy {
      */
     preferred: ReadonlyArray<RegExp>;
 }
-declare const HARNESS_MODEL_POLICIES: Record<HarnessType, HarnessModelPolicy>;
+declare const HARNESS_MODEL_POLICIES: Partial<Record<HarnessType, HarnessModelPolicy>>;
 /** Provider prefix of a canonical id ("anthropic/claude-…" → "anthropic"). */
 declare function modelProvider(modelId: string): string | null;
 /**

package/dist/chat.js

@@ -16,8 +16,8 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-E267TDZP.js";
-import "./chunk-JC7GMQK7.js";
+} from "./chunk-AWYBQTP6.js";
+import "./chunk-I64YISXS.js";
 import "./chunk-NMR2CTGP.js";
 import "./chunk-EI44GEQ5.js";
 export {

package/dist/{chunk-CI6RWXWY.js → chunk-75Z5H43I.js}

@@ -2610,10 +2610,27 @@ import { GitBranch, GitCommit, FileEdit, FilePlus, File } from "lucide-react";
 import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 function GitPanel({ status, log, loading = false, onRefresh, className }) {
   if (loading) {
-    return /* @__PURE__ */ jsx21("div", { className: cn("rounded-lg border border-border bg-card p-5", className), children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx21("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" }),
-      "Loading git info..."
-    ] }) });
+    return /* @__PURE__ */ jsxs20(
+      "div",
+      {
+        className: cn("rounded-lg border border-border bg-card overflow-hidden", className),
+        "aria-busy": "true",
+        children: [
+          /* @__PURE__ */ jsx21("span", { className: "sr-only", children: "Loading git info\u2026" }),
+          /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-between border-b border-border bg-muted/30 px-4 py-3", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx21(GitBranch, { className: "h-4 w-4 text-muted-foreground" }),
+            /* @__PURE__ */ jsx21("div", { className: "h-3.5 w-24 animate-pulse rounded bg-muted" })
+          ] }) }),
+          /* @__PURE__ */ jsxs20("div", { className: "px-4 py-3", children: [
+            /* @__PURE__ */ jsx21("div", { className: "mb-2 h-2.5 w-20 animate-pulse rounded bg-muted" }),
+            /* @__PURE__ */ jsx21("div", { className: "space-y-2.5", children: [0, 1, 2].map((row) => /* @__PURE__ */ jsxs20("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx21(GitCommit, { className: "mt-0.5 h-3 w-3 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsx21("div", { className: "h-3 w-3/4 animate-pulse rounded bg-muted" })
+            ] }, row)) })
+          ] })
+        ]
+      }
+    );
   }
   if (!status) {
     return /* @__PURE__ */ jsx21("div", { className: cn("rounded-lg border border-border bg-card p-5", className), children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [

package/dist/{chunk-E267TDZP.js → chunk-AWYBQTP6.js}

@@ -2,7 +2,7 @@ import {
   HARNESS_OPTIONS,
   HarnessLogo,
   chatCapableHarnesses
-} from "./chunk-JC7GMQK7.js";
+} from "./chunk-I64YISXS.js";
 import {
   ModelPicker,
   canonicalModelId
@@ -23,18 +23,11 @@ import {
 } from "@tangle-network/ui/chat";
 
 // src/chat/reasoning-level-picker.tsx
+import { reasoningLadder } from "@tangle-network/agent-interface";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { Brain, ChevronDown, Sparkles } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var REASONING_LADDER = [
-  "minimal",
-  "low",
-  "medium",
-  "high",
-  "xhigh",
-  "max",
-  "ultracode"
-];
+var REASONING_LADDER = reasoningLadder;
 function ReasoningGlyph({ level }) {
   if (level === "auto") {
     return /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5 text-muted-foreground" });
@@ -64,13 +57,13 @@ function ReasoningGlyph({ level }) {
 }
 var DEFAULT_REASONING_LEVEL_OPTIONS = [
   { value: "auto", label: "Auto", description: "Let the agent pick the right depth." },
-  { value: "minimal", label: "Minimal", description: "Almost no deliberation \u2014 fastest, cheapest." },
+  { value: "none", label: "None", description: "No extended thinking \u2014 fastest, cheapest." },
+  { value: "minimal", label: "Minimal", description: "Thinking on, lowest budget." },
   { value: "low", label: "Low", description: "Fast, direct answers." },
   { value: "medium", label: "Medium", description: "Inspect context before acting." },
   { value: "high", label: "High", description: "Deeper planning and edge-case checks." },
   { value: "xhigh", label: "Extra High", description: "Extended reasoning for hard problems (Codex/OpenAI)." },
-  { value: "max", label: "Max", description: "Maximum extended thinking budget (Claude)." },
-  { value: "ultracode", label: "Ultracode", description: "Exhaustive multi-pass reasoning (Claude Code)." }
+  { value: "ultracode", label: "Ultracode", description: "Maximum extended thinking (Claude Code's ultracode)." }
 ];
 function ReasoningLevelPicker({
   value,
@@ -78,9 +71,11 @@ function ReasoningLevelPicker({
   disabled,
   className,
   triggerClassName,
-  options = DEFAULT_REASONING_LEVEL_OPTIONS
+  options = DEFAULT_REASONING_LEVEL_OPTIONS,
+  available
 }) {
-  const selected = options.find((option) => option.value === value);
+  const shown = available ? options.filter((o) => o.value === "auto" || available.includes(o.value)) : options;
+  const selected = shown.find((option) => option.value === value);
   const label = selected?.label ?? "Auto";
   return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
     /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
@@ -117,7 +112,7 @@ function ReasoningLevelPicker({
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
         ),
-        children: options.map((option) => /* @__PURE__ */ jsxs(
+        children: shown.map((option) => /* @__PURE__ */ jsxs(
           DropdownMenu.Item,
           {
             onSelect: (event) => {
@@ -145,6 +140,7 @@ function ReasoningLevelPicker({
 }
 
 // src/chat/agent-session-controls.tsx
+import { reasoningEffortsFor } from "@tangle-network/agent-interface";
 import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
 import { ChevronDown as ChevronDown2, Lock, SlidersHorizontal } from "lucide-react";
 
@@ -200,6 +196,7 @@ function snapModelToHarness(harness, modelId, models) {
   if (isModelCompatibleWithHarness(harness, modelId)) return modelId;
   const ids = models.map(canonicalModelId);
   const policy = HARNESS_MODEL_POLICIES[harness];
+  if (!policy) return modelId;
   for (const pattern of policy.preferred) {
     const matches = ids.filter((id) => pattern.test(id)).sort((a, b) => numericDesc.compare(b, a));
     if (matches.length > 0) return matches[0];
@@ -356,7 +353,8 @@ function AgentSessionControls({
       value: reasoning.value,
       onChange: reasoning.onChange,
       options: reasoning.options,
-      disabled: reasoning.disabled
+      disabled: reasoning.disabled,
+      available: harness ? reasoningEffortsFor(harness.value) : reasoning.available
     }
   );
   if (layout === "gear") {

package/dist/{chunk-JC7GMQK7.js → chunk-I64YISXS.js}

@@ -123,7 +123,7 @@ var HARNESS_BRAND = {
   "cli-base": { label: "CLI base", icon: Terminal }
 };
 function HarnessLogo({ type, size = 16, className }) {
-  const brand = HARNESS_BRAND[type];
+  const brand = HARNESS_BRAND[type] ?? { label: type, icon: Bot };
   const Icon2 = brand.icon;
   return /* @__PURE__ */ jsx2(
     "span",

package/dist/dashboard.d.ts

@@ -1,10 +1,62 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { e as HarnessType } from './harness-picker-lyeEncN4.js';
-export { B as Backend, a as BackendSelector, b as BackendSelectorProps, H as HARNESS_OPTIONS, c as HarnessPicker, d as HarnessPickerProps, f as chatCapableHarnesses } from './harness-picker-lyeEncN4.js';
+import { ReactNode } from 'react';
+import { HarnessType } from '@tangle-network/agent-interface';
+export { HarnessType } from '@tangle-network/agent-interface';
 export { D as DEFAULT_FEATURED_MODEL_IDS, M as ModelInfo, a as ModelPicker, b as ModelPickerProps, c as ModelPickerVariant, d as canonicalModelId, e as dedupeModels, f as formatContext, g as formatPricing, m as modelDedupKey } from './model-picker-Cmisf9Y8.js';
 export { B as BillingBalance, a as BillingDashboard, b as BillingDashboardProps, c as BillingSubscription, d as BillingUsage, P as PricingPage, e as PricingPageProps, f as PricingTier, T as TemplateCard, g as TemplateCardData, h as TemplateCardProps, U as UsageChart, i as UsageChartProps, j as UsageDataPoint, k as formatPrice } from './template-card-UhV3pmRC.js';
 
+interface Backend {
+    type: string;
+    label: string;
+    description?: string;
+    /** Optional leading brand glyph (e.g. a HarnessLogo) shown in the trigger and rows. */
+    icon?: ReactNode;
+}
+interface BackendSelectorProps {
+    backends: Backend[];
+    selected: string;
+    onChange: (selected: string) => void;
+    label?: string;
+    placeholder?: string;
+    className?: string;
+}
+declare function BackendSelector({ backends, selected, onChange, label, placeholder, className, }: BackendSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface HarnessOption extends Backend {
+    type: HarnessType;
+    /**
+     * Whether this harness can drive an interactive chat session. `false` for
+     * shell-only backends (`cli-base`) that have no conversational agent — the
+     * chat composer filters these out (see {@link chatCapableHarnesses}) while
+     * scheduled/non-chat surfaces keep them.
+     */
+    chatCapable: boolean;
+}
+/**
+ * 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[];
+/** Harness types that can drive an interactive chat session. */
+declare const chatCapableHarnesses: ReadonlyArray<HarnessType>;
+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;
+
 interface SidebarUser {
     email: string;
     name?: string;
@@ -540,7 +592,7 @@ interface HarnessBrand {
         className?: string;
     }>;
 }
-declare const HARNESS_BRAND: Record<HarnessType, HarnessBrand>;
+declare const HARNESS_BRAND: Partial<Record<HarnessType, HarnessBrand>>;
 interface HarnessLogoProps {
     type: HarnessType;
     /** Chip edge length in px. Default 16 (matches the model pill glyph). */
@@ -983,4 +1035,4 @@ interface InfoPanelProps {
 }
 declare function InfoPanel({ label, title, description, className }: InfoPanelProps): react_jsx_runtime.JSX.Element;
 
-export { ActivityFeed, type ActivityFeedProps, type ActivityItem, BackendConfig, type BackendConfigProps, 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_BRAND, type HarnessBrand, HarnessLogo, type HarnessLogoProps, HarnessType, 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, 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, RailCollapseToggle, type RailCollapseToggleProps, RailFlyout, type RailFlyoutProps, 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, UsageSummary, type UsageSummaryData, type UsageSummaryProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus, canAdminSandbox, parseInsufficientBalance, useSidebar };
+export { ActivityFeed, type ActivityFeedProps, type ActivityItem, 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_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, 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, RailCollapseToggle, type RailCollapseToggleProps, RailFlyout, type RailFlyoutProps, 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, UsageSummary, type UsageSummaryData, type UsageSummaryProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus, canAdminSandbox, chatCapableHarnesses, parseInsufficientBalance, useSidebar };

package/dist/dashboard.js

@@ -52,7 +52,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-CI6RWXWY.js";
+} from "./chunk-75Z5H43I.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -69,7 +69,7 @@ import {
   HarnessLogo,
   HarnessPicker,
   chatCapableHarnesses
-} from "./chunk-JC7GMQK7.js";
+} from "./chunk-I64YISXS.js";
 import {
   DEFAULT_FEATURED_MODEL_IDS,
   ModelPicker,

package/dist/hooks.d.ts

@@ -1,10 +1,11 @@
 export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AuthUser, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, ConnectionState, 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';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { Session } from './types.js';
-export { e as SendMessageOptions, S as SessionInfo, a as SidecarAuth, U as UseSessionStreamOptions, b as UseSessionStreamResult, c as UseSidecarAuthOptions, u as useSessionStream, d as useSidecarAuth } from './sdk-hooks-jUbIngSV.js';
+export { e as SendMessageOptions, S as SessionInfo, a as SidecarAuth, U as UseSessionStreamOptions, b as UseSessionStreamResult, c as UseSidecarAuthOptions, u as useSessionStream, d as useSidecarAuth } from './sdk-hooks-VtiMwKa6.js';
 import '@tangle-network/ui/types';
 import '@tangle-network/ui/stores';
 import '@tangle-network/ui/sdk-hooks';
+import '@tangle-network/agent-interface';
 
 interface UsePtySessionOptions {
     /** Base URL of the sidecar (e.g. "http://localhost:9100"). */

package/dist/index.d.ts

@@ -8,20 +8,20 @@ export { AgentSessionControls, AgentSessionControlsProps, AgentSessionHarnessCon
 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 { ActivityFeed, ActivityFeedProps, ActivityItem, BackendConfig, BackendConfigProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, ExposedPort, GitCommitData, GitPanel, GitPanelProps, GitStatusData, HARNESS_BRAND, HarnessBrand, HarnessLogo, HarnessLogoProps, 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, PortsList, PortsListProps, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailCollapseToggle, RailCollapseToggleProps, RailFlyout, RailFlyoutProps, 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, UsageSummary, UsageSummaryData, UsageSummaryProps, Variant, VariantList, VariantListProps, VariantOutcome, VariantStatus, canAdminSandbox, parseInsufficientBalance, useSidebar } from './dashboard.js';
-export { B as Backend, a as BackendSelector, b as BackendSelectorProps, H as HARNESS_OPTIONS, c as HarnessPicker, d as HarnessPickerProps, e as HarnessType, f as chatCapableHarnesses } from './harness-picker-lyeEncN4.js';
+export { ActivityFeed, ActivityFeedProps, ActivityItem, Backend, BackendConfig, BackendConfigProps, BackendSelector, BackendSelectorProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, ExposedPort, 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, PortsList, PortsListProps, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailCollapseToggle, RailCollapseToggleProps, RailFlyout, RailFlyoutProps, 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, UsageSummary, UsageSummaryData, UsageSummaryProps, Variant, VariantList, VariantListProps, VariantOutcome, VariantStatus, canAdminSandbox, chatCapableHarnesses, parseInsufficientBalance, useSidebar } from './dashboard.js';
 export { D as DEFAULT_FEATURED_MODEL_IDS, M as ModelInfo, a as ModelPicker, b as ModelPickerProps, c as ModelPickerVariant, d as canonicalModelId, e as dedupeModels, f as formatContext, g as formatPricing, m as modelDedupKey } from './model-picker-Cmisf9Y8.js';
 export { B as BillingBalance, a as BillingDashboard, b as BillingDashboardProps, c as BillingSubscription, d as BillingUsage, P as PricingPage, e as PricingPageProps, f as PricingTier, T as TemplateCard, g as TemplateCardData, h as TemplateCardProps, U as UsageChart, i as UsageChartProps, j as UsageDataPoint, k as formatPrice } from './template-card-UhV3pmRC.js';
 export { 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';
 export { SandboxMetrics, SidecarMetricsPayload, UsePtySessionOptions, UsePtySessionReturn, UseSandboxMetricsOptions, UseSandboxMetricsResult, useCreateSession, useDeleteSession, usePtySession, useRenameSession, useSandboxMetrics, useSessions } from './hooks.js';
-export { S as SessionInfo, a as SidecarAuth, U as UseSessionStreamOptions, b as UseSessionStreamResult, c as UseSidecarAuthOptions, u as useSessionStream, d as useSidecarAuth } from './sdk-hooks-jUbIngSV.js';
+export { S as SessionInfo, a as SidecarAuth, U as UseSessionStreamOptions, b as UseSessionStreamResult, c as UseSidecarAuthOptions, u as useSessionStream, d as useSidecarAuth } from './sdk-hooks-VtiMwKa6.js';
 export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, RegisterActiveSessionOptions, SessionProjectKey, activeSessionsAtom, addMessage, addParts, bumpActiveSessionActivity, clearChat, getActiveSession, getAllActiveSessions, getAllProjectActivity, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getTotalRunningSessionCount, hasBackgroundRunningSessions, isStreamingAtom, messagesAtom, partMapAtom, registerActiveSession, resetActiveSessions, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useHasBackgroundRunningSessions, useNavbarSessions, useProjectActivity, useProjectSessions, useSessionsByActivity, useTotalRunningSessions } from '@tangle-network/ui/stores';
 export { ChatSession, connectSession, disconnectSession, sessionAtom } from './stores.js';
 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';
 export { Session } from './types.js';
 export { TOOL_CATEGORY_ICONS, cn, copyText, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText } from '@tangle-network/ui/utils';
+export { HarnessType } from '@tangle-network/agent-interface';
 import 'react/jsx-runtime';
 import 'react';
 import '@tanstack/react-query';

package/dist/index.js

@@ -104,7 +104,7 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-E267TDZP.js";
+} from "./chunk-AWYBQTP6.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
@@ -199,7 +199,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-CI6RWXWY.js";
+} from "./chunk-75Z5H43I.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -302,7 +302,7 @@ import {
   HarnessLogo,
   HarnessPicker,
   chatCapableHarnesses
-} from "./chunk-JC7GMQK7.js";
+} from "./chunk-I64YISXS.js";
 import {
   DEFAULT_FEATURED_MODEL_IDS,
   ModelPicker,

package/dist/{sdk-hooks-jUbIngSV.d.ts → sdk-hooks-VtiMwKa6.d.ts}

@@ -1,4 +1,5 @@
 import '@tangle-network/ui/sdk-hooks';
+import { ReasoningEffort } from '@tangle-network/agent-interface';
 import { SessionMessage, SessionPart } from '@tangle-network/ui/types';
 
 /** Minimal session info returned by the listing API. */
@@ -32,8 +33,10 @@ interface SendMessageOptions {
     };
     /** Per-turn system prompt override. */
     system?: string;
-    /** Thinking-effort hint; the sidecar maps it to a thinking-token budget. */
-    reasoningEffort?: 'low' | 'medium' | 'high';
+    /** Thinking-effort hint; the sidecar maps it to a thinking-token budget. The full canonical
+     *  `ReasoningEffort` (`@tangle-network/agent-interface`) — the UI shows only the levels the
+     *  selected harness/model actually supports (a capability filter), never a hard-coded subset. */
+    reasoningEffort?: ReasoningEffort;
 }
 interface UseSessionStreamResult {
     /** All messages in the session (fetched + streaming). */

package/dist/sdk-hooks.d.ts

@@ -1,3 +1,4 @@
 export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, ConnectionState, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, TaskStreamEvent, TerminalStreamEvent, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, useAutoScroll, useDropdownMenu, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream } from '@tangle-network/ui/sdk-hooks';
-export { S as SessionInfo, a as SidecarAuth, U as UseSessionStreamOptions, b as UseSessionStreamResult, c as UseSidecarAuthOptions, u as useSessionStream, d as useSidecarAuth } from './sdk-hooks-jUbIngSV.js';
+export { S as SessionInfo, a as SidecarAuth, U as UseSessionStreamOptions, b as UseSessionStreamResult, c as UseSidecarAuthOptions, u as useSessionStream, d as useSidecarAuth } from './sdk-hooks-VtiMwKa6.js';
+import '@tangle-network/agent-interface';
 import '@tangle-network/ui/types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.32.0",
+  "version": "0.33.1",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -117,7 +117,8 @@
     "@tangle-network/brand": "^0.4.0",
     "@tangle-network/ui": "^1.0.1",
     "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
+    "react-dom": "^18 || ^19",
+    "@tangle-network/agent-interface": "^0.9.0"
   },
   "peerDependenciesMeta": {
     "@xterm/xterm": {
@@ -197,6 +198,7 @@
     "typescript": "^5.8.3",
     "vite": "^8.0.5",
     "vitest": "^4.1.3",
-    "yjs": "^13.6.30"
+    "yjs": "^13.6.30",
+    "@tangle-network/agent-interface": "^0.9.0"
   }
 }

package/dist/harness-picker-lyeEncN4.d.ts

@@ -1,63 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
-interface Backend {
-    type: string;
-    label: string;
-    description?: string;
-    /** Optional leading brand glyph (e.g. a HarnessLogo) shown in the trigger and rows. */
-    icon?: ReactNode;
-}
-interface BackendSelectorProps {
-    backends: Backend[];
-    selected: string;
-    onChange: (selected: string) => void;
-    label?: string;
-    placeholder?: string;
-    className?: string;
-}
-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. The SDK's `pi`, `forge`,
- * `acp`, and `cursor` backends are deliberately deferred (not yet
- * surfaced in the picker) until their copy and compat policies land.
- */
-type HarnessType = "opencode" | "claude-code" | "codex" | "amp" | "factory-droids" | "cli-base" | "kimi-code" | "openclaw" | "nanoclaw" | "hermes";
-interface HarnessOption extends Backend {
-    type: HarnessType;
-    /**
-     * Whether this harness can drive an interactive chat session. `false` for
-     * shell-only backends (`cli-base`) that have no conversational agent — the
-     * chat composer filters these out (see {@link chatCapableHarnesses}) while
-     * scheduled/non-chat surfaces keep them.
-     */
-    chatCapable: boolean;
-}
-/**
- * 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[];
-/** Harness types that can drive an interactive chat session. */
-declare const chatCapableHarnesses: ReadonlyArray<HarnessType>;
-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;
-
-export { type Backend as B, HARNESS_OPTIONS as H, BackendSelector as a, type BackendSelectorProps as b, HarnessPicker as c, type HarnessPickerProps as d, type HarnessType as e, chatCapableHarnesses as f };