@tangle-network/sandbox-ui 0.69.0 → 0.71.0

package/dist/chat.d.ts

@@ -230,16 +230,21 @@ interface AgentSessionControlsProps {
      * existing behavior. `"gear"` collapses them behind a single compact gear
      * button whose menu opens up-and-left, for right-anchored copilots where
      * the composer is tight. Nested model/harness/effort menus render adjacent
-     * on the left of the gear menu.
+     * on the left of the gear menu. `"combined"` is the gear layout with a
+     * labeled trigger instead of the anonymous icon: the button summarizes the
+     * current selection as text (`harness · model · effort`) so the choice stays
+     * visible without opening the menu — for a composer that wants one compact
+     * agent control it can read at a glance.
      */
-    layout?: "inline" | "gear";
+    layout?: "inline" | "gear" | "combined";
     /**
-     * Where the inline pickers open. `"auto"` (default) keeps Radix's
-     * collision-aware behavior: the menus open downward but flip up when the
-     * composer is docked at the bottom of the viewport. `"down"` pins them open
-     * downward — for a composer floating in open space (e.g. a centered new-chat
-     * surface) where flipping up would cover the heading. Only affects the
-     * `"inline"` layout; the gear menu is unchanged.
+     * Where the pickers open. `"auto"` (default) keeps Radix's collision-aware
+     * behavior: the menus open downward but flip up when the composer is docked
+     * at the bottom of the viewport. `"down"` pins them open downward — for a
+     * composer floating in open space (e.g. a centered new-chat surface) where
+     * flipping up would cover the heading. Honored by the `"inline"` strip (its
+     * nested pickers) and by the `"combined"` panel (which opens downward instead
+     * of upward); the `"gear"` menu keeps its own placement.
      */
     menuPlacement?: "auto" | "down";
 }

package/dist/chat.js

@@ -17,9 +17,9 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-XL573ZOV.js";
-import "./chunk-HU4B2M4K.js";
-import "./chunk-SF6LPMMN.js";
+} from "./chunk-UQXDIQWD.js";
+import "./chunk-IWIZ7RZE.js";
+import "./chunk-L62ZT6RS.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-U67V476Y.js";
 export {

package/dist/{chunk-HU4B2M4K.js → chunk-IWIZ7RZE.js}

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

package/dist/{chunk-SF6LPMMN.js → chunk-L62ZT6RS.js}

@@ -360,7 +360,7 @@ function ModelPicker({
       children: [
         currentIdentity ? /* @__PURE__ */ jsx2(ModelBrandStack, { identity: currentIdentity, size: "sm" }) : /* @__PURE__ */ jsx2(Sparkles, { className: "h-3 w-3 text-muted-foreground" }),
         /* @__PURE__ */ jsx2("span", { className: "truncate max-w-[160px]", children: currentLabel || placeholder }),
-        /* @__PURE__ */ jsx2(ChevronDown, { className: "h-3 w-3 text-muted-foreground transition-transform data-[state=open]:rotate-180" })
+        /* @__PURE__ */ jsx2(ChevronDown, { className: "ml-auto h-3 w-3 shrink-0 text-muted-foreground transition-transform data-[state=open]:rotate-180" })
       ]
     }
   ) : /* @__PURE__ */ jsxs2(
@@ -793,5 +793,8 @@ export {
   DEFAULT_FEATURED_MODEL_IDS,
   formatPricing,
   formatContext,
-  ModelPicker
+  resolveModelBrandIdentity,
+  stripBrandPrefix,
+  ModelPicker,
+  ModelBrandStack
 };

package/dist/{chunk-XL573ZOV.js → chunk-UQXDIQWD.js}

@@ -2,11 +2,14 @@ import {
   HARNESS_OPTIONS,
   HarnessLogo,
   chatCapableHarnesses
-} from "./chunk-HU4B2M4K.js";
+} from "./chunk-IWIZ7RZE.js";
 import {
+  ModelBrandStack,
   ModelPicker,
-  canonicalModelId
-} from "./chunk-SF6LPMMN.js";
+  canonicalModelId,
+  resolveModelBrandIdentity,
+  stripBrandPrefix
+} from "./chunk-L62ZT6RS.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -110,9 +113,9 @@ function ReasoningLevelPicker({
         ),
         "aria-label": "Reasoning level",
         children: [
-          /* @__PURE__ */ jsx(Brain, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(Brain, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
           /* @__PURE__ */ jsx("span", { children: label }),
-          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
+          /* @__PURE__ */ jsx(ChevronDown, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground" })
         ]
       }
     ) }),
@@ -470,7 +473,7 @@ function ProfileForm({
 }
 
 // src/chat/agent-session-controls.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function selectorIgnoreNote(harness) {
   const ignoresModel = !harnessHonorsModel(harness);
   const ignoresEffort = !harnessHonorsEffort(harness);
@@ -592,7 +595,8 @@ function HarnessDropdown({
   newChatLabel,
   side = "bottom",
   align = "start",
-  avoidCollisions
+  avoidCollisions,
+  triggerClassName
 }) {
   const allowed = new Set(
     available ?? HARNESS_OPTIONS.map((h) => h.type)
@@ -624,13 +628,14 @@ function HarnessDropdown({
           "text-xs font-medium text-foreground shadow-sm transition-colors",
           "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
           "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high",
-          "disabled:cursor-not-allowed disabled:opacity-60"
+          "disabled:cursor-not-allowed disabled:opacity-60",
+          triggerClassName
         ),
         "aria-label": "Agent harness",
         children: [
-          /* @__PURE__ */ jsx3(HarnessLogo, { type: value, size: 16 }),
-          /* @__PURE__ */ jsx3("span", { children: selected?.label ?? value }),
-          !locked && /* @__PURE__ */ jsx3(ChevronDown3, { className: "h-3.5 w-3.5 text-muted-foreground" })
+          /* @__PURE__ */ jsx3(HarnessLogo, { type: value, size: 16, className: "shrink-0" }),
+          /* @__PURE__ */ jsx3("span", { className: "truncate", children: selected?.label ?? value }),
+          !locked && /* @__PURE__ */ jsx3(ChevronDown3, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground" })
         ]
       }
     ) }),
@@ -745,9 +750,11 @@ function AgentSessionControls({
     )
   ) : model?.models;
   const harnessAvailable = harness?.available ?? (context === "chat" ? chatCapableHarnesses : void 0);
-  const menuSide = layout === "gear" ? "left" : "bottom";
-  const menuAlign = layout === "gear" ? "end" : "start";
-  const inlineForceDown = menuPlacement === "down" && layout !== "gear";
+  const collapsed = layout === "gear" || layout === "combined";
+  const menuSide = collapsed ? "left" : "bottom";
+  const menuAlign = collapsed ? "end" : "start";
+  const collapsedTriggerClass = layout === "combined" ? "w-full bg-transparent shadow-none hover:bg-muted/60 data-[state=open]:bg-muted/60" : collapsed ? "w-full" : void 0;
+  const inlineForceDown = menuPlacement === "down" && layout === "inline";
   const avoidCollisions = inlineForceDown ? false : void 0;
   const harnessNode = harness && /* @__PURE__ */ jsx3(
     HarnessDropdown,
@@ -757,7 +764,8 @@ function AgentSessionControls({
       onChange: handleHarnessChange,
       side: menuSide,
       align: menuAlign,
-      avoidCollisions
+      avoidCollisions,
+      triggerClassName: collapsedTriggerClass
     }
   );
   const profileNode = profile && /* @__PURE__ */ jsx3(
@@ -771,7 +779,7 @@ function AgentSessionControls({
       onUpdate: profile.onUpdate,
       onDelete: profile.onDelete,
       disabled: profile.disabled,
-      side: inlineForceDown || layout === "gear" ? "bottom" : "top"
+      side: inlineForceDown || collapsed ? "bottom" : "top"
     }
   );
   const modelNode = model && /* @__PURE__ */ jsx3(
@@ -786,8 +794,9 @@ function AgentSessionControls({
       popular: model.popular,
       recents: model.recents,
       disabled: model.disabled || (visibleModels ?? []).length === 0 || !selectorHonorsModel,
-      side: layout === "gear" ? void 0 : "bottom",
-      avoidCollisions
+      side: collapsed ? void 0 : "bottom",
+      avoidCollisions,
+      triggerClassName: collapsedTriggerClass
     }
   );
   const modelReasoning = modelReasoningCapability(model?.models, model?.value);
@@ -800,8 +809,9 @@ function AgentSessionControls({
       options: reasoningOptions,
       disabled: reasoning.disabled || !selectorHonorsEffort,
       available: harness ? reasoningEffortsFor(harness.value, modelReasoning) : reasoning.available,
-      side: layout === "gear" ? void 0 : "bottom",
-      avoidCollisions
+      side: collapsed ? void 0 : "bottom",
+      avoidCollisions,
+      triggerClassName: collapsedTriggerClass
     }
   );
   if (layout === "gear") {
@@ -817,6 +827,76 @@ function AgentSessionControls({
       }
     );
   }
+  if (layout === "combined") {
+    const segments = [];
+    if (harness) {
+      const harnessLabel = HARNESS_OPTIONS.find((option) => option.type === harness.value)?.label ?? harness.value;
+      segments.push({
+        key: "harness",
+        label: harnessLabel,
+        node: /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx3(HarnessLogo, { type: harness.value, size: 16, className: "shrink-0" }),
+          harnessLabel
+        ] })
+      });
+    }
+    if (model && selectorHonorsModel) {
+      const current = (model.models ?? []).find(
+        (entry) => canonicalModelId(entry) === model.value
+      );
+      const identity = current ? resolveModelBrandIdentity(current) : null;
+      const modelLabel = stripBrandPrefix(
+        current?.name ?? current?.id ?? model.value,
+        identity
+      );
+      segments.push({
+        key: "model",
+        label: modelLabel,
+        node: /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1.5", children: [
+          identity && /* @__PURE__ */ jsx3(ModelBrandStack, { identity, size: "sm" }),
+          modelLabel
+        ] })
+      });
+    }
+    if (reasoning && selectorHonorsEffort) {
+      const effortLabel = (reasoningOptions ?? DEFAULT_REASONING_LEVEL_OPTIONS).find(
+        (option) => option.value === reasoning.value
+      )?.label ?? "Auto";
+      segments.push({
+        key: "effort",
+        label: effortLabel,
+        node: /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx3("span", { className: "flex w-3.5 shrink-0 justify-center", children: /* @__PURE__ */ jsx3(ReasoningGlyph, { level: reasoning.value }) }),
+          effortLabel
+        ] })
+      });
+    }
+    const summary = /* @__PURE__ */ jsx3("span", { className: "flex items-center gap-1.5", children: segments.map((segment, index) => /* @__PURE__ */ jsxs3(React3.Fragment, { children: [
+      index > 0 && /* @__PURE__ */ jsx3(
+        "span",
+        {
+          className: "text-base leading-none text-muted-foreground/60",
+          "aria-hidden": true,
+          children: "\xB7"
+        }
+      ),
+      segment.node
+    ] }, segment.key)) });
+    return /* @__PURE__ */ jsx3(
+      SummaryControls,
+      {
+        className,
+        summary,
+        title: segments.map((segment) => segment.label).join(" \xB7 "),
+        contentSide: menuPlacement === "down" ? "bottom" : "top",
+        profileNode,
+        harnessNode,
+        modelNode,
+        reasoningNode,
+        trailing
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs3(
     "div",
     {
@@ -839,6 +919,91 @@ function GearControls({
   modelNode,
   reasoningNode,
   trailing
+}) {
+  return /* @__PURE__ */ jsx3(
+    CollapsibleControls,
+    {
+      className,
+      trigger: /* @__PURE__ */ jsx3(SlidersHorizontal, { className: "h-4 w-4 text-muted-foreground" }),
+      triggerClassName: cn(
+        "inline-flex h-8 w-8 items-center justify-center rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container",
+        "text-foreground shadow-sm transition-colors",
+        "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high"
+      ),
+      contentSide: "top",
+      contentClassName: cn(
+        "w-56 gap-2 border-[var(--md3-outline-variant)] bg-surface-container-highest p-2",
+        "shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]"
+      ),
+      profileNode,
+      harnessNode,
+      modelNode,
+      reasoningNode,
+      trailing
+    }
+  );
+}
+function GearSection({
+  label,
+  children
+}) {
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx3("span", { className: "px-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground/70", children: label }),
+    children
+  ] });
+}
+function SummaryControls({
+  className,
+  summary,
+  title,
+  contentSide,
+  profileNode,
+  harnessNode,
+  modelNode,
+  reasoningNode,
+  trailing
+}) {
+  return /* @__PURE__ */ jsx3(
+    CollapsibleControls,
+    {
+      className,
+      trigger: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        summary,
+        /* @__PURE__ */ jsx3(ChevronDown3, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" })
+      ] }),
+      triggerTitle: title,
+      triggerClassName: cn(
+        // Container-less trigger (Codex-style): bare label + chevron docked in
+        // the composer footer, no border/card/shadow. Only a subtle rounded
+        // hover/open tint marks it as interactive.
+        "inline-flex h-8 items-center gap-1.5 rounded-md px-1.5",
+        "whitespace-nowrap text-xs font-medium text-foreground transition-colors",
+        "hover:bg-muted/50 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "data-[state=open]:bg-muted/50"
+      ),
+      contentSide,
+      contentClassName: "w-64 gap-2.5 border-border bg-popover p-2.5 text-popover-foreground shadow-lg",
+      profileNode,
+      harnessNode,
+      modelNode,
+      reasoningNode,
+      trailing
+    }
+  );
+}
+function CollapsibleControls({
+  className,
+  trigger,
+  triggerTitle,
+  triggerClassName,
+  contentSide,
+  contentClassName,
+  profileNode,
+  harnessNode,
+  modelNode,
+  reasoningNode,
+  trailing
 }) {
   return /* @__PURE__ */ jsxs3(
     "div",
@@ -853,19 +1018,15 @@ function GearControls({
             {
               type: "button",
               "aria-label": "Session controls",
-              className: cn(
-                "inline-flex h-8 w-8 items-center justify-center rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container",
-                "text-foreground shadow-sm transition-colors",
-                "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-                "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high"
-              ),
-              children: /* @__PURE__ */ jsx3(SlidersHorizontal, { className: "h-4 w-4 text-muted-foreground" })
+              title: triggerTitle,
+              className: triggerClassName,
+              children: trigger
             }
           ) }),
           /* @__PURE__ */ jsx3(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs3(
             DropdownMenu2.Content,
             {
-              side: "top",
+              side: contentSide,
               align: "end",
               sideOffset: 8,
               onInteractOutside: (event) => {
@@ -877,11 +1038,11 @@ function GearControls({
                 }
               },
               className: cn(
-                "z-50 flex w-56 flex-col gap-2 rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest p-2",
-                "shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
+                "z-50 flex flex-col rounded-[var(--radius-md)] border",
                 "data-[state=open]:animate-in data-[state=closed]:animate-out",
                 "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-                "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+                "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+                contentClassName
               ),
               children: [
                 profileNode && /* @__PURE__ */ jsx3(GearSection, { label: "Agent", children: profileNode }),
@@ -896,15 +1057,6 @@ function GearControls({
     }
   );
 }
-function GearSection({
-  label,
-  children
-}) {
-  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsx3("span", { className: "px-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground/70", children: label }),
-    children
-  ] });
-}
 
 // src/chat/agent-composer.tsx
 import {
@@ -917,7 +1069,7 @@ import {
   X
 } from "lucide-react";
 import * as React4 from "react";
-import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function AgentComposer({
   value,
   onChange,
@@ -1103,7 +1255,7 @@ function AgentComposer({
                 reasoning
               }
             ) }),
-            onAttach && /* @__PURE__ */ jsxs4(Fragment, { children: [
+            onAttach && /* @__PURE__ */ jsxs4(Fragment3, { children: [
               /* @__PURE__ */ jsx4(
                 "button",
                 {
@@ -1131,7 +1283,7 @@ function AgentComposer({
                 }
               )
             ] }),
-            onAttachFolder && /* @__PURE__ */ jsxs4(Fragment, { children: [
+            onAttachFolder && /* @__PURE__ */ jsxs4(Fragment3, { children: [
               /* @__PURE__ */ jsx4(
                 "button",
                 {

package/dist/dashboard.js

@@ -71,7 +71,7 @@ import {
   HarnessLogo,
   HarnessPicker,
   chatCapableHarnesses
-} from "./chunk-HU4B2M4K.js";
+} from "./chunk-IWIZ7RZE.js";
 import {
   DEFAULT_FEATURED_MODEL_IDS,
   ModelPicker,
@@ -80,7 +80,7 @@ import {
   formatContext,
   formatPricing,
   modelDedupKey
-} from "./chunk-SF6LPMMN.js";
+} from "./chunk-L62ZT6RS.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-U67V476Y.js";
 export {

package/dist/globals.css

@@ -356,6 +356,9 @@
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
+  .top-3\.5 {
+    top: calc(var(--spacing) * 3.5);
+  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
@@ -539,9 +542,6 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
-  .mt-px {
-    margin-top: 1px;
-  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -808,6 +808,9 @@
   .h-\[var\(--timeline-dot-size\)\] {
     height: var(--timeline-dot-size);
   }
+  .h-\[var\(--timeline-dot-size\,0\.5rem\)\] {
+    height: var(--timeline-dot-size,0.5rem);
+  }
   .h-\[var\(--tool-icon-size\)\] {
     height: var(--tool-icon-size);
   }
@@ -1132,6 +1135,9 @@
   .w-\[var\(--timeline-dot-size\)\] {
     width: var(--timeline-dot-size);
   }
+  .w-\[var\(--timeline-dot-size\,0\.5rem\)\] {
+    width: var(--timeline-dot-size,0.5rem);
+  }
   .w-\[var\(--tool-icon-size\)\] {
     width: var(--tool-icon-size);
   }
@@ -1610,6 +1616,9 @@
   .gap-x-2 {
     column-gap: calc(var(--spacing) * 2);
   }
+  .gap-x-3 {
+    column-gap: calc(var(--spacing) * 3);
+  }
   .gap-x-4 {
     column-gap: calc(var(--spacing) * 4);
   }
@@ -1686,15 +1695,9 @@
   .rounded-\[22px\] {
     border-radius: 22px;
   }
-  .rounded-\[24px\] {
-    border-radius: 24px;
-  }
   .rounded-\[26px\] {
     border-radius: 26px;
   }
-  .rounded-\[28px\] {
-    border-radius: 28px;
-  }
   .rounded-\[calc\(var\(--radius-xl\)\+2px\)\] {
     border-radius: calc(var(--radius-xl) + 2px);
   }
@@ -2111,6 +2114,9 @@
   .bg-\[var\(--border-hover\)\] {
     background-color: var(--border-hover);
   }
+  .bg-\[var\(--border-subtle\)\] {
+    background-color: var(--border-subtle);
+  }
   .bg-\[var\(--brand-cool\)\] {
     background-color: var(--brand-cool);
   }
@@ -2606,9 +2612,6 @@
   .p-16 {
     padding: calc(var(--spacing) * 16);
   }
-  .px-0 {
-    padding-inline: calc(var(--spacing) * 0);
-  }
   .px-0\.5 {
     padding-inline: calc(var(--spacing) * 0.5);
   }
@@ -2654,9 +2657,6 @@
   .px-\[var\(--tool-card-px\)\] {
     padding-inline: var(--tool-card-px);
   }
-  .py-0 {
-    padding-block: calc(var(--spacing) * 0);
-  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -2798,6 +2798,9 @@
   .pl-3\.5 {
     padding-left: calc(var(--spacing) * 3.5);
   }
+  .pl-6 {
+    padding-left: calc(var(--spacing) * 6);
+  }
   .pl-7 {
     padding-left: calc(var(--spacing) * 7);
   }
@@ -4002,6 +4005,16 @@
       }
     }
   }
+  .hover\:bg-\[var\(--surface-container-high\)\]\/40 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--surface-container-high);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--surface-container-high) 40%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-\[var\(--surface-danger-bg\)\] {
     &:hover {
       @media (hover: hover) {
@@ -4184,6 +4197,16 @@
       }
     }
   }
+  .hover\:bg-muted\/60 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-muted) 60%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-muted\/80 {
     &:hover {
       @media (hover: hover) {
@@ -4272,13 +4295,6 @@
       }
     }
   }
-  .hover\:bg-transparent {
-    &:hover {
-      @media (hover: hover) {
-        background-color: transparent;
-      }
-    }
-  }
   .hover\:bg-white\/5 {
     &:hover {
       @media (hover: hover) {
@@ -4881,6 +4897,14 @@
       }
     }
   }
+  .data-\[state\=open\]\:bg-muted\/60 {
+    &[data-state="open"] {
+      background-color: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-muted) 60%, transparent);
+      }
+    }
+  }
   .data-\[state\=open\]\:bg-surface-container-high {
     &[data-state="open"] {
       background-color: var(--color-surface-container-high);

package/dist/index.js

@@ -102,7 +102,7 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-XL573ZOV.js";
+} from "./chunk-UQXDIQWD.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
@@ -318,7 +318,7 @@ import {
   HarnessLogo,
   HarnessPicker,
   chatCapableHarnesses
-} from "./chunk-HU4B2M4K.js";
+} from "./chunk-IWIZ7RZE.js";
 import {
   DEFAULT_FEATURED_MODEL_IDS,
   ModelPicker,
@@ -327,7 +327,7 @@ import {
   formatContext,
   formatPricing,
   modelDedupKey
-} from "./chunk-SF6LPMMN.js";
+} from "./chunk-L62ZT6RS.js";
 import "./chunk-EI44GEQ5.js";
 import {
   OpenUIArtifactRenderer

package/dist/pages.js

@@ -24,7 +24,7 @@ import {
   Switch,
   Textarea
 } from "./chunk-4ZZUMXPX.js";
-import "./chunk-SF6LPMMN.js";
+import "./chunk-L62ZT6RS.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";

package/dist/styles.css

@@ -356,6 +356,9 @@
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
+  .top-3\.5 {
+    top: calc(var(--spacing) * 3.5);
+  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
@@ -539,9 +542,6 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
-  .mt-px {
-    margin-top: 1px;
-  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -808,6 +808,9 @@
   .h-\[var\(--timeline-dot-size\)\] {
     height: var(--timeline-dot-size);
   }
+  .h-\[var\(--timeline-dot-size\,0\.5rem\)\] {
+    height: var(--timeline-dot-size,0.5rem);
+  }
   .h-\[var\(--tool-icon-size\)\] {
     height: var(--tool-icon-size);
   }
@@ -1132,6 +1135,9 @@
   .w-\[var\(--timeline-dot-size\)\] {
     width: var(--timeline-dot-size);
   }
+  .w-\[var\(--timeline-dot-size\,0\.5rem\)\] {
+    width: var(--timeline-dot-size,0.5rem);
+  }
   .w-\[var\(--tool-icon-size\)\] {
     width: var(--tool-icon-size);
   }
@@ -1610,6 +1616,9 @@
   .gap-x-2 {
     column-gap: calc(var(--spacing) * 2);
   }
+  .gap-x-3 {
+    column-gap: calc(var(--spacing) * 3);
+  }
   .gap-x-4 {
     column-gap: calc(var(--spacing) * 4);
   }
@@ -1686,15 +1695,9 @@
   .rounded-\[22px\] {
     border-radius: 22px;
   }
-  .rounded-\[24px\] {
-    border-radius: 24px;
-  }
   .rounded-\[26px\] {
     border-radius: 26px;
   }
-  .rounded-\[28px\] {
-    border-radius: 28px;
-  }
   .rounded-\[calc\(var\(--radius-xl\)\+2px\)\] {
     border-radius: calc(var(--radius-xl) + 2px);
   }
@@ -2111,6 +2114,9 @@
   .bg-\[var\(--border-hover\)\] {
     background-color: var(--border-hover);
   }
+  .bg-\[var\(--border-subtle\)\] {
+    background-color: var(--border-subtle);
+  }
   .bg-\[var\(--brand-cool\)\] {
     background-color: var(--brand-cool);
   }
@@ -2606,9 +2612,6 @@
   .p-16 {
     padding: calc(var(--spacing) * 16);
   }
-  .px-0 {
-    padding-inline: calc(var(--spacing) * 0);
-  }
   .px-0\.5 {
     padding-inline: calc(var(--spacing) * 0.5);
   }
@@ -2654,9 +2657,6 @@
   .px-\[var\(--tool-card-px\)\] {
     padding-inline: var(--tool-card-px);
   }
-  .py-0 {
-    padding-block: calc(var(--spacing) * 0);
-  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -2798,6 +2798,9 @@
   .pl-3\.5 {
     padding-left: calc(var(--spacing) * 3.5);
   }
+  .pl-6 {
+    padding-left: calc(var(--spacing) * 6);
+  }
   .pl-7 {
     padding-left: calc(var(--spacing) * 7);
   }
@@ -4002,6 +4005,16 @@
       }
     }
   }
+  .hover\:bg-\[var\(--surface-container-high\)\]\/40 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--surface-container-high);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--surface-container-high) 40%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-\[var\(--surface-danger-bg\)\] {
     &:hover {
       @media (hover: hover) {
@@ -4184,6 +4197,16 @@
       }
     }
   }
+  .hover\:bg-muted\/60 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-muted) 60%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-muted\/80 {
     &:hover {
       @media (hover: hover) {
@@ -4272,13 +4295,6 @@
       }
     }
   }
-  .hover\:bg-transparent {
-    &:hover {
-      @media (hover: hover) {
-        background-color: transparent;
-      }
-    }
-  }
   .hover\:bg-white\/5 {
     &:hover {
       @media (hover: hover) {
@@ -4881,6 +4897,14 @@
       }
     }
   }
+  .data-\[state\=open\]\:bg-muted\/60 {
+    &[data-state="open"] {
+      background-color: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-muted) 60%, transparent);
+      }
+    }
+  }
   .data-\[state\=open\]\:bg-surface-container-high {
     &[data-state="open"] {
       background-color: var(--color-surface-container-high);

package/dist/workbench.js

@@ -19,8 +19,8 @@ import "./chunk-VIREDUBF.js";
 import "./chunk-77WVVJA4.js";
 import "./chunk-OMUIPJQZ.js";
 import "./chunk-4ZZUMXPX.js";
-import "./chunk-HU4B2M4K.js";
-import "./chunk-SF6LPMMN.js";
+import "./chunk-IWIZ7RZE.js";
+import "./chunk-L62ZT6RS.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-U67V476Y.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.69.0",
+  "version": "0.71.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -124,7 +124,7 @@
   "peerDependencies": {
     "@tangle-network/agent-interface": ">=0.17.0 <1.0.0",
     "@tangle-network/brand": "^0.8.0",
-    "@tangle-network/ui": "^8.1.0",
+    "@tangle-network/ui": "^9.0.0",
     "@xyflow/react": "^12.0.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
@@ -179,7 +179,7 @@
     "@tailwindcss/vite": "^4.2.2",
     "@tangle-network/agent-interface": ">=0.17.0 <1.0.0",
     "@tangle-network/brand": "^0.8.0",
-    "@tangle-network/ui": "^8.1.0",
+    "@tangle-network/ui": "^9.0.0",
     "@tanstack/react-query": "^5.91.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",