@tangle-network/sandbox-ui 0.91.2 → 0.91.4

package/dist/globals.css

@@ -1945,6 +1945,12 @@
       border-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);
     }
   }
+  .border-destructive\/40 {
+    border-color: color-mix(in srgb, hsl(var(--destructive)) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+    }
+  }
   .border-destructive\/50 {
     border-color: color-mix(in srgb, hsl(var(--destructive)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { ArtifactPane, ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CodeBlock, CodeBlockProps, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalDisplay, TerminalCursor as TerminalDisplayCursor, TerminalInput as TerminalDisplayInput, TerminalLine as TerminalDisplayLine, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, buttonVariants, useTheme, useToast } from '@tangle-network/ui/primitives';
 export { L as Logo, a as LogoProps, T as TangleKnot } from './logo-CaIvk3J1.js';
 export { CodeBlock as CodeBlockDisplay, Markdown, MarkdownProps } from '@tangle-network/ui/markdown';
-export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, ApprovalQueueProps, AuditCheck, AuditResults, AuditResultsProps, BannerType, CalendarEvent, CalendarView, CalendarViewProps, ContextBadge, DirectoryPane, DirectoryPaneProps, FormAudit, RuntimePane, RuntimePaneProps, SESSION_CREATED_EVENT, SandboxWorkbench, SandboxWorkbenchArtifact, SandboxWorkbenchCustomArtifact, SandboxWorkbenchFileArtifact, SandboxWorkbenchLayoutOptions, SandboxWorkbenchMarkdownArtifact, SandboxWorkbenchOpenUIArtifact, SandboxWorkbenchProps, SandboxWorkbenchSessionProps, SessionActivityMonitor, SessionActivityMonitorProps, SessionCreatedDetail, SessionOptimisticController, SessionSidebar, SessionSidebarBadge, SessionSidebarFilter, SessionSidebarItem, SessionSidebarLink, SessionSidebarProps, ShellShouldRevalidateArgs, ShellShouldRevalidateOptions, StatusBanner, StatusBannerProps, StatusBar, StatusBarProps, TaskBoard, TaskBoardColumn, TaskBoardItem, TaskBoardProps, TerminalLine, TerminalPanel, TerminalProps, UseOptimisticSessionItemsOptions, WorkspaceLayout, WorkspaceLayoutProps, createShellShouldRevalidate, dispatchSessionCreated, shellShouldRevalidate, useOptimisticSessionItems } from './workspace.js';
+export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, ApprovalQueueProps, AuditCheck, AuditResults, AuditResultsProps, BannerType, CalendarEvent, CalendarView, CalendarViewProps, ContextBadge, DirectoryPane, DirectoryPaneProps, FormAudit, RuntimePane, RuntimePaneProps, SESSION_CREATED_EVENT, SandboxWorkbench, SandboxWorkbenchArtifact, SandboxWorkbenchCustomArtifact, SandboxWorkbenchFileArtifact, SandboxWorkbenchLayoutOptions, SandboxWorkbenchMarkdownArtifact, SandboxWorkbenchOpenUIArtifact, SandboxWorkbenchProps, SandboxWorkbenchSessionProps, SessionActivityMonitor, SessionActivityMonitorProps, SessionCreatedDetail, SessionOptimisticController, SessionSidebar, SessionSidebarBadge, SessionSidebarFilter, SessionSidebarItem, SessionSidebarLink, SessionSidebarProps, ShellShouldRevalidateArgs, ShellShouldRevalidateOptions, StatusBanner, StatusBannerProps, StatusBar, StatusBarProps, TaskBoard, TaskBoardColumn, TaskBoardItem, TaskBoardProps, TerminalLine, TerminalPanel, TerminalProps, UseOptimisticSessionItemsOptions, WorkspaceLayout, WorkspaceLayoutProps, WorkspacePaneHeader, WorkspacePaneHeaderProps, createShellShouldRevalidate, dispatchSessionCreated, shellShouldRevalidate, useOptimisticSessionItems } from './workspace.js';
 export { ArtifactView, BRAND_PRISM_THEME, CodeSurface, CodeSurfaceProps, CodeView, CodeViewProps, DiffStats, DiffView, DiffViewProps, FileBreadcrumb, FileBreadcrumbProps, GitStatusBadge, PanelHeader, PanelHeaderProps, PillTabItem, PillTabs, PillTabsProps, PreviewView, PreviewViewProps, SandboxArtifact, SandboxArtifactPane, SandboxArtifactPaneProps, SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage } from './workbench.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from '@tangle-network/ui/openui';
 export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from '@tangle-network/ui/chat';

package/dist/index.js

@@ -132,11 +132,12 @@ import {
   TaskBoard,
   TerminalPanel,
   WorkspaceLayout,
+  WorkspacePaneHeader,
   createShellShouldRevalidate,
   dispatchSessionCreated,
   shellShouldRevalidate,
   useOptimisticSessionItems
-} from "./chunk-RPOPLGW7.js";
+} from "./chunk-XKKV3B24.js";
 import {
   BRAND_PRISM_THEME,
   CodeSurface,
@@ -576,6 +577,7 @@ export {
   VariantList,
   WebSearchPreview,
   WorkspaceLayout,
+  WorkspacePaneHeader,
   WriteFilePreview,
   activeSessionsAtom,
   addMessage,

package/dist/integrations.js

@@ -147,6 +147,39 @@ function IntegrationsPanel({
     setDisconnectTarget(null);
     setDisconnectError(null);
   }, []);
+  const [connectingId, setConnectingId] = React.useState(null);
+  const [connectError, setConnectError] = React.useState(null);
+  const activeConnect = React.useRef(0);
+  const startConnect = React.useCallback(
+    async (input) => {
+      const reqId = activeConnect.current += 1;
+      setConnectError(null);
+      let pending;
+      try {
+        pending = onConnect(input);
+      } catch (e) {
+        setConnectError(
+          e instanceof Error ? e.message : "Failed to start the connection."
+        );
+        return;
+      }
+      if (typeof pending?.then !== "function") {
+        return;
+      }
+      setConnectingId(input.providerId);
+      try {
+        await pending;
+      } catch (e) {
+        if (activeConnect.current !== reqId) return;
+        setConnectError(
+          e instanceof Error ? e.message : "Failed to start the connection."
+        );
+      } finally {
+        if (activeConnect.current === reqId) setConnectingId(null);
+      }
+    },
+    [onConnect]
+  );
   const confirmDisconnect = React.useCallback(async () => {
     if (!disconnectTarget) return;
     const reqId = activeDisconnect.current += 1;
@@ -245,6 +278,15 @@ function IntegrationsPanel({
         }
       )
     ] }),
+    connectError ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "alert",
+        "data-testid": "integration-connect-error",
+        className: "mb-3 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive",
+        children: connectError
+      }
+    ) : null,
     visible.length === 0 ? /* @__PURE__ */ jsx(
       EmptyState,
       {
@@ -393,7 +435,15 @@ function IntegrationsPanel({
           type: "button",
           "data-testid": `integration-${provider.providerId}`,
           "data-connected": "false",
-          onClick: () => onConnect({ providerId: provider.providerId, connectorId }),
+          "data-connecting": connectingId === provider.providerId ? "true" : void 0,
+          disabled: connectingId === provider.providerId,
+          "aria-busy": connectingId === provider.providerId,
+          onClick: () => {
+            void startConnect({
+              providerId: provider.providerId,
+              connectorId
+            });
+          },
           title: provider.description ? provider.description : `Connect ${name}`,
           className: cn(
             "group flex min-w-0 aspect-square flex-col items-center justify-center gap-2 rounded-xl border border-border bg-card p-3 text-center transition-all",

package/dist/styles.css

@@ -1945,6 +1945,12 @@
       border-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);
     }
   }
+  .border-destructive\/40 {
+    border-color: color-mix(in srgb, hsl(var(--destructive)) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+    }
+  }
   .border-destructive\/50 {
     border-color: color-mix(in srgb, hsl(var(--destructive)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {

package/dist/workspace.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import { ReactNode, Ref } from 'react';
+import { ReactNode, HTMLAttributes, Ref } from 'react';
 export { ArtifactPane, ArtifactPaneProps } from '@tangle-network/ui/primitives';
 import { FileNode, FileTreeVisibilityOptions, FileTabData } from '@tangle-network/ui/files';
 import { SessionProjectKey, ActiveSessionStatus, ActiveSessionRecord } from '@tangle-network/ui/stores';
@@ -67,6 +67,13 @@ interface WorkspaceLayoutProps {
 }
 declare function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, bottomHeader, defaultLeftOpen, defaultRightOpen, defaultBottomOpen, defaultLeftWidth, defaultRightWidth, defaultBottomHeight, minLeftWidth, maxLeftWidth, minRightWidth, maxRightWidth, minBottomHeight, maxBottomHeight, persistenceKey, resizable, theme, density, leftLabel, rightLabel, bottomLabel, className, }: WorkspaceLayoutProps): React$1.JSX.Element;
 
+type WorkspacePaneHeaderProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * The shared 56px header row for top-level workspace panes and drawers.
+ * Bottom runtime panels intentionally use their own compact header.
+ */
+declare function WorkspacePaneHeader({ className, ...props }: WorkspacePaneHeaderProps): React$1.JSX.Element;
+
 interface DirectoryPaneProps {
     root: FileNode;
     selectedPath?: string;
@@ -632,4 +639,4 @@ interface ApprovalQueueProps {
  */
 declare function ApprovalQueue({ items, className, onApprove, onReject, renderItemDetail, renderTypeBadge, renderStats, canResolve, header, emptyState, showResolved: controlledShowResolved, }: ApprovalQueueProps): React$1.JSX.Element;
 
-export { AgentWorkbench, type ApprovalConfidenceStat, type ApprovalItem, ApprovalQueue, type ApprovalQueueProps, type AuditCheck, AuditResults, type AuditResultsProps, type BannerType, type CalendarEvent, CalendarView, type CalendarViewProps, type ContextBadge, DirectoryPane, type DirectoryPaneProps, type FormAudit, RuntimePane, type RuntimePaneProps, SESSION_CREATED_EVENT, SandboxWorkbench, type SandboxWorkbenchArtifact, type SandboxWorkbenchCustomArtifact, type SandboxWorkbenchFileArtifact, type SandboxWorkbenchLayoutOptions, type SandboxWorkbenchMarkdownArtifact, type SandboxWorkbenchOpenUIArtifact, type SandboxWorkbenchProps, type SandboxWorkbenchSessionProps, SessionActivityMonitor, type SessionActivityMonitorProps, type SessionCreatedDetail, type SessionOptimisticController, SessionSidebar, type SessionSidebarBadge, type SessionSidebarFilter, type SessionSidebarItem, type SessionSidebarLink, type SessionSidebarProps, type ShellShouldRevalidateArgs, type ShellShouldRevalidateOptions, StatusBanner, type StatusBannerProps, StatusBar, type StatusBarProps, TaskBoard, type TaskBoardColumn, type TaskBoardItem, type TaskBoardProps, type TerminalLine, TerminalPanel, type TerminalProps, type UseOptimisticSessionItemsOptions, WorkspaceLayout, type WorkspaceLayoutProps, createShellShouldRevalidate, dispatchSessionCreated, shellShouldRevalidate, useOptimisticSessionItems };
+export { AgentWorkbench, type ApprovalConfidenceStat, type ApprovalItem, ApprovalQueue, type ApprovalQueueProps, type AuditCheck, AuditResults, type AuditResultsProps, type BannerType, type CalendarEvent, CalendarView, type CalendarViewProps, type ContextBadge, DirectoryPane, type DirectoryPaneProps, type FormAudit, RuntimePane, type RuntimePaneProps, SESSION_CREATED_EVENT, SandboxWorkbench, type SandboxWorkbenchArtifact, type SandboxWorkbenchCustomArtifact, type SandboxWorkbenchFileArtifact, type SandboxWorkbenchLayoutOptions, type SandboxWorkbenchMarkdownArtifact, type SandboxWorkbenchOpenUIArtifact, type SandboxWorkbenchProps, type SandboxWorkbenchSessionProps, SessionActivityMonitor, type SessionActivityMonitorProps, type SessionCreatedDetail, type SessionOptimisticController, SessionSidebar, type SessionSidebarBadge, type SessionSidebarFilter, type SessionSidebarItem, type SessionSidebarLink, type SessionSidebarProps, type ShellShouldRevalidateArgs, type ShellShouldRevalidateOptions, StatusBanner, type StatusBannerProps, StatusBar, type StatusBarProps, TaskBoard, type TaskBoardColumn, type TaskBoardItem, type TaskBoardProps, type TerminalLine, TerminalPanel, type TerminalProps, type UseOptimisticSessionItemsOptions, WorkspaceLayout, type WorkspaceLayoutProps, WorkspacePaneHeader, type WorkspacePaneHeaderProps, createShellShouldRevalidate, dispatchSessionCreated, shellShouldRevalidate, useOptimisticSessionItems };

package/dist/workspace.js

@@ -15,11 +15,12 @@ import {
   TaskBoard,
   TerminalPanel,
   WorkspaceLayout,
+  WorkspacePaneHeader,
   createShellShouldRevalidate,
   dispatchSessionCreated,
   shellShouldRevalidate,
   useOptimisticSessionItems
-} from "./chunk-RPOPLGW7.js";
+} from "./chunk-XKKV3B24.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-CZ7CSFO4.js";
 export {
@@ -39,6 +40,7 @@ export {
   TaskBoard,
   TerminalPanel,
   WorkspaceLayout,
+  WorkspacePaneHeader,
   createShellShouldRevalidate,
   dispatchSessionCreated,
   shellShouldRevalidate,

package/package.json

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