@shipfox/client-integrations 5.0.0 → 6.0.2

package/src/hooks/api/webhook-connections.ts

@@ -1,11 +1,22 @@
 import type {
   CreateWebhookConnectionBodyDto,
-  ListWebhookConnectionsResponseDto,
   UpdateWebhookConnectionBodyDto,
-  WebhookConnectionDto,
 } from '@shipfox/api-integration-webhook-dto';
-import {apiRequest} from '@shipfox/client-api';
-import {type QueryClient, useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+import {
+  listWebhookConnectionsResponseSchema,
+  webhookConnectionDtoSchema,
+} from '@shipfox/api-integration-webhook-dto';
+import {checkedApiRequest, emptyResponseSchema} from '@shipfox/client-api';
+import {
+  type FetchQueryOptions,
+  type QueryClient,
+  queryOptions,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query';
+import type {WebhookConnection} from '#core/models.js';
+import {toWebhookConnection} from './integration-mapper.js';
 import {integrationsQueryKeys} from './integrations.js';
 
 export const webhookConnectionsQueryKeys = {
@@ -13,6 +24,17 @@ export const webhookConnectionsQueryKeys = {
   list: (workspaceId: string) => [...webhookConnectionsQueryKeys.all, 'list', workspaceId] as const,
 };
 
+type WebhookConnectionsListQueryKey =
+  | ReturnType<typeof webhookConnectionsQueryKeys.list>
+  | readonly ['webhook-connections', 'list'];
+
+type WebhookConnectionsListQueryOptions = FetchQueryOptions<
+  WebhookConnection[],
+  Error,
+  WebhookConnection[],
+  WebhookConnectionsListQueryKey
+>;
+
 export async function listWebhookConnections({
   workspaceId,
   signal,
@@ -21,17 +43,24 @@ export async function listWebhookConnections({
   signal?: AbortSignal;
 }) {
   const search = new URLSearchParams({workspace_id: workspaceId});
-  return await apiRequest<ListWebhookConnectionsResponseDto>(
+  const response = await checkedApiRequest(
+    listWebhookConnectionsResponseSchema,
     `/integrations/webhook/connections?${search.toString()}`,
     {signal},
   );
+  return response.connections.map(toWebhookConnection);
 }
 
 export async function createWebhookConnection(body: CreateWebhookConnectionBodyDto) {
-  return await apiRequest<WebhookConnectionDto>('/integrations/webhook/connections', {
-    method: 'POST',
-    body,
-  });
+  const response = await checkedApiRequest(
+    webhookConnectionDtoSchema,
+    '/integrations/webhook/connections',
+    {
+      method: 'POST',
+      body,
+    },
+  );
+  return toWebhookConnection(response);
 }
 
 export async function updateWebhookConnection({
@@ -41,23 +70,35 @@ export async function updateWebhookConnection({
   connectionId: string;
   body: UpdateWebhookConnectionBodyDto;
 }) {
-  return await apiRequest<WebhookConnectionDto>(
+  const response = await checkedApiRequest(
+    webhookConnectionDtoSchema,
     `/integrations/webhook/connections/${encodeURIComponent(connectionId)}`,
     {method: 'PATCH', body},
   );
+  return toWebhookConnection(response);
 }
 
 export async function deleteWebhookConnection({connectionId}: {connectionId: string}) {
-  await apiRequest<void>(`/integrations/webhook/connections/${encodeURIComponent(connectionId)}`, {
-    method: 'DELETE',
-  });
+  await checkedApiRequest(
+    emptyResponseSchema,
+    `/integrations/webhook/connections/${encodeURIComponent(connectionId)}`,
+    {
+      method: 'DELETE',
+    },
+  );
 }
 
 export function useWebhookConnectionsQuery(workspaceId: string | undefined) {
-  return useQuery({
+  return useQuery(webhookConnectionsQueryOptions(workspaceId));
+}
+
+export function webhookConnectionsQueryOptions(
+  workspaceId: string | undefined,
+): WebhookConnectionsListQueryOptions {
+  return queryOptions({
     queryKey: workspaceId
       ? webhookConnectionsQueryKeys.list(workspaceId)
-      : [...webhookConnectionsQueryKeys.all, 'list'],
+      : ([...webhookConnectionsQueryKeys.all, 'list'] as const),
     enabled: Boolean(workspaceId),
     queryFn: ({signal}) => listWebhookConnections({workspaceId: workspaceId ?? '', signal}),
   });
@@ -68,7 +109,7 @@ export function useCreateWebhookConnectionMutation() {
   return useMutation({
     mutationFn: createWebhookConnection,
     onSuccess: async (connection) => {
-      await invalidateWebhookConnectionViews(queryClient, connection.workspace_id);
+      await invalidateWebhookConnectionViews(queryClient, connection.workspaceId);
     },
   });
 }
@@ -85,7 +126,7 @@ export function useUpdateWebhookConnectionMutation() {
       body: UpdateWebhookConnectionBodyDto;
     }) => updateWebhookConnection({connectionId, body}),
     onSuccess: async (connection) => {
-      await invalidateWebhookConnectionViews(queryClient, connection.workspace_id);
+      await invalidateWebhookConnectionViews(queryClient, connection.workspaceId);
     },
   });
 }

package/src/index.ts

@@ -1,10 +1,11 @@
+export * from '@shipfox/integration-icons';
+export * from '#core/models.js';
 export * from './components/connection-picker.js';
 export * from './components/integration-gallery.js';
 export * from './components/redirect-install-page.js';
 export * from './components/repository-picker.js';
 export * from './connection-status-badge.js';
 export * from './hooks/api/integrations.js';
-export * from './integration-icon.js';
 export * from './pages/gitea-install-page.js';
 export * from './pages/github-install-page.js';
 export * from './pages/linear-callback-page.js';

package/src/linear-callback.ts

@@ -1,32 +1,40 @@
 import type {LinearCallbackQueryDto} from '@shipfox/api-integration-linear-dto';
 import {ApiError} from '@shipfox/client-api';
+import {
+  type BrowserStorage,
+  type BrowserStorageKey,
+  createTypedBrowserStorage,
+} from '@shipfox/client-ui';
 
 export const LINEAR_INSTALL_WORKSPACE_KEY = 'shipfox.linear-install.workspace-id';
 
-type WorkspaceStorage = Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>;
+type WorkspaceStorage = BrowserStorage | undefined;
+
+const linearInstallWorkspaceStorageKey = {
+  key: LINEAR_INSTALL_WORKSPACE_KEY,
+  lifetime: 'session',
+  // This is a one-shot navigation hint, not private workspace state. It must
+  // remain readable on an OAuth callback before workspace hydration completes;
+  // the callback state and returned connection are the authoritative checks.
+  principalScope: 'global',
+  serialize: (workspaceId: string) => workspaceId,
+  parse: (value: string) => value || undefined,
+} satisfies BrowserStorageKey<string>;
 
 export function saveLinearInstallWorkspace(storage: WorkspaceStorage, workspaceId: string): void {
-  try {
-    storage.setItem(LINEAR_INSTALL_WORKSPACE_KEY, workspaceId);
-  } catch {
-    // Storage only improves recovery navigation; callback input always comes from the URL.
-  }
+  installWorkspaceStorage(storage).write(workspaceId);
 }
 
 export function readLinearInstallWorkspace(storage: WorkspaceStorage): string | undefined {
-  try {
-    return storage.getItem(LINEAR_INSTALL_WORKSPACE_KEY) ?? undefined;
-  } catch {
-    return undefined;
-  }
+  return installWorkspaceStorage(storage).read();
 }
 
 export function clearLinearInstallWorkspace(storage: WorkspaceStorage): void {
-  try {
-    storage.removeItem(LINEAR_INSTALL_WORKSPACE_KEY);
-  } catch {
-    // A stale navigation hint cannot alter the callback request or its response.
-  }
+  installWorkspaceStorage(storage).remove();
+}
+
+function installWorkspaceStorage(storage: WorkspaceStorage) {
+  return createTypedBrowserStorage(() => storage, linearInstallWorkspaceStorageKey);
 }
 
 export function parseLinearCallbackQuery(

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

@@ -5,16 +5,14 @@ import {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-fiel
 import {toast} from '@shipfox/react-ui/toast';
 import {Header, Text} from '@shipfox/react-ui/typography';
 import {useForm} from '@tanstack/react-form';
-import {useQueryClient} from '@tanstack/react-query';
 import {Link, useNavigate} from '@tanstack/react-router';
 import {useState} from 'react';
-import {integrationsQueryKeys, useCreateGiteaConnectionMutation} from '#hooks/api/integrations.js';
+import {useCreateGiteaConnectionMutation} from '#hooks/api/integrations.js';
 import {giteaConnectErrorToFormError} from './gitea-form-errors.js';
 
 export function GiteaInstallPage() {
   const workspace = useActiveWorkspace();
   const connect = useCreateGiteaConnectionMutation();
-  const queryClient = useQueryClient();
   const navigate = useNavigate();
   const [formError, setFormError] = useState<string | undefined>();
 
@@ -25,13 +23,6 @@ export function GiteaInstallPage() {
       const workspaceId = workspace.id;
       try {
         await connect.mutateAsync({workspace_id: workspaceId, org: value.org.trim()});
-        await queryClient.invalidateQueries({
-          queryKey: integrationsQueryKeys.sourceConnections(workspaceId),
-          // The workspace home is the next active observer, not this page, so the
-          // default 'active' refetch would no-op and leave the cache stale until
-          // after the home redirects back here.
-          refetchType: 'all',
-        });
         toast.success('Gitea organization installed.');
         await navigate({to: '/workspaces/$wid', params: {wid: workspaceId}});
       } catch (error) {

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

@@ -1,13 +1,14 @@
-import type {LinearCallbackResponseDto} from '@shipfox/api-integration-linear-dto';
 import {useRefreshAuth} from '@shipfox/client-auth';
-import {createSingleFlight} from '@shipfox/client-ui';
+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, useSearch} from '@tanstack/react-router';
+import {useNavigate} from '@tanstack/react-router';
 import {useEffect, useMemo, useState} from 'react';
+import {useCompleteIntegrationCallback} from '#application/complete-integration-callback.js';
 import {CallbackStatusShell} from '#components/callback-status-shell.js';
-import {integrationsQueryKeys, useCompleteLinearCallbackMutation} from '#hooks/api/integrations.js';
+import type {IntegrationConnection} from '#core/models.js';
+import {useCompleteLinearCallbackMutation} from '#hooks/api/integrations.js';
 import {
   classifyLinearCallbackError,
   clearLinearInstallWorkspace,
@@ -19,7 +20,7 @@ import {
 
 // Retain only recent completions: this bounds long-lived callback pages while
 // still covering StrictMode and immediate Back/Forward remounts.
-const callbackRequests = createSingleFlight<string, LinearCallbackResponseDto>({
+const callbackRequests = createSingleFlight<string, IntegrationConnection>({
   maxTerminalResults: 32,
 });
 // Keeps the success toast firing once per distinct callback even though the
@@ -27,19 +28,12 @@ const callbackRequests = createSingleFlight<string, LinearCallbackResponseDto>({
 const toastedCallbacks = new Set<string>();
 
 export function LinearCallbackPage() {
-  const search = useSearch({strict: false});
   const navigate = useNavigate();
   const refreshAuth = useRefreshAuth();
-  const queryClient = useQueryClient();
+  const completeIntegrationCallback = useCompleteIntegrationCallback();
   const {mutateAsync: completeLinearCallback} = useCompleteLinearCallbackMutation();
-  const params = useMemo(() => parseLinearCallbackQuery(search), [search]);
-  const workspaceId = useMemo(() => {
-    try {
-      return readLinearInstallWorkspace(window.sessionStorage);
-    } catch {
-      return undefined;
-    }
-  }, []);
+  const params = useRouteSearch(parseLinearCallbackQuery);
+  const workspaceId = useMemo(() => readLinearInstallWorkspace(sessionStorageOrUndefined()), []);
   const [failure, setFailure] = useState<LinearCallbackFailure | undefined>();
   useEffect(() => {
     if (!params) return;
@@ -49,27 +43,21 @@ export function LinearCallbackPage() {
     const request = callbackRequests.run(
       key,
       async () =>
-        await refreshAuth().then(
-          async (session) =>
-            await completeLinearCallback({query: params, token: session.accessToken}),
-        ),
+        await completeIntegrationCallback({
+          input: params,
+          refreshAuth,
+          complete: async (query, token) => await completeLinearCallback({query, token}),
+        }),
     );
 
     request.then(
       async (connection) => {
         if (disposed) return;
         try {
-          clearLinearInstallWorkspace(window.sessionStorage);
+          clearLinearInstallWorkspace(sessionStorageOrUndefined());
         } catch {
           // The successful API response remains the source of truth for navigation.
         }
-        try {
-          await queryClient.invalidateQueries({
-            queryKey: integrationsQueryKeys.connectionsByWorkspace(connection.workspace_id),
-          });
-        } catch {
-          // Cache refresh is best effort: the successful callback is already committed server-side.
-        }
         if (disposed) return;
         if (!toastedCallbacks.has(key)) {
           toastedCallbacks.add(key);
@@ -78,7 +66,7 @@ export function LinearCallbackPage() {
         try {
           await navigate({
             to: '/workspaces/$wid/settings/integrations',
-            params: {wid: connection.workspace_id},
+            params: {wid: connection.workspaceId},
             replace: true,
           });
         } catch {
@@ -94,7 +82,7 @@ export function LinearCallbackPage() {
     return () => {
       disposed = true;
     };
-  }, [completeLinearCallback, navigate, params, queryClient, refreshAuth]);
+  }, [completeIntegrationCallback, completeLinearCallback, navigate, params, refreshAuth]);
 
   if (!params) {
     return (

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

@@ -1,3 +1,4 @@
+import {sessionStorageOrUndefined} from '@shipfox/client-ui';
 import {useCallback} from 'react';
 import {RedirectInstallPage} from '#components/redirect-install-page.js';
 import {useCreateLinearInstallMutation} from '#hooks/api/integrations.js';
@@ -17,7 +18,7 @@ export function LinearInstallPage() {
       loadingLabel="Connecting Linear"
       beforeRedirect={(workspaceId) => {
         try {
-          saveLinearInstallWorkspace(window.sessionStorage, workspaceId);
+          saveLinearInstallWorkspace(sessionStorageOrUndefined(), workspaceId);
         } catch {
           // Storage can be disabled before the helper gets a usable Storage object.
         }

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

@@ -162,7 +162,11 @@ describe('SentryCallbackPage', () => {
 
     fireEvent.click(await screen.findByRole('button', {name: 'Install'}));
 
-    expect(await screen.findByText('Sentry rejected the code.')).toBeInTheDocument();
+    expect(
+      await screen.findByText(
+        'Sentry did not accept this install. Start the install again from workspace settings.',
+      ),
+    ).toBeInTheDocument();
     expect(screen.getByRole('link', {name: 'Start over'})).toBeInTheDocument();
     expect(screen.queryByRole('button', {name: 'Retry'})).not.toBeInTheDocument();
   });

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

@@ -1,16 +1,17 @@
-import type {SentryConnectResponseDto} from '@shipfox/api-integration-sentry-dto';
 import {useAuthState, useRefreshAuth} from '@shipfox/client-auth';
-import {createSingleFlight} from '@shipfox/client-ui';
+import {useRouteSearch} from '@shipfox/client-shell/runtime';
+import {createSingleFlight, 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, useSearch} from '@tanstack/react-router';
+import {Link, useNavigate} from '@tanstack/react-router';
 import {useEffect, useMemo, useRef, useState} from 'react';
-import {connectSentry, integrationsQueryKeys} from '#hooks/api/integrations.js';
+import {useCompleteIntegrationCallback} from '#application/complete-integration-callback.js';
+import type {IntegrationConnection} from '#core/models.js';
+import {connectSentry} from '#hooks/api/integrations.js';
 import {
   classifySentryConnectError,
   clearSentryInstallWorkspace,
@@ -20,17 +21,19 @@ import {
   type SentryConnectFailure,
 } from '#sentry-callback.js';
 
-const connectRequests = createSingleFlight<string, SentryConnectResponseDto>();
+const connectRequests = createSingleFlight<string, IntegrationConnection>();
 
 export function SentryCallbackPage() {
-  const search = useSearch({strict: false});
   const navigate = useNavigate();
   const refreshAuth = useRefreshAuth();
   const {workspaces, isLoading} = useAuthState();
-  const queryClient = useQueryClient();
+  const completeIntegrationCallback = useCompleteIntegrationCallback();
 
-  const params = useMemo(() => parseSentryCallbackParams(search), [search]);
-  const storedWorkspaceId = useMemo(() => readSentryInstallWorkspace(window.sessionStorage), []);
+  const params = useRouteSearch(parseSentryCallbackParams);
+  const storedWorkspaceId = useMemo(
+    () => readSentryInstallWorkspace(sessionStorageOrUndefined()),
+    [],
+  );
   const preselection = preselectSentryWorkspace(storedWorkspaceId, workspaces);
   const preselectedId = preselection.kind === 'pick' ? preselection.preselectedId : undefined;
 
@@ -101,24 +104,24 @@ export function SentryCallbackPage() {
     const request = connectRequests.run(
       key,
       async () =>
-        await refreshAuth().then((session) =>
-          connectSentry({
-            body: {
-              workspace_id: workspaceId,
-              code: params.code,
-              installation_id: params.installationId,
-            },
-            token: session.accessToken,
-          }),
-        ),
+        await completeIntegrationCallback({
+          input: workspaceId,
+          refreshAuth,
+          complete: async (selectedWorkspaceId, token) =>
+            await connectSentry({
+              body: {
+                workspace_id: selectedWorkspaceId,
+                code: params.code,
+                installation_id: params.installationId,
+              },
+              token,
+            }),
+        }),
     );
 
     request
       .then(async () => {
-        clearSentryInstallWorkspace(window.sessionStorage);
-        await queryClient.invalidateQueries({
-          queryKey: integrationsQueryKeys.connectionsByWorkspace(workspaceId),
-        });
+        clearSentryInstallWorkspace(sessionStorageOrUndefined());
         if (disposedRef.current) return;
         toast.success('Sentry installed.');
         await navigate({
@@ -133,7 +136,7 @@ export function SentryCallbackPage() {
         if (classified.kind === 'terminal') {
           // Only a fresh install (new grant code) can recover; the stored
           // handoff has served its purpose either way.
-          clearSentryInstallWorkspace(window.sessionStorage);
+          clearSentryInstallWorkspace(sessionStorageOrUndefined());
         }
         setConnectingId(undefined);
         setFailure({workspaceId, failure: classified});

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

@@ -1,3 +1,4 @@
+import {sessionStorageOrUndefined} from '@shipfox/client-ui';
 import {RedirectInstallPage} from '#components/redirect-install-page.js';
 import {createSentryInstall} from '#hooks/api/integrations.js';
 import {saveSentryInstallWorkspace} from '#sentry-callback.js';
@@ -11,7 +12,7 @@ export function SentryInstallPage() {
       // Sentry's redirect has no state param; the stored id lets the callback
       // pre-select this workspace. Saving never throws (see helper).
       beforeRedirect={(workspaceId) => {
-        saveSentryInstallWorkspace(window.sessionStorage, workspaceId);
+        saveSentryInstallWorkspace(sessionStorageOrUndefined(), workspaceId);
       }}
     />
   );

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

@@ -1,13 +1,14 @@
-import type {SlackCallbackResponseDto} from '@shipfox/api-integration-slack-dto';
 import {useRefreshAuth} from '@shipfox/client-auth';
-import {createSingleFlight} from '@shipfox/client-ui';
+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, useSearch} from '@tanstack/react-router';
+import {useNavigate} from '@tanstack/react-router';
 import {useEffect, useMemo, useState} from 'react';
+import {useCompleteIntegrationCallback} from '#application/complete-integration-callback.js';
 import {CallbackStatusShell} from '#components/callback-status-shell.js';
-import {integrationsQueryKeys, useCompleteSlackCallbackMutation} from '#hooks/api/integrations.js';
+import type {IntegrationConnection} from '#core/models.js';
+import {useCompleteSlackCallbackMutation} from '#hooks/api/integrations.js';
 import {
   classifySlackCallbackError,
   clearSlackInstallWorkspace,
@@ -19,20 +20,19 @@ import {
 
 // Retain only recent completions: this bounds long-lived callback pages while
 // still covering StrictMode and immediate Back/Forward remounts.
-const callbackRequests = createSingleFlight<string, SlackCallbackResponseDto>({
+const callbackRequests = createSingleFlight<string, IntegrationConnection>({
   maxTerminalResults: 32,
 });
 const completedCallbacks = new Set<string>();
 const toastedCallbacks = new Set<string>();
 
 export function SlackCallbackPage() {
-  const search = useSearch({strict: false});
   const navigate = useNavigate();
   const refreshAuth = useRefreshAuth();
-  const queryClient = useQueryClient();
+  const completeIntegrationCallback = useCompleteIntegrationCallback();
   const {mutateAsync: completeSlackCallback} = useCompleteSlackCallbackMutation();
-  const params = useMemo(() => parseSlackCallbackQuery(search), [search]);
-  const workspaceId = useMemo(() => readSlackInstallWorkspace(window.sessionStorage), []);
+  const params = useRouteSearch(parseSlackCallbackQuery);
+  const workspaceId = useMemo(() => readSlackInstallWorkspace(sessionStorageOrUndefined()), []);
   const [failure, setFailure] = useState<SlackCallbackFailure>();
   const [completedWorkspaceId, setCompletedWorkspaceId] = useState<string>();
 
@@ -43,31 +43,25 @@ export function SlackCallbackPage() {
     const request = callbackRequests.run(
       key,
       async () =>
-        await refreshAuth().then(
-          async (session) =>
-            await completeSlackCallback({query: params, token: session.accessToken}),
-        ),
+        await completeIntegrationCallback({
+          input: params,
+          refreshAuth,
+          complete: async (query, token) => await completeSlackCallback({query, token}),
+        }),
     );
     request.then(
       async (connection) => {
         if (disposed) return;
         if (completedCallbacks.has(key)) {
-          setCompletedWorkspaceId(connection.workspace_id);
+          setCompletedWorkspaceId(connection.workspaceId);
           return;
         }
         completedCallbacks.add(key);
         try {
-          clearSlackInstallWorkspace(window.sessionStorage);
+          clearSlackInstallWorkspace(sessionStorageOrUndefined());
         } catch {
           // The successful API response remains the source of truth.
         }
-        try {
-          await queryClient.invalidateQueries({
-            queryKey: integrationsQueryKeys.connectionsByWorkspace(connection.workspace_id),
-          });
-        } catch {
-          // Navigation can continue when cache refresh is unavailable.
-        }
         if (disposed) return;
         if (!toastedCallbacks.has(key)) {
           toastedCallbacks.add(key);
@@ -76,11 +70,11 @@ export function SlackCallbackPage() {
         try {
           await navigate({
             to: '/workspaces/$wid/settings/integrations',
-            params: {wid: connection.workspace_id},
+            params: {wid: connection.workspaceId},
             replace: true,
           });
         } catch {
-          if (!disposed) setCompletedWorkspaceId(connection.workspace_id);
+          if (!disposed) setCompletedWorkspaceId(connection.workspaceId);
         }
       },
       (error: unknown) => {
@@ -90,7 +84,7 @@ export function SlackCallbackPage() {
     return () => {
       disposed = true;
     };
-  }, [completeSlackCallback, navigate, params, queryClient, refreshAuth]);
+  }, [completeIntegrationCallback, completeSlackCallback, navigate, params, refreshAuth]);
 
   if (!params)
     return (

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

@@ -1,3 +1,4 @@
+import {sessionStorageOrUndefined} from '@shipfox/client-ui';
 import {useCallback} from 'react';
 import {RedirectInstallPage} from '#components/redirect-install-page.js';
 import {useCreateSlackInstallMutation} from '#hooks/api/integrations.js';
@@ -15,7 +16,7 @@ export function SlackInstallPage() {
       errorFallbackMessage="Could not start Slack install."
       loadingLabel="Connecting Slack"
       beforeRedirect={(workspaceId) =>
-        saveSlackInstallWorkspace(window.sessionStorage, workspaceId)
+        saveSlackInstallWorkspace(sessionStorageOrUndefined(), workspaceId)
       }
     />
   );

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

@@ -17,7 +17,11 @@ export function SourceControlOnboardingPage() {
       </header>
 
       <ProviderGrid
-        providersQuery={providersQuery}
+        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."
       />

package/src/provider-catalog.ts

@@ -1,3 +1,4 @@
+import {PROVIDER_ICONS} from '@shipfox/integration-icons';
 import type {IconName} from '@shipfox/react-ui/icon';
 
 // Literal union (not string) so `<Link to={catalog.setupPath}>` stays typed
@@ -25,31 +26,31 @@ export type ProviderCatalogEntry = RouteProviderCatalogEntry | ModalProviderCata
 export const PROVIDER_CATALOG: Record<string, ProviderCatalogEntry> = {
   github: {
     kind: 'redirect-install',
-    iconName: 'github',
+    iconName: PROVIDER_ICONS.github,
     setupPath: '/workspaces/$wid/integrations/github',
   },
   sentry: {
     kind: 'redirect-install',
-    iconName: 'sentry',
+    iconName: PROVIDER_ICONS.sentry,
     setupPath: '/workspaces/$wid/integrations/sentry',
   },
   linear: {
     kind: 'redirect-install',
-    iconName: 'linear',
+    iconName: PROVIDER_ICONS.linear,
     setupPath: '/workspaces/$wid/integrations/linear',
   },
   slack: {
     kind: 'redirect-install',
-    iconName: 'slack',
+    iconName: PROVIDER_ICONS.slack,
     setupPath: '/workspaces/$wid/integrations/slack',
   },
   gitea: {
     kind: 'direct-connect',
-    iconName: 'gitea',
+    iconName: PROVIDER_ICONS.gitea,
     setupPath: '/workspaces/$wid/integrations/gitea',
   },
   webhook: {
     kind: 'modal-connect',
-    iconName: 'webhookLine',
+    iconName: PROVIDER_ICONS.webhook,
   },
 };