@mdxui/cockpit 6.0.1 → 7.0.6

package/dist/developer/index.d.ts

@@ -5,11 +5,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { LucideIcon } from 'lucide-react';
 import { ChartConfig } from '@mdxui/primitives/chart';
 import * as React$1 from 'react';
-import { ReactNode } from 'react';
+import React__default, { ReactNode } from 'react';
 import { ColumnDef } from '@tanstack/react-table';
-import { SettingsProps, APIKeysProps, TeamProps, BillingProps, DeveloperDashboardProps as DeveloperDashboardProps$1 } from 'mdxui';
-import * as platform_do from 'platform.do';
-import { $Context } from 'platform.do';
+import { APIKeysProps, TeamProps, BillingProps, DeveloperDashboardProps as DeveloperDashboardProps$1 } from 'mdxui';
+import { SeverityOption, MessageType, ReportIssueSeverity, ReportIssueData } from '@mdxui/widgets';
+import { UsagePeriod, BalanceUnit } from '@mdxui/admin/usage-overview';
+import { PackageManager } from '@mdxui/primitives/install-snippet';
 
 interface ActivityItem {
     /** Unique ID */
@@ -303,6 +304,7 @@ interface NavItem {
     icon?: LucideIcon;
     isActive?: boolean;
     items?: NavItem[];
+    subItemsClassName?: string;
 }
 interface NavMainProps {
     items: NavItem[];
@@ -436,30 +438,6 @@ declare function MockAuthenticationFactors(): react_jsx_runtime.JSX.Element;
  */
 declare function MockUserSessions(): react_jsx_runtime.JSX.Element;
 
-/**
- * TeamSwitcher component that uses WorkOS authentication.
- * Shows the WorkOS OrganizationSwitcher widget when authenticated with an organization,
- * or a "No Organization" placeholder when not.
- */
-declare function TeamSwitcher(): react_jsx_runtime.JSX.Element;
-
-/**
- * SettingsPage - Tabbed settings layout component
- *
- * Provides a tabbed interface for various settings sections including
- * profile, security, notifications, billing, team, api, and integrations.
- *
- * @example
- * ```tsx
- * <SettingsPage sections={['profile', 'security', 'team']}>
- *   <ProfileSettings />
- *   <SecuritySettings />
- *   <TeamSettings />
- * </SettingsPage>
- * ```
- */
-declare function SettingsPage({ sections, children }: SettingsProps): react_jsx_runtime.JSX.Element;
-
 interface UserProfileProps {
     user?: {
         name?: string;
@@ -541,6 +519,46 @@ declare function TeamManager({ workspace, allowInvite, allowRoleChange, allowRem
  */
 declare function Billing({ customer, showInvoices, showPaymentMethods, showUsage, subscription: initialSubscription, }: BillingProps): react_jsx_runtime.JSX.Element;
 
+interface OnboardingGateCallbacks {
+    onComplete: () => void;
+    onCheckout: (planName: string) => void;
+    organizationId: string;
+    user: {
+        firstName?: string | null;
+        lastName?: string | null;
+        email?: string | null;
+        profilePictureUrl?: string | null;
+    } | null;
+}
+interface OnboardingGateProps {
+    /** Rendered when org has completed onboarding */
+    children: ReactNode;
+    /** Component to render during onboarding — receives callbacks as props */
+    OnboardingComponent: React.ComponentType<OnboardingGateCallbacks>;
+}
+declare function OnboardingGate({ children, OnboardingComponent }: OnboardingGateProps): react_jsx_runtime.JSX.Element;
+
+interface PlanDisplayConfig {
+    name: string;
+    slug: string;
+    description: string;
+    price: string;
+    priceDescription: string;
+    credits: string;
+    buttonText: string;
+    buttonVariant?: 'default' | 'outline';
+}
+interface PlanFeatureConfig {
+    feature: string;
+    free: string | boolean;
+    pro: string | boolean;
+    enterprise: string | boolean;
+}
+interface PlanConfig {
+    plans: PlanDisplayConfig[];
+    features: PlanFeatureConfig[];
+}
+
 /**
  * Custom route definition for extending the dashboard with additional pages.
  * Allows consumers to add their own pages without modifying the cockpit package.
@@ -568,10 +586,8 @@ interface CustomRoute {
 }
 interface DashboardRoutes {
     overview?: boolean;
-    requests?: boolean;
+    events?: boolean;
     keys?: boolean;
-    team?: boolean;
-    billing?: boolean;
     settings?: boolean;
     webhooks?: boolean;
     database?: boolean;
@@ -615,12 +631,31 @@ interface DashboardIdentity {
     /** Whether authentication is required to view the dashboard (default: true) */
     required?: boolean;
     /** What to do when user is not authenticated */
-    onUnauthenticated?: 'redirect' | 'landing' | 'allow';
+    onUnauthenticated?: 'redirect' | 'landing' | 'allow' | 'signIn';
     /** URL to redirect to when not authenticated (used with onUnauthenticated: 'redirect') */
     unauthenticatedRedirectUrl?: string;
     /** Custom landing component to show when not authenticated (used with onUnauthenticated: 'landing') */
     landingComponent?: ReactNode;
 }
+interface ReportIssueConfig {
+    topics?: string[];
+    severityOptions?: SeverityOption[];
+    defaultTab?: MessageType;
+    defaultValues?: {
+        message?: string;
+        topic?: string;
+        severity?: ReportIssueSeverity;
+    };
+    onSubmit?: (data: ReportIssueData) => Promise<void> | void;
+    apiEndpoint?: string;
+    apiHeaders?: Record<string, string>;
+    successMessage?: string;
+    context?: Record<string, unknown>;
+}
+interface DashboardEventsConfig {
+    /** Restrict which channels appear in the events log filter. Omit to show all. */
+    availableChannels?: ('worker' | 'action' | 'webhook' | 'trace' | 'log' | 'llm' | 'cdc')[];
+}
 interface DashboardConfig {
     basePath?: string;
     branding?: DashboardBranding;
@@ -634,20 +669,30 @@ interface DashboardConfig {
     /** Identity provider configuration for authentication and user management */
     identity: DashboardIdentity;
     /**
-     * Development token for testing SDK without auth flow.
-     * Pass DO_TOKEN from server-side environment variable.
-     * Only used in development - auth tokens take priority in production.
+     * Sidebar promotional banner configuration.
+     * Pass props to show a SidebarAd, or omit/pass false to hide it.
+     */
+    sidebarAd?: SidebarAdProps | false;
+    /** Events log page configuration (e.g. restrict available channels) */
+    events?: DashboardEventsConfig | undefined;
+    /**
+     * Report Issue sidebar button configuration.
+     * Pass config object to customize, omit to show with defaults, or `false` to hide.
      */
-    devToken?: string;
-    /** Enable SDK debug logging */
-    debug?: boolean;
+    reportIssue?: ReportIssueConfig | false;
+    /** Component rendered during onboarding. If provided, OnboardingGate wraps the dashboard. */
+    onboardingComponent?: React__default.ComponentType<OnboardingGateCallbacks>;
+    /** Plan configuration for billing. Defines available plans and feature comparison. */
+    planConfig?: PlanConfig;
 }
 
 interface DashboardContextValue {
-    config: Required<Omit<DashboardConfig, 'identity' | 'devToken' | 'debug'>> & {
+    config: Required<Omit<DashboardConfig, 'identity' | 'sidebarAd' | 'events' | 'reportIssue' | 'onboardingComponent' | 'planConfig'>> & {
         identity: DashboardIdentity;
-        devToken?: string;
-        debug?: boolean;
+        sidebarAd?: SidebarAdProps | false;
+        events?: DashboardEventsConfig;
+        reportIssue?: ReportIssueConfig | false;
+        planConfig?: PlanConfig;
     };
     routes: Required<DashboardRoutes>;
     customRoutes: CustomRoute[];
@@ -664,7 +709,7 @@ declare function useCustomRoutes(): CustomRoute[];
  * ```tsx
  * <DeveloperDashboard
  *   identity={{ clientId: 'xxx' }}
- *   routes={{ webhooks: true, billing: false }}
+ *   routes={{ webhooks: true }}
  *   customRoutes={[{ path: '/analytics', label: 'Analytics', element: <Analytics /> }]}
  * />
  * ```
@@ -674,7 +719,10 @@ declare function useCustomRoutes(): CustomRoute[];
  * <DeveloperDashboard config={{ identity: { clientId: 'xxx' }, routes: {...} }} />
  * ```
  */
-type DeveloperDashboardProps = DeveloperDashboardProps$1 | {
+type DeveloperDashboardProps = (DeveloperDashboardProps$1 & {
+    onboardingComponent?: DashboardConfig['onboardingComponent'];
+    planConfig?: DashboardConfig['planConfig'];
+}) | {
     config: DashboardConfig;
 };
 /**
@@ -682,9 +730,7 @@ type DeveloperDashboardProps = DeveloperDashboardProps$1 | {
  * and renders the dashboard routes.
  *
  * Provider hierarchy (handled by AppProviders):
- * - ThemeProvider (next-themes) - Theme mode (light/dark/system)
- * - DashboardProvider - Dashboard config context
- * - SDKInitializer - Platform SDK setup
+ * - DashboardProvider - Dashboard config context + theme
  * - IdentityProvider - WorkOS AuthKit + Widgets
  * - QueryProvider - TanStack Query + Auth sync
  *
@@ -699,7 +745,7 @@ type DeveloperDashboardProps = DeveloperDashboardProps$1 | {
  * ```tsx
  * <DeveloperDashboard
  *   identity={{ clientId: 'xxx' }}
- *   routes={{ webhooks: true, billing: false }}
+ *   routes={{ webhooks: true }}
  *   customRoutes={[
  *     { path: '/analytics', label: 'Analytics', icon: 'BarChart3', element: <AnalyticsPage /> },
  *   ]}
@@ -710,452 +756,203 @@ type DeveloperDashboardProps = DeveloperDashboardProps$1 | {
  * ```tsx
  * <DeveloperDashboard
  *   identity={{ clientId: 'xxx' }}
- *   routes={{ billing: false, team: false }}
+ *   routes={{ database: false }}
  * />
  * ```
  */
 declare function DeveloperDashboard(props: DeveloperDashboardProps): react_jsx_runtime.JSX.Element;
 
-declare const mockBillingData: {
-    plan: string;
-    planPrice: number;
-    planFeatures: string[];
-    status: "active";
-    renewalDate: string;
-    totalSpend: number;
-    usageBreakdown: {
-        resource: string;
-        usage: number;
-        limit: number;
-        unit: string;
-        cost: number;
-    }[];
-    invoices: {
-        id: string;
-        invoiceNumber: string;
-        date: string;
-        amount: number;
-        status: "paid";
-    }[];
-    paymentMethod: {
-        type: "card";
-        brand: string;
-        last4: string;
-        expiryMonth: number;
-        expiryYear: number;
-    };
-    billingAlerts: {
-        enabled: boolean;
-        threshold: number;
-    };
-};
-interface WebhookEndpoint {
-    id: string;
-    url: string;
-    events: string[];
-    lastDelivery: string | null;
-    status: "active" | "disabled";
-    secret: string;
-    createdAt: string;
-    failureCount: number;
-}
+declare function SettingsAccountPage(): react_jsx_runtime.JSX.Element;
 
-type BillingData = typeof mockBillingData;
 interface BillingPageProps {
-    /** Billing data - uses mock data if not provided */
-    billingData?: BillingData;
-    /** Callback when "Manage Plan" is clicked */
-    onManagePlan?: () => Promise<void>;
-    /** Callback when "Update" payment method is clicked */
-    onUpdatePaymentMethod?: () => Promise<void>;
-    /** Callback when an invoice is downloaded */
-    onDownloadInvoice?: (invoiceId: string) => Promise<void>;
-    /** Callback when billing alerts are toggled */
-    onToggleAlerts?: (enabled: boolean) => Promise<void>;
-    /** Hide the header with sidebar trigger and breadcrumb */
-    hideHeader?: boolean;
+    /** Period for usage data fetching */
+    usagePeriod?: UsagePeriod;
+    /** Show the Credit Balance usage row */
+    showCreditBalance?: boolean;
+    /** Show the API Requests usage row */
+    showApiRequests?: boolean;
+    /** Display credit balance as dollar amounts or token counts (default: 'dollars') */
+    balanceUnit?: BalanceUnit;
     /** Additional CSS class for the container */
     className?: string;
 }
-declare function BillingPage({ billingData: initialBillingData, onManagePlan, onUpdatePaymentMethod, onDownloadInvoice, onToggleAlerts, hideHeader, className, }?: BillingPageProps): react_jsx_runtime.JSX.Element;
+declare function BillingPage({ usagePeriod, showCreditBalance, showApiRequests, balanceUnit, className, }?: BillingPageProps): react_jsx_runtime.JSX.Element;
 
-declare function DatabasePage(): react_jsx_runtime.JSX.Element;
-
-declare function IntegrationsPage(): react_jsx_runtime.JSX.Element;
-
-type ApiKeyStatus = 'active' | 'expiring' | 'never_used';
-type ApiKey = {
-    id: string;
-    name: string;
-    key: string;
-    created: string;
-    lastUsed: string | null;
-    status: ApiKeyStatus;
-};
-interface KeysPageProps {
-    /** Initial keys data - uses mock data if not provided */
-    keys?: ApiKey[];
-    /** Callback when a key is created - if not provided, uses internal mock */
-    onCreateKey?: (name: string) => Promise<{
-        id: string;
-        key: string;
-    }>;
-    /** Callback when a key is revoked - if not provided, uses internal mock */
-    onRevokeKey?: (keyId: string) => Promise<void>;
-    /** Callback when a key is renamed - if not provided, uses internal mock */
-    onRenameKey?: (keyId: string, newName: string) => Promise<void>;
-    /** Hide the header with sidebar trigger and breadcrumb */
-    hideHeader?: boolean;
+interface TeamPageProps {
+    /** Whether to use mock widgets instead of real WorkOS widgets */
+    useMockWidgets?: boolean;
     /** Additional CSS class for the container */
     className?: string;
 }
-declare function KeysPage({ keys: initialKeys, onCreateKey, onRevokeKey, onRenameKey, hideHeader, className, }?: KeysPageProps): react_jsx_runtime.JSX.Element;
-
-declare function OverviewPage(): react_jsx_runtime.JSX.Element;
+declare function SettingsUsersPage({ useMockWidgets: useMockWidgetsProp, className }?: TeamPageProps): react_jsx_runtime.JSX.Element;
 
-declare function RequestsPage(): react_jsx_runtime.JSX.Element;
+declare function DataBrowserPage(): react_jsx_runtime.JSX.Element;
 
-declare function SettingsProfilePage(): react_jsx_runtime.JSX.Element;
+declare function DatabasePage(): react_jsx_runtime.JSX.Element;
 
-declare function SettingsSecurityPage(): react_jsx_runtime.JSX.Element;
+/**
+ * Outer page component — resolves auth token before mounting the hook.
+ *
+ * Why: useLogEvents fires an immediate fetch. If that fetch gets a 401
+ * (because AuthSync hasn't set the bearer token yet), isAuthError()
+ * permanently sets polling=false. By deferring mount until the token
+ * is available, the hook never sees a pre-auth 401.
+ */
+declare function EventsLogPage(): react_jsx_runtime.JSX.Element;
 
-declare function SettingsSessionsPage(): react_jsx_runtime.JSX.Element;
+declare function IntegrationsPage(): react_jsx_runtime.JSX.Element;
 
-interface TeamPageProps {
+interface KeysPageProps {
     /** Whether to use mock widgets instead of real WorkOS widgets */
     useMockWidgets?: boolean;
-    /** Hide the header with sidebar trigger and breadcrumb */
-    hideHeader?: boolean;
     /** Additional CSS class for the container */
     className?: string;
 }
-declare function TeamPage({ useMockWidgets: useMockWidgetsProp, hideHeader, className, }?: TeamPageProps): react_jsx_runtime.JSX.Element;
-
-declare function VaultPage(): react_jsx_runtime.JSX.Element;
+declare function KeysPage({ useMockWidgets: useMockWidgetsProp, className }?: KeysPageProps): react_jsx_runtime.JSX.Element;
 
-declare function WebhooksActivityPage(): react_jsx_runtime.JSX.Element;
-
-interface WebhooksEndpointsPageProps {
-    /** Initial endpoints data - uses mock data if not provided */
-    endpoints?: WebhookEndpoint[];
-    /** Callback when an endpoint is created */
-    onCreateEndpoint?: (data: {
-        url: string;
-        events: string[];
-        enabled: boolean;
-    }) => Promise<{
-        id: string;
-        secret: string;
-    }>;
-    /** Callback when an endpoint is updated */
-    onUpdateEndpoint?: (id: string, data: {
-        url: string;
-        events: string[];
-        enabled: boolean;
-    }) => Promise<void>;
-    /** Callback when an endpoint is deleted */
-    onDeleteEndpoint?: (id: string) => Promise<void>;
-    /** Hide the header with sidebar trigger and breadcrumb */
-    hideHeader?: boolean;
-    /** Additional CSS class for the container */
-    className?: string;
-}
-declare function WebhooksEndpointsPage({ endpoints: initialEndpoints, onCreateEndpoint, onUpdateEndpoint, onDeleteEndpoint, hideHeader, className, }?: WebhooksEndpointsPageProps): react_jsx_runtime.JSX.Element;
+declare function OverviewPage(): react_jsx_runtime.JSX.Element;
 
-declare function WebhooksEventCatalogPage(): react_jsx_runtime.JSX.Element;
+declare function RequestsPage(): react_jsx_runtime.JSX.Element;
 
-declare function WebhooksLogsPage(): react_jsx_runtime.JSX.Element;
+declare function VaultPage(): react_jsx_runtime.JSX.Element;
 
-/**
- * Configuration for standalone components.
- * Lighter weight than full DashboardConfig - no auth or routing required.
- */
-interface StandaloneConfig {
-    /** Theme configuration */
-    theme?: {
-        /** Theme preset name */
-        preset?: Theme;
-        /** Color mode */
-        mode?: 'light' | 'dark' | 'system';
-        /** Custom CSS variable overrides */
-        custom?: Record<string, string>;
-    };
-    /** Base path for internal links (optional) */
-    basePath?: string;
+type ConnectionMethod = 'cli' | 'sdk-rest' | 'mcp-docs';
+type StepId = 'pick-tool' | 'pick-plan';
+interface OnboardingState {
+    currentStep: StepId;
+    connectionMethod: ConnectionMethod | null;
 }
-interface StandaloneProviderProps {
-    /** Configuration options */
-    config?: StandaloneConfig;
-    /** Children components */
-    children: ReactNode;
+interface OnboardingUser {
+    firstName?: string | null;
+    lastName?: string | null;
+    email?: string | null;
+    profilePictureUrl?: string | null;
 }
-/**
- * Lightweight provider for standalone page components.
- *
- * Use this when you want to embed individual cockpit pages
- * (APIKeys, Webhooks, Billing, etc.) in your own app shell
- * without the full DeveloperDashboard.
- *
- * Does NOT include:
- * - Authentication (you handle this)
- * - Routing (you handle this)
- * - Dashboard layout/sidebar (you provide your own)
- *
- * DOES include:
- * - Theme provider (light/dark mode)
- * - Theme preset application
- * - Custom CSS variable support
- *
- * @example
- * ```tsx
- * import { StandaloneProvider, StandaloneAPIKeys } from '@mdxui/cockpit'
- *
- * function MyApp() {
- *   return (
- *     <StandaloneProvider config={{ theme: { preset: 'stripe', mode: 'dark' } }}>
- *       <MyAppShell>
- *         <StandaloneAPIKeys
- *           onCreateKey={createKey}
- *           onRevokeKey={revokeKey}
- *         />
- *       </MyAppShell>
- *     </StandaloneProvider>
- *   )
- * }
- * ```
- */
-declare function StandaloneProvider({ config, children }: StandaloneProviderProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Props for standalone API Keys component.
- */
-interface StandaloneAPIKeysProps {
-    /** Initial API keys data (uses mock data if not provided) */
-    keys?: ApiKey[];
-    /** Callback when a new key is created */
-    onCreateKey?: (name: string) => Promise<{
-        id: string;
-        key: string;
-    }>;
-    /** Callback when a key is revoked */
-    onRevokeKey?: (keyId: string) => Promise<void>;
-    /** Callback when a key is renamed */
-    onRenameKey?: (keyId: string, newName: string) => Promise<void>;
-    /** Hide the page header/breadcrumb (default: true for standalone) */
-    hideHeader?: boolean;
-    /** Additional CSS class */
+interface ConnectionOptionConfig {
+    value: string;
+    label: string;
+}
+interface CliConfig {
+    /** Package to install via npx/bunx (e.g. "@headlessly/cli") */
+    package: string;
+    /** Package manager command (default: "npx") */
+    command?: PackageManager;
+    /** CLI commands to show after install (e.g. "headlessly login\nheadlessly use crm") */
+    commands: string;
+    /** Description shown below the commands */
+    description?: string;
+}
+interface SdkConfig {
+    /** Package to install (e.g. "@headlessly/crm") */
+    package: string;
+    /** Package manager command (default: "npm install") */
+    command?: PackageManager;
+    /** Description shown below the install snippet */
+    description?: string;
+}
+interface McpConfig {
+    /** Description text */
+    description?: string;
+    /** URL for the MCP setup docs */
+    docsUrl: string;
+    /** Label for the docs link (default: "View MCP Setup") */
+    docsLabel?: string;
+}
+interface OnboardingFlowProps {
+    /** User info for header */
+    user?: OnboardingUser;
+    /** Custom logo component for the header. Defaults to HeadlesslyLogo. */
+    logo?: ReactNode;
+    /** Connection method options (default: CLI, SDK/REST, MCP) */
+    connectionOptions?: ConnectionOptionConfig[];
+    /** CLI connection config */
+    cli?: CliConfig;
+    /** SDK/REST connection config */
+    sdk?: SdkConfig;
+    /** MCP/Editor connection config */
+    mcp?: McpConfig;
+    /** Custom content for the pricing step. Renders a placeholder if omitted. */
+    pricingContent?: ReactNode;
+    /** Step 1 heading */
+    connectHeading?: string;
+    /** Step 1 description */
+    connectDescription?: string;
+    /** Step 2 heading */
+    planHeading?: string;
+    /** Step 2 description */
+    planDescription?: string;
+    /** localStorage key for persisting state (default: "onboarding") */
+    storageKey?: string;
+    /** Initial state override (for stories) */
+    initialState?: Partial<OnboardingState>;
+    /** Custom class name */
     className?: string;
 }
-/**
- * Standalone API Keys management component.
- *
- * Use this component to embed API key management in your own app shell
- * without requiring the full DeveloperDashboard.
- *
- * @example Basic usage (uses mock data)
- * ```tsx
- * import { StandaloneProvider, StandaloneAPIKeys } from '@mdxui/cockpit'
- *
- * function MySettings() {
- *   return (
- *     <StandaloneProvider>
- *       <StandaloneAPIKeys />
- *     </StandaloneProvider>
- *   )
- * }
- * ```
- *
- * @example With real backend integration
- * ```tsx
- * <StandaloneAPIKeys
- *   keys={myKeys}
- *   onCreateKey={async (name) => {
- *     const result = await api.createKey(name)
- *     return { id: result.id, key: result.secretKey }
- *   }}
- *   onRevokeKey={async (keyId) => {
- *     await api.revokeKey(keyId)
- *   }}
- *   onRenameKey={async (keyId, newName) => {
- *     await api.renameKey(keyId, newName)
- *   }}
- * />
- * ```
- */
-declare function StandaloneAPIKeys({ keys, onCreateKey, onRevokeKey, onRenameKey, hideHeader, className, }: StandaloneAPIKeysProps): react_jsx_runtime.JSX.Element;
+declare function OnboardingFlow({ user, logo, connectionOptions, cli, sdk, mcp, pricingContent, connectHeading, connectDescription, planHeading, planDescription, storageKey, initialState, className, }: OnboardingFlowProps): react_jsx_runtime.JSX.Element;
+declare function OnboardingPage(): react_jsx_runtime.JSX.Element;
 
-/**
- * Props for standalone Webhooks component.
- */
-interface StandaloneWebhooksProps {
-    /** Initial endpoints data (uses mock data if not provided) */
+interface WebhookEndpoint {
+    id: string;
+    target_url: string;
+    events: string[];
+    active: boolean;
+    secret: string;
+    description?: string;
+    status: "Active" | "Failed";
+    deliveryCount: number;
+    failureCount: number;
+    lastDeliveredAt: string | null;
+    lastStatusCode: number | null;
+    createdAt: string;
+    updatedAt: string;
+}
+interface WebhookEvent {
+    id: string;
+    name: string;
+    description: string;
+    category: string;
+    payloadSchema: Record<string, unknown>;
+}
+
+interface WebhookActivity {
+    delivered: number;
+    failed: number;
+    pending: number;
+    successRate: number;
+    endpointsWithIssues: {
+        target_url: string;
+        failures: number;
+    }[];
+}
+interface WebhooksPageProps {
     endpoints?: WebhookEndpoint[];
-    /** Callback when an endpoint is created */
+    availableEvents?: WebhookEvent[];
+    activity?: WebhookActivity;
     onCreateEndpoint?: (data: {
-        url: string;
+        target_url: string;
         events: string[];
-        enabled: boolean;
+        active: boolean;
     }) => Promise<{
         id: string;
         secret: string;
     }>;
-    /** Callback when an endpoint is updated */
     onUpdateEndpoint?: (id: string, data: {
-        url: string;
+        target_url: string;
         events: string[];
-        enabled: boolean;
+        active: boolean;
     }) => Promise<void>;
-    /** Callback when an endpoint is deleted */
     onDeleteEndpoint?: (id: string) => Promise<void>;
-    /** Hide the page header/breadcrumb (default: true for standalone) */
-    hideHeader?: boolean;
-    /** Additional CSS class */
     className?: string;
 }
-/**
- * Standalone Webhooks management component.
- *
- * Use this component to embed webhook management in your own app shell
- * without requiring the full DeveloperDashboard.
- *
- * @example Basic usage (uses mock data)
- * ```tsx
- * import { StandaloneProvider, StandaloneWebhooks } from '@mdxui/cockpit'
- *
- * function MySettings() {
- *   return (
- *     <StandaloneProvider>
- *       <StandaloneWebhooks />
- *     </StandaloneProvider>
- *   )
- * }
- * ```
- *
- * @example With real backend integration
- * ```tsx
- * <StandaloneWebhooks
- *   endpoints={myEndpoints}
- *   onCreateEndpoint={async (data) => {
- *     const result = await api.createWebhook(data)
- *     return { id: result.id, secret: result.secret }
- *   }}
- *   onUpdateEndpoint={async (id, data) => {
- *     await api.updateWebhook(id, data)
- *   }}
- *   onDeleteEndpoint={async (id) => {
- *     await api.deleteWebhook(id)
- *   }}
- * />
- * ```
- */
-declare function StandaloneWebhooks({ endpoints, onCreateEndpoint, onUpdateEndpoint, onDeleteEndpoint, hideHeader, className, }: StandaloneWebhooksProps): react_jsx_runtime.JSX.Element;
+declare function WebhooksEndpointsPage({ endpoints: initialEndpoints, availableEvents, activity: initialActivity, onCreateEndpoint, onUpdateEndpoint, onDeleteEndpoint, className, }?: WebhooksPageProps): react_jsx_runtime.JSX.Element;
 
-/**
- * Props for standalone Billing component.
- */
-interface StandaloneBillingProps {
-    /** Billing data (uses mock data if not provided) */
-    billingData?: BillingData;
-    /** Callback when "Manage Plan" is clicked */
-    onManagePlan?: () => Promise<void>;
-    /** Callback when "Update" payment method is clicked */
-    onUpdatePaymentMethod?: () => Promise<void>;
-    /** Callback when an invoice is downloaded */
-    onDownloadInvoice?: (invoiceId: string) => Promise<void>;
-    /** Callback when billing alerts are toggled */
-    onToggleAlerts?: (enabled: boolean) => Promise<void>;
-    /** Hide the page header/breadcrumb (default: true for standalone) */
-    hideHeader?: boolean;
-    /** Additional CSS class */
+interface WebhooksEventCatalogPageProps {
+    events?: WebhookEvent[];
     className?: string;
 }
-/**
- * Standalone Billing management component.
- *
- * Use this component to embed billing management in your own app shell
- * without requiring the full DeveloperDashboard.
- *
- * @example Basic usage (uses mock data)
- * ```tsx
- * import { StandaloneProvider, StandaloneBilling } from '@mdxui/cockpit'
- *
- * function MySettings() {
- *   return (
- *     <StandaloneProvider>
- *       <StandaloneBilling />
- *     </StandaloneProvider>
- *   )
- * }
- * ```
- *
- * @example With real backend integration
- * ```tsx
- * <StandaloneBilling
- *   billingData={myBillingData}
- *   onManagePlan={async () => {
- *     const url = await createBillingPortalSession()
- *     window.location.href = url
- *   }}
- *   onDownloadInvoice={async (invoiceId) => {
- *     const url = await api.getInvoiceDownloadUrl(invoiceId)
- *     window.open(url, '_blank')
- *   }}
- * />
- * ```
- */
-declare function StandaloneBilling({ billingData, onManagePlan, onUpdatePaymentMethod, onDownloadInvoice, onToggleAlerts, hideHeader, className, }: StandaloneBillingProps): react_jsx_runtime.JSX.Element;
+declare function WebhooksEventCatalogPage({ events }: WebhooksEventCatalogPageProps): react_jsx_runtime.JSX.Element;
 
-/**
- * Props for standalone Team component.
- */
-interface StandaloneTeamProps {
-    /** Whether to use mock widgets instead of real WorkOS widgets */
-    useMockWidgets?: boolean;
-    /** Hide the page header/breadcrumb (default: true for standalone) */
-    hideHeader?: boolean;
-    /** Additional CSS class */
-    className?: string;
-}
-/**
- * Standalone Team management component.
- *
- * Use this component to embed team management in your own app shell
- * without requiring the full DeveloperDashboard.
- *
- * NOTE: This component uses WorkOS widgets for team management.
- * You need to wrap your app with IdentityProvider from @mdxui/auth
- * for the real widgets to work. Use useMockWidgets={true} for demo/testing.
- *
- * @example Basic usage (uses mock widgets)
- * ```tsx
- * import { StandaloneProvider, StandaloneTeam } from '@mdxui/cockpit'
- *
- * function MySettings() {
- *   return (
- *     <StandaloneProvider>
- *       <StandaloneTeam useMockWidgets />
- *     </StandaloneProvider>
- *   )
- * }
- * ```
- *
- * @example With WorkOS integration
- * ```tsx
- * import { IdentityProvider } from '@mdxui/auth'
- * import { StandaloneProvider, StandaloneTeam } from '@mdxui/cockpit'
- *
- * function MySettings() {
- *   return (
- *     <IdentityProvider clientId="your-client-id">
- *       <StandaloneProvider>
- *         <StandaloneTeam />
- *       </StandaloneProvider>
- *     </IdentityProvider>
- *   )
- * }
- * ```
- */
-declare function StandaloneTeam({ useMockWidgets, hideHeader, className, }: StandaloneTeamProps): react_jsx_runtime.JSX.Element;
+declare function WebhooksLogsPage(): react_jsx_runtime.JSX.Element;
 
 /**
  * Maps a Lucide icon name string to the actual icon component.
@@ -1176,8 +973,6 @@ declare const dashboardIcons: {
     readonly overview: "BarChart3";
     readonly requests: "Activity";
     readonly keys: "Key";
-    readonly team: "Users";
-    readonly billing: "CreditCard";
     readonly settings: "Settings";
     readonly webhooks: "Webhook";
     readonly database: "Database";
@@ -1185,94 +980,4 @@ declare const dashboardIcons: {
     readonly vault: "Lock";
 };
 
-/**
- * SDK instance type - the $ proxy with all platform methods
- */
-type PlatformSDK = $Context;
-/**
- * Enable or disable debug mode for SDK operations.
- * When enabled, logs auth state changes and SDK calls.
- */
-declare function setDebugMode(enabled: boolean): void;
-/**
- * Check if debug mode is enabled.
- */
-declare function isDebugMode(): boolean;
-/**
- * Set a development token for testing SDK without auth flow.
- * This is useful for local development when you have a DO_TOKEN.
- * Call this early in app initialization.
- *
- * @param token - The DO_TOKEN from environment
- */
-declare function setDevToken(token: string | null): void;
-/**
- * Get the effective token (auth token takes priority over dev token)
- */
-declare function getEffectiveToken(): string | null;
-/**
- * Get the current auth token.
- * Returns null if not authenticated.
- */
-declare function getAuthToken(): string | null;
-/**
- * Get the SDK instance.
- * Returns null if not authenticated.
- */
-declare function getSDK(): PlatformSDK | null;
-/**
- * Check if the user is authenticated (has a token).
- */
-declare function isAuthenticated(): boolean;
-/**
- * Get debug status info for troubleshooting.
- * Can be called from browser console: window.__platformDebug.status()
- */
-declare function getDebugStatus(): {
-    isAuthenticated: boolean;
-    hasDevToken: boolean;
-    hasEffectiveToken: boolean;
-    hasSDK: boolean;
-    tokenSource: string;
-    tokenLength: number;
-    tokenPreview: string | null;
-    debugMode: boolean;
-    apiBaseUrl: string;
-};
-/**
- * Test SDK connection by making a simple API call.
- * Can be called from browser console: window.__platformDebug.testConnection()
- */
-declare function testSDKConnection(): Promise<{
-    success: boolean;
-    result: platform_do.Thing[];
-    status: {
-        isAuthenticated: boolean;
-        hasDevToken: boolean;
-        hasEffectiveToken: boolean;
-        hasSDK: boolean;
-        tokenSource: string;
-        tokenLength: number;
-        tokenPreview: string | null;
-        debugMode: boolean;
-        apiBaseUrl: string;
-    };
-    error?: undefined;
-} | {
-    success: boolean;
-    error: unknown;
-    status: {
-        isAuthenticated: boolean;
-        hasDevToken: boolean;
-        hasEffectiveToken: boolean;
-        hasSDK: boolean;
-        tokenSource: string;
-        tokenLength: number;
-        tokenPreview: string | null;
-        debugMode: boolean;
-        apiBaseUrl: string;
-    };
-    result?: undefined;
-}>;
-
-export { APIKeyManager, ActivityFeed, type ActivityFeedProps, type ActivityItem, AreaChart, type AreaChartProps, BarChart, type BarChartProps, Billing, BillingPage, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, type CustomRoute, type DashboardBranding, type DashboardConfig, DashboardGrid, DashboardGridItem, type DashboardGridItemProps, type DashboardGridProps, type DashboardIdentity, DashboardLayout, type DashboardRoutes, type DashboardTheme, DataTable, type DataTableProps, DatabasePage, DeveloperDashboard, type DeveloperDashboardProps, IntegrationsPage, JsonViewer, KPICard, type KPICardProps, KeysPage, LandingPage, LineChart, type LineChartProps, MockAuthenticationFactors, MockUserProfile, MockUserSessions, MockUsersManagement, type NavItem, NavMain, NavUser, OverviewPage, RequestsPage, SettingsPage, SettingsProfilePage, SettingsSecurityPage, SettingsSessionsPage, SidebarAd, SortableHeader, StandaloneAPIKeys, type StandaloneAPIKeysProps, StandaloneBilling, type StandaloneBillingProps, type StandaloneConfig, StandaloneProvider, StandaloneTeam, type StandaloneTeamProps, StandaloneWebhooks, type StandaloneWebhooksProps, StatusBadge, StatusDot, TeamManager, TeamPage, TeamSwitcher, UserProfile, VaultDeleteDialog, VaultEmptyState, VaultInputModal, VaultItemCard, VaultList, VaultPage, WebhooksActivityPage, WebhooksEndpointsPage, WebhooksEventCatalogPage, WebhooksLogsPage, dashboardIcons, getAuthToken, getDebugStatus, getEffectiveToken, getIconByName, getSDK, isAuthenticated, isDebugMode, setDebugMode, setDevToken, testSDKConnection, useCommandPalette, useCustomRoutes, useDashboard, useRoutes };
+export { APIKeyManager, ActivityFeed, type ActivityFeedProps, type ActivityItem, AreaChart, type AreaChartProps, BarChart, type BarChartProps, Billing, BillingPage, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, type CustomRoute, type DashboardBranding, type DashboardConfig, type DashboardEventsConfig, DashboardGrid, DashboardGridItem, type DashboardGridItemProps, type DashboardGridProps, type DashboardIdentity, DashboardLayout, type DashboardRoutes, type DashboardTheme, DataBrowserPage, DataTable, type DataTableProps, DatabasePage, DeveloperDashboard, type DeveloperDashboardProps, EventsLogPage, OnboardingPage as HeadlesslyOnboardingPage, IntegrationsPage, JsonViewer, KPICard, type KPICardProps, KeysPage, LandingPage, LineChart, type LineChartProps, MockAuthenticationFactors, MockUserProfile, MockUserSessions, MockUsersManagement, type NavItem, NavMain, NavUser, OnboardingFlow, OnboardingGate, type OnboardingGateCallbacks, type OnboardingGateProps, OverviewPage, type PlanConfig, type PlanDisplayConfig, type PlanFeatureConfig, RequestsPage, SettingsAccountPage, SettingsUsersPage, SidebarAd, type SidebarAdProps, SortableHeader, StatusBadge, StatusDot, TeamManager, UserProfile, VaultDeleteDialog, VaultEmptyState, VaultInputModal, VaultItemCard, VaultList, VaultPage, WebhooksEndpointsPage, WebhooksEventCatalogPage, WebhooksLogsPage, dashboardIcons, getIconByName, useCommandPalette, useCustomRoutes, useDashboard, useRoutes };