@tangle-network/sandbox-ui 0.31.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

@@ -152,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;
@@ -961,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, 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, 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

@@ -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-JC7GMQK7.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/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, 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 { 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';

package/dist/index.js

@@ -104,7 +104,7 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-BJFWPP5T.js";
+} from "./chunk-E267TDZP.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-JC7GMQK7.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,