Skip to content

connect accounts first in onboarding, then the agent #115

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hkonsti merged 1 commit into from
Oct 19, 2026
Merged

connect accounts first in onboarding, then the agent #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions packages/map/src/button-edges.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'},
Expand All @@ -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'},
Expand Down
50 changes: 20 additions & 30 deletions packages/web/src/pages/welcome-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<typeof welcomeLoader>();
Expand All @@ -55,23 +55,13 @@ export function WelcomePage({step}: {step: Step}) {
};

return (
<Frame step={step === 'agent' ? 1 : 2}>
{step === 'agent' && (
<AgentSetup
agents={agents}
providers={AGENT_PROVIDERS}
continueLabel="Continue"
onContinue={() => navigate('/welcome/connections')}
/>
)}
<Frame step={step === 'agent' ? 2 : 1}>
{step === 'connections' && (
<ConnectionsStep
agentName={agentName}
connections={connections}
configured={configured}
experiments={experiments}
finishing={finishing}
onDone={() => void finish()}
/>
)}
{step === 'email' && (
Expand All @@ -89,15 +79,23 @@ export function WelcomePage({step}: {step: Step}) {
{step === 'mcp' && (
<McpStep onContinue={(connection) => navigate(`/welcome/connections/${connection.id}`)} />
)}
{error && <p className="text-sm text-destructive">{error}</p>}
{step === 'agent' && (
<AgentSetup
agents={agents}
providers={AGENT_PROVIDERS}
continueLabel="Finish"
onContinue={() => void finish()}
/>
)}
{error && <p className="text-sm text-destructive">{error}</p>}
{(step === 'connections' || step === 'agent') && (
<button
type="button"
disabled={finishing}
className="justify-self-start text-sm text-muted-foreground underline underline-offset-4"
onClick={() => void finish()}
>
Skip setup
{step === 'connections' ? 'Skip setup' : 'Skip for now'}
</button>
)}
</Frame>
Expand Down Expand Up @@ -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 (
<>
Expand All @@ -186,12 +179,9 @@ function ConnectionsStep({
returnTo="welcome"
onConnectForm={(integrationId) => navigate(`/welcome/connections/${integrationId}`)}
/>
<div className="flex justify-between gap-2">
<Button variant="outline" nativeButton={false} render={<Link to="/welcome" />}>
Back
</Button>
<Button disabled={finishing} onClick={onDone}>
{connected.length === 0 ? 'Skip for now' : 'Finish'}
<div className="flex justify-end">
<Button nativeButton={false} render={<Link to="/welcome/agent" />}>
Continue
</Button>
</div>
</>
Expand Down
16 changes: 8 additions & 8 deletions packages/web/src/router.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -77,14 +77,8 @@ export const router = createBrowserRouter([
element: <ConnectAgentPage />,
errorElement: <RouteError />,
},
// 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: <WelcomePage step="agent" />,
errorElement: <RouteError />,
},
{
path: '/welcome/connections',
loader: welcomeLoader,
Expand Down Expand Up @@ -127,6 +121,12 @@ export const router = createBrowserRouter([
element: <WelcomeConnectionPage />,
errorElement: <RouteError />,
},
{
path: '/welcome/agent',
loader: welcomeLoader,
element: <WelcomePage step="agent" />,
errorElement: <RouteError />,
},
{
id: 'human',
loader: humanLoader,
Expand Down
Loading