feat: update project name validation to follow GitHub naming conventions and improve user guidance

Author: Marvin Zhang

packages/core/src/utils/project-name.ts

@@ -44,9 +44,8 @@ export function generateSlugFromName(name: string): string {
 }
 
 /**
- * Validate a project display name (more permissive than slugs):
- * - Can contain letters, numbers, spaces, hyphens, underscores, dots
- * - Cannot start or end with whitespace
+ * Validate a project display name following GitHub repository naming rules:
+ * - Can only contain ASCII letters, digits, and the characters -, ., and _
  * - Must not be empty
  * - Length between 1-100 characters
  */
@@ -55,13 +54,8 @@ export function validateProjectDisplayName(name: string): boolean {
     return false;
   }
 
-  // Check for leading/trailing whitespace
-  if (name.trim() !== name) {
-    return false;
-  }
-
-  // Must contain only valid display characters
-  if (!/^[a-zA-Z0-9\s._-]+$/.test(name)) {
+  // Must contain only ASCII letters, digits, hyphens, dots, and underscores
+  if (!/^[a-zA-Z0-9._-]+$/.test(name)) {
     return false;
   }
 

packages/web/app/components/layout/NavigationBreadcrumb.tsx

@@ -20,14 +20,34 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { toast } from 'sonner';
 
 export function NavigationBreadcrumb() {
-  const router = useRouter();
   const pathname = usePathname();
+  const router = useRouter();
+
+  // Parse project name and devlog ID from URL instead of using context hooks
+  // since this component is rendered at app level, outside of the provider hierarchy
+  const pathSegments = pathname.split('/').filter(Boolean);
+  let projectName: string | null = null;
+  let devlogId: number | null = null;
+
+  // Check if we're in a project path: /projects/[name] or /projects/[name]/devlogs/[id]
+  if (pathSegments[0] === 'projects' && pathSegments[1]) {
+    projectName = pathSegments[1];
+    
+    // Check if we're in a devlog path
+    if (pathSegments[2] === 'devlogs' && pathSegments[3]) {
+      const parsedDevlogId = parseInt(pathSegments[3], 10);
+      if (!isNaN(parsedDevlogId)) {
+        devlogId = parsedDevlogId;
+      }
+    }
+  }
+
   const { currentProjectContext, currentProjectName, projectsContext, fetchProjects } =
     useProjectStore();
-  const { currentDevlogContext, currentDevlogId } = useDevlogStore();
+  const { currentDevlogContext } = useDevlogStore();
 
-  // Don't show breadcrumb on the home or project list page
-  if (['/', '/projects'].includes(pathname)) {
+  // If we are not in a project context, do not render the breadcrumb
+  if (!projectName) {
     return null;
   }
 
@@ -50,12 +70,15 @@ export function NavigationBreadcrumb() {
     }
   };
 
-  const handleDropdownOpenChange = (open: boolean) => {
-    if (open) {
-      // Load projects when dropdown is opened
-      fetchProjects();
-    }
-  };
+  const dropdownSkeletons = Array.from({ length: 3 }).map((_, index) => (
+    <DropdownMenuItem key={index} disabled className="flex items-center gap-3 p-3">
+      <Skeleton className="w-6 h-6 rounded-full flex-shrink-0" />
+      <div className="flex-1 min-w-0 space-y-1">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-3 w-8" />
+      </div>
+    </DropdownMenuItem>
+  ));
 
   const renderProjectDropdown = () => {
     // Show skeleton if current project is loading
@@ -68,29 +91,24 @@ export function NavigationBreadcrumb() {
     }
 
     return (
-      <DropdownMenu onOpenChange={handleDropdownOpenChange}>
+      <DropdownMenu
+        onOpenChange={async (open) => {
+          if (open) await fetchProjects();
+        }}
+      >
         <DropdownMenuTrigger asChild>
           <div className="flex items-center gap-2 cursor-pointer rounded">
             <Package size={14} />
-            <span>{currentProjectContext.data?.name}</span>
+            <span>{projectName}</span>
             <ChevronsUpDown size={14} className="text-muted-foreground" />
           </div>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start" className="w-64">
           {/* Show skeleton items if projects list is loading */}
           {projectsContext.loading
-            ? Array.from({ length: 3 }).map((_, index) => (
-                <DropdownMenuItem key={index} disabled className="flex items-center gap-3 p-3">
-                  <Skeleton className="w-6 h-6 rounded-full flex-shrink-0" />
-                  <div className="flex-1 min-w-0 space-y-1">
-                    <Skeleton className="h-4 w-full" />
-                    <Skeleton className="h-3 w-8" />
-                  </div>
-                </DropdownMenuItem>
-              ))
+            ? dropdownSkeletons
             : projectsContext.data?.map((project) => {
-                const isCurrentProject = currentProjectName === project.name;
-
+                const isCurrentProject = projectName === project.name;
                 return (
                   <DropdownMenuItem
                     key={project.id}
@@ -100,11 +118,11 @@ export function NavigationBreadcrumb() {
                   >
                     <div className="flex-1 min-w-0">
                       <div className="text-sm font-medium truncate">{project.name}</div>
-                      <div className="text-xs text-muted-foreground truncate">{project.description}</div>
+                      <div className="text-xs text-muted-foreground truncate">
+                        {project.description}
+                      </div>
                     </div>
-                    {isCurrentProject && (
-                      <Check size={14} className="text-primary flex-shrink-0" />
-                    )}
+                    {isCurrentProject && <Check size={14} className="text-primary flex-shrink-0" />}
                   </DropdownMenuItem>
                 );
               })}
@@ -134,8 +152,8 @@ export function NavigationBreadcrumb() {
   return (
     <Breadcrumb className="navigation-breadcrumb">
       <BreadcrumbList>
-        {currentProjectName && <BreadcrumbItem>{renderProjectDropdown()}</BreadcrumbItem>}
-        {currentDevlogId && (
+        <BreadcrumbItem>{renderProjectDropdown()}</BreadcrumbItem>
+        {devlogId && (
           <>
             <BreadcrumbSeparator />
             <BreadcrumbItem>{renderDevlogDropdown()}</BreadcrumbItem>

packages/web/app/projects/ProjectListPage.tsx

@@ -201,11 +201,14 @@ export function ProjectListPage() {
               <Label htmlFor="name">Project Name</Label>
               <Input
                 id="name"
-                placeholder="e.g., My Development Project"
+                placeholder="e.g., My-Dev-Project_2025"
                 value={formData.name}
                 onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                 required
               />
+              <p className="text-sm text-muted-foreground mt-1">
+                Can only contain ASCII letters, digits, and the characters -, ., and _
+              </p>
             </div>
             <div>
               <Label htmlFor="description">Description (Optional)</Label>

packages/web/app/projects/[name]/ProjectProvider.tsx

@@ -27,6 +27,7 @@ export function ProjectProvider({
 
 export function useProject(): ProjectContextValue {
   const context = useContext(ProjectContext);
+  console.debug('useProject', 'context', context);
   if (!context) {
     throw new Error('useProject must be used within a ProjectProvider');
   }

packages/web/app/projects/[name]/devlogs/DevlogProvider.tsx

@@ -27,6 +27,7 @@ export function DevlogProvider({
 
 export function useDevlog(): DevlogContextValue {
   const context = useContext(DevlogContext);
+  console.debug('useDevlog', 'context', context);
   if (!context) {
     throw new Error('useDevlog must be used within a DevlogProvider');
   }

packages/web/app/projects/[name]/devlogs/[id]/layout.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { DevlogService, ProjectService } from '@codervisor/devlog-core/server';
+import { notFound } from 'next/navigation';
+import { DevlogProvider } from '../DevlogProvider';
+
+interface DevlogLayoutProps {
+  children: React.ReactNode;
+  params: {
+    name: string; // The project name from the URL
+    id: string; // The devlog ID from the URL
+  };
+}
+
+/**
+ * Server layout that resolves devlog data and provides it to all child pages
+ */
+export default async function DevlogLayout({ children, params }: DevlogLayoutProps) {
+  const projectName = params.name;
+  const devlogId = parseInt(params.id, 10);
+
+  // Validate devlog ID
+  if (isNaN(devlogId) || devlogId <= 0) {
+    notFound();
+  }
+
+  try {
+    // Get project to ensure it exists and get project ID
+    const projectService = ProjectService.getInstance();
+    const project = await projectService.getByName(projectName);
+
+    if (!project) {
+      notFound();
+    }
+
+    // Get devlog service and fetch the devlog
+    const devlogService = DevlogService.getInstance(project.id);
+    const devlog = await devlogService.get(devlogId);
+
+    if (!devlog) {
+      notFound();
+    }
+
+    return <DevlogProvider devlog={devlog}>{children}</DevlogProvider>;
+  } catch (error) {
+    console.error('Error resolving devlog:', error);
+    notFound();
+  }
+}

packages/web/app/schemas/project.ts

@@ -27,7 +27,7 @@ export const CreateProjectBodySchema = z.object({
   name: z
     .string()
     .min(1, 'Project name is required')
-    .refine(validateProjectDisplayName, 'Project name can contain letters, numbers, spaces, hyphens, underscores, and dots. Cannot start or end with whitespace.'),
+    .refine(validateProjectDisplayName, 'The repository name can only contain ASCII letters, digits, and the characters -, ., and _.'),
   description: z.string().optional(),
   repositoryUrl: z.string().optional(),
   settings: z