@tangle-network/sandbox-ui 0.70.0 → 0.72.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

@@ -1171,9 +1171,6 @@
   .max-w-\[14rem\] {
     max-width: 14rem;
   }
-  .max-w-\[72\%\] {
-    max-width: 72%;
-  }
   .max-w-\[75\%\] {
     max-width: 75%;
   }
@@ -1686,15 +1683,9 @@
   .rounded-\[4px\] {
     border-radius: 4px;
   }
-  .rounded-\[18px\] {
-    border-radius: 18px;
-  }
   .rounded-\[20px\] {
     border-radius: 20px;
   }
-  .rounded-\[22px\] {
-    border-radius: 22px;
-  }
   .rounded-\[26px\] {
     border-radius: 26px;
   }
@@ -1754,9 +1745,6 @@
     border-bottom-right-radius: var(--radius-sm);
     border-bottom-left-radius: var(--radius-sm);
   }
-  .rounded-br-\[12px\] {
-    border-bottom-right-radius: 12px;
-  }
   .rounded-bl-lg {
     border-bottom-left-radius: var(--radius-lg);
   }
@@ -2099,9 +2087,6 @@
   .bg-\[var\(--accent-surface-strong\)\] {
     background-color: var(--accent-surface-strong);
   }
-  .bg-\[var\(--bg-card\)\] {
-    background-color: var(--bg-card);
-  }
   .bg-\[var\(--bg-root\)\] {
     background-color: var(--bg-root);
   }
@@ -2129,9 +2114,6 @@
   .bg-\[var\(--brand-glow\)\] {
     background-color: var(--brand-glow);
   }
-  .bg-\[var\(--brand-primary\)\] {
-    background-color: var(--brand-primary);
-  }
   .bg-\[var\(--brand-primary\,hsl\(var\(--primary\)\)\)\] {
     background-color: var(--brand-primary,hsl(var(--primary)));
   }
@@ -2171,6 +2153,12 @@
   .bg-\[var\(--md3-outline-variant\)\] {
     background-color: var(--md3-outline-variant);
   }
+  .bg-\[var\(--md3-surface-container\)\] {
+    background-color: var(--md3-surface-container);
+  }
+  .bg-\[var\(--md3-surface-container-high\)\] {
+    background-color: var(--md3-surface-container-high);
+  }
   .bg-\[var\(--status-error\,\#ff4d6d\)\]\/15 {
     background-color: var(--status-error,#ff4d6d);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2219,12 +2207,6 @@
   .bg-accent {
     background-color: var(--color-accent);
   }
-  .bg-accent\/20 {
-    background-color: color-mix(in srgb, hsl(var(--accent)) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
-    }
-  }
   .bg-amber-500\/10 {
     background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2282,12 +2264,6 @@
   .bg-card {
     background-color: var(--color-card);
   }
-  .bg-card\/40 {
-    background-color: color-mix(in srgb, hsl(var(--card)) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-card) 40%, transparent);
-    }
-  }
   .bg-card\/50 {
     background-color: color-mix(in srgb, hsl(var(--card)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2932,10 +2908,6 @@
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
   }
-  .leading-6\.5 {
-    --tw-leading: calc(var(--spacing) * 6.5);
-    line-height: calc(var(--spacing) * 6.5);
-  }
   .leading-7 {
     --tw-leading: calc(var(--spacing) * 7);
     line-height: calc(var(--spacing) * 7);
@@ -3191,9 +3163,6 @@
   .text-\[var\(--surface-warning-text\)\] {
     color: var(--surface-warning-text);
   }
-  .text-\[var\(--text-dim\)\] {
-    color: var(--text-dim);
-  }
   .text-\[var\(--text-muted\)\] {
     color: var(--text-muted);
   }
@@ -3323,12 +3292,6 @@
   .text-white {
     color: var(--color-white);
   }
-  .text-white\/60 {
-    color: color-mix(in srgb, #fff 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-white) 60%, transparent);
-    }
-  }
   .text-yellow-400 {
     color: var(--color-yellow-400);
   }
@@ -3415,10 +3378,6 @@
     --tw-shadow: 0 6px 16px var(--tw-shadow-color, rgba(15,23,42,0.08));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[0_8px_20px_rgba\(15\,23\,42\,0\.12\)\] {
-    --tw-shadow: 0 8px 20px var(--tw-shadow-color, rgba(15,23,42,0.12));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-\[0_8px_30px_rgba\(0\,0\,0\,0\.45\)\] {
     --tw-shadow: 0 8px 30px var(--tw-shadow-color, rgba(0,0,0,0.45));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3443,6 +3402,10 @@
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --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);
@@ -3789,6 +3752,11 @@
       background-color: var(--color-primary);
     }
   }
+  .first\:mt-0 {
+    &:first-child {
+      margin-top: calc(var(--spacing) * 0);
+    }
+  }
   .last\:border-0 {
     &:last-child {
       border-style: var(--tw-border-style);
@@ -3991,6 +3959,13 @@
       }
     }
   }
+  .hover\:bg-\[var\(--md3-surface-container-high\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--md3-surface-container-high);
+      }
+    }
+  }
   .hover\:bg-\[var\(--status-error\,\#ff4d6d\)\]\/25 {
     &:hover {
       @media (hover: hover) {
@@ -4039,16 +4014,6 @@
       }
     }
   }
-  .hover\:bg-accent\/25 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, hsl(var(--accent)) 25%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 25%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-accent\/30 {
     &:hover {
       @media (hover: hover) {
@@ -4193,6 +4158,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) {
@@ -4883,6 +4858,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);
@@ -5340,7 +5323,7 @@
   --hsl-card-foreground: 240 6% 93%;
   --hsl-popover: 240 5% 17%;
   --hsl-popover-foreground: 240 6% 93%;
-  --hsl-primary: 239 84% 67%;
+  --hsl-primary: 239 84% 62%;
   --hsl-primary-foreground: 0 0% 100%;
   --hsl-secondary: 240 5% 15%;
   --hsl-secondary-foreground: 240 6% 93%;
@@ -5348,7 +5331,7 @@
   --hsl-muted-foreground: 240 4% 64%;
   --hsl-accent: 240 5% 15%;
   --hsl-accent-foreground: 240 6% 93%;
-  --hsl-destructive: 348 90% 60%;
+  --hsl-destructive: 348 74% 48%;
   --hsl-destructive-foreground: 0 0% 100%;
   --hsl-border: 240 5% 16%;
   --hsl-input: 240 5% 15%;
@@ -5373,7 +5356,7 @@
   --destructive: var(--hsl-destructive);
   --destructive-foreground: var(--hsl-destructive-foreground);
   --border: var(--hsl-border);
-  --input: var(--hsl-input);
+  --input: var(--hsl-muted-foreground);
   --ring: var(--hsl-ring);
   --success: var(--hsl-success);
   --warning: var(--hsl-warning);
@@ -5463,10 +5446,10 @@
   --border-hover: rgba(255, 255, 255, 0.12);
   --border-accent: rgba(129, 140, 248, 0.20);
   --border-accent-hover: rgba(129, 140, 248, 0.35);
-  --btn-primary-bg: #6366F1;
-  --btn-primary-hover: #818CF8;
+  --btn-primary-bg: #5B4ED4;
+  --btn-primary-hover: #4F46E5;
   --btn-primary-text: #ffffff;
-  --btn-cta-bg: #818CF8;
+  --btn-cta-bg: #4F46E5;
   --btn-cta-text: #FFFFFF;
   --code-keyword: #A5AAFC;
   --code-string: #34D399;
@@ -5525,7 +5508,7 @@
   --tool-card-px: 0.75rem;
   --tool-card-py: 0.5rem;
   --tool-icon-size: 1.75rem;
-  --syntax-comment: #6B7094;
+  --syntax-comment: #8b8fbc;
   --syntax-keyword: #A78FFF;
   --syntax-string: #10b981;
   --syntax-function: #6D9FFF;

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

@@ -1171,9 +1171,6 @@
   .max-w-\[14rem\] {
     max-width: 14rem;
   }
-  .max-w-\[72\%\] {
-    max-width: 72%;
-  }
   .max-w-\[75\%\] {
     max-width: 75%;
   }
@@ -1686,15 +1683,9 @@
   .rounded-\[4px\] {
     border-radius: 4px;
   }
-  .rounded-\[18px\] {
-    border-radius: 18px;
-  }
   .rounded-\[20px\] {
     border-radius: 20px;
   }
-  .rounded-\[22px\] {
-    border-radius: 22px;
-  }
   .rounded-\[26px\] {
     border-radius: 26px;
   }
@@ -1754,9 +1745,6 @@
     border-bottom-right-radius: var(--radius-sm);
     border-bottom-left-radius: var(--radius-sm);
   }
-  .rounded-br-\[12px\] {
-    border-bottom-right-radius: 12px;
-  }
   .rounded-bl-lg {
     border-bottom-left-radius: var(--radius-lg);
   }
@@ -2099,9 +2087,6 @@
   .bg-\[var\(--accent-surface-strong\)\] {
     background-color: var(--accent-surface-strong);
   }
-  .bg-\[var\(--bg-card\)\] {
-    background-color: var(--bg-card);
-  }
   .bg-\[var\(--bg-root\)\] {
     background-color: var(--bg-root);
   }
@@ -2129,9 +2114,6 @@
   .bg-\[var\(--brand-glow\)\] {
     background-color: var(--brand-glow);
   }
-  .bg-\[var\(--brand-primary\)\] {
-    background-color: var(--brand-primary);
-  }
   .bg-\[var\(--brand-primary\,hsl\(var\(--primary\)\)\)\] {
     background-color: var(--brand-primary,hsl(var(--primary)));
   }
@@ -2171,6 +2153,12 @@
   .bg-\[var\(--md3-outline-variant\)\] {
     background-color: var(--md3-outline-variant);
   }
+  .bg-\[var\(--md3-surface-container\)\] {
+    background-color: var(--md3-surface-container);
+  }
+  .bg-\[var\(--md3-surface-container-high\)\] {
+    background-color: var(--md3-surface-container-high);
+  }
   .bg-\[var\(--status-error\,\#ff4d6d\)\]\/15 {
     background-color: var(--status-error,#ff4d6d);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2219,12 +2207,6 @@
   .bg-accent {
     background-color: var(--color-accent);
   }
-  .bg-accent\/20 {
-    background-color: color-mix(in srgb, hsl(var(--accent)) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
-    }
-  }
   .bg-amber-500\/10 {
     background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2282,12 +2264,6 @@
   .bg-card {
     background-color: var(--color-card);
   }
-  .bg-card\/40 {
-    background-color: color-mix(in srgb, hsl(var(--card)) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-card) 40%, transparent);
-    }
-  }
   .bg-card\/50 {
     background-color: color-mix(in srgb, hsl(var(--card)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2932,10 +2908,6 @@
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
   }
-  .leading-6\.5 {
-    --tw-leading: calc(var(--spacing) * 6.5);
-    line-height: calc(var(--spacing) * 6.5);
-  }
   .leading-7 {
     --tw-leading: calc(var(--spacing) * 7);
     line-height: calc(var(--spacing) * 7);
@@ -3191,9 +3163,6 @@
   .text-\[var\(--surface-warning-text\)\] {
     color: var(--surface-warning-text);
   }
-  .text-\[var\(--text-dim\)\] {
-    color: var(--text-dim);
-  }
   .text-\[var\(--text-muted\)\] {
     color: var(--text-muted);
   }
@@ -3323,12 +3292,6 @@
   .text-white {
     color: var(--color-white);
   }
-  .text-white\/60 {
-    color: color-mix(in srgb, #fff 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-white) 60%, transparent);
-    }
-  }
   .text-yellow-400 {
     color: var(--color-yellow-400);
   }
@@ -3415,10 +3378,6 @@
     --tw-shadow: 0 6px 16px var(--tw-shadow-color, rgba(15,23,42,0.08));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[0_8px_20px_rgba\(15\,23\,42\,0\.12\)\] {
-    --tw-shadow: 0 8px 20px var(--tw-shadow-color, rgba(15,23,42,0.12));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-\[0_8px_30px_rgba\(0\,0\,0\,0\.45\)\] {
     --tw-shadow: 0 8px 30px var(--tw-shadow-color, rgba(0,0,0,0.45));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3443,6 +3402,10 @@
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --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);
@@ -3789,6 +3752,11 @@
       background-color: var(--color-primary);
     }
   }
+  .first\:mt-0 {
+    &:first-child {
+      margin-top: calc(var(--spacing) * 0);
+    }
+  }
   .last\:border-0 {
     &:last-child {
       border-style: var(--tw-border-style);
@@ -3991,6 +3959,13 @@
       }
     }
   }
+  .hover\:bg-\[var\(--md3-surface-container-high\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--md3-surface-container-high);
+      }
+    }
+  }
   .hover\:bg-\[var\(--status-error\,\#ff4d6d\)\]\/25 {
     &:hover {
       @media (hover: hover) {
@@ -4039,16 +4014,6 @@
       }
     }
   }
-  .hover\:bg-accent\/25 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, hsl(var(--accent)) 25%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 25%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-accent\/30 {
     &:hover {
       @media (hover: hover) {
@@ -4193,6 +4158,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) {
@@ -4883,6 +4858,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);
@@ -5340,7 +5323,7 @@
   --hsl-card-foreground: 240 6% 93%;
   --hsl-popover: 240 5% 17%;
   --hsl-popover-foreground: 240 6% 93%;
-  --hsl-primary: 239 84% 67%;
+  --hsl-primary: 239 84% 62%;
   --hsl-primary-foreground: 0 0% 100%;
   --hsl-secondary: 240 5% 15%;
   --hsl-secondary-foreground: 240 6% 93%;
@@ -5348,7 +5331,7 @@
   --hsl-muted-foreground: 240 4% 64%;
   --hsl-accent: 240 5% 15%;
   --hsl-accent-foreground: 240 6% 93%;
-  --hsl-destructive: 348 90% 60%;
+  --hsl-destructive: 348 74% 48%;
   --hsl-destructive-foreground: 0 0% 100%;
   --hsl-border: 240 5% 16%;
   --hsl-input: 240 5% 15%;
@@ -5373,7 +5356,7 @@
   --destructive: var(--hsl-destructive);
   --destructive-foreground: var(--hsl-destructive-foreground);
   --border: var(--hsl-border);
-  --input: var(--hsl-input);
+  --input: var(--hsl-muted-foreground);
   --ring: var(--hsl-ring);
   --success: var(--hsl-success);
   --warning: var(--hsl-warning);
@@ -5463,10 +5446,10 @@
   --border-hover: rgba(255, 255, 255, 0.12);
   --border-accent: rgba(129, 140, 248, 0.20);
   --border-accent-hover: rgba(129, 140, 248, 0.35);
-  --btn-primary-bg: #6366F1;
-  --btn-primary-hover: #818CF8;
+  --btn-primary-bg: #5B4ED4;
+  --btn-primary-hover: #4F46E5;
   --btn-primary-text: #ffffff;
-  --btn-cta-bg: #818CF8;
+  --btn-cta-bg: #4F46E5;
   --btn-cta-text: #FFFFFF;
   --code-keyword: #A5AAFC;
   --code-string: #34D399;
@@ -5525,7 +5508,7 @@
   --tool-card-px: 0.75rem;
   --tool-card-py: 0.5rem;
   --tool-icon-size: 1.75rem;
-  --syntax-comment: #6B7094;
+  --syntax-comment: #8b8fbc;
   --syntax-keyword: #A78FFF;
   --syntax-string: #10b981;
   --syntax-function: #6D9FFF;

package/dist/tokens.css

@@ -57,7 +57,7 @@
   --hsl-card-foreground: 240 6% 93%;
   --hsl-popover: 240 5% 17%;       /* #28282d elevated */
   --hsl-popover-foreground: 240 6% 93%;
-  --hsl-primary: 239 84% 67%;
+  --hsl-primary: 239 84% 62%;
   --hsl-primary-foreground: 0 0% 100%;
   --hsl-secondary: 240 5% 15%;     /* #242428 surface-2 */
   --hsl-secondary-foreground: 240 6% 93%;
@@ -65,7 +65,7 @@
   --hsl-muted-foreground: 240 4% 64%;  /* #9c9ca6 text-muted */
   --hsl-accent: 240 5% 15%;        /* neutral hover (indigo lives in accent-surface-strong) */
   --hsl-accent-foreground: 240 6% 93%;
-  --hsl-destructive: 348 90% 60%;
+  --hsl-destructive: 348 74% 48%;
   --hsl-destructive-foreground: 0 0% 100%;
   --hsl-border: 240 5% 16%;        /* soft edge — fill carries separation, not the line */
   --hsl-input: 240 5% 15%;
@@ -92,7 +92,7 @@
   --destructive: var(--hsl-destructive);
   --destructive-foreground: var(--hsl-destructive-foreground);
   --border: var(--hsl-border);
-  --input: var(--hsl-input);
+  --input: var(--hsl-muted-foreground);
   --ring: var(--hsl-ring);
   --success: var(--hsl-success);
   --warning: var(--hsl-warning);
@@ -207,10 +207,10 @@
   --border-accent-hover: rgba(129, 140, 248, 0.35);
 
   /* Buttons */
-  --btn-primary-bg: #6366F1;
-  --btn-primary-hover: #818CF8;
+  --btn-primary-bg: #5B4ED4;
+  --btn-primary-hover: #4F46E5;
   --btn-primary-text: #ffffff;
-  --btn-cta-bg: #818CF8;
+  --btn-cta-bg: #4F46E5;
   --btn-cta-text: #FFFFFF;
 
   /* Code / runtime syntax */
@@ -288,7 +288,7 @@
   --tool-icon-size: 1.75rem;
 
   /* Syntax highlighting — override per-theme in vault section */
-  --syntax-comment: #6B7094;
+  --syntax-comment: #8b8fbc;
   --syntax-keyword: #A78FFF;
   --syntax-string: #10b981;
   --syntax-function: #6D9FFF;

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.70.0",
+  "version": "0.72.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -123,8 +123,8 @@
   },
   "peerDependencies": {
     "@tangle-network/agent-interface": ">=0.17.0 <1.0.0",
-    "@tangle-network/brand": "^0.8.0",
-    "@tangle-network/ui": "^9.0.0",
+    "@tangle-network/brand": "^1.0.0",
+    "@tangle-network/ui": "^11.0.0",
     "@xyflow/react": "^12.0.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
@@ -178,8 +178,8 @@
     "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/vite": "^4.2.2",
     "@tangle-network/agent-interface": ">=0.17.0 <1.0.0",
-    "@tangle-network/brand": "^0.8.0",
-    "@tangle-network/ui": "^9.0.0",
+    "@tangle-network/brand": "^1.0.0",
+    "@tangle-network/ui": "^11.0.0",
     "@tanstack/react-query": "^5.91.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",