@shipfox/client-projects 12.0.1 → 13.0.0

package/src/pages/project-settings-page.stories.tsx

@@ -0,0 +1,216 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {type AuthState, authStateAtom} from '@shipfox/client-auth';
+import {Toaster} from '@shipfox/react-ui/toast';
+import type {Meta, StoryObj} from '@storybook/react';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Outlet,
+  RouterProvider,
+} from '@tanstack/react-router';
+import {createStore, Provider as JotaiProvider} from 'jotai';
+import {useMemo} from 'react';
+import {expect, screen, userEvent, within} from 'storybook/test';
+import {ProjectSettingsPage} from './project-settings-page.js';
+
+const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
+const PROJECT_ID = '99999999-9999-4999-8999-999999999999';
+const OTHER_PROJECT_ID = '88888888-8888-4888-8888-888888888888';
+
+type Scenario = 'default' | 'long-values' | 'taken-slug';
+
+interface ProjectStoryResponse {
+  id: string;
+  workspace_id: string;
+  name: string;
+  slug: string;
+  source: {
+    connection_id: string;
+    external_repository_id: string;
+  };
+  created_at: string;
+  updated_at: string;
+}
+
+interface ProjectSettingsPageStoryProps {
+  scenario: Scenario;
+}
+
+const authState: AuthState = {
+  status: 'authenticated',
+  token: 'token',
+  user: {
+    id: '22222222-2222-4222-8222-222222222222',
+    email: 'platform@example.com',
+    name: 'Platform Engineer',
+    emailVerifiedAt: '2026-01-01T00:00:00.000Z',
+  },
+  workspaces: [{id: WORKSPACE_ID, name: 'Acme', slug: 'acme', membershipId: 'membership-1'}],
+};
+
+function ProjectSettingsPageStory({scenario}: ProjectSettingsPageStoryProps) {
+  configureApiClient({
+    baseUrl: 'https://api.example.test',
+    fetchImpl: fetchForScenario(scenario),
+  });
+
+  const queryClient = useMemo(
+    () => new QueryClient({defaultOptions: {queries: {retry: false}}}),
+    [],
+  );
+  const store = useMemo(() => {
+    const nextStore = createStore();
+    nextStore.set(authStateAtom, authState);
+    return nextStore;
+  }, []);
+  const router = useMemo(() => createStoryRouter(scenario), [scenario]);
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <JotaiProvider store={store}>
+        <div className="min-h-screen bg-background-neutral-background px-24 py-32">
+          <div className="mx-auto w-full max-w-[1120px]">
+            <RouterProvider router={router} />
+          </div>
+        </div>
+        <Toaster />
+      </JotaiProvider>
+    </QueryClientProvider>
+  );
+}
+
+const meta = {
+  title: 'Projects/ProjectSettingsPage',
+  component: ProjectSettingsPageStory,
+  parameters: {layout: 'fullscreen'},
+  args: {scenario: 'default'},
+} satisfies Meta<typeof ProjectSettingsPageStory>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const LongValues: Story = {
+  args: {scenario: 'long-values'},
+};
+
+export const TakenSlug: Story = {
+  args: {scenario: 'taken-slug'},
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    const slugInput = await canvas.findByLabelText('Project slug');
+    await userEvent.clear(slugInput);
+    await userEvent.type(slugInput, 'taken-platform');
+
+    expect(await canvas.findByText('This slug is already taken.')).toBeInTheDocument();
+  },
+};
+
+export const SlugChangeWarning: Story = {
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    const slugInput = await canvas.findByLabelText('Project slug');
+    await userEvent.clear(slugInput);
+    await userEvent.type(slugInput, 'renamed-platform');
+    await canvas.findByText('Slug is available.');
+    await userEvent.click(canvas.getByRole('button', {name: 'Save changes'}));
+
+    const dialog = await screen.findByRole('dialog');
+    expect(dialog).toHaveTextContent('Change project slug?');
+    expect(dialog).toHaveTextContent('Links and bookmarks pointing at the old URL stop working.');
+    expect(dialog).toHaveTextContent(
+      'Workflows that reference this project slug may stop working.',
+    );
+  },
+};
+
+function createStoryRouter(scenario: Scenario) {
+  const project = projectForScenario(scenario);
+  const rootRoute = createRootRoute({component: Outlet});
+  const projectSettingsRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/w/$workspaceSlug/p/$projectSlug/settings/general',
+    component: ProjectSettingsPage,
+  });
+
+  return createRouter({
+    history: createMemoryHistory({
+      initialEntries: [`/w/acme/p/${project.slug}/settings/general`],
+    }),
+    routeTree: rootRoute.addChildren([projectSettingsRoute]),
+  });
+}
+
+function fetchForScenario(scenario: Scenario): typeof fetch {
+  return async (input, init) => {
+    const url = requestUrl(input);
+    const method = input instanceof Request ? input.method : (init?.method ?? 'GET');
+
+    if (url.pathname === '/projects' && method === 'GET') {
+      const search = url.searchParams.get('search');
+      if (scenario === 'taken-slug' && search === 'taken-platform') {
+        return jsonResponse({
+          projects: [projectForScenario(scenario, {id: OTHER_PROJECT_ID, slug: 'taken-platform'})],
+          next_cursor: null,
+        });
+      }
+      return jsonResponse({projects: [projectForScenario(scenario)], next_cursor: null});
+    }
+
+    if (url.pathname === `/projects/${PROJECT_ID}` && method === 'PATCH') {
+      const body = (await (input as Request).clone().json()) as {
+        name?: string;
+        slug?: string;
+      };
+      const project = projectForScenario(scenario);
+      return jsonResponse({
+        ...project,
+        name: body.name ?? project.name,
+        slug: body.slug ?? project.slug,
+      });
+    }
+
+    return jsonResponse({}, {status: 404});
+  };
+}
+
+function projectForScenario(
+  scenario: Scenario,
+  overrides: Partial<ProjectStoryResponse> = {},
+): ProjectStoryResponse {
+  const project = {
+    id: PROJECT_ID,
+    workspace_id: WORKSPACE_ID,
+    name:
+      scenario === 'long-values'
+        ? 'Infrastructure Control Plane and Workflow Automation'
+        : 'Platform',
+    slug: scenario === 'long-values' ? 'infrastructure-control-plane' : 'platform',
+    source: {
+      connection_id: '33333333-3333-4333-8333-333333333333',
+      external_repository_id: 'platform',
+    },
+    created_at: '2026-01-01T00:00:00.000Z',
+    updated_at: '2026-01-01T00:00:00.000Z',
+    ...overrides,
+  };
+  return project;
+}
+
+function requestUrl(input: RequestInfo | URL): URL {
+  if (input instanceof Request) return new URL(input.url);
+  if (input instanceof URL) return input;
+  return new URL(input, 'https://api.example.test');
+}
+
+function jsonResponse(body: unknown, init: ResponseInit = {}) {
+  return new Response(JSON.stringify(body), {
+    status: 200,
+    headers: {'content-type': 'application/json'},
+    ...init,
+  });
+}

package/src/pages/project-settings-page.test.tsx

@@ -0,0 +1,74 @@
+import {configureApiClient} from '@shipfox/client-api';
+import {fireEvent, screen, waitFor} from '@testing-library/react';
+import {jsonResponse, renderProjectPage} from '#test/pages.js';
+import {ProjectSettingsPage} from './project-settings-page.js';
+
+describe('ProjectSettingsPage', () => {
+  test('saves a name change without opening the slug warning', async () => {
+    let patchBody: unknown;
+    const fetchImpl = vi.fn(async (input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (request.method === 'PATCH') {
+        patchBody = await request.clone().json();
+        return jsonResponse(projectDto({name: 'Platform API'}));
+      }
+      return jsonResponse({projects: [projectDto()], next_cursor: null});
+    });
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderProjectPage('/w/acme/p/platform/settings/general', <ProjectSettingsPage />);
+    fireEvent.change(await screen.findByLabelText('Project name'), {
+      target: {value: 'Platform API'},
+    });
+    fireEvent.click(screen.getByRole('button', {name: 'Save changes'}));
+
+    await waitFor(() => expect(patchBody).toEqual({name: 'Platform API'}));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  test('requires confirmation before saving a slug change', async () => {
+    let patchBody: unknown;
+    const fetchImpl = vi.fn(async (input: RequestInfo | URL) => {
+      const request = input as Request;
+      if (request.method === 'PATCH') {
+        patchBody = await request.clone().json();
+        return jsonResponse(projectDto({slug: 'platform-api'}));
+      }
+      return jsonResponse({projects: [projectDto()], next_cursor: null});
+    });
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+
+    renderProjectPage('/w/acme/p/platform/settings/general', <ProjectSettingsPage />);
+    fireEvent.change(await screen.findByLabelText('Project slug'), {
+      target: {value: 'platform-api'},
+    });
+    fireEvent.click(screen.getByRole('button', {name: 'Save changes'}));
+
+    const dialog = await screen.findByRole('dialog');
+    expect(dialog).toHaveTextContent('old URL stop working');
+    expect(
+      fetchImpl.mock.calls.some(([input]) =>
+        (input as Request).url.includes('/projects/slug-availability'),
+      ),
+    ).toBe(false);
+    expect(patchBody).toBeUndefined();
+
+    fireEvent.click(screen.getByRole('button', {name: 'Change slug'}));
+    await waitFor(() => expect(patchBody).toEqual({slug: 'platform-api'}));
+  });
+});
+
+function projectDto({name = 'Platform', slug = 'platform'}: {name?: string; slug?: string} = {}) {
+  return {
+    id: '44444444-4444-4444-8444-444444444444',
+    workspace_id: '11111111-1111-4111-8111-111111111111',
+    name,
+    slug,
+    source: {
+      connection_id: '33333333-3333-4333-8333-333333333333',
+      external_repository_id: 'platform',
+    },
+    created_at: '2026-05-07T01:00:00.000Z',
+    updated_at: '2026-05-07T01:00:00.000Z',
+  };
+}

package/src/pages/project-settings-page.tsx

@@ -0,0 +1,220 @@
+import {slugSchema} from '@shipfox/api-common-dto';
+import {createProjectBodySchema} from '@shipfox/api-projects-dto';
+import {ApiError} from '@shipfox/client-api';
+import {useActiveWorkspace} from '@shipfox/client-auth';
+import {
+  displayNameFieldError,
+  QueryLoadError,
+  SlugChangeWarning,
+  SlugField,
+} from '@shipfox/client-ui';
+import {Button} from '@shipfox/react-ui/button';
+import {Callout} from '@shipfox/react-ui/callout';
+import {EmptyState} from '@shipfox/react-ui/empty-state';
+import {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';
+import {FullPageLoader} from '@shipfox/react-ui/loader';
+import {toast} from '@shipfox/react-ui/toast';
+import {Header, Text} from '@shipfox/react-ui/typography';
+import {useForm} from '@tanstack/react-form';
+import {useNavigate} from '@tanstack/react-router';
+import {useState} from 'react';
+import {useMaybeActiveProjectQuery} from '#chrome.js';
+import type {Project} from '#core/project.js';
+import {useProjectSlugAvailability, useUpdateProjectMutation} from '#hooks/api/projects.js';
+import {projectSettingsErrorToFormError} from './project-settings-form-errors.js';
+
+interface ProjectSettingsValues {
+  name: string;
+  slug: string;
+}
+
+function isSlugValid(value: string): boolean {
+  return slugSchema.safeParse(value).success;
+}
+
+export function ProjectSettingsPage() {
+  const projectQuery = useMaybeActiveProjectQuery();
+  if (projectQuery.isPending) return <FullPageLoader />;
+  if (projectQuery.isError && projectQuery.data === undefined) {
+    if (projectQuery.error instanceof ApiError && projectQuery.error.status === 404) {
+      return (
+        <EmptyState
+          icon="errorWarningLine"
+          tone="error"
+          title="Project not found"
+          description="This project doesn't exist, or you don't have access to it."
+        />
+      );
+    }
+    return <QueryLoadError query={projectQuery} subject="project" />;
+  }
+  const project = projectQuery.data;
+  if (!project) {
+    return (
+      <EmptyState
+        icon="errorWarningLine"
+        tone="error"
+        title="Project not found"
+        description="This project doesn't exist, or you don't have access to it."
+      />
+    );
+  }
+  return (
+    <ProjectSettingsForm key={`${project.id}:${project.name}:${project.slug}`} project={project} />
+  );
+}
+
+function ProjectSettingsForm({project}: {project: Project}) {
+  const workspace = useActiveWorkspace();
+  const navigate = useNavigate();
+  const updateProject = useUpdateProjectMutation();
+  const [warningOpen, setWarningOpen] = useState(false);
+  const [pendingValues, setPendingValues] = useState<ProjectSettingsValues>();
+  const [formError, setFormError] = useState<string>();
+
+  const checkProjectSlugAvailability = useProjectSlugAvailability(workspace.id, project.id);
+
+  const form = useForm({
+    defaultValues: {name: project.name, slug: project.slug},
+    onSubmit: async ({value}) => {
+      if (value.slug !== project.slug) {
+        setPendingValues(value);
+        setWarningOpen(true);
+        return;
+      }
+      await save(value);
+    },
+  });
+
+  async function save(values: ProjectSettingsValues) {
+    setFormError(undefined);
+    const nameChanged = values.name !== project.name;
+    const slugChanged = values.slug !== project.slug;
+    if (!nameChanged && !slugChanged) return;
+    const command = {
+      projectId: project.id,
+      ...(nameChanged ? {name: values.name} : {}),
+      ...(slugChanged ? {slug: values.slug} : {}),
+    };
+
+    try {
+      const updated = await updateProject.mutateAsync(command);
+      setPendingValues(undefined);
+      setWarningOpen(false);
+      toast.success('Project settings saved.');
+      await navigate({
+        to: '/w/$workspaceSlug/p/$projectSlug/settings/general',
+        params: {workspaceSlug: workspace.slug, projectSlug: updated.slug},
+      });
+    } catch (error) {
+      setPendingValues(undefined);
+      setWarningOpen(false);
+      const mapped = projectSettingsErrorToFormError(error);
+      if (mapped.kind === 'field') {
+        form.setFieldMeta(mapped.field, (previous) => ({
+          ...previous,
+          errorMap: {...previous.errorMap, onServer: mapped.message},
+        }));
+      } else {
+        setFormError(mapped.message);
+      }
+    }
+  }
+
+  return (
+    <>
+      <div className="flex min-w-0 flex-col gap-24">
+        <header className="flex flex-col gap-6">
+          <Header variant="h1">General</Header>
+          <Text size="sm" className="text-foreground-neutral-muted">
+            Update the project name and the slug used in its URLs.
+          </Text>
+        </header>
+
+        {formError ? (
+          <Callout role="alert" type="error">
+            {formError}
+          </Callout>
+        ) : null}
+
+        <form
+          className="flex max-w-[560px] flex-col gap-16"
+          noValidate
+          onSubmit={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            void form.handleSubmit();
+          }}
+        >
+          <form.Field
+            name="name"
+            validators={{
+              onBlur: ({value}) =>
+                displayNameFieldError(value, 'Project name', createProjectBodySchema.shape.name),
+              onSubmit: ({value}) =>
+                displayNameFieldError(value, 'Project name', createProjectBodySchema.shape.name),
+            }}
+          >
+            {(field) => (
+              <FormField label="Project name" id="project-settings-name" error={fieldError(field)}>
+                <FormFieldInput
+                  name="name"
+                  type="text"
+                  value={field.state.value}
+                  onChange={(event) => field.handleChange(event.target.value)}
+                  onBlur={field.handleBlur}
+                />
+              </FormField>
+            )}
+          </form.Field>
+
+          <form.Field
+            name="slug"
+            validators={{
+              onBlur: createProjectBodySchema.shape.slug,
+              onSubmit: createProjectBodySchema.shape.slug,
+            }}
+          >
+            {(field) => (
+              <SlugField
+                id="project-settings-slug"
+                label="Project slug"
+                name="slug"
+                value={field.state.value}
+                onChange={(value) => field.handleChange(value)}
+                onBlur={field.handleBlur}
+                error={fieldError(field)}
+                description={
+                  <span className="break-all font-code">
+                    /w/{workspace.slug}/p/{field.state.value}
+                  </span>
+                }
+                placeholder="platform"
+                className="font-code"
+                currentSlug={project.slug}
+                checkEnabled
+                debounceMs={0}
+                isValid={isSlugValid}
+                checkAvailability={checkProjectSlugAvailability}
+              />
+            )}
+          </form.Field>
+
+          <Button type="submit" isLoading={updateProject.isPending} className="self-start">
+            Save changes
+          </Button>
+        </form>
+      </div>
+
+      <SlugChangeWarning
+        open={warningOpen}
+        onOpenChange={setWarningOpen}
+        entityLabel="project"
+        isLoading={updateProject.isPending}
+        onConfirm={() => {
+          if (pendingValues) void save(pendingValues);
+        }}
+      />
+    </>
+  );
+}

package/src/pages/projects-hub-page.test.tsx

@@ -1,10 +1,15 @@
 import {configureApiClient} from '@shipfox/client-api';
 import {fireEvent, screen, waitFor} from '@testing-library/react';
-import {jsonResponse, PROJECT_TEST_WID, renderProjectPage} from '#test/pages.js';
+import {
+  jsonResponse,
+  PROJECT_TEST_WID,
+  PROJECT_TEST_WSLUG,
+  renderProjectPage,
+} from '#test/pages.js';
 import {ProjectsHubPage} from './projects-hub-page.js';
 
 const NEW_PROJECT_REGEX = /New project/i;
-const WORKSPACE_PROJECTS_NEW_HREF = `/workspaces/${PROJECT_TEST_WID}/projects/new`;
+const WORKSPACE_PROJECTS_NEW_HREF = `/w/${PROJECT_TEST_WSLUG}/projects/new`;
 const CONNECTION_ID = '33333333-3333-4333-8333-333333333333';
 
 describe('ProjectsHubPage', () => {
@@ -20,7 +25,7 @@ describe('ProjectsHubPage', () => {
       }),
     });
 
-    renderProjectPage(`/workspaces/${PROJECT_TEST_WID}`, <ProjectsHubPage />);
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}`, <ProjectsHubPage />);
 
     expect(await screen.findByText('Create your first project')).toBeInTheDocument();
     // The page-level "Projects" title belongs in content because the top nav owns
@@ -48,12 +53,12 @@ describe('ProjectsHubPage', () => {
     });
     configureApiClient({fetchImpl});
 
-    renderProjectPage(`/workspaces/${PROJECT_TEST_WID}`, <ProjectsHubPage />);
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}`, <ProjectsHubPage />);
 
     expect(await screen.findByText('Finish setting up a model provider')).toBeInTheDocument();
     expect(screen.getByRole('link', {name: 'Agents'})).toHaveAttribute(
       'href',
-      `/workspaces/${PROJECT_TEST_WID}/settings/agents`,
+      `/w/${PROJECT_TEST_WSLUG}/settings/agents`,
     );
     fireEvent.click(screen.getByRole('button', {name: 'Close'}));
 
@@ -69,7 +74,7 @@ describe('ProjectsHubPage', () => {
     });
     configureApiClient({fetchImpl});
 
-    renderProjectPage(`/workspaces/${PROJECT_TEST_WID}`, <ProjectsHubPage />);
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}`, <ProjectsHubPage />);
 
     expect(await screen.findByText('Create your first project')).toBeInTheDocument();
     expect(screen.queryByText('Finish setting up a model provider')).not.toBeInTheDocument();
@@ -104,7 +109,7 @@ describe('ProjectsHubPage', () => {
     });
     configureApiClient({fetchImpl});
 
-    renderProjectPage(`/workspaces/${PROJECT_TEST_WID}`, <ProjectsHubPage />);
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}`, <ProjectsHubPage />);
     expect(await screen.findByText('Platform')).toBeInTheDocument();
     const projectLink = screen.getByText('Platform').closest('a');
     // The whole card is the link, carrying the neutral focus ring (matching the
@@ -124,7 +129,7 @@ describe('ProjectsHubPage', () => {
       }),
     });
 
-    renderProjectPage(`/workspaces/${PROJECT_TEST_WID}`, <ProjectsHubPage />);
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}`, <ProjectsHubPage />);
 
     expect(await screen.findByText("Couldn't load projects")).toBeInTheDocument();
     expect(screen.getByRole('button', {name: 'Retry loading projects'})).toBeInTheDocument();
@@ -147,7 +152,7 @@ describe('ProjectsHubPage', () => {
       }),
     });
 
-    renderProjectPage(`/workspaces/${PROJECT_TEST_WID}`, <ProjectsHubPage />);
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}`, <ProjectsHubPage />);
 
     expect(await screen.findByText('Platform')).toBeInTheDocument();
 
@@ -182,7 +187,7 @@ describe('ProjectsHubPage', () => {
       }),
     });
 
-    renderProjectPage(`/workspaces/${PROJECT_TEST_WID}`, <ProjectsHubPage />);
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}`, <ProjectsHubPage />);
 
     expect(await screen.findByText('Platform')).toBeInTheDocument();
     expect(await screen.findByText(label)).toBeInTheDocument();
@@ -201,7 +206,7 @@ describe('ProjectsHubPage', () => {
       }),
     });
 
-    renderProjectPage(`/workspaces/${PROJECT_TEST_WID}`, <ProjectsHubPage />);
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}`, <ProjectsHubPage />);
 
     expect(await screen.findByText('Platform')).toBeInTheDocument();
 
@@ -267,6 +272,7 @@ function projectDto({
     id,
     workspace_id: PROJECT_TEST_WID,
     name,
+    slug: name.toLowerCase(),
     source: {
       connection_id: connectionId,
       external_repository_id: externalRepositoryId,

package/src/pages/projects-hub-page.tsx

@@ -69,7 +69,7 @@ export function ProjectsHubPage({search = ''}: {search?: string}) {
             }
           />
           <Button asChild iconLeft="addLine" className="shrink-0 max-[640px]:w-full">
-            <Link to="/workspaces/$wid/projects/new" params={{wid: workspace.id}}>
+            <Link to="/w/$workspaceSlug/projects/new" params={{workspaceSlug: workspace.slug}}>
               New project
             </Link>
           </Button>
@@ -83,7 +83,7 @@ export function ProjectsHubPage({search = ''}: {search?: string}) {
       {query.isError && hasNoData ? <QueryLoadError query={query} subject="projects" /> : null}
 
       {!isInitialLoading && !query.isError && projects.length === 0 && !search ? (
-        <EmptyProjects workspaceId={workspace.id} />
+        <EmptyProjects workspaceSlug={workspace.slug} />
       ) : null}
 
       {!query.isFetching && !query.isError && projects.length === 0 && search ? (
@@ -103,7 +103,7 @@ export function ProjectsHubPage({search = ''}: {search?: string}) {
                 connectionsResolved={connectionsQuery.isSuccess}
                 connectionsSettled={connectionsQuery.isSuccess || connectionsQuery.isError}
                 key={project.id}
-                workspaceId={workspace.id}
+                workspaceSlug={workspace.slug}
               />
             ))}
           </ul>
@@ -152,7 +152,7 @@ function ProjectsSkeleton() {
   );
 }
 
-function EmptyProjects({workspaceId}: {workspaceId: string}) {
+function EmptyProjects({workspaceSlug}: {workspaceSlug: string}) {
   return (
     <EmptyState
       icon="folderLine"
@@ -160,7 +160,7 @@ function EmptyProjects({workspaceId}: {workspaceId: string}) {
       description="Connect a repository-backed project to start building workflows."
       action={
         <Button asChild iconRight="chevronRight">
-          <Link to="/workspaces/$wid/projects/new" params={{wid: workspaceId}}>
+          <Link to="/w/$workspaceSlug/projects/new" params={{workspaceSlug}}>
             Create project
           </Link>
         </Button>
@@ -189,13 +189,13 @@ function ProjectCard({
   connection,
   connectionsResolved,
   connectionsSettled,
-  workspaceId,
+  workspaceSlug,
 }: {
   project: Project;
   connection: IntegrationConnection | undefined;
   connectionsResolved: boolean;
   connectionsSettled: boolean;
-  workspaceId: string;
+  workspaceSlug: string;
 }) {
   // On a resolved fetch, `active` carries no badge while a missing connection
   // reads as an error so a broken source is still flagged. An unresolved or
@@ -205,8 +205,8 @@ function ProjectCard({
   return (
     <li>
       <Link
-        to="/workspaces/$wid/projects/$pid"
-        params={{wid: workspaceId, pid: project.id}}
+        to="/w/$workspaceSlug/p/$projectSlug"
+        params={{workspaceSlug, projectSlug: project.slug}}
         className="block h-full rounded-8 focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
       >
         <Card className="h-full p-16 transition-colors hover:bg-background-components-hover">

package/src/project-error.test.ts

@@ -19,6 +19,7 @@ describe('projectErrorCopy', () => {
     ['malformed-provider-response', 'Provider response changed'],
     ['source-connection-not-found', 'Source connection not found'],
     ['source-connection-inactive', 'Source connection inactive'],
+    ['slug-conflict', 'Project slug already exists'],
   ])('maps %s', (code, title) => {
     const result = projectErrorCopy(apiError(code));