@tangle-network/sandbox-ui 0.49.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/{chunk-4HLWA2VN.js → chunk-MGIOO3RL.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-3J6FG3FJ.js";
 import {
   PortsList
-} from "./chunk-3WUSPCPC.js";
+} from "./chunk-RT4MLYYM.js";
 import {
   TerminalView
 } from "./chunk-VIREDUBF.js";

package/dist/{chunk-3WUSPCPC.js → chunk-RT4MLYYM.js}

@@ -1516,7 +1516,7 @@ function PlanCards({ plans, className }) {
 
 // src/dashboard/dashboard-layout.tsx
 import * as React7 from "react";
-import { Plus as Plus2, Bell } from "lucide-react";
+import { Plus as Plus2, Bell, ChevronsLeft, ChevronsRight } from "lucide-react";
 import { Fragment as Fragment9, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function SettingsIconSmall({ className }) {
   return /* @__PURE__ */ jsxs13("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
@@ -1571,6 +1571,7 @@ function DashboardLayoutInner({
   contentClassName,
   topNavLinks,
   activeTopNavHref,
+  topBarLeading,
   LinkComponent = DefaultLink2,
   logoHref = "/",
   onLogoClick,
@@ -1621,16 +1622,29 @@ function DashboardLayoutInner({
             className: "p-1 rounded-md transition-colors hover:bg-surface-container-high",
             children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true })
           }
-        ) : labeledRail ? /* @__PURE__ */ jsx14(
-          "button",
-          {
-            type: "button",
-            onClick: toggleRail,
-            "aria-label": railCollapsed ? "Expand navigation" : "Collapse navigation",
-            "aria-expanded": !railCollapsed,
-            className: "p-1 rounded-md transition-colors hover:bg-surface-container-high",
-            children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true })
-          }
+        ) : allowCollapse ? (
+          // The logo IS the collapse/expand control on the desktop rail
+          // (allowCollapse). The mobile drawer never collapses, so it falls
+          // through to the plain logo link. Expanded: full logotype with a
+          // collapse chevron that fades in on hover. Collapsed: the mark,
+          // with an expand chevron overlay on hover.
+          /* @__PURE__ */ jsxs13(
+            "button",
+            {
+              type: "button",
+              onClick: toggleRail,
+              "aria-label": railCollapsed ? "Expand navigation" : "Collapse navigation",
+              "aria-expanded": !railCollapsed,
+              className: cn(
+                "group/logo relative flex items-center gap-2 rounded-md p-1 transition-colors hover:bg-surface-container-high",
+                showLabels && "w-full"
+              ),
+              children: [
+                /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: !showLabels }),
+                showLabels ? /* @__PURE__ */ jsx14(ChevronsLeft, { className: "ml-auto h-4 w-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/logo:opacity-100" }) : /* @__PURE__ */ jsx14("span", { className: "absolute inset-0 flex items-center justify-center rounded-md bg-surface-container-high opacity-0 transition-opacity group-hover/logo:opacity-100", children: /* @__PURE__ */ jsx14(ChevronsRight, { className: "h-4 w-4 text-foreground" }) })
+              ]
+            }
+          )
         ) : /* @__PURE__ */ jsx14(
           Link,
           {
@@ -1674,18 +1688,39 @@ function DashboardLayoutInner({
           ] }, item.id);
         }) }),
         /* @__PURE__ */ jsxs13(SidebarRailFooter, { className: cn(showLabels && "items-stretch px-2"), children: [
-          allowCollapse && /* @__PURE__ */ jsx14(
-            RailCollapseToggle,
-            {
-              collapsed: railCollapsed,
-              showLabel: showLabels,
-              onToggle: toggleRail
-            }
-          ),
           onSettingsClick ? /* @__PURE__ */ jsx14(RailButton, { icon: SettingsIconSmall, label: "Settings", onClick: onSettingsClick, showLabel: showLabels }) : /* @__PURE__ */ jsx14(RailButton, { icon: SettingsIconSmall, label: "Settings", showLabel: showLabels, asChild: true, children: /* @__PURE__ */ jsx14(Link, { href: settingsHref, to: settingsHref }) }),
-          railFooter,
           /* @__PURE__ */ jsx14(RailSeparator, { className: showLabels ? "w-full" : void 0 }),
-          /* @__PURE__ */ jsx14(
+          railFooter !== void 0 ? showLabels ? /* @__PURE__ */ jsxs13("div", { className: "flex w-full items-center gap-1", children: [
+            /* @__PURE__ */ jsx14("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx14(
+              ProfileAvatar,
+              {
+                user: sidebarUser,
+                isLoading,
+                onLogout,
+                onSettingsClick,
+                settingsHref,
+                showDetails: showLabels,
+                LinkComponent,
+                children: profileMenuItems
+              }
+            ) }),
+            /* @__PURE__ */ jsx14("div", { className: "shrink-0", children: railFooter })
+          ] }) : /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center gap-1", children: [
+            railFooter,
+            /* @__PURE__ */ jsx14(
+              ProfileAvatar,
+              {
+                user: sidebarUser,
+                isLoading,
+                onLogout,
+                onSettingsClick,
+                settingsHref,
+                showDetails: showLabels,
+                LinkComponent,
+                children: profileMenuItems
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx14(
             ProfileAvatar,
             {
               user: sidebarUser,
@@ -1748,6 +1783,7 @@ function DashboardLayoutInner({
         children: [
           /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-8", children: [
             /* @__PURE__ */ jsx14(Link, { href: logoHref, to: logoHref, className: "lg:hidden flex items-center p-1 rounded-md hover:bg-surface-container-high transition-colors", children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true }) }),
+            topBarLeading,
             topNavLinks && topNavLinks.length > 0 && /* @__PURE__ */ jsx14("div", { className: "hidden md:flex gap-6", children: topNavLinks.map((link) => /* @__PURE__ */ jsx14(
               Link,
               {

package/dist/dashboard.d.ts

@@ -688,6 +688,9 @@ interface DashboardLayoutProps {
     contentClassName?: string;
     topNavLinks?: TopNavLink[];
     activeTopNavHref?: string;
+    /** Arbitrary content rendered at the leading (left) edge of the top bar —
+     * e.g. a workspace/team switcher — so consumers don't need a second bar. */
+    topBarLeading?: React.ReactNode;
     LinkComponent?: React.ComponentType<any>;
     /**
      * Where the in-app logo links. Defaults to "/" (backward compatible);

package/dist/dashboard.js

@@ -52,7 +52,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-3WUSPCPC.js";
+} from "./chunk-RT4MLYYM.js";
 import {
   BillingDashboard,
   InfoPanel,

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);
   }
@@ -392,6 +395,9 @@
   .bottom-1 {
     bottom: calc(var(--spacing) * 1);
   }
+  .bottom-1\.5 {
+    bottom: calc(var(--spacing) * 1.5);
+  }
   .bottom-2 {
     bottom: calc(var(--spacing) * 2);
   }
@@ -437,6 +443,9 @@
   .z-10 {
     z-index: 10;
   }
+  .z-20 {
+    z-index: 20;
+  }
   .z-30 {
     z-index: 30;
   }
@@ -753,6 +762,9 @@
   .h-\[640px\] {
     height: 640px;
   }
+  .h-\[720px\] {
+    height: 720px;
+  }
   .h-\[var\(--avatar-size\)\] {
     height: var(--avatar-size);
   }
@@ -816,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);
   }
@@ -1026,6 +1041,9 @@
   .w-\[420px\] {
     width: 420px;
   }
+  .w-\[460px\] {
+    width: 460px;
+  }
   .w-\[480px\] {
     width: 480px;
   }
@@ -3452,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);
   }
@@ -3626,6 +3650,11 @@
       rotate: 180deg;
     }
   }
+  .group-focus-within\:opacity-100 {
+    &:is(:where(.group):focus-within *) {
+      opacity: 100%;
+    }
+  }
   .group-focus-within\/tip\:translate-x-0 {
     &:is(:where(.group\/tip):focus-within *) {
       --tw-translate-x: calc(var(--spacing) * 0);
@@ -3676,6 +3705,13 @@
       }
     }
   }
+  .group-hover\/logo\:opacity-100 {
+    &:is(:where(.group\/logo):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .group-hover\/tip\:translate-x-0 {
     &:is(:where(.group\/tip):hover *) {
       @media (hover: hover) {
@@ -4188,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) {
@@ -4755,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/index.js

@@ -148,7 +148,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-4HLWA2VN.js";
+} from "./chunk-MGIOO3RL.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -211,7 +211,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-3WUSPCPC.js";
+} from "./chunk-RT4MLYYM.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/integrations.d.ts

@@ -60,6 +60,24 @@ interface IntegrationsPanelProps {
      * thrown error inline.
      */
     onDisconnect: (connectionId: string) => void | Promise<void>;
+    /**
+     * Resolver for a connected app's management page URL. When it returns a URL,
+     * the connected tile's body and the overflow menu's "Manage" item become a
+     * real link opened in a new tab (so cmd/middle-click and "open in new tab"
+     * work). Return undefined to omit Manage for a given connection. Preferred
+     * over `onManage` — only fall back to the callback when the URL must be minted
+     * imperatively on click (e.g. a one-time token).
+     */
+    getManageHref?: (connection: IntegrationConnection) => string | undefined;
+    /**
+     * Imperative fallback for opening a connected app's management page, used only
+     * when `getManageHref` is not supplied (or returns undefined). The consumer is
+     * responsible for opening the page (e.g. `window.open(...)`).
+     */
+    onManage?: (input: {
+        connectionId: string;
+        providerId: string;
+    }) => void | Promise<void>;
     /** Empty-state message when the catalog hasn't loaded any providers. */
     emptyCatalogLabel?: string;
     /**
@@ -72,7 +90,7 @@ interface IntegrationsPanelProps {
     defaultSort?: IntegrationSort;
     className?: string;
 }
-declare function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoading, error, onConnect, onDisconnect, emptyCatalogLabel, featuredIds, defaultSort, className, }: IntegrationsPanelProps): react_jsx_runtime.JSX.Element;
+declare function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoading, error, onConnect, onDisconnect, getManageHref, onManage, emptyCatalogLabel, featuredIds, defaultSort, className, }: IntegrationsPanelProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Endpoint contract expected on the consumer app's server (which

package/dist/integrations.js

@@ -16,10 +16,15 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
   EmptyState
 } from "@tangle-network/ui/primitives";
 import { cn } from "@tangle-network/ui/utils";
-import { Check, Search, Unplug } from "lucide-react";
+import { Check, ExternalLink, MoreVertical, Search, Unplug } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_FEATURED_IDS = [
   "gmail",
@@ -99,6 +104,8 @@ function IntegrationsPanel({
   error,
   onConnect,
   onDisconnect,
+  getManageHref,
+  onManage,
   emptyCatalogLabel = "No integrations available yet.",
   featuredIds = DEFAULT_FEATURED_IDS,
   defaultSort = "featured",
@@ -252,6 +259,8 @@ function IntegrationsPanel({
       const name = displayNameOf(provider);
       const connected = Boolean(live);
       if (connected && live) {
+        const manageHref = getManageHref?.(live);
+        const canManage = Boolean(manageHref) || Boolean(onManage);
         return /* @__PURE__ */ jsxs(
           "div",
           {
@@ -259,56 +268,118 @@ function IntegrationsPanel({
             "data-connected": "true",
             title: live.accountDisplay ? `${name} \u2014 ${live.accountDisplay}` : name,
             className: cn(
-              "relative flex aspect-square flex-col items-center justify-center gap-2 rounded-xl border p-3 text-center",
+              "group relative flex aspect-square flex-col items-center justify-center gap-2 rounded-xl border p-3 text-center",
               "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]"
             ),
             children: [
-              /* @__PURE__ */ jsx("span", { className: "absolute left-2 top-2 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--surface-success-text)] text-white", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3", strokeWidth: 3 }) }),
-              /* @__PURE__ */ jsx(
-                "button",
+              manageHref ? /* @__PURE__ */ jsx(
+                "a",
                 {
-                  type: "button",
-                  onClick: () => setDisconnectTarget({
-                    connectionId: live.id,
-                    name,
-                    accountDisplay: live.accountDisplay
-                  }),
-                  "data-testid": `disconnect-${provider.providerId}`,
-                  "aria-label": `Disconnect ${name}`,
-                  title: "Disconnect",
-                  className: "absolute right-1.5 top-1.5 flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
-                  children: /* @__PURE__ */ jsx(Unplug, { className: "h-3.5 w-3.5" })
+                  href: manageHref,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  "aria-label": `Manage ${name} (opens in new window)`,
+                  "data-testid": `manage-${provider.providerId}`,
+                  className: "absolute inset-0 z-10 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
                 }
-              ),
-              /* @__PURE__ */ jsx(
-                ProviderIcon,
-                {
-                  id: provider.providerId,
-                  iconUrl: provider.iconUrl,
-                  displayName: provider.displayName,
-                  size: LOGO_SIZE,
-                  className: "rounded-2xl"
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "flex h-8 w-full flex-col justify-center leading-4", children: [
+              ) : null,
+              /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 top-2 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--surface-success-text)] text-white", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3", strokeWidth: 3 }) }),
+              /* @__PURE__ */ jsxs("div", { className: "pointer-events-none flex flex-col items-center gap-2", children: [
                 /* @__PURE__ */ jsx(
-                  "span",
+                  ProviderIcon,
                   {
-                    className: cn(
-                      "w-full text-xs font-medium text-foreground",
-                      live.accountDisplay ? "truncate" : "line-clamp-2"
-                    ),
-                    children: name
+                    id: provider.providerId,
+                    iconUrl: provider.iconUrl,
+                    displayName: provider.displayName,
+                    size: LOGO_SIZE,
+                    className: "rounded-2xl"
                   }
                 ),
-                live.accountDisplay ? /* @__PURE__ */ jsx(
-                  "span",
+                /* @__PURE__ */ jsxs("div", { className: "flex h-8 w-full flex-col justify-center leading-4", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "w-full text-xs font-medium text-foreground",
+                        live.accountDisplay ? "truncate" : "line-clamp-2"
+                      ),
+                      children: name
+                    }
+                  ),
+                  live.accountDisplay ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "w-full truncate text-[11px] leading-4 text-muted-foreground",
+                      "data-testid": `account-${provider.providerId}`,
+                      children: live.accountDisplay
+                    }
+                  ) : null
+                ] })
+              ] }),
+              manageHref ? /* @__PURE__ */ jsx(
+                ExternalLink,
+                {
+                  "aria-hidden": true,
+                  className: "pointer-events-none absolute bottom-1.5 right-1.5 h-3.5 w-3.5 text-muted-foreground/70 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100"
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  "button",
                   {
-                    className: "w-full truncate text-[11px] leading-4 text-muted-foreground",
-                    "data-testid": `account-${provider.providerId}`,
-                    children: live.accountDisplay
+                    type: "button",
+                    "data-testid": `menu-${provider.providerId}`,
+                    "aria-label": `More actions for ${name}`,
+                    title: "More actions",
+                    className: "absolute right-1.5 top-1.5 z-20 flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+                    children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-3.5 w-3.5" })
                   }
-                ) : null
+                ) }),
+                /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "min-w-[160px]", children: [
+                  manageHref ? /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs(
+                    "a",
+                    {
+                      href: manageHref,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      "data-testid": `manage-item-${provider.providerId}`,
+                      children: [
+                        /* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }),
+                        " Manage"
+                      ]
+                    }
+                  ) }) : onManage ? /* @__PURE__ */ jsxs(
+                    DropdownMenuItem,
+                    {
+                      "data-testid": `manage-item-${provider.providerId}`,
+                      onClick: () => onManage({
+                        connectionId: live.id,
+                        providerId: provider.providerId
+                      }),
+                      children: [
+                        /* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }),
+                        " Manage"
+                      ]
+                    }
+                  ) : null,
+                  canManage ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
+                  /* @__PURE__ */ jsxs(
+                    DropdownMenuItem,
+                    {
+                      "data-testid": `disconnect-${provider.providerId}`,
+                      className: "text-destructive focus:text-destructive",
+                      onClick: () => setDisconnectTarget({
+                        connectionId: live.id,
+                        name,
+                        accountDisplay: live.accountDisplay
+                      }),
+                      children: [
+                        /* @__PURE__ */ jsx(Unplug, { className: "mr-2 h-4 w-4" }),
+                        " Disconnect"
+                      ]
+                    }
+                  )
+                ] })
               ] })
             ]
           },

package/dist/pages.d.ts

@@ -202,7 +202,7 @@ interface ProvisioningConfig {
         key: string;
         value: string;
     }[];
-    driver: "docker" | "firecracker" | "host-agent-docker" | "host-agent-firecracker" | "tangle";
+    driver: "docker" | "firecracker" | "host-agent" | "tangle";
     bare: boolean;
     startupScriptIds?: string[];
 }

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);
   }
@@ -392,6 +395,9 @@
   .bottom-1 {
     bottom: calc(var(--spacing) * 1);
   }
+  .bottom-1\.5 {
+    bottom: calc(var(--spacing) * 1.5);
+  }
   .bottom-2 {
     bottom: calc(var(--spacing) * 2);
   }
@@ -437,6 +443,9 @@
   .z-10 {
     z-index: 10;
   }
+  .z-20 {
+    z-index: 20;
+  }
   .z-30 {
     z-index: 30;
   }
@@ -753,6 +762,9 @@
   .h-\[640px\] {
     height: 640px;
   }
+  .h-\[720px\] {
+    height: 720px;
+  }
   .h-\[var\(--avatar-size\)\] {
     height: var(--avatar-size);
   }
@@ -816,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);
   }
@@ -1026,6 +1041,9 @@
   .w-\[420px\] {
     width: 420px;
   }
+  .w-\[460px\] {
+    width: 460px;
+  }
   .w-\[480px\] {
     width: 480px;
   }
@@ -3452,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);
   }
@@ -3626,6 +3650,11 @@
       rotate: 180deg;
     }
   }
+  .group-focus-within\:opacity-100 {
+    &:is(:where(.group):focus-within *) {
+      opacity: 100%;
+    }
+  }
   .group-focus-within\/tip\:translate-x-0 {
     &:is(:where(.group\/tip):focus-within *) {
       --tw-translate-x: calc(var(--spacing) * 0);
@@ -3676,6 +3705,13 @@
       }
     }
   }
+  .group-hover\/logo\:opacity-100 {
+    &:is(:where(.group\/logo):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .group-hover\/tip\:translate-x-0 {
     &:is(:where(.group\/tip):hover *) {
       @media (hover: hover) {
@@ -4188,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) {
@@ -4755,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/workbench.js

@@ -12,9 +12,9 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-4HLWA2VN.js";
+} from "./chunk-MGIOO3RL.js";
 import "./chunk-3J6FG3FJ.js";
-import "./chunk-3WUSPCPC.js";
+import "./chunk-RT4MLYYM.js";
 import "./chunk-OMUIPJQZ.js";
 import "./chunk-VIREDUBF.js";
 import "./chunk-77WVVJA4.js";

package/package.json

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