@tangle-network/sandbox-ui 0.50.0 → 0.51.0

package/dist/assistant.js

@@ -4,6 +4,10 @@ import {
 import {
   providerLabel
 } from "./chunk-7JLB7UZ3.js";
+import {
+  ModelPicker
+} from "./chunk-LQHTCM56.js";
+import "./chunk-EI44GEQ5.js";
 import "./chunk-U67V476Y.js";
 
 // src/assistant/sse.ts
@@ -1532,14 +1536,14 @@ function useAssistantThreads(userId) {
 // src/assistant/AssistantDock.tsx
 import { MessageSquare } from "lucide-react";
 import {
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useRef as useRef6
 } from "react";
 
 // src/assistant/AssistantPanel.tsx
 import { AgentTimeline, ChatInput, ThinkingIndicator } from "@tangle-network/ui/chat";
 import { History, MessageSquarePlus, Minus, Plus, Trash2, X } from "lucide-react";
-import { useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useMemo, useRef as useRef4, useState as useState5 } from "react";
 
 // src/assistant/build-timeline.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -1910,6 +1914,23 @@ function defaultFormatMoney(usd) {
     currency: "USD"
   }).format(usd);
 }
+function toPickerModels(models, selected) {
+  const mapped = models.models.map((m) => ({
+    id: m.slug,
+    name: m.label,
+    ...m.contextTokens != null ? { context_length: m.contextTokens } : {}
+  }));
+  for (const slug of [models.default, selected]) {
+    if (slug && !mapped.some((m) => m.id === slug)) {
+      mapped.push({ id: slug, name: slug });
+    }
+  }
+  return mapped;
+}
+function nextModelSelection(id, defaultSlug) {
+  if (defaultSlug != null && id === defaultSlug) return null;
+  return id || null;
+}
 function AssistantPanel({
   chat,
   userId,
@@ -1924,9 +1945,41 @@ function AssistantPanel({
   const threads = useAssistantThreads(userId);
   const font = useFontScale();
   const [historyOpen, setHistoryOpen] = useState5(false);
+  const historyRef = useRef4(null);
+  const historyButtonRef = useRef4(null);
+  const pickerModels = useMemo(
+    () => toPickerModels(models, chat.selectedModel),
+    [models, chat.selectedModel]
+  );
+  const pickerValue = chat.selectedModel ?? models.default ?? "";
   const { state } = chat;
   const chatRef = useRef4(chat);
   chatRef.current = chat;
+  useEffect5(() => {
+    if (!historyOpen) return;
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (historyRef.current?.contains(target)) return;
+      if (historyButtonRef.current?.contains(target)) return;
+      setHistoryOpen(false);
+    };
+    const onKeyDownCapture = (e) => {
+      if (e.key !== "Escape") return;
+      if (!historyRef.current?.contains(e.target)) return;
+      e.stopImmediatePropagation();
+      setHistoryOpen(false);
+      historyButtonRef.current?.focus();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDownCapture, true);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDownCapture, true);
+    };
+  }, [historyOpen]);
+  useEffect5(() => {
+    if (historyOpen) historyRef.current?.focus();
+  }, [historyOpen]);
   const effectiveBalance = state.usage?.balanceUsd ?? balanceUsd;
   const errorView = state.error ? presentError(state.error.code, state.error.message) : null;
   const low = isLowBalance(effectiveBalance) && !errorView;
@@ -1965,140 +2018,161 @@ function AssistantPanel({
       chatRef.current.reset();
     }
   };
-  return /* @__PURE__ */ jsxs2("div", { className: "flex h-full flex-col bg-background", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 border-border border-b px-4 py-3", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-col", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-2", children: [
-          /* @__PURE__ */ jsx4("span", { className: "font-medium text-foreground text-sm", children: "Assistant" }),
-          /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs2("div", { className: "relative flex h-full flex-col bg-background", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "relative z-10 border-border border-b", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 px-4 pt-3 pb-1.5", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-col", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-2", children: [
+            /* @__PURE__ */ jsx4("span", { className: "font-medium text-foreground text-sm", children: "Assistant" }),
+            /* @__PURE__ */ jsx4(
+              "span",
+              {
+                "aria-label": "Your credit balance",
+                className: "text-muted-foreground text-xs",
+                children: formatMoney(effectiveBalance)
+              }
+            )
+          ] }),
+          conversationTitle && /* @__PURE__ */ jsx4(
             "span",
             {
-              "aria-label": "Your credit balance",
-              className: "text-muted-foreground text-xs",
-              children: formatMoney(effectiveBalance)
+              className: "truncate text-muted-foreground text-xs",
+              title: conversationTitle,
+              children: conversationTitle
             }
           )
         ] }),
-        conversationTitle && /* @__PURE__ */ jsx4(
-          "span",
-          {
-            className: "truncate text-muted-foreground text-xs",
-            title: conversationTitle,
-            children: conversationTitle
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-1", children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-center", role: "group", "aria-label": "Text size", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-0.5", children: [
           /* @__PURE__ */ jsx4(
             "button",
             {
+              ref: historyButtonRef,
               type: "button",
-              onClick: font.decrease,
-              disabled: !font.canDecrease,
-              "aria-label": "Decrease text size",
-              className: "rounded p-1 text-muted-foreground hover:text-foreground disabled:opacity-40",
-              children: /* @__PURE__ */ jsx4(Minus, { className: "h-4 w-4" })
+              onClick: openHistory,
+              "aria-label": "Chat history",
+              "aria-pressed": historyOpen,
+              className: `rounded-md p-1.5 transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring ${historyOpen ? "bg-muted text-foreground" : "text-muted-foreground"}`,
+              children: /* @__PURE__ */ jsx4(History, { className: "h-4 w-4" })
             }
           ),
           /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
-              onClick: font.increase,
-              disabled: !font.canIncrease,
-              "aria-label": "Increase text size",
-              className: "rounded p-1 text-muted-foreground hover:text-foreground disabled:opacity-40",
-              children: /* @__PURE__ */ jsx4(Plus, { className: "h-4 w-4" })
+              onClick: chat.reset,
+              "aria-label": "New chat",
+              title: "New chat",
+              className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx4(MessageSquarePlus, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "Close assistant",
+              className: "rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx4(X, { className: "h-4 w-4" })
             }
           )
-        ] }),
-        /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            onClick: openHistory,
-            "aria-label": "Chat history",
-            "aria-pressed": historyOpen,
-            className: "rounded p-1 text-muted-foreground hover:text-foreground",
-            children: /* @__PURE__ */ jsx4(History, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          "button",
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 px-3 pb-2", children: [
+        pickerModels.length > 0 ? /* @__PURE__ */ jsx4(
+          ModelPicker,
           {
-            type: "button",
-            onClick: chat.reset,
-            "aria-label": "New chat",
-            title: "New chat",
-            className: "rounded p-1 text-muted-foreground hover:text-foreground",
-            children: /* @__PURE__ */ jsx4(MessageSquarePlus, { className: "h-4 w-4" })
+            variant: "pill",
+            label: "Model",
+            value: pickerValue,
+            onChange: (id) => chat.setModel(nextModelSelection(id, models.default)),
+            models: pickerModels
           }
-        ),
-        /* @__PURE__ */ jsx4(
-          "button",
+        ) : /* @__PURE__ */ jsx4("span", { className: "px-1 text-muted-foreground text-xs", children: "Default model" }),
+        /* @__PURE__ */ jsxs2(
+          "div",
           {
-            type: "button",
-            onClick: onClose,
-            "aria-label": "Close assistant",
-            className: "rounded p-1 text-muted-foreground hover:text-foreground",
-            children: /* @__PURE__ */ jsx4(X, { className: "h-4 w-4" })
+            className: "flex items-center overflow-hidden rounded-md border border-border",
+            role: "group",
+            "aria-label": "Text size",
+            children: [
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  onClick: font.decrease,
+                  disabled: !font.canDecrease,
+                  "aria-label": "Decrease text size",
+                  className: "px-1.5 py-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent",
+                  children: /* @__PURE__ */ jsx4(Minus, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  onClick: font.increase,
+                  disabled: !font.canIncrease,
+                  "aria-label": "Increase text size",
+                  className: "border-border border-l px-1.5 py-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent",
+                  children: /* @__PURE__ */ jsx4(Plus, { className: "h-3.5 w-3.5" })
+                }
+              )
+            ]
           }
         )
-      ] })
-    ] }),
-    models.models.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 border-border border-b px-4 py-2", children: [
-      /* @__PURE__ */ jsx4(
-        "label",
-        {
-          htmlFor: "assistant-model",
-          className: "text-muted-foreground text-xs",
-          children: "Model"
-        }
-      ),
-      /* @__PURE__ */ jsxs2(
-        "select",
+      ] }),
+      historyOpen && /* @__PURE__ */ jsxs2(
+        "div",
         {
-          id: "assistant-model",
-          value: chat.selectedModel ?? "",
-          onChange: (e) => chat.setModel(e.target.value || null),
-          className: "rounded border border-border bg-card px-2 py-1 text-foreground text-xs",
+          ref: historyRef,
+          role: "dialog",
+          "aria-label": "Recent conversations",
+          tabIndex: -1,
+          className: "absolute inset-x-2 top-full z-30 mt-1 overflow-hidden rounded-lg border border-border bg-surface-container-highest shadow-xl ring-1 ring-black/5 focus:outline-none",
           children: [
-            /* @__PURE__ */ jsx4("option", { value: "", children: models.default ?? "Default" }),
-            models.models.map((m) => /* @__PURE__ */ jsx4("option", { value: m.slug, children: m.label }, m.slug))
+            /* @__PURE__ */ jsx4("div", { className: "border-border border-b bg-surface-container-high px-3 py-2 font-medium text-[11px] text-muted-foreground uppercase tracking-wide", children: "Recent conversations" }),
+            /* @__PURE__ */ jsx4("div", { className: "max-h-[min(18rem,50vh)] overflow-y-auto", children: threads.threads.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "px-3 py-3 text-muted-foreground text-xs", children: threads.loaded ? "No past conversations." : "Loading\u2026" }) : /* @__PURE__ */ jsx4("ul", { className: "py-1", children: threads.threads.map((t) => {
+              const busyActive = state.threadId === t.id && state.status !== "idle";
+              const active = state.threadId === t.id;
+              return /* @__PURE__ */ jsxs2(
+                "li",
+                {
+                  className: `group flex items-center transition-colors hover:bg-muted/60 ${active ? "bg-primary/10" : ""}`,
+                  children: [
+                    /* @__PURE__ */ jsx4(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          chat.switchThread(t.id);
+                          setHistoryOpen(false);
+                        },
+                        className: `min-w-0 flex-1 truncate px-3 py-2 text-left text-xs ${active ? "font-medium text-foreground" : "text-foreground"}`,
+                        children: t.title ?? "Untitled conversation"
+                      }
+                    ),
+                    threads.canRemove && /* @__PURE__ */ jsx4(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => void deleteThread(t.id),
+                        disabled: busyActive,
+                        "aria-label": "Delete conversation",
+                        title: busyActive ? "Can't delete while this conversation is active" : "Delete conversation",
+                        className: "shrink-0 p-2 text-muted-foreground opacity-0 transition hover:text-destructive focus-visible:opacity-100 group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30",
+                        children: /* @__PURE__ */ jsx4(Trash2, { className: "h-3.5 w-3.5" })
+                      }
+                    )
+                  ]
+                },
+                t.id
+              );
+            }) }) })
           ]
         }
       )
     ] }),
-    historyOpen && /* @__PURE__ */ jsx4("div", { className: "max-h-48 overflow-y-auto border-border border-b", children: threads.threads.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "px-4 py-3 text-muted-foreground text-xs", children: threads.loaded ? "No past conversations." : "Loading\u2026" }) : /* @__PURE__ */ jsx4("ul", { children: threads.threads.map((t) => {
-      const busyActive = state.threadId === t.id && state.status !== "idle";
-      return /* @__PURE__ */ jsxs2("li", { className: "group flex items-center hover:bg-muted/50", children: [
-        /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              chat.switchThread(t.id);
-              setHistoryOpen(false);
-            },
-            className: "min-w-0 flex-1 truncate px-4 py-2 text-left text-foreground text-xs",
-            children: t.title ?? "Untitled conversation"
-          }
-        ),
-        threads.canRemove && /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            onClick: () => void deleteThread(t.id),
-            disabled: busyActive,
-            "aria-label": "Delete conversation",
-            title: busyActive ? "Can't delete while this conversation is active" : "Delete conversation",
-            className: "shrink-0 p-2 text-muted-foreground opacity-0 transition hover:text-destructive focus-visible:opacity-100 group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30",
-            children: /* @__PURE__ */ jsx4(Trash2, { className: "h-3.5 w-3.5" })
-          }
-        )
-      ] }, t.id);
-    }) }) }),
     /* @__PURE__ */ jsx4(
       "div",
       {
@@ -2106,7 +2180,7 @@ function AssistantPanel({
         "aria-label": "Conversation",
         "aria-live": "polite",
         className: "min-h-0 flex-1 overflow-y-auto px-2 py-3",
-        style: { fontSize: `${font.scale}rem` },
+        style: { zoom: font.scale },
         children: renderTranscript ? renderTranscript({
           messages: state.messages,
           reasoning: state.reasoning,
@@ -2192,7 +2266,7 @@ import {
   createContext as createContext2,
   useCallback as useCallback4,
   useContext as useContext2,
-  useMemo,
+  useMemo as useMemo2,
   useState as useState6
 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
@@ -2208,7 +2282,7 @@ function AssistantLauncherProvider({
   }, []);
   const closeAssistant = useCallback4(() => setOpen(false), []);
   const clearSeed = useCallback4(() => setSeed(null), []);
-  const value = useMemo(
+  const value = useMemo2(
     () => ({ open, seed, openAssistant, closeAssistant, clearSeed }),
     [open, seed, openAssistant, closeAssistant, clearSeed]
   );
@@ -2327,7 +2401,7 @@ function AssistantDock({
   const dialogRef = useRef6(null);
   const returnFocusRef = useRef6(null);
   const wasOpenRef = useRef6(false);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!open) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") closeAssistant();
@@ -2335,7 +2409,7 @@ function AssistantDock({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, closeAssistant]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (open) {
       if (!wasOpenRef.current && !returnFocusRef.current) {
         returnFocusRef.current = document.activeElement;

package/dist/globals.css

@@ -317,6 +317,9 @@
   .inset-x-0 {
     inset-inline: calc(var(--spacing) * 0);
   }
+  .inset-x-2 {
+    inset-inline: calc(var(--spacing) * 2);
+  }
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
@@ -759,6 +762,9 @@
   .h-\[640px\] {
     height: 640px;
   }
+  .h-\[720px\] {
+    height: 720px;
+  }
   .h-\[var\(--avatar-size\)\] {
     height: var(--avatar-size);
   }
@@ -822,6 +828,9 @@
   .max-h-\[440px\] {
     max-height: 440px;
   }
+  .max-h-\[min\(18rem\,50vh\)\] {
+    max-height: min(18rem, 50vh);
+  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -1032,6 +1041,9 @@
   .w-\[420px\] {
     width: 420px;
   }
+  .w-\[460px\] {
+    width: 460px;
+  }
   .w-\[480px\] {
     width: 480px;
   }
@@ -3458,6 +3470,12 @@
   .ring-\[var\(--md3-outline-variant\)\] {
     --tw-ring-color: var(--md3-outline-variant);
   }
+  .ring-black\/5 {
+    --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
+    }
+  }
   .ring-border {
     --tw-ring-color: var(--color-border);
   }
@@ -4206,6 +4224,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) {
@@ -4773,6 +4801,15 @@
       opacity: 60%;
     }
   }
+  .disabled\:hover\:bg-transparent {
+    &:disabled {
+      &:hover {
+        @media (hover: hover) {
+          background-color: transparent;
+        }
+      }
+    }
+  }
   .data-\[disabled\]\:pointer-events-none {
     &[data-disabled] {
       pointer-events: none;

package/dist/styles.css

@@ -317,6 +317,9 @@
   .inset-x-0 {
     inset-inline: calc(var(--spacing) * 0);
   }
+  .inset-x-2 {
+    inset-inline: calc(var(--spacing) * 2);
+  }
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
@@ -759,6 +762,9 @@
   .h-\[640px\] {
     height: 640px;
   }
+  .h-\[720px\] {
+    height: 720px;
+  }
   .h-\[var\(--avatar-size\)\] {
     height: var(--avatar-size);
   }
@@ -822,6 +828,9 @@
   .max-h-\[440px\] {
     max-height: 440px;
   }
+  .max-h-\[min\(18rem\,50vh\)\] {
+    max-height: min(18rem, 50vh);
+  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -1032,6 +1041,9 @@
   .w-\[420px\] {
     width: 420px;
   }
+  .w-\[460px\] {
+    width: 460px;
+  }
   .w-\[480px\] {
     width: 480px;
   }
@@ -3458,6 +3470,12 @@
   .ring-\[var\(--md3-outline-variant\)\] {
     --tw-ring-color: var(--md3-outline-variant);
   }
+  .ring-black\/5 {
+    --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
+    }
+  }
   .ring-border {
     --tw-ring-color: var(--color-border);
   }
@@ -4206,6 +4224,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) {
@@ -4773,6 +4801,15 @@
       opacity: 60%;
     }
   }
+  .disabled\:hover\:bg-transparent {
+    &:disabled {
+      &:hover {
+        @media (hover: hover) {
+          background-color: transparent;
+        }
+      }
+    }
+  }
   .data-\[disabled\]\:pointer-events-none {
     &[data-disabled] {
       pointer-events: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",