diff --git a/app/components/Button/Base.stories.ts b/app/components/Button/Base.stories.ts
index 520d5825b..9de074437 100644
--- a/app/components/Button/Base.stories.ts
+++ b/app/components/Button/Base.stories.ts
@@ -39,7 +39,7 @@ export const Disabled: Story = {
 export const WithIcon: Story = {
   args: {
     default: 'Search',
-    classicon: 'i-carbon:search',
+    classicon: 'i-lucide:search',
     variant: 'secondary',
   },
 }
diff --git a/app/components/diff/FileTree.vue b/app/components/diff/FileTree.vue
new file mode 100644
index 000000000..241200870
--- /dev/null
+++ b/app/components/diff/FileTree.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import type { FileChange } from '#shared/types'
+
+interface DiffTreeNode {
+  name: string
+  path: string
+  type: 'file' | 'directory'
+  changeType?: 'added' | 'removed' | 'modified'
+  children?: DiffTreeNode[]
+}
+
+const props = defineProps<{
+  files: FileChange[]
+  selectedPath: string | null
+  // Internal props for recursion
+  treeNodes?: DiffTreeNode[]
+  depth?: number
+}>()
+
+const emit = defineEmits<{
+  select: [file: FileChange]
+}>()
+
+const depth = computed(() => props.depth ?? 0)
+
+// Sort: directories first, then alphabetically
+function sortTree(nodes: DiffTreeNode[]): DiffTreeNode[] {
+  return nodes
+    .map(n => ({
+      ...n,
+      children: n.children ? sortTree(n.children) : undefined,
+    }))
+    .sort((a, b) => {
+      if (a.type !== b.type) return a.type === 'directory' ? -1 : 1
+      return a.name.localeCompare(b.name)
+    })
+}
+
+// Build tree structure from flat file list (only at root level)
+function buildTree(files: FileChange[]): DiffTreeNode[] {
+  const root: DiffTreeNode[] = []
+
+  for (const file of files) {
+    const parts = file.path.split('/')
+    let current = root
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]!
+      const isFile = i === parts.length - 1
+      const path = parts.slice(0, i + 1).join('/')
+
+      let node = current.find(n => n.name === part)
+      if (!node) {
+        node = {
+          name: part,
+          path,
+          type: isFile ? 'file' : 'directory',
+          changeType: isFile ? file.type : undefined,
+          children: isFile ? undefined : [],
+        }
+        current.push(node)
+      }
+
+      if (!isFile) {
+        current = node.children!
+      }
+    }
+  }
+
+  return sortTree(root)
+}
+
+// Use provided tree nodes or build from files
+const tree = computed(() => props.treeNodes ?? buildTree(props.files))
+
+// Check if a node or any of its children is currently selected
+function isNodeActive(node: DiffTreeNode): boolean {
+  if (props.selectedPath === node.path) return true
+  if (props.selectedPath?.startsWith(node.path + '/')) return true
+  return false
+}
+
+const expandedDirs = ref<Set<string>>(new Set())
+
+function collectDirs(nodes: DiffTreeNode[]) {
+  for (const node of nodes) {
+    if (node.type === 'directory') {
+      expandedDirs.value.add(node.path)
+      if (node.children) collectDirs(node.children)
+    }
+  }
+}
+
+// Auto-expand all directories eagerly (runs on both SSR and client)
+watchEffect(() => {
+  if (props.depth === undefined || props.depth === 0) {
+    collectDirs(tree.value)
+  }
+})
+
+function toggleDir(path: string) {
+  if (expandedDirs.value.has(path)) {
+    expandedDirs.value.delete(path)
+  } else {
+    expandedDirs.value.add(path)
+  }
+}
+
+function isExpanded(path: string): boolean {
+  return expandedDirs.value.has(path)
+}
+
+function getChangeIcon(type: 'added' | 'removed' | 'modified') {
+  switch (type) {
+    case 'added':
+      return 'i-lucide:file-plus text-green-500'
+    case 'removed':
+      return 'i-lucide:file-minus text-red-500'
+    case 'modified':
+      return 'i-lucide:file-diff text-yellow-500'
+  }
+}
+
+function handleFileClick(node: DiffTreeNode) {
+  const file = props.files.find(f => f.path === node.path)
+  if (file) emit('select', file)
+}
+</script>
+
+<template>
+  <ul class="list-none m-0 p-0" :class="depth === 0 ? 'py-2' : ''">
+    <li v-for="node in tree" :key="node.path">
+      <!-- Directory -->
+      <template v-if="node.type === 'directory'">
+        <button
+          type="button"
+          class="w-full flex items-center gap-1.5 py-1.5 px-3 text-start font-mono text-sm transition-colors hover:bg-bg-muted"
+          :class="isNodeActive(node) ? 'text-fg' : 'text-fg-muted'"
+          :style="{ paddingLeft: `${depth * 12 + 12}px` }"
+          @click="toggleDir(node.path)"
+        >
+          <span
+            class="w-4 h-4 shrink-0 transition-transform"
+            :class="[isExpanded(node.path) ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right']"
+          />
+          <span
+            class="w-4 h-4 shrink-0"
+            :class="
+              isExpanded(node.path)
+                ? 'i-lucide:folder-open text-yellow-500'
+                : 'i-lucide:folder text-yellow-600'
+            "
+          />
+          <span class="truncate">{{ node.name }}</span>
+        </button>
+        <FileTree
+          v-if="isExpanded(node.path) && node.children"
+          :files="files"
+          :tree-nodes="node.children"
+          :selected-path="selectedPath"
+          :depth="depth + 1"
+          @select="emit('select', $event)"
+        />
+      </template>
+
+      <!-- File -->
+      <template v-else>
+        <button
+          type="button"
+          class="w-full flex items-center gap-1.5 py-1.5 px-3 font-mono text-sm transition-colors hover:bg-bg-muted text-start"
+          :class="selectedPath === node.path ? 'bg-bg-muted text-fg' : 'text-fg-muted'"
+          :style="{ paddingLeft: `${depth * 12 + 32}px` }"
+          @click="handleFileClick(node)"
+        >
+          <span class="w-4 h-4 shrink-0" :class="getChangeIcon(node.changeType!)" />
+          <span class="truncate">{{ node.name }}</span>
+        </button>
+      </template>
+    </li>
+  </ul>
+</template>
diff --git a/app/components/diff/Hunk.vue b/app/components/diff/Hunk.vue
new file mode 100644
index 000000000..741689f01
--- /dev/null
+++ b/app/components/diff/Hunk.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { DiffHunk as DiffHunkType } from '#shared/types'
+
+defineProps<{
+  hunk: DiffHunkType
+}>()
+</script>
+
+<template>
+  <DiffLine v-for="(line, index) in hunk.lines" :key="index" :line="line" />
+</template>
diff --git a/app/components/diff/Line.vue b/app/components/diff/Line.vue
new file mode 100644
index 000000000..032519731
--- /dev/null
+++ b/app/components/diff/Line.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { DiffLine as DiffLineType } from '#shared/types'
+
+const props = defineProps<{
+  line: DiffLineType
+}>()
+
+const diffContext = inject<{
+  fileStatus: ComputedRef<'add' | 'delete' | 'modify'>
+  wordWrap?: ComputedRef<boolean>
+}>('diffContext')
+
+const lineNumberNew = computed(() => {
+  if (props.line.type === 'normal') {
+    return props.line.newLineNumber
+  }
+  return props.line.lineNumber ?? props.line.newLineNumber
+})
+
+const lineNumberOld = computed(() => {
+  if (props.line.type === 'normal') {
+    return props.line.oldLineNumber
+  }
+  return props.line.type === 'delete'
+    ? (props.line.lineNumber ?? props.line.oldLineNumber)
+    : undefined
+})
+
+const rowClasses = computed(() => {
+  const shouldWrap = diffContext?.wordWrap?.value ?? false
+  const classes = ['whitespace-pre-wrap', 'box-border', 'border-none']
+  if (shouldWrap) classes.push('min-h-6')
+  else classes.push('h-6', 'min-h-6')
+  const fileStatus = diffContext?.fileStatus.value
+
+  if (props.line.type === 'insert' && fileStatus !== 'add') {
+    classes.push('bg-[var(--code-added)]/10')
+  }
+  if (props.line.type === 'delete' && fileStatus !== 'delete') {
+    classes.push('bg-[var(--code-removed)]/10')
+  }
+
+  return classes
+})
+
+const borderClasses = computed(() => {
+  const classes = ['border-transparent', 'w-1', 'border-is-3']
+
+  if (props.line.type === 'insert') {
+    classes.push('border-[color:var(--code-added)]/60')
+  }
+  if (props.line.type === 'delete') {
+    classes.push('border-[color:var(--code-removed)]/80')
+  }
+
+  return classes
+})
+
+const contentClasses = computed(() => {
+  const shouldWrap = diffContext?.wordWrap?.value ?? false
+  return ['pe-6', shouldWrap ? 'whitespace-pre-wrap break-words' : 'text-nowrap']
+})
+
+function escapeHtml(str: string): string {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+// Segments carry pre-highlighted HTML from the server API. Fall back to
+// escaped plain text for unsupported languages.
+const renderedSegments = computed(() =>
+  props.line.content.map(seg => ({
+    html: seg.html ?? escapeHtml(seg.value),
+    type: seg.type,
+  })),
+)
+</script>
+
+<template>
+  <tr
+    :data-line-new="lineNumberNew"
+    :data-line-old="lineNumberOld"
+    :data-line-kind="line.type"
+    :class="rowClasses"
+  >
+    <!-- Border indicator -->
+    <td :class="borderClasses" />
+
+    <!-- Line number -->
+    <td class="tabular-nums text-center opacity-50 px-2 text-xs select-none w-12 shrink-0">
+      {{ line.type === 'delete' ? '–' : lineNumberNew }}
+    </td>
+
+    <!-- Line content -->
+    <td :class="contentClasses">
+      <component :is="line.type === 'insert' ? 'ins' : line.type === 'delete' ? 'del' : 'span'">
+        <span
+          v-for="(seg, i) in renderedSegments"
+          :key="i"
+          :class="{
+            'bg-[var(--code-added)]/20': seg.type === 'insert',
+            'bg-[var(--code-removed)]/20': seg.type === 'delete',
+          }"
+          v-html="seg.html"
+        />
+      </component>
+    </td>
+  </tr>
+</template>
+
+<style scoped>
+ins,
+del {
+  text-decoration: none;
+}
+</style>
diff --git a/app/components/diff/MobileSidebarDrawer.vue b/app/components/diff/MobileSidebarDrawer.vue
new file mode 100644
index 000000000..9000399d8
--- /dev/null
+++ b/app/components/diff/MobileSidebarDrawer.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { CompareResponse, FileChange } from '#shared/types'
+
+const props = defineProps<{
+  compare: CompareResponse
+  groupedDeps: Map<string, CompareResponse['dependencyChanges']>
+  allChanges: FileChange[]
+}>()
+
+const selectedFile = defineModel<FileChange | null>('selectedFile', { default: null })
+const fileFilter = defineModel<'all' | 'added' | 'removed' | 'modified'>('fileFilter', {
+  default: 'all',
+})
+const open = defineModel<boolean>('open', { default: false })
+
+const route = useRoute()
+watch(
+  () => route.fullPath,
+  () => {
+    open.value = false
+  },
+)
+
+const isLocked = useScrollLock(import.meta.client ? document : null)
+watch(open, value => {
+  isLocked.value = value
+})
+</script>
+
+<template>
+  <!-- Backdrop -->
+  <Transition
+    enter-active-class="transition-opacity duration-200"
+    enter-from-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="transition-opacity duration-200"
+    leave-from-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <div v-if="open" class="md:hidden fixed inset-0 z-40 bg-black/50" @click="open = false" />
+  </Transition>
+
+  <!-- Drawer -->
+  <Transition
+    enter-active-class="transition-transform duration-200"
+    enter-from-class="-translate-x-full"
+    enter-to-class="translate-x-0"
+    leave-active-class="transition-transform duration-200"
+    leave-from-class="translate-x-0"
+    leave-to-class="-translate-x-full"
+  >
+    <aside
+      v-if="open"
+      class="md:hidden fixed inset-y-0 inset-is-0 z-50 w-72 max-w-[85vw] bg-bg-subtle border-ie border-border overflow-y-auto flex flex-col"
+    >
+      <div
+        class="sticky top-0 bg-bg-subtle border-b border-border px-4 py-3 flex items-center justify-between gap-2"
+      >
+        <div class="text-xs font-mono text-fg-muted flex items-center gap-2">
+          <span class="flex items-center gap-1">
+            <span class="text-green-500">+{{ props.compare.stats.filesAdded }}</span>
+            <span class="text-fg-subtle">/</span>
+            <span class="text-red-500">-{{ props.compare.stats.filesRemoved }}</span>
+            <span class="text-fg-subtle">/</span>
+            <span class="text-yellow-500">~{{ props.compare.stats.filesModified }}</span>
+          </span>
+          <span class="text-fg-subtle">•</span>
+          <span>{{ $t('compare.files_count', { count: props.allChanges.length }) }}</span>
+        </div>
+        <button
+          type="button"
+          class="text-fg-muted hover:text-fg transition-colors"
+          :aria-label="$t('compare.close_files_panel')"
+          @click="open = false"
+        >
+          <span class="i-lucide:x w-5 h-5" />
+        </button>
+      </div>
+
+      <DiffSidebarPanel
+        :compare="props.compare"
+        :grouped-deps="props.groupedDeps"
+        :all-changes="props.allChanges"
+        v-model:selected-file="selectedFile"
+        v-model:file-filter="fileFilter"
+      />
+    </aside>
+  </Transition>
+</template>
diff --git a/app/components/diff/SidebarPanel.vue b/app/components/diff/SidebarPanel.vue
new file mode 100644
index 000000000..806cae531
--- /dev/null
+++ b/app/components/diff/SidebarPanel.vue
@@ -0,0 +1,259 @@
+<script setup lang="ts">
+import type { CompareResponse, FileChange } from '#shared/types'
+import { packageRoute } from '~/utils/router'
+
+const props = defineProps<{
+  compare: CompareResponse
+  groupedDeps: Map<string, CompareResponse['dependencyChanges']>
+  allChanges: FileChange[]
+  showSettings?: boolean
+}>()
+
+const emit = defineEmits<{
+  'file-select': [file: FileChange]
+}>()
+
+const selectedFile = defineModel<FileChange | null>('selectedFile', { default: null })
+const fileFilter = defineModel<'all' | 'added' | 'removed' | 'modified'>('fileFilter', {
+  default: 'all',
+})
+
+const sectionOrder = ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies']
+const { t } = useI18n()
+const sectionMeta = computed<Record<string, { label: string; icon: string }>>(() => ({
+  dependencies: { label: t('compare.dependencies'), icon: 'i-lucide:box' },
+  devDependencies: { label: t('compare.dev_dependencies'), icon: 'i-lucide:wrench' },
+  peerDependencies: { label: t('compare.peer_dependencies'), icon: 'i-lucide:users' },
+  optionalDependencies: { label: t('compare.optional_dependencies'), icon: 'i-lucide:circle-help' },
+}))
+
+const sectionList = computed(() => {
+  const entries = Array.from(props.groupedDeps.entries())
+  return entries
+    .map(([key, changes]) => ({
+      key,
+      changes,
+      label: sectionMeta.value[key]?.label ?? key,
+      icon: sectionMeta.value[key]?.icon ?? 'i-lucide:box',
+      order: sectionOrder.indexOf(key) === -1 ? sectionOrder.length + 1 : sectionOrder.indexOf(key),
+    }))
+    .sort((a, b) => a.order - b.order)
+})
+
+const fileSearch = ref('')
+
+const filteredChanges = computed(() => {
+  let files = props.allChanges
+  if (fileFilter.value !== 'all') {
+    files = files.filter(f => f.type === fileFilter.value)
+  }
+  if (fileSearch.value.trim()) {
+    const query = fileSearch.value.trim().toLowerCase()
+    files = files.filter(f => f.path.toLowerCase().includes(query))
+  }
+  return files
+})
+
+function getSemverBadgeClass(semverDiff: string | null | undefined): string {
+  switch (semverDiff) {
+    case 'major':
+      return 'bg-red-500/10 text-red-500'
+    case 'minor':
+      return 'bg-yellow-500/10 text-yellow-500'
+    case 'patch':
+      return 'bg-green-500/10 text-green-500'
+    case 'prerelease':
+      return 'bg-purple-500/10 text-purple-500'
+    default:
+      return 'bg-bg-muted text-fg-subtle'
+  }
+}
+
+function handleFileSelect(file: FileChange) {
+  selectedFile.value = file
+  emit('file-select', file)
+}
+</script>
+
+<template>
+  <div class="flex flex-col min-h-0">
+    <!-- Summary section -->
+    <div class="border-b border-border shrink-0">
+      <div class="px-3 py-2.5 border-b border-border">
+        <div class="flex flex-wrap items-center justify-between gap-2">
+          <span class="text-xs font-medium flex items-center gap-1.5">
+            <span class="i-lucide-lightbulb w-3.5 h-3.5" />
+            {{ $t('compare.summary') }}
+          </span>
+          <div class="flex items-center gap-3 font-mono text-3xs">
+            <span class="flex items-center gap-1">
+              <span class="text-green-500">+{{ compare.stats.filesAdded }}</span>
+              <span class="text-fg-subtle">/</span>
+              <span class="text-red-500">-{{ compare.stats.filesRemoved }}</span>
+              <span class="text-fg-subtle">/</span>
+              <span class="text-yellow-500">~{{ compare.stats.filesModified }}</span>
+            </span>
+            <span v-if="compare.dependencyChanges.length > 0" class="text-fg-muted">
+              {{ $t('compare.deps_count', { count: compare.dependencyChanges.length }) }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-if="compare.meta.warnings?.length"
+        class="px-3 py-2 bg-yellow-500/5 border-b border-border"
+      >
+        <div class="flex items-start gap-2">
+          <span class="i-lucide:triangle-alert w-3.5 h-3.5 text-yellow-500 shrink-0 mt-0.5" />
+          <div class="text-3xs text-fg-muted">
+            <p v-for="warning in compare.meta.warnings" :key="warning">{{ warning }}</p>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="compare.dependencyChanges.length > 0" class="px-3 py-2.5 space-y-2">
+        <details v-for="section in sectionList" :key="section.key" class="group">
+          <summary
+            class="cursor-pointer list-none flex items-center gap-2 text-xs font-medium mb-2 hover:text-fg transition-colors"
+          >
+            <span
+              class="i-lucide:chevron-right w-3.5 h-3.5 transition-transform group-open:rotate-90"
+            />
+            <span :class="section.icon" class="w-3.5 h-3.5" />
+            {{ section.label }} ({{ section.changes.length }})
+          </summary>
+
+          <div class="space-y-1 ms-5 max-h-40 overflow-y-auto">
+            <div
+              v-for="dep in section.changes"
+              :key="dep.name"
+              class="flex items-center gap-2 text-xs py-0.5"
+            >
+              <span
+                :class="[
+                  'w-3 h-3 shrink-0',
+                  dep.type === 'added'
+                    ? 'i-lucide:plus text-green-500'
+                    : dep.type === 'removed'
+                      ? 'i-lucide:minus text-red-500'
+                      : 'i-lucide:arrow-left-right text-yellow-500',
+                ]"
+              />
+
+              <NuxtLink
+                :to="packageRoute(dep.name)"
+                class="font-mono hover:text-fg transition-colors truncate min-w-0"
+              >
+                {{ dep.name }}
+              </NuxtLink>
+
+              <div
+                class="flex items-center gap-1.5 text-fg-muted font-mono text-3xs ms-auto shrink-0"
+              >
+                <span
+                  v-if="dep.from"
+                  :class="{ 'line-through opacity-50': dep.type === 'updated' }"
+                >
+                  {{ dep.from }}
+                </span>
+                <span v-if="dep.type === 'updated'" class="i-lucide:arrow-right w-2.5 h-2.5" />
+                <span v-if="dep.to">{{ dep.to }}</span>
+              </div>
+
+              <span
+                v-if="dep.semverDiff"
+                class="text-4xs px-1.5 py-0.5 rounded font-medium shrink-0"
+                :class="getSemverBadgeClass(dep.semverDiff)"
+              >
+                {{ dep.semverDiff }}
+              </span>
+            </div>
+          </div>
+        </details>
+      </div>
+
+      <div
+        v-if="compare.dependencyChanges.length === 0 && !compare.meta.warnings?.length"
+        class="px-3 py-2 text-3xs text-fg-muted text-center"
+      >
+        {{ $t('compare.no_dependency_changes') }}
+      </div>
+    </div>
+
+    <!-- File browser -->
+    <details class="flex-1 flex flex-col open:flex-1 group min-h-0" open>
+      <summary
+        class="border-b border-border px-3 py-2 shrink-0 cursor-pointer list-none flex items-center justify-between gap-2"
+      >
+        <span class="text-xs font-medium flex items-center gap-1.5">
+          <span class="i-lucide:file-text w-3.5 h-3.5" />
+          {{ $t('compare.file_changes') }}
+        </span>
+        <span
+          class="i-lucide:chevron-right w-3.5 h-3.5 transition-transform group-open:rotate-90"
+        />
+      </summary>
+
+      <div class="border-b border-border px-3 py-2 shrink-0 space-y-2">
+        <div class="relative">
+          <span
+            class="absolute inset-is-2 top-1/2 -translate-y-1/2 i-lucide:search w-3 h-3 text-fg-subtle pointer-events-none"
+          />
+          <input
+            v-model="fileSearch"
+            type="search"
+            :placeholder="$t('compare.search_files_placeholder')"
+            :aria-label="$t('compare.search_files_placeholder')"
+            class="w-full text-2xs ps-6.5 pe-2 py-1 bg-bg-subtle border border-border rounded font-mono placeholder:text-fg-subtle transition-colors hover:border-border-hover focus:border-accent focus:outline-none"
+          />
+        </div>
+        <div class="flex items-center justify-end">
+          <select
+            v-model="fileFilter"
+            :aria-label="$t('compare.filter_files_label')"
+            class="text-3xs px-2 py-1 bg-bg-subtle border border-border rounded font-mono cursor-pointer hover:border-border-hover transition-colors"
+          >
+            <option value="all">
+              {{ $t('compare.file_filter_option.all', { count: allChanges.length }) }}
+            </option>
+            <option value="added">
+              {{ $t('compare.file_filter_option.added', { count: compare.stats.filesAdded }) }}
+            </option>
+            <option value="removed">
+              {{ $t('compare.file_filter_option.removed', { count: compare.stats.filesRemoved }) }}
+            </option>
+            <option value="modified">
+              {{
+                $t('compare.file_filter_option.modified', { count: compare.stats.filesModified })
+              }}
+            </option>
+          </select>
+        </div>
+      </div>
+
+      <div class="flex-1 overflow-y-auto min-h-0">
+        <div v-if="filteredChanges.length === 0" class="p-8 text-center text-xs text-fg-muted">
+          {{
+            fileSearch.trim()
+              ? $t('compare.no_files_search', { query: fileSearch.trim() })
+              : fileFilter === 'all'
+                ? $t('compare.no_files_all')
+                : fileFilter === 'added'
+                  ? $t('compare.no_files_filtered', { filter: $t('compare.filter.added') })
+                  : fileFilter === 'removed'
+                    ? $t('compare.no_files_filtered', { filter: $t('compare.filter.removed') })
+                    : $t('compare.no_files_filtered', { filter: $t('compare.filter.modified') })
+          }}
+        </div>
+
+        <DiffFileTree
+          v-else
+          :files="filteredChanges"
+          :selected-path="selectedFile?.path ?? null"
+          @select="handleFileSelect"
+        />
+      </div>
+    </details>
+  </div>
+</template>
diff --git a/app/components/diff/SkipBlock.vue b/app/components/diff/SkipBlock.vue
new file mode 100644
index 000000000..f5169dffc
--- /dev/null
+++ b/app/components/diff/SkipBlock.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps<{
+  count: number
+  content?: string
+}>()
+</script>
+
+<template>
+  <!-- Spacer row -->
+  <tr class="h-2" />
+
+  <!-- Skip block row -->
+  <tr class="h-10 font-mono bg-bg-muted text-fg-muted">
+    <td />
+    <td class="opacity-50 select-none text-center">
+      <span class="i-lucide:chevrons-up-down w-4 h-4" />
+    </td>
+    <td>
+      <span class="px-0 sticky inset-is-2 italic opacity-50">
+        {{ content || $t('compare.lines_hidden', { count }) }}
+      </span>
+    </td>
+  </tr>
+
+  <!-- Spacer row -->
+  <tr class="h-2" />
+</template>
diff --git a/app/components/diff/Table.vue b/app/components/diff/Table.vue
new file mode 100644
index 000000000..2bbda05a4
--- /dev/null
+++ b/app/components/diff/Table.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { DiffHunk, DiffSkipBlock } from '#shared/types'
+
+const props = defineProps<{
+  hunks: (DiffHunk | DiffSkipBlock)[]
+  type: 'add' | 'delete' | 'modify'
+  fileName?: string
+  wordWrap?: boolean
+}>()
+
+// provide diff context into child components
+provide('diffContext', {
+  fileStatus: computed(() => props.type),
+  wordWrap: computed(() => props.wordWrap ?? false),
+})
+</script>
+
+<template>
+  <table
+    class="diff-table shiki font-mono text-sm w-full m-0 border-separate border-0 outline-none overflow-x-auto border-spacing-0"
+  >
+    <tbody class="w-full box-border">
+      <template v-for="(hunk, index) in hunks" :key="index">
+        <DiffHunk v-if="hunk.type === 'hunk'" :hunk="hunk" />
+        <DiffSkipBlock v-else :count="hunk.count" :content="hunk.content" />
+      </template>
+    </tbody>
+  </table>
+</template>
+
+<style scoped>
+.diff-table {
+  --code-added: oklch(0.723 0.219 149.579);
+  --code-removed: oklch(0.704 0.191 22.216);
+}
+
+:root[data-theme='light'] .diff-table {
+  --code-added: oklch(0.527 0.154 150.069);
+  --code-removed: oklch(0.577 0.184 27.325);
+}
+</style>
diff --git a/app/components/diff/ViewerPanel.vue b/app/components/diff/ViewerPanel.vue
new file mode 100644
index 000000000..9996f301e
--- /dev/null
+++ b/app/components/diff/ViewerPanel.vue
@@ -0,0 +1,493 @@
+<script setup lang="ts">
+import type { FileDiffResponse, FileChange } from '#shared/types'
+import { onClickOutside } from '@vueuse/core'
+
+const props = defineProps<{
+  packageName: string
+  fromVersion: string
+  toVersion: string
+  file: FileChange
+}>()
+
+const mergeModifiedLines = ref(true)
+const maxChangeRatio = ref(0.45)
+const maxDiffDistance = ref(30)
+const inlineMaxCharEdits = ref(2)
+const wordWrap = ref(false)
+const showOptions = ref(false)
+const optionsDropdownRef = useTemplateRef('optionsDropdownRef')
+onClickOutside(optionsDropdownRef, () => {
+  showOptions.value = false
+})
+
+const apiUrl = computed(
+  () =>
+    `/api/registry/compare-file/${props.packageName}/v/${props.fromVersion}...${props.toVersion}/${props.file.path}`,
+)
+
+const apiQuery = computed(() => ({
+  mergeModifiedLines: String(mergeModifiedLines.value),
+  maxChangeRatio: String(maxChangeRatio.value),
+  maxDiffDistance: String(maxDiffDistance.value),
+  inlineMaxCharEdits: String(inlineMaxCharEdits.value),
+}))
+
+const {
+  data: diff,
+  status,
+  error: loadError,
+} = useFetch<FileDiffResponse>(apiUrl, {
+  query: apiQuery,
+  timeout: 15000,
+})
+
+function calcPercent(value: number, min: number, max: number): number {
+  if (max === min) return 0
+  const percent = ((value - min) / (max - min)) * 100
+  return Math.min(100, Math.max(0, percent))
+}
+
+function getStepMarks(min: number, max: number, step: number): number[] {
+  const marks: number[] = []
+  const range = max - min
+  const stepCount = Math.floor(range / step)
+
+  if (stepCount <= 10) {
+    for (let i = 1; i <= stepCount; i++) {
+      const positionPercent = ((i * step) / range) * 100
+      marks.push(positionPercent)
+    }
+  }
+
+  return marks
+}
+
+const changeRatioMarks = computed(() => getStepMarks(0, 1, 0.1))
+const diffDistanceMarks = computed(() => getStepMarks(1, 60, 10))
+const charEditMarks = computed(() => [] as number[]) // no dots for char edits slider
+const changeRatioPercent = computed(() => calcPercent(maxChangeRatio.value, 0, 1))
+const diffDistancePercent = computed(() => calcPercent(maxDiffDistance.value, 1, 60))
+const charEditPercent = computed(() => calcPercent(inlineMaxCharEdits.value, 0, 10))
+
+function formatBytes(bytes: number | undefined): string {
+  if (bytes === undefined) return ''
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+// Build code browser URL
+function getCodeUrl(version: string): string {
+  return `/package-code/${props.packageName}/v/${version}/${props.file.path}`
+}
+</script>
+
+<template>
+  <div class="h-full flex flex-col bg-bg">
+    <!-- Header -->
+    <div
+      class="flex flex-wrap items-center justify-between gap-3 px-4 py-3 bg-bg-subtle border-b border-border shrink-0"
+    >
+      <div class="flex items-center gap-3 min-w-0 flex-1">
+        <!-- File icon based on type -->
+        <span
+          :class="[
+            'w-4 h-4 shrink-0',
+            file.type === 'added'
+              ? 'i-lucide:plus text-green-500'
+              : file.type === 'removed'
+                ? 'i-lucide:minus text-red-500'
+                : 'i-lucide:pen text-yellow-500',
+          ]"
+        />
+
+        <!-- File path -->
+        <span class="font-mono text-sm truncate max-w-[65vw] sm:max-w-none">{{ file.path }}</span>
+
+        <!-- Stats -->
+        <template v-if="diff?.stats">
+          <span v-if="diff.stats.additions > 0" class="text-xs text-green-500 font-mono shrink-0">
+            +{{ diff.stats.additions }}
+          </span>
+          <span v-if="diff.stats.deletions > 0" class="text-xs text-red-500 font-mono shrink-0">
+            -{{ diff.stats.deletions }}
+          </span>
+        </template>
+
+        <!-- File sizes -->
+        <span v-if="file.oldSize || file.newSize" class="text-xs text-fg-subtle shrink-0">
+          <template v-if="file.type === 'modified'">
+            {{ formatBytes(file.oldSize) }} → {{ formatBytes(file.newSize) }}
+          </template>
+          <template v-else-if="file.type === 'added'">
+            {{ formatBytes(file.newSize) }}
+          </template>
+          <template v-else>
+            {{ formatBytes(file.oldSize) }}
+          </template>
+        </span>
+      </div>
+
+      <div class="flex items-center gap-2 shrink-0">
+        <!-- Options dropdown -->
+        <div ref="optionsDropdownRef" class="relative">
+          <button
+            type="button"
+            class="px-2 py-1 text-xs text-fg-muted hover:text-fg bg-bg-muted border border-border rounded transition-colors flex items-center gap-1.5"
+            :class="{ 'bg-bg-elevated text-fg': showOptions }"
+            @click="showOptions = !showOptions"
+          >
+            <span class="i-lucide:settings w-3.5 h-3.5" />
+            Options
+            <span
+              class="i-lucide:chevron-down w-3 h-3 transition-transform"
+              :class="{ 'rotate-180': showOptions }"
+            />
+          </button>
+
+          <!-- Dropdown menu -->
+          <Transition
+            enter-active-class="transition duration-150 ease-out motion-reduce:transition-none"
+            enter-from-class="opacity-0 scale-95 motion-reduce:scale-100"
+            enter-to-class="opacity-100 scale-100"
+            leave-active-class="transition duration-100 ease-in motion-reduce:transition-none"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-95 motion-reduce:scale-100"
+          >
+            <div
+              v-if="showOptions"
+              class="absolute inset-ie-0 top-full mt-2 z-20 p-4 bg-bg-elevated border border-border rounded-xl shadow-2xl overflow-auto"
+              :style="{
+                width: mergeModifiedLines
+                  ? 'min(420px, calc(100vw - 24px))'
+                  : 'min(320px, calc(100vw - 24px))',
+                maxWidth: 'calc(100vw - 24px)',
+                maxHeight: '70vh',
+              }"
+            >
+              <div class="flex flex-col gap-2">
+                <!-- Merge modified lines toggle -->
+                <SettingsToggle label="Merge modified lines" v-model="mergeModifiedLines" />
+
+                <!-- Word wrap toggle -->
+                <SettingsToggle label="Word wrap" v-model="wordWrap" />
+
+                <!-- Sliders -->
+                <div
+                  class="flex flex-col gap-2 transition-opacity duration-150"
+                  :class="mergeModifiedLines ? 'opacity-100' : 'opacity-0'"
+                >
+                  <!-- Change ratio slider -->
+                  <div class="sr-only">
+                    <label for="change-ratio">Change ratio</label>
+                  </div>
+                  <div
+                    class="slider-shell w-full min-w-0"
+                    :class="{ 'is-disabled': !mergeModifiedLines }"
+                  >
+                    <div class="slider-labels">
+                      <span class="slider-label">Change ratio</span>
+                      <span class="slider-value tabular-nums">{{ maxChangeRatio.toFixed(2) }}</span>
+                    </div>
+                    <div class="slider-track">
+                      <div
+                        v-for="mark in changeRatioMarks"
+                        :key="`cr-${mark}`"
+                        class="slider-mark"
+                        :style="{ left: `calc(${mark}% - 11px)` }"
+                      />
+                      <div class="slider-range" :style="{ width: `${changeRatioPercent}%` }" />
+                    </div>
+                    <input
+                      id="change-ratio"
+                      v-model.number="maxChangeRatio"
+                      type="range"
+                      min="0"
+                      max="1"
+                      step="0.01"
+                      :disabled="!mergeModifiedLines"
+                      class="slider-input"
+                    />
+                  </div>
+
+                  <!-- Diff distance slider -->
+                  <div class="sr-only">
+                    <label for="diff-distance">Diff distance</label>
+                  </div>
+                  <div
+                    class="slider-shell w-full min-w-0"
+                    :class="{ 'is-disabled': !mergeModifiedLines }"
+                  >
+                    <div class="slider-labels">
+                      <span class="slider-label">Diff distance</span>
+                      <span class="slider-value tabular-nums">{{ maxDiffDistance }}</span>
+                    </div>
+                    <div class="slider-track">
+                      <div
+                        v-for="mark in diffDistanceMarks"
+                        :key="`dd-${mark}`"
+                        class="slider-mark"
+                        :style="{ left: `calc(${mark}% - 11px)` }"
+                      />
+                      <div class="slider-range" :style="{ width: `${diffDistancePercent}%` }" />
+                    </div>
+                    <input
+                      id="diff-distance"
+                      v-model.number="maxDiffDistance"
+                      type="range"
+                      min="1"
+                      max="60"
+                      step="1"
+                      :disabled="!mergeModifiedLines"
+                      class="slider-input"
+                    />
+                  </div>
+
+                  <!-- Char edits slider -->
+                  <div class="sr-only">
+                    <label for="char-edits">Char edits</label>
+                  </div>
+                  <div
+                    class="slider-shell w-full min-w-0"
+                    :class="{ 'is-disabled': !mergeModifiedLines }"
+                  >
+                    <div class="slider-labels">
+                      <span class="slider-label">Char edits</span>
+                      <span class="slider-value tabular-nums">{{ inlineMaxCharEdits }}</span>
+                    </div>
+                    <div class="slider-track">
+                      <div
+                        v-for="mark in charEditMarks"
+                        :key="`ce-${mark}`"
+                        class="slider-mark"
+                        :style="{ left: `calc(${mark}% - 11px)` }"
+                      />
+                      <div class="slider-range" :style="{ width: `${charEditPercent}%` }" />
+                    </div>
+                    <input
+                      id="char-edits"
+                      v-model.number="inlineMaxCharEdits"
+                      type="range"
+                      min="0"
+                      max="10"
+                      step="1"
+                      :disabled="!mergeModifiedLines"
+                      class="slider-input"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Transition>
+        </div>
+
+        <!-- View in code browser -->
+        <NuxtLink
+          v-if="file.type !== 'removed'"
+          :to="getCodeUrl(toVersion)"
+          class="px-2 py-1 text-xs text-fg-muted hover:text-fg bg-bg-muted border border-border rounded transition-colors"
+          target="_blank"
+        >
+          View file
+        </NuxtLink>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 overflow-auto relative">
+      <!-- Loading state -->
+      <div v-if="status === 'pending'" class="py-12 text-center">
+        <div class="i-svg-spinners-ring-resize w-6 h-6 mx-auto text-fg-muted" />
+        <p class="mt-2 text-sm text-fg-muted">Loading diff...</p>
+      </div>
+
+      <!-- Error state -->
+      <div v-else-if="status === 'error'" class="py-8 text-center">
+        <span class="i-lucide:triangle-alert w-8 h-8 mx-auto text-fg-subtle mb-2 block" />
+        <p class="text-fg-muted text-sm mb-2">
+          {{ loadError?.message || 'Failed to load diff' }}
+        </p>
+        <div class="flex items-center justify-center gap-2">
+          <NuxtLink
+            v-if="file.type !== 'removed'"
+            :to="getCodeUrl(toVersion)"
+            class="text-xs text-fg-muted hover:text-fg underline"
+          >
+            View in code browser
+          </NuxtLink>
+        </div>
+      </div>
+
+      <!-- No changes -->
+      <div
+        v-else-if="diff && diff.hunks.length === 0"
+        class="py-8 text-center text-fg-muted text-sm"
+      >
+        No content changes detected
+      </div>
+
+      <!-- Diff content -->
+      <DiffTable
+        v-else-if="diff"
+        :hunks="diff.hunks"
+        :type="diff.type"
+        :file-name="file.path"
+        :word-wrap="wordWrap"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.slider-shell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 48px;
+  width: 100%;
+  border: 1px solid var(--border);
+  background: var(--bg-subtle);
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: grab;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    opacity 150ms ease;
+}
+
+.slider-shell:hover {
+  background: var(--bg-muted);
+  border-color: var(--border-hover);
+}
+
+.slider-shell:active {
+  cursor: grabbing;
+}
+
+.slider-shell.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.slider-labels {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  pointer-events: none;
+  z-index: 3;
+}
+
+.slider-label {
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: color-mix(in srgb, var(--fg) 30%, transparent);
+  letter-spacing: -0.01em;
+  transition: color 150ms ease;
+}
+
+.slider-shell:hover .slider-label {
+  color: var(--fg);
+}
+
+.slider-value {
+  min-width: 32px;
+  text-align: right;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--fg);
+}
+
+.slider-track {
+  position: absolute;
+  inset: 0;
+  background: var(--bg-muted);
+  border-radius: 10px;
+  overflow: hidden;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.slider-mark {
+  position: absolute;
+  top: 50%;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--fg) 20%, transparent);
+  transform: translateY(-50%);
+  pointer-events: none;
+  opacity: 0.9;
+}
+
+.slider-range {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: var(--bg-subtle);
+  border-radius: 10px;
+  transition:
+    width 150ms ease-out,
+    background-color 150ms ease-out;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.slider-range::after {
+  content: '';
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  width: 2px;
+  height: 28px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--fg) 20%, transparent);
+  transform: translateY(-50%);
+  transition: background-color 150ms ease;
+}
+
+.slider-shell:hover .slider-range::after {
+  background: color-mix(in srgb, var(--fg) 50%, transparent);
+}
+
+.slider-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: inherit;
+  -webkit-appearance: none;
+  background: transparent;
+  z-index: 4;
+  pointer-events: auto;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.slider-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 32px;
+  width: 16px;
+}
+
+.slider-input::-moz-range-thumb {
+  height: 32px;
+  width: 16px;
+  border: none;
+  background: transparent;
+}
+</style>
diff --git a/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue b/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
new file mode 100644
index 000000000..538dbeebd
--- /dev/null
+++ b/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import type { CompareResponse, FileChange } from '#shared/types'
+import { diffRoute, packageRoute } from '~/utils/router'
+
+definePageMeta({
+  name: 'diff',
+  path: '/diff/:org?/:packageName/v/:versionRange',
+  alias: ['/diff/:packageName/v/:versionRange'],
+})
+
+const route = useRoute('diff')
+
+// Derive package name from typed route params
+// /diff/nuxt/v/4.0.0...4.2.0           → org: undefined, packageName: "nuxt"
+// /diff/@nuxt/kit/v/1.0.0...2.0.0      → org: "@nuxt", packageName: "kit"
+const packageName = computed(() =>
+  route.params.org ? `${route.params.org}/${route.params.packageName}` : route.params.packageName,
+)
+
+// Parse version range from the typed param (from...to)
+const versionRange = computed(() => {
+  const parts = route.params.versionRange.split('...')
+  if (parts.length !== 2) return null
+  return { from: parts[0]!, to: parts[1]! }
+})
+
+const fromVersion = computed(() => versionRange.value?.from ?? '')
+const toVersion = computed(() => versionRange.value?.to ?? '')
+
+const router = useRouter()
+const { data: pkg } = usePackage(packageName)
+
+const { data: compare, status: compareStatus } = useFetch<CompareResponse>(
+  () => `/api/registry/compare/${packageName.value}/v/${fromVersion.value}...${toVersion.value}`,
+  {
+    immediate: !!versionRange.value,
+    timeout: 15000,
+  },
+)
+
+const manualSelection = ref<FileChange | null>(null)
+const fileFilter = ref<'all' | 'added' | 'removed' | 'modified'>('all')
+const mobileDrawerOpen = ref(false)
+
+const allChanges = computed(() => {
+  if (!compare.value) return []
+  return [
+    ...compare.value.files.added,
+    ...compare.value.files.removed,
+    ...compare.value.files.modified,
+  ].sort((a, b) => a.path.localeCompare(b.path))
+})
+
+// Derive selected file: manual selection takes priority, then ?file= query param.
+// Using a computed ensures the query-param file is resolved during SSR without
+// needing a watcher (which may not re-run before SSR rendering completes).
+const selectedFile = computed<FileChange | null>({
+  get: () => {
+    if (manualSelection.value) return manualSelection.value
+    const filePath = route.query.file
+    if (!filePath || !compare.value) return null
+    return allChanges.value.find(f => f.path === filePath) ?? null
+  },
+  set: file => {
+    manualSelection.value = file
+  },
+})
+
+if (import.meta.client) {
+  watch(
+    selectedFile,
+    file => {
+      const query = { ...route.query }
+      if (file?.path) query.file = file.path
+      else delete query.file
+      router.replace({ query })
+    },
+    { deep: false },
+  )
+}
+
+const groupedDeps = computed(() => {
+  if (!compare.value?.dependencyChanges) return new Map()
+
+  const groups = new Map<string, typeof compare.value.dependencyChanges>()
+  for (const change of compare.value.dependencyChanges) {
+    const existing = groups.get(change.section) ?? []
+    existing.push(change)
+    groups.set(change.section, existing)
+  }
+  return groups
+})
+
+const fromVersionUrlPattern = computed(() => {
+  return router.resolve(diffRoute(packageName.value, '{version}', toVersion.value)).href
+})
+const toVersionUrlPattern = computed(() => {
+  return router.resolve(diffRoute(packageName.value, fromVersion.value, '{version}')).href
+})
+
+useSeoMeta({
+  title: () => {
+    if (fromVersion.value && toVersion.value) {
+      return `Compare ${packageName.value} ${fromVersion.value}...${toVersion.value} - npmx`
+    }
+    return `Compare - ${packageName.value} - npmx`
+  },
+  description: () =>
+    `Compare changes between ${packageName.value} versions ${fromVersion.value} and ${toVersion.value}`,
+})
+</script>
+
+<template>
+  <main class="flex-1 flex flex-col min-h-0">
+    <!-- Header -->
+    <header class="border-b border-border bg-bg sticky top-14 z-20">
+      <div class="container py-4">
+        <!-- Package info -->
+        <div class="flex items-center gap-2 mb-3 flex-wrap min-w-0">
+          <NuxtLink
+            :to="packageRoute(packageName)"
+            class="font-mono text-lg font-medium hover:text-fg transition-colors min-w-0 truncate"
+          >
+            {{ packageName }}
+          </NuxtLink>
+          <span class="text-fg-subtle">/</span>
+          <span class="font-mono text-sm text-fg-muted">compare</span>
+        </div>
+
+        <!-- Version selectors -->
+        <div class="flex items-center gap-3 flex-wrap">
+          <div class="flex items-center gap-2">
+            <span class="text-xs text-fg-subtle uppercase tracking-wide">From</span>
+            <VersionSelector
+              v-if="pkg?.versions && pkg?.['dist-tags']"
+              :package-name="packageName"
+              :current-version="fromVersion"
+              :versions="pkg.versions"
+              :dist-tags="pkg['dist-tags']"
+              :url-pattern="fromVersionUrlPattern"
+            />
+            <span v-else class="font-mono text-sm text-fg-muted">{{ fromVersion }}</span>
+          </div>
+
+          <span class="i-lucide:arrow-right w-4 h-4 text-fg-subtle" />
+
+          <div class="flex items-center gap-2">
+            <span class="text-xs text-fg-subtle uppercase tracking-wide">To</span>
+            <VersionSelector
+              v-if="pkg?.versions && pkg?.['dist-tags']"
+              :package-name="packageName"
+              :current-version="toVersion"
+              :versions="pkg.versions"
+              :dist-tags="pkg['dist-tags']"
+              :url-pattern="toVersionUrlPattern"
+            />
+            <span v-else class="font-mono text-sm text-fg-muted">{{ toVersion }}</span>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Error: invalid route -->
+    <div v-if="!versionRange" class="container py-20 text-center">
+      <p class="text-fg-muted mb-4">
+        Invalid comparison URL. Use format: /diff/package/v/from...to
+      </p>
+      <NuxtLink :to="packageRoute(packageName)" class="btn">Go to package</NuxtLink>
+    </div>
+
+    <!-- Loading state -->
+    <div v-else-if="compareStatus === 'pending'" class="container py-20 text-center">
+      <div class="i-svg-spinners-ring-resize w-8 h-8 mx-auto text-fg-muted" />
+      <p class="mt-4 text-fg-muted">Comparing versions...</p>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="compareStatus === 'error'" class="container py-20 text-center" role="alert">
+      <p class="text-fg-muted mb-4">Failed to compare versions</p>
+      <NuxtLink :to="packageRoute(packageName)" class="btn">Back to package</NuxtLink>
+    </div>
+
+    <!-- Comparison content -->
+    <div v-else-if="compare" class="flex-1 flex flex-col md:flex-row min-h-0 overflow-hidden">
+      <!-- Desktop sidebar -->
+      <aside
+        class="hidden md:flex w-80 border-ie border-border bg-bg-subtle flex-col shrink-0 min-h-0"
+      >
+        <DiffSidebarPanel
+          :compare="compare"
+          :grouped-deps="groupedDeps"
+          :all-changes="allChanges"
+          v-model:selected-file="selectedFile"
+          v-model:file-filter="fileFilter"
+          @file-select="selectedFile = $event"
+        />
+      </aside>
+
+      <!-- Right side -->
+      <div class="flex-1 flex flex-col min-w-0 overflow-hidden">
+        <!-- Mobile summary bar -->
+        <div
+          class="md:hidden border-b border-border bg-bg-subtle px-4 py-3 flex items-center justify-between gap-3"
+        >
+          <div class="flex items-center gap-2 text-2xs font-mono text-fg-muted">
+            <span class="flex items-center gap-1">
+              <span class="text-green-500">+{{ compare.stats.filesAdded }}</span>
+              <span class="text-fg-subtle">/</span>
+              <span class="text-red-500">-{{ compare.stats.filesRemoved }}</span>
+              <span class="text-fg-subtle">/</span>
+              <span class="text-yellow-500">~{{ compare.stats.filesModified }}</span>
+            </span>
+            <span class="text-fg-subtle">•</span>
+            <span>{{ $t('compare.files_count', { count: allChanges.length }) }}</span>
+          </div>
+          <button
+            type="button"
+            class="px-2 py-1 inline-flex items-center gap-1.5 font-mono text-xs bg-bg-muted border border-border rounded text-fg-muted hover:text-fg hover:border-border-hover transition-colors"
+            @click="mobileDrawerOpen = true"
+          >
+            <span class="i-lucide:file-text w-3.5 h-3.5" />
+            {{ $t('compare.files_button') }}
+          </button>
+        </div>
+
+        <!-- Diff viewer -->
+        <div class="flex-1 overflow-hidden bg-bg-subtle">
+          <DiffViewerPanel
+            v-if="selectedFile"
+            :package-name="packageName"
+            :from-version="fromVersion"
+            :to-version="toVersion"
+            :file="selectedFile"
+          />
+          <div v-else class="h-full flex items-center justify-center text-center p-8">
+            <div>
+              <span class="i-lucide:file-text w-16 h-16 mx-auto text-fg-subtle/50 block mb-4" />
+              <p class="text-fg-muted">{{ $t('compare.select_file_prompt') }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Mobile drawer -->
+    <ClientOnly>
+      <Teleport to="body">
+        <DiffMobileSidebarDrawer
+          v-if="compare"
+          :compare="compare"
+          :grouped-deps="groupedDeps"
+          :all-changes="allChanges"
+          v-model:selected-file="selectedFile"
+          v-model:file-filter="fileFilter"
+          v-model:open="mobileDrawerOpen"
+        />
+      </Teleport>
+    </ClientOnly>
+  </main>
+</template>
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 1553b0f04..d0e5474e0 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -875,6 +875,16 @@ const showSkeleton = shallowRef(false)
             >
               <span class="max-sm:sr-only">{{ $t('package.links.compare') }}</span>
             </LinkBase>
+            <LinkBase
+              v-if="
+                displayVersion && latestVersion && displayVersion.version !== latestVersion.version
+              "
+              variant="button-secondary"
+              :to="diffRoute(pkg.name, displayVersion.version, latestVersion.version)"
+              classicon="i-lucide:diff"
+            >
+              {{ $t('compare.compare_versions') }}
+            </LinkBase>
             <ButtonBase
               v-if="showScrollToTop"
               variant="secondary"
@@ -1007,6 +1017,39 @@ const showSkeleton = shallowRef(false)
                 {{ $t('package.links.fund') }}
               </LinkBase>
             </li>
+            <!-- Mobile-only: Docs + Code + Compare links -->
+            <li v-if="docsLink && displayVersion" class="sm:hidden">
+              <LinkBase :to="docsLink" classicon="i-lucide:file-text">
+                {{ $t('package.links.docs') }}
+              </LinkBase>
+            </li>
+            <li v-if="resolvedVersion && codeLink" class="sm:hidden">
+              <LinkBase :to="codeLink" classicon="i-lucide:code">
+                {{ $t('package.links.code') }}
+              </LinkBase>
+            </li>
+            <li class="sm:hidden">
+              <LinkBase
+                :to="{ name: 'compare', query: { packages: pkg.name } }"
+                classicon="i-lucide:git-compare"
+              >
+                {{ $t('package.links.compare') }}
+              </LinkBase>
+            </li>
+            <li
+              v-if="
+                displayVersion && latestVersion && displayVersion.version !== latestVersion.version
+              "
+              class="sm:hidden"
+            >
+              <NuxtLink
+                :to="diffRoute(pkg.name, displayVersion.version, latestVersion.version)"
+                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+              >
+                <span class="i-lucide:diff w-4 h-4" aria-hidden="true" />
+                {{ $t('compare.compare_versions') }}
+              </NuxtLink>
+            </li>
           </ul>
         </div>
 
diff --git a/app/types/icon.ts b/app/types/icon.ts
index 8221b2d43..d319ec2a9 100644
--- a/app/types/icon.ts
+++ b/app/types/icon.ts
@@ -1,5 +1,4 @@
 export type IconClass =
-  | `i-carbon:${string}`
   | `i-lucide:${string}`
   | `i-simple-icons:${string}`
   | `i-svg-spinners:${string}`
diff --git a/app/utils/router.ts b/app/utils/router.ts
index 3420180fa..1b8ce5d40 100644
--- a/app/utils/router.ts
+++ b/app/utils/router.ts
@@ -22,3 +22,20 @@ export function packageRoute(packageName: string, version?: string | null): Rout
     },
   }
 }
+
+export function diffRoute(
+  packageName: string,
+  fromVersion: string,
+  toVersion: string,
+): RouteLocationRaw {
+  const [org, name = ''] = packageName.startsWith('@') ? packageName.split('/') : ['', packageName]
+
+  return {
+    name: 'diff',
+    params: {
+      org: org || undefined,
+      packageName: name,
+      versionRange: `${fromVersion}...${toVersion}`,
+    },
+  }
+}
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 2a53cf33f..4c652248a 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1057,7 +1057,37 @@
       "trends": {
         "title": "Compare Trends"
       }
-    }
+    },
+    "file_changes": "File Changes",
+    "files_count": "{count} files",
+    "lines_hidden": "{count} lines hidden",
+    "compare_versions": "diff",
+    "summary": "Summary",
+    "deps_count": "{count} deps",
+    "dependencies": "Dependencies",
+    "dev_dependencies": "Dev Dependencies",
+    "peer_dependencies": "Peer Dependencies",
+    "optional_dependencies": "Optional Dependencies",
+    "no_dependency_changes": "No dependency changes",
+    "file_filter_option": {
+      "all": "All ({count})",
+      "added": "Added ({count})",
+      "removed": "Removed ({count})",
+      "modified": "Modified ({count})"
+    },
+    "search_files_placeholder": "Search files...",
+    "no_files_all": "No files",
+    "no_files_search": "No files matching \"{query}\"",
+    "no_files_filtered": "No {filter} files",
+    "filter": {
+      "added": "added",
+      "removed": "removed",
+      "modified": "modified"
+    },
+    "files_button": "Files",
+    "select_file_prompt": "Select a file from the sidebar to view its diff",
+    "close_files_panel": "Close files panel",
+    "filter_files_label": "Filter files by change type"
   },
   "privacy_policy": {
     "title": "privacy policy",
diff --git a/i18n/schema.json b/i18n/schema.json
index 911d445c5..5ce1bf37b 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -3177,6 +3177,96 @@
             }
           },
           "additionalProperties": false
+        },
+        "file_changes": {
+          "type": "string"
+        },
+        "files_count": {
+          "type": "string"
+        },
+        "lines_hidden": {
+          "type": "string"
+        },
+        "compare_versions": {
+          "type": "string"
+        },
+        "summary": {
+          "type": "string"
+        },
+        "deps_count": {
+          "type": "string"
+        },
+        "dependencies": {
+          "type": "string"
+        },
+        "dev_dependencies": {
+          "type": "string"
+        },
+        "peer_dependencies": {
+          "type": "string"
+        },
+        "optional_dependencies": {
+          "type": "string"
+        },
+        "no_dependency_changes": {
+          "type": "string"
+        },
+        "file_filter_option": {
+          "type": "object",
+          "properties": {
+            "all": {
+              "type": "string"
+            },
+            "added": {
+              "type": "string"
+            },
+            "removed": {
+              "type": "string"
+            },
+            "modified": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "search_files_placeholder": {
+          "type": "string"
+        },
+        "no_files_all": {
+          "type": "string"
+        },
+        "no_files_search": {
+          "type": "string"
+        },
+        "no_files_filtered": {
+          "type": "string"
+        },
+        "filter": {
+          "type": "object",
+          "properties": {
+            "added": {
+              "type": "string"
+            },
+            "removed": {
+              "type": "string"
+            },
+            "modified": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "files_button": {
+          "type": "string"
+        },
+        "select_file_prompt": {
+          "type": "string"
+        },
+        "close_files_panel": {
+          "type": "string"
+        },
+        "filter_files_label": {
+          "type": "string"
         }
       },
       "additionalProperties": false
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index bd944ac87..0b1ecf9c6 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -1056,7 +1056,37 @@
       "trends": {
         "title": "Compare Trends"
       }
-    }
+    },
+    "file_changes": "File Changes",
+    "files_count": "{count} files",
+    "lines_hidden": "{count} lines hidden",
+    "compare_versions": "diff",
+    "summary": "Summary",
+    "deps_count": "{count} deps",
+    "dependencies": "Dependencies",
+    "dev_dependencies": "Dev Dependencies",
+    "peer_dependencies": "Peer Dependencies",
+    "optional_dependencies": "Optional Dependencies",
+    "no_dependency_changes": "No dependency changes",
+    "file_filter_option": {
+      "all": "All ({count})",
+      "added": "Added ({count})",
+      "removed": "Removed ({count})",
+      "modified": "Modified ({count})"
+    },
+    "search_files_placeholder": "Search files...",
+    "no_files_all": "No files",
+    "no_files_search": "No files matching \"{query}\"",
+    "no_files_filtered": "No {filter} files",
+    "filter": {
+      "added": "added",
+      "removed": "removed",
+      "modified": "modified"
+    },
+    "files_button": "Files",
+    "select_file_prompt": "Select a file from the sidebar to view its diff",
+    "close_files_panel": "Close files panel",
+    "filter_files_label": "Filter files by change type"
   },
   "privacy_policy": {
     "title": "privacy policy",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 13a074d6a..359cd5e2a 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -1056,7 +1056,37 @@
       "trends": {
         "title": "Compare Trends"
       }
-    }
+    },
+    "file_changes": "File Changes",
+    "files_count": "{count} files",
+    "lines_hidden": "{count} lines hidden",
+    "compare_versions": "diff",
+    "summary": "Summary",
+    "deps_count": "{count} deps",
+    "dependencies": "Dependencies",
+    "dev_dependencies": "Dev Dependencies",
+    "peer_dependencies": "Peer Dependencies",
+    "optional_dependencies": "Optional Dependencies",
+    "no_dependency_changes": "No dependency changes",
+    "file_filter_option": {
+      "all": "All ({count})",
+      "added": "Added ({count})",
+      "removed": "Removed ({count})",
+      "modified": "Modified ({count})"
+    },
+    "search_files_placeholder": "Search files...",
+    "no_files_all": "No files",
+    "no_files_search": "No files matching \"{query}\"",
+    "no_files_filtered": "No {filter} files",
+    "filter": {
+      "added": "added",
+      "removed": "removed",
+      "modified": "modified"
+    },
+    "files_button": "Files",
+    "select_file_prompt": "Select a file from the sidebar to view its diff",
+    "close_files_panel": "Close files panel",
+    "filter_files_label": "Filter files by change type"
   },
   "privacy_policy": {
     "title": "privacy policy",
diff --git a/package.json b/package.json
index 02eca8ab1..133ba75a5 100644
--- a/package.json
+++ b/package.json
@@ -87,6 +87,7 @@
     "@vueuse/shared": "14.2.1",
     "algoliasearch": "5.49.0",
     "defu": "6.1.4",
+    "diff": "^8.0.3",
     "fast-npm-meta": "1.2.1",
     "focus-trap": "^8.0.0",
     "gray-matter": "4.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 74ad50cd7..74c23b6e0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -123,6 +123,9 @@ importers:
       defu:
         specifier: 6.1.4
         version: 6.1.4
+      diff:
+        specifier: ^8.0.3
+        version: 8.0.3
       fast-npm-meta:
         specifier: 1.2.1
         version: 1.2.1
diff --git a/server/api/registry/compare-file/[...pkg].get.ts b/server/api/registry/compare-file/[...pkg].get.ts
new file mode 100644
index 000000000..71312422c
--- /dev/null
+++ b/server/api/registry/compare-file/[...pkg].get.ts
@@ -0,0 +1,264 @@
+import * as v from 'valibot'
+import { PackageFileDiffQuerySchema } from '#shared/schemas/package'
+import type { FileDiffResponse, DiffHunk } from '#shared/types'
+import { CACHE_MAX_AGE_ONE_YEAR } from '#shared/utils/constants'
+import { createDiff, insertSkipBlocks, countDiffStats } from '#server/utils/diff'
+import { parseVersionRange } from '#server/utils/compare'
+import { getLanguageFromPath } from '#server/utils/code-highlight'
+
+const CACHE_VERSION = 1
+const DIFF_TIMEOUT = 15000 // 15 sec
+
+/** Maximum file size for diffing (250KB - smaller than viewing since we diff two files) */
+const MAX_DIFF_FILE_SIZE = 250 * 1024
+
+/**
+ * Fetch file content from jsDelivr with size check
+ */
+async function fetchFileContentForDiff(
+  packageName: string,
+  version: string,
+  filePath: string,
+  signal?: AbortSignal,
+): Promise<string | null> {
+  const url = `https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), DIFF_TIMEOUT)
+  if (signal) {
+    signal.addEventListener('abort', () => controller.abort(signal.reason as any), { once: true })
+  }
+
+  try {
+    const response = await fetch(url, { signal: controller.signal })
+
+    if (!response.ok) {
+      if (response.status === 404) return null
+      throw createError({
+        statusCode: response.status >= 500 ? 502 : response.status,
+        message: `Failed to fetch file (${response.status})`,
+      })
+    }
+
+    const contentLength = response.headers.get('content-length')
+    if (contentLength && parseInt(contentLength, 10) > MAX_DIFF_FILE_SIZE) {
+      throw createError({
+        statusCode: 413,
+        message: `File too large to diff (${(parseInt(contentLength, 10) / 1024).toFixed(0)}KB). Maximum is ${MAX_DIFF_FILE_SIZE / 1024}KB.`,
+      })
+    }
+
+    const content = await response.text()
+
+    if (content.length > MAX_DIFF_FILE_SIZE) {
+      throw createError({
+        statusCode: 413,
+        message: `File too large to diff (${(content.length / 1024).toFixed(0)}KB). Maximum is ${MAX_DIFF_FILE_SIZE / 1024}KB.`,
+      })
+    }
+
+    return content
+  } catch (error) {
+    if (error && typeof error === 'object' && 'statusCode' in error) {
+      throw error
+    }
+    if ((error as Error)?.name === 'AbortError') {
+      throw createError({
+        statusCode: 504,
+        message: 'Diff request timed out while fetching file',
+      })
+    }
+    throw createError({
+      statusCode: 502,
+      message: 'Failed to fetch file for diff',
+    })
+  } finally {
+    clearTimeout(timeoutId)
+  }
+}
+
+/**
+ * Get diff for a specific file between two versions.
+ *
+ * URL patterns:
+ * - /api/registry/compare-file/packageName/v/1.0.0...2.0.0/path/to/file.ts
+ * - /api/registry/compare-file/@scope/packageName/v/1.0.0...2.0.0/path/to/file.ts
+ */
+export default defineCachedEventHandler(
+  async event => {
+    const startTime = Date.now()
+
+    // Parse package segments
+    const pkgParamSegments = getRouterParam(event, 'pkg')?.split('/') ?? []
+    const { rawPackageName, rawVersion: fullPathAfterV } = parsePackageParams(pkgParamSegments)
+
+    // Split version range and file path
+    // fullPathAfterV => "1.0.0...2.0.0/dist/index.mjs"
+    const versionSegments = fullPathAfterV?.split('/') ?? []
+
+    if (versionSegments.length < 2) {
+      throw createError({
+        statusCode: 400,
+        message: 'Version range and file path are required',
+      })
+    }
+
+    // First segment contains the version range
+    const rawVersionRange = versionSegments[0]!
+    const rawFilePath = versionSegments.slice(1).join('/')
+
+    // Parse version range
+    const range = parseVersionRange(rawVersionRange)
+    if (!range) {
+      throw createError({
+        statusCode: 400,
+        message: 'Invalid version range format. Use from...to (e.g., 1.0.0...2.0.0)',
+      })
+    }
+
+    try {
+      // Validate inputs
+      const { packageName, fromVersion, toVersion, filePath } = v.parse(
+        PackageFileDiffQuerySchema,
+        {
+          packageName: rawPackageName,
+          fromVersion: range.from,
+          toVersion: range.to,
+          filePath: rawFilePath,
+        },
+      )
+
+      // Set up abort controller for timeout
+      const controller = new AbortController()
+      const timeoutId = setTimeout(() => controller.abort(), DIFF_TIMEOUT)
+
+      try {
+        // Get diff options from query params
+        const query = getQuery(event)
+        const diffOptions = {
+          mergeModifiedLines: query.mergeModifiedLines !== 'false',
+          maxChangeRatio: parseFloat(query.maxChangeRatio as string) || 0.45,
+          maxDiffDistance: parseInt(query.maxDiffDistance as string, 10) || 30,
+          inlineMaxCharEdits: parseInt(query.inlineMaxCharEdits as string, 10) || 2,
+        }
+
+        // Fetch file contents in parallel
+        const [fromContent, toContent] = await Promise.all([
+          fetchFileContentForDiff(packageName, fromVersion, filePath, controller.signal),
+          fetchFileContentForDiff(packageName, toVersion, filePath, controller.signal),
+        ])
+
+        clearTimeout(timeoutId)
+
+        // Determine file type
+        let type: 'add' | 'delete' | 'modify'
+        if (fromContent === null && toContent === null) {
+          throw createError({
+            statusCode: 404,
+            message: 'File not found in either version',
+          })
+        } else if (fromContent === null) {
+          type = 'add'
+        } else if (toContent === null) {
+          type = 'delete'
+        } else {
+          type = 'modify'
+        }
+
+        // Create diff with options
+        const diff = createDiff(fromContent ?? '', toContent ?? '', filePath, diffOptions)
+
+        if (!diff) {
+          // No changes (shouldn't happen but handle it)
+          return {
+            package: packageName,
+            from: fromVersion,
+            to: toVersion,
+            path: filePath,
+            type,
+            hunks: [],
+            stats: { additions: 0, deletions: 0 },
+            meta: { computeTime: Date.now() - startTime },
+          } satisfies FileDiffResponse
+        }
+
+        // Insert skip blocks and count stats
+        const hunkOnly = diff.hunks.filter((h): h is DiffHunk => h.type === 'hunk')
+        const hunksWithSkips = insertSkipBlocks(hunkOnly)
+        const stats = countDiffStats(hunksWithSkips)
+
+        // Syntax-highlight diff segments using server-side Shiki
+        const language = getLanguageFromPath(filePath)
+        const shiki = await getShikiHighlighter()
+        const loadedLangs = shiki.getLoadedLanguages()
+        const canHighlight = loadedLangs.includes(language as never)
+
+        if (canHighlight) {
+          for (const hunk of hunksWithSkips) {
+            if (hunk.type !== 'hunk') continue
+            for (const line of hunk.lines) {
+              line.content = line.content.map(seg => {
+                const code = seg.value.length ? seg.value : ' '
+                try {
+                  const raw = shiki.codeToHtml(code, {
+                    lang: language,
+                    themes: { light: 'github-light', dark: 'github-dark' },
+                    defaultColor: 'dark',
+                  })
+                  const html = raw.match(/<code[^>]*>([\s\S]*?)<\/code>/)?.[1]
+                  return html ? { ...seg, html } : seg
+                } catch {
+                  return seg
+                }
+              })
+            }
+          }
+        }
+
+        return {
+          package: packageName,
+          from: fromVersion,
+          to: toVersion,
+          path: filePath,
+          type,
+          hunks: hunksWithSkips,
+          stats,
+          meta: { computeTime: Date.now() - startTime },
+        } satisfies FileDiffResponse
+      } catch (error) {
+        clearTimeout(timeoutId)
+
+        // Check if it was a timeout
+        if (error instanceof Error && error.name === 'AbortError') {
+          throw createError({
+            statusCode: 504,
+            message: 'Diff computation timed out',
+          })
+        }
+
+        throw error
+      }
+    } catch (error: unknown) {
+      handleApiError(error, {
+        statusCode: 502,
+        message: 'Failed to compute file diff',
+      })
+    }
+  },
+  {
+    // Diff between specific versions never changes - cache permanently
+    maxAge: CACHE_MAX_AGE_ONE_YEAR,
+    swr: true,
+    getKey: event => {
+      const pkg = getRouterParam(event, 'pkg') ?? ''
+      const query = getQuery(event)
+      // Normalize option values to prevent cache pollution from arbitrary floats.
+      // These match the parsing logic used in the handler body.
+      const merge = query.mergeModifiedLines !== 'false'
+      const ratio = Math.round((parseFloat(query.maxChangeRatio as string) || 0.45) * 100)
+      const distance = parseInt(query.maxDiffDistance as string, 10) || 30
+      const charEdits = parseInt(query.inlineMaxCharEdits as string, 10) || 2
+      const optionsKey = `${merge}:${ratio}:${distance}:${charEdits}`
+      return `compare-file:v${CACHE_VERSION}:${pkg.replace(/\/+$/, '').trim()}:${optionsKey}`
+    },
+  },
+)
diff --git a/server/api/registry/compare/[...pkg].get.ts b/server/api/registry/compare/[...pkg].get.ts
new file mode 100644
index 000000000..03a34bf23
--- /dev/null
+++ b/server/api/registry/compare/[...pkg].get.ts
@@ -0,0 +1,123 @@
+import * as v from 'valibot'
+import { PackageCompareQuerySchema } from '#shared/schemas/package'
+import type { CompareResponse } from '#shared/types'
+import { CACHE_MAX_AGE_ONE_YEAR } from '#shared/utils/constants'
+import { buildCompareResponse, parseVersionRange } from '#server/utils/compare'
+
+const CACHE_VERSION = 1
+const COMPARE_TIMEOUT = 8000 // 8 seconds
+
+/**
+ * Fetch package.json from jsDelivr
+ */
+async function fetchPackageJson(
+  packageName: string,
+  version: string,
+  signal?: AbortSignal,
+): Promise<Record<string, unknown> | null> {
+  try {
+    const url = `https://cdn.jsdelivr.net/npm/${packageName}@${version}/package.json`
+    const response = await fetch(url, { signal })
+    if (!response.ok) return null
+    return (await response.json()) as Record<string, unknown>
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Compare two package versions and return differences.
+ *
+ * URL patterns:
+ * - /api/registry/compare/packageName/v/1.0.0...2.0.0
+ * - /api/registry/compare/@scope/packageName/v/1.0.0...2.0.0
+ */
+export default defineCachedEventHandler(
+  async event => {
+    const startTime = Date.now()
+
+    // Parse package segments
+    const pkgParamSegments = getRouterParam(event, 'pkg')?.split('/') ?? []
+    const { rawPackageName, rawVersion: rawVersionRange } = parsePackageParams(pkgParamSegments)
+
+    if (!rawVersionRange) {
+      throw createError({
+        statusCode: 400,
+        message: 'Version range is required (e.g., 1.0.0...2.0.0)',
+      })
+    }
+
+    // Parse version range
+    const range = parseVersionRange(rawVersionRange)
+    if (!range) {
+      throw createError({
+        statusCode: 400,
+        message: 'Invalid version range format. Use from...to (e.g., 1.0.0...2.0.0)',
+      })
+    }
+
+    try {
+      // Validate inputs
+      const { packageName, fromVersion, toVersion } = v.parse(PackageCompareQuerySchema, {
+        packageName: rawPackageName,
+        fromVersion: range.from,
+        toVersion: range.to,
+      })
+
+      // Set up abort controller for timeout
+      const controller = new AbortController()
+      const timeoutId = setTimeout(() => controller.abort(), COMPARE_TIMEOUT)
+
+      try {
+        // Fetch file trees and package.json for both versions in parallel
+        const [fromTree, toTree, fromPkg, toPkg] = await Promise.all([
+          getPackageFileTree(packageName, fromVersion, controller.signal),
+          getPackageFileTree(packageName, toVersion, controller.signal),
+          fetchPackageJson(packageName, fromVersion, controller.signal),
+          fetchPackageJson(packageName, toVersion, controller.signal),
+        ])
+
+        clearTimeout(timeoutId)
+
+        const computeTime = Date.now() - startTime
+
+        return buildCompareResponse(
+          packageName,
+          fromVersion,
+          toVersion,
+          fromTree.tree,
+          toTree.tree,
+          fromPkg,
+          toPkg,
+          computeTime,
+        ) satisfies CompareResponse
+      } catch (error) {
+        clearTimeout(timeoutId)
+
+        // Check if it was a timeout
+        if (error instanceof Error && error.name === 'AbortError') {
+          throw createError({
+            statusCode: 504,
+            message: 'Comparison timed out. Try comparing fewer files.',
+          })
+        }
+
+        throw error
+      }
+    } catch (error: unknown) {
+      handleApiError(error, {
+        statusCode: 502,
+        message: 'Failed to compare package versions',
+      })
+    }
+  },
+  {
+    // Comparison between specific versions never changes hence cache permanently
+    maxAge: CACHE_MAX_AGE_ONE_YEAR,
+    swr: true,
+    getKey: event => {
+      const pkg = getRouterParam(event, 'pkg') ?? ''
+      return `compare:v${CACHE_VERSION}:${pkg.replace(/\/+$/, '').trim()}`
+    },
+  },
+)
diff --git a/server/utils/compare.ts b/server/utils/compare.ts
new file mode 100644
index 000000000..68ae93b0d
--- /dev/null
+++ b/server/utils/compare.ts
@@ -0,0 +1,273 @@
+import { diff as semverDiff } from 'semver'
+import type { PackageFileTree, DependencyChange, FileChange, CompareResponse } from '#shared/types'
+
+/**
+ * Parse a version range from a URL segment.
+ * Supports formats like: "1.0.0...2.0.0" (triple dot, GitHub style)
+ */
+export function parseVersionRange(versionRange: string): { from: string; to: string } | null {
+  const parts = versionRange.split('...')
+  if (parts.length === 2) {
+    return { from: parts[0]!, to: parts[1]! }
+  }
+
+  return null
+}
+
+/** Maximum number of files to include in comparison */
+const MAX_FILES_COMPARE = 1000
+
+function traverse(nodes: PackageFileTree[], result: Map<string, PackageFileTree>) {
+  for (const node of nodes) {
+    result.set(node.path, node)
+    if (node.children) {
+      traverse(node.children, result)
+    }
+  }
+}
+
+/** Flatten a file tree into a map of path -> node */
+export function flattenTree(tree: PackageFileTree[]): Map<string, PackageFileTree> {
+  const result = new Map<string, PackageFileTree>()
+
+  traverse(tree, result)
+  return result
+}
+
+const hasChanged = (fromNode: PackageFileTree, toNode: PackageFileTree): boolean => {
+  // Prefer strong hash comparison when both hashes are available
+  if (fromNode.hash && toNode.hash) return fromNode.hash !== toNode.hash
+  // Fallback to size comparison if hashes are missing
+  if (typeof fromNode.size === 'number' && typeof toNode.size === 'number') {
+    return fromNode.size !== toNode.size
+  }
+  // If we lack comparable signals, assume unchanged
+  return false
+}
+
+/** Compare two file trees and return changes */
+export function compareFileTrees(
+  fromTree: PackageFileTree[],
+  toTree: PackageFileTree[],
+): { added: FileChange[]; removed: FileChange[]; modified: FileChange[]; truncated: boolean } {
+  const fromFiles = flattenTree(fromTree)
+  const toFiles = flattenTree(toTree)
+
+  const added: FileChange[] = []
+  const removed: FileChange[] = []
+  const modified: FileChange[] = []
+  let truncated = false
+  const overLimit = () => added.length + removed.length + modified.length >= MAX_FILES_COMPARE
+
+  // Find added and modified files
+  for (const [path, toNode] of toFiles) {
+    if (overLimit()) {
+      truncated = true
+      break
+    }
+
+    const fromNode = fromFiles.get(path)
+
+    // Handle directory -> file / file -> directory transitions
+    if (toNode.type === 'directory') {
+      if (fromNode?.type === 'file') {
+        removed.push({
+          path,
+          type: 'removed',
+          oldSize: fromNode.size,
+        })
+      }
+      continue
+    }
+
+    // toNode is file
+    if (!fromNode) {
+      // New file
+      added.push({
+        path,
+        type: 'added',
+        newSize: toNode.size,
+      })
+    } else if (fromNode.type === 'directory') {
+      // Path was a directory, now a file -> treat as added file
+      added.push({
+        path,
+        type: 'added',
+        newSize: toNode.size,
+      })
+    } else if (fromNode.type === 'file') {
+      if (hasChanged(fromNode, toNode)) {
+        modified.push({
+          path,
+          type: 'modified',
+          oldSize: fromNode.size,
+          newSize: toNode.size,
+        })
+      }
+    }
+  }
+
+  // Find removed files
+  for (const [path, fromNode] of fromFiles) {
+    if (fromNode.type === 'directory') continue
+
+    if (overLimit()) {
+      truncated = true
+      break
+    }
+
+    if (!toFiles.has(path)) {
+      removed.push({
+        path,
+        type: 'removed',
+        oldSize: fromNode.size,
+      })
+    }
+  }
+
+  // Sort by path
+  added.sort((a, b) => a.path.localeCompare(b.path))
+  removed.sort((a, b) => a.path.localeCompare(b.path))
+  modified.sort((a, b) => a.path.localeCompare(b.path))
+
+  return { added, removed, modified, truncated }
+}
+
+/** Compare dependencies between two package.json files */
+export function compareDependencies(
+  fromPkg: Record<string, unknown> | null,
+  toPkg: Record<string, unknown> | null,
+): DependencyChange[] {
+  const changes: DependencyChange[] = []
+  const sections = [
+    'dependencies',
+    'devDependencies',
+    'peerDependencies',
+    'optionalDependencies',
+  ] as const
+
+  for (const section of sections) {
+    const fromDeps = (fromPkg?.[section] as Record<string, string>) ?? {}
+    const toDeps = (toPkg?.[section] as Record<string, string>) ?? {}
+
+    const allNames = new Set([...Object.keys(fromDeps), ...Object.keys(toDeps)])
+
+    for (const name of allNames) {
+      const fromVersion = fromDeps[name] ?? null
+      const toVersion = toDeps[name] ?? null
+
+      if (fromVersion === toVersion) continue
+
+      let type: 'added' | 'removed' | 'updated'
+      if (!fromVersion) type = 'added'
+      else if (!toVersion) type = 'removed'
+      else type = 'updated'
+
+      let semverDiffType: DependencyChange['semverDiff'] = null
+      if (type === 'updated' && fromVersion && toVersion) {
+        // Try to compute semver diff
+        try {
+          // Strip ^ ~ >= etc for comparison
+          const cleanFrom = fromVersion.replace(/^[\^~>=<]+/, '')
+          const cleanTo = toVersion.replace(/^[\^~>=<]+/, '')
+          const diffResult = semverDiff(cleanFrom, cleanTo)
+          if (diffResult) {
+            if (
+              diffResult === 'premajor' ||
+              diffResult === 'preminor' ||
+              diffResult === 'prepatch'
+            ) {
+              semverDiffType = 'prerelease'
+            } else if (['major', 'minor', 'patch', 'prerelease'].includes(diffResult)) {
+              semverDiffType = diffResult as 'major' | 'minor' | 'patch' | 'prerelease'
+            }
+          }
+        } catch {
+          // Invalid semver, ignore
+        }
+      }
+
+      changes.push({
+        name,
+        section,
+        from: fromVersion,
+        to: toVersion,
+        type,
+        semverDiff: semverDiffType,
+      })
+    }
+  }
+
+  // Sort: by section, then by name
+  changes.sort((a, b) => {
+    if (a.section !== b.section) {
+      return sections.indexOf(a.section) - sections.indexOf(b.section)
+    }
+    return a.name.localeCompare(b.name)
+  })
+
+  return changes
+}
+
+/** Count total files in a tree */
+export function countFiles(tree: PackageFileTree[]): number {
+  let count = 0
+
+  function traverse(nodes: PackageFileTree[]) {
+    for (const node of nodes) {
+      if (node.type === 'file') count++
+      if (node.children) traverse(node.children)
+    }
+  }
+
+  traverse(tree)
+  return count
+}
+
+/** Build the full compare response */
+export function buildCompareResponse(
+  packageName: string,
+  from: string,
+  to: string,
+  fromTree: PackageFileTree[],
+  toTree: PackageFileTree[],
+  fromPkg: Record<string, unknown> | null,
+  toPkg: Record<string, unknown> | null,
+  computeTime: number,
+): CompareResponse {
+  const fileChanges = compareFileTrees(fromTree, toTree)
+  const dependencyChanges = compareDependencies(fromPkg, toPkg)
+
+  const warnings: string[] = []
+  if (fileChanges.truncated) {
+    warnings.push(`File list truncated to ${MAX_FILES_COMPARE} files`)
+  }
+
+  return {
+    package: packageName,
+    from,
+    to,
+    packageJson: {
+      from: fromPkg,
+      to: toPkg,
+    },
+    files: {
+      added: fileChanges.added,
+      removed: fileChanges.removed,
+      modified: fileChanges.modified,
+    },
+    dependencyChanges,
+    stats: {
+      totalFilesFrom: countFiles(fromTree),
+      totalFilesTo: countFiles(toTree),
+      filesAdded: fileChanges.added.length,
+      filesRemoved: fileChanges.removed.length,
+      filesModified: fileChanges.modified.length,
+    },
+    meta: {
+      truncated: fileChanges.truncated,
+      warnings: warnings.length > 0 ? warnings : undefined,
+      computeTime,
+    },
+  }
+}
diff --git a/server/utils/diff.ts b/server/utils/diff.ts
new file mode 100644
index 000000000..45e695a49
--- /dev/null
+++ b/server/utils/diff.ts
@@ -0,0 +1 @@
+export * from '../../shared/utils/diff'
diff --git a/server/utils/file-tree.ts b/server/utils/file-tree.ts
index 9d8933f3b..c5a55159d 100644
--- a/server/utils/file-tree.ts
+++ b/server/utils/file-tree.ts
@@ -12,9 +12,10 @@ import type {
 export async function fetchFileTree(
   packageName: string,
   version: string,
+  signal?: AbortSignal,
 ): Promise<JsDelivrPackageResponse> {
   const url = `https://data.jsdelivr.com/v1/packages/npm/${packageName}@${version}`
-  const response = await fetch(url)
+  const response = await fetch(url, { signal })
 
   if (!response.ok) {
     if (response.status === 404) {
@@ -53,6 +54,7 @@ export function convertToFileTree(
         name: node.name,
         path,
         type: 'file',
+        hash: node.hash,
         size: node.size,
       })
     }
@@ -76,8 +78,9 @@ export function convertToFileTree(
 export async function getPackageFileTree(
   packageName: string,
   version: string,
+  signal?: AbortSignal,
 ): Promise<PackageFileTreeResponse> {
-  const jsDelivrData = await fetchFileTree(packageName, version)
+  const jsDelivrData = await fetchFileTree(packageName, version, signal)
   const tree = convertToFileTree(jsDelivrData.files)
 
   return {
diff --git a/server/utils/npm.ts b/server/utils/npm.ts
index 7f61feafc..99d13810c 100644
--- a/server/utils/npm.ts
+++ b/server/utils/npm.ts
@@ -1,7 +1,7 @@
 import type { Packument, NpmSearchResponse } from '#shared/types'
 import { encodePackageName, fetchLatestVersion } from '#shared/utils/npm'
 import { maxSatisfying, prerelease } from 'semver'
-import { CACHE_MAX_AGE_FIVE_MINUTES } from '#shared/utils/constants'
+import { CACHE_MAX_AGE_FIVE_MINUTES, CACHE_MAX_AGE_ONE_DAY } from '#shared/utils/constants'
 
 const NPM_REGISTRY = 'https://registry.npmjs.org'
 
diff --git a/shared/schemas/package.ts b/shared/schemas/package.ts
index 7bfde5db3..0bd3e5d18 100644
--- a/shared/schemas/package.ts
+++ b/shared/schemas/package.ts
@@ -70,6 +70,25 @@ export const PackageFileQuerySchema = v.object({
   filePath: FilePathSchema,
 })
 
+/**
+ * Schema for version comparison (from...to range)
+ */
+export const PackageCompareQuerySchema = v.object({
+  packageName: PackageNameSchema,
+  fromVersion: VersionSchema,
+  toVersion: VersionSchema,
+})
+
+/**
+ * Schema for file diff between versions
+ */
+export const PackageFileDiffQuerySchema = v.object({
+  packageName: PackageNameSchema,
+  fromVersion: VersionSchema,
+  toVersion: VersionSchema,
+  filePath: FilePathSchema,
+})
+
 /**
  * Automatically infer types for routes
  * Usage - prefer this over manually defining interfaces
@@ -77,3 +96,7 @@ export const PackageFileQuerySchema = v.object({
 export type PackageRouteParams = v.InferOutput<typeof PackageRouteParamsSchema>
 export type PackageVersionQuery = v.InferOutput<typeof PackageVersionQuerySchema>
 export type PackageFileQuery = v.InferOutput<typeof PackageFileQuerySchema>
+/** @public */
+export type PackageCompareQuery = v.InferOutput<typeof PackageCompareQuerySchema>
+/** @public */
+export type PackageFileDiffQuery = v.InferOutput<typeof PackageFileDiffQuerySchema>
diff --git a/shared/types/compare.ts b/shared/types/compare.ts
new file mode 100644
index 000000000..bce433b87
--- /dev/null
+++ b/shared/types/compare.ts
@@ -0,0 +1,155 @@
+/** A change in a dependency between versions */
+export interface DependencyChange {
+  /** Package name */
+  name: string
+  /** Which dependency section it belongs to */
+  section: 'dependencies' | 'devDependencies' | 'peerDependencies' | 'optionalDependencies'
+  /** Version in the "from" version (null if newly added) */
+  from: string | null
+  /** Version in the "to" version (null if removed) */
+  to: string | null
+  /** Type of change */
+  type: 'added' | 'removed' | 'updated'
+  /** Best-effort semver diff type */
+  semverDiff?: 'major' | 'minor' | 'patch' | 'prerelease' | null
+}
+
+/** File change info in the comparison */
+export interface FileChange {
+  /** File path */
+  path: string
+  /** Type of change */
+  type: 'added' | 'removed' | 'modified'
+  /** Old file size (for removed/modified) */
+  oldSize?: number
+  /** New file size (for added/modified) */
+  newSize?: number
+}
+
+/** Comparison summary response from the API */
+export interface CompareResponse {
+  /** Package name */
+  package: string
+  /** Source version */
+  from: string
+  /** Target version */
+  to: string
+  /** package.json content for both versions */
+  packageJson: {
+    from: Record<string, unknown> | null
+    to: Record<string, unknown> | null
+  }
+  /** File changes between versions */
+  files: {
+    added: FileChange[]
+    removed: FileChange[]
+    modified: FileChange[]
+  }
+  /** Dependency changes */
+  dependencyChanges: DependencyChange[]
+  /** Stats summary */
+  stats: {
+    totalFilesFrom: number
+    totalFilesTo: number
+    filesAdded: number
+    filesRemoved: number
+    filesModified: number
+  }
+  /** Metadata about the comparison */
+  meta: {
+    /** Whether file list was truncated due to size */
+    truncated?: boolean
+    /** Any warnings during comparison */
+    warnings?: string[]
+    /** Time taken to compute (ms) */
+    computeTime?: number
+  }
+}
+
+/** A line segment in a diff (for inline word-level diffs) */
+export interface DiffLineSegment {
+  value: string
+  type: 'insert' | 'delete' | 'normal'
+  /** Pre-rendered syntax-highlighted HTML (set by ViewerPanel after diff computation) */
+  html?: string
+}
+
+/** A single line in the diff */
+export interface DiffLine {
+  /** Line type */
+  type: 'insert' | 'delete' | 'normal'
+  /** Old line number (for normal/delete) */
+  oldLineNumber?: number
+  /** New line number (for normal/insert) */
+  newLineNumber?: number
+  /** Line number (for insert/delete) */
+  lineNumber?: number
+  /** Line content segments */
+  content: DiffLineSegment[]
+}
+
+/** A hunk in the diff */
+export interface DiffHunk {
+  type: 'hunk'
+  /** Original hunk header content */
+  content: string
+  /** Old file start line */
+  oldStart: number
+  /** Number of lines in old file */
+  oldLines: number
+  /** New file start line */
+  newStart: number
+  /** Number of lines in new file */
+  newLines: number
+  /** Lines in this hunk */
+  lines: DiffLine[]
+}
+
+/** A skip block (collapsed unchanged lines) */
+export interface DiffSkipBlock {
+  type: 'skip'
+  /** Number of lines skipped */
+  count: number
+  /** Context message */
+  content: string
+}
+
+/** Parsed file diff */
+export interface FileDiff {
+  /** Old file path */
+  oldPath: string
+  /** New file path */
+  newPath: string
+  /** File change type */
+  type: 'add' | 'delete' | 'modify'
+  /** Hunks in the diff */
+  hunks: (DiffHunk | DiffSkipBlock)[]
+}
+
+/** Per-file diff response from the API */
+export interface FileDiffResponse {
+  /** Package name */
+  package: string
+  /** Source version */
+  from: string
+  /** Target version */
+  to: string
+  /** File path */
+  path: string
+  /** File change type */
+  type: 'add' | 'delete' | 'modify'
+  /** Parsed diff hunks */
+  hunks: (DiffHunk | DiffSkipBlock)[]
+  /** Diff stats */
+  stats: {
+    additions: number
+    deletions: number
+  }
+  /** Metadata */
+  meta: {
+    /** Whether diff was truncated */
+    truncated?: boolean
+    /** Time taken to compute (ms) */
+    computeTime?: number
+  }
+}
diff --git a/shared/types/index.ts b/shared/types/index.ts
index be4274d32..cbd472b9d 100644
--- a/shared/types/index.ts
+++ b/shared/types/index.ts
@@ -8,5 +8,6 @@ export * from './deno-doc'
 export * from './i18n-status'
 export * from './comparison'
 export * from './skills'
+export * from './compare'
 export * from './version-downloads'
 export * from './install-size'
diff --git a/shared/types/npm-registry.ts b/shared/types/npm-registry.ts
index f7d7cdd12..250a9218e 100644
--- a/shared/types/npm-registry.ts
+++ b/shared/types/npm-registry.ts
@@ -355,6 +355,8 @@ export interface PackageFileTree {
   path: string
   /** Node type */
   type: 'file' | 'directory'
+  /** File hash (only for files) */
+  hash?: string
   /** Node size in bytes (file size or recursive directory total) */
   size?: number
   /** Child nodes (only for directories) */
diff --git a/shared/utils/diff.ts b/shared/utils/diff.ts
new file mode 100644
index 000000000..aa8541e12
--- /dev/null
+++ b/shared/utils/diff.ts
@@ -0,0 +1,393 @@
+import { createTwoFilesPatch } from 'diff'
+import type {
+  DiffLine,
+  DiffLineSegment,
+  DiffHunk,
+  DiffSkipBlock,
+  FileDiff,
+} from '#shared/types/compare'
+
+/** Options for parsing diffs */
+export interface ParseOptions {
+  maxDiffDistance: number
+  maxChangeRatio: number
+  mergeModifiedLines: boolean
+  inlineMaxCharEdits: number
+}
+
+const defaultOptions: ParseOptions = {
+  maxDiffDistance: 30,
+  maxChangeRatio: 0.45,
+  mergeModifiedLines: true,
+  inlineMaxCharEdits: 2,
+}
+
+interface RawChange {
+  type: 'insert' | 'delete' | 'normal'
+  content: string
+  lineNumber?: number
+  oldLineNumber?: number
+  newLineNumber?: number
+  isNormal?: boolean
+}
+
+function calculateChangeRatio(a: string, b: string): number {
+  const totalChars = a.length + b.length
+  if (totalChars === 0) return 1
+  let changedChars = 0
+  const maxLen = Math.max(a.length, b.length)
+  for (let i = 0; i < maxLen; i++) {
+    if (a[i] !== b[i]) changedChars++
+  }
+  changedChars += Math.abs(a.length - b.length)
+  return changedChars / totalChars
+}
+
+function isSimilarEnough(a: string, b: string, maxChangeRatio: number): boolean {
+  if (maxChangeRatio <= 0) return a === b
+  if (maxChangeRatio >= 1) return true
+  return calculateChangeRatio(a, b) <= maxChangeRatio
+}
+
+function buildInlineDiffSegments(
+  oldContent: string,
+  newContent: string,
+  _options: ParseOptions,
+): DiffLineSegment[] {
+  const oldWords = oldContent.split(/(\s+)/)
+  const newWords = newContent.split(/(\s+)/)
+
+  const segments: DiffLineSegment[] = []
+  let oi = 0
+  let ni = 0
+
+  while (oi < oldWords.length || ni < newWords.length) {
+    if (oi >= oldWords.length) {
+      segments.push({ value: newWords.slice(ni).join(''), type: 'insert' })
+      break
+    }
+    if (ni >= newWords.length) {
+      segments.push({ value: oldWords.slice(oi).join(''), type: 'delete' })
+      break
+    }
+
+    if (oldWords[oi] === newWords[ni]) {
+      const last = segments[segments.length - 1]
+      if (last?.type === 'normal') {
+        last.value += oldWords[oi]!
+      } else {
+        segments.push({ value: oldWords[oi]!, type: 'normal' })
+      }
+      oi++
+      ni++
+    } else {
+      let foundSync = false
+
+      for (let look = 1; look <= 3 && ni + look < newWords.length; look++) {
+        if (newWords[ni + look] === oldWords[oi]) {
+          segments.push({ value: newWords.slice(ni, ni + look).join(''), type: 'insert' })
+          ni += look
+          foundSync = true
+          break
+        }
+      }
+
+      if (!foundSync) {
+        for (let look = 1; look <= 3 && oi + look < oldWords.length; look++) {
+          if (oldWords[oi + look] === newWords[ni]) {
+            segments.push({ value: oldWords.slice(oi, oi + look).join(''), type: 'delete' })
+            oi += look
+            foundSync = true
+            break
+          }
+        }
+      }
+
+      if (!foundSync) {
+        segments.push({ value: oldWords[oi]!, type: 'delete' })
+        segments.push({ value: newWords[ni]!, type: 'insert' })
+        oi++
+        ni++
+      }
+    }
+  }
+
+  const merged: DiffLineSegment[] = []
+  for (const seg of segments) {
+    const last = merged[merged.length - 1]
+    if (last?.type === seg.type) {
+      last.value += seg.value
+    } else {
+      merged.push({ ...seg })
+    }
+  }
+
+  return merged
+}
+
+function changeToLine(change: RawChange): DiffLine {
+  return {
+    type: change.type,
+    oldLineNumber: change.oldLineNumber,
+    newLineNumber: change.newLineNumber,
+    lineNumber: change.lineNumber,
+    content: [{ value: change.content, type: 'normal' }],
+  }
+}
+
+function mergeAdjacentLines(changes: RawChange[], options: ParseOptions): DiffLine[] {
+  const out: DiffLine[] = []
+
+  for (let i = 0; i < changes.length; i++) {
+    const current = changes[i]!
+    const next = changes[i + 1]
+
+    if (
+      next &&
+      current.type === 'delete' &&
+      next.type === 'insert' &&
+      isSimilarEnough(current.content, next.content, options.maxChangeRatio)
+    ) {
+      out.push({
+        type: 'normal',
+        oldLineNumber: current.lineNumber,
+        newLineNumber: next.lineNumber,
+        content: buildInlineDiffSegments(current.content, next.content, options),
+      })
+      i++
+    } else {
+      out.push(changeToLine(current))
+    }
+  }
+
+  return out
+}
+
+export function parseUnifiedDiff(
+  diffText: string,
+  options: Partial<ParseOptions> = {},
+): FileDiff[] {
+  const opts = { ...defaultOptions, ...options }
+  const files: FileDiff[] = []
+
+  const lines = diffText.split('\n')
+  let currentFile: FileDiff | null = null
+  let currentHunk: {
+    changes: RawChange[]
+    oldStart: number
+    oldLines: number
+    newStart: number
+    newLines: number
+    content: string
+  } | null = null
+  let oldLine = 0
+  let newLine = 0
+
+  // Track old path from --- line to detect /dev/null (new/deleted files)
+  let lastOldPath = ''
+
+  for (const line of lines) {
+    if (line.startsWith('---')) {
+      if (currentHunk && currentFile) {
+        const hunk = processHunk(currentHunk, opts)
+        currentFile.hunks.push(hunk)
+      }
+      currentHunk = null
+      const oldMatch = line.match(/^--- (?:a\/)?(.*)/)
+      lastOldPath = oldMatch?.[1]?.trimEnd() ?? ''
+      continue
+    }
+
+    if (line.startsWith('+++')) {
+      const match = line.match(/^\+\+\+ (?:b\/)?(.*)/)
+      const path = match?.[1]?.trimEnd() ?? ''
+
+      if (currentFile && currentHunk) {
+        const hunk = processHunk(currentHunk, opts)
+        currentFile.hunks.push(hunk)
+        files.push(currentFile)
+      } else if (currentFile) {
+        files.push(currentFile)
+      }
+
+      // Determine file type from --- / +++ paths:
+      // /dev/null in the old path means a new file; in the new path means deleted
+      let fileType: FileDiff['type'] = 'modify'
+      if (lastOldPath === '/dev/null') fileType = 'add'
+      else if (path === '/dev/null') fileType = 'delete'
+
+      currentFile = {
+        oldPath: lastOldPath === '/dev/null' ? path : lastOldPath || path,
+        newPath: path,
+        type: fileType,
+        hunks: [],
+      }
+      currentHunk = null
+      lastOldPath = ''
+      continue
+    }
+
+    const hunkMatch = line.match(/^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@(.*)/)
+    if (hunkMatch) {
+      if (currentHunk && currentFile) {
+        const hunk = processHunk(currentHunk, opts)
+        currentFile.hunks.push(hunk)
+      }
+
+      oldLine = parseInt(hunkMatch[1]!, 10)
+      newLine = parseInt(hunkMatch[3]!, 10)
+
+      currentHunk = {
+        changes: [],
+        oldStart: oldLine,
+        oldLines: parseInt(hunkMatch[2] ?? '1', 10),
+        newStart: newLine,
+        newLines: parseInt(hunkMatch[4] ?? '1', 10),
+        content: line,
+      }
+      continue
+    }
+
+    if (line.startsWith('diff ') || line.startsWith('index ') || line.startsWith('\\')) {
+      continue
+    }
+
+    if (currentHunk) {
+      if (line.startsWith('+')) {
+        currentHunk.changes.push({
+          type: 'insert',
+          content: line.slice(1),
+          lineNumber: newLine,
+          newLineNumber: newLine,
+        })
+        newLine++
+      } else if (line.startsWith('-')) {
+        currentHunk.changes.push({
+          type: 'delete',
+          content: line.slice(1),
+          lineNumber: oldLine,
+          oldLineNumber: oldLine,
+        })
+        oldLine++
+      } else if (line.startsWith(' ') || line === '') {
+        currentHunk.changes.push({
+          type: 'normal',
+          content: line.slice(1) || '',
+          oldLineNumber: oldLine,
+          newLineNumber: newLine,
+          isNormal: true,
+        })
+        oldLine++
+        newLine++
+      }
+    }
+  }
+
+  if (currentHunk && currentFile) {
+    const hunk = processHunk(currentHunk, opts)
+    currentFile.hunks.push(hunk)
+  }
+  if (currentFile) {
+    files.push(currentFile)
+  }
+
+  return files
+}
+
+function processHunk(
+  raw: {
+    changes: RawChange[]
+    oldStart: number
+    oldLines: number
+    newStart: number
+    newLines: number
+    content: string
+  },
+  options: ParseOptions,
+): DiffHunk {
+  const lines = options.mergeModifiedLines
+    ? mergeAdjacentLines(raw.changes, options)
+    : raw.changes.map(changeToLine)
+
+  return {
+    type: 'hunk',
+    content: raw.content,
+    oldStart: raw.oldStart,
+    oldLines: raw.oldLines,
+    newStart: raw.newStart,
+    newLines: raw.newLines,
+    lines,
+  }
+}
+
+export function insertSkipBlocks(hunks: DiffHunk[]): (DiffHunk | DiffSkipBlock)[] {
+  const result: (DiffHunk | DiffSkipBlock)[] = []
+  let lastHunkLine = 1
+
+  for (const hunk of hunks) {
+    const distanceToLastHunk = hunk.oldStart - lastHunkLine
+
+    if (distanceToLastHunk > 0) {
+      result.push({
+        type: 'skip',
+        count: distanceToLastHunk,
+        content: `${distanceToLastHunk} lines hidden`,
+      })
+    }
+
+    lastHunkLine = Math.max(hunk.oldStart + hunk.oldLines, lastHunkLine)
+    result.push(hunk)
+  }
+
+  return result
+}
+
+export function createDiff(
+  oldContent: string,
+  newContent: string,
+  filePath: string,
+  options: Partial<ParseOptions> = {},
+): FileDiff | null {
+  const diffText = createTwoFilesPatch(
+    `a/${filePath}`,
+    `b/${filePath}`,
+    oldContent,
+    newContent,
+    '',
+    '',
+    { context: 3 },
+  )
+
+  const files = parseUnifiedDiff(diffText, options)
+  return files[0] ?? null
+}
+
+export function countDiffStats(hunks: (DiffHunk | DiffSkipBlock)[]): {
+  additions: number
+  deletions: number
+} {
+  let additions = 0
+  let deletions = 0
+
+  for (const hunk of hunks) {
+    if (hunk.type === 'hunk') {
+      for (const line of hunk.lines) {
+        if (line.type === 'insert') additions++
+        else if (line.type === 'delete') deletions++
+        else if (line.type === 'normal') {
+          // Merged modified lines have type 'normal' but contain inline
+          // insert/delete segments. Count them as both an addition and deletion.
+          const hasInlineChanges = line.content.some(
+            seg => seg.type === 'insert' || seg.type === 'delete',
+          )
+          if (hasInlineChanges) {
+            additions++
+            deletions++
+          }
+        }
+      }
+    }
+  }
+
+  return { additions, deletions }
+}
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index b12fe604a..c797b2577 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -58,6 +58,11 @@ const allowedWarnings: RegExp[] = [
   // vue-i18n logs this when <i18n-t> is used outside a component-scoped i18n;
   // it falls back to the global scope and still renders correctly.
   /\[intlify\] Not found parent scope/,
+  // mountSuspended wraps each component instance and calls expose() after
+  // setup. For recursive components (e.g. DiffFileTree rendering child
+  // DiffFileTree instances), this triggers a duplicate expose() call on the
+  // inner wrapper. The warning does not affect test correctness.
+  /expose\(\) should be called only once/,
 ]
 
 beforeEach(() => {
@@ -195,6 +200,14 @@ import {
   UserAvatar,
   VersionSelector,
   ViewModeToggle,
+  DiffFileTree,
+  DiffHunk,
+  DiffLine,
+  DiffMobileSidebarDrawer,
+  DiffSidebarPanel,
+  DiffSkipBlock,
+  DiffTable,
+  DiffViewerPanel,
 } from '#components'
 
 // Server variant components must be imported directly to test the server-side render
@@ -2617,6 +2630,629 @@ describe('component accessibility audits', () => {
     })
   })
 
+  // Diff components
+  describe('DiffFileTree', () => {
+    const mockFiles = [
+      { path: 'src/index.ts', type: 'modified' as const },
+      { path: 'src/utils/helper.ts', type: 'added' as const },
+      { path: 'README.md', type: 'modified' as const },
+      { path: 'old-file.js', type: 'removed' as const },
+    ]
+
+    it('should have no accessibility violations with files', async () => {
+      const component = await mountSuspended(DiffFileTree, {
+        props: {
+          files: mockFiles,
+          selectedPath: null,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with selected file', async () => {
+      const component = await mountSuspended(DiffFileTree, {
+        props: {
+          files: mockFiles,
+          selectedPath: 'src/index.ts',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with empty files', async () => {
+      const component = await mountSuspended(DiffFileTree, {
+        props: {
+          files: [],
+          selectedPath: null,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('DiffLine', () => {
+    it('should have no accessibility violations for normal line', async () => {
+      const component = await mountSuspended(DiffLine, {
+        props: {
+          line: {
+            type: 'normal',
+            oldLineNumber: 1,
+            newLineNumber: 1,
+            content: [{ value: 'const x = 1;', type: 'normal' }],
+          },
+        },
+        global: {
+          provide: {
+            diffContext: {
+              fileStatus: computed(() => 'modify'),
+              language: computed(() => 'typescript'),
+              enableShiki: computed(() => false),
+              wordWrap: computed(() => false),
+            },
+          },
+        },
+        attachTo: (() => {
+          const table = document.createElement('table')
+          const tbody = document.createElement('tbody')
+          table.appendChild(tbody)
+          document.body.appendChild(table)
+          return tbody
+        })(),
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations for insert line', async () => {
+      const component = await mountSuspended(DiffLine, {
+        props: {
+          line: {
+            type: 'insert',
+            newLineNumber: 5,
+            content: [{ value: 'const newVar = true;', type: 'insert' }],
+          },
+        },
+        global: {
+          provide: {
+            diffContext: {
+              fileStatus: computed(() => 'modify'),
+              language: computed(() => 'typescript'),
+              enableShiki: computed(() => false),
+              wordWrap: computed(() => false),
+            },
+          },
+        },
+        attachTo: (() => {
+          const table = document.createElement('table')
+          const tbody = document.createElement('tbody')
+          table.appendChild(tbody)
+          document.body.appendChild(table)
+          return tbody
+        })(),
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations for delete line', async () => {
+      const component = await mountSuspended(DiffLine, {
+        props: {
+          line: {
+            type: 'delete',
+            oldLineNumber: 3,
+            content: [{ value: 'const oldVar = false;', type: 'delete' }],
+          },
+        },
+        global: {
+          provide: {
+            diffContext: {
+              fileStatus: computed(() => 'modify'),
+              language: computed(() => 'typescript'),
+              enableShiki: computed(() => false),
+              wordWrap: computed(() => false),
+            },
+          },
+        },
+        attachTo: (() => {
+          const table = document.createElement('table')
+          const tbody = document.createElement('tbody')
+          table.appendChild(tbody)
+          document.body.appendChild(table)
+          return tbody
+        })(),
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with word-level diff segments', async () => {
+      const component = await mountSuspended(DiffLine, {
+        props: {
+          line: {
+            type: 'insert',
+            newLineNumber: 10,
+            content: [
+              { value: 'const ', type: 'normal' },
+              { value: 'newName', type: 'insert' },
+              { value: ' = 1;', type: 'normal' },
+            ],
+          },
+        },
+        global: {
+          provide: {
+            diffContext: {
+              fileStatus: computed(() => 'modify'),
+              language: computed(() => 'typescript'),
+              enableShiki: computed(() => false),
+              wordWrap: computed(() => false),
+            },
+          },
+        },
+        attachTo: (() => {
+          const table = document.createElement('table')
+          const tbody = document.createElement('tbody')
+          table.appendChild(tbody)
+          document.body.appendChild(table)
+          return tbody
+        })(),
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('DiffHunk', () => {
+    const mockHunk = {
+      type: 'hunk' as const,
+      content: '@@ -1,5 +1,6 @@',
+      oldStart: 1,
+      oldLines: 5,
+      newStart: 1,
+      newLines: 6,
+      lines: [
+        {
+          type: 'normal' as const,
+          oldLineNumber: 1,
+          newLineNumber: 1,
+          content: [{ value: 'const a = 1;', type: 'normal' as const }],
+        },
+        {
+          type: 'delete' as const,
+          oldLineNumber: 2,
+          content: [{ value: 'const b = 2;', type: 'delete' as const }],
+        },
+        {
+          type: 'insert' as const,
+          newLineNumber: 2,
+          content: [{ value: 'const b = 3;', type: 'insert' as const }],
+        },
+      ],
+    }
+
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(DiffHunk, {
+        props: { hunk: mockHunk },
+        global: {
+          provide: {
+            diffContext: {
+              fileStatus: computed(() => 'modify'),
+              language: computed(() => 'typescript'),
+              enableShiki: computed(() => false),
+              wordWrap: computed(() => false),
+            },
+          },
+        },
+        attachTo: (() => {
+          const table = document.createElement('table')
+          const tbody = document.createElement('tbody')
+          table.appendChild(tbody)
+          document.body.appendChild(table)
+          return tbody
+        })(),
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('DiffSkipBlock', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(DiffSkipBlock, {
+        props: {
+          count: 25,
+        },
+        attachTo: (() => {
+          const table = document.createElement('table')
+          const tbody = document.createElement('tbody')
+          table.appendChild(tbody)
+          document.body.appendChild(table)
+          return tbody
+        })(),
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with custom content', async () => {
+      const component = await mountSuspended(DiffSkipBlock, {
+        props: {
+          count: 50,
+          content: '50 unchanged lines',
+        },
+        attachTo: (() => {
+          const table = document.createElement('table')
+          const tbody = document.createElement('tbody')
+          table.appendChild(tbody)
+          document.body.appendChild(table)
+          return tbody
+        })(),
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('DiffTable', () => {
+    const mockHunks = [
+      {
+        type: 'hunk' as const,
+        content: '@@ -1,3 +1,4 @@',
+        oldStart: 1,
+        oldLines: 3,
+        newStart: 1,
+        newLines: 4,
+        lines: [
+          {
+            type: 'normal' as const,
+            oldLineNumber: 1,
+            newLineNumber: 1,
+            content: [{ value: 'line 1', type: 'normal' as const }],
+          },
+          {
+            type: 'insert' as const,
+            newLineNumber: 2,
+            content: [{ value: 'new line', type: 'insert' as const }],
+          },
+        ],
+      },
+    ]
+
+    it('should have no accessibility violations for modify type', async () => {
+      const component = await mountSuspended(DiffTable, {
+        props: {
+          hunks: mockHunks,
+          type: 'modify',
+          fileName: 'test.ts',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations for add type', async () => {
+      const component = await mountSuspended(DiffTable, {
+        props: {
+          hunks: mockHunks,
+          type: 'add',
+          fileName: 'new-file.ts',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations for delete type', async () => {
+      const component = await mountSuspended(DiffTable, {
+        props: {
+          hunks: mockHunks,
+          type: 'delete',
+          fileName: 'removed.ts',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with skip blocks', async () => {
+      const hunksWithSkip = [
+        ...mockHunks,
+        { type: 'skip' as const, count: 20, content: '20 lines hidden' },
+        {
+          type: 'hunk' as const,
+          content: '@@ -25,3 +26,3 @@',
+          oldStart: 25,
+          oldLines: 3,
+          newStart: 26,
+          newLines: 3,
+          lines: [
+            {
+              type: 'normal' as const,
+              oldLineNumber: 25,
+              newLineNumber: 26,
+              content: [{ value: 'line 25', type: 'normal' as const }],
+            },
+          ],
+        },
+      ]
+      const component = await mountSuspended(DiffTable, {
+        props: {
+          hunks: hunksWithSkip,
+          type: 'modify',
+          fileName: 'large-file.ts',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with word wrap enabled', async () => {
+      const component = await mountSuspended(DiffTable, {
+        props: {
+          hunks: mockHunks,
+          type: 'modify',
+          fileName: 'test.ts',
+          wordWrap: true,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with empty hunks', async () => {
+      const component = await mountSuspended(DiffTable, {
+        props: {
+          hunks: [],
+          type: 'modify',
+          fileName: 'empty.ts',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('DiffSidebarPanel', () => {
+    const mockCompare = {
+      package: 'test-package',
+      from: '1.0.0',
+      to: '2.0.0',
+      packageJson: { from: {}, to: {} },
+      files: {
+        added: [{ path: 'new.ts', type: 'added' as const, newSize: 100 }],
+        removed: [{ path: 'old.ts', type: 'removed' as const, oldSize: 50 }],
+        modified: [{ path: 'changed.ts', type: 'modified' as const, oldSize: 200, newSize: 250 }],
+      },
+      dependencyChanges: [
+        {
+          name: 'lodash',
+          section: 'dependencies' as const,
+          from: '^4.0.0',
+          to: '^4.1.0',
+          type: 'updated' as const,
+          semverDiff: 'minor' as const,
+        },
+      ],
+      stats: {
+        totalFilesFrom: 10,
+        totalFilesTo: 11,
+        filesAdded: 1,
+        filesRemoved: 1,
+        filesModified: 1,
+      },
+      meta: {},
+    }
+
+    const mockAllChanges = [
+      { path: 'new.ts', type: 'added' as const, newSize: 100 },
+      { path: 'old.ts', type: 'removed' as const, oldSize: 50 },
+      { path: 'changed.ts', type: 'modified' as const, oldSize: 200, newSize: 250 },
+    ]
+
+    const mockGroupedDeps = new Map([
+      [
+        'dependencies',
+        [
+          {
+            name: 'lodash',
+            section: 'dependencies' as const,
+            from: '^4.0.0',
+            to: '^4.1.0',
+            type: 'updated' as const,
+            semverDiff: 'minor' as const,
+          },
+        ],
+      ],
+    ])
+
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(DiffSidebarPanel, {
+        props: {
+          compare: mockCompare,
+          groupedDeps: mockGroupedDeps,
+          allChanges: mockAllChanges,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with selected file', async () => {
+      const component = await mountSuspended(DiffSidebarPanel, {
+        props: {
+          compare: mockCompare,
+          groupedDeps: mockGroupedDeps,
+          allChanges: mockAllChanges,
+          selectedFile: mockAllChanges[0],
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with file filter', async () => {
+      const component = await mountSuspended(DiffSidebarPanel, {
+        props: {
+          compare: mockCompare,
+          groupedDeps: mockGroupedDeps,
+          allChanges: mockAllChanges,
+          fileFilter: 'added',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with warnings', async () => {
+      const compareWithWarnings = {
+        ...mockCompare,
+        meta: { warnings: ['Some files were truncated'] },
+      }
+      const component = await mountSuspended(DiffSidebarPanel, {
+        props: {
+          compare: compareWithWarnings,
+          groupedDeps: mockGroupedDeps,
+          allChanges: mockAllChanges,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with no dependency changes', async () => {
+      const compareNoDeps = {
+        ...mockCompare,
+        dependencyChanges: [],
+      }
+      const component = await mountSuspended(DiffSidebarPanel, {
+        props: {
+          compare: compareNoDeps,
+          groupedDeps: new Map(),
+          allChanges: mockAllChanges,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('DiffMobileSidebarDrawer', () => {
+    const mockCompare = {
+      package: 'test-package',
+      from: '1.0.0',
+      to: '2.0.0',
+      packageJson: { from: {}, to: {} },
+      files: {
+        added: [{ path: 'new.ts', type: 'added' as const, newSize: 100 }],
+        removed: [],
+        modified: [{ path: 'changed.ts', type: 'modified' as const, oldSize: 200, newSize: 250 }],
+      },
+      dependencyChanges: [],
+      stats: {
+        totalFilesFrom: 5,
+        totalFilesTo: 6,
+        filesAdded: 1,
+        filesRemoved: 0,
+        filesModified: 1,
+      },
+      meta: {},
+    }
+
+    const mockAllChanges = [
+      { path: 'new.ts', type: 'added' as const, newSize: 100 },
+      { path: 'changed.ts', type: 'modified' as const, oldSize: 200, newSize: 250 },
+    ]
+
+    it('should have no accessibility violations when closed', async () => {
+      const component = await mountSuspended(DiffMobileSidebarDrawer, {
+        props: {
+          compare: mockCompare,
+          groupedDeps: new Map(),
+          allChanges: mockAllChanges,
+          open: false,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when open', async () => {
+      const component = await mountSuspended(DiffMobileSidebarDrawer, {
+        props: {
+          compare: mockCompare,
+          groupedDeps: new Map(),
+          allChanges: mockAllChanges,
+          open: true,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('DiffViewerPanel', () => {
+    const mockFile = {
+      path: 'src/index.ts',
+      type: 'modified' as const,
+      oldSize: 500,
+      newSize: 600,
+    }
+
+    // Note: DiffViewerPanel fetches content from CDN, so we test the initial/loading states
+    // Full diff rendering tests would require mocking fetch
+
+    it('should have no accessibility violations in loading state', async () => {
+      const component = await mountSuspended(DiffViewerPanel, {
+        props: {
+          packageName: 'test-package',
+          fromVersion: '1.0.0',
+          toVersion: '2.0.0',
+          file: mockFile,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations for added file', async () => {
+      const addedFile = {
+        path: 'src/new-feature.ts',
+        type: 'added' as const,
+        newSize: 200,
+      }
+      const component = await mountSuspended(DiffViewerPanel, {
+        props: {
+          packageName: 'test-package',
+          fromVersion: '1.0.0',
+          toVersion: '2.0.0',
+          file: addedFile,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations for removed file', async () => {
+      const removedFile = {
+        path: 'src/deprecated.ts',
+        type: 'removed' as const,
+        oldSize: 300,
+      }
+      const component = await mountSuspended(DiffViewerPanel, {
+        props: {
+          packageName: 'test-package',
+          fromVersion: '1.0.0',
+          toVersion: '2.0.0',
+          file: removedFile,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('SizeIncrease', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(SizeIncrease, {