@tangle-network/sandbox-ui 0.30.0 → 0.32.0

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

@@ -2,11 +2,11 @@ import {
   HARNESS_OPTIONS,
   HarnessLogo,
   chatCapableHarnesses
-} from "./chunk-ELGN7DPS.js";
+} from "./chunk-JC7GMQK7.js";
 import {
   ModelPicker,
   canonicalModelId
-} from "./chunk-6NQBODYV.js";
+} from "./chunk-NMR2CTGP.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -91,8 +91,8 @@ function ReasoningLevelPicker({
         className: cn(
           "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",
-          "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:cursor-not-allowed disabled:opacity-50",
           className,
           triggerClassName
@@ -242,8 +242,8 @@ function HarnessDropdown({
         className: cn(
           "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",
-          "hover:border-primary/30 hover:bg-accent/40 focus:outline-none focus:border-primary/40",
-          "data-[state=open]:border-primary/40 data-[state=open]:bg-accent/40",
+          "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:cursor-not-allowed disabled:opacity-60"
         ),
         "aria-label": "Agent harness",
@@ -408,8 +408,8 @@ function GearControls({
               className: cn(
                 "inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-card",
                 "text-foreground shadow-sm transition-colors",
-                "hover:border-primary/30 hover:bg-accent/40 focus:outline-none focus:border-primary/40",
-                "data-[state=open]:border-primary/40 data-[state=open]:bg-accent/40"
+                "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"
               ),
               children: /* @__PURE__ */ jsx2(SlidersHorizontal, { className: "h-4 w-4 text-muted-foreground" })
             }
@@ -631,14 +631,14 @@ function ArtifactAgentDock({
     "aside",
     {
       className: cn(
-        "flex h-full w-[420px] min-w-[360px] max-w-[480px] flex-col border-l border-border bg-card/95 shadow-xl",
+        "flex h-full w-[420px] min-w-[360px] max-w-[480px] flex-col border-l border-border bg-card/95 shadow-[var(--shadow-dropdown)]",
         className
       ),
       "aria-label": `Agent chat about ${heading}`,
       children: [
         /* @__PURE__ */ jsxs3("header", { className: "flex items-center justify-between border-b border-border bg-background/60 px-4 py-3", children: [
           /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 items-center gap-2", children: [
-            /* @__PURE__ */ jsx3(Sparkles2, { className: "h-4 w-4 shrink-0 text-primary" }),
+            /* @__PURE__ */ jsx3(Sparkles2, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
             /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
               /* @__PURE__ */ jsx3("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: "Discussing" }),
               /* @__PURE__ */ jsx3("div", { className: "truncate text-sm font-semibold text-foreground", children: heading })
@@ -690,7 +690,7 @@ function ArtifactAgentDock({
                   placeholder: `Ask about ${heading}\u2026`,
                   rows: 2,
                   disabled: !threadId,
-                  className: "min-h-[44px] flex-1 resize-none rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:opacity-50"
+                  className: "min-h-[44px] flex-1 resize-none rounded-[20px] border border-border bg-background px-3.5 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:outline-none focus:border-[var(--border-accent)] disabled:opacity-50"
                 }
               ),
               sending ? /* @__PURE__ */ jsx3(
@@ -708,7 +708,7 @@ function ArtifactAgentDock({
                   type: "submit",
                   disabled: !composer.trim() || !threadId,
                   "aria-label": "Send",
-                  className: "inline-flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50",
+                  className: "inline-flex h-9 w-9 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50",
                   children: /* @__PURE__ */ jsx3(Send, { className: "h-4 w-4" })
                 }
               )

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

@@ -1,6 +1,6 @@
 import {
   moonshot_default
-} from "./chunk-6NQBODYV.js";
+} from "./chunk-NMR2CTGP.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";

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

@@ -11,6 +11,18 @@ interface SidebarUser {
     tier?: string;
     avatarUrl?: string;
 }
+declare function RailThemeToggle({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+interface RailCollapseToggleProps {
+    /** Whether the rail is currently collapsed (icon-only). */
+    collapsed: boolean;
+    /** Render with a label beside the chevron (expanded/labeled rail) vs. icon-only. */
+    showLabel?: boolean;
+    onToggle: () => void;
+    className?: string;
+}
+declare function RailCollapseToggle({ collapsed, showLabel, onToggle, className }: RailCollapseToggleProps): react_jsx_runtime.JSX.Element;
 interface SidebarProps {
     children: React.ReactNode;
     className?: string;
@@ -140,6 +152,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;
@@ -150,6 +184,12 @@ declare const SIDEBAR_TOTAL_WIDTH: number;
  * wide enough for icons; labels need a wider container to avoid truncation.
  */
 declare const SIDEBAR_MOBILE_WIDTH = 256;
+/**
+ * Rail width when labels are shown beside icons on desktop. The default rail is
+ * icon-only at {@link SIDEBAR_RAIL_WIDTH}; a labeled rail needs room for the
+ * longest nav label plus its badge.
+ */
+declare const SIDEBAR_RAIL_LABELED_WIDTH = 248;
 interface SidebarContextValue {
     /** Whether the content panel beside the rail is open */
     panelOpen: boolean;
@@ -167,15 +207,34 @@ interface SidebarContextValue {
     contentMargin: number;
     /** Whether there are panels at all */
     hasPanels: boolean;
-    /** Rail width in px — 64 for the icon-only rail, wider when labels show */
+    /**
+     * Whether the labeled nav rail is collapsed to the icon-only width. Independent
+     * of {@link panelOpen} (the slide-out content panel) — two separate collapses.
+     * Only meaningful when the rail is label-capable; an icon-only rail stays
+     * icon-only regardless.
+     */
+    railCollapsed: boolean;
+    setRailCollapsed: (collapsed: boolean) => void;
+    toggleRail: () => void;
+    /**
+     * Rail width in px — derived from {@link railCollapsed}: the icon-only width
+     * when collapsed (or when the rail is not label-capable), the labeled width
+     * when expanded.
+     */
     railWidth: number;
 }
 interface SidebarProviderProps {
     defaultPanelOpen?: boolean;
     defaultMode?: string;
     hasPanels?: boolean;
-    /** Rail width in px. Defaults to the 64px icon-only rail. */
-    railWidth?: number;
+    /**
+     * Whether the rail can show labels beside icons. When `true`, the expanded
+     * rail renders at {@link SIDEBAR_RAIL_LABELED_WIDTH} and the user can collapse
+     * it to the icon-only {@link SIDEBAR_RAIL_WIDTH} via {@link toggleRail}. When
+     * `false` (default) the rail is permanently icon-only and `railCollapsed` has
+     * no width effect.
+     */
+    labeledRail?: boolean;
     /**
      * Controlled panel-open state. When provided, the provider treats panel
      * visibility as controlled: it never reads or writes localStorage and
@@ -186,9 +245,19 @@ interface SidebarProviderProps {
      */
     panelOpen?: boolean;
     onPanelOpenChange?: (open: boolean) => void;
+    /**
+     * Controlled rail-collapsed state. Parallels {@link panelOpen}: when provided
+     * the provider never touches localStorage for the rail and reports changes
+     * through {@link onRailCollapsedChange}. Seed it from a cookie in SSR apps so
+     * the rail width survives reload without a hydration mismatch.
+     */
+    railCollapsed?: boolean;
+    onRailCollapsedChange?: (collapsed: boolean) => void;
+    /** Initial rail-collapsed state for the uncontrolled path. Default: expanded. */
+    defaultRailCollapsed?: boolean;
     children: React.ReactNode;
 }
-declare function SidebarProvider({ defaultPanelOpen, defaultMode, hasPanels, railWidth, panelOpen: controlledPanelOpen, onPanelOpenChange, children, }: SidebarProviderProps): react_jsx_runtime.JSX.Element;
+declare function SidebarProvider({ defaultPanelOpen, defaultMode, hasPanels, labeledRail, panelOpen: controlledPanelOpen, onPanelOpenChange, railCollapsed: controlledRailCollapsed, onRailCollapsedChange, defaultRailCollapsed, children, }: SidebarProviderProps): react_jsx_runtime.JSX.Element;
 declare function useSidebar(): SidebarContextValue;
 
 interface CreditBalanceProps {
@@ -633,8 +702,24 @@ interface SidebarLayoutProps {
     defaultPanelOpen?: boolean;
     /** Hide the whole sidebar below this breakpoint (content spans full width). */
     hideBelow?: "md" | "lg";
-    /** Show text labels beside the rail icons on a wider rail (vs. icon-only with hover tooltips). */
+    /**
+     * Make the rail label-capable: it renders labels beside the icons on a wider
+     * rail and gains a collapse/expand control that toggles between the labeled
+     * width and the icon-only rail (icons + hover tooltips). When omitted the rail
+     * is permanently icon-only with no collapse control.
+     */
     railLabels?: boolean;
+    /**
+     * Controlled rail-collapsed state. Provide it (seeded from a server-readable
+     * source such as a cookie) in SSR apps so the collapsed/expanded rail survives
+     * reload without a hydration mismatch. Omit to let the rail persist to
+     * localStorage. Independent of `panelOpen` — the nav rail and the slide-out
+     * panel collapse separately. Only meaningful with `railLabels`.
+     */
+    railCollapsed?: boolean;
+    onRailCollapsedChange?: (collapsed: boolean) => void;
+    /** Initial rail-collapsed state when uncontrolled (default: expanded). */
+    defaultRailCollapsed?: boolean;
     /**
      * Close the panel when a link nav item is clicked. Useful when the panel is
      * contextual to one section (e.g. a chat thread list) rather than a global
@@ -653,7 +738,7 @@ interface SidebarLayoutProps {
  * hide all live here. Pair `panelOpen`/`onPanelOpenChange` with a cookie for
  * SSR-safe persistence.
  */
-declare function SidebarLayout({ panelOpen, onPanelOpenChange, defaultPanelOpen, ...props }: SidebarLayoutProps): react_jsx_runtime.JSX.Element;
+declare function SidebarLayout({ panelOpen, onPanelOpenChange, defaultPanelOpen, railCollapsed, onRailCollapsedChange, defaultRailCollapsed, ...props }: SidebarLayoutProps): react_jsx_runtime.JSX.Element;
 
 interface Profile {
     id: string;
@@ -898,4 +983,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, RailFlyout, type RailFlyoutProps, RailModeButton, type RailModeButtonProps, RailSeparator, type RailSeparatorProps, ResourceMeter, type ResourceMeterProps, ResourceSnapshot, type ResourceSnapshotItem, type ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_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, 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 };

package/dist/dashboard.js

@@ -19,13 +19,17 @@ import {
   ProfileSelector,
   PromoBanner,
   RailButton,
+  RailCollapseToggle,
   RailFlyout,
   RailModeButton,
   RailSeparator,
+  RailThemeToggle,
+  RailTooltip,
   ResourceMeter,
   ResourceSnapshot,
   SIDEBAR_MOBILE_WIDTH,
   SIDEBAR_PANEL_WIDTH,
+  SIDEBAR_RAIL_LABELED_WIDTH,
   SIDEBAR_RAIL_WIDTH,
   SIDEBAR_TOTAL_WIDTH,
   SandboxCard,
@@ -48,7 +52,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-YPBFIETY.js";
+} from "./chunk-CI6RWXWY.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -56,7 +60,7 @@ import {
   TemplateCard,
   UsageChart,
   formatPrice
-} from "./chunk-DNZ4DTNA.js";
+} from "./chunk-2XNT74ZX.js";
 import "./chunk-7ZA5SEK3.js";
 import {
   BackendSelector,
@@ -65,7 +69,7 @@ import {
   HarnessLogo,
   HarnessPicker,
   chatCapableHarnesses
-} from "./chunk-ELGN7DPS.js";
+} from "./chunk-JC7GMQK7.js";
 import {
   DEFAULT_FEATURED_MODEL_IDS,
   ModelPicker,
@@ -74,7 +78,7 @@ import {
   formatContext,
   formatPricing,
   modelDedupKey
-} from "./chunk-6NQBODYV.js";
+} from "./chunk-NMR2CTGP.js";
 import "./chunk-EI44GEQ5.js";
 export {
   ActivityFeed,
@@ -107,13 +111,17 @@ export {
   ProfileSelector,
   PromoBanner,
   RailButton,
+  RailCollapseToggle,
   RailFlyout,
   RailModeButton,
   RailSeparator,
+  RailThemeToggle,
+  RailTooltip,
   ResourceMeter,
   ResourceSnapshot,
   SIDEBAR_MOBILE_WIDTH,
   SIDEBAR_PANEL_WIDTH,
+  SIDEBAR_RAIL_LABELED_WIDTH,
   SIDEBAR_RAIL_WIDTH,
   SIDEBAR_TOTAL_WIDTH,
   SandboxCard,

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/index.d.ts

@@ -8,7 +8,7 @@ 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, RailFlyout, RailFlyoutProps, RailModeButton, RailModeButtonProps, RailSeparator, RailSeparatorProps, ResourceMeter, ResourceMeterProps, ResourceSnapshot, ResourceSnapshotItem, ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_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 { 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 { 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';