The @executor-js/react package provides a suite of shared React components designed for managing tools, integrations, and authentication flows. These components utilize Tailwind CSS 4 for styling and Effect Atoms for reactive state management. The library focuses on high-density technical information, featuring advanced schema exploration, syntax-highlighted code blocks, and robust OAuth management.
The design system is built on Tailwind CSS 4, using a grayscale, registry-grade minimal aesthetic packages/react/src/styles/globals.css52-55 It leverages the Geist font family for UI and prose, and Geist Mono for code, IDs, and labels packages/react/src/styles/globals.css11-15
The system uses CSS variables for theme tokens, supporting both light and dark modes via @media (prefers-color-scheme: dark) packages/react/src/styles/globals.css96-98
#ffffff) with near-neutral gray ramps and hairline borders packages/react/src/styles/globals.css60-75#0a0a0a) with depth created by one-step-lighter surfaces rather than shadows packages/react/src/styles/globals.css98-113The CSS includes specific overrides for the Desktop Host (Electron) to handle macOS traffic light positioning. It defines a draggable title bar region (-webkit-app-region: drag) that allows the main content area to behave like a native window title bar while carving out interactive controls using no-drag packages/react/src/styles/globals.css170-207
Sources: packages/react/src/styles/globals.css1-207
Executor uses Shiki for high-performance syntax highlighting with support for dual-theme light-dark() colors. This ensures that SSR-rendered markup carries both palettes, preventing "theme flash" during hydration packages/react/src/lib/shiki.ts114-122
The CodeBlock component provides a standard container for snippets with language detection and copy-to-clipboard functionality packages/react/src/components/code-block.tsx85-119
json, xml, or yaml based on content hints or starting characters packages/react/src/components/code-block.tsx20-27ensureLang to keep the initial bundle small packages/react/src/lib/shiki.ts174-188Used primarily for TypeScript type definitions, this component allows users to click on type references (e.g., a named interface) to expand them inline packages/react/src/components/expandable-code-block.tsx120-127
applyExpansions replaces reference names with their bodies, tracking ancestors to prevent infinite loops packages/react/src/components/expandable-code-block.tsx135-176formatTypeScript utility to expand single-line types into readable multi-line structures packages/react/src/components/expandable-code-block.tsx23-64Sources: packages/react/src/components/code-block.tsx1-178 packages/react/src/components/expandable-code-block.tsx1-185 packages/react/src/lib/shiki.ts1-208
The ToolTree renders the hierarchical tool catalog. It partitions tools into AccountGroup sections based on the connection and owner (Workspace vs. Personal) packages/react/src/components/tool-tree.tsx58-67
EffectivePolicy. User-authored policies show a filled dot, while plugin defaults show a hollow ring packages/react/src/components/tool-tree.tsx119-134ToolDetail provides a tabbed interface (Schema, TypeScript, Run) for inspecting a specific tool packages/react/src/components/tool-detail.tsx186-190
$ref resolution and unwraps single-variant oneOf/anyOf unions to show concrete shapes packages/react/src/components/schema-explorer.tsx55-77ToolRunPanel, allowing users to execute tools directly from the console packages/react/src/components/tool-detail.tsx188-190The following diagram illustrates how tool data flows from the SDK types into the UI components.
Tool Data to UI Mapping
Sources: packages/react/src/components/tool-tree.tsx75-134 packages/react/src/components/tool-detail.tsx160-195 packages/react/src/components/schema-explorer.tsx55-147
A reusable form for registering owner-scoped OAuth applications. It handles both manual entry (Client ID/Secret) and Dynamic Client Registration (DCR) packages/react/src/components/oauth-client-form.tsx31-41
OAuthClientFormPrefill to seed endpoints and scopes from integration templates packages/react/src/components/oauth-client-form.tsx43-68canSubmitOAuthClientForm ensures required fields are present based on the grant type (e.g., client_credentials requires a secret, while authorization_code might not if the client is public) packages/react/src/components/oauth-client-form.tsx92-106Executor implements a robust cross-window communication pattern for OAuth flows using openOAuthPopup.
OAuth Popup Communication Flow
The openOAuthPopup function uses three fallback mechanisms to ensure the result is captured:
window.opener being severed by COOP policies packages/react/src/api/oauth-popup.ts117-133Sources: packages/react/src/api/oauth-popup.ts26-176 packages/react/src/components/oauth-client-form.tsx30-138
The frontend interacts with the backend via the ExecutorApiClient, which is built using Effect's AtomHttpApi packages/react/src/api/client.tsx118-120
authorization header and the executor-org header based on the active organization context packages/react/src/api/client.tsx121-133notifyLocalAuthRequired packages/react/src/api/client.tsx46-58VITE_PUBLIC_OTLP_TRACES_URL is configured, the client attaches W3C traceparent headers to all requests, enabling distributed tracing from the browser to the database packages/react/src/api/client.tsx97-112Refresh this wiki