fix the bug and add e2e test

Author: gameroman

app/composables/useCompareReplacements.ts

@@ -1,4 +1,4 @@
-import type { ModuleReplacement } from 'module-replacements'
+import type { ModuleReplacement, ModuleReplacementMapping } from 'module-replacements'
 
 export interface ReplacementSuggestion {
   forPackage: string
@@ -41,8 +41,8 @@ export function useCompareReplacements(packageNames: MaybeRefOrGetter<string[]>)
       const results = await Promise.all(
         namesToCheck.map(async name => {
           try {
-            const replacement = await $fetch<ModuleReplacement | null>(`/api/replacements/${name}`)
-            return { name, replacement }
+            const result = await $fetch<{ mapping: ModuleReplacementMapping; replacement: ModuleReplacement } | null>(`/api/replacements/${name}`)
+            return { name, replacement: result?.replacement ?? null }
           } catch {
             return { name, replacement: null }
           }

test/e2e/compare-replacements.spec.ts

@@ -0,0 +1,26 @@
+import { expect, test } from './test-utils'
+
+test.describe('Compare page - replacement suggestions', () => {
+  test('shows "Consider no dep?" box for packages with native/simple replacements', async ({
+    page,
+    goto,
+  }) => {
+    // is-odd has a 'simple' replacement in module-replacements v3
+    await goto('/compare?packages=is-odd,is-even', { waitUntil: 'hydration' })
+
+    // The suggestion box should appear after client-side fetch resolves
+    // Button text comes from $t('package.replacement.consider_no_dep')
+    const considerNoDepButton = page.getByRole('button', { name: /consider no dep/i })
+    await expect(considerNoDepButton).toBeVisible({ timeout: 15_000 })
+  })
+
+  test('does not show "Consider no dep?" box for packages without replacements', async ({
+    page,
+    goto,
+  }) => {
+    await goto('/compare?packages=nuxt,vue', { waitUntil: 'hydration' })
+
+    const considerNoDepButton = page.getByRole('button', { name: /consider no dep/i })
+    await expect(considerNoDepButton).not.toBeVisible({ timeout: 10_000 })
+  })
+})