@tangle-network/sandbox-ui 0.16.3 → 0.18.0

package/dist/dashboard.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-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 { 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-gf-InrfN.js';
 
 interface SidebarUser {
     email: string;

package/dist/dashboard.js

@@ -55,7 +55,7 @@ import {
   formatContext,
   formatPrice,
   formatPricing
-} from "./chunk-27X3DWMO.js";
+} from "./chunk-N5RYCDLD.js";
 import "./chunk-7ZA5SEK3.js";
 import "./chunk-EI44GEQ5.js";
 export {

package/dist/globals.css

@@ -390,6 +390,9 @@
       max-width: 96rem;
     }
   }
+  .mx-1 {
+    margin-inline: calc(var(--spacing) * 1);
+  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -588,6 +591,9 @@
   .h-\[3px\] {
     height: 3px;
   }
+  .h-\[72\%\] {
+    height: 72%;
+  }
   .h-\[500px\] {
     height: 500px;
   }
@@ -624,6 +630,9 @@
   .min-h-\[2px\] {
     min-height: 2px;
   }
+  .min-h-\[44px\] {
+    min-height: 44px;
+  }
   .min-h-\[72px\] {
     min-height: 72px;
   }
@@ -708,6 +717,9 @@
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
@@ -717,6 +729,9 @@
   .w-\[3px\] {
     width: 3px;
   }
+  .w-\[72\%\] {
+    width: 72%;
+  }
   .w-\[260px\] {
     width: 260px;
   }
@@ -789,6 +804,9 @@
   .max-w-\[460px\] {
     max-width: 460px;
   }
+  .max-w-\[480px\] {
+    max-width: 480px;
+  }
   .max-w-md {
     max-width: var(--container-md);
   }
@@ -819,6 +837,9 @@
   .min-w-\[320px\] {
     min-width: 320px;
   }
+  .min-w-\[360px\] {
+    min-width: 360px;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -1020,6 +1041,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;
@@ -1486,6 +1514,9 @@
     --tw-gradient-to: transparent;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .object-contain {
+    object-fit: contain;
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -1576,6 +1607,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);
   }
@@ -1995,6 +2029,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2138,6 +2176,12 @@
       outline-style: none;
     }
   }
+  .placeholder\:font-normal {
+    &::placeholder {
+      --tw-font-weight: var(--font-weight-normal);
+      font-weight: var(--font-weight-normal);
+    }
+  }
   .after\:absolute {
     &::after {
       content: var(--tw-content);

package/dist/index.d.ts

@@ -4,12 +4,14 @@ export { CodeBlock as CodeBlockDisplay, Markdown, MarkdownProps } from '@tangle-
 export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, ApprovalQueueProps, AuditCheck, AuditResults, AuditResultsProps, BannerType, CalendarEvent, CalendarView, CalendarViewProps, ContextBadge, DirectoryPane, DirectoryPaneProps, FormAudit, RuntimePane, RuntimePaneProps, SandboxWorkbench, SandboxWorkbenchArtifact, SandboxWorkbenchCustomArtifact, SandboxWorkbenchFileArtifact, SandboxWorkbenchLayoutOptions, SandboxWorkbenchMarkdownArtifact, SandboxWorkbenchOpenUIArtifact, SandboxWorkbenchProps, SandboxWorkbenchSessionProps, SessionActivityMonitor, SessionActivityMonitorProps, SessionSidebar, SessionSidebarBadge, SessionSidebarFilter, SessionSidebarItem, SessionSidebarLink, SessionSidebarProps, StatusBanner, StatusBannerProps, StatusBar, StatusBarProps, TaskBoard, TaskBoardColumn, TaskBoardItem, TaskBoardProps, TerminalLine, TerminalPanel, TerminalProps, WorkspaceLayout, WorkspaceLayoutProps } from './workspace.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 { ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, DEFAULT_REASONING_LEVEL_OPTIONS, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport } 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 { 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 { 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-gf-InrfN.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,55 +86,19 @@ 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,
+  ArtifactAgentDock,
   ChatContainer,
   ChatInput,
   ChatMessage,
+  DEFAULT_REASONING_LEVEL_OPTIONS,
   MessageList,
+  ReasoningLevelPicker,
   ThinkingIndicator,
-  UserMessage
-} from "./chunk-QPAJR74X.js";
+  UserMessage,
+  createFetchTransport
+} from "./chunk-CNVE6KOM.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
@@ -186,7 +191,7 @@ import {
   formatContext,
   formatPrice,
   formatPricing
-} from "./chunk-27X3DWMO.js";
+} from "./chunk-N5RYCDLD.js";
 import {
   Avatar,
   AvatarFallback,
@@ -297,6 +302,7 @@ export {
   AgentTimeline,
   AgentWorkbench,
   ApprovalQueue,
+  ArtifactAgentDock,
   ArtifactPane,
   AuditResults,
   AuthHeader,
@@ -324,6 +330,7 @@ export {
   CommandPreview,
   CopyButton,
   CreditBalance,
+  DEFAULT_REASONING_LEVEL_OPTIONS,
   DashboardLayout,
   Dialog,
   DialogClose,
@@ -395,6 +402,7 @@ export {
   RailModeButton,
   RailSeparator,
   RealtimeSessionRegistry,
+  ReasoningLevelPicker,
   ResourceMeter,
   RichFileTree,
   RunGroup,
@@ -453,6 +461,7 @@ export {
   TabsList,
   TabsTrigger,
   TangleKnot,
+  TangleLoginButton,
   TaskBoard,
   TemplateCard,
   TerminalDisplay,
@@ -487,6 +496,7 @@ export {
   connectSession,
   copyText,
   createAuthFetcher,
+  createFetchTransport,
   disconnectSession,
   filterFileTree,
   formatBytes,

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
+};