+ setInspectorOpen(false)} />
+ ) : (
+ // oxlint-disable-next-line react/forbid-elements
+
+ )}
+
+ setOverrides((prev) => ({ ...prev, connectOpen: open }))}
+ onPickPreset={() => goToStep("add-openapi")}
+ onPickPlugin={() => goToStep("add-openapi")}
+ onPickCatalogEntry={() => goToStep("add-openapi")}
+ />
+
+ {state.accountModal !== "none" && (
+
+ setOverrides((prev) => ({ ...prev, accountModal: open ? prev.accountModal : "none" }))
+ }
+ integrationName={state.accountModal === "oauth-stuck" ? "Gmail" : "PostHog"}
+ methods={state.accountModal === "oauth-stuck" ? gmailAuthMethods : posthogAuthMethods}
+ initialStep={state.accountModal === "place" ? "place" : "validate"}
+ stuckConnecting={state.accountModal === "oauth-stuck"}
+ onAdded={() => goToStep("integrations-populated")}
+ />
+ )}
+
+ );
+}
diff --git a/packages/onboarding-demo/src/fixtures.ts b/packages/onboarding-demo/src/fixtures.ts
new file mode 100644
index 000000000..2f3875696
--- /dev/null
+++ b/packages/onboarding-demo/src/fixtures.ts
@@ -0,0 +1,240 @@
+// ---------------------------------------------------------------------------
+// Everything the reproduction renders from.
+//
+// Presets come from the REAL plugin modules, so the curated list here is the
+// same list the console shows. Connections, tools and auth methods are static
+// stand-ins for the API reads the console makes. The integrations.sh calls are
+// the genuine public endpoints — that catalog is already client-callable, which
+// is exactly why it is the obvious raw material for the rework.
+// ---------------------------------------------------------------------------
+
+import { openApiPresets, type OpenApiPreset } from "@executor-js/plugin-openapi/presets";
+import { mcpPresets, type McpPreset } from "@executor-js/plugin-mcp/presets";
+
+export type PluginKey = "openapi" | "mcp" | "graphql" | "google";
+
+export interface DemoPreset {
+ readonly id: string;
+ readonly name: string;
+ readonly summary: string;
+ readonly icon?: string;
+ readonly url?: string;
+ readonly pluginKey: PluginKey;
+ readonly pluginLabel: string;
+}
+
+const fromOpenApi = (preset: OpenApiPreset): DemoPreset => ({
+ id: preset.id,
+ name: preset.name,
+ summary: preset.summary,
+ ...(preset.icon ? { icon: preset.icon } : {}),
+ ...(preset.url ? { url: preset.url } : {}),
+ pluginKey: "openapi",
+ pluginLabel: "OpenAPI",
+});
+
+const fromMcp = (preset: McpPreset): DemoPreset => ({
+ id: preset.id,
+ name: preset.name,
+ summary: preset.summary,
+ ...(preset.icon ? { icon: preset.icon } : {}),
+ ...("url" in preset && preset.url ? { url: preset.url } : {}),
+ pluginKey: "mcp",
+ pluginLabel: "MCP",
+});
+
+/** The console's "Popular integrations" list, in the console's own order:
+ * every loaded plugin's presets, concatenated plugin by plugin. */
+export const curatedPresets: readonly DemoPreset[] = [
+ ...openApiPresets.map(fromOpenApi),
+ ...mcpPresets.map(fromMcp),
+];
+
+/** The plugin chips under "Or add manually". */
+export const integrationPlugins: readonly { readonly key: PluginKey; readonly label: string }[] = [
+ { key: "openapi", label: "OpenAPI" },
+ { key: "mcp", label: "MCP" },
+ { key: "graphql", label: "GraphQL" },
+ { key: "google", label: "Google" },
+];
+
+// ---------------------------------------------------------------------------
+// Workspace state — what a brand-new tenant has, which is nothing
+// ---------------------------------------------------------------------------
+
+export interface DemoIntegration {
+ readonly slug: string;
+ readonly name: string;
+ readonly kind: PluginKey;
+ readonly icon?: string;
+ readonly toolCount: number;
+}
+
+export const seededIntegrations: readonly DemoIntegration[] = [];
+
+/** What the workspace looks like after the user adds PostHog — the state Theo
+ * reached before hunting for the key field. */
+export const posthogIntegration: DemoIntegration = {
+ slug: "posthog",
+ name: "PostHog",
+ kind: "openapi",
+ icon: "https://integrations.sh/logo/posthog.com",
+ toolCount: 0,
+};
+
+/** The OAuth-only integration, for the step where the popup dies. */
+export const gmailIntegration: DemoIntegration = {
+ slug: "gmail",
+ name: "Gmail",
+ kind: "google",
+ icon: "https://integrations.sh/logo/google.com",
+ toolCount: 0,
+};
+
+// ---------------------------------------------------------------------------
+// Auth methods for the add-connection modal
+//
+// Shape mirrors `AuthMethod` in packages/react/src/lib/auth-placements.tsx.
+// The labels are the ones a spec-derived integration actually produces: an
+// OpenAPI spec whose security schemes carry no human name yields ordinal
+// method labels, which is the "Method 1" tab.
+// ---------------------------------------------------------------------------
+
+export interface DemoPlacement {
+ readonly carrier: "header" | "query" | "env";
+ readonly name: string;
+ readonly prefix: string;
+}
+
+export interface DemoAuthMethod {
+ readonly id: string;
+ readonly label: string;
+ readonly kind: "apikey" | "oauth" | "none";
+ readonly placements: readonly DemoPlacement[];
+}
+
+export const posthogAuthMethods: readonly DemoAuthMethod[] = [
+ {
+ id: "method-1",
+ label: "Method 1",
+ kind: "apikey",
+ placements: [{ carrier: "header", name: "Authorization", prefix: "Bearer " }],
+ },
+ {
+ id: "method-2",
+ label: "Method 2",
+ kind: "apikey",
+ placements: [{ carrier: "query", name: "personal_api_key", prefix: "" }],
+ },
+ { id: "oauth", label: "OAuth2", kind: "oauth", placements: [] },
+];
+
+export const gmailAuthMethods: readonly DemoAuthMethod[] = [
+ { id: "oauth", label: "OAuth2", kind: "oauth", placements: [] },
+];
+
+// ---------------------------------------------------------------------------
+// integrations.sh — the live public catalog
+// ---------------------------------------------------------------------------
+
+export const INTEGRATIONS_SH_ORIGIN = "https://integrations.sh";
+
+export const CONNECTABLE_KINDS = ["mcp", "openapi", "graphql"] as const;
+export type CatalogKind = (typeof CONNECTABLE_KINDS)[number];
+
+export interface CatalogEntry {
+ readonly domain: string;
+ readonly description: string;
+ readonly kinds: readonly CatalogKind[];
+}
+
+export const catalogLogoUrl = (domain: string, size: number): string =>
+ `${INTEGRATIONS_SH_ORIGIN}/logo/${domain}?sz=${size * 2}`;
+
+const isConnectableKind = (kind: string): kind is CatalogKind =>
+ (CONNECTABLE_KINDS as readonly string[]).includes(kind);
+
+/** `/api/search` — the same endpoint the console's connect dialog calls, and
+ * the same 250ms-debounced, ≥2-character contract. */
+export const searchCatalog = async (
+ query: string,
+ limit = 10,
+): Promise
+
+ {state.view === "integrations" && (
+ setOverrides((prev) => ({ ...prev, connectOpen: true }))}
+ onOpenIntegration={() => setOverrides((prev) => ({ ...prev, view: "detail" }))}
+ />
+ )}
+
+ {state.view === "add" && (
+ goToStep("integrations-empty")}
+ onComplete={() => goToStep("detail-accounts")}
+ />
+ )}
+
+ {state.view === "detail" && (
+
+ setOverrides((prev) => ({ ...prev, accountModal: "credential" }))
+ }
+ />
+ )}
+
+
+
+ {inspectorOpen ? (
+
+
+ {props.hint ? {props.hint} : null}
+
+ );
+}
+
+function PlacementLine(props: { readonly placement: DemoAuthMethod["placements"][number] }) {
+ const { placement } = props;
+ const lead =
+ placement.carrier === "header"
+ ? `${placement.name || "Authorization"}: `
+ : placement.carrier === "env"
+ ? `${placement.name || "TOKEN"}=`
+ : `?${placement.name || "api_key"}=`;
+ return (
+
+ {lead}
+ {placement.prefix ? (
+ {placement.prefix}
+ ) : null}
+ ••••••
+
+ );
+}
+
+export function AddAccountModal(props: {
+ readonly open: boolean;
+ readonly onOpenChange: (open: boolean) => void;
+ readonly integrationName: string;
+ readonly methods: readonly DemoAuthMethod[];
+ /** Start on the wizard's second step, which is the screen the owner picker
+ * and its repeated "Personal" live on. */
+ readonly initialStep?: "validate" | "place";
+ /** Reproduce the post-OAuth stuck state: the popup was closed, and the
+ * button never leaves "Connecting…". */
+ readonly stuckConnecting?: boolean;
+ readonly onAdded: () => void;
+}) {
+ const [methodId, setMethodId] = useState(props.methods[0]?.id ?? "");
+ const [wizardStep, setWizardStep] = useState<"validate" | "place">(
+ props.initialStep ?? "validate",
+ );
+ const [secret, setSecret] = useState("");
+ const [revealed, setRevealed] = useState(false);
+ const [label, setLabel] = useState("");
+ const [owner, setOwner] = useState<"user" | "org">("user");
+
+ const method = props.methods.find((candidate) => candidate.id === methodId) ?? props.methods[0];
+ const isOAuth = method?.kind === "oauth";
+ const wizardActive = !isOAuth;
+ const showValidateStep = !wizardActive || wizardStep === "validate";
+ const showPlaceStep = !wizardActive || wizardStep === "place";
+
+ const ownerWord = owner === "user" ? "Personal" : "Workspace";
+ const derivedName = `${ownerWord} ${props.integrationName}`;
+ const callableName = (label.trim() || derivedName).toLowerCase().replace(/[^a-z0-9]+/g, "_");
+
+ const singlePlacement = method?.placements[0];
+ const affix =
+ singlePlacement && singlePlacement.carrier === "header"
+ ? `${singlePlacement.name}: ${singlePlacement.prefix}`
+ : null;
+
+ return (
+
+ );
+}
diff --git a/packages/onboarding-demo/src/screens/add-openapi-page.tsx b/packages/onboarding-demo/src/screens/add-openapi-page.tsx
new file mode 100644
index 000000000..9c52e5bdd
--- /dev/null
+++ b/packages/onboarding-demo/src/screens/add-openapi-page.tsx
@@ -0,0 +1,261 @@
+// Reproduction of packages/plugins/openapi/src/react/AddOpenApiIntegration.tsx
+// in its post-analyze state, plus the AuthMethodListEditor block from
+// packages/react/src/components/auth-method-list-editor.tsx.
+//
+// The locked "Method 1" panel is reproduced exactly: LockIcon, muted fill,
+// `cursor-not-allowed select-none`, and a masked `Authorization: Bearer ••••••`
+// placement line. It is a read-only echo of the spec's declared auth scheme —
+// it takes no input — but it is the only credential-shaped thing on the page,
+// and it appears at the moment the user has just copied an API key.
+
+import { useState } from "react";
+import { LockIcon, XIcon, ChevronDownIcon } from "lucide-react";
+import { Button } from "@executor-js/react/components/button";
+import { Input } from "@executor-js/react/components/input";
+import { Label } from "@executor-js/react/components/label";
+import { CardStack, CardStackContent } from "@executor-js/react/components/card-stack";
+import type { DemoPreset } from "../fixtures";
+
+function PlacementLine(props: {
+ readonly carrier: "header" | "query";
+ readonly name: string;
+ readonly prefix: string;
+}) {
+ const lead = props.carrier === "header" ? `${props.name}: ` : `?${props.name}=`;
+ return (
+
+ {lead}
+ {props.prefix ? {props.prefix} : null}
+ ••••••
+
+ );
+}
+
+function FieldLabel(props: { readonly children: React.ReactNode }) {
+ return (
+
+ );
+}
+
+export function AddOpenApiPage(props: {
+ readonly preset: DemoPreset | null;
+ readonly onCancel: () => void;
+ readonly onComplete: () => void;
+}) {
+ const [adding, setAdding] = useState(false);
+ const [overridesOpen, setOverridesOpen] = useState(false);
+ const [healthCheckOpen, setHealthCheckOpen] = useState(false);
+ const name = props.preset?.name ?? "API";
+ const slug = props.preset?.id ?? "api";
+
+ return (
+
+
+ );
+}
diff --git a/packages/onboarding-demo/src/screens/connect-dialog.tsx b/packages/onboarding-demo/src/screens/connect-dialog.tsx
new file mode 100644
index 000000000..ba3788a62
--- /dev/null
+++ b/packages/onboarding-demo/src/screens/connect-dialog.tsx
@@ -0,0 +1,279 @@
+// Reproduction of the ConnectDialog in packages/react/src/pages/integrations.tsx.
+//
+// Faithful to the parts that shape the experience: one input that silently
+// switches between URL-detect and preset-filter, plugin chips above the list,
+// a fixed 16rem scroll window over ~30 curated presets in plugin order, and
+// the integrations.sh long tail that only appears once you have typed two
+// characters. Picking anything leaves the dialog for a full-page form.
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "@executor-js/react/components/button";
+import { Input } from "@executor-js/react/components/input";
+import { Badge } from "@executor-js/react/components/badge";
+import { Skeleton } from "@executor-js/react/components/skeleton";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@executor-js/react/components/dialog";
+import {
+ CardStack,
+ CardStackContent,
+ CardStackEntry,
+ CardStackEntryActions,
+ CardStackEntryContent,
+ CardStackEntryDescription,
+ CardStackEntryTitle,
+} from "@executor-js/react/components/card-stack";
+import {
+ catalogLogoUrl,
+ curatedPresets,
+ integrationPlugins,
+ searchCatalog,
+ type CatalogEntry,
+ type DemoPreset,
+ type PluginKey,
+} from "../fixtures";
+
+const CATALOG_KIND_LABEL: Record
+
+
+
+
+
+ {/* SpecOverridesEditor — collapsed */}
+
+ {/* oxlint-disable-next-line react/forbid-elements */}
+
+ {overridesOpen && (
+
+
+ {/* AuthMethodListEditor */}
+
+
+
+ {/* AddOpenApiHealthCheckSection */}
+
+ {/* oxlint-disable-next-line react/forbid-elements */}
+
+ {healthCheckOpen && (
+
+
+ {/* FloatActions */}
+
+
+
+
+
+
+ {/* Details — OpenApiIntegrationDetailsFields */}
+ Add OpenAPI integration
+
+ {props.preset?.icon ? (
+ 
+ ) : (
+
+ )}
+
+
+
+ {name}
+1.0.0 · 214 operations · 31 tags
+
+
+
+ Integration ID
+
+
+
+ Display name
+
+
+
+ Description
+
+
+
+ Base URL override (optional)
+
+
+ + Overrides the spec's servers; leave empty to choose the server (and + variables) per tool call. +
+
+ OpenAPI spec
+
+
+
+ []
+
+ )}
+
+
+
+ + Authentication +
+ +
+
+
+
+
+
+
+
+
+
+
+ + API key +
+
+
+
+
+ + Pulled from spec. Remove to override. +
+
+
+
+
+
+
+
+ + OAuth +
+
+
+
+ Authorize
+
+ https://us.posthog.com/oauth/authorize
+
+
+
+ Token
+
+ https://us.posthog.com/oauth/token
+
+
+ + Pulled from spec. Remove to override. +
++ Every method here is registered with the integration. Connect an account from the + integration page after adding. +
+
+ Operation
+
+
+ )}
+
+
+
+
+
+ setTab(value === "tools" ? "tools" : "accounts")}
+ className="min-h-0 flex-1 gap-0 overflow-hidden"
+ >
+
+
+
+
+
+
+
+ );
+}
diff --git a/packages/onboarding-demo/src/screens/integrations-page.tsx b/packages/onboarding-demo/src/screens/integrations-page.tsx
new file mode 100644
index 000000000..f99bc2d75
--- /dev/null
+++ b/packages/onboarding-demo/src/screens/integrations-page.tsx
@@ -0,0 +1,142 @@
+// Reproduction of packages/react/src/pages/integrations.tsx — the screen that
+// follows CLI setup. The "Connect an agent" card sits above the fold; finding
+// an integration is a dialog behind one button in the header.
+
+import { PlusIcon } from "lucide-react";
+import { Button } from "@executor-js/react/components/button";
+import { PageContainer, PageHeader } from "@executor-js/react/components/page";
+import {
+ CardStack,
+ CardStackContent,
+ CardStackEntry,
+ CardStackEntryActions,
+ CardStackEntryContent,
+ CardStackEntryDescription,
+ CardStackEntryTitle,
+ CardStackHeader,
+} from "@executor-js/react/components/card-stack";
+import { Badge } from "@executor-js/react/components/badge";
+import { Tabs, TabsList, TabsTrigger } from "@executor-js/react/components/tabs";
+import type { DemoIntegration } from "../fixtures";
+
+function McpInstallCard() {
+ return (
+
+
+
+
+
+ + {props.integration.name} +
+ + {props.integration.toolCount} tools + +
+
+
+
+
+
+
+ Accounts
+ Tools
+
+
+
+
+
+
+
+
+
+ + Connections +
+
+
+ No connections yet
++ Add a connection to make this integration's tools available. +
+ +
+
+
+
+ No tools yet
+
+
+
+
+ No tools yet
++ Add a connection to unlock this integration's tools. +
+ +
+ Connect an agent
+
+ Paste this into Claude Code, Cursor, or any MCP client, and your agent gets every tool
+ you connect here.
+
+
+
+
+
+ npx add-mcp http://localhost:3123/mcp --transport http --name executor
+
+ Advanced ⌄
+
+ Work with your agent
+ Cursor
+ Claude
+ OpenCode
+ and more
+
+
+
+
+
+
+ {props.integrations.length === 0 ? (
+
+
+ ) : (
+
+
+ No integrations yet
++ Connect an integration to start curating tools. +
+ +
+
+
+ {props.integrations.map((integration) => (
+
+ {/* oxlint-disable-next-line react/forbid-elements */}
+
+
+ ))}
+
+
+
+ )}
+
+
+
+
+ {props.children}
+
+
+ );
+}
diff --git a/packages/onboarding-demo/src/step-state.ts b/packages/onboarding-demo/src/step-state.ts
new file mode 100644
index 000000000..f7f639cfc
--- /dev/null
+++ b/packages/onboarding-demo/src/step-state.ts
@@ -0,0 +1,45 @@
+// Which screens carry which workspace state. Jumping straight to a late step
+// has to bring that step's state with it, or the screen is not the one the
+// step is about.
+
+import type { StepId } from "./flow";
+import { gmailIntegration, posthogIntegration, type DemoIntegration } from "./fixtures";
+
+export type AccountModal = "none" | "credential" | "place" | "oauth-stuck";
+export type ScreenView = "integrations" | "add" | "detail";
+
+export interface StepState {
+ readonly integrations: readonly DemoIntegration[];
+ readonly connectOpen: boolean;
+ readonly accountModal: AccountModal;
+ readonly view: ScreenView;
+}
+
+const EMPTY: StepState = {
+ integrations: [],
+ connectOpen: false,
+ accountModal: "none",
+ view: "integrations",
+};
+
+const WITH_POSTHOG: StepState = {
+ integrations: [posthogIntegration],
+ connectOpen: false,
+ accountModal: "none",
+ view: "detail",
+};
+
+export const stepState: Readonly