@tangle-network/sandbox-ui 0.45.0 → 0.46.0

package/dist/{chunk-KIRJZUX2.js → chunk-BR2LMUAE.js}

@@ -1,6 +1,6 @@
 import {
   moonshot_default
-} from "./chunk-3RNYDTQ3.js";
+} from "./chunk-LQHTCM56.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -8,52 +8,79 @@ import {
 // src/dashboard/backend-selector.tsx
 import { ChevronDown } from "lucide-react";
 import * as Select from "@radix-ui/react-select";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function BackendSelector({
   backends,
   selected,
   onChange,
+  variant = "pill",
   label = "Model",
   placeholder = "Select a model",
-  className
+  className,
+  triggerClassName
 }) {
   const current = backends.find((b) => b.type === selected);
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1.5", className), children: [
-    label && /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-muted-foreground uppercase tracking-[0.06em]", children: label }),
-    /* @__PURE__ */ jsxs(Select.Root, { value: selected, onValueChange: onChange, children: [
-      /* @__PURE__ */ jsxs(
-        Select.Trigger,
-        {
-          className: cn(
-            "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"
-          ),
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: current ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              current.icon,
-              /* @__PURE__ */ jsxs("span", { className: "min-w-0 truncate", children: [
-                /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: current.label }),
-                current.description && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: current.description })
-              ] })
-            ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) }),
-            /* @__PURE__ */ jsx(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-[var(--transition-fast)] data-[state=open]:rotate-180" }) })
-          ]
-        }
+  const triggerText = current?.label ?? placeholder;
+  const ariaLabel = label ? `${label}: ${triggerText}` : triggerText;
+  const trigger = variant === "pill" ? /* @__PURE__ */ jsxs(
+    Select.Trigger,
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container",
+        "px-2.5 text-xs font-medium text-foreground shadow-sm",
+        "transition-colors duration-[var(--transition-fast)]",
+        "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)] data-[state=open]:bg-surface-container-high",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        triggerClassName
       ),
+      children: [
+        current?.icon,
+        /* @__PURE__ */ jsx("span", { className: cn("truncate max-w-[140px]", current ? void 0 : "text-muted-foreground"), children: triggerText }),
+        current?.description && /* @__PURE__ */ jsx("span", { className: "sr-only", children: current.description }),
+        /* @__PURE__ */ jsx(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground transition-transform duration-[var(--transition-fast)] data-[state=open]:rotate-180" }) })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(
+    Select.Trigger,
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "flex w-full items-center justify-between gap-2 rounded-[var(--radius-md)]",
+        "border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2.5 text-sm text-left",
+        "transition-colors duration-[var(--transition-fast)]",
+        "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)] data-[state=open]:bg-surface-container-high",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        triggerClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+          current?.icon,
+          /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate", current ? "font-medium text-foreground" : "text-muted-foreground"), children: triggerText }),
+          current?.description && /* @__PURE__ */ jsx("span", { className: "sr-only", children: current.description })
+        ] }),
+        /* @__PURE__ */ jsx(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-[var(--transition-fast)] data-[state=open]:rotate-180" }) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn(variant === "field" ? "space-y-1.5" : "inline-flex", className), children: [
+    variant === "field" && label && /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-muted-foreground uppercase tracking-[0.06em]", children: label }),
+    /* @__PURE__ */ jsxs(Select.Root, { value: selected, onValueChange: onChange, children: [
+      trigger,
       /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(
         Select.Content,
         {
           position: "popper",
           sideOffset: 4,
           className: cn(
-            "z-50 w-[var(--radix-select-trigger-width)] overflow-hidden",
-            "rounded-[var(--radius-md)] border border-border",
-            "bg-card shadow-[var(--shadow-dropdown)]",
+            "z-50 overflow-hidden",
+            variant === "pill" ? "min-w-[240px] max-w-[320px]" : "w-[var(--radix-select-trigger-width)]",
+            "rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)]",
+            "bg-surface-container-highest shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
             "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",
@@ -65,7 +92,7 @@ function BackendSelector({
               value: backend.type,
               className: cn(
                 "relative flex cursor-pointer select-none items-start gap-2.5 rounded-[var(--radius-sm)]",
-                "px-3 py-2.5 text-sm outline-none",
+                "px-3 py-2 text-sm outline-none",
                 "transition-colors duration-[var(--transition-fast)]",
                 "hover:bg-accent/50 focus:bg-accent/50",
                 "data-[state=checked]:bg-[var(--accent-surface-soft)] data-[state=checked]:text-[var(--brand-primary)]"
@@ -240,7 +267,7 @@ function HarnessPicker({
       type: h.type,
       label: override?.label ?? h.label,
       description: override?.description ?? h.description,
-      icon: /* @__PURE__ */ jsx3(HarnessLogo, { type: h.type, size: 20 })
+      icon: /* @__PURE__ */ jsx3(HarnessLogo, { type: h.type, size: 16 })
     };
   });
   return /* @__PURE__ */ jsx3(

package/dist/{chunk-H7GMPMPB.js → chunk-CXV6X33U.js}

@@ -97,13 +97,31 @@ var PROVIDER_LOGO_SLUGS = {
   buffer: "buffer",
   hootsuite: "hootsuite"
 };
+var PROVIDER_VECTOR_LOGOS = {
+  slack: "slack",
+  salesforce: "salesforce",
+  microsoftoutlook: "microsoft-outlook",
+  outlook: "microsoft-outlook",
+  microsoftteams: "microsoft-teams",
+  teams: "microsoft-teams",
+  microsoftexcel: "microsoft-excel",
+  excel: "microsoft-excel",
+  microsoftonedrive: "microsoft-onedrive",
+  onedrive: "microsoft-onedrive",
+  microsoftsharepoint: "microsoft-sharepoint",
+  sharepoint: "microsoft-sharepoint",
+  twilio: "twilio",
+  linkedin: "linkedin"
+};
 function providerLogoCandidates(opts) {
   const out = [];
   if (opts.iconUrl) out.push(opts.iconUrl);
   const raw = opts.id.toLowerCase();
   const norm = normalizeProviderId(raw);
-  const slugs = /* @__PURE__ */ new Set();
   const curated = PROVIDER_LOGO_SLUGS[raw] ?? PROVIDER_LOGO_SLUGS[norm];
+  const vectorName = PROVIDER_VECTOR_LOGOS[raw] ?? PROVIDER_VECTOR_LOGOS[norm] ?? (curated ? PROVIDER_VECTOR_LOGOS[curated] : void 0);
+  if (vectorName) out.push(`https://svgl.app/library/${vectorName}.svg`);
+  const slugs = /* @__PURE__ */ new Set();
   if (curated) slugs.add(curated);
   slugs.add(norm.replace(/-/g, ""));
   slugs.add(raw.replace(/[-_\s]/g, ""));

package/dist/{chunk-CUUUFJF5.js → chunk-KOUYJ6QP.js}

@@ -2,11 +2,11 @@ import {
   HARNESS_OPTIONS,
   HarnessLogo,
   chatCapableHarnesses
-} from "./chunk-KIRJZUX2.js";
+} from "./chunk-BR2LMUAE.js";
 import {
   ModelPicker,
   canonicalModelId
-} from "./chunk-3RNYDTQ3.js";
+} from "./chunk-LQHTCM56.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -84,10 +84,10 @@ function ReasoningLevelPicker({
         type: "button",
         disabled,
         className: cn(
-          "inline-flex h-8 items-center gap-1.5 rounded-lg border border-border bg-card px-2.5",
+          "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5",
           "text-xs font-medium text-foreground shadow-sm transition-colors",
-          "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",
+          "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-50",
           className,
           triggerClassName
@@ -106,8 +106,8 @@ function ReasoningLevelPicker({
         align: "start",
         sideOffset: 6,
         className: cn(
-          "z-50 w-64 overflow-hidden rounded-[var(--radius-md)] border border-border bg-card p-1",
-          "shadow-[var(--shadow-dropdown)]",
+          "z-50 w-64 overflow-hidden rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest p-1",
+          "shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
           "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"
@@ -234,10 +234,10 @@ function HarnessDropdown({
         disabled: disabled || locked,
         title: locked ? lockReason : void 0,
         className: cn(
-          "inline-flex h-8 items-center gap-1.5 rounded-lg border border-border bg-card px-2.5",
+          "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5",
           "text-xs font-medium text-foreground shadow-sm transition-colors",
-          "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",
+          "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"
         ),
         "aria-label": "Agent harness",
@@ -255,8 +255,8 @@ function HarnessDropdown({
         align,
         sideOffset: 6,
         className: cn(
-          "z-50 w-72 overflow-hidden rounded-[var(--radius-md)] border border-border bg-card p-1",
-          "shadow-[var(--shadow-dropdown)]",
+          "z-50 w-72 overflow-hidden rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest p-1",
+          "shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
           "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"
@@ -408,10 +408,10 @@ function GearControls({
               type: "button",
               "aria-label": "Session controls",
               className: cn(
-                "inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-card",
+                "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-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"
+                "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__ */ jsx2(SlidersHorizontal, { className: "h-4 w-4 text-muted-foreground" })
             }
@@ -431,8 +431,8 @@ function GearControls({
                 }
               },
               className: cn(
-                "z-50 flex w-56 flex-col gap-2 rounded-[var(--radius-md)] border border-border bg-card p-2",
-                "shadow-[var(--shadow-dropdown)]",
+                "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]",
                 "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"
@@ -633,12 +633,12 @@ 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-[var(--shadow-dropdown)]",
+        "flex h-full w-[420px] min-w-[360px] max-w-[480px] flex-col border-l border-[var(--md3-outline-variant)] bg-surface-container 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("header", { className: "flex items-center justify-between border-b border-[var(--md3-outline-variant)] bg-surface-container-low 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-muted-foreground" }),
             /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
@@ -652,7 +652,7 @@ function ArtifactAgentDock({
               type: "button",
               onClick: () => onOpenChange(false),
               "aria-label": "Close artifact chat",
-              className: "rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+              className: "rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground",
               children: /* @__PURE__ */ jsx3(X, { className: "h-4 w-4" })
             }
           )
@@ -672,7 +672,7 @@ function ArtifactAgentDock({
         /* @__PURE__ */ jsx3(
           "form",
           {
-            className: "border-t border-border bg-background/60 p-3",
+            className: "border-t border-[var(--md3-outline-variant)] bg-surface-container-low p-3",
             onSubmit: (e) => {
               e.preventDefault();
               void send();
@@ -692,7 +692,7 @@ function ArtifactAgentDock({
                   placeholder: `Ask about ${heading}\u2026`,
                   rows: 2,
                   disabled: !threadId,
-                  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"
+                  className: "min-h-[44px] flex-1 resize-none rounded-[20px] border border-[var(--md3-outline-variant)] bg-surface-dim 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(
@@ -701,7 +701,7 @@ function ArtifactAgentDock({
                   type: "button",
                   onClick: cancel,
                   "aria-label": "Cancel",
-                  className: "inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                  className: "inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground",
                   children: /* @__PURE__ */ jsx3(Square, { className: "h-4 w-4" })
                 }
               ) : /* @__PURE__ */ jsx3(

package/dist/{chunk-3RNYDTQ3.js → chunk-LQHTCM56.js}

@@ -138,7 +138,7 @@ var xai_default = 'data:image/svg+xml,<svg fill="currentColor" fill-rule="evenod
 var zai_default = 'data:image/svg+xml,<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Z.ai</title><path d="M12.105 2L9.927 4.953H.653L2.83 2h9.276zM23.254 19.048L21.078 22h-9.242l2.174-2.952h9.244zM24 2L9.264 22H0L14.736 2H24z"></path></svg>';
 
 // src/dashboard/model-picker.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function canonicalModelId(model) {
   const id = model.id;
   if (id.includes("/")) return id;
@@ -345,12 +345,12 @@ function ModelPicker({
       "aria-label": triggerLabel,
       disabled,
       className: cn(
-        "inline-flex h-8 items-center gap-1.5 rounded-lg border border-border bg-card",
+        "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container",
         "px-2.5 text-xs font-medium text-foreground shadow-sm",
         "transition-colors duration-[var(--transition-fast)]",
-        "hover:border-border hover:bg-muted/40",
+        "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-border data-[state=open]:bg-muted/40",
+        "data-[state=open]:border-[var(--md3-outline)] data-[state=open]:bg-surface-container-high",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         className,
         triggerClassName
@@ -369,11 +369,11 @@ function ModelPicker({
       disabled,
       className: cn(
         "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",
+        "border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2.5 text-sm text-left",
         "transition-colors duration-[var(--transition-fast)]",
-        "hover:border-border hover:bg-muted/40",
+        "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-border data-[state=open]:bg-muted/40",
+        "data-[state=open]:border-[var(--md3-outline)] data-[state=open]:bg-surface-container-high",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         className,
         triggerClassName
@@ -399,13 +399,13 @@ function ModelPicker({
           className: cn(
             "z-50 w-[var(--radix-dropdown-menu-trigger-width)] min-w-[320px] max-w-[460px]",
             "max-h-[440px] overflow-hidden flex flex-col",
-            "rounded-[var(--radius-md)] border border-border bg-card shadow-[var(--shadow-dropdown)]",
+            "rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
             "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"
           ),
           children: [
-            /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 border-b border-border bg-background/80 px-3 py-2", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 border-b border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-2", children: [
               /* @__PURE__ */ jsx2(Search, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
               /* @__PURE__ */ jsx2(
                 "input",
@@ -464,7 +464,7 @@ function ModelPicker({
                 canonicalModelId(m)
               )) }, groupKey))
             ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "border-t border-border px-3 py-1.5 text-[10px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "border-t border-[var(--md3-outline-variant)] px-3 py-1.5 text-[10px] text-muted-foreground", children: [
               filtered.length,
               " of ",
               deduped.length,
@@ -530,27 +530,21 @@ function ModelRow({
   const pricing = formatPricing(model.pricing);
   const ctx = formatContext(model.context_length);
   const identity = resolveModelBrandIdentity(model);
+  const via = !identity.combined ? identity.host.label : null;
   return /* @__PURE__ */ jsxs2(PickerItem, { onSelect: () => onSelect(id), active, featured, children: [
     /* @__PURE__ */ jsx2(ModelBrandStack, { identity, size: "md" }),
     /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline justify-between gap-2", children: [
-        /* @__PURE__ */ jsx2("span", { className: "text-sm font-medium truncate", children: model.name ?? model.id }),
-        ctx && /* @__PURE__ */ jsx2("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: ctx })
-      ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-[11px] text-muted-foreground", children: [
-        /* @__PURE__ */ jsx2("span", { className: "truncate", children: id }),
-        !identity.combined && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2("span", { className: "shrink-0", children: "\xB7" }),
-          /* @__PURE__ */ jsxs2("span", { className: "shrink-0", children: [
-            identity.host.label,
-            " \u2192 ",
-            identity.lab.label
-          ] })
-        ] }),
-        pricing && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2("span", { className: "shrink-0", children: "\xB7" }),
-          /* @__PURE__ */ jsx2("span", { className: "shrink-0 font-mono", children: pricing })
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate text-sm font-medium", children: model.name ?? model.id }),
+        via && /* @__PURE__ */ jsxs2("span", { className: "shrink-0 rounded-full border border-[var(--md3-outline-variant)] bg-surface-container px-1.5 py-px text-[9px] font-medium text-muted-foreground", children: [
+          "via ",
+          via
         ] })
+      ] }),
+      (ctx || pricing) && /* @__PURE__ */ jsxs2("div", { className: "mt-0.5 flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
+        ctx && /* @__PURE__ */ jsx2("span", { className: "shrink-0", children: ctx }),
+        ctx && pricing && /* @__PURE__ */ jsx2("span", { className: "shrink-0 opacity-40", children: "\xB7" }),
+        pricing && /* @__PURE__ */ jsx2("span", { className: "shrink-0 font-mono", children: pricing })
       ] })
     ] })
   ] });