diff --git a/packages/map/src/button-edges.ts b/packages/map/src/button-edges.ts index 8ffa9029..a99653e9 100644 --- a/packages/map/src/button-edges.ts +++ b/packages/map/src/button-edges.ts @@ -4,10 +4,9 @@ // left out. export const BUTTON_EDGES: ReadonlyArray<{from: string; to: string; label: string}> = [ {from: '/login', to: '/connections', label: 'Sign in'}, - {from: '/login', to: '/welcome', label: 'Sign in, new organization'}, + {from: '/login', to: '/welcome/connections', label: 'Sign in, new organization'}, {from: '/agent/login', to: '/agent', label: 'Sign in'}, - {from: '/welcome', to: '/welcome/connections', label: 'Continue'}, {from: '/welcome/connections', to: '/welcome/connections/email', label: 'Add a mailbox'}, {from: '/welcome/connections', to: '/welcome/connections/postgres', label: 'Add PostgreSQL'}, {from: '/welcome/connections', to: '/welcome/connections/mysql', label: 'Add MySQL'}, @@ -17,12 +16,14 @@ export const BUTTON_EDGES: ReadonlyArray<{from: string; to: string; label: strin to: '/welcome/connections/:id', label: 'Sign in to Granola, Notion or Linear', }, - {from: '/welcome/connections', to: '/connections', label: 'Finish'}, + {from: '/welcome/connections', to: '/welcome/agent', label: 'Continue'}, + {from: '/welcome/connections', to: '/connections', label: 'Skip setup'}, {from: '/welcome/connections/email', to: '/welcome/connections/:id', label: 'Connect'}, {from: '/welcome/connections/postgres', to: '/welcome/connections/:id', label: 'Connect'}, {from: '/welcome/connections/mysql', to: '/welcome/connections/:id', label: 'Connect'}, {from: '/welcome/connections/mcp', to: '/welcome/connections/:id', label: 'Connect'}, {from: '/welcome/connections/:id', to: '/welcome/connections', label: 'Confirm'}, + {from: '/welcome/agent', to: '/connections', label: 'Finish'}, {from: '/connections/new', to: '/connections/new/email', label: 'Add a mailbox'}, {from: '/connections/new', to: '/connections/new/postgres', label: 'Add PostgreSQL'}, diff --git a/packages/web/src/pages/welcome-page.tsx b/packages/web/src/pages/welcome-page.tsx index 1bb59112..e728f0a4 100644 --- a/packages/web/src/pages/welcome-page.tsx +++ b/packages/web/src/pages/welcome-page.tsx @@ -28,13 +28,13 @@ import {describeFetchError} from '@/lib/loader-utils'; import type {AgentLogin, Connection} from '@/lib/types'; import type {welcomeConnectionLoader, welcomeLoader} from '@/loaders'; -// Step one is the agent; the rest are step two: the catalog, the mailbox, bank, database and MCP -// server forms, and (on its own page, `WelcomeConnectionPage`) a new connection's permissions. -type Step = 'agent' | 'connections' | 'email' | 'plaid' | 'mcp' | DatabaseDialect; +// Step one is the catalog, the mailbox, bank, database and MCP server forms, and (on its own page, +// `WelcomeConnectionPage`) a new connection's permissions; step two is the agent. +type Step = 'connections' | 'email' | 'plaid' | 'mcp' | DatabaseDialect | 'agent'; -// The welcome flow, before the app: step one connects the person's agent, in the way that agent -// takes (an MCP client adds the server and signs in; another is handed a login), step two their -// services, each connection's permissions confirmed as it is made. Done, or skipped, it is not +// The welcome flow, before the app: step one connects the person's services, each connection's +// permissions confirmed as it is made, step two their agent, in the way that agent takes (an MCP +// client adds the server and signs in; another is handed a login). Done, or skipped, it is not // shown again. export function WelcomePage({step}: {step: Step}) { const {agents, connections, configured, experiments} = useLoaderData(); @@ -55,23 +55,13 @@ export function WelcomePage({step}: {step: Step}) { }; return ( - - {step === 'agent' && ( - navigate('/welcome/connections')} - /> - )} + {step === 'connections' && ( void finish()} /> )} {step === 'email' && ( @@ -89,15 +79,23 @@ export function WelcomePage({step}: {step: Step}) { {step === 'mcp' && ( navigate(`/welcome/connections/${connection.id}`)} /> )} - {error &&

{error}

} {step === 'agent' && ( + void finish()} + /> + )} + {error &&

{error}

} + {(step === 'connections' || step === 'agent') && ( )} @@ -158,19 +156,14 @@ function ConnectionsStep({ connections, configured, experiments, - finishing, - onDone, }: { agentName: string; connections: Connection[]; configured: Configured; experiments: Experiment[]; - finishing: boolean; - onDone: () => void; }) { const navigate = useNavigate(); const [params] = useSearchParams(); - const connected = connections.filter((connection) => connection.integrationId !== 'info'); return ( <> @@ -186,12 +179,9 @@ function ConnectionsStep({ returnTo="welcome" onConnectForm={(integrationId) => navigate(`/welcome/connections/${integrationId}`)} /> -
- -
diff --git a/packages/web/src/router.tsx b/packages/web/src/router.tsx index 09ea2377..7c2efc1b 100644 --- a/packages/web/src/router.tsx +++ b/packages/web/src/router.tsx @@ -50,7 +50,7 @@ import {WelcomeConnectionPage, WelcomePage} from '@/pages/welcome-page'; async function humanLoader() { const me = unwrapLoaderResult(await getMe()); if (!me.onboarded) { - throw redirect('/welcome'); + throw redirect('/welcome/connections'); } return me; } @@ -77,14 +77,8 @@ export const router = createBrowserRouter([ element: , errorElement: , }, - // The welcome flow: the person's agent, then their connections, before the app itself. A + // The welcome flow: the person's connections, then their agent, before the app itself. A // connection made in it gets a page of its own, for its permissions. - { - path: '/welcome', - loader: welcomeLoader, - element: , - errorElement: , - }, { path: '/welcome/connections', loader: welcomeLoader, @@ -127,6 +121,12 @@ export const router = createBrowserRouter([ element: , errorElement: , }, + { + path: '/welcome/agent', + loader: welcomeLoader, + element: , + errorElement: , + }, { id: 'human', loader: humanLoader,