@shipfox/client-integrations 13.0.0 → 14.0.1

package/src/pages/jira-callback-page.test.tsx

@@ -0,0 +1,250 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest';
+import {ApiError} from '@shipfox/client-api';
+import {fireEvent, screen, waitFor} from '@testing-library/react';
+import {StrictMode} from 'react';
+import {JIRA_INSTALL_WORKSPACE_KEY} from '#jira-callback.js';
+import {resetJiraCallbackState} from '#jira-callback-state.js';
+import {INTEGRATIONS_TEST_WID, renderIntegrationsPage, testWorkspace} from '#test/render.js';
+import {JiraCallbackPage} from './jira-callback-page.js';
+
+const {completeCallbackMock, completeSiteMock} = vi.hoisted(() => ({
+  completeCallbackMock: vi.fn(),
+  completeSiteMock: vi.fn(),
+}));
+
+vi.mock('@shipfox/client-auth', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@shipfox/client-auth')>();
+  return {
+    ...actual,
+    useRefreshAuth: () => () => Promise.resolve({accessToken: 'test-token'}),
+  };
+});
+
+vi.mock('#hooks/api/integrations.js', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('#hooks/api/integrations.js')>();
+  return {
+    ...actual,
+    useCompleteJiraCallbackMutation: () => ({mutateAsync: completeCallbackMock}),
+    useCompleteJiraSiteSelectionMutation: () => ({mutateAsync: completeSiteMock}),
+  };
+});
+
+beforeEach(() => {
+  window.sessionStorage.clear();
+  resetJiraCallbackState();
+  completeCallbackMock.mockReset();
+  completeSiteMock.mockReset();
+});
+
+describe('JiraCallbackPage', () => {
+  test('lists sites from the callback and completes the selected site', async () => {
+    window.sessionStorage.setItem(JIRA_INSTALL_WORKSPACE_KEY, INTEGRATIONS_TEST_WID);
+    completeCallbackMock.mockResolvedValue({
+      sites: [
+        {
+          cloudId: 'cloud-1',
+          name: 'Acme',
+          url: 'https://acme.atlassian.net',
+          scopes: ['read:jira-work'],
+        },
+        {
+          cloudId: 'cloud-2',
+          name: 'Beta',
+          url: 'https://beta.atlassian.net',
+          scopes: ['read:jira-work'],
+        },
+      ],
+    });
+    completeSiteMock.mockResolvedValue({
+      id: 'connection-1',
+      workspaceId: INTEGRATIONS_TEST_WID,
+      provider: 'jira',
+      externalAccountId: 'cloud-1',
+      slug: 'jira_acme',
+      displayName: 'Jira Acme',
+      lifecycleStatus: 'active',
+      capabilities: ['agent_tools'],
+      createdAt: '2026-01-01T00:00:00.000Z',
+      updatedAt: '2026-01-01T00:00:00.000Z',
+    });
+
+    const rendered = renderIntegrationsPage({
+      path: '/integrations/jira/callback?code=grant-code-jira&state=signed-state-jira',
+      routePath: '/integrations/jira/callback',
+      element: <JiraCallbackPage />,
+      workspaces: [testWorkspace()],
+      extraRoutes: [
+        '/w/acme/settings/integrations',
+        '/w/$workspaceSlug/integrations/jira',
+        '/auth/login',
+      ],
+    });
+
+    expect(await screen.findByRole('heading', {name: 'Choose a Jira site'})).toBeVisible();
+    expect(screen.getByText('Acme')).toBeVisible();
+    expect(screen.getByText('Beta')).toBeVisible();
+    expect(completeCallbackMock).toHaveBeenCalledWith({
+      query: {code: 'grant-code-jira', state: 'signed-state-jira'},
+      token: 'test-token',
+    });
+    expect(completeCallbackMock).toHaveBeenCalledTimes(1);
+
+    const connectButtons = screen.getAllByRole('button', {name: 'Connect'});
+    expect(connectButtons).toHaveLength(2);
+    fireEvent.click(connectButtons[0] as HTMLElement);
+
+    await waitFor(() =>
+      expect(completeSiteMock).toHaveBeenCalledWith({
+        body: {cloud_id: 'cloud-1', state: 'signed-state-jira'},
+        token: 'test-token',
+      }),
+    );
+    await screen.findByTestId('route:/w/acme/settings/integrations');
+    expect(completeSiteMock).toHaveBeenCalledTimes(1);
+    expect(window.sessionStorage.getItem(JIRA_INSTALL_WORKSPACE_KEY)).toBeNull();
+    expect(screen.getByText('Jira installed.')).toBeInTheDocument();
+
+    rendered.unmount();
+    renderIntegrationsPage({
+      path: '/integrations/jira/callback?code=grant-code-jira&state=signed-state-jira',
+      routePath: '/integrations/jira/callback',
+      element: <JiraCallbackPage />,
+      workspaces: [testWorkspace()],
+      extraRoutes: [
+        '/w/acme/settings/integrations',
+        '/w/$workspaceSlug/integrations/jira',
+        '/auth/login',
+      ],
+    });
+    await waitFor(() => expect(completeCallbackMock).toHaveBeenCalledTimes(1));
+    expect(await screen.findByRole('heading', {name: 'Jira connected'})).toBeVisible();
+  });
+
+  test('completes a single-site callback in Strict Mode', async () => {
+    window.sessionStorage.setItem(JIRA_INSTALL_WORKSPACE_KEY, INTEGRATIONS_TEST_WID);
+    completeCallbackMock.mockResolvedValue({
+      id: 'connection-single',
+      workspaceId: INTEGRATIONS_TEST_WID,
+      provider: 'jira',
+      externalAccountId: 'cloud-single',
+      slug: 'jira_single',
+      displayName: 'Jira Single',
+      lifecycleStatus: 'active',
+      capabilities: ['agent_tools'],
+      createdAt: '2026-01-01T00:00:00.000Z',
+      updatedAt: '2026-01-01T00:00:00.000Z',
+    });
+
+    renderIntegrationsPage({
+      path: '/integrations/jira/callback?code=grant-code-single&state=signed-state-single',
+      routePath: '/integrations/jira/callback',
+      element: (
+        <StrictMode>
+          <JiraCallbackPage />
+        </StrictMode>
+      ),
+      workspaces: [testWorkspace()],
+      extraRoutes: [
+        '/w/acme/settings/integrations',
+        '/w/$workspaceSlug/integrations/jira',
+        '/auth/login',
+      ],
+    });
+
+    await waitFor(() =>
+      expect(completeCallbackMock).toHaveBeenCalledWith({
+        query: {code: 'grant-code-single', state: 'signed-state-single'},
+        token: 'test-token',
+      }),
+    );
+    expect(completeCallbackMock).toHaveBeenCalledTimes(1);
+    await screen.findByTestId('route:/w/acme/settings/integrations');
+    expect(screen.getByText('Jira installed.')).toBeInTheDocument();
+  });
+
+  test('renders recovery without submitting an invalid callback', async () => {
+    window.sessionStorage.setItem(JIRA_INSTALL_WORKSPACE_KEY, INTEGRATIONS_TEST_WID);
+
+    renderIntegrationsPage({
+      path: '/integrations/jira/callback?state=missing-code',
+      routePath: '/integrations/jira/callback',
+      element: <JiraCallbackPage />,
+      workspaces: [testWorkspace()],
+      extraRoutes: [
+        '/w/acme/settings/integrations',
+        '/w/$workspaceSlug/integrations/jira',
+        '/auth/login',
+      ],
+    });
+
+    expect(
+      await screen.findByRole('heading', {name: 'Jira install could not be completed'}),
+    ).toBeVisible();
+    expect(completeCallbackMock).not.toHaveBeenCalled();
+    expect(screen.getByRole('link', {name: 'Start over'})).toBeVisible();
+  });
+
+  test('allows retrying a failed site selection', async () => {
+    window.sessionStorage.setItem(JIRA_INSTALL_WORKSPACE_KEY, INTEGRATIONS_TEST_WID);
+    completeCallbackMock.mockResolvedValue({
+      sites: [
+        {
+          cloudId: 'cloud-retry',
+          name: 'Retry site',
+          url: 'https://retry.atlassian.net',
+          scopes: ['read:jira-work'],
+        },
+      ],
+    });
+    completeSiteMock
+      .mockRejectedValueOnce(
+        new ApiError({
+          code: 'jira-pending-selection-not-found',
+          message: 'selection expired',
+          status: 404,
+        }),
+      )
+      .mockResolvedValueOnce({
+        id: 'connection-retry',
+        workspaceId: INTEGRATIONS_TEST_WID,
+        provider: 'jira',
+        externalAccountId: 'cloud-retry',
+        slug: 'jira_retry',
+        displayName: 'Jira Retry',
+        lifecycleStatus: 'active',
+        capabilities: ['agent_tools'],
+        createdAt: '2026-01-01T00:00:00.000Z',
+        updatedAt: '2026-01-01T00:00:00.000Z',
+      });
+
+    renderIntegrationsPage({
+      path: '/integrations/jira/callback?code=grant-code-retry&state=signed-state-retry',
+      routePath: '/integrations/jira/callback',
+      element: <JiraCallbackPage />,
+      workspaces: [testWorkspace()],
+      extraRoutes: [
+        '/w/acme/settings/integrations',
+        '/w/$workspaceSlug/integrations/jira',
+        '/auth/login',
+      ],
+    });
+
+    expect(await screen.findByRole('heading', {name: 'Choose a Jira site'})).toBeVisible();
+    const connectButton = screen.getByRole('button', {name: 'Connect'});
+    fireEvent.click(connectButton);
+
+    await waitFor(() => expect(completeSiteMock).toHaveBeenCalledTimes(1));
+    await waitFor(() => {
+      expect(screen.getByRole('alert')).toHaveTextContent(
+        'This Jira site selection is no longer valid. Start the install again from workspace settings.',
+      );
+    });
+    await waitFor(() => expect(connectButton).not.toBeDisabled());
+
+    fireEvent.click(connectButton);
+    await waitFor(() => expect(completeSiteMock).toHaveBeenCalledTimes(2));
+    await screen.findByTestId('route:/w/acme/settings/integrations');
+    expect(screen.getByText('Jira installed.')).toBeInTheDocument();
+  });
+});

package/src/pages/jira-callback-page.tsx

@@ -0,0 +1,366 @@
+import {useAuthState, useRefreshAuth} from '@shipfox/client-auth';
+import {useRouteSearch} from '@shipfox/client-shell/runtime';
+import {sessionStorageOrUndefined} from '@shipfox/client-ui';
+import {Button, ButtonLink} from '@shipfox/react-ui/button';
+import {Callout} from '@shipfox/react-ui/callout';
+import {Card} from '@shipfox/react-ui/card';
+import {FullPageLoader} from '@shipfox/react-ui/loader';
+import {toast} from '@shipfox/react-ui/toast';
+import {Header, Text} from '@shipfox/react-ui/typography';
+import {useQueryClient} from '@tanstack/react-query';
+import {Link, useNavigate} from '@tanstack/react-router';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {
+  useCompleteIntegrationCallback,
+  useCompleteIntegrationCallbackResult,
+} from '#application/complete-integration-callback.js';
+import {CallbackStatusShell} from '#components/callback-status-shell.js';
+import type {IntegrationConnection, JiraSite} from '#core/models.js';
+import {
+  useCompleteJiraCallbackMutation,
+  useCompleteJiraSiteSelectionMutation,
+} from '#hooks/api/integrations.js';
+import {
+  clearJiraInstallWorkspace,
+  parseJiraCallbackQuery,
+  readJiraInstallWorkspace,
+  serializeJiraCallbackQuery,
+} from '#jira-callback.js';
+import {
+  JIRA_CALLBACK_CACHE_SIZE,
+  jiraCallbackRequests,
+  jiraCompletedConnections,
+  jiraSiteSelectionRequests,
+  jiraToastedCallbacks,
+} from '#jira-callback-state.js';
+import {classifyJiraCallbackError, type JiraCallbackFailure} from '#jira-form-errors.js';
+import {rememberCallbackKey, resolveWorkspaceSlug} from '#workspace-navigation.js';
+
+export function JiraCallbackPage() {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const refreshAuth = useRefreshAuth();
+  const {workspaces, isLoading} = useAuthState();
+  const completeIntegrationCallback = useCompleteIntegrationCallback();
+  const completeIntegrationCallbackResult = useCompleteIntegrationCallbackResult();
+  const {mutateAsync: completeJiraCallback} = useCompleteJiraCallbackMutation();
+  const {mutateAsync: completeJiraSiteSelection} = useCompleteJiraSiteSelectionMutation();
+  const params = useRouteSearch(parseJiraCallbackQuery);
+  const callbackKey = params ? serializeJiraCallbackQuery(params) : undefined;
+  const workspaceId = useMemo(() => readJiraInstallWorkspace(sessionStorageOrUndefined()), []);
+  const [sites, setSites] = useState<JiraSite[] | undefined>();
+  const [failure, setFailure] = useState<JiraCallbackFailure | undefined>();
+  const [selectedCloudId, setSelectedCloudId] = useState<string | undefined>();
+  const [completedWorkspace, setCompletedWorkspace] = useState<{
+    slug?: string | undefined;
+  }>();
+  const disposedRef = useRef(false);
+  const callbackKeyRef = useRef(callbackKey);
+  callbackKeyRef.current = callbackKey;
+  const [callbackStateKey, setCallbackStateKey] = useState(callbackKey);
+
+  useEffect(() => {
+    disposedRef.current = false;
+    return () => {
+      disposedRef.current = true;
+    };
+  }, []);
+
+  const completeConnection = useCallback(
+    async (
+      connection: IntegrationConnection,
+      callbackKey: string,
+      isActive: () => boolean = () => true,
+    ) => {
+      if (disposedRef.current || !isActive()) return;
+      const completedConnection = jiraCompletedConnections.get(callbackKey);
+      if (completedConnection) {
+        const workspaceSlug = await resolveWorkspaceSlug({
+          workspaceId: completedConnection.workspaceId,
+          fallbackWorkspaces: workspaces,
+          queryClient,
+        });
+        if (!disposedRef.current && isActive())
+          setCompletedWorkspace(workspaceSlug ? {slug: workspaceSlug} : {});
+        return;
+      }
+      rememberCompletedConnection(callbackKey, connection);
+      try {
+        clearJiraInstallWorkspace(sessionStorageOrUndefined());
+      } catch {
+        // The successful API response remains the source of truth for navigation.
+      }
+      if (disposedRef.current || !isActive()) return;
+      if (!jiraToastedCallbacks.has(callbackKey)) {
+        rememberCallbackKey(jiraToastedCallbacks, callbackKey);
+        toast.success('Jira installed.');
+      }
+      let workspaceSlug: string | undefined;
+      try {
+        workspaceSlug = await resolveWorkspaceSlug({
+          workspaceId: connection.workspaceId,
+          fallbackWorkspaces: workspaces,
+          queryClient,
+        });
+        if (disposedRef.current || !isActive()) return;
+        if (!workspaceSlug) {
+          setCompletedWorkspace({});
+          return;
+        }
+        setCompletedWorkspace({slug: workspaceSlug});
+        await navigate({
+          to: '/w/$workspaceSlug/settings/integrations',
+          params: {workspaceSlug},
+          replace: true,
+        });
+      } catch {
+        if (!disposedRef.current && isActive()) setCompletedWorkspace({slug: workspaceSlug});
+      }
+    },
+    [navigate, queryClient, workspaces],
+  );
+
+  useEffect(() => {
+    if (callbackKey === undefined) return;
+    setCallbackStateKey(callbackKey);
+    setSites(undefined);
+    setSelectedCloudId(undefined);
+    setFailure(undefined);
+    setCompletedWorkspace(undefined);
+  }, [callbackKey]);
+
+  useEffect(() => {
+    if (!params || !callbackKey || isLoading) return;
+
+    let active = true;
+
+    const completedConnection = jiraCompletedConnections.get(callbackKey);
+    if (completedConnection) {
+      void completeConnection(completedConnection, callbackKey, () => active);
+      return () => {
+        active = false;
+      };
+    }
+
+    const request = jiraCallbackRequests.run(callbackKey, async () => {
+      return await completeIntegrationCallbackResult({
+        input: params,
+        refreshAuth,
+        complete: async (query, token) => await completeJiraCallback({query, token}),
+        getConnection: (result) => ('sites' in result ? undefined : result),
+      });
+    });
+
+    request.then(
+      async (result) => {
+        if (disposedRef.current || !active) return;
+        if ('sites' in result) {
+          setFailure(undefined);
+          setSites(result.sites);
+          return;
+        }
+        await completeConnection(result, callbackKey, () => active);
+      },
+      (error: unknown) => {
+        if (!disposedRef.current && active) setFailure(classifyJiraCallbackError(error));
+      },
+    );
+
+    return () => {
+      active = false;
+    };
+  }, [
+    callbackKey,
+    completeIntegrationCallbackResult,
+    completeJiraCallback,
+    completeConnection,
+    isLoading,
+    params,
+    refreshAuth,
+  ]);
+
+  function selectSite(site: JiraSite) {
+    if (!params || !callbackKey || selectedCloudId) return;
+    setSelectedCloudId(site.cloudId);
+    setFailure(undefined);
+    const selectionKey = callbackKey;
+    const request = jiraSiteSelectionRequests.run(params.state, async () => {
+      return await completeIntegrationCallback({
+        input: {cloud_id: site.cloudId, state: params.state},
+        refreshAuth,
+        complete: async (body, token) => await completeJiraSiteSelection({body, token}),
+      });
+    });
+    request.then(
+      async (connection) => {
+        if (disposedRef.current || callbackKeyRef.current !== selectionKey) return;
+        jiraCallbackRequests.clear(selectionKey);
+        await completeConnection(
+          connection,
+          selectionKey,
+          () => callbackKeyRef.current === selectionKey,
+        );
+      },
+      (error: unknown) => {
+        if (disposedRef.current || callbackKeyRef.current !== selectionKey) return;
+        setSelectedCloudId(undefined);
+        setFailure(classifyJiraCallbackError(error));
+      },
+    );
+  }
+
+  if (!params) {
+    return (
+      <JiraCallbackFailurePage
+        failure={classifyJiraCallbackError(new Error('invalid callback'))}
+        workspaceSlug={workspaces.find(({id}) => id === workspaceId)?.slug}
+      />
+    );
+  }
+
+  if (isLoading) return <FullPageLoader aria-label="Connecting Jira" />;
+
+  if (callbackStateKey === callbackKey && completedWorkspace)
+    return (
+      <CallbackStatusShell
+        title="Jira connected"
+        status="success"
+        message={
+          completedWorkspace.slug
+            ? 'Jira is connected. Continue in integrations settings.'
+            : 'Jira is connected. Return to Shipfox to continue.'
+        }
+        workspaceSlug={completedWorkspace.slug}
+        installPath="/w/$workspaceSlug/integrations/jira"
+      />
+    );
+
+  if (callbackStateKey === callbackKey && sites)
+    return (
+      <JiraSiteSelectionPage
+        sites={sites}
+        selectedCloudId={selectedCloudId}
+        failure={failure}
+        workspaceSlug={workspaces.find(({id}) => id === workspaceId)?.slug}
+        onSelect={selectSite}
+      />
+    );
+
+  if (callbackStateKey === callbackKey && failure)
+    return (
+      <JiraCallbackFailurePage
+        failure={failure}
+        workspaceSlug={workspaces.find(({id}) => id === workspaceId)?.slug}
+      />
+    );
+
+  return <FullPageLoader aria-label="Connecting Jira" />;
+}
+
+function rememberCompletedConnection(key: string, connection: IntegrationConnection): void {
+  jiraCompletedConnections.delete(key);
+  jiraCompletedConnections.set(key, connection);
+  while (jiraCompletedConnections.size > JIRA_CALLBACK_CACHE_SIZE) {
+    const oldestKey = jiraCompletedConnections.keys().next().value;
+    if (oldestKey === undefined) return;
+    jiraCompletedConnections.delete(oldestKey);
+  }
+}
+
+function JiraCallbackFailurePage({
+  failure,
+  workspaceSlug,
+}: {
+  failure: JiraCallbackFailure;
+  workspaceSlug: string | undefined;
+}) {
+  return (
+    <CallbackStatusShell
+      title={failure.title}
+      message={failure.message}
+      startOver={failure.startOver}
+      switchAccount={failure.signIn}
+      workspaceSlug={workspaceSlug}
+      installPath="/w/$workspaceSlug/integrations/jira"
+    />
+  );
+}
+
+function JiraSiteSelectionPage({
+  sites,
+  selectedCloudId,
+  failure,
+  workspaceSlug,
+  onSelect,
+}: {
+  sites: JiraSite[];
+  selectedCloudId: string | undefined;
+  failure: JiraCallbackFailure | undefined;
+  workspaceSlug: string | undefined;
+  onSelect: (site: JiraSite) => void;
+}) {
+  return (
+    <main className="flex min-h-screen bg-background-subtle-base px-row py-frame">
+      <div className="mx-auto flex w-full max-w-[480px] flex-col justify-center gap-section">
+        <header className="flex flex-col gap-inline">
+          <Header variant="h2">Choose a Jira site</Header>
+          <Text size="sm" className="text-foreground-neutral-muted">
+            Select the Jira site to connect to this Shipfox workspace.
+          </Text>
+        </header>
+
+        {failure ? (
+          <Callout role="alert" type="error">
+            <Text size="sm">{failure.message}</Text>
+          </Callout>
+        ) : null}
+
+        <section className="flex flex-col gap-inline" aria-label="Choose a Jira site">
+          {sites.map((site) => (
+            <Card key={site.cloudId} className="p-panel-compact">
+              <div className="flex items-center justify-between gap-cluster">
+                <div className="min-w-0">
+                  <Text size="md" bold className="truncate">
+                    {site.name}
+                  </Text>
+                  <Text size="sm" className="truncate text-foreground-neutral-muted">
+                    {site.url}
+                  </Text>
+                </div>
+                <Button
+                  variant="secondary"
+                  disabled={selectedCloudId !== undefined}
+                  isLoading={selectedCloudId === site.cloudId}
+                  onClick={() => onSelect(site)}
+                >
+                  Connect
+                </Button>
+              </div>
+            </Card>
+          ))}
+        </section>
+
+        <div className="flex flex-col gap-inline sm:flex-row sm:items-center">
+          {failure?.startOver && workspaceSlug ? (
+            <ButtonLink asChild variant="muted" className="min-h-44 w-full sm:w-fit">
+              <Link to="/w/$workspaceSlug/integrations/jira" params={{workspaceSlug}}>
+                Start over
+              </Link>
+            </ButtonLink>
+          ) : null}
+          {workspaceSlug ? (
+            <ButtonLink asChild variant="muted" className="min-h-44 w-full sm:w-fit">
+              <Link to="/w/$workspaceSlug/settings/integrations" params={{workspaceSlug}}>
+                Back to integrations
+              </Link>
+            </ButtonLink>
+          ) : (
+            <ButtonLink asChild variant="muted" className="min-h-44 w-full sm:w-fit">
+              <Link to="/">Back to Shipfox</Link>
+            </ButtonLink>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+}

package/src/pages/jira-install-page.tsx

@@ -0,0 +1,28 @@
+import {sessionStorageOrUndefined} from '@shipfox/client-ui';
+import {useCallback} from 'react';
+import {RedirectInstallPage} from '#components/redirect-install-page.js';
+import {useCreateJiraInstallMutation} from '#hooks/api/integrations.js';
+import {saveJiraInstallWorkspace} from '#jira-callback.js';
+
+export function JiraInstallPage() {
+  const createInstall = useCreateJiraInstallMutation();
+  const installRequest = useCallback(
+    async (body: {workspace_id: string}) => await createInstall.mutateAsync(body),
+    [createInstall],
+  );
+
+  return (
+    <RedirectInstallPage
+      installRequest={installRequest}
+      errorFallbackMessage="Could not start Jira install."
+      loadingLabel="Connecting Jira"
+      beforeRedirect={(workspaceId) => {
+        try {
+          saveJiraInstallWorkspace(sessionStorageOrUndefined(), workspaceId);
+        } catch {
+          // Storage is only a navigation hint; the signed state is authoritative.
+        }
+      }}
+    />
+  );
+}

package/src/pages/sentry-callback-page.tsx

@@ -170,7 +170,7 @@ export function SentryCallbackPage() {
 
   return (
     <CallbackColumn>
-      <header className="flex flex-col gap-8">
+      <header className="flex flex-col gap-inline">
         <Header variant="h2">Install Sentry</Header>
         <Text size="sm" className="text-foreground-neutral-muted">
           {params.orgSlug
@@ -181,7 +181,7 @@ export function SentryCallbackPage() {
 
       {failure ? (
         <Callout role="alert" type="error">
-          <div className="flex flex-col gap-8">
+          <div className="flex flex-col gap-inline">
             <Text size="sm">{failure.failure.message}</Text>
             {failure.failure.kind === 'retryable' ? (
               <Button
@@ -210,10 +210,10 @@ export function SentryCallbackPage() {
         </Callout>
       ) : null}
 
-      <section className="flex flex-col gap-8" aria-label="Choose a workspace">
+      <section className="flex flex-col gap-inline" aria-label="Choose a workspace">
         {orderedWorkspaces.map((workspace) => (
-          <Card key={workspace.id} className="p-16">
-            <div className="flex items-center justify-between gap-12">
+          <Card key={workspace.id} className="p-panel-compact">
+            <div className="flex items-center justify-between gap-cluster">
               <Text size="md" bold className="truncate">
                 {workspace.name}
               </Text>
@@ -246,8 +246,8 @@ export function SentryCallbackPage() {
 
 function CallbackColumn({children}: {children: React.ReactNode}) {
   return (
-    <main className="flex min-h-screen bg-background-subtle-base px-16 py-32">
-      <div className="mx-auto flex w-full max-w-[480px] flex-col justify-center gap-20">
+    <main className="flex min-h-screen bg-background-subtle-base px-row py-frame">
+      <div className="mx-auto flex w-full max-w-[480px] flex-col justify-center gap-section">
         {children}
       </div>
     </main>