@shipfox/client-projects 17.0.0 → 22.0.0

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

@@ -13,8 +13,9 @@ 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 {Panel, PanelBody} from '@shipfox/react-ui/panel';
 import {toast} from '@shipfox/react-ui/toast';
-import {Header, Text} from '@shipfox/react-ui/typography';
+import {Header} from '@shipfox/react-ui/typography';
 import {useForm} from '@tanstack/react-form';
 import {useNavigate} from '@tanstack/react-router';
 import {useState} from 'react';
@@ -124,86 +125,97 @@ function ProjectSettingsForm({project}: {project: Project}) {
   return (
     <>
       <div className="flex min-w-0 flex-col gap-section">
-        <header className="flex flex-col gap-inline">
-          <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>
+        <Header variant="h1">General</Header>
 
-        {formError ? (
-          <Callout role="alert" type="error">
-            {formError}
-          </Callout>
-        ) : null}
+        <Panel>
+          <PanelBody className="gap-group p-panel">
+            {formError ? (
+              <Callout role="alert" type="error">
+                {formError}
+              </Callout>
+            ) : null}
 
-        <form
-          className="flex max-w-[560px] flex-col gap-group"
-          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
+              className="flex w-full max-w-[560px] flex-col gap-group"
+              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"
+              <form.Field
                 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>
+                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>
+              <Button type="submit" isLoading={updateProject.isPending} className="self-start">
+                Save changes
+              </Button>
+            </form>
+          </PanelBody>
+        </Panel>
       </div>
 
       <SlugChangeWarning

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

@@ -0,0 +1,203 @@
+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 {ProjectsHubPage} from './projects-hub-page.js';
+
+const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
+const CONNECTION_ID = '33333333-3333-4333-8333-333333333333';
+
+type Scenario = 'list' | 'empty' | 'loading' | 'error';
+
+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 ProjectsHubPageStory({scenario}: {scenario: Scenario}) {
+  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(), []);
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <JotaiProvider store={store}>
+        <div className="min-h-screen bg-background-subtle-base 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/ProjectsHubPage',
+  component: ProjectsHubPageStory,
+  parameters: {layout: 'fullscreen'},
+  args: {scenario: 'list'},
+} satisfies Meta<typeof ProjectsHubPageStory>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const Empty: Story = {
+  args: {scenario: 'empty'},
+};
+
+export const Loading: Story = {
+  args: {scenario: 'loading'},
+};
+
+export const ErrorState: Story = {
+  args: {scenario: 'error'},
+};
+
+function createStoryRouter() {
+  const rootRoute = createRootRoute({component: Outlet});
+  const workspaceRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/w/$workspaceSlug',
+    component: ProjectsHubPage,
+  });
+
+  return createRouter({
+    history: createMemoryHistory({initialEntries: ['/w/acme']}),
+    routeTree: rootRoute.addChildren([workspaceRoute]),
+  });
+}
+
+function fetchForScenario(scenario: Scenario): typeof fetch {
+  return (input) => {
+    const url = requestUrl(input);
+
+    if (url.pathname.endsWith('/agent/model-providers')) {
+      return Promise.resolve(
+        jsonResponse({
+          configs: [
+            {
+              kind: 'builtin',
+              provider_id: 'anthropic',
+              default_model: null,
+              created_at: '2026-01-01T00:00:00.000Z',
+              updated_at: '2026-01-01T00:00:00.000Z',
+            },
+          ],
+          default_provider_id: 'anthropic',
+          default_harness_id: null,
+        }),
+      );
+    }
+
+    if (url.pathname === '/integration-connections') {
+      return Promise.resolve(
+        jsonResponse({
+          connections: [
+            {
+              id: CONNECTION_ID,
+              workspace_id: WORKSPACE_ID,
+              provider: 'github',
+              external_account_id: 'octo',
+              slug: 'github_octo',
+              display_name: 'Acme GitHub',
+              lifecycle_status: 'active',
+              capabilities: ['source_control'],
+              created_at: '2026-01-01T00:00:00.000Z',
+              updated_at: '2026-01-01T00:00:00.000Z',
+            },
+          ],
+        }),
+      );
+    }
+
+    if (url.pathname === '/projects') {
+      if (scenario === 'loading') {
+        return new Promise<Response>(() => {
+          // Keep the request pending to show the initial skeleton.
+        });
+      }
+      if (scenario === 'error') {
+        return Promise.resolve(jsonResponse({code: 'server-error'}, {status: 500}));
+      }
+      if (scenario === 'empty') {
+        return Promise.resolve(jsonResponse({projects: [], next_cursor: null}));
+      }
+
+      return Promise.resolve(
+        jsonResponse({
+          projects: [
+            projectForStory('Platform', '11111111-1111-4111-8111-111111111112'),
+            projectForStory('Agent', '11111111-1111-4111-8111-111111111113'),
+            projectForStory('Workflows', '11111111-1111-4111-8111-111111111114'),
+          ],
+          next_cursor: null,
+        }),
+      );
+    }
+
+    return Promise.resolve(jsonResponse({}, {status: 404}));
+  };
+}
+
+function projectForStory(name: string, id: string) {
+  return {
+    id,
+    workspace_id: WORKSPACE_ID,
+    name,
+    slug: name.toLowerCase(),
+    source: {
+      connection_id: CONNECTION_ID,
+      external_repository_id: `github:octo/${name.toLowerCase()}`,
+    },
+    created_at: '2026-01-01T00:00:00.000Z',
+    updated_at: '2026-01-01T00:00:00.000Z',
+  };
+}
+
+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/projects-hub-page.test.tsx

@@ -1,5 +1,5 @@
 import {configureApiClient} from '@shipfox/client-api';
-import {fireEvent, screen, waitFor} from '@testing-library/react';
+import {fireEvent, screen, waitFor, within} from '@testing-library/react';
 import {
   jsonResponse,
   PROJECT_TEST_WID,
@@ -17,7 +17,7 @@ describe('ProjectsHubPage', () => {
     window.sessionStorage.clear();
   });
 
-  test('renders Projects H2 + New project button + empty state with create CTA', async () => {
+  test('renders the Projects panel controls and empty state with create CTA', async () => {
     configureApiClient({
       fetchImpl: createHubFetch({
         projects: jsonResponse({projects: [], next_cursor: null}),
@@ -28,10 +28,17 @@ describe('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
-    // workspace identity.
-    expect(screen.getByRole('heading', {name: 'Projects'})).toBeInTheDocument();
-    expect(screen.getByRole('link', {name: NEW_PROJECT_REGEX})).toHaveAttribute(
+    const projectsRegion = screen.getByRole('region', {name: 'Projects'});
+    expect(projectsRegion.querySelectorAll('[data-slot="panel"]')).toHaveLength(1);
+    const panelHeader = projectsRegion.querySelector<HTMLElement>('[data-slot="panel-header"]');
+    if (!panelHeader) throw new Error('Projects panel header was not rendered');
+    expect(panelHeader).toBeInTheDocument();
+    expect(projectsRegion.querySelector('[data-slot="panel-body"]')).toBeInTheDocument();
+    expect(screen.queryByRole('heading', {name: 'Projects'})).not.toBeInTheDocument();
+    expect(
+      within(panelHeader).getByRole('searchbox', {name: 'Search projects'}),
+    ).toBeInTheDocument();
+    expect(within(panelHeader).getByRole('link', {name: NEW_PROJECT_REGEX})).toHaveAttribute(
       'href',
       WORKSPACE_PROJECTS_NEW_HREF,
     );
@@ -111,17 +118,90 @@ describe('ProjectsHubPage', () => {
 
     renderProjectPage(`/w/${PROJECT_TEST_WSLUG}`, <ProjectsHubPage />);
     expect(await screen.findByText('Platform')).toBeInTheDocument();
+    const projectsList = screen.getByRole('list', {name: 'Projects list'});
+    expect(projectsList).toHaveClass('grid-cols-2', 'max-[760px]:grid-cols-1');
+    expect(projectsList).not.toHaveClass('gap-px');
+    expect(projectsList).not.toHaveClass('bg-border-neutral-base');
+    expect(projectsList.querySelectorAll('[data-slot="panel-cell"]')).toHaveLength(1);
     const projectLink = screen.getByText('Platform').closest('a');
-    // The whole card is the link, carrying the neutral focus ring (matching the
-    // integration gallery cards).
-    expect(projectLink).toHaveClass('focus-visible:shadow-button-neutral-focus');
-    expect(projectLink?.className).not.toContain('shadow-button-secondary');
+    // The whole cell is the link, carrying an inset neutral focus ring.
+    expect(projectLink).toHaveClass('focus-visible:shadow-focus-inset');
+    expect(projectLink).toHaveClass('hover:bg-background-neutral-hover');
 
     fireEvent.click(screen.getByRole('button', {name: 'Load more'}));
 
     expect(await screen.findByText('API')).toBeInTheDocument();
   });
 
+  test('renders an odd project count without an empty border-colored cell', async () => {
+    configureApiClient({
+      fetchImpl: createHubFetch({
+        projects: jsonResponse({
+          projects: [
+            projectDto({id: '11111111-1111-4111-8111-111111111112', name: 'Platform'}),
+            projectDto({id: '11111111-1111-4111-8111-111111111113', name: 'Agent'}),
+            projectDto({id: '11111111-1111-4111-8111-111111111114', name: 'Workflows'}),
+          ],
+          next_cursor: null,
+        }),
+      }),
+    });
+
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}`, <ProjectsHubPage />);
+
+    const projectsList = await screen.findByRole('list', {name: 'Projects list'});
+    expect(projectsList.querySelectorAll('[data-slot="panel-cell"]')).toHaveLength(3);
+    expect(projectsList).not.toHaveClass('gap-px', 'bg-border-neutral-base');
+    // The odd count is padded so the last row's divider still spans the panel,
+    // and the pad carries the panel fill rather than the border colour.
+    const filler = projectsList.querySelector('[data-slot="panel-cell-filler"]');
+    expect(filler).not.toBeNull();
+    expect(filler).toHaveClass('bg-background-neutral-base');
+  });
+
+  test('keeps existing projects and the load-more retry after a cursor failure', async () => {
+    let cursorRequests = 0;
+    const fetchImpl = vi.fn((input: RequestInfo | URL) => {
+      const url = new URL(requestInputUrl(input));
+      if (url.pathname.endsWith('/agent/model-providers')) {
+        return Promise.resolve(jsonResponse(modelProviderConfigsDto()));
+      }
+      if (url.pathname === '/integration-connections') {
+        return Promise.resolve(jsonResponse(connectionsDto()));
+      }
+      if (url.pathname === '/projects') {
+        if (url.searchParams.get('cursor') === 'cursor-1') {
+          cursorRequests += 1;
+          return Promise.resolve(jsonResponse({code: 'server-error'}, {status: 500}));
+        }
+        return Promise.resolve(
+          jsonResponse({
+            projects: [projectDto({id: '11111111-1111-4111-8111-111111111112', name: 'Platform'})],
+            next_cursor: 'cursor-1',
+          }),
+        );
+      }
+      return Promise.resolve(jsonResponse({code: 'not-found'}, {status: 404}));
+    });
+    configureApiClient({fetchImpl});
+
+    renderProjectPage(`/w/${PROJECT_TEST_WSLUG}`, <ProjectsHubPage />);
+    expect(await screen.findByText('Platform')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', {name: 'Load more'}));
+
+    expect(await screen.findByRole('alert')).toHaveTextContent(
+      'Could not load the next page. Existing projects are still shown.',
+    );
+    expect(screen.getByText('Platform')).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Load more'})).toBeInTheDocument();
+    expect(cursorRequests).toBe(1);
+
+    fireEvent.click(screen.getByRole('button', {name: 'Load more'}));
+
+    await waitFor(() => expect(cursorRequests).toBe(2));
+  });
+
   test('renders an error alert with retry', async () => {
     configureApiClient({
       fetchImpl: createHubFetch({