fix(frontend): remove locale-dependent routing and migrate to centralized locale-aware router

- Replaced `next/navigation` with `@/lib/i18n/routing` across components, pages, and tests.
- Removed redundant `locale` props from `ProjectWizard` and related pages.
- Updated navigation to exclude explicit `locale` in paths.
- Refactored tests to use mocks from `next-intl/navigation`.

frontend/src/app/[locale]/(authenticated)/agents/[id]/page.tsx

@@ -8,7 +8,8 @@
 'use client';
 
 import { useCallback, useState } from 'react';
-import { useRouter, useParams } from 'next/navigation';
+import { useParams } from 'next/navigation';
+import { useRouter } from '@/lib/i18n/routing';
 import { toast } from 'sonner';
 import { AgentTypeDetail, AgentTypeForm } from '@/components/agents';
 import {

frontend/src/app/[locale]/(authenticated)/agents/page.tsx

@@ -8,7 +8,7 @@
 'use client';
 
 import { useState, useCallback, useMemo } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from '@/lib/i18n/routing';
 import { toast } from 'sonner';
 import { AgentTypeList } from '@/components/agents';
 import { useAgentTypes } from '@/lib/api/hooks/useAgentTypes';

frontend/src/app/[locale]/(authenticated)/projects/[id]/issues/page.tsx

@@ -10,7 +10,7 @@
  */
 
 import { useState, use } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from '@/lib/i18n/routing';
 import { Plus, Upload } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -25,7 +25,7 @@ interface ProjectIssuesPageProps {
 }
 
 export default function ProjectIssuesPage({ params }: ProjectIssuesPageProps) {
-  const { locale, id: projectId } = use(params);
+  const { id: projectId } = use(params);
   const router = useRouter();
 
   // Filter state
@@ -49,7 +49,7 @@ export default function ProjectIssuesPage({ params }: ProjectIssuesPageProps) {
   const { data, isLoading, error } = useIssues(projectId, filters, sort);
 
   const handleIssueClick = (issueId: string) => {
-    router.push(`/${locale}/projects/${projectId}/issues/${issueId}`);
+    router.push(`/projects/${projectId}/issues/${issueId}`);
   };
 
   const handleBulkChangeStatus = () => {

frontend/src/app/[locale]/(authenticated)/projects/new/page.tsx

@@ -13,17 +13,11 @@ export const metadata: Metadata = {
   description: 'Create a new Syndarix project with AI-powered agents',
 };
 
-interface NewProjectPageProps {
-  params: Promise<{ locale: string }>;
-}
-
-export default async function NewProjectPage({ params }: NewProjectPageProps) {
-  const { locale } = await params;
-
+export default function NewProjectPage() {
   return (
     <div className="min-h-screen bg-background">
       <div className="container mx-auto px-4 py-8">
-        <ProjectWizard locale={locale} />
+        <ProjectWizard />
       </div>
     </div>
   );

frontend/src/app/[locale]/(authenticated)/projects/page.tsx

@@ -10,7 +10,7 @@
 'use client';
 
 import { useState, useCallback, useMemo } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from '@/lib/i18n/routing';
 import { toast } from 'sonner';
 import { Plus } from 'lucide-react';
 import { Button } from '@/components/ui/button';

frontend/src/components/projects/ProjectDashboard.tsx

@@ -10,7 +10,7 @@
 'use client';
 
 import { useCallback, useMemo, useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from '@/lib/i18n/routing';
 import { AlertCircle, RefreshCw } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';

frontend/src/components/projects/wizard/ProjectWizard.tsx

@@ -8,7 +8,7 @@
  */
 
 import { useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from '@/lib/i18n/routing';
 import { ArrowLeft, ArrowRight, Check, CheckCircle2, Loader2 } from 'lucide-react';
 import { useMutation } from '@tanstack/react-query';
 
@@ -49,11 +49,10 @@ interface ProjectResponse {
 }
 
 interface ProjectWizardProps {
-  locale: string;
   className?: string;
 }
 
-export function ProjectWizard({ locale, className }: ProjectWizardProps) {
+export function ProjectWizard({ className }: ProjectWizardProps) {
   const router = useRouter();
   const [isCreated, setIsCreated] = useState(false);
 
@@ -106,9 +105,9 @@ export function ProjectWizard({ locale, className }: ProjectWizardProps) {
   const handleGoToProject = () => {
     // Navigate to project dashboard - using slug from successful creation
     if (createProjectMutation.data) {
-      router.push(`/${locale}/projects/${createProjectMutation.data.slug}`);
+      router.push(`/projects/${createProjectMutation.data.slug}`);
     } else {
-      router.push(`/${locale}/projects`);
+      router.push(`/projects`);
     }
   };
 

frontend/tests/components/projects/ProjectDashboard.test.tsx

@@ -92,18 +92,8 @@ jest.mock('@/lib/hooks/useProjectEvents', () => ({
   useProjectEvents: jest.fn(() => mockUseProjectEventsResult),
 }));
 
-// Mock next/navigation
-const mockPush = jest.fn();
-jest.mock('next/navigation', () => ({
-  useRouter: () => ({
-    push: mockPush,
-    back: jest.fn(),
-    forward: jest.fn(),
-    refresh: jest.fn(),
-    replace: jest.fn(),
-    prefetch: jest.fn(),
-  }),
-}));
+// Import mock from next-intl/navigation mock (used by @/lib/i18n/routing)
+import { mockPush } from 'next-intl/navigation';
 
 describe('ProjectDashboard', () => {
   const projectId = 'test-project-123';

frontend/tests/components/projects/wizard/ProjectWizard.test.tsx

@@ -77,13 +77,8 @@ jest.mock('@/components/projects/wizard/useWizardState', () => ({
   })),
 }));
 
-// Mock router
-const mockPush = jest.fn();
-jest.mock('next/navigation', () => ({
-  useRouter: () => ({
-    push: mockPush,
-  }),
-}));
+// Import mock from next-intl/navigation mock (used by @/lib/i18n/routing)
+import { mockPush } from 'next-intl/navigation';
 
 // Mock API client
 const mockPost = jest.fn();
@@ -131,36 +126,36 @@ describe('ProjectWizard', () => {
 
   describe('Rendering', () => {
     it('renders the step indicator', () => {
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
       expect(screen.getByTestId('step-indicator')).toBeInTheDocument();
     });
 
     it('renders BasicInfoStep on step 1', () => {
       mockWizardState.step = 1;
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
       expect(screen.getByTestId('basic-info-step')).toBeInTheDocument();
     });
 
     it('renders ComplexityStep on step 2', () => {
       mockWizardState.step = 2;
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
       expect(screen.getByTestId('complexity-step')).toBeInTheDocument();
     });
 
     it('renders AgentChatStep on step 5', () => {
       mockWizardState.step = 5;
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
       expect(screen.getByTestId('agent-chat-step')).toBeInTheDocument();
     });
 
     it('renders ReviewStep on step 6', () => {
       mockWizardState.step = 6;
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
       expect(screen.getByTestId('review-step')).toBeInTheDocument();
     });
 
     it('applies custom className', () => {
-      const { container } = render(<ProjectWizard locale="en" className="custom-class" />, {
+      const { container } = render(<ProjectWizard className="custom-class" />, {
         wrapper: createWrapper(),
       });
       expect(container.firstChild).toHaveClass('custom-class');
@@ -171,7 +166,7 @@ describe('ProjectWizard', () => {
     it('calls goNext when Next button is clicked', async () => {
       const user = userEvent.setup();
       mockWizardState.step = 1;
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
 
       await user.click(screen.getByRole('button', { name: /next/i }));
       expect(mockGoNext).toHaveBeenCalled();
@@ -180,7 +175,7 @@ describe('ProjectWizard', () => {
     it('calls goBack when Back button is clicked', async () => {
       const user = userEvent.setup();
       mockWizardState.step = 2;
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
 
       await user.click(screen.getByRole('button', { name: /back/i }));
       expect(mockGoBack).toHaveBeenCalled();
@@ -188,21 +183,21 @@ describe('ProjectWizard', () => {
 
     it('hides Back button on step 1', () => {
       mockWizardState.step = 1;
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
       const backButton = screen.getByRole('button', { name: /back/i });
       expect(backButton).toHaveClass('invisible');
     });
 
     it('shows Back button visible on step 2', () => {
       mockWizardState.step = 2;
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
       const backButton = screen.getByRole('button', { name: /back/i });
       expect(backButton).not.toHaveClass('invisible');
     });
 
     it('shows Create Project button on review step', () => {
       mockWizardState.step = 6;
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
       expect(screen.getByRole('button', { name: /create project/i })).toBeInTheDocument();
     });
   });
@@ -211,7 +206,7 @@ describe('ProjectWizard', () => {
     it('skips client mode step in script mode', () => {
       mockWizardState.step = 3;
       mockWizardState.complexity = 'script';
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
       // ClientModeStep should not render for script mode
       expect(screen.queryByTestId('client-mode-step')).not.toBeInTheDocument();
     });
@@ -219,14 +214,14 @@ describe('ProjectWizard', () => {
     it('skips autonomy step in script mode', () => {
       mockWizardState.step = 4;
       mockWizardState.complexity = 'script';
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
       // AutonomyStep should not render for script mode
       expect(screen.queryByTestId('autonomy-step')).not.toBeInTheDocument();
     });
 
     it('shows script mode indicator', () => {
       mockWizardState.complexity = 'script';
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
       expect(screen.getByText(/script mode/i)).toBeInTheDocument();
     });
   });
@@ -235,7 +230,7 @@ describe('ProjectWizard', () => {
     it('shows success screen after creation', async () => {
       const user = userEvent.setup();
       mockWizardState.step = 6;
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
 
       await user.click(screen.getByRole('button', { name: /create project/i }));
 
@@ -247,7 +242,7 @@ describe('ProjectWizard', () => {
     it('displays project name in success message', async () => {
       const user = userEvent.setup();
       mockWizardState.step = 6;
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
 
       await user.click(screen.getByRole('button', { name: /create project/i }));
 
@@ -259,7 +254,7 @@ describe('ProjectWizard', () => {
     it('navigates to project dashboard on success', async () => {
       const user = userEvent.setup();
       mockWizardState.step = 6;
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
 
       await user.click(screen.getByRole('button', { name: /create project/i }));
 
@@ -270,13 +265,14 @@ describe('ProjectWizard', () => {
       });
 
       await user.click(screen.getByRole('button', { name: /go to project dashboard/i }));
-      expect(mockPush).toHaveBeenCalledWith('/en/projects/test-project');
+      // Locale-aware router adds locale prefix automatically
+      expect(mockPush).toHaveBeenCalledWith('/projects/test-project');
     });
 
     it('allows creating another project', async () => {
       const user = userEvent.setup();
       mockWizardState.step = 6;
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
 
       await user.click(screen.getByRole('button', { name: /create project/i }));
 
@@ -294,7 +290,7 @@ describe('ProjectWizard', () => {
       mockPost.mockRejectedValue(new Error('Network error'));
       const user = userEvent.setup();
       mockWizardState.step = 6;
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
 
       await user.click(screen.getByRole('button', { name: /create project/i }));
 
@@ -307,13 +303,13 @@ describe('ProjectWizard', () => {
   describe('Button States', () => {
     it('disables Next button when cannot proceed', () => {
       mockWizardState.projectName = '';
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
       expect(screen.getByRole('button', { name: /next/i })).toBeDisabled();
     });
 
     it('enables Next button when can proceed', () => {
       mockWizardState.projectName = 'Valid Name';
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
       expect(screen.getByRole('button', { name: /next/i })).not.toBeDisabled();
     });
 
@@ -323,7 +319,7 @@ describe('ProjectWizard', () => {
       );
       const user = userEvent.setup();
       mockWizardState.step = 6;
-      render(<ProjectWizard locale="en" />, { wrapper: createWrapper() });
+      render(<ProjectWizard />, { wrapper: createWrapper() });
 
       await user.click(screen.getByRole('button', { name: /create project/i }));
       expect(screen.getByText(/creating/i)).toBeInTheDocument();