@shipfox/client-projects 5.0.0 → 6.0.1

package/src/hooks/api/projects.ts

@@ -1,32 +1,55 @@
-import type {
-  CreateProjectBodyDto,
-  ListProjectsResponseDto,
-  ProjectResponseDto,
+import {
+  createProjectBodySchema,
+  listProjectsResponseSchema,
+  projectResponseSchema,
 } from '@shipfox/api-projects-dto';
-import {apiRequest} from '@shipfox/client-api';
+import {checkedApiRequest} from '@shipfox/client-api';
 import {
-  type FetchQueryOptions,
+  type InfiniteData,
   keepPreviousData,
   queryOptions,
+  type UseInfiniteQueryOptions,
+  type UseQueryOptions,
   useInfiniteQuery,
   useMutation,
   useQuery,
+  useQueryClient,
 } from '@tanstack/react-query';
+import type {CreateProjectCommand, Project, ProjectList} from '#core/project.js';
+import {toProject, toProjectList} from './mappers.js';
 
 export const projectsQueryKeys = {
   all: ['projects'] as const,
-  list: (workspaceId: string, search?: string) =>
-    [...projectsQueryKeys.all, 'list', workspaceId, search ?? ''] as const,
+  list: (workspaceId: string, search = '') =>
+    [...projectsQueryKeys.all, 'list', workspaceId, search] as const,
   exists: (workspaceId: string) => [...projectsQueryKeys.all, 'exists', workspaceId] as const,
   detail: (projectId: string) => [...projectsQueryKeys.all, 'detail', projectId] as const,
 };
 
-type ProjectExistenceQueryOptions = FetchQueryOptions<
-  ListProjectsResponseDto,
+type ProjectListQueryKey =
+  | ReturnType<typeof projectsQueryKeys.list>
+  | readonly ['projects', 'list'];
+type ProjectExistenceQueryKey =
+  | ReturnType<typeof projectsQueryKeys.exists>
+  | readonly ['projects', 'exists'];
+type ProjectDetailQueryKey =
+  | ReturnType<typeof projectsQueryKeys.detail>
+  | readonly ['projects', 'detail'];
+
+type ProjectListInfiniteQueryOptions = UseInfiniteQueryOptions<
+  ProjectList,
+  Error,
+  InfiniteData<ProjectList, string | undefined>,
+  ProjectListQueryKey,
+  string | undefined
+>;
+type ProjectExistenceQueryOptions = UseQueryOptions<
+  ProjectList,
   Error,
-  ListProjectsResponseDto,
-  ReturnType<typeof projectsQueryKeys.exists>
+  ProjectList,
+  ProjectExistenceQueryKey
 >;
+type ProjectDetailQueryOptions = UseQueryOptions<Project, Error, Project, ProjectDetailQueryKey>;
 
 export async function listProjects({
   workspaceId,
@@ -39,59 +62,111 @@ export async function listProjects({
   limit?: number;
   cursor?: string | undefined;
   search?: string | undefined;
-  signal?: AbortSignal;
-}) {
+  signal?: AbortSignal | undefined;
+}): Promise<ProjectList> {
   const params = new URLSearchParams({workspace_id: workspaceId, limit: String(limit)});
   if (cursor) params.set('cursor', cursor);
   if (search) params.set('search', search);
-
-  return await apiRequest<ListProjectsResponseDto>(`/projects?${params.toString()}`, {signal});
-}
-
-export async function getProject(projectId: string) {
-  return await apiRequest<ProjectResponseDto>(`/projects/${projectId}`);
+  return toProjectList(
+    await checkedApiRequest(listProjectsResponseSchema, `/projects?${params.toString()}`, {signal}),
+  );
 }
 
-export async function createProject(body: CreateProjectBodyDto) {
-  return await apiRequest<ProjectResponseDto>('/projects', {method: 'POST', body});
+export async function getProject(projectId: string): Promise<Project> {
+  return toProject(await checkedApiRequest(projectResponseSchema, `/projects/${projectId}`));
 }
 
-export function projectExistenceQueryOptions(workspaceId: string): ProjectExistenceQueryOptions {
-  return queryOptions({
-    queryKey: projectsQueryKeys.exists(workspaceId),
-    queryFn: ({signal}) => listProjects({workspaceId, limit: 1, signal}),
-    staleTime: 30_000,
+export async function createProject(command: CreateProjectCommand): Promise<Project> {
+  const body = createProjectBodySchema.parse({
+    workspace_id: command.workspaceId,
+    name: command.name,
+    source: {
+      connection_id: command.source.connectionId,
+      external_repository_id: command.source.externalRepositoryId,
+    },
   });
+  return toProject(
+    await checkedApiRequest(projectResponseSchema, '/projects', {method: 'POST', body}),
+  );
 }
 
-export function useProjectsInfiniteQuery(
+export function projectsInfiniteQueryOptions(
   workspaceId: string | undefined,
   search?: string,
   limit = 50,
-) {
-  return useInfiniteQuery({
+): ProjectListInfiniteQueryOptions {
+  const normalizedSearch = search?.trim() ?? '';
+  return {
     queryKey: workspaceId
-      ? projectsQueryKeys.list(workspaceId, search)
-      : [...projectsQueryKeys.all, 'list'],
+      ? projectsQueryKeys.list(workspaceId, normalizedSearch)
+      : ([...projectsQueryKeys.all, 'list'] as const),
     enabled: Boolean(workspaceId),
     initialPageParam: undefined as string | undefined,
-    queryFn: ({pageParam, signal}) =>
-      listProjects({workspaceId: workspaceId ?? '', limit, cursor: pageParam, search, signal}),
-    getNextPageParam: (lastPage) => lastPage.next_cursor ?? undefined,
+    queryFn: ({pageParam, signal}: {pageParam: string | undefined; signal: AbortSignal}) =>
+      listProjects({
+        workspaceId: workspaceId ?? '',
+        limit,
+        cursor: pageParam,
+        search: normalizedSearch || undefined,
+        signal,
+      }),
+    getNextPageParam: (lastPage: ProjectList) => lastPage.nextCursor ?? undefined,
     placeholderData: keepPreviousData,
+  };
+}
+
+export function projectExistenceQueryOptions(
+  workspaceId: string | undefined,
+): ProjectExistenceQueryOptions {
+  return queryOptions({
+    queryKey: workspaceId
+      ? projectsQueryKeys.exists(workspaceId)
+      : ([...projectsQueryKeys.all, 'exists'] as const),
+    enabled: Boolean(workspaceId),
+    queryFn: ({signal}) => listProjects({workspaceId: workspaceId ?? '', limit: 1, signal}),
+    staleTime: 30_000,
   });
 }
 
-export function useProjectQuery(projectId: string | undefined) {
-  return useQuery({
+export function projectQueryOptions(projectId: string | undefined): ProjectDetailQueryOptions {
+  return queryOptions({
     queryKey: projectId
       ? projectsQueryKeys.detail(projectId)
-      : [...projectsQueryKeys.all, 'detail'],
+      : ([...projectsQueryKeys.all, 'detail'] as const),
     enabled: Boolean(projectId),
     queryFn: () => getProject(projectId ?? ''),
   });
 }
 
+export function useProjectsInfiniteQuery(
+  workspaceId: string | undefined,
+  search?: string,
+  limit = 50,
+) {
+  return useInfiniteQuery(projectsInfiniteQueryOptions(workspaceId, search, limit));
+}
+export function useProjectQuery(projectId: string | undefined) {
+  return useQuery(projectQueryOptions(projectId));
+}
+
 export function useCreateProjectMutation() {
-  return useMutation({mutationFn: createProject});
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: createProject,
+    onSuccess: async (project) => {
+      queryClient.setQueryData(projectsQueryKeys.detail(project.id), project);
+      queryClient.setQueryData<ProjectList>(projectsQueryKeys.exists(project.workspaceId), {
+        projects: [project],
+        nextCursor: null,
+      });
+      await queryClient.invalidateQueries({queryKey: projectsQueryKeys.list(project.workspaceId)});
+    },
+    onError: async (_error, command) => {
+      await queryClient.invalidateQueries({
+        queryKey: projectsQueryKeys.exists(command.workspaceId),
+        refetchType: 'active',
+      });
+      await queryClient.invalidateQueries({queryKey: projectsQueryKeys.list(command.workspaceId)});
+    },
+  });
 }

package/src/index.ts

@@ -1,3 +1,12 @@
+export type {Definition, DefinitionList, DefinitionSyncSummary} from '#core/definition.js';
+export {
+  type CreateProjectCommand,
+  type Project,
+  type ProjectList,
+  type ProjectSource,
+  projectNameFromRepository,
+  selectProjectSource,
+} from '#core/project.js';
 export {ProjectBreadcrumb, ProjectLayoutGuard} from './chrome.js';
 export {ProjectCrumb, type ProjectCrumbProps} from './components/project-crumb.js';
 export {ProjectSwitcher, type ProjectSwitcherProps} from './components/project-switcher.js';

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

@@ -150,7 +150,11 @@ function fetchForScenario(scenario: Scenario): typeof fetch {
     const method = input instanceof Request ? input.method : (init?.method ?? 'GET');
     if (url.pathname === `/workspaces/${WORKSPACE_ID}/agent/model-providers`) {
       return Promise.resolve(
-        jsonResponse({configs: [modelProviderConfig()], default_provider_id: 'openai'}),
+        jsonResponse({
+          configs: [modelProviderConfig()],
+          default_provider_id: 'openai',
+          default_harness_id: null,
+        }),
       );
     }
     if (url.pathname === '/integration-connections') {
@@ -312,6 +316,7 @@ function repository(overrides: Partial<RepositoryDto>): RepositoryDto {
 
 function modelProviderConfig() {
   return {
+    kind: 'builtin',
     workspace_id: WORKSPACE_ID,
     provider_id: 'openai',
     default_model: 'gpt-5.5-pro',

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

@@ -163,7 +163,9 @@ describe('CreateProjectPage', () => {
     const fetchImpl = vi.fn((input: RequestInfo | URL) => {
       const request = input as Request;
       if (request.url.endsWith('/agent/model-providers')) {
-        return Promise.resolve(jsonResponse({configs: [], default_provider_id: null}));
+        return Promise.resolve(
+          jsonResponse({configs: [], default_provider_id: null, default_harness_id: null}),
+        );
       }
       if (request.url.includes('/integration-connections?')) {
         return Promise.resolve(jsonResponse({connections: [connectionDto()]}));

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

@@ -1,12 +1,8 @@
-import type {IntegrationConnectionDto} from '@shipfox/api-integration-core-dto';
-import {
-  createProjectBodySchema,
-  type ListProjectsResponseDto,
-  type ProjectResponseDto,
-} from '@shipfox/api-projects-dto';
+import {createProjectBodySchema} from '@shipfox/api-projects-dto';
 import {useMaybeActiveWorkspace} from '@shipfox/client-auth';
 import {
   ConnectionPicker,
+  type IntegrationConnection,
   IntegrationIcon,
   RepositoryPicker,
   useRepositoriesInfiniteQuery,
@@ -20,24 +16,21 @@ 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 {type QueryClient, useQueryClient} from '@tanstack/react-query';
 import {Link, Navigate, useNavigate} from '@tanstack/react-router';
 import {useEffect, useRef, useState} from 'react';
 import {ModelProviderReminderBanner} from '#components/model-provider-reminder-banner.js';
-import {projectsQueryKeys, useCreateProjectMutation} from '#hooks/api/projects.js';
+import {type CreateProjectCommand, projectNameFromRepository} from '#core/project.js';
+import {useCreateProjectMutation} from '#hooks/api/projects.js';
 import {projectErrorCopy} from '#project-error.js';
 
-const REPOSITORY_NAME_SPLIT_RE = /[/-]/;
-
 export function CreateProjectPage() {
   const workspace = useMaybeActiveWorkspace();
-  const queryClient = useQueryClient();
   const navigate = useNavigate();
   const createProject = useCreateProjectMutation();
   const errorRef = useRef<HTMLDivElement>(null);
 
   const connectionsQuery = useSourceConnectionsQuery(workspace?.id);
-  const connections = connectionsQuery.data?.connections ?? [];
+  const connections = connectionsQuery.data ?? [];
 
   const [selectedConnectionId, setSelectedConnectionId] = useState<string | undefined>();
   const singleConnectionId = connections.length === 1 ? connections[0]?.id : undefined;
@@ -48,7 +41,7 @@ export function CreateProjectPage() {
     }
   }, [singleConnectionId, selectedConnectionId]);
 
-  const selectedConnection: IntegrationConnectionDto | undefined = connections.find(
+  const selectedConnection: IntegrationConnection | undefined = connections.find(
     (connection) => connection.id === effectiveSelectedConnectionId,
   );
 
@@ -65,11 +58,11 @@ export function CreateProjectPage() {
   const [selectedRepositoryId, setSelectedRepositoryId] = useState<string | undefined>();
   useEffect(() => {
     if (!selectedRepositoryId && repositories[0]) {
-      setSelectedRepositoryId(repositories[0].external_repository_id);
+      setSelectedRepositoryId(repositories[0].externalRepositoryId);
     }
   }, [repositories, selectedRepositoryId]);
   const selectedRepository = repositories.find(
-    (repository) => repository.external_repository_id === selectedRepositoryId,
+    (repository) => repository.externalRepositoryId === selectedRepositoryId,
   );
 
   const [nameTouched, setNameTouched] = useState(false);
@@ -128,18 +121,15 @@ export function CreateProjectPage() {
     }
 
     try {
-      const projectBody = createProjectBodySchema.parse({
-        workspace_id: workspace.id,
+      const command: CreateProjectCommand = {
+        workspaceId: workspace.id,
         name: projectName,
         source: {
-          connection_id: selectedConnection.id,
-          external_repository_id: selectedRepository.external_repository_id,
+          connectionId: selectedConnection.id,
+          externalRepositoryId: selectedRepository.externalRepositoryId,
         },
-      });
-      const project = await createProject.mutateAsync(projectBody);
-      setWorkspaceProjectExists(queryClient, workspace.id, project);
-      queryClient.setQueryData(projectsQueryKeys.detail(project.id), project);
-      await queryClient.invalidateQueries({queryKey: projectsQueryKeys.list(workspace.id)});
+      };
+      const project = await createProject.mutateAsync(command);
       toast.success('Project created.');
       await navigate({
         to: '/workspaces/$wid/projects/$pid',
@@ -148,11 +138,6 @@ export function CreateProjectPage() {
     } catch (error) {
       const copy = projectErrorCopy(error);
       if (copy.existingProjectId) {
-        await queryClient.invalidateQueries({
-          queryKey: projectsQueryKeys.exists(workspace.id),
-          refetchType: 'active',
-        });
-        await queryClient.invalidateQueries({queryKey: projectsQueryKeys.list(workspace.id)});
         toast.info('Project already exists.');
         await navigate({
           to: '/workspaces/$wid/projects/$pid',
@@ -284,7 +269,7 @@ export function CreateProjectPage() {
 
             <ProjectSummary
               connection={selectedConnection}
-              repositoryName={selectedRepository?.full_name}
+              repositoryName={selectedRepository?.fullName}
             />
 
             <form.Field
@@ -333,7 +318,7 @@ function ProjectSummary({
   connection,
   repositoryName,
 }: {
-  connection: IntegrationConnectionDto | undefined;
+  connection: IntegrationConnection | undefined;
   repositoryName: string | undefined;
 }) {
   return (
@@ -356,15 +341,6 @@ function ProjectSummary({
   );
 }
 
-function projectNameFromRepository(repositoryId: string): string {
-  return repositoryId
-    .trim()
-    .split(REPOSITORY_NAME_SPLIT_RE)
-    .filter(Boolean)
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join(' ');
-}
-
 function useDebouncedValue<T>(value: T, delayMs: number): T {
   const [debounced, setDebounced] = useState(value);
   useEffect(() => {
@@ -373,14 +349,3 @@ function useDebouncedValue<T>(value: T, delayMs: number): T {
   }, [value, delayMs]);
   return debounced;
 }
-
-function setWorkspaceProjectExists(
-  queryClient: QueryClient,
-  workspaceId: string,
-  project: ProjectResponseDto,
-) {
-  queryClient.setQueryData<ListProjectsResponseDto>(projectsQueryKeys.exists(workspaceId), {
-    projects: [project],
-    next_cursor: null,
-  });
-}

package/src/pages/home-router.tsx

@@ -1,5 +1,6 @@
 import {ProjectsHubPage} from '#pages/projects-hub-page.js';
+import type {ProjectsSearch} from '#routes/search.js';
 
-export function HomeRouter() {
-  return <ProjectsHubPage />;
+export function HomeRouter({search = {}}: {search?: ProjectsSearch}) {
+  return <ProjectsHubPage search={search.search ?? ''} />;
 }

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

@@ -40,7 +40,11 @@ describe('ProjectsHubPage', () => {
   test('shows and dismisses the model provider reminder when no provider is configured', async () => {
     const fetchImpl = createHubFetch({
       projects: jsonResponse({projects: [], next_cursor: null}),
-      modelProviders: jsonResponse({configs: [], default_provider_id: null}),
+      modelProviders: jsonResponse({
+        configs: [],
+        default_provider_id: null,
+        default_harness_id: null,
+      }),
     });
     configureApiClient({fetchImpl});
 
@@ -84,14 +88,14 @@ describe('ProjectsHubPage', () => {
         if (url.searchParams.get('cursor') === 'cursor-1') {
           return Promise.resolve(
             jsonResponse({
-              projects: [projectDto({id: 'project-2', name: 'API'})],
+              projects: [projectDto({id: '11111111-1111-4111-8111-111111111113', name: 'API'})],
               next_cursor: null,
             }),
           );
         }
         return Promise.resolve(
           jsonResponse({
-            projects: [projectDto({id: 'project-1', name: 'Platform'})],
+            projects: [projectDto({id: '11111111-1111-4111-8111-111111111112', name: 'Platform'})],
             next_cursor: 'cursor-1',
           }),
         );
@@ -132,7 +136,7 @@ describe('ProjectsHubPage', () => {
         projects: jsonResponse({
           projects: [
             projectDto({
-              id: 'project-1',
+              id: '11111111-1111-4111-8111-111111111112',
               name: 'Platform',
               externalRepositoryId: 'github:octo/platform',
             }),
@@ -171,7 +175,7 @@ describe('ProjectsHubPage', () => {
     configureApiClient({
       fetchImpl: createHubFetch({
         projects: jsonResponse({
-          projects: [projectDto({id: 'project-1', name: 'Platform'})],
+          projects: [projectDto({id: '11111111-1111-4111-8111-111111111112', name: 'Platform'})],
           next_cursor: null,
         }),
         connections: jsonResponse(connectionsDto({lifecycleStatus})),
@@ -190,7 +194,7 @@ describe('ProjectsHubPage', () => {
     configureApiClient({
       fetchImpl: createHubFetch({
         projects: jsonResponse({
-          projects: [projectDto({id: 'project-1', name: 'Platform'})],
+          projects: [projectDto({id: '11111111-1111-4111-8111-111111111112', name: 'Platform'})],
           next_cursor: null,
         }),
         connections: jsonResponse({code: 'server-error'}, {status: 500}),
@@ -218,7 +222,7 @@ describe('ProjectsHubPage', () => {
 
 function createHubFetch({
   projects = jsonResponse({
-    projects: [projectDto({id: 'project-1', name: 'Platform'})],
+    projects: [projectDto({id: '11111111-1111-4111-8111-111111111112', name: 'Platform'})],
     next_cursor: null,
   }),
   connections = jsonResponse(connectionsDto()),
@@ -276,14 +280,15 @@ function modelProviderConfigsDto() {
   return {
     configs: [
       {
+        kind: 'builtin',
         provider_id: 'anthropic',
         default_model: null,
-        key_fingerprints: {'credential:api_key': '...abcd'},
         created_at: new Date().toISOString(),
         updated_at: new Date().toISOString(),
       },
     ],
     default_provider_id: 'anthropic',
+    default_harness_id: null,
   };
 }
 

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

@@ -1,8 +1,7 @@
-import type {IntegrationConnectionDto} from '@shipfox/api-integration-core-dto';
-import type {ProjectResponseDto} from '@shipfox/api-projects-dto';
 import {useActiveWorkspace} from '@shipfox/client-auth';
 import {
   ConnectionStatusBadge,
+  type IntegrationConnection,
   IntegrationIcon,
   useIntegrationConnectionsQuery,
 } from '@shipfox/client-integrations';
@@ -15,17 +14,15 @@ import {Icon} from '@shipfox/react-ui/icon';
 import {Input} from '@shipfox/react-ui/input';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
 import {Header, Text} from '@shipfox/react-ui/typography';
-import {Link} from '@tanstack/react-router';
-import {useEffect, useState} from 'react';
+import {Link, useNavigate} from '@tanstack/react-router';
 import {ModelProviderReminderBanner} from '#components/model-provider-reminder-banner.js';
+import type {Project} from '#core/project.js';
 import {useProjectsInfiniteQuery} from '#hooks/api/projects.js';
 
-export function ProjectsHubPage() {
+export function ProjectsHubPage({search = ''}: {search?: string}) {
   const workspace = useActiveWorkspace();
-  const [searchInput, setSearchInput] = useState('');
-  const trimmedInput = searchInput.trim();
-  const debouncedSearch = useDebouncedValue(trimmedInput, 250);
-  const query = useProjectsInfiniteQuery(workspace.id, debouncedSearch || undefined);
+  const navigate = useNavigate();
+  const query = useProjectsInfiniteQuery(workspace.id, search || undefined);
   const projects = query.data?.pages.flatMap((page) => page.projects) ?? [];
 
   // The provider logo and connection health live on the integration connection,
@@ -35,13 +32,11 @@ export function ProjectsHubPage() {
     projects.length > 0 ? workspace.id : undefined,
   );
   const connectionsById = new Map(
-    (connectionsQuery.data?.connections ?? []).map((connection) => [connection.id, connection]),
+    (connectionsQuery.data ?? []).map((connection) => [connection.id, connection]),
   );
 
   const isInitialLoading = query.isPending;
-  const isDebouncePending = trimmedInput !== debouncedSearch;
-  const isSearching =
-    Boolean(trimmedInput) && (isDebouncePending || (query.isFetching && !query.isFetchingNextPage));
+  const isSearching = Boolean(search) && query.isFetching && !query.isFetchingNextPage;
   const hasNoData = !query.data;
 
   return (
@@ -53,8 +48,11 @@ export function ProjectsHubPage() {
         <div className="flex items-center gap-12 max-[640px]:flex-col max-[640px]:items-stretch">
           <Input
             type="search"
-            value={searchInput}
-            onChange={(event) => setSearchInput(event.target.value)}
+            value={search}
+            onChange={(event) => {
+              const next = event.target.value.trim();
+              navigate({search: (next ? {search: next} : {}) as never, replace: true});
+            }}
             placeholder="Search projects…"
             aria-label="Search projects"
             className="flex-1"
@@ -80,18 +78,19 @@ export function ProjectsHubPage() {
 
       <ModelProviderReminderBanner workspaceId={workspace.id} />
 
-      {isInitialLoading || (debouncedSearch && hasNoData && query.isFetching) ? (
-        <ProjectsSkeleton />
-      ) : null}
+      {isInitialLoading || (search && hasNoData && query.isFetching) ? <ProjectsSkeleton /> : null}
 
       {query.isError && hasNoData ? <QueryLoadError query={query} subject="projects" /> : null}
 
-      {!isInitialLoading && !query.isError && projects.length === 0 && !debouncedSearch ? (
+      {!isInitialLoading && !query.isError && projects.length === 0 && !search ? (
         <EmptyProjects workspaceId={workspace.id} />
       ) : null}
 
-      {!query.isFetching && !query.isError && projects.length === 0 && debouncedSearch ? (
-        <NoSearchResults search={debouncedSearch} onClear={() => setSearchInput('')} />
+      {!query.isFetching && !query.isError && projects.length === 0 && search ? (
+        <NoSearchResults
+          search={search}
+          onClear={() => navigate({search: {} as never, replace: true})}
+        />
       ) : null}
 
       {projects.length > 0 ? (
@@ -100,7 +99,7 @@ export function ProjectsHubPage() {
             {projects.map((project) => (
               <ProjectCard
                 project={project}
-                connection={connectionsById.get(project.source.connection_id)}
+                connection={connectionsById.get(project.source.connectionId)}
                 connectionsResolved={connectionsQuery.isSuccess}
                 connectionsSettled={connectionsQuery.isSuccess || connectionsQuery.isError}
                 key={project.id}
@@ -132,15 +131,6 @@ export function ProjectsHubPage() {
   );
 }
 
-function useDebouncedValue<T>(value: T, delayMs: number): T {
-  const [debounced, setDebounced] = useState(value);
-  useEffect(() => {
-    const handle = setTimeout(() => setDebounced(value), delayMs);
-    return () => clearTimeout(handle);
-  }, [value, delayMs]);
-  return debounced;
-}
-
 function ProjectsSkeleton() {
   return (
     <ul
@@ -201,8 +191,8 @@ function ProjectCard({
   connectionsSettled,
   workspaceId,
 }: {
-  project: ProjectResponseDto;
-  connection: IntegrationConnectionDto | undefined;
+  project: Project;
+  connection: IntegrationConnection | undefined;
   connectionsResolved: boolean;
   connectionsSettled: boolean;
   workspaceId: string;
@@ -210,7 +200,7 @@ function ProjectCard({
   // 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
   // failed fetch shows nothing, so a fetch failure never flags every card.
-  const status = connectionsResolved ? (connection?.lifecycle_status ?? 'error') : undefined;
+  const status = connectionsResolved ? (connection?.lifecycleStatus ?? 'error') : undefined;
 
   return (
     <li>

package/src/routes/home.tsx

@@ -1,4 +1,8 @@
-import {defineRoute} from '@shipfox/client-shell/runtime';
+import {defineRoute, useRouteSearch} from '@shipfox/client-shell/runtime';
 import {HomeRouter} from '#pages/home-router.js';
+import {validateProjectsSearch} from './search.js';
 
-export default defineRoute({component: HomeRouter});
+export default defineRoute({
+  validateSearch: validateProjectsSearch,
+  component: () => <HomeRouter search={useRouteSearch(validateProjectsSearch)} />,
+});

package/src/routes/inputs.test.ts

@@ -0,0 +1,14 @@
+import {projectRouteParams} from './inputs.js';
+
+describe('project route inputs', () => {
+  it('requires both workspace and project ids', () => {
+    expect(projectRouteParams({wid: 'workspace-1', pid: 'project-1'})).toEqual({
+      wid: 'workspace-1',
+      pid: 'project-1',
+    });
+    expect(() => projectRouteParams({wid: 'workspace-1'})).toThrow(
+      'Project route is missing required path parameters.',
+    );
+    expect(() => projectRouteParams({wid: ['workspace-1'], pid: 'project-1'})).toThrow();
+  });
+});

package/src/routes/inputs.ts

@@ -0,0 +1,15 @@
+export interface ProjectRouteParams {
+  wid: string;
+  pid: string;
+}
+
+export function projectRouteParams(input: Record<string, unknown>): ProjectRouteParams {
+  const wid = stringParam(input.wid);
+  const pid = stringParam(input.pid);
+  if (!wid || !pid) throw new Error('Project route is missing required path parameters.');
+  return {wid, pid};
+}
+
+function stringParam(value: unknown): string | undefined {
+  return typeof value === 'string' && value.length > 0 ? value : undefined;
+}