@mochabug/adapt-react

React component for Adapt.

npm install @mochabug/adapt-react

Requires React 17, 18, or 19.

Quickstart

import { AdaptAutomation } from '@mochabug/adapt-react';

<AdaptAutomation automationId="auto-123" style={{ height: 600 }} />

With authentication:

<AdaptAutomation automationId="auto-123" authToken="your-token" style={{ height: 600 }} />

With proof-of-work challenge:

<AdaptAutomation automationId="auto-123" requiresChallenge style={{ height: 600 }} />

SSR (Next.js)

Keep auth token on server:

// app/page.tsx (Server Component)
import { startSession } from '@mochabug/adapt-core';

export default async function Page() {
  const authToken = await getAuthTokenFromBackend();
  const { token } = await startSession({ id: 'auto-123' }, authToken);
  return <AutomationClient sessionToken={token} />;
}

// components/AutomationClient.tsx (Client Component)
'use client';
import { AdaptAutomation } from '@mochabug/adapt-react';

export function AutomationClient({ sessionToken }: { sessionToken: string }) {
  return <AdaptAutomation automationId="auto-123" sessionToken={sessionToken} style={{ height: 600 }} />;
}

Session inheritance

// direct
<AdaptAutomation automationId="auto-123" inheritToken="token-from-parent" />

// from URL hash: example.com#mb_session=xxx
<AdaptAutomation automationId="auto-123" inheritFrom={{ hash: 'mb_session' }} />

Fork display

// side-by-side (default)
<AdaptAutomation automationId="auto-123" forkDisplay={{ mode: 'side-by-side', split: 60 }} />

// dialog
<AdaptAutomation automationId="auto-123" forkDisplay={{ mode: 'dialog' }} />

Callbacks

<AdaptAutomation
  automationId="auto-123"
  onSession={(status, fork) => console.log(status, fork)}
  onOutput={(output) => console.log(output)}
  onForkActive={(active) => console.log(active)}
/>

2. AdaptCap

Standalone proof-of-work challenge widget. Use when you manage the automation client yourself.

import { AdaptCap, createConnectClient } from '@mochabug/adapt-react/cap';

function ChallengeWidget() {
  const client = useMemo(() => createConnectClient({ id: 'YOUR_ID' }), []);

  return (
    <AdaptCap
      automationId="YOUR_ID"
      client={client}
      onSolve={(token, expires) => {
        console.log('Solved:', token, expires);
      }}
      onError={(error) => console.error(error)}
    />
  );
}

Props

| Prop | Type | |------|------| | automationId | string (required) | | client | AutomationClient (required) | | workerCount | number | | i18n | CapWidgetI18n | | darkMode | boolean | | onSolve | (token: string, expires: Date) => void | | onError | (error: Error) => void | | className | string | | style | CSSProperties |

Headless (no UI)

Use the lower-level API to create and redeem challenges yourself:

import { createChallenge, redeemChallenge, createConnectClient } from '@mochabug/adapt-react/cap';

const client = createConnectClient({ id: 'YOUR_ID' });
const challenge = await createChallenge(client);
// ... solve with Cap.js or your own solver ...
const redeemed = await redeemChallenge(client, solutions);

Styling

Three ways to theme, from simplest to most powerful:

1. theme prop (recommended)

Pass an AdaptTheme object for semantic theming. Derives 30+ CSS variables from a few tokens.

import { AdaptAutomation, type AdaptTheme } from '@mochabug/adapt-react';

const theme: AdaptTheme = {
  mode: 'dark',
  primary: '#6366f1',
  background: '#0f172a',
  surface: '#1e293b',
  text: '#f1f5f9',
  border: '#334155',
  font: '"Inter", sans-serif',
};

<AdaptAutomation automationId="auto-123" theme={theme} style={{ height: 600 }} />

AdaptTheme tokens:

| Token | Effect | |-------|--------| | mode | 'light' or 'dark' — toggles dark mode class | | primary | Accent color — derives separator, drop target, spinner colors | | background | Root bg, active tab bg, status card bg | | surface | Panel content bg, tab bar bg | | text | Active tab text, status text, cap widget text | | textSecondary | Inactive tab text | | border | Tab separators, status card border, cap border | | font | All panel UI text + cap widget | | vars | Record<string, string> — direct variable overrides (key = name without --mb-adapt- prefix) |

The vars escape hatch lets you override any variable:

<AdaptAutomation
  automationId="auto-123"
  theme={{
    primary: '#6366f1',
    vars: {
      'floating-shadow': 'none',
      'floating-border': '2px solid #6366f1',
      'cap-border-radius': '0px',
    },
  }}
/>

2. CSS custom properties

Set --mb-adapt-* variables on .mb-adapt or any ancestor. No Shadow DOM — standard CSS inheritance works.

/* adapt-theme.css */
.mb-adapt {
  --mb-adapt-fork-bg: #ffffff;
  --mb-adapt-fork-tab-bg: #f5f5f5;
  --mb-adapt-fork-tab-color: #1a1a1a;
  --mb-adapt-fork-separator: #e0e0e0;
}

.mb-adapt--dark {
  --mb-adapt-fork-bg: #1e1e1e;
  --mb-adapt-fork-tab-bg: #2a2a2a;
  --mb-adapt-fork-tab-color: #e0e0e0;
  --mb-adapt-fork-separator: #3a3a3a;
}

import './adapt-theme.css';

3. Direct CSS on internal classes

No Shadow DOM — all internal elements use plain CSS classes. Target them directly for effects that CSS variables can't express: animations, pseudo-elements, transitions, media queries.

Animated gradient toolbar (liquid glass):

/* adapt-theme.css */
@keyframes toolbar-glow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Light mode — warm aurora */
.mb-adapt .mb-group-header {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.08) 0%,
    rgba(168, 85, 247, 0.08) 25%,
    rgba(236, 72, 153, 0.06) 50%,
    rgba(99, 102, 241, 0.08) 100%
  ) !important;
  background-size: 300% 300%;
  animation: toolbar-glow 8s ease infinite;
}

/* Dark mode — deep neon */
.mb-adapt--dark .mb-group-header {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.15) 0%,
    rgba(168, 85, 247, 0.12) 25%,
    rgba(236, 72, 153, 0.10) 50%,
    rgba(99, 102, 241, 0.15) 100%
  ) !important;
  background-size: 300% 300%;
  animation: toolbar-glow 8s ease infinite;
}

Key classes you can target:

| Class | Element | |-------|---------| | .mb-group-header | Tab toolbar | | .mb-tab | Individual tab | | .mb-tab[data-active="true"] | Active tab | | .mb-group-content | Panel content area | | .mb-floating-overlay | Floating panel container | | .mb-layout-separator | Resize handle between panels | | .mb-drag-ghost | Tab drag preview | | .mb-adapt__status-card | Error/stopped status card | | .mb-adapt__status-icon | Status card icon | | .mb-adapt-minimized-tab | Minimized panel tab | | .mb-drop-overlay | Drop target highlight |

All three approaches compose — use theme for colors, CSS variables for fine-tuning, and direct class targeting for animations.

Tailwind

Use className on the host element, and CSS variables via Tailwind's arbitrary property syntax:

<AdaptAutomation
  automationId="auto-123"
  className="h-[600px] rounded-lg"
  classNames={{ iframe: 'rounded-lg shadow-xl' }}
/>

Or set variables in your Tailwind global CSS:

/* globals.css */
.mb-adapt {
  --mb-adapt-fork-bg: theme('colors.white');
  --mb-adapt-fork-separator: theme('colors.gray.200');
  --mb-adapt-font: theme('fontFamily.sans');
}

General

| Variable | Light default | Dark default | Description | |---|---|---|---| | --mb-adapt-bg | transparent | | Root & group backgrounds | | --mb-adapt-font | system-ui, -apple-system, sans-serif | | All panel UI text | | --mb-adapt-button-hover-bg | rgba(128,128,128,0.2) | rgba(128,128,128,0.3) | Close/popout/action button hover | | --mb-adapt-separator-active | rgba(59,130,246,0.5) | rgba(99,130,246,0.6) | Resize handle hover/active | | --mb-adapt-border-radius | 8px | | Iframe border radius |

Toolbar and tabs

| Variable | Light default | Dark default | Description | |---|---|---|---| | --mb-adapt-fork-bg | #ffffff | #1e1e1e | Panel content background | | --mb-adapt-fork-tab-bg | #f3f3f3 | #252526 | Toolbar / inactive tab bg | | --mb-adapt-fork-tab-active-bg | #ffffff | #1e1e1e | Active tab background | | --mb-adapt-fork-tab-color | rgb(51,51,51) | #ffffff | Active tab text | | --mb-adapt-fork-tab-inactive-color | rgba(51,51,51,0.7) | #969696 | Inactive tab text | | --mb-adapt-fork-separator | rgba(128,128,128,0.35) | rgb(68,68,68) | Tab/panel borders | | --mb-adapt-tab-radius | 0 | | Tab border-radius (use 999px for pill shape) | | --mb-adapt-tab-shadow | none | | Tab box-shadow | | --mb-adapt-tab-active-shadow | none | | Active tab box-shadow | | --mb-adapt-tab-gap | 0px | | Tab margin (spacing between tabs) | | --mb-adapt-tab-padding | 0 14px | | Tab padding | | --mb-adapt-tab-font-size | 13px | | Tab label font size | | --mb-adapt-toolbar-height | 40px | | Toolbar / tab bar height | | --mb-adapt-toolbar-padding | 0 | | Toolbar inner padding (standard CSS shorthand) | | --mb-adapt-tab-min-width | 100px | | Tab minimum width | | --mb-adapt-tab-spacing | 6px | | Gap between tab label and action buttons |

Floating panels (elevation)

| Variable | Light default | Dark default | Description | |---|---|---|---| | --mb-adapt-floating-shadow | 0 25px 50px -12px rgba(0,0,0,0.25), 0 12px 24px -8px rgba(0,0,0,0.15) | … rgba(0,0,0,0.5), … rgba(0,0,0,0.3) | Overlay box-shadow | | --mb-adapt-floating-border | none | 1px solid rgba(255,255,255,0.06) | Overlay border | | --mb-adapt-floating-backdrop | none | | Overlay backdrop-filter | | --mb-adapt-floating-radius | 8px | | Overlay border-radius | | --mb-adapt-status-card-shadow | 0 4px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04) | … rgba(0,0,0,0.25), … rgba(0,0,0,0.15) | Status card box-shadow | | --mb-adapt-drag-ghost-shadow | 0 4px 12px rgba(0,0,0,0.15) | 0 4px 12px rgba(0,0,0,0.35) | Drag ghost box-shadow |

Drop targets

| Variable | Light default | Dark default | |---|---|---| | --mb-adapt-drop-header-bg | rgba(99,102,241,0.18) | rgba(129,140,248,0.22) | | --mb-adapt-drop-center-bg | rgba(99,102,241,0.12) | rgba(129,140,248,0.15) | | --mb-adapt-drop-split-bg | rgba(99,102,241,0.14) | rgba(129,140,248,0.18) | | --mb-adapt-drop-border | rgba(99,102,241,0.55) | rgba(129,140,248,0.6) |

Status cards

| Variable | Light default | Dark default | |---|---|---| | --mb-adapt-status-card-bg | #ffffff | #1e293b | | --mb-adapt-status-card-border | #e5e7eb | #334155 | | --mb-adapt-status-icon-bg | #fef2f2 | #351c1c | | --mb-adapt-status-text | #374151 | #e2e8f0 |

Cap widget

| Variable | Light default | Dark default | |---|---|---| | --mb-adapt-cap-background | #ffffff | #1e293b | | --mb-adapt-cap-border-color | #e2e8f0 | #334155 | | --mb-adapt-cap-border-radius | 16px | | | --mb-adapt-cap-height | 72px | | | --mb-adapt-cap-width | 380px | | | --mb-adapt-cap-padding | 20px 28px | | | --mb-adapt-cap-gap | 20px | | | --mb-adapt-cap-color | #1e293b | #f1f5f9 | | --mb-adapt-cap-checkbox-size | 36px | | | --mb-adapt-cap-checkbox-border | 2px solid #cbd5e1 | 2px solid #475569 | | --mb-adapt-cap-checkbox-radius | 10px | | | --mb-adapt-cap-checkbox-background | #f8fafc | #0f172a | | --mb-adapt-cap-spinner-color | #6366f1 | #818cf8 | | --mb-adapt-cap-spinner-bg | #e2e8f0 | #334155 | | --mb-adapt-cap-spinner-thickness | 3px | | | --mb-adapt-cap-font | inherit | |

Z-index / stacking

| Variable | Default | Description | |---|---|---| | --mb-adapt-z-base | 0 | Base z-index offset — added to all internal z-index values |

Set --mb-adapt-z-base to shift all internal z-index values. Useful when embedding inside modals or drawers that have their own stacking context. Example: --mb-adapt-z-base: 10000 lifts all layers by 10000.

Internal stacking order from low to high: separators (1), resize handles (10), minimized tabs (100), floating panels (100000+), status/cap (200000), confirm dialog (300000), drop targets (999998), drag ghost (999999). All values are offset by --mb-adapt-z-base.

Props

| Prop | Type | |------|------| | automationId | string (required) | | sessionToken | string | | authToken | string | | transmitter | string | | signals | { [key: string]: SignalValue } | | challengeToken | string | | requiresChallenge | boolean | | capWidgetOptions | { workerCount?: number; i18n?: CapWidgetI18n } | | inheritToken | string | | inheritFrom | { hash: string } \| { param: string } | | forkDisplay | { mode: 'side-by-side', split?: number } \| { mode: 'dialog' } | | darkMode | boolean | | autoResizing | boolean | | allowFloating | boolean — hide pop-out buttons and block user-initiated floating (default true) | | allowDocking | boolean — hide dock buttons and block user-initiated docking (default true) | | allowDialogDocking | boolean — allow tab splits inside floating dialog overlays (default true) | | floatingAutoResize | boolean — floating overlays auto-resize from iframe content (default false) | | confirmOnClose | boolean — show confirmation dialog before leaving page (default false) | | persist | boolean \| PersistOptions | | text | StatusText | | theme | AdaptTheme | | onSession | (status, fork?) => void | | onOutput | (output) => void | | onForkActive | (active) => void | | classNames | { root?: string; iframe?: string; statusMessage?: string; statusCard?: string } | | styles | Partial<CSSStyleDeclaration> | | className | string | | style | CSSProperties |

License

ISC (c) mochabug AB