@tangle-network/sandbox-ui 0.16.3 → 0.17.0

package/dist/auth.d.ts

@@ -1 +1,30 @@
 export { AuthHeader, AuthHeaderProps, GitHubLoginButton, GitHubLoginButtonProps, LoginLayout, LoginLayoutProps, SessionUser, UserMenu, UserMenuProps } from '@tangle-network/ui/auth';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps } from '@tangle-network/ui/primitives';
+
+interface TangleLoginButtonProps extends Omit<ButtonProps, "onClick"> {
+    /**
+     * Consumer-app endpoint that starts the cross-site SSO flow. The
+     * consumer's server is expected to redirect this request to the
+     * platform's `/cross-site/authorize` URL (built via
+     * `PlatformAuthClient.authorizeUrl` from
+     * `@tangle-network/agent-runtime/platform`). Defaults to
+     * `/auth/tangle`.
+     */
+    authUrl?: string;
+    /** Product variant for styling. */
+    variant?: "sandbox" | "default" | "outline";
+}
+/**
+ * "Login with Tangle" button — kicks off the cross-site SSO bridge.
+ * Server-side, the consumer app should:
+ *   1. Generate a `state` for CSRF.
+ *   2. Persist `state` in a session cookie or signed JWT.
+ *   3. 302-redirect to `PlatformAuthClient.authorizeUrl({ state, redirectUri })`.
+ *
+ * This component itself only triggers the redirect to `authUrl`; the
+ * server owns the platform URL construction.
+ */
+declare function TangleLoginButton({ authUrl, variant, className, children, ...props }: TangleLoginButtonProps): react_jsx_runtime.JSX.Element;
+
+export { TangleLoginButton, type TangleLoginButtonProps };

package/dist/auth.js

@@ -2,11 +2,13 @@ import {
   AuthHeader,
   GitHubLoginButton,
   LoginLayout,
+  TangleLoginButton,
   UserMenu
-} from "./chunk-NJNME4J4.js";
+} from "./chunk-IOB2PW5Z.js";
 export {
   AuthHeader,
   GitHubLoginButton,
   LoginLayout,
+  TangleLoginButton,
   UserMenu
 };

package/dist/chunk-IOB2PW5Z.js

@@ -0,0 +1,55 @@
+// src/auth/index.ts
+import {
+  AuthHeader,
+  GitHubLoginButton,
+  LoginLayout,
+  UserMenu
+} from "@tangle-network/ui/auth";
+
+// src/auth/tangle-login-button.tsx
+import { Button } from "@tangle-network/ui/primitives";
+import { cn } from "@tangle-network/ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TangleMark({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M4 5h16v3.2h-6.4V19h-3.2V8.2H4V5z" })
+    }
+  );
+}
+function TangleLoginButton({
+  authUrl = "/auth/tangle",
+  variant = "default",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant,
+      className: cn("gap-2", className),
+      onClick: () => {
+        window.location.href = authUrl;
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(TangleMark, { className: "h-5 w-5" }),
+        children ?? "Sign in with Tangle"
+      ]
+    }
+  );
+}
+
+export {
+  TangleLoginButton,
+  AuthHeader,
+  GitHubLoginButton,
+  LoginLayout,
+  UserMenu
+};

package/dist/globals.css

@@ -1020,6 +1020,13 @@
   .gap-px {
     gap: 1px;
   }
+  .space-y-0 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-0\.5 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1576,6 +1583,9 @@
   .py-5 {
     padding-block: calc(var(--spacing) * 5);
   }
+  .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export { FileArtifactPane, FileArtifactPaneProps, FileNode, FilePreview, FilePre
 export { Backend, BackendConfig, BackendConfigProps, BackendSelector, BackendSelectorProps, BackendStatusData, ClusterStatusBar, ClusterStatusBarProps, ClusterStatusItem, CreditBalance, CreditBalanceProps, DashboardLayout, DashboardLayoutProps, DashboardProfile, DashboardSnapshotInfo, DashboardUser, ExposedPort, GitCommitData, GitPanel, GitPanelProps, GitStatusData, HARNESS_OPTIONS, HarnessPicker, HarnessPickerProps, HarnessType, InfoPanel, InfoPanelProps, Invoice, InvoiceTable, InvoiceTableProps, McpServer, NavItem, NetworkConfig, NetworkConfigData, NetworkConfigProps, NewSandboxCard, NewSandboxCardProps, PlanCardData, PlanCards, PlanCardsProps, PlanFeature, PortsList, PortsListProps, ProcessInfo, ProcessList, ProcessListProps, ProductVariant, ProfileAvatar, ProfileAvatarProps, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, PromoBanner, PromoBannerProps, RailButton, RailButtonProps, RailModeButton, RailModeButtonProps, RailSeparator, RailSeparatorProps, ResourceMeter, ResourceMeterProps, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxCardData, SandboxCardProps, SandboxStatus, SandboxTable, SandboxTableProps, Sidebar, SidebarContent, SidebarContentProps, 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, useSidebar } from './dashboard.js';
 export { B as BillingBalance, a as BillingDashboard, b as BillingDashboardProps, c as BillingSubscription, d as BillingUsage, M as ModelInfo, e as ModelPicker, f as ModelPickerProps, g as ModelPickerVariant, P as PricingPage, h as PricingPageProps, i as PricingTier, T as TemplateCard, j as TemplateCardData, k as TemplateCardProps, U as UsageChart, l as UsageChartProps, m as UsageDataPoint, n as canonicalModelId, o as formatContext, p as formatPrice, q as formatPricing } from './template-card-Dufxl4hV.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';
 export { SandboxMetrics, SidecarMetricsPayload, UsePtySessionOptions, UsePtySessionReturn, UseSandboxMetricsOptions, UseSandboxMetricsResult, useCreateSession, useDeleteSession, usePtySession, useRenameSession, useSandboxMetrics, useSessions } from './hooks.js';
 export { SessionInfo, SidecarAuth, UseSessionStreamOptions, UseSessionStreamResult, UseSidecarAuthOptions, useSessionStream, useSidecarAuth } from './sdk-hooks.js';

package/dist/index.js

@@ -1,3 +1,43 @@
+import {
+  activeSessionsAtom,
+  addMessage,
+  addParts,
+  bumpActiveSessionActivity,
+  clearChat,
+  connectSession,
+  disconnectSession,
+  getActiveSession,
+  getAllActiveSessions,
+  getAllProjectActivity,
+  getSessionsByActivity,
+  getSessionsForNavbar,
+  getSessionsForProject,
+  getTotalRunningSessionCount,
+  hasBackgroundRunningSessions,
+  isStreamingAtom,
+  messagesAtom,
+  partMapAtom,
+  registerActiveSession,
+  resetActiveSessions,
+  sessionAtom,
+  setActiveSessionAttention,
+  setActiveSessionConnection,
+  setActiveSessionError,
+  setActiveSessionRunning,
+  setForegroundActiveSession,
+  unregisterActiveSession,
+  updateActiveSessionMeta,
+  updatePart,
+  useActiveSession,
+  useActiveSessions,
+  useActiveSessionsState,
+  useHasBackgroundRunningSessions,
+  useNavbarSessions,
+  useProjectActivity,
+  useProjectSessions,
+  useSessionsByActivity,
+  useTotalRunningSessions
+} from "./chunk-WID73FPH.js";
 import "./chunk-2BUPSB7O.js";
 import {
   TOOL_CATEGORY_ICONS,
@@ -16,8 +56,9 @@ import {
   AuthHeader,
   GitHubLoginButton,
   LoginLayout,
+  TangleLoginButton,
   UserMenu
-} from "./chunk-NJNME4J4.js";
+} from "./chunk-IOB2PW5Z.js";
 import {
   RealtimeSessionRegistry,
   createAuthFetcher,
@@ -45,46 +86,6 @@ import {
   useSessionStream,
   useSidecarAuth
 } from "./chunk-CMY7W45U.js";
-import {
-  activeSessionsAtom,
-  addMessage,
-  addParts,
-  bumpActiveSessionActivity,
-  clearChat,
-  connectSession,
-  disconnectSession,
-  getActiveSession,
-  getAllActiveSessions,
-  getAllProjectActivity,
-  getSessionsByActivity,
-  getSessionsForNavbar,
-  getSessionsForProject,
-  getTotalRunningSessionCount,
-  hasBackgroundRunningSessions,
-  isStreamingAtom,
-  messagesAtom,
-  partMapAtom,
-  registerActiveSession,
-  resetActiveSessions,
-  sessionAtom,
-  setActiveSessionAttention,
-  setActiveSessionConnection,
-  setActiveSessionError,
-  setActiveSessionRunning,
-  setForegroundActiveSession,
-  unregisterActiveSession,
-  updateActiveSessionMeta,
-  updatePart,
-  useActiveSession,
-  useActiveSessions,
-  useActiveSessionsState,
-  useHasBackgroundRunningSessions,
-  useNavbarSessions,
-  useProjectActivity,
-  useProjectSessions,
-  useSessionsByActivity,
-  useTotalRunningSessions
-} from "./chunk-WID73FPH.js";
 import {
   AgentTimeline,
   ChatContainer,
@@ -453,6 +454,7 @@ export {
   TabsList,
   TabsTrigger,
   TangleKnot,
+  TangleLoginButton,
   TaskBoard,
   TemplateCard,
   TerminalDisplay,

package/dist/integrations.d.ts

@@ -0,0 +1,114 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Shapes for the integrations primitives. Mirrors the platform's
+ * `/v1/integrations/*` response shape so consumers can pipe payloads
+ * straight through. Defined here (rather than imported from
+ * `@tangle-network/agent-runtime/platform`) so the UI package stays
+ * leaf-level — no dependency on the server-side client.
+ */
+interface IntegrationConnection {
+    id: string;
+    providerId: string;
+    connectorId: string;
+    status: "connected" | "pending" | "revoked" | "expired" | (string & {});
+    grantedScopes?: string[];
+    account?: {
+        identity?: string;
+        displayName?: string;
+    } & Record<string, unknown>;
+    expiresAt?: string | null;
+    createdAt?: string;
+    updatedAt?: string;
+}
+interface IntegrationConnector {
+    connectorId: string;
+    displayName?: string;
+    description?: string;
+    scopes?: string[];
+}
+interface IntegrationProvider {
+    providerId: string;
+    displayName?: string;
+    description?: string;
+    iconUrl?: string;
+    connectors?: IntegrationConnector[];
+}
+interface IntegrationHealth {
+    connectionId: string;
+    status: "ok" | "degraded" | "failing" | "unknown" | (string & {});
+    checkedAt?: string;
+    message?: string;
+}
+
+interface IntegrationsPanelProps {
+    catalog: IntegrationProvider[];
+    connections: IntegrationConnection[];
+    healthByConnectionId?: Record<string, IntegrationHealth>;
+    isLoading?: boolean;
+    error?: Error | null;
+    /**
+     * Invoked when the user clicks "Connect" on a catalog tile. The
+     * consumer should call its data hook's `connect(...)` action.
+     */
+    onConnect: (input: {
+        providerId: string;
+        connectorId: string;
+    }) => void | Promise<void>;
+    /** Invoked when the user clicks "Disconnect" on a live connection. */
+    onDisconnect: (connectionId: string) => void | Promise<void>;
+    /** Empty-state message when the catalog hasn't loaded any providers. */
+    emptyCatalogLabel?: string;
+    className?: string;
+}
+declare function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoading, error, onConnect, onDisconnect, emptyCatalogLabel, className, }: IntegrationsPanelProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Endpoint contract expected on the consumer app's server (which
+ * wraps `PlatformHubClient` from `@tangle-network/agent-runtime/platform`):
+ *
+ *   GET    {base}/catalog
+ *     → { catalog: { providers: IntegrationProvider[] } }
+ *   GET    {base}/connections
+ *     → { connections: IntegrationConnection[] }
+ *   GET    {base}/healthchecks         (optional)
+ *     → { healthchecks: IntegrationHealth[] }
+ *   POST   {base}/auth/start
+ *     body { providerId, connectorId, returnUrl, requestedScopes? }
+ *     → { authorizationUrl: string }
+ *   DELETE {base}/connections/{connectionId}
+ *     → { connection: IntegrationConnection }
+ */
+interface UseIntegrationsOptions {
+    /** Base URL where the consumer mounted the integrations endpoints. */
+    apiBaseUrl: string;
+    /** Custom fetch (tests / non-browser runtimes). */
+    fetchImpl?: typeof fetch;
+    /** Whether the initial load happens automatically on mount. */
+    autoLoad?: boolean;
+}
+interface UseIntegrationsResult {
+    catalog: IntegrationProvider[];
+    connections: IntegrationConnection[];
+    healthByConnectionId: Record<string, IntegrationHealth>;
+    isLoading: boolean;
+    error: Error | null;
+    refresh: () => Promise<void>;
+    /** Kick off OAuth — navigates the window on success. */
+    connect: (input: ConnectInput) => Promise<void>;
+    /** Revoke a connection by id; refreshes the connections list. */
+    disconnect: (connectionId: string) => Promise<void>;
+}
+interface ConnectInput {
+    providerId: string;
+    connectorId: string;
+    /**
+     * URL the platform redirects the user back to after OAuth. Must be
+     * allow-listed on the platform.
+     */
+    returnUrl: string;
+    requestedScopes?: string[];
+}
+declare function useIntegrations({ apiBaseUrl, fetchImpl, autoLoad, }: UseIntegrationsOptions): UseIntegrationsResult;
+
+export { type ConnectInput, type IntegrationConnection, type IntegrationConnector, type IntegrationHealth, type IntegrationProvider, IntegrationsPanel, type IntegrationsPanelProps, type UseIntegrationsOptions, type UseIntegrationsResult, useIntegrations };

package/dist/integrations.js

@@ -0,0 +1,245 @@
+// src/integrations/integrations-panel.tsx
+import * as React from "react";
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  EmptyState
+} from "@tangle-network/ui/primitives";
+import { cn } from "@tangle-network/ui/utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function statusVariant(status) {
+  if (status === "connected" || status === "ok") return "default";
+  if (status === "pending") return "secondary";
+  if (status === "revoked" || status === "expired" || status === "failing")
+    return "destructive";
+  return "outline";
+}
+function defaultConnectorOf(provider) {
+  return provider.connectors?.[0]?.connectorId ?? provider.providerId;
+}
+function buildConnectionIndex(connections) {
+  const index = /* @__PURE__ */ new Map();
+  for (const conn of connections) {
+    if (conn.status === "revoked") continue;
+    index.set(`${conn.providerId}:${conn.connectorId}`, conn);
+  }
+  return index;
+}
+function IntegrationsPanel({
+  catalog,
+  connections,
+  healthByConnectionId,
+  isLoading,
+  error,
+  onConnect,
+  onDisconnect,
+  emptyCatalogLabel = "No integrations available yet.",
+  className
+}) {
+  const connectionIndex = React.useMemo(
+    () => buildConnectionIndex(connections),
+    [connections]
+  );
+  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: ",
+      error.message
+    ] }) }) });
+  }
+  if (isLoading && catalog.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: cn("grid gap-3 sm:grid-cols-2 lg:grid-cols-3", className), children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsxs(Card, { className: "animate-pulse", children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx("div", { className: "h-5 w-32 rounded bg-muted" }) }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", { className: "h-4 w-full rounded bg-muted" }) })
+    ] }, i)) });
+  }
+  if (catalog.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "No integrations",
+        description: emptyCatalogLabel,
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-3 sm:grid-cols-2 lg:grid-cols-3", className), children: catalog.map((provider) => {
+    const connectorId = defaultConnectorOf(provider);
+    const live = connectionIndex.get(`${provider.providerId}:${connectorId}`);
+    const health = live ? healthByConnectionId?.[live.id] : void 0;
+    const headline = provider.displayName ?? provider.providerId.replace(/[-_]/g, " ");
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        "data-testid": `integration-${provider.providerId}`,
+        children: [
+          /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-2 space-y-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold capitalize text-foreground", children: headline }),
+                live ? /* @__PURE__ */ jsx(Badge, { variant: statusVariant(live.status), className: "text-xs", children: live.status }) : null
+              ] }),
+              provider.description ? /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-xs text-muted-foreground", children: provider.description }) : null
+            ] }),
+            health ? /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: statusVariant(health.status),
+                className: "text-xs uppercase",
+                children: health.status
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx(CardContent, { className: "flex items-center justify-between gap-2", children: live ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: live.account?.displayName ?? live.account?.identity ?? "Connected" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                variant: "outline",
+                onClick: () => onDisconnect(live.id),
+                "data-testid": `disconnect-${provider.providerId}`,
+                children: "Disconnect"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              className: "ml-auto",
+              onClick: () => onConnect({ providerId: provider.providerId, connectorId }),
+              "data-testid": `connect-${provider.providerId}`,
+              children: "Connect"
+            }
+          ) })
+        ]
+      },
+      `${provider.providerId}:${connectorId}`
+    );
+  }) });
+}
+
+// src/integrations/use-integrations.ts
+import * as React2 from "react";
+function unwrap(json) {
+  if (json && typeof json === "object" && "data" in json && json.data !== void 0) {
+    return json.data;
+  }
+  return json;
+}
+function useIntegrations({
+  apiBaseUrl,
+  fetchImpl,
+  autoLoad = true
+}) {
+  const fetcher = fetchImpl ?? (typeof fetch === "function" ? fetch : null);
+  if (!fetcher) {
+    throw new Error("useIntegrations: fetch is not available in this environment");
+  }
+  const base = apiBaseUrl.replace(/\/+$/, "");
+  const [catalog, setCatalog] = React2.useState([]);
+  const [connections, setConnections] = React2.useState([]);
+  const [healthByConnectionId, setHealthByConnectionId] = React2.useState({});
+  const [isLoading, setIsLoading] = React2.useState(autoLoad);
+  const [error, setError] = React2.useState(null);
+  const refresh = React2.useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const [catalogRes, connectionsRes] = await Promise.all([
+        fetcher(`${base}/catalog`, { credentials: "include" }),
+        fetcher(`${base}/connections`, { credentials: "include" })
+      ]);
+      if (!catalogRes.ok) {
+        throw new Error(`Failed to load integration catalog (${catalogRes.status})`);
+      }
+      if (!connectionsRes.ok) {
+        throw new Error(
+          `Failed to load integration connections (${connectionsRes.status})`
+        );
+      }
+      const catalogJson = unwrap(await catalogRes.json());
+      const providers = catalogJson?.catalog?.providers ?? catalogJson?.providers ?? [];
+      setCatalog(providers);
+      const connectionsJson = unwrap(
+        await connectionsRes.json()
+      );
+      setConnections(connectionsJson?.connections ?? []);
+      try {
+        const healthRes = await fetcher(`${base}/healthchecks`, {
+          credentials: "include"
+        });
+        if (healthRes.ok) {
+          const healthJson = unwrap(
+            await healthRes.json()
+          );
+          const map = {};
+          for (const h of healthJson?.healthchecks ?? []) {
+            map[h.connectionId] = h;
+          }
+          setHealthByConnectionId(map);
+        }
+      } catch {
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [base, fetcher]);
+  React2.useEffect(() => {
+    if (autoLoad) {
+      void refresh();
+    }
+  }, [autoLoad, refresh]);
+  const connect = React2.useCallback(
+    async (input) => {
+      const res = await fetcher(`${base}/auth/start`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(input)
+      });
+      if (!res.ok) {
+        const text = await res.text().catch(() => "");
+        throw new Error(`Failed to start OAuth (${res.status}): ${text}`);
+      }
+      const json = unwrap(await res.json());
+      if (!json?.authorizationUrl) {
+        throw new Error("Platform did not return an authorizationUrl");
+      }
+      window.location.href = json.authorizationUrl;
+    },
+    [base, fetcher]
+  );
+  const disconnect = React2.useCallback(
+    async (connectionId) => {
+      const res = await fetcher(
+        `${base}/connections/${encodeURIComponent(connectionId)}`,
+        { method: "DELETE", credentials: "include" }
+      );
+      if (!res.ok) {
+        const text = await res.text().catch(() => "");
+        throw new Error(`Failed to revoke connection (${res.status}): ${text}`);
+      }
+      await refresh();
+    },
+    [base, fetcher, refresh]
+  );
+  return {
+    catalog,
+    connections,
+    healthByConnectionId,
+    isLoading,
+    error,
+    refresh,
+    connect,
+    disconnect
+  };
+}
+export {
+  IntegrationsPanel,
+  useIntegrations
+};

package/dist/openui.d.ts

@@ -2,7 +2,6 @@ export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifact
 import '@tangle-network/ui/chat';
 import '@tangle-network/ui/run';
 import '@tangle-network/ui/files';
-import '@tangle-network/ui/auth';
 import '@tangle-network/ui/utils';
 import '@tangle-network/ui/editor';
 import '@tangle-network/ui/markdown';

package/dist/styles.css

@@ -1020,6 +1020,13 @@
   .gap-px {
     gap: 1px;
   }
+  .space-y-0 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-0\.5 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1576,6 +1583,9 @@
   .py-5 {
     padding-block: calc(var(--spacing) * 5);
   }
+  .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.16.3",
+  "version": "0.17.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -62,6 +62,10 @@
       "import": "./dist/auth.js",
       "types": "./dist/auth.d.ts"
     },
+    "./integrations": {
+      "import": "./dist/integrations.js",
+      "types": "./dist/integrations.d.ts"
+    },
     "./pages": {
       "import": "./dist/pages.js",
       "types": "./dist/pages.d.ts"

package/dist/chunk-NJNME4J4.js

@@ -1,14 +0,0 @@
-// src/auth/index.ts
-import {
-  AuthHeader,
-  GitHubLoginButton,
-  LoginLayout,
-  UserMenu
-} from "@tangle-network/ui/auth";
-
-export {
-  AuthHeader,
-  GitHubLoginButton,
-  LoginLayout,
-  UserMenu
-};