@tangle-network/sandbox-ui 0.45.0 → 0.47.0

package/dist/hooks.js

@@ -25,6 +25,7 @@ import {
 import {
   usePtySession
 } from "./chunk-77WVVJA4.js";
+import "./chunk-U67V476Y.js";
 export {
   RealtimeSessionRegistry,
   createAuthFetcher,

package/dist/index.d.ts

@@ -2,15 +2,17 @@ export { ArtifactPane, ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, B
 export { L as Logo, a as LogoProps, T as TangleKnot } from './logo-CZ6moVvw.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 { 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, ChatInput, ChatInputProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, PendingFile, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from '@tangle-network/ui/chat';
 export { AgentSessionControls, AgentSessionControlsProps, AgentSessionHarnessControl, AgentSessionModelControl, AgentSessionReasoningControl, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_MODEL_POLICIES, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport, isModelCompatibleWithHarness, modelProvider, snapHarnessToModel, snapModelToHarness } from './chat.js';
 export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from '@tangle-network/ui/run';
 export { CommandPreview, DiffPreview, GlobResultsPreview, GrepResultsPreview, QuestionPreview, WebSearchPreview, WriteFilePreview } from '@tangle-network/ui/tool-previews';
 export { FileArtifactPane, FileArtifactPaneProps, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, filterFileTree } from '@tangle-network/ui/files';
-export { ActivityFeed, ActivityFeedProps, ActivityItem, Backend, BackendConfig, BackendConfigProps, BackendSelector, BackendSelectorProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, ExposedPort, GitCommitData, GitPanel, GitPanelProps, GitStatusData, HARNESS_BRAND, HARNESS_OPTIONS, HarnessBrand, HarnessLogo, HarnessLogoProps, HarnessPicker, HarnessPickerProps, INSUFFICIENT_BALANCE_CODE, InfoPanel, InfoPanelProps, InsufficientBalance, Invoice, InvoiceTable, InvoiceTableProps, McpServer, MetricAreaChart, MetricAreaChartProps, MetricChartPoint, MetricChartTone, NavItem, NetworkConfig, NetworkConfigData, NetworkConfigProps, NewSandboxCard, NewSandboxCardProps, OutOfCreditsModal, OutOfCreditsModalProps, PlanCardData, PlanCards, PlanCardsProps, PlanFeature, PortsList, PortsListProps, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailCollapseToggle, RailCollapseToggleProps, RailFlyout, RailFlyoutProps, RailModeButton, RailModeButtonProps, RailSeparator, RailSeparatorProps, RailThemeToggle, RailTooltip, RailTooltipProps, ResourceMeter, ResourceMeterProps, ResourceSnapshot, ResourceSnapshotItem, ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxCardData, SandboxCardProps, SandboxStatus, SandboxTable, SandboxTableProps, Sidebar, SidebarContent, SidebarContentProps, SidebarLayout, SidebarLayoutFlyoutItem, SidebarLayoutNavItem, SidebarLayoutProps, SidebarPanel, SidebarPanelContent, SidebarPanelContentProps, SidebarPanelHeader, SidebarPanelHeaderProps, SidebarPanelProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailFooter, SidebarRailFooterProps, SidebarRailHeader, SidebarRailHeaderProps, SidebarRailNav, SidebarRailNavProps, SidebarRailProps, SidebarUser, SnapshotList, SnapshotListProps, SystemLogsViewer, SystemLogsViewerProps, TeamRole, UsageSummary, UsageSummaryData, UsageSummaryProps, Variant, VariantList, VariantListProps, VariantOutcome, VariantStatus, canAdminSandbox, chatCapableHarnesses, parseInsufficientBalance, useSidebar } from './dashboard.js';
+export { ActivityFeed, ActivityFeedProps, ActivityItem, Backend, BackendConfig, BackendConfigProps, BackendSelector, BackendSelectorProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, GitCommitData, GitPanel, GitPanelProps, GitStatusData, HARNESS_BRAND, HARNESS_OPTIONS, HarnessBrand, HarnessLogo, HarnessLogoProps, HarnessPicker, HarnessPickerProps, INSUFFICIENT_BALANCE_CODE, InfoPanel, InfoPanelProps, InsufficientBalance, Invoice, InvoiceTable, InvoiceTableProps, McpServer, MetricAreaChart, MetricAreaChartProps, MetricChartPoint, MetricChartTone, NavItem, NetworkConfig, NetworkConfigData, NetworkConfigProps, NewSandboxCard, NewSandboxCardProps, OutOfCreditsModal, OutOfCreditsModalProps, PlanCardData, PlanCards, PlanCardsProps, PlanFeature, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailCollapseToggle, RailCollapseToggleProps, RailFlyout, RailFlyoutProps, RailModeButton, RailModeButtonProps, RailSeparator, RailSeparatorProps, RailThemeToggle, RailTooltip, RailTooltipProps, ResourceMeter, ResourceMeterProps, ResourceSnapshot, ResourceSnapshotItem, ResourceSnapshotProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxCardData, SandboxCardProps, SandboxStatus, SandboxTable, SandboxTableProps, Sidebar, SidebarContent, SidebarContentProps, SidebarLayout, SidebarLayoutFlyoutItem, SidebarLayoutNavItem, SidebarLayoutProps, SidebarPanel, SidebarPanelContent, SidebarPanelContentProps, SidebarPanelHeader, SidebarPanelHeaderProps, SidebarPanelProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailFooter, SidebarRailFooterProps, SidebarRailHeader, SidebarRailHeaderProps, SidebarRailNav, SidebarRailNavProps, SidebarRailProps, SidebarUser, SnapshotList, SnapshotListProps, SystemLogsViewer, SystemLogsViewerProps, TeamRole, UsageSummary, UsageSummaryData, UsageSummaryProps, Variant, VariantList, VariantListProps, VariantOutcome, VariantStatus, canAdminSandbox, chatCapableHarnesses, parseInsufficientBalance, useSidebar } from './dashboard.js';
 export { D as DEFAULT_FEATURED_MODEL_IDS, M as ModelInfo, a as ModelPicker, b as ModelPickerProps, c as ModelPickerVariant, d as canonicalModelId, e as dedupeModels, f as formatContext, g as formatPricing, m as modelDedupKey } from './model-picker-NOWFpRY4.js';
 export { B as BillingBalance, a as BillingDashboard, b as BillingDashboardProps, c as BillingSubscription, d as BillingUsage, P as PricingPage, e as PricingPageProps, f as PricingTier, T as TemplateCard, g as TemplateCardData, h as TemplateCardProps, U as UsageChart, i as UsageChartProps, j as UsageDataPoint, k as formatPrice } from './template-card-UhV3pmRC.js';
+export { E as ExposedPort, P as PortsList, a as PortsListProps } from './ports-list-DfG0VfPt.js';
 export { AuthHeader, AuthHeaderProps, GitHubLoginButton, GitHubLoginButtonProps, LoginLayout, LoginLayoutProps, SessionUser, UserMenu, UserMenuProps } from '@tangle-network/ui/auth';
 export { TangleLoginButton, TangleLoginButtonProps } from './auth.js';
 export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AuthUser, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, TaskStreamEvent, TerminalStreamEvent, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useLiveTime, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream } from '@tangle-network/ui/hooks';

package/dist/index.js

@@ -76,6 +76,79 @@ import {
   timeAgo,
   truncateText
 } from "./chunk-TK46XFLM.js";
+import {
+  OpenUIArtifactRenderer
+} from "./chunk-AZ3AWMTM.js";
+import {
+  AuthHeader,
+  GitHubLoginButton,
+  LoginLayout,
+  TangleLoginButton,
+  UserMenu
+} from "./chunk-IOB2PW5Z.js";
+import {
+  AgentSessionControls,
+  AgentTimeline,
+  ArtifactAgentDock,
+  ChatContainer,
+  ChatInput,
+  ChatMessage,
+  DEFAULT_REASONING_LEVEL_OPTIONS,
+  HARNESS_MODEL_POLICIES,
+  MessageList,
+  ReasoningLevelPicker,
+  ThinkingIndicator,
+  UserMessage,
+  createFetchTransport,
+  isModelCompatibleWithHarness,
+  modelProvider,
+  snapHarnessToModel,
+  snapModelToHarness
+} from "./chunk-KOUYJ6QP.js";
+import {
+  ExpandedToolDetail,
+  InlineThinkingItem,
+  InlineToolItem,
+  LiveDuration,
+  RunGroup
+} from "./chunk-JBGKGLD7.js";
+import {
+  AgentWorkbench,
+  ApprovalQueue,
+  ArtifactPane,
+  AuditResults,
+  CalendarView,
+  DirectoryPane,
+  RuntimePane,
+  SESSION_CREATED_EVENT,
+  SandboxWorkbench,
+  SessionActivityMonitor,
+  SessionSidebar,
+  StatusBanner,
+  StatusBar,
+  TaskBoard,
+  TerminalPanel,
+  WorkspaceLayout,
+  createShellShouldRevalidate,
+  dispatchSessionCreated,
+  shellShouldRevalidate,
+  useOptimisticSessionItems
+} from "./chunk-2ISY4R72.js";
+import {
+  BRAND_PRISM_THEME,
+  CodeSurface,
+  CodeView,
+  DiffView,
+  FileBreadcrumb,
+  GitStatusBadge,
+  PanelHeader,
+  PillTabs,
+  PreviewView,
+  SandboxArtifactPane,
+  buildUnifiedPatch,
+  computeDiffStats,
+  resolveLanguage
+} from "./chunk-NXUSLH7H.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -138,17 +211,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-KCWIC3SJ.js";
-import {
-  usePtySession
-} from "./chunk-77WVVJA4.js";
-import {
-  AuthHeader,
-  GitHubLoginButton,
-  LoginLayout,
-  TangleLoginButton,
-  UserMenu
-} from "./chunk-IOB2PW5Z.js";
+} from "./chunk-PZ62T5PM.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -156,7 +219,11 @@ import {
   TemplateCard,
   UsageChart,
   formatPrice
-} from "./chunk-2XNT74ZX.js";
+} from "./chunk-OMUIPJQZ.js";
+import "./chunk-VIREDUBF.js";
+import {
+  usePtySession
+} from "./chunk-77WVVJA4.js";
 import {
   Avatar,
   AvatarFallback,
@@ -244,25 +311,6 @@ import {
   useTheme,
   useToast
 } from "./chunk-4ZZUMXPX.js";
-import {
-  AgentSessionControls,
-  AgentTimeline,
-  ArtifactAgentDock,
-  ChatContainer,
-  ChatInput,
-  ChatMessage,
-  DEFAULT_REASONING_LEVEL_OPTIONS,
-  HARNESS_MODEL_POLICIES,
-  MessageList,
-  ReasoningLevelPicker,
-  ThinkingIndicator,
-  UserMessage,
-  createFetchTransport,
-  isModelCompatibleWithHarness,
-  modelProvider,
-  snapHarnessToModel,
-  snapModelToHarness
-} from "./chunk-CUUUFJF5.js";
 import {
   BackendSelector,
   HARNESS_BRAND,
@@ -270,7 +318,7 @@ import {
   HarnessLogo,
   HarnessPicker,
   chatCapableHarnesses
-} from "./chunk-KIRJZUX2.js";
+} from "./chunk-BR2LMUAE.js";
 import {
   DEFAULT_FEATURED_MODEL_IDS,
   ModelPicker,
@@ -279,40 +327,9 @@ import {
   formatContext,
   formatPricing,
   modelDedupKey
-} from "./chunk-3RNYDTQ3.js";
-import {
-  ExpandedToolDetail,
-  InlineThinkingItem,
-  InlineToolItem,
-  LiveDuration,
-  RunGroup
-} from "./chunk-JBGKGLD7.js";
-import {
-  AgentWorkbench,
-  ApprovalQueue,
-  ArtifactPane,
-  AuditResults,
-  CalendarView,
-  DirectoryPane,
-  RuntimePane,
-  SESSION_CREATED_EVENT,
-  SandboxWorkbench,
-  SessionActivityMonitor,
-  SessionSidebar,
-  StatusBanner,
-  StatusBar,
-  TaskBoard,
-  TerminalPanel,
-  WorkspaceLayout,
-  createShellShouldRevalidate,
-  dispatchSessionCreated,
-  shellShouldRevalidate,
-  useOptimisticSessionItems
-} from "./chunk-6NDOA4SB.js";
+} from "./chunk-LQHTCM56.js";
 import "./chunk-EI44GEQ5.js";
-import {
-  OpenUIArtifactRenderer
-} from "./chunk-AZ3AWMTM.js";
+import "./chunk-U67V476Y.js";
 
 // src/index.ts
 import { CodeBlock as CodeBlock2 } from "@tangle-network/ui/markdown";
@@ -344,6 +361,7 @@ export {
   Avatar,
   AvatarFallback,
   AvatarImage,
+  BRAND_PRISM_THEME,
   BackendConfig,
   BackendSelector,
   Badge,
@@ -362,6 +380,8 @@ export {
   ClusterStatusBar,
   CodeBlock,
   CodeBlock2 as CodeBlockDisplay,
+  CodeSurface,
+  CodeView,
   CommandPreview,
   CopyButton,
   CreditBalance,
@@ -379,6 +399,7 @@ export {
   DialogTitle,
   DialogTrigger,
   DiffPreview,
+  DiffView,
   DirectoryPane,
   DropZone,
   DropdownMenu,
@@ -399,11 +420,13 @@ export {
   EmptyState,
   ExpandedToolDetail,
   FileArtifactPane,
+  FileBreadcrumb,
   FilePreview,
   FileTabs,
   FileTree,
   GitHubLoginButton,
   GitPanel,
+  GitStatusBadge,
   GlobResultsPreview,
   GrepResultsPreview,
   HARNESS_BRAND,
@@ -430,8 +453,11 @@ export {
   NewSandboxCard,
   OpenUIArtifactRenderer,
   OutOfCreditsModal,
+  PanelHeader,
+  PillTabs,
   PlanCards,
   PortsList,
+  PreviewView,
   PricingPage,
   ProcessList,
   ProfileAvatar,
@@ -460,6 +486,7 @@ export {
   SIDEBAR_RAIL_LABELED_WIDTH,
   SIDEBAR_RAIL_WIDTH,
   SIDEBAR_TOTAL_WIDTH,
+  SandboxArtifactPane,
   SandboxCard,
   SandboxTable,
   SandboxWorkbench,
@@ -537,6 +564,7 @@ export {
   addMessage,
   addParts,
   badgeVariants,
+  buildUnifiedPatch,
   bumpActiveSessionActivity,
   buttonVariants,
   canAdminSandbox,
@@ -544,6 +572,7 @@ export {
   chatCapableHarnesses,
   clearChat,
   cn,
+  computeDiffStats,
   connectSession,
   copyText,
   createAuthFetcher,
@@ -579,6 +608,7 @@ export {
   partMapAtom,
   registerActiveSession,
   resetActiveSessions,
+  resolveLanguage,
   sessionAtom,
   setActiveSessionAttention,
   setActiveSessionConnection,

package/dist/integrations.d.ts

@@ -13,10 +13,7 @@ interface IntegrationConnection {
     connectorId?: string;
     status: "connected" | "pending" | "revoked" | "expired" | (string & {});
     grantedScopes?: string[];
-    account?: {
-        identity?: string;
-        displayName?: string;
-    } & Record<string, unknown>;
+    accountDisplay?: string | null;
     expiresAt?: string | null;
     createdAt?: string;
     updatedAt?: string;
@@ -57,8 +54,10 @@ interface IntegrationsPanelProps {
         connectorId: string;
     }) => void | Promise<void>;
     /**
-     * Invoked when the user manages (disconnects) a live connection via the
-     * hover-revealed affordance on a connected tile.
+     * Invoked when the user confirms disconnecting a live connection from the
+     * disconnect control on a connected tile. May return a promise; the
+     * confirmation dialog shows a loading state until it settles and surfaces a
+     * thrown error inline.
      */
     onDisconnect: (connectionId: string) => void | Promise<void>;
     /** Empty-state message when the catalog hasn't loaded any providers. */

package/dist/integrations.js

@@ -1,14 +1,25 @@
 import {
-  monogramColor,
-  normalizeProviderId,
-  providerLogoCandidates
-} from "./chunk-H7GMPMPB.js";
+  ProviderIcon,
+  normalizeProviderId
+} from "./chunk-GTJ5PSK5.js";
+import "./chunk-U67V476Y.js";
 
 // src/integrations/integrations-panel.tsx
 import * as React from "react";
-import { Card, CardContent, EmptyState } from "@tangle-network/ui/primitives";
+import {
+  Button,
+  Card,
+  CardContent,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  EmptyState
+} from "@tangle-network/ui/primitives";
 import { cn } from "@tangle-network/ui/utils";
-import { Check, Search, Settings2 } from "lucide-react";
+import { Check, Search, Unplug } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_FEATURED_IDS = [
   "gmail",
@@ -48,51 +59,7 @@ var DEFAULT_FEATURED_IDS = [
 function defaultConnectorOf(provider) {
   return provider.connectors?.[0]?.connectorId ?? provider.providerId;
 }
-function ProviderLogo({
-  provider,
-  size = 56
-}) {
-  const candidates = React.useMemo(
-    () => providerLogoCandidates({
-      id: provider.providerId,
-      iconUrl: provider.iconUrl
-    }),
-    [provider]
-  );
-  const [index, setIndex] = React.useState(0);
-  const label = (provider.displayName ?? provider.providerId).trim();
-  const initial = label.charAt(0).toUpperCase() || "?";
-  const src = candidates[index];
-  if (!src) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "flex shrink-0 items-center justify-center rounded-2xl font-semibold text-white",
-        style: {
-          width: size,
-          height: size,
-          backgroundColor: monogramColor(provider.providerId),
-          fontSize: Math.round(size * 0.42)
-        },
-        "aria-hidden": true,
-        children: initial
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "img",
-    {
-      src,
-      alt: "",
-      width: size,
-      height: size,
-      loading: "lazy",
-      className: "shrink-0 object-contain",
-      style: { width: size, height: size },
-      onError: () => setIndex((i) => i + 1)
-    }
-  );
-}
+var LOGO_SIZE = 48;
 function buildConnectionIndex(connections) {
   const index = /* @__PURE__ */ new Map();
   for (const conn of connections) {
@@ -139,6 +106,12 @@ function IntegrationsPanel({
 }) {
   const [query, setQuery] = React.useState("");
   const [sort, setSort] = React.useState(defaultSort);
+  const [disconnectTarget, setDisconnectTarget] = React.useState(null);
+  const [isDisconnecting, setIsDisconnecting] = React.useState(false);
+  const [disconnectError, setDisconnectError] = React.useState(
+    null
+  );
+  const activeDisconnect = React.useRef(0);
   const connectionIndex = React.useMemo(
     () => buildConnectionIndex(connections),
     [connections]
@@ -161,6 +134,30 @@ function IntegrationsPanel({
     });
     return sorted;
   }, [catalog, query, sort, featuredRank]);
+  const closeDisconnect = React.useCallback(() => {
+    activeDisconnect.current += 1;
+    setIsDisconnecting(false);
+    setDisconnectTarget(null);
+    setDisconnectError(null);
+  }, []);
+  const confirmDisconnect = React.useCallback(async () => {
+    if (!disconnectTarget) return;
+    const reqId = activeDisconnect.current += 1;
+    setIsDisconnecting(true);
+    setDisconnectError(null);
+    try {
+      await Promise.resolve(onDisconnect(disconnectTarget.connectionId));
+      if (activeDisconnect.current !== reqId) return;
+      setDisconnectTarget(null);
+    } catch (e) {
+      if (activeDisconnect.current !== reqId) return;
+      setDisconnectError(
+        e instanceof Error ? e.message : "Failed to disconnect."
+      );
+    } finally {
+      if (activeDisconnect.current === reqId) setIsDisconnecting(false);
+    }
+  }, [disconnectTarget, onDisconnect]);
   if (error) {
     return /* @__PURE__ */ jsx(Card, { className: cn("border-destructive/50", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-destructive", children: [
       "Failed to load integrations: ",
@@ -195,6 +192,7 @@ function IntegrationsPanel({
       }
     );
   }
+  const disconnectAccountLabel = disconnectTarget?.accountDisplay;
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2 rounded-lg border border-border bg-card px-3 py-2", children: [
@@ -259,8 +257,9 @@ function IntegrationsPanel({
           {
             "data-testid": `integration-${provider.providerId}`,
             "data-connected": "true",
+            title: live.accountDisplay ? `${name} \u2014 ${live.accountDisplay}` : name,
             className: cn(
-              "group relative flex aspect-square flex-col items-center justify-center gap-2 rounded-xl border p-3 text-center",
+              "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: [
@@ -269,16 +268,48 @@ function IntegrationsPanel({
                 "button",
                 {
                   type: "button",
-                  onClick: () => onDisconnect(live.id),
-                  "data-testid": `manage-${provider.providerId}`,
-                  "aria-label": `Manage ${name}`,
-                  title: "Manage connection",
-                  className: "absolute right-1.5 top-1.5 flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:bg-background hover:text-foreground group-hover:opacity-100",
-                  children: /* @__PURE__ */ jsx(Settings2, { className: "h-3.5 w-3.5" })
+                  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" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ProviderIcon,
+                {
+                  id: provider.providerId,
+                  iconUrl: provider.iconUrl,
+                  displayName: provider.displayName,
+                  size: LOGO_SIZE,
+                  className: "rounded-2xl"
                 }
               ),
-              /* @__PURE__ */ jsx(ProviderLogo, { provider, size: 48 }),
-              /* @__PURE__ */ jsx("span", { className: "line-clamp-2 w-full text-xs font-medium text-foreground", children: name })
+              /* @__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
+              ] })
             ]
           },
           `${provider.providerId}:${connectorId}`
@@ -297,13 +328,77 @@ function IntegrationsPanel({
             "hover:border-primary/40 hover:bg-accent/40 hover:shadow-sm focus:outline-none focus-visible:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary/20"
           ),
           children: [
-            /* @__PURE__ */ jsx(ProviderLogo, { provider, size: 56 }),
-            /* @__PURE__ */ jsx("span", { className: "line-clamp-2 w-full text-xs font-medium text-foreground", children: name })
+            /* @__PURE__ */ jsx(
+              ProviderIcon,
+              {
+                id: provider.providerId,
+                iconUrl: provider.iconUrl,
+                displayName: provider.displayName,
+                size: LOGO_SIZE,
+                className: "rounded-2xl"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "line-clamp-2 h-8 w-full text-xs font-medium leading-4 text-foreground", children: name })
           ]
         },
         `${provider.providerId}:${connectorId}`
       );
-    }) })
+    }) }),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: !!disconnectTarget,
+        onOpenChange: (open) => {
+          if (!open) closeDisconnect();
+        },
+        children: /* @__PURE__ */ jsxs(
+          DialogContent,
+          {
+            className: "max-w-sm",
+            onCloseAutoFocus: (e) => e.preventDefault(),
+            children: [
+              /* @__PURE__ */ jsxs(DialogHeader, { children: [
+                /* @__PURE__ */ jsxs(DialogTitle, { children: [
+                  "Disconnect ",
+                  disconnectTarget?.name ?? "integration",
+                  "?"
+                ] }),
+                /* @__PURE__ */ jsxs(DialogDescription, { children: [
+                  "This removes Sandbox's access to your",
+                  " ",
+                  disconnectTarget?.name ?? "this",
+                  " account",
+                  disconnectAccountLabel ? ` (${disconnectAccountLabel})` : "",
+                  ". You can reconnect anytime."
+                ] })
+              ] }),
+              disconnectError ? /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", role: "alert", children: disconnectError }) : null,
+              /* @__PURE__ */ jsxs(DialogFooter, { children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    onClick: closeDisconnect,
+                    "data-testid": "cancel-disconnect",
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "destructive",
+                    loading: isDisconnecting,
+                    onClick: confirmDisconnect,
+                    "data-testid": "confirm-disconnect",
+                    children: "Disconnect"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
   ] });
 }
 

package/dist/markdown.js

@@ -1,3 +1,5 @@
+import "./chunk-U67V476Y.js";
+
 // src/markdown/index.ts
 import {
   CodeBlock,

package/dist/openui.d.ts

@@ -1,6 +1 @@
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from '@tangle-network/ui/openui';
-import '@tangle-network/ui/run';
-import '@tangle-network/ui/files';
-import '@tangle-network/ui/utils';
-import '@tangle-network/ui/editor';
-import '@tangle-network/ui/markdown';

package/dist/openui.js

@@ -1,6 +1,7 @@
 import {
   OpenUIArtifactRenderer
 } from "./chunk-AZ3AWMTM.js";
+import "./chunk-U67V476Y.js";
 export {
   OpenUIArtifactRenderer
 };

package/dist/pages.d.ts

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