@tangle-network/sandbox-ui 0.49.0 → 0.50.0

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

@@ -392,6 +392,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 +440,9 @@
   .z-10 {
     z-index: 10;
   }
+  .z-20 {
+    z-index: 20;
+  }
   .z-30 {
     z-index: 30;
   }
@@ -3626,6 +3632,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 +3687,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) {

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

@@ -392,6 +392,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 +440,9 @@
   .z-10 {
     z-index: 10;
   }
+  .z-20 {
+    z-index: 20;
+  }
   .z-30 {
     z-index: 30;
   }
@@ -3626,6 +3632,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 +3687,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) {

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.50.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",