@shipfox/client-integrations 0.2.0 → 2.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-integrations",
   "license": "MIT",
-  "version": "0.2.0",
+  "version": "2.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -11,60 +11,38 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "imports": {
-    "#*": {
-      "types": "./src/*",
-      "workspace-source": "./src/*",
-      "development": "./src/*",
-      "default": "./dist/*"
-    },
+    "#*": "./dist/*",
     "#test/*": "./test/*"
   },
   "exports": {
     ".": {
-      "development": {
-        "types": "./src/index.ts",
-        "default": "./src/index.ts"
-      },
-      "default": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      }
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./feature": {
-      "development": {
-        "types": "./src/feature.ts",
-        "default": "./src/feature.ts"
-      },
-      "default": {
-        "types": "./dist/feature.d.ts",
-        "default": "./dist/feature.js"
-      }
+      "types": "./dist/feature.d.ts",
+      "default": "./dist/feature.js"
     },
     "./routes/*": {
-      "development": {
-        "types": "./src/routes/*.tsx",
-        "default": "./src/routes/*.tsx"
-      },
-      "default": {
-        "types": "./dist/routes/*.d.ts",
-        "default": "./dist/routes/*.js"
-      }
+      "types": "./dist/routes/*.d.ts",
+      "default": "./dist/routes/*.js"
     }
   },
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
-    "@shipfox/api-integration-core-dto": "3.0.0",
-    "@shipfox/api-integration-gitea-dto": "3.0.0",
-    "@shipfox/api-integration-github-dto": "3.0.0",
-    "@shipfox/api-integration-sentry-dto": "3.0.0",
-    "@shipfox/api-integration-linear-dto": "3.0.0",
-    "@shipfox/client-api": "0.2.0",
-    "@shipfox/api-integration-webhook-dto": "3.0.0",
-    "@shipfox/client-auth": "0.2.0",
-    "@shipfox/client-shell": "0.2.0",
-    "@shipfox/react-ui": "0.3.1",
-    "@shipfox/client-ui": "0.2.0"
+    "@shipfox/api-integration-core-dto": "6.0.0",
+    "@shipfox/api-integration-gitea-dto": "6.0.0",
+    "@shipfox/api-integration-github-dto": "6.0.0",
+    "@shipfox/api-integration-linear-dto": "6.0.0",
+    "@shipfox/api-integration-slack-dto": "6.0.0",
+    "@shipfox/api-integration-sentry-dto": "6.0.0",
+    "@shipfox/api-integration-webhook-dto": "6.0.0",
+    "@shipfox/client-auth": "2.0.0",
+    "@shipfox/client-api": "1.0.0",
+    "@shipfox/client-shell": "2.0.0",
+    "@shipfox/react-ui": "0.3.3",
+    "@shipfox/client-ui": "2.0.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",
@@ -98,13 +76,13 @@
     "tailwindcss": "^4.1.13",
     "vite": "^8.0.3",
     "vitest": "^4.1.5",
-    "@shipfox/biome": "1.8.1",
-    "@shipfox/swc": "1.2.5",
-    "@shipfox/client-test-setup": "0.0.2",
-    "@shipfox/typescript": "1.1.6",
+    "@shipfox/biome": "1.8.2",
+    "@shipfox/client-test-setup": "0.0.3",
+    "@shipfox/swc": "1.2.6",
     "@shipfox/ts-config": "1.3.8",
-    "@shipfox/vite": "1.2.4",
-    "@shipfox/vitest": "1.2.2"
+    "@shipfox/vite": "1.2.5",
+    "@shipfox/typescript": "1.1.7",
+    "@shipfox/vitest": "1.2.3"
   },
   "scripts": {
     "build": "shipfox-swc",

package/src/components/callback-status-shell.tsx

@@ -0,0 +1,73 @@
+import {ButtonLink} from '@shipfox/react-ui/button';
+import {Callout} from '@shipfox/react-ui/callout';
+import {Text} from '@shipfox/react-ui/typography';
+import {Link} from '@tanstack/react-router';
+import {useEffect, useRef} from 'react';
+
+export function CallbackStatusShell({
+  title,
+  message,
+  startOver,
+  switchAccount,
+  workspaceId,
+  installPath,
+}: {
+  title: string;
+  message: string;
+  startOver?: boolean;
+  switchAccount?: boolean;
+  workspaceId?: string | undefined;
+  installPath: '/workspaces/$wid/integrations/linear' | '/workspaces/$wid/integrations/slack';
+}) {
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  useEffect(() => headingRef.current?.focus(), []);
+  const recoveryVariant = startOver || switchAccount ? 'muted' : 'base';
+  const settings = workspaceId ? (
+    <ButtonLink asChild variant={recoveryVariant} className="min-h-44 w-full sm:w-fit">
+      <Link to="/workspaces/$wid/settings/integrations" params={{wid: workspaceId}}>
+        Back to integrations
+      </Link>
+    </ButtonLink>
+  ) : (
+    <ButtonLink asChild variant={recoveryVariant} className="min-h-44 w-full sm:w-fit">
+      <Link to="/">Back to Shipfox</Link>
+    </ButtonLink>
+  );
+  const logoutRedirect = workspaceId ? installPath.replace('$wid', workspaceId) : undefined;
+
+  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">
+        <h2 ref={headingRef} tabIndex={-1} className="text-24 font-semibold outline-none">
+          {title}
+        </h2>
+        <Callout role="alert" type="error">
+          <Text size="sm">{message}</Text>
+        </Callout>
+        <div className="flex flex-col gap-8 sm:flex-row sm:items-center">
+          {switchAccount ? (
+            <ButtonLink asChild className="min-h-44 w-full sm:w-fit">
+              <Link
+                to={
+                  workspaceId
+                    ? `/auth/logout?redirect=${encodeURIComponent(logoutRedirect ?? '/')}`
+                    : '/auth/logout'
+                }
+              >
+                Switch account
+              </Link>
+            </ButtonLink>
+          ) : null}
+          {startOver && workspaceId ? (
+            <ButtonLink asChild className="min-h-44 w-full sm:w-fit">
+              <Link to={installPath} params={{wid: workspaceId}}>
+                Start over
+              </Link>
+            </ButtonLink>
+          ) : null}
+          {settings}
+        </div>
+      </div>
+    </main>
+  );
+}

package/src/components/integration-gallery.stories.tsx

@@ -25,6 +25,7 @@ const SETUP_PATHS = [
   '/workspaces/$wid/integrations/github',
   '/workspaces/$wid/integrations/sentry',
   '/workspaces/$wid/integrations/linear',
+  '/workspaces/$wid/integrations/slack',
   '/workspaces/$wid/integrations/gitea',
   '/workspaces/$wid/settings/events',
 ] as const;
@@ -46,6 +47,7 @@ const PROVIDERS: IntegrationProviderDto[] = [
   {provider: 'github', display_name: 'GitHub', capabilities: ['source_control']},
   {provider: 'sentry', display_name: 'Sentry', capabilities: []},
   {provider: 'linear', display_name: 'Linear', capabilities: ['agent_tools']},
+  {provider: 'slack', display_name: 'Slack', capabilities: ['agent_tools']},
   {provider: 'gitea', display_name: 'Gitea', capabilities: ['source_control']},
   {provider: 'webhook', display_name: 'Webhook', capabilities: []},
 ];
@@ -230,6 +232,22 @@ function connectionsForScenario(scenario: Scenario): IntegrationConnectionDto[]
   }
   return [
     connection({display_name: 'acme-corp', lifecycle_status: 'active'}),
+    connection({
+      id: '99999999-9999-4999-8999-999999999999',
+      provider: 'slack',
+      display_name: 'Slack Acme',
+      lifecycle_status: 'active',
+      capabilities: ['agent_tools'],
+      external_url: 'https://app.slack.com/client/T123',
+    }),
+    connection({
+      id: 'aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa',
+      provider: 'slack',
+      display_name: 'Slack disabled',
+      lifecycle_status: 'disabled',
+      capabilities: ['agent_tools'],
+      external_url: undefined,
+    }),
     connection({
       id: '88888888-8888-4888-8888-888888888888',
       provider: 'linear',

package/src/components/redirect-install-page.tsx

@@ -10,6 +10,7 @@ import {useEffect, useRef, useState} from 'react';
 interface RedirectInstallPageProps {
   installRequest: (body: {workspace_id: string}) => Promise<{install_url: string}>;
   errorFallbackMessage: string;
+  loadingLabel?: string;
   /**
    * Runs before leaving the app (e.g. to persist the workspace id for a
    * state-less provider callback). Must not throw — a failed side effect
@@ -23,6 +24,7 @@ interface RedirectInstallPageProps {
 export function RedirectInstallPage({
   installRequest,
   errorFallbackMessage,
+  loadingLabel = 'Starting installation',
   beforeRedirect,
   assignLocation = (url) => window.location.assign(url),
 }: RedirectInstallPageProps) {
@@ -64,5 +66,5 @@ export function RedirectInstallPage({
     );
   }
 
-  return <FullPageLoader />;
+  return <FullPageLoader aria-label={loadingLabel} />;
 }

package/src/feature.ts

@@ -18,6 +18,11 @@ export const integrationsFeature = defineClientFeature({
       parent: 'root',
       impl: '@shipfox/client-integrations/routes/sentry-callback',
     },
+    {
+      path: '/integrations/slack/callback',
+      parent: 'root',
+      impl: '@shipfox/client-integrations/routes/slack-callback',
+    },
     {
       path: '/workspaces/$wid/integrations',
       parent: 'workspaceLayout',
@@ -43,5 +48,10 @@ export const integrationsFeature = defineClientFeature({
       parent: 'workspaceLayout',
       impl: '@shipfox/client-integrations/routes/sentry',
     },
+    {
+      path: '/workspaces/$wid/integrations/slack',
+      parent: 'workspaceLayout',
+      impl: '@shipfox/client-integrations/routes/slack',
+    },
   ],
 });

package/src/hooks/api/integrations.test.ts

@@ -2,7 +2,9 @@ import type {IntegrationConnectionDto} from '@shipfox/api-integration-core-dto';
 import {configureApiClient} from '@shipfox/client-api';
 import {
   completeLinearCallback,
+  completeSlackCallback,
   createLinearInstall,
+  createSlackInstall,
   listSourceConnections,
 } from './integrations.js';
 
@@ -54,6 +56,34 @@ describe('listSourceConnections', () => {
   });
 });
 
+describe('Slack transport', () => {
+  it('posts the install workspace and forwards an authenticated callback query', async () => {
+    const requests: Request[] = [];
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi.fn((input, init) => {
+        requests.push(new Request(input, init));
+        return Promise.resolve(jsonResponse(connection({provider: 'slack'})));
+      }),
+    });
+
+    await createSlackInstall({workspace_id: '11111111-1111-4111-8111-111111111111'});
+    await completeSlackCallback({
+      query: {code: 'grant code', state: 'signed state'},
+      token: 'session-token',
+    });
+
+    expect(requests[0]?.url).toBe('https://api.example.test/integrations/slack/install');
+    expect(await requests[0]?.json()).toEqual({
+      workspace_id: '11111111-1111-4111-8111-111111111111',
+    });
+    expect(requests[1]?.url).toBe(
+      'https://api.example.test/integrations/slack/callback/api?code=grant+code&state=signed+state',
+    );
+    expect(requests[1]?.headers.get('authorization')).toBe('Bearer session-token');
+  });
+});
+
 describe('Linear transport', () => {
   it('posts the install workspace and forwards an authenticated callback query', async () => {
     const requests: Request[] = [];

package/src/hooks/api/integrations.ts

@@ -26,9 +26,16 @@ import type {
   SentryConnectBodyDto,
   SentryConnectResponseDto,
 } from '@shipfox/api-integration-sentry-dto';
+import type {
+  CreateSlackInstallBodyDto,
+  CreateSlackInstallResponseDto,
+  SlackCallbackQueryDto,
+  SlackCallbackResponseDto,
+} from '@shipfox/api-integration-slack-dto';
 import {apiRequest} from '@shipfox/client-api';
 import {useInfiniteQuery, useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
 import {serializeLinearCallbackQuery} from '#linear-callback.js';
+import {serializeSlackCallbackQuery} from '#slack-callback.js';
 
 export const integrationsQueryKeys = {
   all: ['integrations'] as const,
@@ -129,6 +136,13 @@ export async function createLinearInstall(body: CreateLinearInstallBodyDto) {
   });
 }
 
+export async function createSlackInstall(body: CreateSlackInstallBodyDto) {
+  return await apiRequest<CreateSlackInstallResponseDto>('/integrations/slack/install', {
+    method: 'POST',
+    body,
+  });
+}
+
 export async function completeLinearCallback({
   query,
   token,
@@ -142,6 +156,19 @@ export async function completeLinearCallback({
   );
 }
 
+export async function completeSlackCallback({
+  query,
+  token,
+}: {
+  query: SlackCallbackQueryDto;
+  token: string;
+}) {
+  return await apiRequest<SlackCallbackResponseDto>(
+    `/integrations/slack/callback/api?${serializeSlackCallbackQuery(query)}`,
+    {headers: {authorization: `Bearer ${token}`}},
+  );
+}
+
 // Called from the callback route with an explicit bearer (same as the GitHub
 // callback): the route refreshes auth itself before forwarding the grant code.
 export async function connectSentry({body, token}: {body: SentryConnectBodyDto; token: string}) {
@@ -252,10 +279,18 @@ export function useCreateLinearInstallMutation() {
   return useMutation({mutationFn: createLinearInstall});
 }
 
+export function useCreateSlackInstallMutation() {
+  return useMutation({mutationFn: createSlackInstall});
+}
+
 export function useCompleteLinearCallbackMutation() {
   return useMutation({mutationFn: completeLinearCallback});
 }
 
+export function useCompleteSlackCallbackMutation() {
+  return useMutation({mutationFn: completeSlackCallback});
+}
+
 export function useUpdateIntegrationConnectionMutation() {
   const queryClient = useQueryClient();
   return useMutation({

package/src/index.ts

@@ -11,6 +11,9 @@ export * from './pages/linear-callback-page.js';
 export * from './pages/linear-install-page.js';
 export * from './pages/sentry-callback-page.js';
 export * from './pages/sentry-install-page.js';
+export * from './pages/slack-callback-page.js';
+export * from './pages/slack-install-page.js';
 export * from './pages/source-control-onboarding-page.js';
 export * from './provider-catalog.js';
 export * from './sentry-callback.js';
+export * from './slack-callback.js';

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

@@ -1,13 +1,11 @@
 import type {LinearCallbackResponseDto} from '@shipfox/api-integration-linear-dto';
 import {useRefreshAuth} from '@shipfox/client-auth';
-import {ButtonLink} from '@shipfox/react-ui/button';
-import {Callout} from '@shipfox/react-ui/callout';
 import {FullPageLoader} from '@shipfox/react-ui/loader';
 import {toast} from '@shipfox/react-ui/toast';
-import {Text} from '@shipfox/react-ui/typography';
 import {useQueryClient} from '@tanstack/react-query';
-import {Link, useNavigate, useSearch} from '@tanstack/react-router';
-import {useEffect, useMemo, useRef, useState} from 'react';
+import {useNavigate, useSearch} from '@tanstack/react-router';
+import {useEffect, useMemo, useState} from 'react';
+import {CallbackStatusShell} from '#components/callback-status-shell.js';
 import {integrationsQueryKeys, useCompleteLinearCallbackMutation} from '#hooks/api/integrations.js';
 import {
   classifyLinearCallbackError,
@@ -123,53 +121,14 @@ function LinearCallbackFailurePage({
   failure: LinearCallbackFailure;
   workspaceId: string | undefined;
 }) {
-  const headingRef = useRef<HTMLHeadingElement>(null);
-
-  useEffect(() => {
-    headingRef.current?.focus();
-  }, []);
-
-  const recoveryVariant = failure.startOver || failure.signIn ? 'muted' : 'base';
-  const switchAccountHref = workspaceId
-    ? `/auth/logout?redirect=${encodeURIComponent(`/workspaces/${workspaceId}/integrations/linear`)}`
-    : '/auth/logout';
-  const settingsLink = workspaceId ? (
-    <ButtonLink asChild variant={recoveryVariant} className="min-h-44 w-full sm:w-fit">
-      <Link to="/workspaces/$wid/settings/integrations" params={{wid: workspaceId}}>
-        Back to integrations
-      </Link>
-    </ButtonLink>
-  ) : (
-    <ButtonLink asChild variant={recoveryVariant} className="min-h-44 w-full sm:w-fit">
-      <Link to="/">Back to Shipfox</Link>
-    </ButtonLink>
-  );
-
   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">
-        <h2 ref={headingRef} tabIndex={-1} className="text-24 font-semibold outline-none">
-          {failure.title ?? 'Linear install could not be completed'}
-        </h2>
-        <Callout role="alert" type="error">
-          <Text size="sm">{failure.message}</Text>
-        </Callout>
-        <div className="flex flex-col gap-8 sm:flex-row sm:items-center">
-          {failure.signIn ? (
-            <ButtonLink asChild className="min-h-44 w-full sm:w-fit">
-              <Link to={switchAccountHref}>Switch account</Link>
-            </ButtonLink>
-          ) : null}
-          {failure.startOver && workspaceId ? (
-            <ButtonLink asChild className="min-h-44 w-full sm:w-fit">
-              <Link to="/workspaces/$wid/integrations/linear" params={{wid: workspaceId}}>
-                Start over
-              </Link>
-            </ButtonLink>
-          ) : null}
-          {settingsLink}
-        </div>
-      </div>
-    </main>
+    <CallbackStatusShell
+      title={failure.title ?? 'Linear install could not be completed'}
+      message={failure.message}
+      startOver={failure.startOver}
+      switchAccount={failure.signIn}
+      workspaceId={workspaceId}
+      installPath="/workspaces/$wid/integrations/linear"
+    />
   );
 }

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

@@ -14,6 +14,7 @@ export function LinearInstallPage() {
     <RedirectInstallPage
       installRequest={installRequest}
       errorFallbackMessage="Could not start Linear install."
+      loadingLabel="Connecting Linear"
       beforeRedirect={(workspaceId) => {
         try {
           saveLinearInstallWorkspace(window.sessionStorage, workspaceId);

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

@@ -7,6 +7,7 @@ export function SentryInstallPage() {
     <RedirectInstallPage
       installRequest={createSentryInstall}
       errorFallbackMessage="Could not start Sentry install."
+      loadingLabel="Connecting Sentry"
       // Sentry's redirect has no state param; the stored id lets the callback
       // pre-select this workspace. Saving never throws (see helper).
       beforeRedirect={(workspaceId) => {

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

@@ -0,0 +1,120 @@
+import type {SlackCallbackResponseDto} from '@shipfox/api-integration-slack-dto';
+import {useRefreshAuth} from '@shipfox/client-auth';
+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 {useEffect, useMemo, useState} from 'react';
+import {CallbackStatusShell} from '#components/callback-status-shell.js';
+import {integrationsQueryKeys, useCompleteSlackCallbackMutation} from '#hooks/api/integrations.js';
+import {
+  classifySlackCallbackError,
+  clearSlackInstallWorkspace,
+  parseSlackCallbackQuery,
+  readSlackInstallWorkspace,
+  type SlackCallbackFailure,
+  serializeSlackCallbackQuery,
+} from '#slack-callback.js';
+
+// Requests and committed keys remain for the document lifetime so Strict Mode,
+// browser Back, and remounts never replay Slack's single-use grant code.
+const callbackRequests = new Map<string, Promise<SlackCallbackResponseDto>>();
+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 {mutateAsync: completeSlackCallback} = useCompleteSlackCallbackMutation();
+  const params = useMemo(() => parseSlackCallbackQuery(search), [search]);
+  const workspaceId = useMemo(() => readSlackInstallWorkspace(window.sessionStorage), []);
+  const [failure, setFailure] = useState<SlackCallbackFailure>();
+  const [completedWorkspaceId, setCompletedWorkspaceId] = useState<string>();
+
+  useEffect(() => {
+    if (!params) return;
+    let disposed = false;
+    const key = serializeSlackCallbackQuery(params);
+    let request = callbackRequests.get(key);
+    if (!request) {
+      request = refreshAuth().then(
+        async (session) => await completeSlackCallback({query: params, token: session.token}),
+      );
+      callbackRequests.set(key, request);
+    }
+    request.then(
+      async (connection) => {
+        if (disposed) return;
+        if (completedCallbacks.has(key)) {
+          setCompletedWorkspaceId(connection.workspace_id);
+          return;
+        }
+        completedCallbacks.add(key);
+        try {
+          clearSlackInstallWorkspace(window.sessionStorage);
+        } 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);
+          toast.success('Slack installed.');
+        }
+        try {
+          await navigate({
+            to: '/workspaces/$wid/settings/integrations',
+            params: {wid: connection.workspace_id},
+            replace: true,
+          });
+        } catch {
+          if (!disposed) setCompletedWorkspaceId(connection.workspace_id);
+        }
+      },
+      (error: unknown) => {
+        if (!disposed) setFailure(classifySlackCallbackError(error));
+      },
+    );
+    return () => {
+      disposed = true;
+    };
+  }, [completeSlackCallback, navigate, params, queryClient, refreshAuth]);
+
+  if (!params)
+    return (
+      <CallbackStatusShell
+        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"
+      />
+    );
+  if (completedWorkspaceId)
+    return (
+      <CallbackStatusShell
+        title="Slack connected"
+        message="Slack is connected. Continue in integrations settings."
+        workspaceId={completedWorkspaceId}
+        installPath="/workspaces/$wid/integrations/slack"
+      />
+    );
+  if (failure)
+    return (
+      <CallbackStatusShell
+        {...failure}
+        workspaceId={workspaceId}
+        switchAccount={failure.signIn}
+        installPath="/workspaces/$wid/integrations/slack"
+      />
+    );
+  return <FullPageLoader aria-label="Connecting Slack" />;
+}

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

@@ -0,0 +1,22 @@
+import {useCallback} from 'react';
+import {RedirectInstallPage} from '#components/redirect-install-page.js';
+import {useCreateSlackInstallMutation} from '#hooks/api/integrations.js';
+import {saveSlackInstallWorkspace} from '#slack-callback.js';
+
+export function SlackInstallPage() {
+  const createInstall = useCreateSlackInstallMutation();
+  const installRequest = useCallback(
+    async (body: {workspace_id: string}) => await createInstall.mutateAsync(body),
+    [createInstall],
+  );
+  return (
+    <RedirectInstallPage
+      installRequest={installRequest}
+      errorFallbackMessage="Could not start Slack install."
+      loadingLabel="Connecting Slack"
+      beforeRedirect={(workspaceId) =>
+        saveSlackInstallWorkspace(window.sessionStorage, workspaceId)
+      }
+    />
+  );
+}

package/src/provider-catalog.ts

@@ -6,7 +6,8 @@ export type ProviderSetupPath =
   | '/workspaces/$wid/integrations/github'
   | '/workspaces/$wid/integrations/gitea'
   | '/workspaces/$wid/integrations/sentry'
-  | '/workspaces/$wid/integrations/linear';
+  | '/workspaces/$wid/integrations/linear'
+  | '/workspaces/$wid/integrations/slack';
 
 interface RouteProviderCatalogEntry {
   kind: 'redirect-install' | 'direct-connect';
@@ -37,6 +38,11 @@ export const PROVIDER_CATALOG: Record<string, ProviderCatalogEntry> = {
     iconName: 'linear',
     setupPath: '/workspaces/$wid/integrations/linear',
   },
+  slack: {
+    kind: 'redirect-install',
+    iconName: 'slack',
+    setupPath: '/workspaces/$wid/integrations/slack',
+  },
   gitea: {
     kind: 'direct-connect',
     iconName: 'gitea',

package/src/routes/slack-callback.tsx

@@ -0,0 +1,3 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {SlackCallbackPage} from '#pages/slack-callback-page.js';
+export default defineRoute({component: SlackCallbackPage});

package/src/routes/slack.tsx

@@ -0,0 +1,3 @@
+import {defineRoute} from '@shipfox/client-shell/runtime';
+import {SlackInstallPage} from '#pages/slack-install-page.js';
+export default defineRoute({component: SlackInstallPage});