@tangle-network/sandbox-ui 0.31.0 → 0.33.0

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

@@ -1,6 +1,6 @@
 import {
   moonshot_default
-} from "./chunk-6NQBODYV.js";
+} from "./chunk-NMR2CTGP.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.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/{chunk-6NQBODYV.js → chunk-NMR2CTGP.js}

@@ -331,9 +331,9 @@ function ModelPicker({
         "inline-flex h-8 items-center gap-1.5 rounded-lg border border-border bg-card",
         "px-2.5 text-xs font-medium text-foreground shadow-sm",
         "transition-colors duration-[var(--transition-fast)]",
-        "hover:border-primary/30 hover:bg-accent/30",
-        "focus:outline-none focus:border-primary/40",
-        "data-[state=open]:border-primary/40 data-[state=open]:bg-accent/30",
+        "hover:border-border hover:bg-muted/40",
+        "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "data-[state=open]:border-border data-[state=open]:bg-muted/40",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         className,
         triggerClassName
@@ -354,9 +354,9 @@ function ModelPicker({
         "flex w-full items-center justify-between gap-2 rounded-[var(--radius-md)]",
         "border border-border bg-card px-3 py-2.5 text-sm text-left",
         "transition-colors duration-[var(--transition-fast)]",
-        "hover:border-primary/20 hover:bg-accent/30",
-        "focus:outline-none focus:border-primary/30",
-        "data-[state=open]:border-primary/30 data-[state=open]:bg-accent/30",
+        "hover:border-border hover:bg-muted/40",
+        "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "data-[state=open]:border-border data-[state=open]:bg-muted/40",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         className,
         triggerClassName

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;
@@ -152,6 +204,28 @@ interface ProfileAvatarProps {
 }
 declare function ProfileAvatar({ user, isLoading, onLogout, onSettingsClick, settingsHref, children, className, showDetails, LinkComponent, }: ProfileAvatarProps): react_jsx_runtime.JSX.Element;
 
+interface RailTooltipProps {
+    /** Tooltip text shown to the right of the trigger. */
+    label: string;
+    /** The trigger element (icon button / link). */
+    children: React.ReactNode;
+    /** Disable the tooltip (e.g. when the rail is expanded and the label is inline). */
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Quiet, instant-ish styled tooltip for the icon-only rail. CSS-only (no
+ * portal, no extra deps): the trigger wraps in a `group` and the label is an
+ * absolutely-positioned sibling to the RIGHT, revealed on `group-hover` /
+ * `group-focus-within` after a short delay. Matches the `--popover` / border
+ * tokens so it reads as Tangle Quiet chrome rather than a native `title`.
+ *
+ * Replaces reliance on the native `title` attribute for the collapsed rail
+ * (no ~1.5s delay, themeable, keyboard-focus reachable). Hidden via
+ * `aria-hidden` since the trigger already carries an accessible name.
+ */
+declare function RailTooltip({ label, children, disabled, className }: RailTooltipProps): react_jsx_runtime.JSX.Element;
+
 /** Width constants (px) — Tangle Quiet density (ChatGPT-minimal) */
 declare const SIDEBAR_RAIL_WIDTH = 56;
 declare const SIDEBAR_PANEL_WIDTH = 268;
@@ -518,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). */
@@ -961,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, 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

@@ -24,6 +24,7 @@ import {
   RailModeButton,
   RailSeparator,
   RailThemeToggle,
+  RailTooltip,
   ResourceMeter,
   ResourceSnapshot,
   SIDEBAR_MOBILE_WIDTH,
@@ -51,7 +52,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-SXAMR3TV.js";
+} from "./chunk-CI6RWXWY.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -59,7 +60,7 @@ import {
   TemplateCard,
   UsageChart,
   formatPrice
-} from "./chunk-DNZ4DTNA.js";
+} from "./chunk-2XNT74ZX.js";
 import "./chunk-7ZA5SEK3.js";
 import {
   BackendSelector,
@@ -68,7 +69,7 @@ import {
   HarnessLogo,
   HarnessPicker,
   chatCapableHarnesses
-} from "./chunk-ELGN7DPS.js";
+} from "./chunk-I64YISXS.js";
 import {
   DEFAULT_FEATURED_MODEL_IDS,
   ModelPicker,
@@ -77,7 +78,7 @@ import {
   formatContext,
   formatPricing,
   modelDedupKey
-} from "./chunk-6NQBODYV.js";
+} from "./chunk-NMR2CTGP.js";
 import "./chunk-EI44GEQ5.js";
 export {
   ActivityFeed,
@@ -115,6 +116,7 @@ export {
   RailModeButton,
   RailSeparator,
   RailThemeToggle,
+  RailTooltip,
   ResourceMeter,
   ResourceSnapshot,
   SIDEBAR_MOBILE_WIDTH,

package/dist/globals.css

@@ -301,9 +301,6 @@
   .end {
     inset-inline-end: var(--spacing);
   }
-  .-top-1 {
-    top: calc(var(--spacing) * -1);
-  }
   .-top-1\.5 {
     top: calc(var(--spacing) * -1.5);
   }
@@ -346,9 +343,6 @@
   .top-full {
     top: 100%;
   }
-  .-right-1 {
-    right: calc(var(--spacing) * -1);
-  }
   .-right-1\.5 {
     right: calc(var(--spacing) * -1.5);
   }
@@ -2268,6 +2262,9 @@
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
+  .py-10 {
+    padding-block: calc(var(--spacing) * 10);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
@@ -2904,10 +2901,6 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-xl {
-    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2977,6 +2970,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[opacity\,transform\] {
+    transition-property: opacity,transform;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[opacity\] {
     transition-property: opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3064,6 +3062,17 @@
       rotate: 180deg;
     }
   }
+  .group-focus-within\/tip\:translate-x-0 {
+    &:is(:where(.group\/tip):focus-within *) {
+      --tw-translate-x: calc(var(--spacing) * 0);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .group-focus-within\/tip\:opacity-100 {
+    &:is(:where(.group\/tip):focus-within *) {
+      opacity: 100%;
+    }
+  }
   .group-hover\:translate-x-0\.5 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3079,6 +3088,28 @@
       }
     }
   }
+  .group-hover\/tip\:translate-x-0 {
+    &:is(:where(.group\/tip):hover *) {
+      @media (hover: hover) {
+        --tw-translate-x: calc(var(--spacing) * 0);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .group-hover\/tip\:opacity-100 {
+    &:is(:where(.group\/tip):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
+  .group-hover\/tip\:delay-300 {
+    &:is(:where(.group\/tip):hover *) {
+      @media (hover: hover) {
+        transition-delay: 300ms;
+      }
+    }
+  }
   .peer-disabled\:cursor-not-allowed {
     &:is(:where(.peer):disabled ~ *) {
       cursor: not-allowed;
@@ -3402,14 +3433,6 @@
       }
     }
   }
-  .hover\:shadow-md {
-    &:hover {
-      @media (hover: hover) {
-        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-    }
-  }
   .hover\:shadow-sm {
     &:hover {
       @media (hover: hover) {
@@ -3433,6 +3456,11 @@
       }
     }
   }
+  .focus\:border-\[var\(--border-accent\)\] {
+    &:focus {
+      border-color: var(--border-accent);
+    }
+  }
   .focus\:border-\[var\(--border-accent-hover\)\] {
     &:focus {
       border-color: var(--border-accent-hover);
@@ -3494,6 +3522,16 @@
       outline-style: none;
     }
   }
+  .focus-visible\:border-\[var\(--border-accent\)\] {
+    &:focus-visible {
+      border-color: var(--border-accent);
+    }
+  }
+  .focus-visible\:bg-transparent {
+    &:focus-visible {
+      background-color: transparent;
+    }
+  }
   .focus-visible\:opacity-100 {
     &:focus-visible {
       opacity: 100%;
@@ -4455,7 +4493,7 @@
       "ss01" 1;
   }
   ::selection {
-    background: rgba(56, 178, 172, 0.22);
+    background: var(--bg-selection);
     color: hsl(var(--hsl-foreground));
   }
   ::-webkit-scrollbar {
@@ -4466,12 +4504,16 @@
     background: transparent;
   }
   ::-webkit-scrollbar-thumb {
-    background: hsl(var(--border) / 0.7);
-    border-radius: 3px;
+    background: hsl(var(--border) / 0.6);
+    border-radius: 9999px;
   }
   ::-webkit-scrollbar-thumb:hover {
     background: hsl(var(--muted-foreground) / 0.4);
   }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--border) / 0.6) transparent;
+  }
 }
 @layer utilities {
   .text-gradient-sandbox {
@@ -4481,7 +4523,7 @@
     color: transparent;
   }
   .glow-sandbox {
-    box-shadow: 0 0 48px -10px hsl(var(--sandbox) / 0.45);
+    box-shadow: none;
   }
   .glass-card {
     background: hsl(var(--card));
@@ -4496,31 +4538,26 @@
     border: 1px solid hsl(var(--border));
   }
   .glass-panel {
-    background: hsl(var(--card) / 0.4);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid hsl(var(--primary) / 0.1);
-    box-shadow: 0 4px 30px hsl(var(--background) / 0.3);
+    background: hsl(var(--card));
+    border: 1px solid hsl(var(--border));
+    box-shadow: var(--shadow-card);
   }
   .glass-panel-heavy {
-    background: hsl(var(--card) / 0.7);
-    backdrop-filter: blur(24px);
-    -webkit-backdrop-filter: blur(24px);
-    border: 1px solid hsl(var(--primary) / 0.12);
-    box-shadow: 0 8px 32px hsl(var(--background) / 0.5);
+    background: hsl(var(--card));
+    border: 1px solid hsl(var(--border));
+    box-shadow: var(--shadow-card);
   }
   .glass-panel:hover {
-    border-color: hsl(var(--primary) / 0.25);
+    border-color: hsl(var(--border));
   }
   .glow-primary {
-    box-shadow: 0 0 40px hsl(var(--primary) / 0.25);
-    transition: box-shadow 0.4s ease-in-out;
+    box-shadow: none;
   }
   .glow-primary:hover {
-    box-shadow: 0 0 60px hsl(var(--primary) / 0.4);
+    box-shadow: none;
   }
   .text-glow {
-    text-shadow: 0 0 16px hsl(var(--primary) / 0.6);
+    text-shadow: none;
   }
   .gradient-text {
     background: linear-gradient(135deg, hsl(var(--primary) / 0.7) 0%, hsl(var(--primary)) 100%);
@@ -4532,12 +4569,7 @@
     background: linear-gradient(135deg, hsl(var(--primary) / 0.1) 0%, hsl(var(--primary) / 0.05) 100%);
   }
   .neural-mesh {
-    background-image: radial-gradient(
-      circle at 2px 2px,
-      hsl(var(--primary) / 0.07) 1px,
-      transparent 0
-    );
-    background-size: 32px 32px;
+    background-image: none;
   }
   .nav-active-indicator {
     position: relative;
@@ -4552,7 +4584,6 @@
     width: 3px;
     background-color: hsl(var(--primary));
     border-radius: 0 4px 4px 0;
-    box-shadow: 0 0 10px hsl(var(--primary));
   }
   .glass {
     background-color: var(--depth-2);
@@ -4562,17 +4593,10 @@
     position: relative;
   }
   .bg-mesh::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: radial-gradient(ellipse 80% 50% at 20% 40%, var(--mesh-teal), transparent),
-      radial-gradient(ellipse 60% 40% at 80% 20%, var(--mesh-violet), transparent),
-      radial-gradient(ellipse 50% 60% at 50% 80%, var(--mesh-blue), transparent);
-    pointer-events: none;
-    z-index: 0;
+    content: none;
   }
   .noise {
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
+    background-image: none;
     pointer-events: none;
   }
   .status-dot {
@@ -4584,7 +4608,6 @@
   }
   .status-dot-running {
     background: var(--status-running);
-    box-shadow: var(--shadow-status-running);
   }
   .status-dot-creating {
     background: var(--status-creating);
@@ -4601,7 +4624,6 @@
   }
   .status-dot-error {
     background: var(--status-error);
-    box-shadow: var(--shadow-status-error);
   }
   .status-dot-deleted {
     background: var(--status-deleted);
@@ -4627,6 +4649,19 @@
   .animate-in {
     animation: fade-in 0.25s ease-out;
   }
+  .animate-row-in {
+    animation: row-in 0.18s ease-out;
+  }
+  @keyframes row-in {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
   .pulse-ring {
     position: relative;
   }

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, 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-BJFWPP5T.js";
+} from "./chunk-AWYBQTP6.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
@@ -133,7 +133,7 @@ import {
   dispatchSessionCreated,
   shellShouldRevalidate,
   useOptimisticSessionItems
-} from "./chunk-AUFV7766.js";
+} from "./chunk-6NDOA4SB.js";
 import {
   OpenUIArtifactRenderer
 } from "./chunk-AZ3AWMTM.js";
@@ -171,6 +171,7 @@ import {
   RailModeButton,
   RailSeparator,
   RailThemeToggle,
+  RailTooltip,
   ResourceMeter,
   ResourceSnapshot,
   SIDEBAR_MOBILE_WIDTH,
@@ -198,7 +199,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-SXAMR3TV.js";
+} from "./chunk-CI6RWXWY.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -206,7 +207,7 @@ import {
   TemplateCard,
   UsageChart,
   formatPrice
-} from "./chunk-DNZ4DTNA.js";
+} from "./chunk-2XNT74ZX.js";
 import {
   Avatar,
   AvatarFallback,
@@ -301,7 +302,7 @@ import {
   HarnessLogo,
   HarnessPicker,
   chatCapableHarnesses
-} from "./chunk-ELGN7DPS.js";
+} from "./chunk-I64YISXS.js";
 import {
   DEFAULT_FEATURED_MODEL_IDS,
   ModelPicker,
@@ -310,7 +311,7 @@ import {
   formatContext,
   formatPricing,
   modelDedupKey
-} from "./chunk-6NQBODYV.js";
+} from "./chunk-NMR2CTGP.js";
 import "./chunk-EI44GEQ5.js";
 
 // src/index.ts
@@ -445,6 +446,7 @@ export {
   RailModeButton,
   RailSeparator,
   RailThemeToggle,
+  RailTooltip,
   RealtimeSessionRegistry,
   ReasoningLevelPicker,
   ResourceMeter,