@shipfox/client-integrations 12.0.1 → 13.0.0

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

@@ -4,7 +4,7 @@ import {ApiError} from '@shipfox/client-api';
 import {screen, waitFor} from '@testing-library/react';
 import {StrictMode} from 'react';
 import {LINEAR_INSTALL_WORKSPACE_KEY} from '#linear-callback.js';
-import {INTEGRATIONS_TEST_WID, renderIntegrationsPage} from '#test/render.js';
+import {INTEGRATIONS_TEST_WID, renderIntegrationsPage, testWorkspace} from '#test/render.js';
 import {LinearCallbackPage} from './linear-callback-page.js';
 
 const {completeCallbackMock} = vi.hoisted(() => ({completeCallbackMock: vi.fn()}));
@@ -37,8 +37,8 @@ function renderCallback(search: string, options?: {strict?: boolean}) {
       <LinearCallbackPage />
     ),
     extraRoutes: [
-      '/workspaces/$wid/settings/integrations',
-      '/workspaces/$wid/integrations/linear',
+      '/w/$workspaceSlug/settings/integrations',
+      '/w/$workspaceSlug/integrations/linear',
       '/auth/login',
     ],
   });
@@ -70,7 +70,7 @@ describe('LinearCallbackPage', () => {
     window.sessionStorage.setItem(LINEAR_INSTALL_WORKSPACE_KEY, INTEGRATIONS_TEST_WID);
     completeCallbackMock.mockResolvedValue({
       id: 'connection-1',
-      workspace_id: responseWorkspaceId,
+      workspaceId: responseWorkspaceId,
       provider: 'linear',
       external_account_id: 'linear-org',
       slug: 'linear_org',
@@ -81,7 +81,24 @@ describe('LinearCallbackPage', () => {
       updated_at: '2026-01-01T00:00:00.000Z',
     });
 
-    renderCallback('?code=grant-code-success&state=signed-state-success', {strict: true});
+    renderIntegrationsPage({
+      path: '/integrations/linear/callback?code=grant-code-success&state=signed-state-success',
+      routePath: '/integrations/linear/callback',
+      element: (
+        <StrictMode>
+          <LinearCallbackPage />
+        </StrictMode>
+      ),
+      workspaces: [
+        testWorkspace(),
+        testWorkspace({id: responseWorkspaceId, slug: 'response-workspace'}),
+      ],
+      extraRoutes: [
+        '/w/response-workspace/settings/integrations',
+        '/w/$workspaceSlug/integrations/linear',
+        '/auth/login',
+      ],
+    });
 
     await waitFor(() =>
       expect(completeCallbackMock).toHaveBeenCalledWith({
@@ -92,7 +109,7 @@ describe('LinearCallbackPage', () => {
     expect(completeCallbackMock).toHaveBeenCalledTimes(1);
     await waitFor(() =>
       expect(
-        screen.getByTestId('route:/workspaces/$wid/settings/integrations'),
+        screen.getByTestId('route:/w/response-workspace/settings/integrations'),
       ).toBeInTheDocument(),
     );
     expect(window.sessionStorage.getItem(LINEAR_INSTALL_WORKSPACE_KEY)).toBeNull();
@@ -136,14 +153,10 @@ describe('LinearCallbackPage', () => {
 
     expect(switchAccountLink).toHaveAttribute(
       'href',
-      `/auth/logout?redirect=${encodeURIComponent(
-        `/workspaces/${INTEGRATIONS_TEST_WID}/integrations/linear`,
-      )}`,
+      `/auth/logout?redirect=${encodeURIComponent('/w/acme/integrations/linear')}`,
     );
     expect(switchAccountUrl.pathname).toBe('/auth/logout');
-    expect(switchAccountUrl.searchParams.get('redirect')).toBe(
-      `/workspaces/${INTEGRATIONS_TEST_WID}/integrations/linear`,
-    );
+    expect(switchAccountUrl.searchParams.get('redirect')).toBe('/w/acme/integrations/linear');
     expect(screen.getByRole('link', {name: 'Start over'})).toBeVisible();
   });
 

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

@@ -1,8 +1,9 @@
-import {useRefreshAuth} from '@shipfox/client-auth';
+import {useAuthState, useRefreshAuth} from '@shipfox/client-auth';
 import {useRouteSearch} from '@shipfox/client-shell/runtime';
 import {createSingleFlight, sessionStorageOrUndefined} from '@shipfox/client-ui';
 import {FullPageLoader} from '@shipfox/react-ui/loader';
 import {toast} from '@shipfox/react-ui/toast';
+import {useQueryClient} from '@tanstack/react-query';
 import {useNavigate} from '@tanstack/react-router';
 import {useEffect, useMemo, useState} from 'react';
 import {useCompleteIntegrationCallback} from '#application/complete-integration-callback.js';
@@ -17,26 +18,33 @@ import {
   readLinearInstallWorkspace,
   serializeLinearCallbackQuery,
 } from '#linear-callback.js';
+import {rememberCallbackKey, resolveWorkspaceSlug} from '#workspace-navigation.js';
 
 // Retain only recent completions: this bounds long-lived callback pages while
 // still covering StrictMode and immediate Back/Forward remounts.
 const callbackRequests = createSingleFlight<string, IntegrationConnection>({
   maxTerminalResults: 32,
 });
+const completedCallbacks = new Set<string>();
 // Keeps the success toast firing once per distinct callback even though the
 // effect re-runs against the cached request as the mutation identity churns.
 const toastedCallbacks = new Set<string>();
 
 export function LinearCallbackPage() {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const refreshAuth = useRefreshAuth();
   const completeIntegrationCallback = useCompleteIntegrationCallback();
   const {mutateAsync: completeLinearCallback} = useCompleteLinearCallbackMutation();
+  const {workspaces, isLoading} = useAuthState();
   const params = useRouteSearch(parseLinearCallbackQuery);
   const workspaceId = useMemo(() => readLinearInstallWorkspace(sessionStorageOrUndefined()), []);
   const [failure, setFailure] = useState<LinearCallbackFailure | undefined>();
+  const [completedWorkspace, setCompletedWorkspace] = useState<{
+    slug?: string | undefined;
+  }>();
   useEffect(() => {
-    if (!params) return;
+    if (!params || isLoading) return;
 
     let disposed = false;
     const key = serializeLinearCallbackQuery(params);
@@ -53,6 +61,16 @@ export function LinearCallbackPage() {
     request.then(
       async (connection) => {
         if (disposed) return;
+        if (completedCallbacks.has(key)) {
+          const workspaceSlug = await resolveWorkspaceSlug({
+            workspaceId: connection.workspaceId,
+            fallbackWorkspaces: workspaces,
+            queryClient,
+          });
+          if (!disposed) setCompletedWorkspace(workspaceSlug ? {slug: workspaceSlug} : {});
+          return;
+        }
+        rememberCallbackKey(completedCallbacks, key);
         try {
           clearLinearInstallWorkspace(sessionStorageOrUndefined());
         } catch {
@@ -60,17 +78,31 @@ export function LinearCallbackPage() {
         }
         if (disposed) return;
         if (!toastedCallbacks.has(key)) {
-          toastedCallbacks.add(key);
+          rememberCallbackKey(toastedCallbacks, key);
           toast.success('Linear installed.');
         }
+        let workspaceSlug: string | undefined;
         try {
+          if (disposed) return;
+          workspaceSlug = await resolveWorkspaceSlug({
+            workspaceId: connection.workspaceId,
+            fallbackWorkspaces: workspaces,
+            queryClient,
+          });
+          if (disposed) return;
+          if (!workspaceSlug) {
+            setCompletedWorkspace({});
+            return;
+          }
+          setCompletedWorkspace({slug: workspaceSlug});
           await navigate({
-            to: '/workspaces/$wid/settings/integrations',
-            params: {wid: connection.workspaceId},
+            to: '/w/$workspaceSlug/settings/integrations',
+            params: {workspaceSlug},
             replace: true,
           });
         } catch {
           // Keep the completed callback page visible if client navigation is interrupted.
+          if (!disposed) setCompletedWorkspace({slug: workspaceSlug});
         }
       },
       (error: unknown) => {
@@ -82,7 +114,16 @@ export function LinearCallbackPage() {
     return () => {
       disposed = true;
     };
-  }, [completeIntegrationCallback, completeLinearCallback, navigate, params, refreshAuth]);
+  }, [
+    completeIntegrationCallback,
+    completeLinearCallback,
+    isLoading,
+    navigate,
+    params,
+    queryClient,
+    refreshAuth,
+    workspaces,
+  ]);
 
   if (!params) {
     return (
@@ -93,22 +134,42 @@ export function LinearCallbackPage() {
           startOver: true,
           signIn: false,
         }}
-        workspaceId={workspaceId}
+        workspaceSlug={workspaces.find(({id}) => id === workspaceId)?.slug}
       />
     );
   }
 
+  if (completedWorkspace)
+    return (
+      <CallbackStatusShell
+        title="Linear connected"
+        status="success"
+        message={
+          completedWorkspace.slug
+            ? 'Linear is connected. Continue in integrations settings.'
+            : 'Linear is connected. Return to Shipfox to continue.'
+        }
+        workspaceSlug={completedWorkspace.slug}
+        installPath="/w/$workspaceSlug/integrations/linear"
+      />
+    );
+
   if (!failure) return <FullPageLoader aria-label="Connecting Linear" />;
 
-  return <LinearCallbackFailurePage failure={failure} workspaceId={workspaceId} />;
+  return (
+    <LinearCallbackFailurePage
+      failure={failure}
+      workspaceSlug={workspaces.find(({id}) => id === workspaceId)?.slug}
+    />
+  );
 }
 
 function LinearCallbackFailurePage({
   failure,
-  workspaceId,
+  workspaceSlug,
 }: {
   failure: LinearCallbackFailure;
-  workspaceId: string | undefined;
+  workspaceSlug: string | undefined;
 }) {
   return (
     <CallbackStatusShell
@@ -116,8 +177,8 @@ function LinearCallbackFailurePage({
       message={failure.message}
       startOver={failure.startOver}
       switchAccount={failure.signIn}
-      workspaceId={workspaceId}
-      installPath="/workspaces/$wid/integrations/linear"
+      workspaceSlug={workspaceSlug}
+      installPath="/w/$workspaceSlug/integrations/linear"
     />
   );
 }

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

@@ -41,7 +41,10 @@ function renderCallback(options: {
     path: `/integrations/sentry/callback${search}`,
     routePath: '/integrations/sentry/callback',
     element: <SentryCallbackPage />,
-    extraRoutes: ['/workspaces/$wid/settings/integrations', '/workspaces/$wid/integrations/sentry'],
+    extraRoutes: [
+      '/w/$workspaceSlug/settings/integrations',
+      '/w/$workspaceSlug/integrations/sentry',
+    ],
     ...(options.workspaces ? {workspaces: options.workspaces} : {}),
     ...(options.loadingAuth ? {loadingAuth: true} : {}),
   });
@@ -104,7 +107,7 @@ describe('SentryCallbackPage', () => {
 
     fireEvent.click(await screen.findByRole('button', {name: 'Install'}));
 
-    await screen.findByTestId('route:/workspaces/$wid/settings/integrations');
+    await screen.findByTestId('route:/w/$workspaceSlug/settings/integrations');
     expect(connectSentryMock).toHaveBeenCalledWith({
       body: {
         workspace_id: testWorkspace().id,
@@ -126,7 +129,7 @@ describe('SentryCallbackPage', () => {
     fireEvent.click(await screen.findByRole('button', {name: 'Install'}));
     fireEvent.click(await screen.findByRole('button', {name: 'Retry'}));
 
-    await screen.findByTestId('route:/workspaces/$wid/settings/integrations');
+    await screen.findByTestId('route:/w/$workspaceSlug/settings/integrations');
     expect(connectSentryMock).toHaveBeenCalledTimes(2);
   });
 
@@ -149,7 +152,7 @@ describe('SentryCallbackPage', () => {
     await waitFor(() => expect(screen.getByRole('button', {name: 'Retry'})).toBeDisabled());
 
     // A second attempt (via the still-enabled workspace Install) fails with no
-    // backoff hint — the lock must clear so the user is not stranded.
+    // backoff hint: the lock must clear so the user is not stranded.
     fireEvent.click(screen.getByRole('button', {name: 'Install'}));
     await waitFor(() => expect(screen.getByRole('button', {name: 'Retry'})).toBeEnabled());
   });
@@ -203,7 +206,7 @@ describe('SentryCallbackPage', () => {
     renderCallback({installationId: 'install-remount'});
     fireEvent.click(await screen.findByRole('button', {name: 'Install'}));
 
-    await screen.findByTestId('route:/workspaces/$wid/settings/integrations');
+    await screen.findByTestId('route:/w/$workspaceSlug/settings/integrations');
     await waitFor(() => expect(connectSentryMock).toHaveBeenCalledTimes(2));
   });
 });

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

@@ -7,6 +7,7 @@ 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 {useEffect, useMemo, useRef, useState} from 'react';
 import {useCompleteIntegrationCallback} from '#application/complete-integration-callback.js';
@@ -20,11 +21,13 @@ import {
   readSentryInstallWorkspace,
   type SentryConnectFailure,
 } from '#sentry-callback.js';
+import {resolveWorkspaceSlug} from '#workspace-navigation.js';
 
 const connectRequests = createSingleFlight<string, IntegrationConnection>();
 
 export function SentryCallbackPage() {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const refreshAuth = useRefreshAuth();
   const {workspaces, isLoading} = useAuthState();
   const completeIntegrationCallback = useCompleteIntegrationCallback();
@@ -124,11 +127,21 @@ export function SentryCallbackPage() {
         clearSentryInstallWorkspace(sessionStorageOrUndefined());
         if (disposedRef.current) return;
         toast.success('Sentry installed.');
-        await navigate({
-          to: '/workspaces/$wid/settings/integrations',
-          params: {wid: workspaceId},
-          replace: true,
+        const workspaceSlug = await resolveWorkspaceSlug({
+          workspaceId,
+          fallbackWorkspaces: workspaces,
+          queryClient,
         });
+        if (disposedRef.current) return;
+        await navigate(
+          workspaceSlug
+            ? {
+                to: '/w/$workspaceSlug/settings/integrations',
+                params: {workspaceSlug},
+                replace: true,
+              }
+            : {to: '/', replace: true},
+        );
       })
       .catch((error: unknown) => {
         if (disposedRef.current) return;
@@ -151,6 +164,9 @@ export function SentryCallbackPage() {
     : workspaces;
 
   const failureWorkspaceId = failure?.workspaceId ?? preselectedId ?? workspaces[0]?.id;
+  const failureWorkspace = failureWorkspaceId
+    ? workspaces.find(({id}) => id === failureWorkspaceId)
+    : undefined;
 
   return (
     <CallbackColumn>
@@ -178,9 +194,14 @@ export function SentryCallbackPage() {
                 Retry
               </Button>
             ) : null}
-            {failure.failure.kind === 'terminal' && failure.failure.startOver ? (
+            {failure.failure.kind === 'terminal' &&
+            failure.failure.startOver &&
+            failureWorkspace ? (
               <Button asChild size="sm" variant="secondary" className="w-fit">
-                <Link to="/workspaces/$wid/integrations/sentry" params={{wid: failure.workspaceId}}>
+                <Link
+                  to="/w/$workspaceSlug/integrations/sentry"
+                  params={{workspaceSlug: failureWorkspace.slug}}
+                >
                   Start over
                 </Link>
               </Button>
@@ -209,9 +230,12 @@ export function SentryCallbackPage() {
         ))}
       </section>
 
-      {failureWorkspaceId ? (
+      {failureWorkspace ? (
         <ButtonLink asChild variant="muted" className="w-fit">
-          <Link to="/workspaces/$wid/settings/integrations" params={{wid: failureWorkspaceId}}>
+          <Link
+            to="/w/$workspaceSlug/settings/integrations"
+            params={{workspaceSlug: failureWorkspace.slug}}
+          >
             Back to settings
           </Link>
         </ButtonLink>

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

@@ -0,0 +1,78 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest';
+import {screen, waitFor} from '@testing-library/react';
+import {StrictMode} from 'react';
+import {SLACK_INSTALL_WORKSPACE_KEY} from '#slack-callback.js';
+import {INTEGRATIONS_TEST_WID, renderIntegrationsPage, testWorkspace} from '#test/render.js';
+import {SlackCallbackPage} from './slack-callback-page.js';
+
+const {completeCallbackMock} = vi.hoisted(() => ({completeCallbackMock: 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,
+    useCompleteSlackCallbackMutation: () => ({mutateAsync: completeCallbackMock}),
+  };
+});
+
+beforeEach(() => {
+  window.sessionStorage.clear();
+  completeCallbackMock.mockReset();
+});
+
+describe('SlackCallbackPage', () => {
+  test('completes a callback once in Strict Mode and navigates to its workspace', async () => {
+    const responseWorkspaceId = '22222222-2222-4222-8222-222222222222';
+    window.sessionStorage.setItem(SLACK_INSTALL_WORKSPACE_KEY, INTEGRATIONS_TEST_WID);
+    completeCallbackMock.mockResolvedValue({
+      id: 'connection-1',
+      workspaceId: responseWorkspaceId,
+      provider: 'slack',
+      slug: 'slack_org',
+      displayName: 'Slack org',
+      capabilities: [],
+    });
+
+    renderIntegrationsPage({
+      path: '/integrations/slack/callback?code=grant-code-success&state=signed-state-success',
+      routePath: '/integrations/slack/callback',
+      element: (
+        <StrictMode>
+          <SlackCallbackPage />
+        </StrictMode>
+      ),
+      workspaces: [
+        testWorkspace(),
+        testWorkspace({id: responseWorkspaceId, slug: 'response-workspace'}),
+      ],
+      extraRoutes: [
+        '/w/response-workspace/settings/integrations',
+        '/w/$workspaceSlug/integrations/slack',
+        '/auth/login',
+      ],
+    });
+
+    await waitFor(() =>
+      expect(completeCallbackMock).toHaveBeenCalledWith({
+        query: {code: 'grant-code-success', state: 'signed-state-success'},
+        token: 'test-token',
+      }),
+    );
+    expect(completeCallbackMock).toHaveBeenCalledTimes(1);
+    await waitFor(() =>
+      expect(
+        screen.getByTestId('route:/w/response-workspace/settings/integrations'),
+      ).toBeInTheDocument(),
+    );
+    expect(screen.getByText('Slack installed.')).toBeInTheDocument();
+  });
+});

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

@@ -1,8 +1,9 @@
-import {useRefreshAuth} from '@shipfox/client-auth';
+import {useAuthState, useRefreshAuth} from '@shipfox/client-auth';
 import {useRouteSearch} from '@shipfox/client-shell/runtime';
 import {createSingleFlight, sessionStorageOrUndefined} from '@shipfox/client-ui';
 import {FullPageLoader} from '@shipfox/react-ui/loader';
 import {toast} from '@shipfox/react-ui/toast';
+import {useQueryClient} from '@tanstack/react-query';
 import {useNavigate} from '@tanstack/react-router';
 import {useEffect, useMemo, useState} from 'react';
 import {useCompleteIntegrationCallback} from '#application/complete-integration-callback.js';
@@ -17,6 +18,7 @@ import {
   type SlackCallbackFailure,
   serializeSlackCallbackQuery,
 } from '#slack-callback.js';
+import {rememberCallbackKey, resolveWorkspaceSlug} from '#workspace-navigation.js';
 
 // Retain only recent completions: this bounds long-lived callback pages while
 // still covering StrictMode and immediate Back/Forward remounts.
@@ -28,16 +30,20 @@ const toastedCallbacks = new Set<string>();
 
 export function SlackCallbackPage() {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const refreshAuth = useRefreshAuth();
   const completeIntegrationCallback = useCompleteIntegrationCallback();
   const {mutateAsync: completeSlackCallback} = useCompleteSlackCallbackMutation();
+  const {workspaces, isLoading} = useAuthState();
   const params = useRouteSearch(parseSlackCallbackQuery);
   const workspaceId = useMemo(() => readSlackInstallWorkspace(sessionStorageOrUndefined()), []);
   const [failure, setFailure] = useState<SlackCallbackFailure>();
-  const [completedWorkspaceId, setCompletedWorkspaceId] = useState<string>();
+  const [completedWorkspace, setCompletedWorkspace] = useState<{
+    slug?: string | undefined;
+  }>();
 
   useEffect(() => {
-    if (!params) return;
+    if (!params || isLoading) return;
     let disposed = false;
     const key = serializeSlackCallbackQuery(params);
     const request = callbackRequests.run(
@@ -53,10 +59,15 @@ export function SlackCallbackPage() {
       async (connection) => {
         if (disposed) return;
         if (completedCallbacks.has(key)) {
-          setCompletedWorkspaceId(connection.workspaceId);
+          const workspaceSlug = await resolveWorkspaceSlug({
+            workspaceId: connection.workspaceId,
+            fallbackWorkspaces: workspaces,
+            queryClient,
+          });
+          if (!disposed) setCompletedWorkspace(workspaceSlug ? {slug: workspaceSlug} : {});
           return;
         }
-        completedCallbacks.add(key);
+        rememberCallbackKey(completedCallbacks, key);
         try {
           clearSlackInstallWorkspace(sessionStorageOrUndefined());
         } catch {
@@ -64,17 +75,30 @@ export function SlackCallbackPage() {
         }
         if (disposed) return;
         if (!toastedCallbacks.has(key)) {
-          toastedCallbacks.add(key);
+          rememberCallbackKey(toastedCallbacks, key);
           toast.success('Slack installed.');
         }
+        let workspaceSlug: string | undefined;
         try {
+          if (disposed) return;
+          workspaceSlug = await resolveWorkspaceSlug({
+            workspaceId: connection.workspaceId,
+            fallbackWorkspaces: workspaces,
+            queryClient,
+          });
+          if (disposed) return;
+          if (!workspaceSlug) {
+            setCompletedWorkspace({});
+            return;
+          }
+          setCompletedWorkspace({slug: workspaceSlug});
           await navigate({
-            to: '/workspaces/$wid/settings/integrations',
-            params: {wid: connection.workspaceId},
+            to: '/w/$workspaceSlug/settings/integrations',
+            params: {workspaceSlug},
             replace: true,
           });
         } catch {
-          if (!disposed) setCompletedWorkspaceId(connection.workspaceId);
+          if (!disposed) setCompletedWorkspace({slug: workspaceSlug});
         }
       },
       (error: unknown) => {
@@ -84,7 +108,16 @@ export function SlackCallbackPage() {
     return () => {
       disposed = true;
     };
-  }, [completeIntegrationCallback, completeSlackCallback, navigate, params, refreshAuth]);
+  }, [
+    completeIntegrationCallback,
+    completeSlackCallback,
+    isLoading,
+    navigate,
+    params,
+    queryClient,
+    refreshAuth,
+    workspaces,
+  ]);
 
   if (!params)
     return (
@@ -92,26 +125,31 @@ export function SlackCallbackPage() {
         title="Invalid Slack callback"
         message="This Slack link is missing required parameters. Start the install again from workspace settings."
         startOver
-        workspaceId={workspaceId}
-        installPath="/workspaces/$wid/integrations/slack"
+        workspaceSlug={workspaces.find(({id}) => id === workspaceId)?.slug}
+        installPath="/w/$workspaceSlug/integrations/slack"
       />
     );
-  if (completedWorkspaceId)
+  if (completedWorkspace)
     return (
       <CallbackStatusShell
         title="Slack connected"
-        message="Slack is connected. Continue in integrations settings."
-        workspaceId={completedWorkspaceId}
-        installPath="/workspaces/$wid/integrations/slack"
+        status="success"
+        message={
+          completedWorkspace.slug
+            ? 'Slack is connected. Continue in integrations settings.'
+            : 'Slack is connected. Return to Shipfox to continue.'
+        }
+        workspaceSlug={completedWorkspace.slug}
+        installPath="/w/$workspaceSlug/integrations/slack"
       />
     );
   if (failure)
     return (
       <CallbackStatusShell
         {...failure}
-        workspaceId={workspaceId}
+        workspaceSlug={workspaces.find(({id}) => id === workspaceId)?.slug}
         switchAccount={failure.signIn}
-        installPath="/workspaces/$wid/integrations/slack"
+        installPath="/w/$workspaceSlug/integrations/slack"
       />
     );
   return <FullPageLoader aria-label="Connecting Slack" />;

package/src/pages/source-control-onboarding-page.test.tsx

@@ -2,7 +2,7 @@
 import '@testing-library/jest-dom/vitest';
 import {configureApiClient} from '@shipfox/client-api';
 import {screen} from '@testing-library/react';
-import {INTEGRATIONS_TEST_WID, jsonResponse, renderIntegrationsPage} from '#test/render.js';
+import {jsonResponse, renderIntegrationsPage} from '#test/render.js';
 import {SourceControlOnboardingPage} from './source-control-onboarding-page.js';
 
 describe('SourceControlOnboardingPage', () => {
@@ -24,10 +24,10 @@ describe('SourceControlOnboardingPage', () => {
     configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
 
     renderIntegrationsPage({
-      path: `/workspaces/${INTEGRATIONS_TEST_WID}/integrations`,
-      routePath: '/workspaces/$wid/integrations',
+      path: '/w/acme/integrations',
+      routePath: '/w/$workspaceSlug/integrations',
       element: <SourceControlOnboardingPage />,
-      extraRoutes: ['/workspaces/$wid/integrations/github'],
+      extraRoutes: ['/w/$workspaceSlug/integrations/github'],
     });
 
     expect(await screen.findByRole('heading', {name: 'Install source control'})).toBeVisible();

package/src/pages/source-control-onboarding-page.tsx

@@ -17,12 +17,12 @@ export function SourceControlOnboardingPage() {
       </header>
 
       <ProviderGrid
+        workspaceSlug={workspace.slug}
         providers={providersQuery.data ?? []}
         isPending={providersQuery.isPending}
         isFetching={providersQuery.isFetching}
         error={providersQuery.isError ? providersQuery.error : undefined}
         onRetry={() => void providersQuery.refetch()}
-        workspaceId={workspace.id}
         emptyMessage="Enable at least one source-control provider in the application settings."
       />
     </div>