@shipfox/client-integrations 12.0.1 → 13.0.0

package/dist/workspace-navigation.d.ts

@@ -0,0 +1,13 @@
+import type { QueryClient } from '@tanstack/react-query';
+interface WorkspaceSlugCandidate {
+    id: string;
+    slug: string;
+}
+export declare function rememberCallbackKey(keys: Set<string>, key: string, maxSize?: number): void;
+export declare function resolveWorkspaceSlug({ workspaceId, fallbackWorkspaces, queryClient, }: {
+    workspaceId: string;
+    fallbackWorkspaces: readonly WorkspaceSlugCandidate[];
+    queryClient: QueryClient;
+}): Promise<string | undefined>;
+export {};
+//# sourceMappingURL=workspace-navigation.d.ts.map

package/dist/workspace-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-navigation.d.ts","sourceRoot":"","sources":["../src/workspace-navigation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAEvD,UAAU,sBAAsB;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAMD,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,SAAK,GAAG,IAAI,CAMtF;AAED,wBAAsB,oBAAoB,CAAC,EACzC,WAAW,EACX,kBAAkB,EAClB,WAAW,GACZ,EAAE;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,SAAS,sBAAsB,EAAE,CAAC;IACtD,WAAW,EAAE,WAAW,CAAC;CAC1B,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAS9B"}

package/dist/workspace-navigation.js

@@ -0,0 +1,17 @@
+import { listUserWorkspaces, userWorkspacesQueryKey } from '@shipfox/client-shell/runtime';
+export function rememberCallbackKey(keys, key, maxSize = 32) {
+    keys.delete(key);
+    keys.add(key);
+    if (keys.size <= maxSize) return;
+    const oldest = keys.values().next().value;
+    if (typeof oldest === 'string') keys.delete(oldest);
+}
+export async function resolveWorkspaceSlug({ workspaceId, fallbackWorkspaces, queryClient }) {
+    const currentWorkspaces = await listUserWorkspaces().then(({ memberships })=>memberships).catch(()=>{
+        const refreshedWorkspaces = queryClient.getQueryData(userWorkspacesQueryKey);
+        return refreshedWorkspaces?.memberships ?? fallbackWorkspaces;
+    });
+    return currentWorkspaces.find(({ id })=>id === workspaceId)?.slug;
+}
+
+//# sourceMappingURL=workspace-navigation.js.map

package/dist/workspace-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/workspace-navigation.ts"],"sourcesContent":["import {listUserWorkspaces, userWorkspacesQueryKey} from '@shipfox/client-shell/runtime';\nimport type {QueryClient} from '@tanstack/react-query';\n\ninterface WorkspaceSlugCandidate {\n  id: string;\n  slug: string;\n}\n\ninterface UserWorkspacesQueryData {\n  memberships: WorkspaceSlugCandidate[];\n}\n\nexport function rememberCallbackKey(keys: Set<string>, key: string, maxSize = 32): void {\n  keys.delete(key);\n  keys.add(key);\n  if (keys.size <= maxSize) return;\n  const oldest = keys.values().next().value;\n  if (typeof oldest === 'string') keys.delete(oldest);\n}\n\nexport async function resolveWorkspaceSlug({\n  workspaceId,\n  fallbackWorkspaces,\n  queryClient,\n}: {\n  workspaceId: string;\n  fallbackWorkspaces: readonly WorkspaceSlugCandidate[];\n  queryClient: QueryClient;\n}): Promise<string | undefined> {\n  const currentWorkspaces = await listUserWorkspaces()\n    .then(({memberships}) => memberships)\n    .catch(() => {\n      const refreshedWorkspaces =\n        queryClient.getQueryData<UserWorkspacesQueryData>(userWorkspacesQueryKey);\n      return refreshedWorkspaces?.memberships ?? fallbackWorkspaces;\n    });\n  return currentWorkspaces.find(({id}) => id === workspaceId)?.slug;\n}\n"],"names":["listUserWorkspaces","userWorkspacesQueryKey","rememberCallbackKey","keys","key","maxSize","delete","add","size","oldest","values","next","value","resolveWorkspaceSlug","workspaceId","fallbackWorkspaces","queryClient","currentWorkspaces","then","memberships","catch","refreshedWorkspaces","getQueryData","find","id","slug"],"mappings":"AAAA,SAAQA,kBAAkB,EAAEC,sBAAsB,QAAO,gCAAgC;AAYzF,OAAO,SAASC,oBAAoBC,IAAiB,EAAEC,GAAW,EAAEC,UAAU,EAAE;IAC9EF,KAAKG,MAAM,CAACF;IACZD,KAAKI,GAAG,CAACH;IACT,IAAID,KAAKK,IAAI,IAAIH,SAAS;IAC1B,MAAMI,SAASN,KAAKO,MAAM,GAAGC,IAAI,GAAGC,KAAK;IACzC,IAAI,OAAOH,WAAW,UAAUN,KAAKG,MAAM,CAACG;AAC9C;AAEA,OAAO,eAAeI,qBAAqB,EACzCC,WAAW,EACXC,kBAAkB,EAClBC,WAAW,EAKZ;IACC,MAAMC,oBAAoB,MAAMjB,qBAC7BkB,IAAI,CAAC,CAAC,EAACC,WAAW,EAAC,GAAKA,aACxBC,KAAK,CAAC;QACL,MAAMC,sBACJL,YAAYM,YAAY,CAA0BrB;QACpD,OAAOoB,qBAAqBF,eAAeJ;IAC7C;IACF,OAAOE,kBAAkBM,IAAI,CAAC,CAAC,EAACC,EAAE,EAAC,GAAKA,OAAOV,cAAcW;AAC/D"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-integrations",
   "license": "MIT",
-  "version": "12.0.1",
+  "version": "13.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -27,19 +27,19 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
-    "@shipfox/api-integration-core-dto": "9.0.2",
-    "@shipfox/api-integration-gitea-dto": "9.0.2",
-    "@shipfox/api-integration-github-dto": "9.0.2",
-    "@shipfox/api-integration-linear-dto": "9.0.2",
-    "@shipfox/api-integration-slack-dto": "9.0.2",
-    "@shipfox/api-integration-sentry-dto": "9.0.2",
-    "@shipfox/api-integration-webhook-dto": "9.0.2",
+    "@shipfox/api-integration-core-dto": "12.0.0",
+    "@shipfox/api-integration-github-dto": "12.0.0",
+    "@shipfox/api-integration-linear-dto": "12.0.0",
+    "@shipfox/api-integration-gitea-dto": "12.0.0",
+    "@shipfox/api-integration-slack-dto": "12.0.0",
+    "@shipfox/api-integration-webhook-dto": "12.0.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-auth": "12.0.1",
-    "@shipfox/client-shell": "12.0.1",
-    "@shipfox/client-ui": "6.0.2",
-    "@shipfox/integration-icons": "0.2.2",
-    "@shipfox/react-ui": "0.3.7"
+    "@shipfox/client-shell": "13.0.0",
+    "@shipfox/integration-icons": "0.2.3",
+    "@shipfox/api-integration-sentry-dto": "12.0.0",
+    "@shipfox/client-ui": "13.0.0",
+    "@shipfox/client-auth": "13.0.0",
+    "@shipfox/react-ui": "0.4.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

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

@@ -7,24 +7,26 @@ import {useEffect, useRef} from 'react';
 export function CallbackStatusShell({
   title,
   message,
+  status = 'error',
   startOver,
   switchAccount,
-  workspaceId,
+  workspaceSlug,
   installPath,
 }: {
   title: string;
   message: string;
+  status?: 'error' | 'success';
   startOver?: boolean;
   switchAccount?: boolean;
-  workspaceId?: string | undefined;
-  installPath: '/workspaces/$wid/integrations/linear' | '/workspaces/$wid/integrations/slack';
+  workspaceSlug?: string | undefined;
+  installPath: '/w/$workspaceSlug/integrations/linear' | '/w/$workspaceSlug/integrations/slack';
 }) {
   const headingRef = useRef<HTMLHeadingElement>(null);
   useEffect(() => headingRef.current?.focus(), []);
   const recoveryVariant = startOver || switchAccount ? 'muted' : 'base';
-  const settings = workspaceId ? (
+  const settings = workspaceSlug ? (
     <ButtonLink asChild variant={recoveryVariant} className="min-h-44 w-full sm:w-fit">
-      <Link to="/workspaces/$wid/settings/integrations" params={{wid: workspaceId}}>
+      <Link to="/w/$workspaceSlug/settings/integrations" params={{workspaceSlug}}>
         Back to integrations
       </Link>
     </ButtonLink>
@@ -33,7 +35,9 @@ export function CallbackStatusShell({
       <Link to="/">Back to Shipfox</Link>
     </ButtonLink>
   );
-  const logoutRedirect = workspaceId ? installPath.replace('$wid', workspaceId) : undefined;
+  const logoutRedirect = workspaceSlug
+    ? installPath.replace('$workspaceSlug', workspaceSlug)
+    : undefined;
 
   return (
     <main className="flex min-h-screen bg-background-subtle-base px-16 py-32">
@@ -41,7 +45,7 @@ export function CallbackStatusShell({
         <h2 ref={headingRef} tabIndex={-1} className="text-24 font-semibold outline-none">
           {title}
         </h2>
-        <Callout role="alert" type="error">
+        <Callout role={status === 'error' ? 'alert' : 'status'} type={status}>
           <Text size="sm">{message}</Text>
         </Callout>
         <div className="flex flex-col gap-8 sm:flex-row sm:items-center">
@@ -49,15 +53,15 @@ export function CallbackStatusShell({
             <ButtonLink asChild className="min-h-44 w-full sm:w-fit">
               <Link
                 to="/auth/logout"
-                search={workspaceId ? {redirect: logoutRedirect ?? '/'} : undefined}
+                search={logoutRedirect ? {redirect: logoutRedirect} : undefined}
               >
                 Switch account
               </Link>
             </ButtonLink>
           ) : null}
-          {startOver && workspaceId ? (
+          {startOver && workspaceSlug ? (
             <ButtonLink asChild className="min-h-44 w-full sm:w-fit">
-              <Link to={installPath} params={{wid: workspaceId}}>
+              <Link to={installPath} params={{workspaceSlug}}>
                 Start over
               </Link>
             </ButtonLink>

package/src/components/installed-integrations-section.tsx

@@ -18,6 +18,7 @@ import {type IntegrationConnection, isUsableConnection} from '#core/models.js';
 import {usageEventsForConnection} from './integration-usage-events.js';
 
 interface InstalledIntegrationsSectionProps {
+  workspaceSlug?: string | undefined;
   connections: IntegrationConnection[];
   isPending: boolean;
   isFetching: boolean;
@@ -34,6 +35,7 @@ const INSTALLED_SURFACE_CLASS =
   'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
 
 export function InstalledIntegrationsSection({
+  workspaceSlug,
   connections,
   isPending,
   isFetching,
@@ -81,6 +83,7 @@ export function InstalledIntegrationsSection({
             <InstalledRow
               key={connection.id}
               connection={connection}
+              workspaceSlug={workspaceSlug}
               isMutating={isMutating}
               onUse={onUse}
               onSetActive={(nextActive) => onSetActive(connection, nextActive)}
@@ -96,6 +99,7 @@ export function InstalledIntegrationsSection({
 
 function InstalledRow({
   connection,
+  workspaceSlug,
   isMutating,
   onUse,
   onSetActive,
@@ -103,6 +107,7 @@ function InstalledRow({
   providerDisplayName,
 }: {
   connection: IntegrationConnection;
+  workspaceSlug?: string | undefined;
   isMutating: boolean;
   onUse: (connectionId: string) => void;
   onSetActive: (active: boolean) => void;
@@ -159,15 +164,17 @@ function InstalledRow({
           <DropdownMenuItem onSelect={() => onUse(connection.id)}>
             Use this integration
           </DropdownMenuItem>
-          <DropdownMenuItem asChild>
-            <Link
-              to="/workspaces/$wid/settings/events"
-              params={{wid: connection.workspaceId}}
-              search={{source: [connection.slug], event: [recentEventsEvent]}}
-            >
-              View recent events
-            </Link>
-          </DropdownMenuItem>
+          {workspaceSlug ? (
+            <DropdownMenuItem asChild>
+              <Link
+                to="/w/$workspaceSlug/settings/events"
+                params={{workspaceSlug}}
+                search={{source: [connection.slug], event: [recentEventsEvent]}}
+              >
+                View recent events
+              </Link>
+            </DropdownMenuItem>
+          ) : null}
           <DropdownMenuSeparator />
           <DropdownMenuItem disabled={isMutating} onSelect={() => onSetActive(!active)}>
             {active ? 'Disable integration' : 'Enable integration'}

package/src/components/integration-gallery-for-workspace.tsx

@@ -1,3 +1,4 @@
+import {useAuthState} from '@shipfox/client-auth';
 import {toast} from '@shipfox/react-ui/toast';
 import {Header, Text} from '@shipfox/react-ui/typography';
 import {useState} from 'react';
@@ -35,6 +36,8 @@ export function IntegrationGalleryForWorkspace({
   emptyProvidersMessage,
   workspaceId,
 }: IntegrationGalleryForWorkspaceProps) {
+  const {workspaces} = useAuthState();
+  const workspaceSlug = workspaces.find((workspace) => workspace.id === workspaceId)?.slug;
   const [createProvider, setCreateProvider] = useState<string | undefined>();
   const [usageConnectionId, setUsageConnectionId] = useState<string | undefined>();
   const [createdUsageConnection, setCreatedUsageConnection] = useState<
@@ -122,6 +125,7 @@ export function IntegrationGalleryForWorkspace({
   return (
     <div className="flex flex-col gap-24">
       <InstalledIntegrationsSection
+        workspaceSlug={workspaceSlug}
         connections={sortedConnections}
         isPending={connectionsQuery.isPending}
         isFetching={connectionsQuery.isFetching}
@@ -149,16 +153,22 @@ export function IntegrationGalleryForWorkspace({
           </Text>
         </div>
 
-        <ProviderGrid
-          providers={providers}
-          isPending={providersQuery.isPending}
-          isFetching={providersQuery.isFetching}
-          error={providersQuery.isError ? providersQuery.error : undefined}
-          onRetry={() => void providersQuery.refetch()}
-          workspaceId={workspaceId}
-          emptyMessage={emptyProvidersMessage}
-          onOpenProvider={setCreateProvider}
-        />
+        {workspaceSlug ? (
+          <ProviderGrid
+            workspaceSlug={workspaceSlug}
+            providers={providers}
+            isPending={providersQuery.isPending}
+            isFetching={providersQuery.isFetching}
+            error={providersQuery.isError ? providersQuery.error : undefined}
+            onRetry={() => void providersQuery.refetch()}
+            emptyMessage={emptyProvidersMessage}
+            onOpenProvider={setCreateProvider}
+          />
+        ) : (
+          <Text size="sm" className="text-foreground-neutral-muted" aria-live="polite">
+            Loading workspace details…
+          </Text>
+        )}
       </section>
       <WebhookCreateModal
         workspaceId={workspaceId}

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

@@ -20,14 +20,14 @@ import {useMemo} from 'react';
 import {IntegrationGallery} from './integration-gallery.js';
 
 const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
-const WORKSPACE_PATH = `/workspaces/${WORKSPACE_ID}/settings/integrations`;
+const WORKSPACE_PATH = '/w/acme/settings/integrations';
 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',
+  '/w/$workspaceSlug/integrations/github',
+  '/w/$workspaceSlug/integrations/sentry',
+  '/w/$workspaceSlug/integrations/linear',
+  '/w/$workspaceSlug/integrations/slack',
+  '/w/$workspaceSlug/integrations/gitea',
+  '/w/$workspaceSlug/settings/events',
 ] as const;
 
 type Scenario =
@@ -66,7 +66,7 @@ function IntegrationGalleryStory({scenario}: IntegrationGalleryStoryProps) {
     const nextStore = createStore();
     nextStore.set(authStateAtom, {
       status: 'authenticated',
-      workspaces: [{id: WORKSPACE_ID, name: 'Acme', membershipId: 'membership-1'}],
+      workspaces: [{id: WORKSPACE_ID, name: 'Acme', slug: 'acme', membershipId: 'membership-1'}],
     });
     return nextStore;
   }, []);
@@ -74,7 +74,7 @@ function IntegrationGalleryStory({scenario}: IntegrationGalleryStoryProps) {
     const rootRoute = createRootRoute({component: Outlet});
     const workspaceRoute = createRoute({
       getParentRoute: () => rootRoute,
-      path: '/workspaces/$wid',
+      path: '/w/$workspaceSlug',
       component: Outlet,
     });
     const galleryRoute = createRoute({
@@ -89,7 +89,7 @@ function IntegrationGalleryStory({scenario}: IntegrationGalleryStoryProps) {
     const setupRoutes = SETUP_PATHS.map((path) =>
       createRoute({
         getParentRoute: () => workspaceRoute,
-        path: path.replace('/workspaces/$wid/', ''),
+        path: path.replace('/w/$workspaceSlug/', ''),
         component: () => <div />,
       }),
     );

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

@@ -3,7 +3,12 @@ import '@testing-library/jest-dom/vitest';
 import type {IntegrationConnectionDto} from '@shipfox/api-integration-core-dto';
 import {configureApiClient} from '@shipfox/client-api';
 import {fireEvent, screen, waitFor, within} from '@testing-library/react';
-import {INTEGRATIONS_TEST_WID, jsonResponse, renderIntegrationsPage} from '#test/render.js';
+import {
+  INTEGRATIONS_TEST_WID,
+  jsonResponse,
+  renderIntegrationsPage,
+  testWorkspace,
+} from '#test/render.js';
 import {IntegrationGallery} from './integration-gallery.js';
 
 if (!HTMLElement.prototype.hasPointerCapture) {
@@ -28,9 +33,9 @@ if (!HTMLElement.prototype.releasePointerCapture) {
 }
 
 const SETUP_ROUTES = [
-  '/workspaces/$wid/integrations/github',
-  '/workspaces/$wid/integrations/sentry',
-  '/workspaces/$wid/settings/events',
+  '/w/$workspaceSlug/integrations/github',
+  '/w/$workspaceSlug/integrations/sentry',
+  '/w/$workspaceSlug/settings/events',
 ];
 const EXTERNAL_SETTINGS_ACTION_RE = /Open.*settings/u;
 
@@ -183,16 +188,18 @@ function fetchForGallery(options: FetchOptions = {}) {
 function renderGallery(
   props: Parameters<typeof IntegrationGallery>[0] = {},
   options: FetchOptions = {},
+  renderOptions: {workspaces?: Parameters<typeof renderIntegrationsPage>[0]['workspaces']} = {},
 ) {
   configureApiClient({
     baseUrl: 'https://api.example.test',
     fetchImpl: fetchForGallery(options),
   });
   return renderIntegrationsPage({
-    path: `/workspaces/${INTEGRATIONS_TEST_WID}/integrations`,
-    routePath: '/workspaces/$wid/integrations',
+    path: '/w/acme/integrations',
+    routePath: '/w/$workspaceSlug/integrations',
     element: <IntegrationGallery workspaceId={INTEGRATIONS_TEST_WID} {...props} />,
     extraRoutes: SETUP_ROUTES,
+    ...(renderOptions.workspaces ? {workspaces: renderOptions.workspaces} : {}),
   });
 }
 
@@ -203,11 +210,19 @@ const openActions = async (name: string) => {
 };
 
 const SORTED_NAMES_RE = /acme-(early|late)/;
-// The meta line carries the date only — the provider is named once, by the
+// The meta line carries the date only: the provider is named once, by the
 // icon and the account name, never repeated as body text in the row.
 const ADDED_META_RE = /^Added /;
+const GITHUB_LINK_RE = /GitHub/u;
 
 describe('IntegrationGallery — installed section', () => {
+  test('waits for an explicit workspace id to hydrate before showing install links', async () => {
+    renderGallery({}, {}, {workspaces: [testWorkspace({id: 'stale-workspace', slug: 'acme'})]});
+
+    expect(await screen.findByText('Loading workspace details…')).toBeVisible();
+    expect(screen.queryByRole('link', {name: GITHUB_LINK_RE})).not.toBeInTheDocument();
+  });
+
   test('renders two distinct cards for two connections sharing one provider', async () => {
     renderGallery(
       {},
@@ -375,8 +390,8 @@ describe('IntegrationGallery — installed section', () => {
     });
     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: <IntegrationGallery />,
       extraRoutes: SETUP_ROUTES,
     });
@@ -410,8 +425,8 @@ describe('IntegrationGallery — installed section', () => {
     });
     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: <IntegrationGallery />,
       extraRoutes: SETUP_ROUTES,
     });
@@ -441,8 +456,8 @@ describe('IntegrationGallery — installed section', () => {
     const fetchImpl = fetchForGallery({connections: [webhookConnection]});
     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: <IntegrationGallery />,
       extraRoutes: SETUP_ROUTES,
     });
@@ -511,7 +526,7 @@ describe('IntegrationGallery — installed section', () => {
     expect(within(installedRegion()).getByText(ADDED_META_RE)).toBeVisible();
   });
 
-  test('names the provider once per row — not repeated in the meta line', async () => {
+  test('names the provider once per row: not repeated in the meta line', async () => {
     renderGallery({}, {connections: [githubConnection]});
 
     await screen.findByText('acme-corp');
@@ -549,7 +564,7 @@ describe('IntegrationGallery — installed section', () => {
   });
 });
 
-describe('IntegrationGallery — available section', () => {
+describe('IntegrationGallery: available section', () => {
   test('lists every provider with an Install link, including installed ones', async () => {
     renderGallery({}, {connections: [githubConnection]});
 

package/src/components/provider-grid.tsx

@@ -11,12 +11,12 @@ import type {IntegrationProvider} from '#core/models.js';
 import {PROVIDER_CATALOG} from '#provider-catalog.js';
 
 export interface ProviderGridProps {
+  workspaceSlug: string;
   providers: IntegrationProvider[];
   isPending: boolean;
   isFetching?: boolean;
   error?: Error | null | undefined;
   onRetry?: () => void;
-  workspaceId: string;
   emptyMessage: string;
   loadingLabel?: string;
   errorSubject?: string;
@@ -29,12 +29,12 @@ export const PROVIDER_SURFACE_CLASS =
   'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
 
 export function ProviderGrid({
+  workspaceSlug,
   providers,
   isPending,
   isFetching = false,
   error,
   onRetry,
-  workspaceId,
   emptyMessage,
   loadingLabel = 'Loading providers',
   errorSubject = 'available integrations',
@@ -79,7 +79,7 @@ export function ProviderGrid({
         <li key={provider.provider}>
           <ProviderCard
             provider={provider}
-            workspaceId={workspaceId}
+            workspaceSlug={workspaceSlug}
             onOpenProvider={onOpenProvider}
           />
         </li>
@@ -90,11 +90,11 @@ export function ProviderGrid({
 
 function ProviderCard({
   provider,
-  workspaceId,
+  workspaceSlug,
   onOpenProvider,
 }: {
   provider: IntegrationProvider;
-  workspaceId: string;
+  workspaceSlug: string;
   onOpenProvider?: ((provider: string) => void) | undefined;
 }) {
   const catalog = PROVIDER_CATALOG[provider.provider];
@@ -116,7 +116,7 @@ function ProviderCard({
   return (
     <Link
       to={catalog.setupPath}
-      params={{wid: workspaceId}}
+      params={{workspaceSlug}}
       aria-label={`Install ${provider.displayName}`}
       className="group flex h-full min-w-0 items-center justify-between gap-12 rounded-8 border border-border-neutral-base bg-background-neutral-base p-16 transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
     >

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

@@ -11,8 +11,8 @@ function renderInstallPage(
   options?: {strict?: boolean},
 ) {
   return renderIntegrationsPage({
-    path: `/workspaces/${INTEGRATIONS_TEST_WID}/integrations/github`,
-    routePath: '/workspaces/$wid/integrations/github',
+    path: '/w/acme/integrations/github',
+    routePath: '/w/$workspaceSlug/integrations/github',
     element: options?.strict ? (
       <StrictMode>
         <RedirectInstallPage {...props} />
@@ -20,7 +20,7 @@ function renderInstallPage(
     ) : (
       <RedirectInstallPage {...props} />
     ),
-    extraRoutes: ['/workspaces/$wid/integrations'],
+    extraRoutes: ['/w/$workspaceSlug/integrations'],
   });
 }
 

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

@@ -14,7 +14,7 @@ interface RedirectInstallPageProps {
   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
+   * state-less provider callback. It must not throw. A failed side effect
    * should never block the redirect.
    */
   beforeRedirect?: (workspaceId: string) => void;
@@ -59,7 +59,7 @@ export function RedirectInstallPage({
           <Text size="sm">{errorMessage}</Text>
         </Callout>
         <ButtonLink asChild variant="muted" className="w-fit">
-          <Link to="/workspaces/$wid/integrations" params={{wid: workspace.id}}>
+          <Link to="/w/$workspaceSlug/integrations" params={{workspaceSlug: workspace.slug}}>
             Back to integrations
           </Link>
         </ButtonLink>

package/src/components/webhook/webhook-modals.stories.tsx

@@ -176,7 +176,7 @@ function createStoryRouter(scenario: Scenario) {
   const rootRoute = createRootRoute({component: Outlet});
   const workspaceRoute = createRoute({
     getParentRoute: () => rootRoute,
-    path: '/workspaces/$wid',
+    path: '/w/$workspaceSlug',
     component: Outlet,
   });
   const integrationsRoute = createRoute({
@@ -192,7 +192,7 @@ function createStoryRouter(scenario: Scenario) {
 
   return createRouter({
     history: createMemoryHistory({
-      initialEntries: [`/workspaces/${WORKSPACE_ID}/settings/integrations`],
+      initialEntries: ['/w/acme/settings/integrations'],
     }),
     routeTree: rootRoute.addChildren([
       workspaceRoute.addChildren([integrationsRoute, eventsRoute]),

package/src/feature.ts

@@ -34,37 +34,37 @@ export const integrationsFeature = defineClientFeature({
       impl: '@shipfox/client-integrations/routes/slack-callback',
     },
     {
-      path: '/workspaces/$wid/integrations',
+      path: '/w/$workspaceSlug/integrations',
       parent: 'workspaceLayout',
       impl: '@shipfox/client-integrations/routes/integrations',
     },
     {
-      path: '/workspaces/$wid/integrations/gitea',
+      path: '/w/$workspaceSlug/integrations/gitea',
       parent: 'workspaceLayout',
       impl: '@shipfox/client-integrations/routes/gitea',
     },
     {
-      path: '/workspaces/$wid/integrations/github',
+      path: '/w/$workspaceSlug/integrations/github',
       parent: 'workspaceLayout',
       impl: '@shipfox/client-integrations/routes/github',
     },
     {
-      path: '/workspaces/$wid/integrations/linear',
+      path: '/w/$workspaceSlug/integrations/linear',
       parent: 'workspaceLayout',
       impl: '@shipfox/client-integrations/routes/linear',
     },
     {
-      path: '/workspaces/$wid/integrations/sentry',
+      path: '/w/$workspaceSlug/integrations/sentry',
       parent: 'workspaceLayout',
       impl: '@shipfox/client-integrations/routes/sentry',
     },
     {
-      path: '/workspaces/$wid/integrations/slack',
+      path: '/w/$workspaceSlug/integrations/slack',
       parent: 'workspaceLayout',
       impl: '@shipfox/client-integrations/routes/slack',
     },
     {
-      path: '/workspaces/$wid/settings/integrations',
+      path: '/w/$workspaceSlug/settings/integrations',
       parent: 'workspaceSettings',
       impl: '@shipfox/client-integrations/routes/integrations-settings',
     },

package/src/hooks/api/integrations.ts

@@ -175,7 +175,7 @@ export async function listSourceConnections({
   });
   // The endpoint returns every lifecycle status (the settings hub needs that),
   // but source-control consumers (onboarding redirect, project creation) only
-  // act on usable connections — a disabled/error one must read as "not there".
+  // act on usable connections. A disabled/error one must read as "not there".
   return connections.filter(isUsableConnection);
 }
 

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

@@ -24,7 +24,7 @@ export function GiteaInstallPage() {
       try {
         await connect.mutateAsync({workspace_id: workspaceId, org: value.org.trim()});
         toast.success('Gitea organization installed.');
-        await navigate({to: '/workspaces/$wid', params: {wid: workspaceId}});
+        await navigate({to: '/w/$workspaceSlug', params: {workspaceSlug: workspace.slug}});
       } catch (error) {
         const mapped = giteaConnectErrorToFormError(error);
         if (mapped.kind === 'field') {
@@ -88,7 +88,7 @@ export function GiteaInstallPage() {
             Install
           </Button>
           <ButtonLink asChild variant="muted">
-            <Link to="/workspaces/$wid/integrations" params={{wid: workspace.id}}>
+            <Link to="/w/$workspaceSlug/integrations" params={{workspaceSlug: workspace.slug}}>
               Cancel
             </Link>
           </ButtonLink>