From 876254116f4198fb94974643463a6ac12b34d384 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 00:29:18 +0200
Subject: [PATCH 01/50] feat: add analyze client logic at size increase warning

---
 app/components/Package/SizeIncrease.vue       | 321 +++++++++++++++++-
 .../pkg-size/useAnalizeCauseWorker.ts         | 210 ++++++++++++
 app/composables/useNumberFormatter.ts         |  27 +-
 app/pages/package/[[org]]/[name].vue          |  15 +-
 .../pkg-size/analize-cause-client-worker.ts   |   5 +
 app/utils/pkg-size/analize-cause-worker.ts    | 191 +++++++++++
 app/utils/pkg-size/check-aborted.ts           |  13 +
 app/utils/pkg-size/db.ts                      | 135 ++++++++
 .../pkg-size/resolve-and-persist-graph.ts     | 195 +++++++++++
 app/utils/pkg-size/types.ts                   | 113 ++++++
 i18n/locales/en.json                          |  27 +-
 i18n/locales/es.json                          |  27 +-
 i18n/schema.json                              |  75 ++++
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  15 +-
 15 files changed, 1361 insertions(+), 9 deletions(-)
 create mode 100644 app/composables/pkg-size/useAnalizeCauseWorker.ts
 create mode 100644 app/utils/pkg-size/analize-cause-client-worker.ts
 create mode 100644 app/utils/pkg-size/analize-cause-worker.ts
 create mode 100644 app/utils/pkg-size/check-aborted.ts
 create mode 100644 app/utils/pkg-size/db.ts
 create mode 100644 app/utils/pkg-size/resolve-and-persist-graph.ts
 create mode 100644 app/utils/pkg-size/types.ts

diff --git a/app/components/Package/SizeIncrease.vue b/app/components/Package/SizeIncrease.vue
index b35e4b48d7..0c5801e33e 100644
--- a/app/components/Package/SizeIncrease.vue
+++ b/app/components/Package/SizeIncrease.vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
 import type { InstallSizeDiff } from '~/composables/useInstallSizeDiff'
+import { useAnalyzeCauseWorker } from '~/composables/pkg-size/useAnalizeCauseWorker'
+import { computed } from 'vue'
 
 const props = defineProps<{
   diff: InstallSizeDiff
+  packageName: string
+  version?: string | null
+  comparedVersion?: string | null
 }>()
 
 const bytesFormatter = useBytesFormatter()
@@ -10,14 +15,34 @@ const numberFormatter = useNumberFormatter()
 const percentFormatter = useNumberFormatter({ style: 'percent' })
 
 const sizePercent = computed(() => percentFormatter.value.format(Math.abs(props.diff.sizeRatio)))
+
+const useVersion = computed(() => {
+  return props.version
+})
+const useComparedVersion = computed(() => {
+  return props.diff.comparisonVersion
+})
+
+const {
+  available,
+  analyzing,
+  cancelling,
+  loading,
+  result,
+  summary,
+  noResultScroll,
+  allDependencies,
+  startAnalyzeCause,
+  cancelAnalyzeCause,
+} = useAnalyzeCauseWorker(props.packageName, useVersion, useComparedVersion)
 </script>
 
 <template>
   <div
-    class="border border-amber-600/40 bg-amber-500/10 rounded-lg px-3 py-2 text-base text-amber-800 dark:text-amber-400"
+    class="border border-amber-600/40 bg-amber-500/10 rounded-lg px-3 py-2 text-base text-amber-800 dark:text-amber-400 of-hidden"
   >
     <h2 class="font-medium mb-1 flex items-center gap-2">
-      <span class="i-lucide:trending-up w-4 h-4" aria-hidden="true" />
+      <span class="i-lucide:trending-up w-4 h-4 shrink-0" aria-hidden="true" />
       {{
         diff.sizeThresholdExceeded && diff.depThresholdExceeded
           ? $t('package.size_increase.title_both', { version: diff.comparisonVersion })
@@ -26,6 +51,7 @@ const sizePercent = computed(() => percentFormatter.value.format(Math.abs(props.
             : $t('package.size_increase.title_deps', { version: diff.comparisonVersion })
       }}
     </h2>
+
     <p class="text-sm m-0 mt-1">
       <i18n-t v-if="diff.sizeThresholdExceeded" keypath="package.size_increase.size" scope="global">
         <template #percent
@@ -42,5 +68,296 @@ const sizePercent = computed(() => percentFormatter.value.format(Math.abs(props.
         >
       </i18n-t>
     </p>
+
+    <div class="mt-3 flex flex-col gap-3">
+      <div class="flex justify-start">
+        <button
+          type="button"
+          :disabled="!available || cancelling"
+          class="border border-amber-600/40 bg-amber-500/10 hover:bg-amber-500/20 rounded-md inline-flex items-center gap-1.5 text-xs font-medium text-amber-900 dark:text-amber-300 px-3 py-1.5 transition-all duration-200 ease-out focus-visible:outline-amber-600 disabled:opacity-50 disabled:cursor-not-allowed overflow-hidden"
+          @click="analyzing ? cancelAnalyzeCause() : startAnalyzeCause()"
+        >
+          <span class="inline-flex items-center gap-1.5">
+            <span
+              v-if="loading || analyzing || cancelling"
+              class="i-lucide:loader-2 animate-spin w-3.5 h-3.5 shrink-0 transition-opacity duration-150"
+              aria-hidden="true"
+            />
+
+            <span
+              v-if="analyzing && !cancelling"
+              class="i-lucide:square w-3 h-3 fill-current shrink-0"
+              aria-hidden="true"
+            />
+
+            <span>
+              {{
+                cancelling
+                  ? $t('package.size_increase.analyze.cancelling')
+                  : analyzing
+                    ? $t('package.size_increase.analyze.cancel')
+                    : $t('package.size_increase.analyze.analyze')
+              }}
+            </span>
+          </span>
+        </button>
+      </div>
+
+      <Transition name="expand">
+        <div v-if="summary && result && result.length > 0" class="flex flex-col">
+          <!-- SUMMARY -->
+          <div class="border-t border-amber-600/20 pt-3 flex flex-col gap-1">
+            <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
+              📦
+              <i18n-t keypath="package.size_increase.analyze.summary.total_size" scope="global">
+                <template #size>{{ summary.sizeDeltaText }}</template>
+                <template #bytes>
+                  <i18n-t keypath="package.size_increase.analyze.summary.bytes" scope="global">
+                    <template #bytes>{{
+                      summary.sizeDeltaBytesText || summary.sizeDelta
+                    }}</template>
+                  </i18n-t>
+                </template>
+              </i18n-t>
+            </p>
+            <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
+              🧠
+              <i18n-t keypath="package.size_increase.analyze.summary.js_core_size" scope="global">
+                <template #size>{{ summary.mandatorySizeDeltaText }}</template>
+                <template #bytes>
+                  <i18n-t keypath="package.size_increase.analyze.summary.bytes" scope="global">
+                    <template #bytes>{{
+                      summary.mandatorySizeDeltaBytesText || summary.mandatorySizeDelta
+                    }}</template>
+                  </i18n-t>
+                </template>
+              </i18n-t>
+            </p>
+            <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
+              🧩
+              <i18n-t keypath="package.size_increase.analyze.summary.deps_variation" scope="global">
+                <template #net>{{
+                  summary.netDependenciesText ||
+                  (summary.netDependencies > 0
+                    ? `+${summary.netDependencies}`
+                    : summary.netDependencies)
+                }}</template>
+                <template #details>
+                  <i18n-t
+                    keypath="package.size_increase.analyze.summary.deps_details"
+                    scope="global"
+                  >
+                    <template #added>{{ summary.added }}</template>
+                    <template #removed>{{ summary.removed }}</template>
+                  </i18n-t>
+                </template>
+              </i18n-t>
+            </p>
+          </div>
+
+          <!-- DIFF BALANCE -->
+          <details class="group border-t border-amber-600/20 mt-3 pt-3 pb-1">
+            <summary
+              class="flex items-center gap-2 cursor-pointer text-sm font-medium text-amber-900 dark:text-amber-400 select-none hover:text-amber-700 dark:hover:text-amber-200 focus-visible:outline-amber-600 rounded transition-colors duration-150"
+            >
+              <span
+                class="i-lucide:chevron-right icon-rtl w-4 h-4 shrink-0 transition-transform duration-200 group-open:rotate-90 rtl:group-open:-rotate-90"
+                aria-hidden="true"
+              />
+              {{ $t('package.size_increase.analyze.diff') }}
+            </summary>
+
+            <div class="mt-3">
+              <div
+                class="flex items-center justify-start gap-1.5 mb-2 pb-2 border-b border-amber-600/10"
+              >
+                <button
+                  type="button"
+                  @click="allDependencies = !allDependencies"
+                  class="inline-flex items-center gap-1 text-xs uppercase font-bold tracking-wider text-amber-900 dark:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-600/20 px-2 py-1 rounded transition-colors focus-visible:outline-amber-600"
+                >
+                  <span
+                    :class="allDependencies ? 'i-lucide:list-filter' : 'i-lucide:list-tree'"
+                    class="w-3 h-3 shrink-0"
+                    aria-hidden="true"
+                  />
+                  <span>{{
+                    allDependencies
+                      ? $t('package.size_increase.analyze.only_deps')
+                      : $t('package.size_increase.analyze.all_deps')
+                  }}</span>
+                </button>
+
+                <button
+                  type="button"
+                  @click="noResultScroll = !noResultScroll"
+                  class="inline-flex items-center gap-1 text-xs uppercase font-bold tracking-wider text-amber-900 dark:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-600/20 px-2 py-1 rounded transition-colors focus-visible:outline-amber-600"
+                >
+                  <span
+                    :class="noResultScroll ? 'i-lucide:minimize-2' : 'i-lucide:maximize-2'"
+                    class="w-3 h-3 shrink-0"
+                    aria-hidden="true"
+                  />
+                  <span>{{
+                    noResultScroll
+                      ? $t('package.size_increase.analyze.collapse')
+                      : $t('package.size_increase.analyze.expand')
+                  }}</span>
+                </button>
+              </div>
+
+              <div
+                class="custom-scrollbar pe-1 transition-all duration-300"
+                :class="{ 'overflow-y-auto max-h-[216px]': !noResultScroll }"
+              >
+                <ul class="flex flex-col gap-1.5 m-0 p-0 list-none pe-1">
+                  <li
+                    v-for="(item, index) in result"
+                    :key="index"
+                    class="flex flex-wrap items-center justify-between gap-2 py-1.5 px-2 rounded-md bg-amber-500/5 hover:bg-amber-500/10 transition-colors border border-amber-600/10"
+                  >
+                    <div class="flex items-center gap-2.5">
+                      <abbr
+                        :title="item.statusText || item.status"
+                        class="flex shrink-0 items-center justify-center w-6 h-6 rounded border no-underline cursor-help"
+                        :class="{
+                          'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border-emerald-500/20':
+                            item.status === 'added',
+                          'bg-rose-500/10 text-rose-700 dark:text-rose-400 border-rose-500/20':
+                            item.status === 'removed',
+                          'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20':
+                            item.status === 'changed',
+                        }"
+                      >
+                        <span
+                          v-if="item.status === 'added'"
+                          class="i-lucide:plus w-3.5 h-3.5 shrink-0"
+                          aria-hidden="true"
+                        />
+                        <span
+                          v-else-if="item.status === 'removed'"
+                          class="i-lucide:minus w-3.5 h-3.5 shrink-0"
+                          aria-hidden="true"
+                        />
+                        <span
+                          v-else-if="item.status === 'changed'"
+                          class="i-lucide:arrow-left-right w-3.5 h-3.5 shrink-0"
+                          aria-hidden="true"
+                        />
+                      </abbr>
+
+                      <span
+                        class="font-mono text-2xs font-semibold text-amber-900 dark:text-amber-300 break-all"
+                      >
+                        {{ item.name }}
+                      </span>
+                    </div>
+
+                    <div class="flex items-center gap-1.5 ms-auto shrink-0">
+                      <template v-if="item.status === 'changed' && item.v1 && item.v2">
+                        <span
+                          class="font-mono text-2xs line-through text-amber-700/80 dark:text-amber-500/80"
+                        >
+                          {{ item.v1.version }}
+                        </span>
+                        <span
+                          class="i-lucide:arrow-right w-3.5 h-3.5 shrink-0 text-amber-700/60 rtl:rotate-180"
+                        />
+                        <span
+                          class="font-mono text-2xs font-bold text-amber-900 dark:text-amber-300"
+                        >
+                          {{ item.v2.version }}
+                        </span>
+                      </template>
+                      <template v-else>
+                        <span
+                          class="font-mono text-2xs font-medium text-amber-900 dark:text-amber-300"
+                        >
+                          {{ (item.v2 || item.v1)?.version }}
+                        </span>
+                      </template>
+
+                      <span class="text-amber-600/40 mx-1 shrink-0">|</span>
+
+                      <span
+                        class="font-mono text-2xs font-bold min-w-14 text-end shrink-0"
+                        :class="{
+                          'text-emerald-700 dark:text-emerald-400': item.status === 'removed',
+                          'text-rose-700 dark:text-rose-400': item.status === 'added',
+                          'text-amber-800 dark:text-amber-400': item.status === 'changed',
+                        }"
+                      >
+                        {{ item.sizeDeltaText }}
+                      </span>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </details>
+        </div>
+      </Transition>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.expand-enter-active,
+.expand-leave-active {
+  transition:
+    max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.25s ease-in-out;
+  overflow: hidden;
+  opacity: 1;
+  max-height: 800px; /* Altura máxima segura de despliegue para la transición */
+}
+
+.expand-enter-from,
+.expand-leave-to {
+  max-height: 0;
+  opacity: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+details[dir='rtl']:not([open]) .icon-rtl {
+  transform: scale(-1, 1);
+}
+summary {
+  list-style: none;
+}
+summary::-webkit-details-marker {
+  display: none;
+}
+
+.custom-scrollbar {
+  scrollbar-width: auto;
+  scrollbar-color: rgba(217, 119, 6, 0.3) transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(217, 119, 6, 0.3);
+  border-radius: 10px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(217, 119, 6, 0.5);
+}
+
+:global(.dark) .custom-scrollbar {
+  scrollbar-color: rgba(251, 191, 36, 0.3) transparent;
+}
+:global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(251, 191, 36, 0.3);
+}
+:global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(251, 191, 36, 0.5);
+}
+</style>
diff --git a/app/composables/pkg-size/useAnalizeCauseWorker.ts b/app/composables/pkg-size/useAnalizeCauseWorker.ts
new file mode 100644
index 0000000000..b241663498
--- /dev/null
+++ b/app/composables/pkg-size/useAnalizeCauseWorker.ts
@@ -0,0 +1,210 @@
+import type { AnalyzeWorkerResponse, UIDiffResult, UISummary } from '~/utils/pkg-size/types'
+import { shallowRef, onMounted, onUnmounted } from 'vue'
+import { useThrottleFn } from '@vueuse/core'
+import { useBytesFormatter, useNumberFormatter } from '~/composables/useNumberFormatter'
+
+export function useAnalyzeCauseWorker(
+  packageName: string,
+  version: ComputedRef<string | undefined | null>,
+  comparedVersion: ComputedRef<string | undefined | null>,
+) {
+  const analyzing = shallowRef(false)
+  const available = shallowRef(false)
+  const loading = shallowRef(true)
+  const cancelling = shallowRef(false)
+  const noResultScroll = shallowRef(false)
+  const allDependencies = shallowRef(true)
+
+  const rawResult = shallowRef<UIDiffResult[]>([])
+  const result = computed(() => {
+    const all = allDependencies.value
+    const raw = rawResult.value
+    if (all || raw.length === 0) {
+      return raw
+    }
+    return raw.filter(v => !v.isOptional)
+  })
+  const summary = shallowRef<UISummary | undefined>()
+  const error = shallowRef<string | null>(null)
+
+  let startAnalyzeCause: () => void = () => {}
+  let cancelAnalyzeCause: () => void = () => {}
+
+  if (import.meta.server) {
+    return {
+      available,
+      analyzing,
+      cancelling,
+      loading,
+      result,
+      noResultScroll,
+      allDependencies,
+      summary,
+      error,
+      startAnalyzeCause,
+      cancelAnalyzeCause,
+    }
+  }
+
+  let worker: Worker | undefined
+  let currentId = 0
+
+  const bytesFormatter = useBytesFormatter()
+  const rawBytesFormatter = useNumberFormatter()
+
+  startAnalyzeCause = useThrottleFn(
+    async () => {
+      if (!worker || !available.value || analyzing.value) {
+        return
+      }
+
+      analyzing.value = true
+      currentId++
+      cancelling.value = false
+      error.value = null
+      summary.value = undefined
+      rawResult.value = []
+
+      await new Promise(resolve => setTimeout(resolve, 256))
+
+      worker.postMessage({
+        type: 'analyze-cause',
+        id: currentId,
+        packageName,
+        fromVersion: comparedVersion.value,
+        toVersion: version.value,
+        ignoreOptional: false,
+      })
+    },
+    256,
+    false,
+    true,
+  )
+
+  cancelAnalyzeCause = useThrottleFn(
+    async () => {
+      if (!worker || !analyzing.value || cancelling.value) {
+        return
+      }
+
+      cancelling.value = true
+
+      await new Promise(resolve => setTimeout(resolve, 256))
+
+      worker.postMessage({
+        type: 'analyze-cause-abort',
+        id: currentId,
+      })
+    },
+    256,
+    false,
+    true,
+  )
+
+  async function handleWorkerMessage(event: MessageEvent<AnalyzeWorkerResponse>) {
+    const msg = event.data
+
+    if (msg.id !== currentId) {
+      return
+    }
+
+    switch (msg.type) {
+      case 'sessions':
+        break
+      case 'result':
+        await new Promise(resolve => setTimeout(resolve, 1_000))
+        rawResult.value = msg.result.map(
+          r =>
+            Object.assign(r, {
+              v1: r.v1 ? { ...r.v1, sizeText: bytesFormatter.format(r.v1.size) } : null,
+              v2: r.v2 ? { ...r.v2, sizeText: bytesFormatter.format(r.v2.size) } : null,
+              statusText: bytesFormatter.t(`package.size_increase.analyze.status.${r.status}`),
+              sizeDeltaText: bytesFormatter.format(r.sizeDelta),
+            }) as UIDiffResult,
+        )
+        summary.value = Object.assign(msg.summary, {
+          sizeDeltaText: bytesFormatter.format(msg.summary.sizeDelta),
+          sizeDeltaBytesText: rawBytesFormatter.value.format(msg.summary.sizeDelta),
+          mandatorySizeDeltaText: bytesFormatter.format(msg.summary.mandatorySizeDelta),
+          mandatorySizeDeltaBytesText: rawBytesFormatter.value.format(
+            msg.summary.mandatorySizeDelta,
+          ),
+          netDependenciesText: `${msg.summary.netDependencies > 0 ? '+' : ''}${rawBytesFormatter.value.format(msg.summary.netDependencies)}`,
+          addedText: rawBytesFormatter.value.format(msg.summary.added),
+          removedText: rawBytesFormatter.value.format(msg.summary.removed),
+        })
+        analyzing.value = false
+        cancelling.value = false
+        const totalDeltaMB = (msg.summary.sizeDelta / (1024 * 1024)).toFixed(2)
+        const jsDeltaMB = (msg.summary.mandatorySizeDelta / (1024 * 1024)).toFixed(2)
+
+        console.log(`📊 FINAL DIFF BALANCE:`)
+        console.log(
+          `📦 Size variation (Total): ${totalDeltaMB} MB (${msg.summary.sizeDelta} bytes)`,
+        )
+        console.log(
+          `🧠 Size variation (JS Core): ${jsDeltaMB} MB (${msg.summary.mandatorySizeDelta} bytes)`,
+        )
+        console.log(
+          `🧩 Dependency variation: ${msg.summary.netDependencies > 0 ? '+' : ''}${msg.summary.netDependencies} (Added: ${msg.summary.added}, Removed: ${msg.summary.removed})`,
+        )
+        break
+      case 'error':
+        error.value = msg.message
+        analyzing.value = false
+        cancelling.value = false
+        break
+      case 'aborting':
+        cancelling.value = true
+        break
+      case 'aborted':
+        analyzing.value = false
+        cancelling.value = false
+        break
+    }
+  }
+
+  onMounted(async () => {
+    try {
+      const module = await import('~/utils/pkg-size/analize-cause-client-worker')
+      worker = module.worker
+
+      worker.addEventListener('message', handleWorkerMessage)
+      available.value = true
+    } catch (err) {
+      // oxlint-disable-next-line no-console
+      console.error('cannot load worker', err)
+      available.value = false
+    } finally {
+      loading.value = false
+    }
+
+    watch(
+      [version, comparedVersion],
+      ([v1, v2]) => {
+        available.value = !!v1 && !!v2 && !!worker
+      },
+      { immediate: true, flush: 'post' },
+    )
+  })
+
+  onUnmounted(() => {
+    if (worker) {
+      worker.removeEventListener('message', handleWorkerMessage)
+    }
+  })
+
+  return {
+    available,
+    analyzing,
+    cancelling,
+    loading,
+    result,
+    noResultScroll,
+    allDependencies,
+    summary,
+    error,
+    startAnalyzeCause,
+    cancelAnalyzeCause,
+  }
+}
diff --git a/app/composables/useNumberFormatter.ts b/app/composables/useNumberFormatter.ts
index a375bc0431..5b4245d564 100644
--- a/app/composables/useNumberFormatter.ts
+++ b/app/composables/useNumberFormatter.ts
@@ -20,15 +20,38 @@ export const useBytesFormatter = () => {
   const MB = 1000 * 1000
 
   return {
+    t,
     format: (bytes: number) => {
-      if (bytes < KB)
+      if (bytes >= 0) {
+        if (bytes < KB) {
+          return t('package.size.b', {
+            size: decimalNumberFormatter.value.format(bytes),
+          })
+        }
+        if (bytes < MB) {
+          return t('package.size.kb', {
+            size: decimalNumberFormatter.value.format(bytes / KB),
+          })
+        }
+
+        return t('package.size.mb', {
+          size: decimalNumberFormatter.value.format(bytes / MB),
+        })
+      }
+
+      const v = Math.abs(bytes)
+
+      if (v < KB) {
         return t('package.size.b', {
           size: decimalNumberFormatter.value.format(bytes),
         })
-      if (bytes < MB)
+      }
+      if (v < MB) {
         return t('package.size.kb', {
           size: decimalNumberFormatter.value.format(bytes / KB),
         })
+      }
+
       return t('package.size.mb', {
         size: decimalNumberFormatter.value.format(bytes / MB),
       })
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 23de9e3b0b..5b546fc500 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -205,7 +205,12 @@ const {
 } = usePackage(packageName, () => resolvedVersion.value ?? requestedVersion.value)
 
 const { data: licenseChangeData } = useLicenseChanges(packageName, resolvedVersion)
-const { diff: sizeDiff } = useInstallSizeDiff(packageName, resolvedVersion, pkg, installSize)
+const { diff: sizeDiff, comparisonVersion } = useInstallSizeDiff(
+  packageName,
+  resolvedVersion,
+  pkg,
+  installSize,
+)
 const { versions: commandPaletteVersions, ensureLoaded: ensureCommandPaletteVersionsLoaded } =
   useCommandPalettePackageVersions(packageName)
 
@@ -920,7 +925,13 @@ const showSkeleton = shallowRef(false)
             :replacement="moduleReplacement.replacement"
           />
           <!-- Size / dependency increase notice -->
-          <PackageSizeIncrease v-if="sizeDiff?.direction === 'increase'" :diff="sizeDiff" />
+          <PackageSizeIncrease
+            v-if="sizeDiff?.direction === 'increase'"
+            :diff="sizeDiff"
+            :package-name="packageName"
+            :version="resolvedVersion"
+            :compared-version="comparisonVersion"
+          />
           <!-- Size / dependency decrease celebration -->
           <PackageSizeDecrease v-else-if="sizeDiff?.direction === 'decrease'" :diff="sizeDiff" />
           <!-- Vulnerability scan -->
diff --git a/app/utils/pkg-size/analize-cause-client-worker.ts b/app/utils/pkg-size/analize-cause-client-worker.ts
new file mode 100644
index 0000000000..e95fd5666b
--- /dev/null
+++ b/app/utils/pkg-size/analize-cause-client-worker.ts
@@ -0,0 +1,5 @@
+import Worker from '~/utils/pkg-size/analize-cause-worker?worker'
+
+export const worker = new Worker({
+  name: 'NpmxPkgSizeAnalyseCauseWorker',
+})
diff --git a/app/utils/pkg-size/analize-cause-worker.ts b/app/utils/pkg-size/analize-cause-worker.ts
new file mode 100644
index 0000000000..eaafb862ec
--- /dev/null
+++ b/app/utils/pkg-size/analize-cause-worker.ts
@@ -0,0 +1,191 @@
+import type {
+  AnalysisSessionEntity,
+  AnalyzeCauseWorkerRequest,
+  AnalyzeWorkerResponse,
+  DiffResult,
+  PackageEntity,
+} from '~/utils/pkg-size/types'
+import { AbortedError, checkAborted } from '~/utils/pkg-size/check-aborted'
+import { db } from '~/utils/pkg-size/db'
+import { resolveAndPersistGraph } from '~/utils/pkg-size/resolve-and-persist-graph'
+
+let abortController: AbortController | undefined
+
+function post(msg: AnalyzeWorkerResponse) {
+  ;(self as unknown as Worker).postMessage(msg)
+}
+
+self.addEventListener('message', async (event: MessageEvent<AnalyzeCauseWorkerRequest>) => {
+  const msg = event.data
+
+  if (msg.type === 'analyze-cause-abort') {
+    if (abortController) {
+      abortController.abort()
+      post({ type: 'aborting', id: msg.id })
+    } else {
+      post({ type: 'aborted', id: msg.id })
+    }
+    return
+  }
+
+  if (msg.type !== 'analyze-cause') {
+    return
+  }
+
+  const { id, packageName, fromVersion, toVersion, ignoreOptional = false } = msg
+
+  abortController = new AbortController()
+
+  const keys = {
+    fromVersion: `${packageName}@${fromVersion}`,
+    toVersion: `${packageName}@${toVersion}`,
+  }
+
+  try {
+    const existing = (await db.getSessions([keys.fromVersion, keys.toVersion])) || []
+    const existingKeys = new Set(existing.map(s => s.rootKey))
+
+    const keysToInit: string[] = []
+    if (!existingKeys.has(keys.fromVersion)) {
+      keysToInit.push(keys.fromVersion)
+    }
+    if (!existingKeys.has(keys.toVersion)) {
+      keysToInit.push(keys.toVersion)
+    }
+
+    if (keysToInit.length > 0) {
+      await db.initSession(keysToInit)
+    }
+
+    post({ type: 'sessions', id, fromVersion, toVersion })
+
+    await Promise.all([
+      resolveAndPersistGraph(packageName, fromVersion, abortController),
+      resolveAndPersistGraph(packageName, toVersion, abortController),
+    ])
+
+    await checkAborted(abortController)
+
+    const [session1, session2] = await Promise.all([
+      db.getSession(keys.fromVersion),
+      db.getSession(keys.toVersion),
+    ])
+
+    function getKeysForSession(session?: AnalysisSessionEntity) {
+      if (!session) {
+        return []
+      }
+      return ignoreOptional
+        ? [...session.resolvedPackageKeys]
+        : [...session.resolvedPackageKeys, ...(session.optionalPackageKeys || [])]
+    }
+
+    const keysV1 = getKeysForSession(session1)
+    const keysV2 = getKeysForSession(session2)
+
+    const packagesV1 =
+      keysV1.length > 0 ? await db.packages.where('id').anyOf(keysV1).toArray() : []
+    const packagesV2 =
+      keysV2.length > 0 ? await db.packages.where('id').anyOf(keysV2).toArray() : []
+
+    const optionalKeysV1 = new Set(session1?.optionalPackageKeys || [])
+    const optionalKeysV2 = new Set(session2?.optionalPackageKeys || [])
+
+    const mapV1 = buildFlatMap(packagesV1, optionalKeysV1)
+    const mapV2 = buildFlatMap(packagesV2, optionalKeysV2)
+
+    const result: DiffResult[] = []
+    const allPackageNames = new Set([...mapV1.keys(), ...mapV2.keys()])
+
+    for (const name of allPackageNames) {
+      const p1 = mapV1.get(name)
+      const p2 = mapV2.get(name)
+
+      if (!p1 && p2) {
+        result.push({
+          name,
+          status: 'added',
+          v1: null,
+          v2: p2,
+          sizeDelta: p2.size,
+          isOptional: p2.isOptional,
+        })
+      } else if (p1 && !p2) {
+        result.push({
+          name,
+          status: 'removed',
+          v1: p1,
+          v2: null,
+          sizeDelta: -p1.size,
+          isOptional: p1.isOptional,
+        })
+      }
+
+      // Los saltos de versión (changed) y los unchanged se ignoran usando el "machete"
+      // que acordamos para limpiar el ruido del Diff.
+    }
+
+    result.sort((a, b) => Math.abs(b.sizeDelta) - Math.abs(a.sizeDelta))
+
+    const sizeV1 = session1
+      ? session1.totalSize + (ignoreOptional ? 0 : session1.totalOptionalSize || 0)
+      : 0
+    const sizeV2 = session2
+      ? session2.totalSize + (ignoreOptional ? 0 : session2.totalOptionalSize || 0)
+      : 0
+    const trueSizeDelta = sizeV2 - sizeV1
+
+    const mandatorySizeV1 = session1?.totalSize || 0
+    const mandatorySizeV2 = session2?.totalSize || 0
+    const mandatorySizeDelta = mandatorySizeV2 - mandatorySizeV1
+
+    let addedCount = 0
+    let removedCount = 0
+    for (const { status } of result) {
+      if (status === 'added') {
+        addedCount++
+      }
+      if (status === 'removed') {
+        removedCount++
+      }
+    }
+
+    post({
+      type: 'result',
+      id,
+      result,
+      summary: {
+        sizeDelta: trueSizeDelta,
+        mandatorySizeDelta,
+        netDependencies: addedCount - removedCount,
+        added: addedCount,
+        removed: removedCount,
+      },
+    })
+  } catch (error) {
+    if (error instanceof AbortedError || abortController?.signal.aborted) {
+      post({ type: 'aborted', id })
+    } else {
+      post({ type: 'error', id, message: error instanceof Error ? error.message : String(error) })
+    }
+  }
+})
+
+function buildFlatMap(packages: PackageEntity[], optionalKeys: Set<string>) {
+  const map = new Map<string, { version: string; size: number; isOptional: boolean }>()
+
+  for (const pkg of packages) {
+    const isOptional = optionalKeys.has(pkg.id)
+
+    if (map.has(pkg.name)) {
+      const existing = map.get(pkg.name)!
+      existing.version = `${existing.version} + ${pkg.version}`
+      existing.size += pkg.unpackedSize
+
+      existing.isOptional = existing.isOptional && isOptional
+    } else {
+      map.set(pkg.name, { version: pkg.version, size: pkg.unpackedSize, isOptional })
+    }
+  }
+  return map
+}
diff --git a/app/utils/pkg-size/check-aborted.ts b/app/utils/pkg-size/check-aborted.ts
new file mode 100644
index 0000000000..4ab8f6b95c
--- /dev/null
+++ b/app/utils/pkg-size/check-aborted.ts
@@ -0,0 +1,13 @@
+export class AbortedError extends Error {}
+
+export function checkAborted(abortController: AbortController): Promise<void> {
+  return new Promise((resolve, reject) =>
+    setTimeout(() => {
+      if (abortController.signal.aborted) {
+        reject(new AbortedError('pkg-size-aborted'))
+      } else {
+        resolve()
+      }
+    }, 0),
+  )
+}
diff --git a/app/utils/pkg-size/db.ts b/app/utils/pkg-size/db.ts
new file mode 100644
index 0000000000..718d06cc6d
--- /dev/null
+++ b/app/utils/pkg-size/db.ts
@@ -0,0 +1,135 @@
+import type {
+  AnalysisSessionEntity,
+  DependencyEdgeEntity,
+  PackageData,
+  PackageEntity,
+} from '~/utils/pkg-size/types'
+import Dexie from 'dexie'
+
+class NpmxPkgSizeDB extends Dexie {
+  packages!: Dexie.Table<PackageEntity, string>
+  dependencyEdges!: Dexie.Table<DependencyEdgeEntity, number>
+  sessions!: Dexie.Table<AnalysisSessionEntity, string>
+
+  constructor() {
+    super('NpmxPkgSizeDB', {
+      autoOpen: false,
+    })
+
+    // Defining strategic indexes to avoid full table scans
+    this.version(1).stores({
+      // PK: id. Secondary index: name (vital for Diff and checking version collisions)
+      packages: 'id, name',
+      // PK: id. Secondary indexes: parentKey (to traverse down the tree) and resolvedVersionKey (to traverse up)
+      dependencyEdges: '++id, parentKey, resolvedVersionKey',
+      // PK: rootKey
+      sessions: 'rootKey',
+    })
+
+    this.packages = this.table('packages')
+    this.dependencyEdges = this.table('dependencyEdges')
+    this.sessions = this.table('sessions')
+  }
+
+  async getSession(id: string): Promise<AnalysisSessionEntity | undefined> {
+    if (!this.isOpen()) {
+      await this.open()
+    }
+
+    return await this.sessions.where('rootKey').equals(id).first()
+  }
+
+  async getSessions(ids: string[]): Promise<AnalysisSessionEntity[] | undefined> {
+    if (!this.isOpen()) {
+      await this.open()
+    }
+
+    return await this.sessions.where('rootKey').anyOf(ids).toArray()
+  }
+
+  async initSession(rootKey: string | string[]): Promise<void> {
+    if (!this.isOpen()) {
+      await this.open()
+    }
+    await this.transaction('rw', this.sessions, async () => {
+      if (Array.isArray(rootKey)) {
+        await this.sessions.bulkPut(
+          rootKey.map(key => ({
+            rootKey: key,
+            timestamp: Date.now(),
+            resolvedPackageKeys: [],
+            optionalPackageKeys: [],
+            totalSize: 0,
+            totalOptionalSize: 0,
+            isFinished: false,
+          })),
+        )
+      } else {
+        await this.sessions.put({
+          rootKey,
+          timestamp: Date.now(),
+          resolvedPackageKeys: [],
+          optionalPackageKeys: [],
+          totalSize: 0,
+          totalOptionalSize: 0,
+          isFinished: false,
+        })
+      }
+    })
+  }
+
+  async updateSession(
+    rootKey: string,
+    resolvedPackageKeys: string[],
+    optionalPackageKeys: string[],
+    totalSize: number,
+    totalOptionalSize: number,
+    isFinished: boolean,
+  ): Promise<void> {
+    if (!this.isOpen()) {
+      await this.open()
+    }
+    await this.transaction('rw', this.sessions, async () => {
+      await this.sessions.update(rootKey, {
+        resolvedPackageKeys,
+        optionalPackageKeys,
+        totalSize,
+        totalOptionalSize,
+        isFinished,
+      })
+    })
+  }
+
+  async storePackage(
+    pkgKey: string,
+    pkgData: PackageData,
+    parentKey?: string,
+    childRange?: string,
+    isOptional: boolean = false,
+  ): Promise<void> {
+    if (!this.isOpen()) {
+      await this.open()
+    }
+    await this.transaction('rw', this.packages, this.dependencyEdges, async () => {
+      await this.packages.put({
+        id: pkgKey,
+        name: pkgData.name,
+        version: pkgData.version,
+        unpackedSize: pkgData.dist?.unpackedSize || 0,
+        tarball: pkgData.dist?.tarball || '',
+      })
+
+      if (parentKey && childRange) {
+        await this.dependencyEdges.add({
+          parentKey,
+          childName: pkgData.name,
+          resolvedVersionKey: pkgKey,
+          childRange,
+          isOptional,
+        })
+      }
+    })
+  }
+}
+
+export const db = new NpmxPkgSizeDB()
diff --git a/app/utils/pkg-size/resolve-and-persist-graph.ts b/app/utils/pkg-size/resolve-and-persist-graph.ts
new file mode 100644
index 0000000000..c3ee6d3a79
--- /dev/null
+++ b/app/utils/pkg-size/resolve-and-persist-graph.ts
@@ -0,0 +1,195 @@
+import type { NpmPackageMetadata, PackageData } from '~/utils/pkg-size/types'
+import { findMaxSatisfying } from 'verkit'
+import { db } from '~/utils/pkg-size/db'
+import { checkAborted } from '~/utils/pkg-size/check-aborted'
+
+const REGISTRY_URL = 'https://registry.npmjs.org'
+const TARGET_OS = 'linux'
+const TARGET_CPU = 'x64'
+const TARGET_LIBC = 'glibc'
+
+function resolveVersion(metadata: NpmPackageMetadata, rangeOrVersion: string): string | undefined {
+  const versions = Object.keys(metadata.versions)
+  if (!rangeOrVersion || rangeOrVersion === 'latest' || rangeOrVersion === '*') {
+    return metadata['dist-tags'].latest || versions[versions.length - 1]
+  }
+  if (metadata['dist-tags'][rangeOrVersion]) return metadata['dist-tags'][rangeOrVersion]
+  if (metadata.versions[rangeOrVersion]) return rangeOrVersion
+  return findMaxSatisfying(versions, rangeOrVersion) || metadata['dist-tags'].latest || undefined
+}
+
+function isCompatiblePlatform(pkg: PackageData): boolean {
+  let isOsCompatible = true
+  if (pkg.os && pkg.os.length > 0) {
+    isOsCompatible =
+      pkg.os.includes(TARGET_OS) ||
+      pkg.os.includes('any') ||
+      (!pkg.os.includes(`!${TARGET_OS}`) && !pkg.os.some(o => !o.startsWith('!')))
+  }
+
+  let isCpuCompatible = true
+  if (pkg.cpu && pkg.cpu.length > 0) {
+    isCpuCompatible =
+      pkg.cpu.includes(TARGET_CPU) ||
+      pkg.cpu.includes('any') ||
+      (!pkg.cpu.includes(`!${TARGET_CPU}`) && !pkg.cpu.some(c => !c.startsWith('!')))
+  }
+
+  let isLibcCompatible = true
+  if (pkg.libc && pkg.libc.length > 0) {
+    isLibcCompatible =
+      pkg.libc.includes(TARGET_LIBC) ||
+      pkg.libc.includes('any') ||
+      (!pkg.libc.includes(`!${TARGET_LIBC}`) && !pkg.libc.some(c => !c.startsWith('!')))
+  }
+
+  return isOsCompatible && isCpuCompatible && isLibcCompatible
+}
+
+async function fetchPackageMetadata(
+  packageName: string,
+  abortController: AbortController,
+): Promise<NpmPackageMetadata> {
+  const encodedName = packageName.startsWith('@')
+    ? `@${encodeURIComponent(packageName.slice(1))}`
+    : encodeURIComponent(packageName)
+
+  const response = await fetch(`${REGISTRY_URL}/${encodedName}`, {
+    headers: { Accept: 'application/vnd.npm.install-v1+json' },
+    signal: abortController.signal,
+  })
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch metadata for package ${packageName}: ${response.statusText}`)
+  }
+  return response.json()
+}
+
+async function fetchAndResolve(
+  name: string,
+  range: string,
+  abortController: AbortController,
+): Promise<PackageData | undefined> {
+  try {
+    const metadata = await fetchPackageMetadata(name, abortController)
+    const versionKey = resolveVersion(metadata, range)
+
+    if (!versionKey) {
+      // oxlint-disable-next-line no-console
+      console.warn(`[Warning] Could not resolve version for range "${range}" in package "${name}"`)
+      return undefined
+    }
+
+    const pkgData = metadata.versions[versionKey]
+    if (!pkgData || !isCompatiblePlatform(pkgData)) {
+      return undefined
+    }
+
+    return pkgData
+  } catch (error) {
+    // oxlint-disable-next-line no-console
+    console.error(`[Error] Failed resolving ${name}@${range}:`, error)
+    return undefined
+  }
+}
+
+export async function resolveAndPersistGraph(
+  packageName: string,
+  targetVersion: string,
+  abortController: AbortController,
+): Promise<string> {
+  const rootKey = `${packageName}@${targetVersion}`
+
+  const existingSession = await db.getSession(rootKey)
+  if (existingSession?.isFinished) {
+    return rootKey
+  }
+
+  await db.initSession(rootKey)
+
+  const memoryGraph = new Map<string, string[]>()
+  const packageSizes = new Map<string, number>()
+  const visited = new Set<string>()
+
+  const queue: {
+    name: string
+    range: string
+    parentKey?: string
+    isOptional: boolean
+  }[] = [{ name: packageName, range: targetVersion, isOptional: false }]
+
+  while (queue.length > 0) {
+    await checkAborted(abortController)
+
+    const batch = queue.splice(0, 5)
+
+    const results = await Promise.all(
+      batch.map(async item => {
+        const pkgData = await fetchAndResolve(item.name, item.range, abortController)
+        return { item, pkgData }
+      }),
+    )
+
+    for (const { item, pkgData } of results) {
+      if (!pkgData) continue
+
+      const pkgKey = `${pkgData.name}@${pkgData.version}`
+
+      if (!visited.has(pkgKey)) {
+        visited.add(pkgKey)
+        packageSizes.set(pkgKey, pkgData.dist?.unpackedSize || 0)
+
+        await db.storePackage(pkgKey, pkgData, item.parentKey, item.range, item.isOptional)
+
+        for (const [depName, depRange] of Object.entries(pkgData.dependencies || {})) {
+          queue.push({ name: depName, range: depRange, parentKey: pkgKey, isOptional: false })
+        }
+        for (const [depName, depRange] of Object.entries(pkgData.optionalDependencies || {})) {
+          queue.push({ name: depName, range: depRange, parentKey: pkgKey, isOptional: true })
+        }
+      } else {
+        await db.storePackage(pkgKey, pkgData, item.parentKey, item.range, item.isOptional)
+      }
+
+      if (item.parentKey && !item.isOptional) {
+        if (!memoryGraph.has(item.parentKey)) memoryGraph.set(item.parentKey, [])
+        memoryGraph.get(item.parentKey)!.push(pkgKey)
+      }
+    }
+  }
+
+  const mandatoryKeys = new Set<string>()
+  const traverse = (key: string) => {
+    if (mandatoryKeys.has(key)) return
+    mandatoryKeys.add(key)
+    const normalDeps = memoryGraph.get(key) || []
+    normalDeps.forEach(traverse)
+  }
+  traverse(rootKey)
+
+  const resolvedPackageKeys: string[] = []
+  const optionalPackageKeys: string[] = []
+  let totalSize = 0
+  let totalOptionalSize = 0
+
+  for (const [key, size] of packageSizes.entries()) {
+    if (mandatoryKeys.has(key)) {
+      resolvedPackageKeys.push(key)
+      totalSize += size
+    } else {
+      optionalPackageKeys.push(key)
+      totalOptionalSize += size
+    }
+  }
+
+  await db.updateSession(
+    rootKey,
+    resolvedPackageKeys,
+    optionalPackageKeys,
+    totalSize,
+    totalOptionalSize,
+    true,
+  )
+
+  return rootKey
+}
diff --git a/app/utils/pkg-size/types.ts b/app/utils/pkg-size/types.ts
new file mode 100644
index 0000000000..e3b1eeaa86
--- /dev/null
+++ b/app/utils/pkg-size/types.ts
@@ -0,0 +1,113 @@
+export interface PackageEntity {
+  id: string // "lodash@4.17.21"
+  name: string // "lodash"
+  version: string // "4.17.21"
+  unpackedSize: number
+  tarball: string
+}
+
+export interface DependencyEdgeEntity {
+  id?: number // auto-increment
+  parentKey: string // "nuxt@4.5.0"
+  childName: string // "lodash"
+  childRange: string // "^4.17.0"
+  resolvedVersionKey?: string // "lodash@4.17.21" (cached once semver resolved)
+  isOptional: boolean
+}
+
+export interface AnalysisSessionEntity {
+  rootKey: string // "nuxt@4.5.0"
+  timestamp: number
+  resolvedPackageKeys: string[] // Flat list of all unique dependencies in the tree
+  optionalPackageKeys: string[] // Flat list of all unique optional dependencies in the tree
+  totalSize: number
+  isFinished: boolean
+  totalOptionalSize: number
+}
+
+// Root package response with all its versions
+export interface NpmPackageMetadata {
+  'name': string
+  'dist-tags': Record<string, string>
+  'versions': Record<string, PackageData>
+}
+
+export interface PackageData {
+  name: string
+  version: string
+  // Platform restrictions (crucial to avoid summing native binaries that are not touched)
+  os?: string[]
+  cpu?: string[]
+  libc?: string[]
+  // distribution data
+  dist: {
+    tarball: string
+    unpackedSize?: number
+    shasum?: string
+    integrity?: string
+  }
+  // Different types of dependencies
+  dependencies?: Record<string, string>
+  optionalDependencies?: Record<string, string>
+  peerDependencies?: Record<string, string>
+  devDependencies?: Record<string, string>
+}
+
+export interface DiffResult {
+  name: string
+  isOptional: boolean
+  status: 'added' | 'removed' | 'changed' | 'unchanged'
+  v1: { version: string; size: number } | null
+  v2: { version: string; size: number } | null
+  sizeDelta: number
+}
+
+export interface UIDiffResult extends Omit<DiffResult, 'v1' | 'v2'> {
+  v1: { version: string; size: string; sizeText: string } | null
+  v2: { version: string; size: string; sizeText: string } | null
+  statusText: string
+  sizeDeltaText: string
+}
+
+export interface Summary {
+  sizeDelta: number
+  mandatorySizeDelta: number
+  netDependencies: number
+  added: number
+  removed: number
+}
+
+export interface UISummary extends Summary {
+  // B/KB/MB
+  sizeDeltaText: string
+  // bytes
+  sizeDeltaBytesText: string
+  // B/KB/MB
+  mandatorySizeDeltaText: string
+  // bytes
+  mandatorySizeDeltaBytesText: string
+  netDependenciesText: string
+  addedText: string
+  removedText: string
+}
+
+export type AnalyzeCauseWorkerRequest =
+  | {
+      type: 'analyze-cause'
+      id: number
+      packageName: string
+      fromVersion: string
+      toVersion: string
+      ignoreOptional?: boolean
+    }
+  | {
+      type: 'analyze-cause-abort'
+      id: number
+    }
+
+export type AnalyzeWorkerResponse =
+  | { type: 'sessions'; id: number; fromVersion: string; toVersion: string }
+  | { type: 'result'; id: number; result: DiffResult[]; summary: Summary }
+  | { type: 'error'; id: number; message: string }
+  | { type: 'aborting'; id: number }
+  | { type: 'aborted'; id: number }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 4f68ff0cb4..a4f29cf3cd 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -429,7 +429,32 @@
       "title_deps": "Significant dependency count increase since v{version}",
       "title_both": "Significant size and dependency increase since v{version}",
       "size": "Install size increased by {percent} ({size} larger)",
-      "deps": "{count} more dependency | {count} more dependencies"
+      "deps": "{count} more dependency | {count} more dependencies",
+      "analyze": {
+        "analyze": "Analyze",
+        "cancel": "Cancel",
+        "cancelling": "Cancelling...",
+        "summary": {
+          "total_size": "Size variation (total): {size} {bytes}",
+          "js_core_size": "Size variation (only dependencies): {size} {bytes}",
+          "bytes": "({bytes} bytes)",
+          "deps_variation": "Dependency variation: {net} ({details})",
+          "deps_details": "Added: {added}, Removed: {removed}"
+        },
+        "diff": "Diff balance",
+        "only_deps": "Only dependencies",
+        "all_deps": "All dependencies",
+        "expand": "Expand",
+        "collapse": "Collapse",
+        "added": "Added",
+        "removed": "Removed",
+        "status": {
+          "added": "Added",
+          "changed": "Changed",
+          "unchanged": "Unchanged",
+          "removed": "Removed"
+        }
+      }
     },
     "size_decrease": {
       "title_size": "Package size decreased since v{version}!",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index b6b545404e..dd3804048e 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -421,7 +421,32 @@
       "title_deps": "Aumento significativo del número de dependencias desde v{version}",
       "title_both": "Aumento significativo del tamaño y de las dependencias desde v{version}",
       "size": "El tamaño de instalación aumentó un {percent} ({size} más grande)",
-      "deps": "{count} dependencias más"
+      "deps": "{count} dependencias más",
+      "analyze": {
+        "analyze": "Analizar",
+        "cancel": "Cancelar",
+        "cancelling": "Cancelando...",
+        "summary": {
+          "total_size": "Variación de tamaño (total): {size} {bytes}",
+          "js_core_size": "Variación de tamaño (sólo dependencias): {size} {bytes}",
+          "bytes": "({bytes} bytes)",
+          "deps_variation": "Variación de dependencias: {net} ({details})",
+          "deps_details": "Añadidas: {added}, Eliminadas: {removed}"
+        },
+        "diff": "Balance de diferencias",
+        "only_deps": "Sólo dependencias",
+        "all_deps": "Todas las dependencias",
+        "expand": "Expandir",
+        "collapse": "Contraer",
+        "added": "Añadidas",
+        "removed": "Eliminadas",
+        "status": {
+          "added": "Añadida",
+          "changed": "Modificada",
+          "unchanged": "Sin cambios",
+          "removed": "Eliminada"
+        }
+      }
     },
     "size_decrease": {
       "title_size": "¡El tamaño del paquete ha disminuido desde v{version}!",
diff --git a/i18n/schema.json b/i18n/schema.json
index 35882a02e2..7c4b675d2e 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1293,6 +1293,81 @@
             },
             "deps": {
               "type": "string"
+            },
+            "analyze": {
+              "type": "object",
+              "properties": {
+                "analyze": {
+                  "type": "string"
+                },
+                "cancel": {
+                  "type": "string"
+                },
+                "cancelling": {
+                  "type": "string"
+                },
+                "summary": {
+                  "type": "object",
+                  "properties": {
+                    "total_size": {
+                      "type": "string"
+                    },
+                    "js_core_size": {
+                      "type": "string"
+                    },
+                    "bytes": {
+                      "type": "string"
+                    },
+                    "deps_variation": {
+                      "type": "string"
+                    },
+                    "deps_details": {
+                      "type": "string"
+                    }
+                  },
+                  "additionalProperties": false
+                },
+                "diff": {
+                  "type": "string"
+                },
+                "only_deps": {
+                  "type": "string"
+                },
+                "all_deps": {
+                  "type": "string"
+                },
+                "expand": {
+                  "type": "string"
+                },
+                "collapse": {
+                  "type": "string"
+                },
+                "added": {
+                  "type": "string"
+                },
+                "removed": {
+                  "type": "string"
+                },
+                "status": {
+                  "type": "object",
+                  "properties": {
+                    "added": {
+                      "type": "string"
+                    },
+                    "changed": {
+                      "type": "string"
+                    },
+                    "unchanged": {
+                      "type": "string"
+                    },
+                    "removed": {
+                      "type": "string"
+                    }
+                  },
+                  "additionalProperties": false
+                }
+              },
+              "additionalProperties": false
             }
           },
           "additionalProperties": false
diff --git a/package.json b/package.json
index 4605f274c7..d3b77b0f1e 100644
--- a/package.json
+++ b/package.json
@@ -84,6 +84,7 @@
     "@vueuse/shared": "14.3.0",
     "algoliasearch": "5.55.1",
     "defu": "6.1.7",
+    "dexie": "^4.4.4",
     "diff": "^9.0.0",
     "fast-npm-meta": "2.1.0",
     "focus-trap": "^8.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 254977758f..ca769e7da1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -183,6 +183,9 @@ importers:
       defu:
         specifier: 6.1.7
         version: 6.1.7
+      dexie:
+        specifier: ^4.4.4
+        version: 4.4.4
       diff:
         specifier: ^9.0.0
         version: 9.0.0
@@ -6500,6 +6503,9 @@ packages:
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
+  dexie@4.4.4:
+    resolution: {integrity: sha512-jIwsYI8Os2hgnqc6O49YwFDKGc5v5QjGx0wPVp543ip1F53VFAKMLthV2pQosQcVTv3eAskTWYspOx195PM0FQ==}
+
   diff3@0.0.3:
     resolution: {integrity: sha512-iSq8ngPOt0K53A6eVr4d5Kn6GNrM2nQZtC740pzIriHtn4pOQ2lyzEXQMBeVcWERN0ye7fhBsk9PbLLQOnUx/g==}
 
@@ -10658,6 +10664,9 @@ packages:
   vue-component-type-helpers@3.3.7:
     resolution: {integrity: sha512-Skkhw9agYSgsWqv7bxSOGJZa9SaiJbZVGdXuFWnrzKaQYHnw9qbjD630rw6RyMqDbp54nfLCLw5SZA55if7JLg==}
 
+  vue-component-type-helpers@3.3.8:
+    resolution: {integrity: sha512-troqCMmQodQDqUqn63NQaFi+CDSclSe7sc8VEBFqf5GFLqmGR2Ph3P2WEC7qwpRVyEWsTi/aAr4vyOe/B1hU3g==}
+
   vue-data-ui@3.22.13:
     resolution: {integrity: sha512-NQeLKNUZQWw9DGQUEQPQo2kIcKV+Uap685DTUzydK6b+N4E6CByy/VepaNIScRbyUV1wFWe5aG3pnyyg32aN7g==}
     peerDependencies:
@@ -15121,7 +15130,7 @@ snapshots:
       storybook: 10.4.6(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@3.9.4)(react@19.2.7)(vite-plus@0.2.2)
       type-fest: 2.19.0
       vue: 3.5.39(typescript@6.0.3)
-      vue-component-type-helpers: 3.3.7
+      vue-component-type-helpers: 3.3.8
 
   '@swc/helpers@0.5.23':
     dependencies:
@@ -17259,6 +17268,8 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
+  dexie@4.4.4: {}
+
   diff3@0.0.3: {}
 
   diff@8.0.4: {}
@@ -22872,6 +22883,8 @@ snapshots:
 
   vue-component-type-helpers@3.3.7: {}
 
+  vue-component-type-helpers@3.3.8: {}
+
   vue-data-ui@3.22.13(vue@3.5.39):
     dependencies:
       vue: 3.5.39(typescript@6.0.3)

From bb41fcc80f4c1c45446eaacc06acb342fd7d175a Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 01:08:50 +0200
Subject: [PATCH 02/50] chore: rmeove max height at enter and leave expand
 transition

---
 app/components/Package/SizeIncrease.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/Package/SizeIncrease.vue b/app/components/Package/SizeIncrease.vue
index 0c5801e33e..448a6325b5 100644
--- a/app/components/Package/SizeIncrease.vue
+++ b/app/components/Package/SizeIncrease.vue
@@ -309,7 +309,6 @@ const {
     opacity 0.25s ease-in-out;
   overflow: hidden;
   opacity: 1;
-  max-height: 800px; /* Altura máxima segura de despliegue para la transición */
 }
 
 .expand-enter-from,

From 5f05696aafeb0555ef3c088167098cb551692a54 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 01:09:39 +0200
Subject: [PATCH 03/50] chore: remove tilde from solo at es.json

---
 i18n/locales/es.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index dd3804048e..4660e1f283 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -428,13 +428,13 @@
         "cancelling": "Cancelando...",
         "summary": {
           "total_size": "Variación de tamaño (total): {size} {bytes}",
-          "js_core_size": "Variación de tamaño (sólo dependencias): {size} {bytes}",
+          "js_core_size": "Variación de tamaño (solo dependencias): {size} {bytes}",
           "bytes": "({bytes} bytes)",
           "deps_variation": "Variación de dependencias: {net} ({details})",
           "deps_details": "Añadidas: {added}, Eliminadas: {removed}"
         },
         "diff": "Balance de diferencias",
-        "only_deps": "Sólo dependencias",
+        "only_deps": "Solo dependencias",
         "all_deps": "Todas las dependencias",
         "expand": "Expandir",
         "collapse": "Contraer",

From 43e58a20c8d47680a5bd47b2a67a66214c92f4f5 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 01:15:00 +0200
Subject: [PATCH 04/50] chore: remove `comparedVersion` from component props

---
 app/components/Package/SizeIncrease.vue           |  6 ++++--
 app/composables/pkg-size/useAnalizeCauseWorker.ts | 10 +++++-----
 app/pages/package/[[org]]/[name].vue              |  8 +-------
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/app/components/Package/SizeIncrease.vue b/app/components/Package/SizeIncrease.vue
index 448a6325b5..631104e6ba 100644
--- a/app/components/Package/SizeIncrease.vue
+++ b/app/components/Package/SizeIncrease.vue
@@ -7,7 +7,6 @@ const props = defineProps<{
   diff: InstallSizeDiff
   packageName: string
   version?: string | null
-  comparedVersion?: string | null
 }>()
 
 const bytesFormatter = useBytesFormatter()
@@ -16,6 +15,9 @@ const percentFormatter = useNumberFormatter({ style: 'percent' })
 
 const sizePercent = computed(() => percentFormatter.value.format(Math.abs(props.diff.sizeRatio)))
 
+const usePackage = computed(() => {
+  return props.packageName
+})
 const useVersion = computed(() => {
   return props.version
 })
@@ -34,7 +36,7 @@ const {
   allDependencies,
   startAnalyzeCause,
   cancelAnalyzeCause,
-} = useAnalyzeCauseWorker(props.packageName, useVersion, useComparedVersion)
+} = useAnalyzeCauseWorker(usePackage, useVersion, useComparedVersion)
 </script>
 
 <template>
diff --git a/app/composables/pkg-size/useAnalizeCauseWorker.ts b/app/composables/pkg-size/useAnalizeCauseWorker.ts
index b241663498..276337d9fc 100644
--- a/app/composables/pkg-size/useAnalizeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalizeCauseWorker.ts
@@ -4,7 +4,7 @@ import { useThrottleFn } from '@vueuse/core'
 import { useBytesFormatter, useNumberFormatter } from '~/composables/useNumberFormatter'
 
 export function useAnalyzeCauseWorker(
-  packageName: string,
+  packageName: ComputedRef<string | undefined | null>,
   version: ComputedRef<string | undefined | null>,
   comparedVersion: ComputedRef<string | undefined | null>,
 ) {
@@ -70,7 +70,7 @@ export function useAnalyzeCauseWorker(
       worker.postMessage({
         type: 'analyze-cause',
         id: currentId,
-        packageName,
+        packageName: packageName.value,
         fromVersion: comparedVersion.value,
         toVersion: version.value,
         ignoreOptional: false,
@@ -180,9 +180,9 @@ export function useAnalyzeCauseWorker(
     }
 
     watch(
-      [version, comparedVersion],
-      ([v1, v2]) => {
-        available.value = !!v1 && !!v2 && !!worker
+      [packageName, version, comparedVersion],
+      ([pkg, v1, v2]) => {
+        available.value = !!pkg && !!v1 && !!v2 && !!worker
       },
       { immediate: true, flush: 'post' },
     )
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 5b546fc500..943f02df70 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -205,12 +205,7 @@ const {
 } = usePackage(packageName, () => resolvedVersion.value ?? requestedVersion.value)
 
 const { data: licenseChangeData } = useLicenseChanges(packageName, resolvedVersion)
-const { diff: sizeDiff, comparisonVersion } = useInstallSizeDiff(
-  packageName,
-  resolvedVersion,
-  pkg,
-  installSize,
-)
+const { diff: sizeDiff } = useInstallSizeDiff(packageName, resolvedVersion, pkg, installSize)
 const { versions: commandPaletteVersions, ensureLoaded: ensureCommandPaletteVersionsLoaded } =
   useCommandPalettePackageVersions(packageName)
 
@@ -930,7 +925,6 @@ const showSkeleton = shallowRef(false)
             :diff="sizeDiff"
             :package-name="packageName"
             :version="resolvedVersion"
-            :compared-version="comparisonVersion"
           />
           <!-- Size / dependency decrease celebration -->
           <PackageSizeDecrease v-else-if="sizeDiff?.direction === 'decrease'" :diff="sizeDiff" />

From 8a17b413099574bb2384ee42772e6bc3fb5ac5fe Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 01:23:45 +0200
Subject: [PATCH 05/50] chore: use summary to show the container

---
 app/components/Package/SizeIncrease.vue | 10 ++++++++--
 i18n/locales/en.json                    |  3 ++-
 i18n/locales/es.json                    |  3 ++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/components/Package/SizeIncrease.vue b/app/components/Package/SizeIncrease.vue
index 631104e6ba..646c211ce3 100644
--- a/app/components/Package/SizeIncrease.vue
+++ b/app/components/Package/SizeIncrease.vue
@@ -106,7 +106,7 @@ const {
       </div>
 
       <Transition name="expand">
-        <div v-if="summary && result && result.length > 0" class="flex flex-col">
+        <div v-if="summary" class="flex flex-col">
           <!-- SUMMARY -->
           <div class="border-t border-amber-600/20 pt-3 flex flex-col gap-1">
             <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
@@ -212,7 +212,10 @@ const {
                 class="custom-scrollbar pe-1 transition-all duration-300"
                 :class="{ 'overflow-y-auto max-h-[216px]': !noResultScroll }"
               >
-                <ul class="flex flex-col gap-1.5 m-0 p-0 list-none pe-1">
+                <ul
+                  v-if="result && result.length > 0"
+                  class="flex flex-col gap-1.5 m-0 p-0 list-none pe-1"
+                >
                   <li
                     v-for="(item, index) in result"
                     :key="index"
@@ -294,6 +297,9 @@ const {
                     </div>
                   </li>
                 </ul>
+                <div v-else class="text-xs text-amber-700/80 dark:text-amber-500/80 py-1">
+                  {{ $t('package.size_increase.analyze.summary.no_deps') }}
+                </div>
               </div>
             </div>
           </details>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index a4f29cf3cd..d4b472d559 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -439,7 +439,8 @@
           "js_core_size": "Size variation (only dependencies): {size} {bytes}",
           "bytes": "({bytes} bytes)",
           "deps_variation": "Dependency variation: {net} ({details})",
-          "deps_details": "Added: {added}, Removed: {removed}"
+          "deps_details": "Added: {added}, Removed: {removed}",
+          "no_deps": "No dependencies found"
         },
         "diff": "Diff balance",
         "only_deps": "Only dependencies",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index 4660e1f283..e96e3378d5 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -431,7 +431,8 @@
           "js_core_size": "Variación de tamaño (solo dependencias): {size} {bytes}",
           "bytes": "({bytes} bytes)",
           "deps_variation": "Variación de dependencias: {net} ({details})",
-          "deps_details": "Añadidas: {added}, Eliminadas: {removed}"
+          "deps_details": "Añadidas: {added}, Eliminadas: {removed}",
+          "no_deps": "No se encontraron dependencias"
         },
         "diff": "Balance de diferencias",
         "only_deps": "Solo dependencias",

From 4b24c1f93e8212186c084486719e504d573021ae Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 01:25:59 +0200
Subject: [PATCH 06/50] chore: wrap emojis with span + aria hidden

---
 app/components/Package/SizeIncrease.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/Package/SizeIncrease.vue b/app/components/Package/SizeIncrease.vue
index 646c211ce3..35b61d066c 100644
--- a/app/components/Package/SizeIncrease.vue
+++ b/app/components/Package/SizeIncrease.vue
@@ -110,7 +110,7 @@ const {
           <!-- SUMMARY -->
           <div class="border-t border-amber-600/20 pt-3 flex flex-col gap-1">
             <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
-              📦
+              <span aria-hidden="true">📦</span>
               <i18n-t keypath="package.size_increase.analyze.summary.total_size" scope="global">
                 <template #size>{{ summary.sizeDeltaText }}</template>
                 <template #bytes>
@@ -123,7 +123,7 @@ const {
               </i18n-t>
             </p>
             <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
-              🧠
+              <span aria-hidden="true">🧠</span>
               <i18n-t keypath="package.size_increase.analyze.summary.js_core_size" scope="global">
                 <template #size>{{ summary.mandatorySizeDeltaText }}</template>
                 <template #bytes>
@@ -136,7 +136,7 @@ const {
               </i18n-t>
             </p>
             <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
-              🧩
+              <span aria-hidden="true">🧩</span>
               <i18n-t keypath="package.size_increase.analyze.summary.deps_variation" scope="global">
                 <template #net>{{
                   summary.netDependenciesText ||

From 9a2bd92637bad3fb3aef7925b5190ecd4b83da9c Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 01:29:02 +0200
Subject: [PATCH 07/50] chore: move watcher to script setup scope

---
 .../pkg-size/useAnalizeCauseWorker.ts            | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/composables/pkg-size/useAnalizeCauseWorker.ts b/app/composables/pkg-size/useAnalizeCauseWorker.ts
index 276337d9fc..b9eabb3309 100644
--- a/app/composables/pkg-size/useAnalizeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalizeCauseWorker.ts
@@ -52,6 +52,14 @@ export function useAnalyzeCauseWorker(
   const bytesFormatter = useBytesFormatter()
   const rawBytesFormatter = useNumberFormatter()
 
+  watch(
+    [packageName, version, comparedVersion],
+    ([pkg, v1, v2]) => {
+      available.value = !!pkg && !!v1 && !!v2 && !!worker
+    },
+    { flush: 'post' },
+  )
+
   startAnalyzeCause = useThrottleFn(
     async () => {
       if (!worker || !available.value || analyzing.value) {
@@ -178,14 +186,6 @@ export function useAnalyzeCauseWorker(
     } finally {
       loading.value = false
     }
-
-    watch(
-      [packageName, version, comparedVersion],
-      ([pkg, v1, v2]) => {
-        available.value = !!pkg && !!v1 && !!v2 && !!worker
-      },
-      { immediate: true, flush: 'post' },
-    )
   })
 
   onUnmounted(() => {

From 8d98617823d14c278b588a4e5b81f94ff4db1b6f Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 01:50:03 +0200
Subject: [PATCH 08/50] chore: use crypto to generate the id

---
 .../pkg-size/useAnalizeCauseWorker.ts         |  9 +++++--
 app/utils/pkg-size/analize-cause-worker.ts    | 27 ++++++++++---------
 app/utils/pkg-size/types.ts                   | 14 +++++-----
 3 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/app/composables/pkg-size/useAnalizeCauseWorker.ts b/app/composables/pkg-size/useAnalizeCauseWorker.ts
index b9eabb3309..9dd46cb395 100644
--- a/app/composables/pkg-size/useAnalizeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalizeCauseWorker.ts
@@ -47,7 +47,7 @@ export function useAnalyzeCauseWorker(
   }
 
   let worker: Worker | undefined
-  let currentId = 0
+  let currentId: number | string = 0
 
   const bytesFormatter = useBytesFormatter()
   const rawBytesFormatter = useNumberFormatter()
@@ -67,7 +67,12 @@ export function useAnalyzeCauseWorker(
       }
 
       analyzing.value = true
-      currentId++
+      currentId =
+        import.meta.test || import.meta.dev
+          ? (currentId as number)++
+          : import.meta.client
+            ? crypto.randomUUID()
+            : await import('node:crypto').then(({ randomUUID }) => randomUUID())
       cancelling.value = false
       error.value = null
       summary.value = undefined
diff --git a/app/utils/pkg-size/analize-cause-worker.ts b/app/utils/pkg-size/analize-cause-worker.ts
index eaafb862ec..627518a895 100644
--- a/app/utils/pkg-size/analize-cause-worker.ts
+++ b/app/utils/pkg-size/analize-cause-worker.ts
@@ -17,24 +17,27 @@ function post(msg: AnalyzeWorkerResponse) {
 
 self.addEventListener('message', async (event: MessageEvent<AnalyzeCauseWorkerRequest>) => {
   const msg = event.data
+  const { id, type } = msg
 
-  if (msg.type === 'analyze-cause-abort') {
+  if (type === 'analyze-cause-abort') {
     if (abortController) {
       abortController.abort()
-      post({ type: 'aborting', id: msg.id })
+      post({ type: 'aborting', id })
     } else {
-      post({ type: 'aborted', id: msg.id })
+      post({ type: 'aborted', id })
     }
     return
   }
 
-  if (msg.type !== 'analyze-cause') {
+  if (type !== 'analyze-cause') {
     return
   }
 
-  const { id, packageName, fromVersion, toVersion, ignoreOptional = false } = msg
+  const { packageName, fromVersion, toVersion, ignoreOptional = false } = msg
 
-  abortController = new AbortController()
+  abortController?.abort()
+  const controller = new AbortController()
+  abortController = controller
 
   const keys = {
     fromVersion: `${packageName}@${fromVersion}`,
@@ -60,11 +63,11 @@ self.addEventListener('message', async (event: MessageEvent<AnalyzeCauseWorkerRe
     post({ type: 'sessions', id, fromVersion, toVersion })
 
     await Promise.all([
-      resolveAndPersistGraph(packageName, fromVersion, abortController),
-      resolveAndPersistGraph(packageName, toVersion, abortController),
+      resolveAndPersistGraph(packageName, fromVersion, controller),
+      resolveAndPersistGraph(packageName, toVersion, controller),
     ])
 
-    await checkAborted(abortController)
+    await checkAborted(controller)
 
     const [session1, session2] = await Promise.all([
       db.getSession(keys.fromVersion),
@@ -120,9 +123,7 @@ self.addEventListener('message', async (event: MessageEvent<AnalyzeCauseWorkerRe
           isOptional: p1.isOptional,
         })
       }
-
-      // Los saltos de versión (changed) y los unchanged se ignoran usando el "machete"
-      // que acordamos para limpiar el ruido del Diff.
+      // Version jumps (changed) and no-change entries are ignored
     }
 
     result.sort((a, b) => Math.abs(b.sizeDelta) - Math.abs(a.sizeDelta))
@@ -163,7 +164,7 @@ self.addEventListener('message', async (event: MessageEvent<AnalyzeCauseWorkerRe
       },
     })
   } catch (error) {
-    if (error instanceof AbortedError || abortController?.signal.aborted) {
+    if (error instanceof AbortedError || controller.signal.aborted) {
       post({ type: 'aborted', id })
     } else {
       post({ type: 'error', id, message: error instanceof Error ? error.message : String(error) })
diff --git a/app/utils/pkg-size/types.ts b/app/utils/pkg-size/types.ts
index e3b1eeaa86..f0fab1f410 100644
--- a/app/utils/pkg-size/types.ts
+++ b/app/utils/pkg-size/types.ts
@@ -94,7 +94,7 @@ export interface UISummary extends Summary {
 export type AnalyzeCauseWorkerRequest =
   | {
       type: 'analyze-cause'
-      id: number
+      id: number | string
       packageName: string
       fromVersion: string
       toVersion: string
@@ -102,12 +102,12 @@ export type AnalyzeCauseWorkerRequest =
     }
   | {
       type: 'analyze-cause-abort'
-      id: number
+      id: number | string
     }
 
 export type AnalyzeWorkerResponse =
-  | { type: 'sessions'; id: number; fromVersion: string; toVersion: string }
-  | { type: 'result'; id: number; result: DiffResult[]; summary: Summary }
-  | { type: 'error'; id: number; message: string }
-  | { type: 'aborting'; id: number }
-  | { type: 'aborted'; id: number }
+  | { type: 'sessions'; id: number | string; fromVersion: string; toVersion: string }
+  | { type: 'result'; id: number | string; result: DiffResult[]; summary: Summary }
+  | { type: 'error'; id: number | string; message: string }
+  | { type: 'aborting'; id: number | string }
+  | { type: 'aborted'; id: number | string }

From 8fd6a4f28f52d9672390e06b1cf4333bfc2c1062 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 01:50:24 +0200
Subject: [PATCH 09/50] chore: cleanup result

---
 app/composables/pkg-size/useAnalizeCauseWorker.ts | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/app/composables/pkg-size/useAnalizeCauseWorker.ts b/app/composables/pkg-size/useAnalizeCauseWorker.ts
index 9dd46cb395..b0a13b7b5e 100644
--- a/app/composables/pkg-size/useAnalizeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalizeCauseWorker.ts
@@ -148,19 +148,6 @@ export function useAnalyzeCauseWorker(
         })
         analyzing.value = false
         cancelling.value = false
-        const totalDeltaMB = (msg.summary.sizeDelta / (1024 * 1024)).toFixed(2)
-        const jsDeltaMB = (msg.summary.mandatorySizeDelta / (1024 * 1024)).toFixed(2)
-
-        console.log(`📊 FINAL DIFF BALANCE:`)
-        console.log(
-          `📦 Size variation (Total): ${totalDeltaMB} MB (${msg.summary.sizeDelta} bytes)`,
-        )
-        console.log(
-          `🧠 Size variation (JS Core): ${jsDeltaMB} MB (${msg.summary.mandatorySizeDelta} bytes)`,
-        )
-        console.log(
-          `🧩 Dependency variation: ${msg.summary.netDependencies > 0 ? '+' : ''}${msg.summary.netDependencies} (Added: ${msg.summary.added}, Removed: ${msg.summary.removed})`,
-        )
         break
       case 'error':
         error.value = msg.message

From df5e4040ce592faf462fe104cc8a3e395aab0b86 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 01:57:13 +0200
Subject: [PATCH 10/50] chore: split resolve and persist graph into smaller
 private functions

---
 .../pkg-size/resolve-and-persist-graph.ts     | 48 ++++++++++++++-----
 1 file changed, 37 insertions(+), 11 deletions(-)

diff --git a/app/utils/pkg-size/resolve-and-persist-graph.ts b/app/utils/pkg-size/resolve-and-persist-graph.ts
index c3ee6d3a79..fb02b6b519 100644
--- a/app/utils/pkg-size/resolve-and-persist-graph.ts
+++ b/app/utils/pkg-size/resolve-and-persist-graph.ts
@@ -93,20 +93,14 @@ async function fetchAndResolve(
   }
 }
 
-export async function resolveAndPersistGraph(
+/**
+ * Helper 1: Processes the BFS queue for dependencies and performs batch requests.
+ */
+async function processBfsQueue(
   packageName: string,
   targetVersion: string,
   abortController: AbortController,
-): Promise<string> {
-  const rootKey = `${packageName}@${targetVersion}`
-
-  const existingSession = await db.getSession(rootKey)
-  if (existingSession?.isFinished) {
-    return rootKey
-  }
-
-  await db.initSession(rootKey)
-
+) {
   const memoryGraph = new Map<string, string[]>()
   const packageSizes = new Map<string, number>()
   const visited = new Set<string>()
@@ -158,6 +152,13 @@ export async function resolveAndPersistGraph(
     }
   }
 
+  return { memoryGraph, packageSizes }
+}
+
+/**
+ * Helper 2: Computes mandatory dependencies via graph traversal.
+ */
+function computeMandatoryKeys(rootKey: string, memoryGraph: Map<string, string[]>): Set<string> {
   const mandatoryKeys = new Set<string>()
   const traverse = (key: string) => {
     if (mandatoryKeys.has(key)) return
@@ -166,6 +167,31 @@ export async function resolveAndPersistGraph(
     normalDeps.forEach(traverse)
   }
   traverse(rootKey)
+  return mandatoryKeys
+}
+
+export async function resolveAndPersistGraph(
+  packageName: string,
+  targetVersion: string,
+  abortController: AbortController,
+): Promise<string> {
+  const rootKey = `${packageName}@${targetVersion}`
+
+  const existingSession = await db.getSession(rootKey)
+  if (existingSession?.isFinished) {
+    return rootKey
+  }
+
+  await db.initSession(rootKey)
+
+  // Coordinate via specialized helpers to satisfy linter/CodeRabbit requirements
+  const { memoryGraph, packageSizes } = await processBfsQueue(
+    packageName,
+    targetVersion,
+    abortController,
+  )
+
+  const mandatoryKeys = computeMandatoryKeys(rootKey, memoryGraph)
 
   const resolvedPackageKeys: string[] = []
   const optionalPackageKeys: string[] = []

From 98857b7f7d55cfb593c439d37de3da2d09268e63 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 02:00:44 +0200
Subject: [PATCH 11/50] chore: check not aborted befofe log the error when
 fetching

---
 app/utils/pkg-size/resolve-and-persist-graph.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/utils/pkg-size/resolve-and-persist-graph.ts b/app/utils/pkg-size/resolve-and-persist-graph.ts
index fb02b6b519..d6601d5432 100644
--- a/app/utils/pkg-size/resolve-and-persist-graph.ts
+++ b/app/utils/pkg-size/resolve-and-persist-graph.ts
@@ -87,8 +87,10 @@ async function fetchAndResolve(
 
     return pkgData
   } catch (error) {
-    // oxlint-disable-next-line no-console
-    console.error(`[Error] Failed resolving ${name}@${range}:`, error)
+    if (!abortController.signal.aborted) {
+      // oxlint-disable-next-line no-console
+      console.error(`[Error] Failed resolving ${name}@${range}:`, error)
+    }
     return undefined
   }
 }

From 276fc0f30c22500bec637416390d2a8e74e9e20e Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 02:02:25 +0200
Subject: [PATCH 12/50] chore: collapse the duplicated threshold branches at
 bytes formatter

---
 app/composables/useNumberFormatter.ts | 24 +++---------------------
 1 file changed, 3 insertions(+), 21 deletions(-)

diff --git a/app/composables/useNumberFormatter.ts b/app/composables/useNumberFormatter.ts
index 5b4245d564..196b381c28 100644
--- a/app/composables/useNumberFormatter.ts
+++ b/app/composables/useNumberFormatter.ts
@@ -22,31 +22,13 @@ export const useBytesFormatter = () => {
   return {
     t,
     format: (bytes: number) => {
-      if (bytes >= 0) {
-        if (bytes < KB) {
-          return t('package.size.b', {
-            size: decimalNumberFormatter.value.format(bytes),
-          })
-        }
-        if (bytes < MB) {
-          return t('package.size.kb', {
-            size: decimalNumberFormatter.value.format(bytes / KB),
-          })
-        }
-
-        return t('package.size.mb', {
-          size: decimalNumberFormatter.value.format(bytes / MB),
-        })
-      }
-
-      const v = Math.abs(bytes)
-
-      if (v < KB) {
+      const magnitude = Math.abs(bytes)
+      if (magnitude < KB) {
         return t('package.size.b', {
           size: decimalNumberFormatter.value.format(bytes),
         })
       }
-      if (v < MB) {
+      if (magnitude < MB) {
         return t('package.size.kb', {
           size: decimalNumberFormatter.value.format(bytes / KB),
         })

From a76622a9084257d8f944511bac31c29bde575c8f Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 02:03:55 +0200
Subject: [PATCH 13/50] chore: change worker name

---
 app/utils/pkg-size/analize-cause-client-worker.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/utils/pkg-size/analize-cause-client-worker.ts b/app/utils/pkg-size/analize-cause-client-worker.ts
index e95fd5666b..ed6aea6cce 100644
--- a/app/utils/pkg-size/analize-cause-client-worker.ts
+++ b/app/utils/pkg-size/analize-cause-client-worker.ts
@@ -1,5 +1,5 @@
 import Worker from '~/utils/pkg-size/analize-cause-worker?worker'
 
 export const worker = new Worker({
-  name: 'NpmxPkgSizeAnalyseCauseWorker',
+  name: 'NpmxPkgSizeAnalyzeCauseWorker',
 })

From c29b76ba7ed9af075797a2d3c96c1165e71a5f5d Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 02:04:46 +0200
Subject: [PATCH 14/50] chore: remove focus-visible from buttons

---
 app/components/Package/SizeIncrease.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/Package/SizeIncrease.vue b/app/components/Package/SizeIncrease.vue
index 35b61d066c..10fb7834e0 100644
--- a/app/components/Package/SizeIncrease.vue
+++ b/app/components/Package/SizeIncrease.vue
@@ -76,7 +76,7 @@ const {
         <button
           type="button"
           :disabled="!available || cancelling"
-          class="border border-amber-600/40 bg-amber-500/10 hover:bg-amber-500/20 rounded-md inline-flex items-center gap-1.5 text-xs font-medium text-amber-900 dark:text-amber-300 px-3 py-1.5 transition-all duration-200 ease-out focus-visible:outline-amber-600 disabled:opacity-50 disabled:cursor-not-allowed overflow-hidden"
+          class="border border-amber-600/40 bg-amber-500/10 hover:bg-amber-500/20 rounded-md inline-flex items-center gap-1.5 text-xs font-medium text-amber-900 dark:text-amber-300 px-3 py-1.5 transition-all duration-200 ease-out disabled:opacity-50 disabled:cursor-not-allowed overflow-hidden"
           @click="analyzing ? cancelAnalyzeCause() : startAnalyzeCause()"
         >
           <span class="inline-flex items-center gap-1.5">
@@ -160,7 +160,7 @@ const {
           <!-- DIFF BALANCE -->
           <details class="group border-t border-amber-600/20 mt-3 pt-3 pb-1">
             <summary
-              class="flex items-center gap-2 cursor-pointer text-sm font-medium text-amber-900 dark:text-amber-400 select-none hover:text-amber-700 dark:hover:text-amber-200 focus-visible:outline-amber-600 rounded transition-colors duration-150"
+              class="flex items-center gap-2 cursor-pointer text-sm font-medium text-amber-900 dark:text-amber-400 select-none hover:text-amber-700 dark:hover:text-amber-200 rounded transition-colors duration-150"
             >
               <span
                 class="i-lucide:chevron-right icon-rtl w-4 h-4 shrink-0 transition-transform duration-200 group-open:rotate-90 rtl:group-open:-rotate-90"
@@ -176,7 +176,7 @@ const {
                 <button
                   type="button"
                   @click="allDependencies = !allDependencies"
-                  class="inline-flex items-center gap-1 text-xs uppercase font-bold tracking-wider text-amber-900 dark:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-600/20 px-2 py-1 rounded transition-colors focus-visible:outline-amber-600"
+                  class="inline-flex items-center gap-1 text-xs uppercase font-bold tracking-wider text-amber-900 dark:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-600/20 px-2 py-1 rounded transition-colors"
                 >
                   <span
                     :class="allDependencies ? 'i-lucide:list-filter' : 'i-lucide:list-tree'"
@@ -193,7 +193,7 @@ const {
                 <button
                   type="button"
                   @click="noResultScroll = !noResultScroll"
-                  class="inline-flex items-center gap-1 text-xs uppercase font-bold tracking-wider text-amber-900 dark:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-600/20 px-2 py-1 rounded transition-colors focus-visible:outline-amber-600"
+                  class="inline-flex items-center gap-1 text-xs uppercase font-bold tracking-wider text-amber-900 dark:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-600/20 px-2 py-1 rounded transition-colors"
                 >
                   <span
                     :class="noResultScroll ? 'i-lucide:minimize-2' : 'i-lucide:maximize-2'"

From 868fd86a7354c283b46e59b4b7986fe07619e854 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 02:15:42 +0200
Subject: [PATCH 15/50] chore: remove redundant package writes on every
 revisit, use upsert

---
 app/utils/pkg-size/db.ts                      | 49 +++++++++----------
 .../pkg-size/resolve-and-persist-graph.ts     | 22 ++++++---
 2 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/app/utils/pkg-size/db.ts b/app/utils/pkg-size/db.ts
index 718d06cc6d..fa27610742 100644
--- a/app/utils/pkg-size/db.ts
+++ b/app/utils/pkg-size/db.ts
@@ -100,34 +100,29 @@ class NpmxPkgSizeDB extends Dexie {
     })
   }
 
-  async storePackage(
-    pkgKey: string,
-    pkgData: PackageData,
-    parentKey?: string,
-    childRange?: string,
-    isOptional: boolean = false,
-  ): Promise<void> {
-    if (!this.isOpen()) {
-      await this.open()
-    }
-    await this.transaction('rw', this.packages, this.dependencyEdges, async () => {
-      await this.packages.put({
-        id: pkgKey,
-        name: pkgData.name,
-        version: pkgData.version,
-        unpackedSize: pkgData.dist?.unpackedSize || 0,
-        tarball: pkgData.dist?.tarball || '',
-      })
+  async upsertPackage(pkgKey: string, pkgData: PackageData) {
+    await this.packages.put({
+      id: pkgKey,
+      name: pkgData.name,
+      version: pkgData.version,
+      unpackedSize: pkgData.dist?.unpackedSize || 0,
+      tarball: pkgData.dist?.tarball || '',
+    })
+  }
 
-      if (parentKey && childRange) {
-        await this.dependencyEdges.add({
-          parentKey,
-          childName: pkgData.name,
-          resolvedVersionKey: pkgKey,
-          childRange,
-          isOptional,
-        })
-      }
+  async addDependencyEdge(
+    parentKey: string,
+    childName: string,
+    resolvedVersionKey: string,
+    childRange: string,
+    isOptional: boolean,
+  ) {
+    await this.dependencyEdges.add({
+      parentKey,
+      childName,
+      childRange,
+      resolvedVersionKey,
+      isOptional,
     })
   }
 }
diff --git a/app/utils/pkg-size/resolve-and-persist-graph.ts b/app/utils/pkg-size/resolve-and-persist-graph.ts
index d6601d5432..95f06b444f 100644
--- a/app/utils/pkg-size/resolve-and-persist-graph.ts
+++ b/app/utils/pkg-size/resolve-and-persist-graph.ts
@@ -135,7 +135,7 @@ async function processBfsQueue(
         visited.add(pkgKey)
         packageSizes.set(pkgKey, pkgData.dist?.unpackedSize || 0)
 
-        await db.storePackage(pkgKey, pkgData, item.parentKey, item.range, item.isOptional)
+        await db.upsertPackage(pkgKey, pkgData)
 
         for (const [depName, depRange] of Object.entries(pkgData.dependencies || {})) {
           queue.push({ name: depName, range: depRange, parentKey: pkgKey, isOptional: false })
@@ -143,13 +143,23 @@ async function processBfsQueue(
         for (const [depName, depRange] of Object.entries(pkgData.optionalDependencies || {})) {
           queue.push({ name: depName, range: depRange, parentKey: pkgKey, isOptional: true })
         }
-      } else {
-        await db.storePackage(pkgKey, pkgData, item.parentKey, item.range, item.isOptional)
       }
 
-      if (item.parentKey && !item.isOptional) {
-        if (!memoryGraph.has(item.parentKey)) memoryGraph.set(item.parentKey, [])
-        memoryGraph.get(item.parentKey)!.push(pkgKey)
+      if (item.parentKey) {
+        await db.addDependencyEdge(
+          item.parentKey,
+          pkgData.name,
+          pkgKey,
+          item.range,
+          item.isOptional,
+        )
+
+        if (!item.isOptional) {
+          if (!memoryGraph.has(item.parentKey)) {
+            memoryGraph.set(item.parentKey, [])
+          }
+          memoryGraph.get(item.parentKey)!.push(pkgKey)
+        }
       }
     }
   }

From 2789b382fe081cb9a153646bfc1ee8feff51387a Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 02:18:08 +0200
Subject: [PATCH 16/50] chore: add worker error handler

---
 app/composables/pkg-size/useAnalizeCauseWorker.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/composables/pkg-size/useAnalizeCauseWorker.ts b/app/composables/pkg-size/useAnalizeCauseWorker.ts
index b0a13b7b5e..ce621d0b77 100644
--- a/app/composables/pkg-size/useAnalizeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalizeCauseWorker.ts
@@ -60,6 +60,12 @@ export function useAnalyzeCauseWorker(
     { flush: 'post' },
   )
 
+  function handleWorkerFailure(event: Event) {
+    error.value = event instanceof ErrorEvent ? event.message : 'worker failure'
+    analyzing.value = false
+    cancelling.value = false
+  }
+
   startAnalyzeCause = useThrottleFn(
     async () => {
       if (!worker || !available.value || analyzing.value) {
@@ -170,6 +176,8 @@ export function useAnalyzeCauseWorker(
       worker = module.worker
 
       worker.addEventListener('message', handleWorkerMessage)
+      worker.addEventListener('error', handleWorkerFailure)
+      worker.addEventListener('messageerror', handleWorkerFailure)
       available.value = true
     } catch (err) {
       // oxlint-disable-next-line no-console
@@ -183,6 +191,8 @@ export function useAnalyzeCauseWorker(
   onUnmounted(() => {
     if (worker) {
       worker.removeEventListener('message', handleWorkerMessage)
+      worker.removeEventListener('error', handleWorkerFailure)
+      worker.removeEventListener('messageerror', handleWorkerFailure)
     }
   })
 

From 21b689aa6a5202d178def3bec399b3954e89b371 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 02:36:50 +0200
Subject: [PATCH 17/50] chore: add worker error handler and ui error

---
 app/components/Package/SizeIncrease.vue       | 377 ++++++++++--------
 .../pkg-size/useAnalizeCauseWorker.ts         |   4 +-
 i18n/locales/en.json                          |   1 +
 i18n/locales/es.json                          |   1 +
 i18n/schema.json                              |   6 +
 5 files changed, 210 insertions(+), 179 deletions(-)

diff --git a/app/components/Package/SizeIncrease.vue b/app/components/Package/SizeIncrease.vue
index 10fb7834e0..6da204bf5c 100644
--- a/app/components/Package/SizeIncrease.vue
+++ b/app/components/Package/SizeIncrease.vue
@@ -31,6 +31,7 @@ const {
   cancelling,
   loading,
   result,
+  error,
   summary,
   noResultScroll,
   allDependencies,
@@ -106,203 +107,224 @@ const {
       </div>
 
       <Transition name="expand">
-        <div v-if="summary" class="flex flex-col">
-          <!-- SUMMARY -->
-          <div class="border-t border-amber-600/20 pt-3 flex flex-col gap-1">
-            <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
-              <span aria-hidden="true">📦</span>
-              <i18n-t keypath="package.size_increase.analyze.summary.total_size" scope="global">
-                <template #size>{{ summary.sizeDeltaText }}</template>
-                <template #bytes>
-                  <i18n-t keypath="package.size_increase.analyze.summary.bytes" scope="global">
-                    <template #bytes>{{
-                      summary.sizeDeltaBytesText || summary.sizeDelta
-                    }}</template>
-                  </i18n-t>
-                </template>
-              </i18n-t>
-            </p>
-            <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
-              <span aria-hidden="true">🧠</span>
-              <i18n-t keypath="package.size_increase.analyze.summary.js_core_size" scope="global">
-                <template #size>{{ summary.mandatorySizeDeltaText }}</template>
-                <template #bytes>
-                  <i18n-t keypath="package.size_increase.analyze.summary.bytes" scope="global">
-                    <template #bytes>{{
-                      summary.mandatorySizeDeltaBytesText || summary.mandatorySizeDelta
-                    }}</template>
-                  </i18n-t>
-                </template>
-              </i18n-t>
-            </p>
-            <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
-              <span aria-hidden="true">🧩</span>
-              <i18n-t keypath="package.size_increase.analyze.summary.deps_variation" scope="global">
-                <template #net>{{
-                  summary.netDependenciesText ||
-                  (summary.netDependencies > 0
-                    ? `+${summary.netDependencies}`
-                    : summary.netDependencies)
-                }}</template>
-                <template #details>
-                  <i18n-t
-                    keypath="package.size_increase.analyze.summary.deps_details"
-                    scope="global"
-                  >
-                    <template #added>{{ summary.added }}</template>
-                    <template #removed>{{ summary.removed }}</template>
-                  </i18n-t>
-                </template>
-              </i18n-t>
-            </p>
-          </div>
-
-          <!-- DIFF BALANCE -->
-          <details class="group border-t border-amber-600/20 mt-3 pt-3 pb-1">
-            <summary
-              class="flex items-center gap-2 cursor-pointer text-sm font-medium text-amber-900 dark:text-amber-400 select-none hover:text-amber-700 dark:hover:text-amber-200 rounded transition-colors duration-150"
+        <div v-if="summary || error" class="flex flex-col">
+          <div v-if="error" class="border-t border-amber-600/20 pt-3 flex flex-col">
+            <div
+              class="border border-rose-500/20 bg-rose-500/10 rounded-md px-3 py-2.5 flex items-center gap-2"
             >
               <span
-                class="i-lucide:chevron-right icon-rtl w-4 h-4 shrink-0 transition-transform duration-200 group-open:rotate-90 rtl:group-open:-rotate-90"
+                class="i-lucide:alert-circle w-4 h-4 shrink-0 text-rose-700 dark:text-rose-400 mt-0.5"
                 aria-hidden="true"
               />
-              {{ $t('package.size_increase.analyze.diff') }}
-            </summary>
-
-            <div class="mt-3">
-              <div
-                class="flex items-center justify-start gap-1.5 mb-2 pb-2 border-b border-amber-600/10"
-              >
-                <button
-                  type="button"
-                  @click="allDependencies = !allDependencies"
-                  class="inline-flex items-center gap-1 text-xs uppercase font-bold tracking-wider text-amber-900 dark:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-600/20 px-2 py-1 rounded transition-colors"
-                >
-                  <span
-                    :class="allDependencies ? 'i-lucide:list-filter' : 'i-lucide:list-tree'"
-                    class="w-3 h-3 shrink-0"
-                    aria-hidden="true"
-                  />
-                  <span>{{
-                    allDependencies
-                      ? $t('package.size_increase.analyze.only_deps')
-                      : $t('package.size_increase.analyze.all_deps')
-                  }}</span>
-                </button>
-
-                <button
-                  type="button"
-                  @click="noResultScroll = !noResultScroll"
-                  class="inline-flex items-center gap-1 text-xs uppercase font-bold tracking-wider text-amber-900 dark:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-600/20 px-2 py-1 rounded transition-colors"
+              <div class="flex flex-col gap-1">
+                <span
+                  class="text-xs font-bold uppercase tracking-wider text-rose-800 dark:text-rose-400"
                 >
-                  <span
-                    :class="noResultScroll ? 'i-lucide:minimize-2' : 'i-lucide:maximize-2'"
-                    class="w-3 h-3 shrink-0"
-                    aria-hidden="true"
-                  />
-                  <span>{{
-                    noResultScroll
-                      ? $t('package.size_increase.analyze.collapse')
-                      : $t('package.size_increase.analyze.expand')
-                  }}</span>
-                </button>
+                  {{ $t('package.size_increase.analyze.error') }}
+                </span>
               </div>
-
-              <div
-                class="custom-scrollbar pe-1 transition-all duration-300"
-                :class="{ 'overflow-y-auto max-h-[216px]': !noResultScroll }"
+            </div>
+          </div>
+          <template v-else-if="summary">
+            <!-- SUMMARY -->
+            <div class="border-t border-amber-600/20 pt-3 flex flex-col gap-1">
+              <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
+                <span aria-hidden="true">📦</span>
+                <i18n-t keypath="package.size_increase.analyze.summary.total_size" scope="global">
+                  <template #size>{{ summary.sizeDeltaText }}</template>
+                  <template #bytes>
+                    <i18n-t keypath="package.size_increase.analyze.summary.bytes" scope="global">
+                      <template #bytes>{{
+                        summary.sizeDeltaBytesText || summary.sizeDelta
+                      }}</template>
+                    </i18n-t>
+                  </template>
+                </i18n-t>
+              </p>
+              <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
+                <span aria-hidden="true">🧠</span>
+                <i18n-t keypath="package.size_increase.analyze.summary.js_core_size" scope="global">
+                  <template #size>{{ summary.mandatorySizeDeltaText }}</template>
+                  <template #bytes>
+                    <i18n-t keypath="package.size_increase.analyze.summary.bytes" scope="global">
+                      <template #bytes>{{
+                        summary.mandatorySizeDeltaBytesText || summary.mandatorySizeDelta
+                      }}</template>
+                    </i18n-t>
+                  </template>
+                </i18n-t>
+              </p>
+              <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
+                <span aria-hidden="true">🧩</span>
+                <i18n-t
+                  keypath="package.size_increase.analyze.summary.deps_variation"
+                  scope="global"
+                >
+                  <template #net>{{
+                    summary.netDependenciesText ||
+                    (summary.netDependencies > 0
+                      ? `+${summary.netDependencies}`
+                      : summary.netDependencies)
+                  }}</template>
+                  <template #details>
+                    <i18n-t
+                      keypath="package.size_increase.analyze.summary.deps_details"
+                      scope="global"
+                    >
+                      <template #added>{{ summary.added }}</template>
+                      <template #removed>{{ summary.removed }}</template>
+                    </i18n-t>
+                  </template>
+                </i18n-t>
+              </p>
+            </div>
+            <!-- DIFF BALANCE -->
+            <details class="group border-t border-amber-600/20 mt-3 pt-3 pb-1">
+              <summary
+                class="flex items-center gap-2 cursor-pointer text-sm font-medium text-amber-900 dark:text-amber-400 select-none hover:text-amber-700 dark:hover:text-amber-200 rounded transition-colors duration-150"
               >
-                <ul
-                  v-if="result && result.length > 0"
-                  class="flex flex-col gap-1.5 m-0 p-0 list-none pe-1"
+                <span
+                  class="i-lucide:chevron-right icon-rtl w-4 h-4 shrink-0 transition-transform duration-200 group-open:rotate-90 rtl:group-open:-rotate-90"
+                  aria-hidden="true"
+                />
+                {{ $t('package.size_increase.analyze.diff') }}
+              </summary>
+
+              <div class="mt-3">
+                <div
+                  class="flex items-center justify-start gap-1.5 mb-2 pb-2 border-b border-amber-600/10"
                 >
-                  <li
-                    v-for="(item, index) in result"
-                    :key="index"
-                    class="flex flex-wrap items-center justify-between gap-2 py-1.5 px-2 rounded-md bg-amber-500/5 hover:bg-amber-500/10 transition-colors border border-amber-600/10"
+                  <button
+                    type="button"
+                    @click="allDependencies = !allDependencies"
+                    class="inline-flex items-center gap-1 text-xs uppercase font-bold tracking-wider text-amber-900 dark:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-600/20 px-2 py-1 rounded transition-colors"
                   >
-                    <div class="flex items-center gap-2.5">
-                      <abbr
-                        :title="item.statusText || item.status"
-                        class="flex shrink-0 items-center justify-center w-6 h-6 rounded border no-underline cursor-help"
-                        :class="{
-                          'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border-emerald-500/20':
-                            item.status === 'added',
-                          'bg-rose-500/10 text-rose-700 dark:text-rose-400 border-rose-500/20':
-                            item.status === 'removed',
-                          'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20':
-                            item.status === 'changed',
-                        }"
-                      >
-                        <span
-                          v-if="item.status === 'added'"
-                          class="i-lucide:plus w-3.5 h-3.5 shrink-0"
-                          aria-hidden="true"
-                        />
-                        <span
-                          v-else-if="item.status === 'removed'"
-                          class="i-lucide:minus w-3.5 h-3.5 shrink-0"
-                          aria-hidden="true"
-                        />
-                        <span
-                          v-else-if="item.status === 'changed'"
-                          class="i-lucide:arrow-left-right w-3.5 h-3.5 shrink-0"
-                          aria-hidden="true"
-                        />
-                      </abbr>
+                    <span
+                      :class="allDependencies ? 'i-lucide:list-filter' : 'i-lucide:list-tree'"
+                      class="w-3 h-3 shrink-0"
+                      aria-hidden="true"
+                    />
+                    <span>{{
+                      allDependencies
+                        ? $t('package.size_increase.analyze.only_deps')
+                        : $t('package.size_increase.analyze.all_deps')
+                    }}</span>
+                  </button>
 
-                      <span
-                        class="font-mono text-2xs font-semibold text-amber-900 dark:text-amber-300 break-all"
-                      >
-                        {{ item.name }}
-                      </span>
-                    </div>
+                  <button
+                    type="button"
+                    @click="noResultScroll = !noResultScroll"
+                    class="inline-flex items-center gap-1 text-xs uppercase font-bold tracking-wider text-amber-900 dark:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-600/20 px-2 py-1 rounded transition-colors"
+                  >
+                    <span
+                      :class="noResultScroll ? 'i-lucide:minimize-2' : 'i-lucide:maximize-2'"
+                      class="w-3 h-3 shrink-0"
+                      aria-hidden="true"
+                    />
+                    <span>{{
+                      noResultScroll
+                        ? $t('package.size_increase.analyze.collapse')
+                        : $t('package.size_increase.analyze.expand')
+                    }}</span>
+                  </button>
+                </div>
 
-                    <div class="flex items-center gap-1.5 ms-auto shrink-0">
-                      <template v-if="item.status === 'changed' && item.v1 && item.v2">
-                        <span
-                          class="font-mono text-2xs line-through text-amber-700/80 dark:text-amber-500/80"
+                <div
+                  class="custom-scrollbar pe-1 transition-all duration-300"
+                  :class="{ 'overflow-y-auto max-h-[216px]': !noResultScroll }"
+                >
+                  <ul
+                    v-if="result && result.length > 0"
+                    class="flex flex-col gap-1.5 m-0 p-0 list-none pe-1"
+                  >
+                    <li
+                      v-for="(item, index) in result"
+                      :key="index"
+                      class="flex flex-wrap items-center justify-between gap-2 py-1.5 px-2 rounded-md bg-amber-500/5 hover:bg-amber-500/10 transition-colors border border-amber-600/10"
+                    >
+                      <div class="flex items-center gap-2.5">
+                        <abbr
+                          :title="item.statusText || item.status"
+                          class="flex shrink-0 items-center justify-center w-6 h-6 rounded border no-underline cursor-help"
+                          :class="{
+                            'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border-emerald-500/20':
+                              item.status === 'added',
+                            'bg-rose-500/10 text-rose-700 dark:text-rose-400 border-rose-500/20':
+                              item.status === 'removed',
+                            'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20':
+                              item.status === 'changed',
+                          }"
                         >
-                          {{ item.v1.version }}
-                        </span>
-                        <span
-                          class="i-lucide:arrow-right w-3.5 h-3.5 shrink-0 text-amber-700/60 rtl:rotate-180"
-                        />
+                          <span
+                            v-if="item.status === 'added'"
+                            class="i-lucide:plus w-3.5 h-3.5 shrink-0"
+                            aria-hidden="true"
+                          />
+                          <span
+                            v-else-if="item.status === 'removed'"
+                            class="i-lucide:minus w-3.5 h-3.5 shrink-0"
+                            aria-hidden="true"
+                          />
+                          <span
+                            v-else-if="item.status === 'changed'"
+                            class="i-lucide:arrow-left-right w-3.5 h-3.5 shrink-0"
+                            aria-hidden="true"
+                          />
+                        </abbr>
+
                         <span
-                          class="font-mono text-2xs font-bold text-amber-900 dark:text-amber-300"
+                          class="font-mono text-2xs font-semibold text-amber-900 dark:text-amber-300 break-all"
                         >
-                          {{ item.v2.version }}
+                          {{ item.name }}
                         </span>
-                      </template>
-                      <template v-else>
+                      </div>
+
+                      <div class="flex items-center gap-1.5 ms-auto shrink-0">
+                        <template v-if="item.status === 'changed' && item.v1 && item.v2">
+                          <span
+                            class="font-mono text-2xs line-through text-amber-700/80 dark:text-amber-500/80"
+                          >
+                            {{ item.v1.version }}
+                          </span>
+                          <span
+                            class="i-lucide:arrow-right w-3.5 h-3.5 shrink-0 text-amber-700/60 rtl:rotate-180"
+                          />
+                          <span
+                            class="font-mono text-2xs font-bold text-amber-900 dark:text-amber-300"
+                          >
+                            {{ item.v2.version }}
+                          </span>
+                        </template>
+                        <template v-else>
+                          <span
+                            class="font-mono text-2xs font-medium text-amber-900 dark:text-amber-300"
+                          >
+                            {{ (item.v2 || item.v1)?.version }}
+                          </span>
+                        </template>
+
+                        <span class="text-amber-600/40 mx-1 shrink-0">|</span>
+
                         <span
-                          class="font-mono text-2xs font-medium text-amber-900 dark:text-amber-300"
+                          class="font-mono text-2xs font-bold min-w-14 text-end shrink-0"
+                          :class="{
+                            'text-emerald-700 dark:text-emerald-400': item.status === 'removed',
+                            'text-rose-700 dark:text-rose-400': item.status === 'added',
+                            'text-amber-800 dark:text-amber-400': item.status === 'changed',
+                          }"
                         >
-                          {{ (item.v2 || item.v1)?.version }}
+                          {{ item.sizeDeltaText }}
                         </span>
-                      </template>
-
-                      <span class="text-amber-600/40 mx-1 shrink-0">|</span>
-
-                      <span
-                        class="font-mono text-2xs font-bold min-w-14 text-end shrink-0"
-                        :class="{
-                          'text-emerald-700 dark:text-emerald-400': item.status === 'removed',
-                          'text-rose-700 dark:text-rose-400': item.status === 'added',
-                          'text-amber-800 dark:text-amber-400': item.status === 'changed',
-                        }"
-                      >
-                        {{ item.sizeDeltaText }}
-                      </span>
-                    </div>
-                  </li>
-                </ul>
-                <div v-else class="text-xs text-amber-700/80 dark:text-amber-500/80 py-1">
-                  {{ $t('package.size_increase.analyze.summary.no_deps') }}
+                      </div>
+                    </li>
+                  </ul>
+                  <div v-else class="text-xs text-amber-700/80 dark:text-amber-500/80 py-1">
+                    {{ $t('package.size_increase.analyze.summary.no_deps') }}
+                  </div>
                 </div>
               </div>
-            </div>
-          </details>
+            </details>
+          </template>
         </div>
       </Transition>
     </div>
@@ -317,6 +339,7 @@ const {
     opacity 0.25s ease-in-out;
   overflow: hidden;
   opacity: 1;
+  max-height: 800px; /* 🔥 NECESARIO: Sin esto, max-height pega un salto instántaneo a su altura final 🔥 */
 }
 
 .expand-enter-from,
diff --git a/app/composables/pkg-size/useAnalizeCauseWorker.ts b/app/composables/pkg-size/useAnalizeCauseWorker.ts
index ce621d0b77..3d05ab87d8 100644
--- a/app/composables/pkg-size/useAnalizeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalizeCauseWorker.ts
@@ -25,7 +25,7 @@ export function useAnalyzeCauseWorker(
     return raw.filter(v => !v.isOptional)
   })
   const summary = shallowRef<UISummary | undefined>()
-  const error = shallowRef<string | null>(null)
+  const error = shallowRef<string | undefined>()
 
   let startAnalyzeCause: () => void = () => {}
   let cancelAnalyzeCause: () => void = () => {}
@@ -80,7 +80,7 @@ export function useAnalyzeCauseWorker(
             ? crypto.randomUUID()
             : await import('node:crypto').then(({ randomUUID }) => randomUUID())
       cancelling.value = false
-      error.value = null
+      error.value = undefined
       summary.value = undefined
       rawResult.value = []
 
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index d4b472d559..2040287558 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -434,6 +434,7 @@
         "analyze": "Analyze",
         "cancel": "Cancel",
         "cancelling": "Cancelling...",
+        "error": "Analysis failed, check the console for details.",
         "summary": {
           "total_size": "Size variation (total): {size} {bytes}",
           "js_core_size": "Size variation (only dependencies): {size} {bytes}",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index e96e3378d5..ca8aab5209 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -426,6 +426,7 @@
         "analyze": "Analizar",
         "cancel": "Cancelar",
         "cancelling": "Cancelando...",
+        "error": "El análisis falló, revisa la consola para más detalles.",
         "summary": {
           "total_size": "Variación de tamaño (total): {size} {bytes}",
           "js_core_size": "Variación de tamaño (solo dependencias): {size} {bytes}",
diff --git a/i18n/schema.json b/i18n/schema.json
index 7c4b675d2e..10ee9d7aff 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1306,6 +1306,9 @@
                 "cancelling": {
                   "type": "string"
                 },
+                "error": {
+                  "type": "string"
+                },
                 "summary": {
                   "type": "object",
                   "properties": {
@@ -1323,6 +1326,9 @@
                     },
                     "deps_details": {
                       "type": "string"
+                    },
+                    "no_deps": {
+                      "type": "string"
                     }
                   },
                   "additionalProperties": false

From b5104f252b68155892273d25247493ca1cacca3e Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 02:57:59 +0200
Subject: [PATCH 18/50] chore: extract analysis to its own component

---
 app/components/Package/SizeIncrease.vue       | 347 +-----------------
 .../Package/SizeIncreaseAnalysis.vue          | 339 +++++++++++++++++
 .../pkg-size/useAnalizeCauseWorker.ts         |   8 +-
 3 files changed, 348 insertions(+), 346 deletions(-)
 create mode 100644 app/components/Package/SizeIncreaseAnalysis.vue

diff --git a/app/components/Package/SizeIncrease.vue b/app/components/Package/SizeIncrease.vue
index 6da204bf5c..de74ec685c 100644
--- a/app/components/Package/SizeIncrease.vue
+++ b/app/components/Package/SizeIncrease.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { InstallSizeDiff } from '~/composables/useInstallSizeDiff'
-import { useAnalyzeCauseWorker } from '~/composables/pkg-size/useAnalizeCauseWorker'
 import { computed } from 'vue'
 
 const props = defineProps<{
@@ -14,30 +13,6 @@ const numberFormatter = useNumberFormatter()
 const percentFormatter = useNumberFormatter({ style: 'percent' })
 
 const sizePercent = computed(() => percentFormatter.value.format(Math.abs(props.diff.sizeRatio)))
-
-const usePackage = computed(() => {
-  return props.packageName
-})
-const useVersion = computed(() => {
-  return props.version
-})
-const useComparedVersion = computed(() => {
-  return props.diff.comparisonVersion
-})
-
-const {
-  available,
-  analyzing,
-  cancelling,
-  loading,
-  result,
-  error,
-  summary,
-  noResultScroll,
-  allDependencies,
-  startAnalyzeCause,
-  cancelAnalyzeCause,
-} = useAnalyzeCauseWorker(usePackage, useVersion, useComparedVersion)
 </script>
 
 <template>
@@ -72,322 +47,10 @@ const {
       </i18n-t>
     </p>
 
-    <div class="mt-3 flex flex-col gap-3">
-      <div class="flex justify-start">
-        <button
-          type="button"
-          :disabled="!available || cancelling"
-          class="border border-amber-600/40 bg-amber-500/10 hover:bg-amber-500/20 rounded-md inline-flex items-center gap-1.5 text-xs font-medium text-amber-900 dark:text-amber-300 px-3 py-1.5 transition-all duration-200 ease-out disabled:opacity-50 disabled:cursor-not-allowed overflow-hidden"
-          @click="analyzing ? cancelAnalyzeCause() : startAnalyzeCause()"
-        >
-          <span class="inline-flex items-center gap-1.5">
-            <span
-              v-if="loading || analyzing || cancelling"
-              class="i-lucide:loader-2 animate-spin w-3.5 h-3.5 shrink-0 transition-opacity duration-150"
-              aria-hidden="true"
-            />
-
-            <span
-              v-if="analyzing && !cancelling"
-              class="i-lucide:square w-3 h-3 fill-current shrink-0"
-              aria-hidden="true"
-            />
-
-            <span>
-              {{
-                cancelling
-                  ? $t('package.size_increase.analyze.cancelling')
-                  : analyzing
-                    ? $t('package.size_increase.analyze.cancel')
-                    : $t('package.size_increase.analyze.analyze')
-              }}
-            </span>
-          </span>
-        </button>
-      </div>
-
-      <Transition name="expand">
-        <div v-if="summary || error" class="flex flex-col">
-          <div v-if="error" class="border-t border-amber-600/20 pt-3 flex flex-col">
-            <div
-              class="border border-rose-500/20 bg-rose-500/10 rounded-md px-3 py-2.5 flex items-center gap-2"
-            >
-              <span
-                class="i-lucide:alert-circle w-4 h-4 shrink-0 text-rose-700 dark:text-rose-400 mt-0.5"
-                aria-hidden="true"
-              />
-              <div class="flex flex-col gap-1">
-                <span
-                  class="text-xs font-bold uppercase tracking-wider text-rose-800 dark:text-rose-400"
-                >
-                  {{ $t('package.size_increase.analyze.error') }}
-                </span>
-              </div>
-            </div>
-          </div>
-          <template v-else-if="summary">
-            <!-- SUMMARY -->
-            <div class="border-t border-amber-600/20 pt-3 flex flex-col gap-1">
-              <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
-                <span aria-hidden="true">📦</span>
-                <i18n-t keypath="package.size_increase.analyze.summary.total_size" scope="global">
-                  <template #size>{{ summary.sizeDeltaText }}</template>
-                  <template #bytes>
-                    <i18n-t keypath="package.size_increase.analyze.summary.bytes" scope="global">
-                      <template #bytes>{{
-                        summary.sizeDeltaBytesText || summary.sizeDelta
-                      }}</template>
-                    </i18n-t>
-                  </template>
-                </i18n-t>
-              </p>
-              <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
-                <span aria-hidden="true">🧠</span>
-                <i18n-t keypath="package.size_increase.analyze.summary.js_core_size" scope="global">
-                  <template #size>{{ summary.mandatorySizeDeltaText }}</template>
-                  <template #bytes>
-                    <i18n-t keypath="package.size_increase.analyze.summary.bytes" scope="global">
-                      <template #bytes>{{
-                        summary.mandatorySizeDeltaBytesText || summary.mandatorySizeDelta
-                      }}</template>
-                    </i18n-t>
-                  </template>
-                </i18n-t>
-              </p>
-              <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
-                <span aria-hidden="true">🧩</span>
-                <i18n-t
-                  keypath="package.size_increase.analyze.summary.deps_variation"
-                  scope="global"
-                >
-                  <template #net>{{
-                    summary.netDependenciesText ||
-                    (summary.netDependencies > 0
-                      ? `+${summary.netDependencies}`
-                      : summary.netDependencies)
-                  }}</template>
-                  <template #details>
-                    <i18n-t
-                      keypath="package.size_increase.analyze.summary.deps_details"
-                      scope="global"
-                    >
-                      <template #added>{{ summary.added }}</template>
-                      <template #removed>{{ summary.removed }}</template>
-                    </i18n-t>
-                  </template>
-                </i18n-t>
-              </p>
-            </div>
-            <!-- DIFF BALANCE -->
-            <details class="group border-t border-amber-600/20 mt-3 pt-3 pb-1">
-              <summary
-                class="flex items-center gap-2 cursor-pointer text-sm font-medium text-amber-900 dark:text-amber-400 select-none hover:text-amber-700 dark:hover:text-amber-200 rounded transition-colors duration-150"
-              >
-                <span
-                  class="i-lucide:chevron-right icon-rtl w-4 h-4 shrink-0 transition-transform duration-200 group-open:rotate-90 rtl:group-open:-rotate-90"
-                  aria-hidden="true"
-                />
-                {{ $t('package.size_increase.analyze.diff') }}
-              </summary>
-
-              <div class="mt-3">
-                <div
-                  class="flex items-center justify-start gap-1.5 mb-2 pb-2 border-b border-amber-600/10"
-                >
-                  <button
-                    type="button"
-                    @click="allDependencies = !allDependencies"
-                    class="inline-flex items-center gap-1 text-xs uppercase font-bold tracking-wider text-amber-900 dark:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-600/20 px-2 py-1 rounded transition-colors"
-                  >
-                    <span
-                      :class="allDependencies ? 'i-lucide:list-filter' : 'i-lucide:list-tree'"
-                      class="w-3 h-3 shrink-0"
-                      aria-hidden="true"
-                    />
-                    <span>{{
-                      allDependencies
-                        ? $t('package.size_increase.analyze.only_deps')
-                        : $t('package.size_increase.analyze.all_deps')
-                    }}</span>
-                  </button>
-
-                  <button
-                    type="button"
-                    @click="noResultScroll = !noResultScroll"
-                    class="inline-flex items-center gap-1 text-xs uppercase font-bold tracking-wider text-amber-900 dark:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-600/20 px-2 py-1 rounded transition-colors"
-                  >
-                    <span
-                      :class="noResultScroll ? 'i-lucide:minimize-2' : 'i-lucide:maximize-2'"
-                      class="w-3 h-3 shrink-0"
-                      aria-hidden="true"
-                    />
-                    <span>{{
-                      noResultScroll
-                        ? $t('package.size_increase.analyze.collapse')
-                        : $t('package.size_increase.analyze.expand')
-                    }}</span>
-                  </button>
-                </div>
-
-                <div
-                  class="custom-scrollbar pe-1 transition-all duration-300"
-                  :class="{ 'overflow-y-auto max-h-[216px]': !noResultScroll }"
-                >
-                  <ul
-                    v-if="result && result.length > 0"
-                    class="flex flex-col gap-1.5 m-0 p-0 list-none pe-1"
-                  >
-                    <li
-                      v-for="(item, index) in result"
-                      :key="index"
-                      class="flex flex-wrap items-center justify-between gap-2 py-1.5 px-2 rounded-md bg-amber-500/5 hover:bg-amber-500/10 transition-colors border border-amber-600/10"
-                    >
-                      <div class="flex items-center gap-2.5">
-                        <abbr
-                          :title="item.statusText || item.status"
-                          class="flex shrink-0 items-center justify-center w-6 h-6 rounded border no-underline cursor-help"
-                          :class="{
-                            'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border-emerald-500/20':
-                              item.status === 'added',
-                            'bg-rose-500/10 text-rose-700 dark:text-rose-400 border-rose-500/20':
-                              item.status === 'removed',
-                            'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20':
-                              item.status === 'changed',
-                          }"
-                        >
-                          <span
-                            v-if="item.status === 'added'"
-                            class="i-lucide:plus w-3.5 h-3.5 shrink-0"
-                            aria-hidden="true"
-                          />
-                          <span
-                            v-else-if="item.status === 'removed'"
-                            class="i-lucide:minus w-3.5 h-3.5 shrink-0"
-                            aria-hidden="true"
-                          />
-                          <span
-                            v-else-if="item.status === 'changed'"
-                            class="i-lucide:arrow-left-right w-3.5 h-3.5 shrink-0"
-                            aria-hidden="true"
-                          />
-                        </abbr>
-
-                        <span
-                          class="font-mono text-2xs font-semibold text-amber-900 dark:text-amber-300 break-all"
-                        >
-                          {{ item.name }}
-                        </span>
-                      </div>
-
-                      <div class="flex items-center gap-1.5 ms-auto shrink-0">
-                        <template v-if="item.status === 'changed' && item.v1 && item.v2">
-                          <span
-                            class="font-mono text-2xs line-through text-amber-700/80 dark:text-amber-500/80"
-                          >
-                            {{ item.v1.version }}
-                          </span>
-                          <span
-                            class="i-lucide:arrow-right w-3.5 h-3.5 shrink-0 text-amber-700/60 rtl:rotate-180"
-                          />
-                          <span
-                            class="font-mono text-2xs font-bold text-amber-900 dark:text-amber-300"
-                          >
-                            {{ item.v2.version }}
-                          </span>
-                        </template>
-                        <template v-else>
-                          <span
-                            class="font-mono text-2xs font-medium text-amber-900 dark:text-amber-300"
-                          >
-                            {{ (item.v2 || item.v1)?.version }}
-                          </span>
-                        </template>
-
-                        <span class="text-amber-600/40 mx-1 shrink-0">|</span>
-
-                        <span
-                          class="font-mono text-2xs font-bold min-w-14 text-end shrink-0"
-                          :class="{
-                            'text-emerald-700 dark:text-emerald-400': item.status === 'removed',
-                            'text-rose-700 dark:text-rose-400': item.status === 'added',
-                            'text-amber-800 dark:text-amber-400': item.status === 'changed',
-                          }"
-                        >
-                          {{ item.sizeDeltaText }}
-                        </span>
-                      </div>
-                    </li>
-                  </ul>
-                  <div v-else class="text-xs text-amber-700/80 dark:text-amber-500/80 py-1">
-                    {{ $t('package.size_increase.analyze.summary.no_deps') }}
-                  </div>
-                </div>
-              </div>
-            </details>
-          </template>
-        </div>
-      </Transition>
-    </div>
+    <PackageSizeIncreaseAnalysis
+      :package-name="packageName"
+      :version="version"
+      :comparison-version="diff.comparisonVersion"
+    />
   </div>
 </template>
-
-<style scoped>
-.expand-enter-active,
-.expand-leave-active {
-  transition:
-    max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
-    opacity 0.25s ease-in-out;
-  overflow: hidden;
-  opacity: 1;
-  max-height: 800px; /* 🔥 NECESARIO: Sin esto, max-height pega un salto instántaneo a su altura final 🔥 */
-}
-
-.expand-enter-from,
-.expand-leave-to {
-  max-height: 0;
-  opacity: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-details[dir='rtl']:not([open]) .icon-rtl {
-  transform: scale(-1, 1);
-}
-summary {
-  list-style: none;
-}
-summary::-webkit-details-marker {
-  display: none;
-}
-
-.custom-scrollbar {
-  scrollbar-width: auto;
-  scrollbar-color: rgba(217, 119, 6, 0.3) transparent;
-}
-
-.custom-scrollbar::-webkit-scrollbar {
-  width: 6px;
-}
-.custom-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-.custom-scrollbar::-webkit-scrollbar-thumb {
-  background-color: rgba(217, 119, 6, 0.3);
-  border-radius: 10px;
-}
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(217, 119, 6, 0.5);
-}
-
-:global(.dark) .custom-scrollbar {
-  scrollbar-color: rgba(251, 191, 36, 0.3) transparent;
-}
-:global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb {
-  background-color: rgba(251, 191, 36, 0.3);
-}
-:global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(251, 191, 36, 0.5);
-}
-</style>
diff --git a/app/components/Package/SizeIncreaseAnalysis.vue b/app/components/Package/SizeIncreaseAnalysis.vue
new file mode 100644
index 0000000000..ee5f417bc6
--- /dev/null
+++ b/app/components/Package/SizeIncreaseAnalysis.vue
@@ -0,0 +1,339 @@
+<script setup lang="ts">
+import { useAnalyzeCauseWorker } from '~/composables/pkg-size/useAnalizeCauseWorker'
+
+const packageName = defineModel<string | null | undefined>('packageName')
+const version = defineModel<string | null | undefined>('version')
+const comparisonVersion = defineModel<string | null | undefined>('comparisonVersion')
+
+const {
+  available,
+  analyzing,
+  cancelling,
+  loading,
+  result,
+  error,
+  summary,
+  noResultScroll,
+  allDependencies,
+  startAnalyzeCause,
+  cancelAnalyzeCause,
+} = useAnalyzeCauseWorker(packageName, version, comparisonVersion)
+</script>
+
+<template>
+  <div class="mt-3 flex flex-col">
+    <div class="flex justify-start">
+      <button
+        type="button"
+        :disabled="!available || cancelling"
+        class="border border-amber-600/40 bg-amber-500/10 hover:bg-amber-500/20 rounded-md inline-flex items-center gap-1.5 text-xs font-medium text-amber-900 dark:text-amber-300 px-3 py-1.5 transition-all duration-200 ease-out disabled:opacity-50 disabled:cursor-not-allowed overflow-hidden"
+        @click="analyzing ? cancelAnalyzeCause() : startAnalyzeCause()"
+      >
+        <span class="inline-flex items-center gap-1.5">
+          <span
+            v-if="loading || analyzing || cancelling"
+            class="i-lucide:loader-2 animate-spin w-3.5 h-3.5 shrink-0 transition-opacity duration-150"
+            aria-hidden="true"
+          />
+
+          <span
+            v-if="analyzing && !cancelling"
+            class="i-lucide:square w-3 h-3 fill-current shrink-0"
+            aria-hidden="true"
+          />
+
+          <span>
+            {{
+              cancelling
+                ? $t('package.size_increase.analyze.cancelling')
+                : analyzing
+                  ? $t('package.size_increase.analyze.cancel')
+                  : $t('package.size_increase.analyze.analyze')
+            }}
+          </span>
+        </span>
+      </button>
+    </div>
+
+    <Transition name="expand">
+      <div v-if="summary || error" class="mt-3 border-t border-amber-600/20 pt-3 flex flex-col">
+        <div
+          v-if="error"
+          class="border border-rose-500/20 bg-rose-500/10 rounded-md px-3 py-2.5 flex items-center gap-2"
+        >
+          <span
+            class="i-lucide:alert-circle w-4 h-4 shrink-0 text-rose-700 dark:text-rose-400 mt-0.5"
+            aria-hidden="true"
+          />
+          <div class="flex flex-col gap-1">
+            <span
+              class="text-xs font-bold uppercase tracking-wider text-rose-800 dark:text-rose-400"
+            >
+              {{ $t('package.size_increase.analyze.error') }}
+            </span>
+          </div>
+        </div>
+        <template v-else-if="summary">
+          <!-- SUMMARY -->
+          <div class="flex flex-col gap-1">
+            <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
+              <span aria-hidden="true">📦</span>
+              <i18n-t keypath="package.size_increase.analyze.summary.total_size" scope="global">
+                <template #size>{{ summary.sizeDeltaText }}</template>
+                <template #bytes>
+                  <i18n-t keypath="package.size_increase.analyze.summary.bytes" scope="global">
+                    <template #bytes>{{
+                      summary.sizeDeltaBytesText || summary.sizeDelta
+                    }}</template>
+                  </i18n-t>
+                </template>
+              </i18n-t>
+            </p>
+            <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
+              <span aria-hidden="true">🧠</span>
+              <i18n-t keypath="package.size_increase.analyze.summary.js_core_size" scope="global">
+                <template #size>{{ summary.mandatorySizeDeltaText }}</template>
+                <template #bytes>
+                  <i18n-t keypath="package.size_increase.analyze.summary.bytes" scope="global">
+                    <template #bytes>{{
+                      summary.mandatorySizeDeltaBytesText || summary.mandatorySizeDelta
+                    }}</template>
+                  </i18n-t>
+                </template>
+              </i18n-t>
+            </p>
+            <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
+              <span aria-hidden="true">🧩</span>
+              <i18n-t keypath="package.size_increase.analyze.summary.deps_variation" scope="global">
+                <template #net>{{
+                  summary.netDependenciesText ||
+                  (summary.netDependencies > 0
+                    ? `+${summary.netDependencies}`
+                    : summary.netDependencies)
+                }}</template>
+                <template #details>
+                  <i18n-t
+                    keypath="package.size_increase.analyze.summary.deps_details"
+                    scope="global"
+                  >
+                    <template #added>{{ summary.added }}</template>
+                    <template #removed>{{ summary.removed }}</template>
+                  </i18n-t>
+                </template>
+              </i18n-t>
+            </p>
+          </div>
+          <!-- DIFF BALANCE -->
+          <details class="group border-t border-amber-600/20 mt-3 pt-3 pb-1">
+            <summary
+              class="flex items-center gap-2 cursor-pointer text-sm font-medium text-amber-900 dark:text-amber-400 select-none hover:text-amber-700 dark:hover:text-amber-200 rounded transition-colors duration-150"
+            >
+              <span
+                class="i-lucide:chevron-right icon-rtl w-4 h-4 shrink-0 transition-transform duration-200 group-open:rotate-90 rtl:group-open:-rotate-90"
+                aria-hidden="true"
+              />
+              {{ $t('package.size_increase.analyze.diff') }}
+            </summary>
+
+            <div class="mt-3">
+              <div
+                class="flex items-center justify-start gap-1.5 mb-2 pb-2 border-b border-amber-600/10"
+              >
+                <button
+                  type="button"
+                  @click="allDependencies = !allDependencies"
+                  class="inline-flex items-center gap-1 text-xs uppercase font-bold tracking-wider text-amber-900 dark:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-600/20 px-2 py-1 rounded transition-colors"
+                >
+                  <span
+                    :class="allDependencies ? 'i-lucide:list-filter' : 'i-lucide:list-tree'"
+                    class="w-3 h-3 shrink-0"
+                    aria-hidden="true"
+                  />
+                  <span>{{
+                    allDependencies
+                      ? $t('package.size_increase.analyze.only_deps')
+                      : $t('package.size_increase.analyze.all_deps')
+                  }}</span>
+                </button>
+
+                <button
+                  type="button"
+                  @click="noResultScroll = !noResultScroll"
+                  class="inline-flex items-center gap-1 text-xs uppercase font-bold tracking-wider text-amber-900 dark:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-600/20 px-2 py-1 rounded transition-colors"
+                >
+                  <span
+                    :class="noResultScroll ? 'i-lucide:minimize-2' : 'i-lucide:maximize-2'"
+                    class="w-3 h-3 shrink-0"
+                    aria-hidden="true"
+                  />
+                  <span>{{
+                    noResultScroll
+                      ? $t('package.size_increase.analyze.collapse')
+                      : $t('package.size_increase.analyze.expand')
+                  }}</span>
+                </button>
+              </div>
+
+              <div
+                class="custom-scrollbar pe-1 transition-all duration-300"
+                :class="{ 'overflow-y-auto max-h-[216px]': !noResultScroll }"
+              >
+                <ul
+                  v-if="result && result.length > 0"
+                  class="flex flex-col gap-1.5 m-0 p-0 list-none pe-1"
+                >
+                  <li
+                    v-for="(item, index) in result"
+                    :key="index"
+                    class="flex flex-wrap items-center justify-between gap-2 py-1.5 px-2 rounded-md bg-amber-500/5 hover:bg-amber-500/10 transition-colors border border-amber-600/10"
+                  >
+                    <div class="flex items-center gap-2.5">
+                      <abbr
+                        :title="item.statusText || item.status"
+                        class="flex shrink-0 items-center justify-center w-6 h-6 rounded border no-underline cursor-help"
+                        :class="{
+                          'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border-emerald-500/20':
+                            item.status === 'added',
+                          'bg-rose-500/10 text-rose-700 dark:text-rose-400 border-rose-500/20':
+                            item.status === 'removed',
+                          'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20':
+                            item.status === 'changed',
+                        }"
+                      >
+                        <span
+                          v-if="item.status === 'added'"
+                          class="i-lucide:plus w-3.5 h-3.5 shrink-0"
+                          aria-hidden="true"
+                        />
+                        <span
+                          v-else-if="item.status === 'removed'"
+                          class="i-lucide:minus w-3.5 h-3.5 shrink-0"
+                          aria-hidden="true"
+                        />
+                        <span
+                          v-else-if="item.status === 'changed'"
+                          class="i-lucide:arrow-left-right w-3.5 h-3.5 shrink-0"
+                          aria-hidden="true"
+                        />
+                      </abbr>
+
+                      <span
+                        class="font-mono text-2xs font-semibold text-amber-900 dark:text-amber-300 break-all"
+                      >
+                        {{ item.name }}
+                      </span>
+                    </div>
+
+                    <div class="flex items-center gap-1.5 ms-auto shrink-0">
+                      <template v-if="item.status === 'changed' && item.v1 && item.v2">
+                        <span
+                          class="font-mono text-2xs line-through text-amber-700/80 dark:text-amber-500/80"
+                        >
+                          {{ item.v1.version }}
+                        </span>
+                        <span
+                          class="i-lucide:arrow-right w-3.5 h-3.5 shrink-0 text-amber-700/60 rtl:rotate-180"
+                        />
+                        <span
+                          class="font-mono text-2xs font-bold text-amber-900 dark:text-amber-300"
+                        >
+                          {{ item.v2.version }}
+                        </span>
+                      </template>
+                      <template v-else>
+                        <span
+                          class="font-mono text-2xs font-medium text-amber-900 dark:text-amber-300"
+                        >
+                          {{ (item.v2 || item.v1)?.version }}
+                        </span>
+                      </template>
+
+                      <span class="text-amber-600/40 mx-1 shrink-0">|</span>
+
+                      <span
+                        class="font-mono text-2xs font-bold min-w-14 text-end shrink-0"
+                        :class="{
+                          'text-emerald-700 dark:text-emerald-400': item.status === 'removed',
+                          'text-rose-700 dark:text-rose-400': item.status === 'added',
+                          'text-amber-800 dark:text-amber-400': item.status === 'changed',
+                        }"
+                      >
+                        {{ item.sizeDeltaText }}
+                      </span>
+                    </div>
+                  </li>
+                </ul>
+                <div v-else class="text-xs text-amber-700/80 dark:text-amber-500/80 py-1">
+                  {{ $t('package.size_increase.analyze.summary.no_deps') }}
+                </div>
+              </div>
+            </div>
+          </details>
+        </template>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.expand-enter-active,
+.expand-leave-active {
+  transition:
+    max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.3s ease-in-out,
+    margin-top 0.4s cubic-bezier(0.22, 1, 0.36, 1),
+    padding-top 0.4s cubic-bezier(0.22, 1, 0.36, 1),
+    border-color 0.4s ease-in-out;
+  overflow: hidden;
+  opacity: 1;
+  max-height: 500px;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+  max-height: 0;
+  opacity: 0;
+  padding-top: 0 !important;
+  margin-top: 0 !important;
+  border-color: transparent !important;
+}
+
+details[dir='rtl']:not([open]) .icon-rtl {
+  transform: scale(-1, 1);
+}
+summary {
+  list-style: none;
+}
+summary::-webkit-details-marker {
+  display: none;
+}
+
+.custom-scrollbar {
+  scrollbar-width: auto;
+  scrollbar-color: rgba(217, 119, 6, 0.3) transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(217, 119, 6, 0.3);
+  border-radius: 10px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(217, 119, 6, 0.5);
+}
+
+:global(.dark) .custom-scrollbar {
+  scrollbar-color: rgba(251, 191, 36, 0.3) transparent;
+}
+:global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(251, 191, 36, 0.3);
+}
+:global(.dark) .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(251, 191, 36, 0.5);
+}
+</style>
diff --git a/app/composables/pkg-size/useAnalizeCauseWorker.ts b/app/composables/pkg-size/useAnalizeCauseWorker.ts
index 3d05ab87d8..f1ed3934c9 100644
--- a/app/composables/pkg-size/useAnalizeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalizeCauseWorker.ts
@@ -1,12 +1,12 @@
 import type { AnalyzeWorkerResponse, UIDiffResult, UISummary } from '~/utils/pkg-size/types'
-import { shallowRef, onMounted, onUnmounted } from 'vue'
+import { shallowRef, onMounted, onUnmounted, type ModelRef } from 'vue'
 import { useThrottleFn } from '@vueuse/core'
 import { useBytesFormatter, useNumberFormatter } from '~/composables/useNumberFormatter'
 
 export function useAnalyzeCauseWorker(
-  packageName: ComputedRef<string | undefined | null>,
-  version: ComputedRef<string | undefined | null>,
-  comparedVersion: ComputedRef<string | undefined | null>,
+  packageName: ModelRef<string | undefined | null>,
+  version: ModelRef<string | undefined | null>,
+  comparedVersion: ModelRef<string | undefined | null>,
 ) {
   const analyzing = shallowRef(false)
   const available = shallowRef(false)

From 2c071d0abf65ac7a255be94a9b360943efc745d4 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 02:59:59 +0200
Subject: [PATCH 19/50] chore: add max-height comment at enter/leave transition

---
 app/components/Package/SizeIncreaseAnalysis.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/Package/SizeIncreaseAnalysis.vue b/app/components/Package/SizeIncreaseAnalysis.vue
index ee5f417bc6..0ce7268723 100644
--- a/app/components/Package/SizeIncreaseAnalysis.vue
+++ b/app/components/Package/SizeIncreaseAnalysis.vue
@@ -286,6 +286,7 @@ const {
     border-color 0.4s ease-in-out;
   overflow: hidden;
   opacity: 1;
+  /* Upper bound for the expand animation; content taller than this is clipped mid-transition. */
   max-height: 500px;
 }
 

From abf75596d825a701a914d92784cd77a0af8732d6 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 03:01:12 +0200
Subject: [PATCH 20/50] chore: use item name as key

---
 app/components/Package/SizeIncreaseAnalysis.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/SizeIncreaseAnalysis.vue b/app/components/Package/SizeIncreaseAnalysis.vue
index 0ce7268723..51e05f1e73 100644
--- a/app/components/Package/SizeIncreaseAnalysis.vue
+++ b/app/components/Package/SizeIncreaseAnalysis.vue
@@ -183,8 +183,8 @@ const {
                   class="flex flex-col gap-1.5 m-0 p-0 list-none pe-1"
                 >
                   <li
-                    v-for="(item, index) in result"
-                    :key="index"
+                    v-for="item in result"
+                    :key="item.name"
                     class="flex flex-wrap items-center justify-between gap-2 py-1.5 px-2 rounded-md bg-amber-500/5 hover:bg-amber-500/10 transition-colors border border-amber-600/10"
                   >
                     <div class="flex items-center gap-2.5">

From 20c2a943e94c3c1cb782388f1bd52e74d106abf3 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 03:15:46 +0200
Subject: [PATCH 21/50] chore: add cleanup/eviction strategy for persisted
 analysis data

---
 .../pkg-size/useAnalizeCauseWorker.ts         |  4 ++
 app/utils/pkg-size/db.ts                      | 49 ++++++++++++++++---
 2 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/app/composables/pkg-size/useAnalizeCauseWorker.ts b/app/composables/pkg-size/useAnalizeCauseWorker.ts
index f1ed3934c9..bee8b5749c 100644
--- a/app/composables/pkg-size/useAnalizeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalizeCauseWorker.ts
@@ -64,6 +64,8 @@ export function useAnalyzeCauseWorker(
     error.value = event instanceof ErrorEvent ? event.message : 'worker failure'
     analyzing.value = false
     cancelling.value = false
+    // oxlint-disable-next-line no-console
+    console.error('Worker failure:', event)
   }
 
   startAnalyzeCause = useThrottleFn(
@@ -159,6 +161,8 @@ export function useAnalyzeCauseWorker(
         error.value = msg.message
         analyzing.value = false
         cancelling.value = false
+        // oxlint-disable-next-line no-console
+        console.error('Worker failure:', msg)
         break
       case 'aborting':
         cancelling.value = true
diff --git a/app/utils/pkg-size/db.ts b/app/utils/pkg-size/db.ts
index fa27610742..d7a8ecb020 100644
--- a/app/utils/pkg-size/db.ts
+++ b/app/utils/pkg-size/db.ts
@@ -6,9 +6,11 @@ import type {
 } from '~/utils/pkg-size/types'
 import Dexie from 'dexie'
 
+const MAX_SESSIONS = 25
+
 class NpmxPkgSizeDB extends Dexie {
   packages!: Dexie.Table<PackageEntity, string>
-  dependencyEdges!: Dexie.Table<DependencyEdgeEntity, number>
+  edges!: Dexie.Table<DependencyEdgeEntity, string>
   sessions!: Dexie.Table<AnalysisSessionEntity, string>
 
   constructor() {
@@ -16,21 +18,47 @@ class NpmxPkgSizeDB extends Dexie {
       autoOpen: false,
     })
 
-    // Defining strategic indexes to avoid full table scans
+    // Version 1 (Legacy schema)
     this.version(1).stores({
-      // PK: id. Secondary index: name (vital for Diff and checking version collisions)
       packages: 'id, name',
-      // PK: id. Secondary indexes: parentKey (to traverse down the tree) and resolvedVersionKey (to traverse up)
       dependencyEdges: '++id, parentKey, resolvedVersionKey',
-      // PK: rootKey
       sessions: 'rootKey',
     })
 
+    // Version 2: Added timestamp index & NEW edges table with composite PK
+    this.version(2).stores({
+      packages: 'id, name',
+      dependencyEdges: null,
+      edges: '[parentKey+childName], parentKey, resolvedVersionKey',
+      sessions: 'rootKey, timestamp',
+    })
+
     this.packages = this.table('packages')
-    this.dependencyEdges = this.table('dependencyEdges')
+    this.edges = this.table('edges')
     this.sessions = this.table('sessions')
   }
 
+  /**
+   * Helper to evict old sessions and keep the cache size bounded.
+   */
+  private async cleanup(): Promise<void> {
+    if (!this.isOpen()) {
+      await this.open()
+    }
+
+    const count = await this.sessions.count()
+
+    if (count > MAX_SESSIONS) {
+      const oldSessions = await this.sessions
+        .orderBy('timestamp')
+        .limit(count - MAX_SESSIONS)
+        .toArray()
+
+      const keysToDelete = oldSessions.map(s => s.rootKey)
+      await this.sessions.bulkDelete(keysToDelete)
+    }
+  }
+
   async getSession(id: string): Promise<AnalysisSessionEntity | undefined> {
     if (!this.isOpen()) {
       await this.open()
@@ -48,9 +76,13 @@ class NpmxPkgSizeDB extends Dexie {
   }
 
   async initSession(rootKey: string | string[]): Promise<void> {
+    // Run cleanup before creating new sessions
+    await this.cleanup()
+
     if (!this.isOpen()) {
       await this.open()
     }
+
     await this.transaction('rw', this.sessions, async () => {
       if (Array.isArray(rootKey)) {
         await this.sessions.bulkPut(
@@ -96,6 +128,8 @@ class NpmxPkgSizeDB extends Dexie {
         totalSize,
         totalOptionalSize,
         isFinished,
+        // Bump timestamp to mark it as recently used
+        timestamp: Date.now(),
       })
     })
   }
@@ -117,7 +151,8 @@ class NpmxPkgSizeDB extends Dexie {
     childRange: string,
     isOptional: boolean,
   ) {
-    await this.dependencyEdges.add({
+    // Uses put() with the new composite PK to automatically deduplicate edges
+    await this.edges.put({
       parentKey,
       childName,
       childRange,

From 5df44c21db6248bd6243f316750b6fb39f894c85 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 03:34:08 +0200
Subject: [PATCH 22/50] chore: use defineProps + computed instead defineModel

---
 app/components/Package/SizeIncreaseAnalysis.vue   | 14 ++++++++++----
 app/composables/pkg-size/useAnalizeCauseWorker.ts |  9 +++++----
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/components/Package/SizeIncreaseAnalysis.vue b/app/components/Package/SizeIncreaseAnalysis.vue
index 51e05f1e73..56e36e3f83 100644
--- a/app/components/Package/SizeIncreaseAnalysis.vue
+++ b/app/components/Package/SizeIncreaseAnalysis.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
 import { useAnalyzeCauseWorker } from '~/composables/pkg-size/useAnalizeCauseWorker'
 
-const packageName = defineModel<string | null | undefined>('packageName')
-const version = defineModel<string | null | undefined>('version')
-const comparisonVersion = defineModel<string | null | undefined>('comparisonVersion')
+const props = defineProps<{
+  packageName?: string | null
+  version?: string | null
+  comparisonVersion?: string | null
+}>()
+
+const usePackage = computed(() => props.packageName)
+const useVersion = computed(() => props.version)
+const useComparedVersion = computed(() => props.comparisonVersion)
 
 const {
   available,
@@ -17,7 +23,7 @@ const {
   allDependencies,
   startAnalyzeCause,
   cancelAnalyzeCause,
-} = useAnalyzeCauseWorker(packageName, version, comparisonVersion)
+} = useAnalyzeCauseWorker(usePackage, useVersion, useComparedVersion)
 </script>
 
 <template>
diff --git a/app/composables/pkg-size/useAnalizeCauseWorker.ts b/app/composables/pkg-size/useAnalizeCauseWorker.ts
index bee8b5749c..6f045ad9b5 100644
--- a/app/composables/pkg-size/useAnalizeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalizeCauseWorker.ts
@@ -1,12 +1,13 @@
+import type { ComputedRef } from 'vue'
 import type { AnalyzeWorkerResponse, UIDiffResult, UISummary } from '~/utils/pkg-size/types'
-import { shallowRef, onMounted, onUnmounted, type ModelRef } from 'vue'
+import { shallowRef, onMounted, onUnmounted } from 'vue'
 import { useThrottleFn } from '@vueuse/core'
 import { useBytesFormatter, useNumberFormatter } from '~/composables/useNumberFormatter'
 
 export function useAnalyzeCauseWorker(
-  packageName: ModelRef<string | undefined | null>,
-  version: ModelRef<string | undefined | null>,
-  comparedVersion: ModelRef<string | undefined | null>,
+  packageName: ComputedRef<string | undefined | null>,
+  version: ComputedRef<string | undefined | null>,
+  comparedVersion: ComputedRef<string | undefined | null>,
 ) {
   const analyzing = shallowRef(false)
   const available = shallowRef(false)

From d8c445f6a2da9350e100bd5d77a32aad6670d509 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 03:34:56 +0200
Subject: [PATCH 23/50] chore: remove version to avoid migration

---
 app/utils/pkg-size/db.ts | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/app/utils/pkg-size/db.ts b/app/utils/pkg-size/db.ts
index d7a8ecb020..086b8451ca 100644
--- a/app/utils/pkg-size/db.ts
+++ b/app/utils/pkg-size/db.ts
@@ -18,17 +18,10 @@ class NpmxPkgSizeDB extends Dexie {
       autoOpen: false,
     })
 
-    // Version 1 (Legacy schema)
+    // Esquema definitivo. Al estar la feature en preview,
+    // empezamos limpios desde la versión 1 sin migraciones heredadas.
     this.version(1).stores({
       packages: 'id, name',
-      dependencyEdges: '++id, parentKey, resolvedVersionKey',
-      sessions: 'rootKey',
-    })
-
-    // Version 2: Added timestamp index & NEW edges table with composite PK
-    this.version(2).stores({
-      packages: 'id, name',
-      dependencyEdges: null,
       edges: '[parentKey+childName], parentKey, resolvedVersionKey',
       sessions: 'rootKey, timestamp',
     })

From 0df3c9673ce6684f0b08c63d8d2c8a5fbcbdea0f Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 03:47:47 +0200
Subject: [PATCH 24/50] chore: display error message

---
 app/components/Package/SizeIncreaseAnalysis.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/components/Package/SizeIncreaseAnalysis.vue b/app/components/Package/SizeIncreaseAnalysis.vue
index 56e36e3f83..593a9089fb 100644
--- a/app/components/Package/SizeIncreaseAnalysis.vue
+++ b/app/components/Package/SizeIncreaseAnalysis.vue
@@ -65,7 +65,7 @@ const {
       <div v-if="summary || error" class="mt-3 border-t border-amber-600/20 pt-3 flex flex-col">
         <div
           v-if="error"
-          class="border border-rose-500/20 bg-rose-500/10 rounded-md px-3 py-2.5 flex items-center gap-2"
+          class="border border-rose-500/20 bg-rose-500/10 rounded-md px-3 py-2.5 flex items-start gap-2"
         >
           <span
             class="i-lucide:alert-circle w-4 h-4 shrink-0 text-rose-700 dark:text-rose-400 mt-0.5"
@@ -77,6 +77,9 @@ const {
             >
               {{ $t('package.size_increase.analyze.error') }}
             </span>
+            <p class="text-xs text-rose-700 dark:text-rose-300 m-0 break-words">
+              {{ error }}
+            </p>
           </div>
         </div>
         <template v-else-if="summary">

From 1c7f4b768d4fcb6cccb026e033decdb02e47c489 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 03:52:50 +0200
Subject: [PATCH 25/50] chore: dont evict unfinished sessions

---
 app/utils/pkg-size/db.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/utils/pkg-size/db.ts b/app/utils/pkg-size/db.ts
index 086b8451ca..e586727601 100644
--- a/app/utils/pkg-size/db.ts
+++ b/app/utils/pkg-size/db.ts
@@ -39,15 +39,17 @@ class NpmxPkgSizeDB extends Dexie {
       await this.open()
     }
 
-    const count = await this.sessions.count()
+    const finishedSessions = await this.sessions
+      .where('isFinished')
+      .equals(1) // In IndexedDB, boolean values are stored as 0/1
+      .sortBy('timestamp')
 
+    const count = finishedSessions.length
     if (count > MAX_SESSIONS) {
-      const oldSessions = await this.sessions
-        .orderBy('timestamp')
-        .limit(count - MAX_SESSIONS)
-        .toArray()
+      const excessCount = count - MAX_SESSIONS
+      const sessionsToDelete = finishedSessions.slice(0, excessCount)
+      const keysToDelete = sessionsToDelete.map(s => s.rootKey)
 
-      const keysToDelete = oldSessions.map(s => s.rootKey)
       await this.sessions.bulkDelete(keysToDelete)
     }
   }

From 010422b26de484b46763fe7c81c3ea5e702f07b0 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 04:07:49 +0200
Subject: [PATCH 26/50] chore: dont change available at onMounted

---
 app/composables/pkg-size/useAnalizeCauseWorker.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/composables/pkg-size/useAnalizeCauseWorker.ts b/app/composables/pkg-size/useAnalizeCauseWorker.ts
index 6f045ad9b5..d3c97ed751 100644
--- a/app/composables/pkg-size/useAnalizeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalizeCauseWorker.ts
@@ -54,9 +54,9 @@ export function useAnalyzeCauseWorker(
   const rawBytesFormatter = useNumberFormatter()
 
   watch(
-    [packageName, version, comparedVersion],
-    ([pkg, v1, v2]) => {
-      available.value = !!pkg && !!v1 && !!v2 && !!worker
+    [loading, packageName, version, comparedVersion],
+    ([l, pkg, v1, v2]) => {
+      available.value = !l && !!pkg && !!v1 && !!v2 && !!worker
     },
     { flush: 'post' },
   )
@@ -183,11 +183,9 @@ export function useAnalyzeCauseWorker(
       worker.addEventListener('message', handleWorkerMessage)
       worker.addEventListener('error', handleWorkerFailure)
       worker.addEventListener('messageerror', handleWorkerFailure)
-      available.value = true
     } catch (err) {
       // oxlint-disable-next-line no-console
       console.error('cannot load worker', err)
-      available.value = false
     } finally {
       loading.value = false
     }

From 40d8aface04485dd80186da290914ac26927e0d1 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 04:08:58 +0200
Subject: [PATCH 27/50] chore: display error when loading worker throws

---
 app/composables/pkg-size/useAnalizeCauseWorker.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/composables/pkg-size/useAnalizeCauseWorker.ts b/app/composables/pkg-size/useAnalizeCauseWorker.ts
index d3c97ed751..0be942d400 100644
--- a/app/composables/pkg-size/useAnalizeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalizeCauseWorker.ts
@@ -186,6 +186,12 @@ export function useAnalyzeCauseWorker(
     } catch (err) {
       // oxlint-disable-next-line no-console
       console.error('cannot load worker', err)
+      error.value =
+        err instanceof Error
+          ? err.message
+          : typeof err === 'object' && err !== null && 'message' in err
+            ? String(err.message)
+            : String(err)
     } finally {
       loading.value = false
     }

From 60827346c525eff9fb5a6e9fddc81f8fee3650d3 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 04:14:21 +0200
Subject: [PATCH 28/50] chore: add isFinished idx to session

---
 app/utils/pkg-size/db.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/utils/pkg-size/db.ts b/app/utils/pkg-size/db.ts
index e586727601..68bb36baf3 100644
--- a/app/utils/pkg-size/db.ts
+++ b/app/utils/pkg-size/db.ts
@@ -18,12 +18,10 @@ class NpmxPkgSizeDB extends Dexie {
       autoOpen: false,
     })
 
-    // Esquema definitivo. Al estar la feature en preview,
-    // empezamos limpios desde la versión 1 sin migraciones heredadas.
     this.version(1).stores({
       packages: 'id, name',
       edges: '[parentKey+childName], parentKey, resolvedVersionKey',
-      sessions: 'rootKey, timestamp',
+      sessions: 'rootKey, timestamp, isFinished',
     })
 
     this.packages = this.table('packages')

From 44abca1742f7f98ffd3f65493d390b2571b388df Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 04:27:21 +0200
Subject: [PATCH 29/50] chore: make status statically analyzable

---
 .../pkg-size/useAnalizeCauseWorker.ts         | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/composables/pkg-size/useAnalizeCauseWorker.ts b/app/composables/pkg-size/useAnalizeCauseWorker.ts
index 0be942d400..b9f91b8ede 100644
--- a/app/composables/pkg-size/useAnalizeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalizeCauseWorker.ts
@@ -1,5 +1,10 @@
 import type { ComputedRef } from 'vue'
-import type { AnalyzeWorkerResponse, UIDiffResult, UISummary } from '~/utils/pkg-size/types'
+import type {
+  AnalyzeWorkerResponse,
+  DiffResult,
+  UIDiffResult,
+  UISummary,
+} from '~/utils/pkg-size/types'
 import { shallowRef, onMounted, onUnmounted } from 'vue'
 import { useThrottleFn } from '@vueuse/core'
 import { useBytesFormatter, useNumberFormatter } from '~/composables/useNumberFormatter'
@@ -123,6 +128,21 @@ export function useAnalyzeCauseWorker(
     true,
   )
 
+  function getDiffResultStatusText(diffResult: DiffResult): string {
+    switch (diffResult.status) {
+      case 'added':
+        return bytesFormatter.t('package.size_increase.analyze.status.added')
+      case 'changed':
+        return bytesFormatter.t('package.size_increase.analyze.status.changed')
+      case 'removed':
+        return bytesFormatter.t('package.size_increase.analyze.status.removed')
+      case 'unchanged':
+        return bytesFormatter.t('package.size_increase.analyze.status.unchanged')
+    }
+
+    return diffResult.status
+  }
+
   async function handleWorkerMessage(event: MessageEvent<AnalyzeWorkerResponse>) {
     const msg = event.data
 
@@ -140,7 +160,7 @@ export function useAnalyzeCauseWorker(
             Object.assign(r, {
               v1: r.v1 ? { ...r.v1, sizeText: bytesFormatter.format(r.v1.size) } : null,
               v2: r.v2 ? { ...r.v2, sizeText: bytesFormatter.format(r.v2.size) } : null,
-              statusText: bytesFormatter.t(`package.size_increase.analyze.status.${r.status}`),
+              statusText: getDiffResultStatusText(r),
               sizeDeltaText: bytesFormatter.format(r.sizeDelta),
             }) as UIDiffResult,
         )

From 02227006a19accbb532679a9f8d4b59c17493ee1 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 04:32:39 +0200
Subject: [PATCH 30/50] chore: make packageName prop optional

---
 app/components/Package/SizeIncrease.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Package/SizeIncrease.vue b/app/components/Package/SizeIncrease.vue
index de74ec685c..d07d80e10a 100644
--- a/app/components/Package/SizeIncrease.vue
+++ b/app/components/Package/SizeIncrease.vue
@@ -4,7 +4,7 @@ import { computed } from 'vue'
 
 const props = defineProps<{
   diff: InstallSizeDiff
-  packageName: string
+  packageName?: string | null
   version?: string | null
 }>()
 

From 367ddc01558fbaf1e0087612122c46a287252fd1 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 04:39:16 +0200
Subject: [PATCH 31/50] fix(knip): dont export Summary interface

---
 app/utils/pkg-size/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/utils/pkg-size/types.ts b/app/utils/pkg-size/types.ts
index f0fab1f410..966f8b61c7 100644
--- a/app/utils/pkg-size/types.ts
+++ b/app/utils/pkg-size/types.ts
@@ -69,7 +69,7 @@ export interface UIDiffResult extends Omit<DiffResult, 'v1' | 'v2'> {
   sizeDeltaText: string
 }
 
-export interface Summary {
+interface Summary {
   sizeDelta: number
   mandatorySizeDelta: number
   netDependencies: number

From bfa45472fd9151bc7328bbf080b55ca268691cb5 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 04:58:33 +0200
Subject: [PATCH 32/50] chore: rename client worker, worker and composable
 modules

---
 app/components/Package/SizeIncreaseAnalysis.vue                 | 2 +-
 .../{useAnalizeCauseWorker.ts => useAnalyzeCauseWorker.ts}      | 2 +-
 ...ze-cause-client-worker.ts => analyze-cause-client-worker.ts} | 2 +-
 .../{analize-cause-worker.ts => analyze-cause-worker.ts}        | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename app/composables/pkg-size/{useAnalizeCauseWorker.ts => useAnalyzeCauseWorker.ts} (99%)
 rename app/utils/pkg-size/{analize-cause-client-worker.ts => analyze-cause-client-worker.ts} (56%)
 rename app/utils/pkg-size/{analize-cause-worker.ts => analyze-cause-worker.ts} (100%)

diff --git a/app/components/Package/SizeIncreaseAnalysis.vue b/app/components/Package/SizeIncreaseAnalysis.vue
index 593a9089fb..2e61401e6a 100644
--- a/app/components/Package/SizeIncreaseAnalysis.vue
+++ b/app/components/Package/SizeIncreaseAnalysis.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useAnalyzeCauseWorker } from '~/composables/pkg-size/useAnalizeCauseWorker'
+import { useAnalyzeCauseWorker } from '~/composables/pkg-size/useAnalyzeCauseWorker'
 
 const props = defineProps<{
   packageName?: string | null
diff --git a/app/composables/pkg-size/useAnalizeCauseWorker.ts b/app/composables/pkg-size/useAnalyzeCauseWorker.ts
similarity index 99%
rename from app/composables/pkg-size/useAnalizeCauseWorker.ts
rename to app/composables/pkg-size/useAnalyzeCauseWorker.ts
index b9f91b8ede..6a7251c331 100644
--- a/app/composables/pkg-size/useAnalizeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalyzeCauseWorker.ts
@@ -197,7 +197,7 @@ export function useAnalyzeCauseWorker(
 
   onMounted(async () => {
     try {
-      const module = await import('~/utils/pkg-size/analize-cause-client-worker')
+      const module = await import('~/utils/pkg-size/analyze-cause-client-worker')
       worker = module.worker
 
       worker.addEventListener('message', handleWorkerMessage)
diff --git a/app/utils/pkg-size/analize-cause-client-worker.ts b/app/utils/pkg-size/analyze-cause-client-worker.ts
similarity index 56%
rename from app/utils/pkg-size/analize-cause-client-worker.ts
rename to app/utils/pkg-size/analyze-cause-client-worker.ts
index ed6aea6cce..3609a871a2 100644
--- a/app/utils/pkg-size/analize-cause-client-worker.ts
+++ b/app/utils/pkg-size/analyze-cause-client-worker.ts
@@ -1,4 +1,4 @@
-import Worker from '~/utils/pkg-size/analize-cause-worker?worker'
+import Worker from '~/utils/pkg-size/analyze-cause-worker?worker'
 
 export const worker = new Worker({
   name: 'NpmxPkgSizeAnalyzeCauseWorker',
diff --git a/app/utils/pkg-size/analize-cause-worker.ts b/app/utils/pkg-size/analyze-cause-worker.ts
similarity index 100%
rename from app/utils/pkg-size/analize-cause-worker.ts
rename to app/utils/pkg-size/analyze-cause-worker.ts

From 44b4169a3409332ae383f6f51efd589b99edf848 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 05:02:13 +0200
Subject: [PATCH 33/50] chore: skip Package/SizeIncreaseAnalysis.vue component
 test to check CI is fine (added TODO)

---
 test/unit/a11y-component-coverage.spec.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/test/unit/a11y-component-coverage.spec.ts b/test/unit/a11y-component-coverage.spec.ts
index 86f8371613..47a219959b 100644
--- a/test/unit/a11y-component-coverage.spec.ts
+++ b/test/unit/a11y-component-coverage.spec.ts
@@ -61,6 +61,8 @@ const SKIPPED_COMPONENTS: Record<string, string> = {
   'Translation/StatusByFile.unused.vue': 'Unused component, might be needed in the future',
   'ColorScheme/Img.vue': 'Image component, basic ui',
   'VideoPlayer.vue': 'Atproto video component, basic ui',
+  // TODO: add a test for this component, but it requires mocking the composable and maybe the worker
+  'Package/SizeIncreaseAnalysis.vue': 'we need to mock the composable and maybe the worker',
 }
 
 function normalizeComponentPath(filePath: string): string {

From 7b52997439cf7f5782b3a9c7f174678933bfee6e Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 05:09:55 +0200
Subject: [PATCH 34/50] chore(i18n): remove `added` and `removed` entries, both
 included at `deps_details`

---
 i18n/locales/en.json | 2 --
 i18n/locales/es.json | 2 --
 i18n/schema.json     | 6 ------
 3 files changed, 10 deletions(-)

diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 2040287558..73373844e6 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -448,8 +448,6 @@
         "all_deps": "All dependencies",
         "expand": "Expand",
         "collapse": "Collapse",
-        "added": "Added",
-        "removed": "Removed",
         "status": {
           "added": "Added",
           "changed": "Changed",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index ca8aab5209..3ea9040f83 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -440,8 +440,6 @@
         "all_deps": "Todas las dependencias",
         "expand": "Expandir",
         "collapse": "Contraer",
-        "added": "Añadidas",
-        "removed": "Eliminadas",
         "status": {
           "added": "Añadida",
           "changed": "Modificada",
diff --git a/i18n/schema.json b/i18n/schema.json
index 10ee9d7aff..8fc6477d8a 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1348,12 +1348,6 @@
                 "collapse": {
                   "type": "string"
                 },
-                "added": {
-                  "type": "string"
-                },
-                "removed": {
-                  "type": "string"
-                },
                 "status": {
                   "type": "object",
                   "properties": {

From 53822ca42e444a992cad347d712321ca04a83b79 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 05:13:06 +0200
Subject: [PATCH 35/50] fix: v1 and v2 size type

---
 app/utils/pkg-size/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/utils/pkg-size/types.ts b/app/utils/pkg-size/types.ts
index 966f8b61c7..3e949e3cbb 100644
--- a/app/utils/pkg-size/types.ts
+++ b/app/utils/pkg-size/types.ts
@@ -63,8 +63,8 @@ export interface DiffResult {
 }
 
 export interface UIDiffResult extends Omit<DiffResult, 'v1' | 'v2'> {
-  v1: { version: string; size: string; sizeText: string } | null
-  v2: { version: string; size: string; sizeText: string } | null
+  v1: { version: string; size: number; sizeText: string } | null
+  v2: { version: string; size: number; sizeText: string } | null
   statusText: string
   sizeDeltaText: string
 }

From 97ff4e96ab6d29f657025b7b2f301758879ba3be Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 06:04:46 +0200
Subject: [PATCH 36/50] fix: abort handling ignores which run is in flight, so
 cancelling can get stuck

---
 app/utils/pkg-size/analyze-cause-worker.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/utils/pkg-size/analyze-cause-worker.ts b/app/utils/pkg-size/analyze-cause-worker.ts
index 627518a895..76a925c2d9 100644
--- a/app/utils/pkg-size/analyze-cause-worker.ts
+++ b/app/utils/pkg-size/analyze-cause-worker.ts
@@ -10,6 +10,7 @@ import { db } from '~/utils/pkg-size/db'
 import { resolveAndPersistGraph } from '~/utils/pkg-size/resolve-and-persist-graph'
 
 let abortController: AbortController | undefined
+let inFlightId: number | string | undefined
 
 function post(msg: AnalyzeWorkerResponse) {
   ;(self as unknown as Worker).postMessage(msg)
@@ -20,7 +21,7 @@ self.addEventListener('message', async (event: MessageEvent<AnalyzeCauseWorkerRe
   const { id, type } = msg
 
   if (type === 'analyze-cause-abort') {
-    if (abortController) {
+    if (abortController && inFlightId === id) {
       abortController.abort()
       post({ type: 'aborting', id })
     } else {
@@ -38,6 +39,7 @@ self.addEventListener('message', async (event: MessageEvent<AnalyzeCauseWorkerRe
   abortController?.abort()
   const controller = new AbortController()
   abortController = controller
+  inFlightId = id
 
   const keys = {
     fromVersion: `${packageName}@${fromVersion}`,
@@ -169,6 +171,11 @@ self.addEventListener('message', async (event: MessageEvent<AnalyzeCauseWorkerRe
     } else {
       post({ type: 'error', id, message: error instanceof Error ? error.message : String(error) })
     }
+  } finally {
+    if (abortController === controller) {
+      abortController = undefined
+      inFlightId = undefined
+    }
   }
 })
 

From 90a6cae4b4c5004c5ac6c9534c524dcd8102ea49 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 06:07:20 +0200
Subject: [PATCH 37/50] chore: send analyze-cause-abort message when unmounting
 component while anlazing

---
 app/composables/pkg-size/useAnalyzeCauseWorker.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/composables/pkg-size/useAnalyzeCauseWorker.ts b/app/composables/pkg-size/useAnalyzeCauseWorker.ts
index 6a7251c331..248fa5b6d4 100644
--- a/app/composables/pkg-size/useAnalyzeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalyzeCauseWorker.ts
@@ -219,6 +219,10 @@ export function useAnalyzeCauseWorker(
 
   onUnmounted(() => {
     if (worker) {
+      // send abort first, then remove listeners: the aborting message won't be received here (fire and forgot)
+      if (analyzing.value) {
+        worker.postMessage({ type: 'analyze-cause-abort', id: currentId })
+      }
       worker.removeEventListener('message', handleWorkerMessage)
       worker.removeEventListener('error', handleWorkerFailure)
       worker.removeEventListener('messageerror', handleWorkerFailure)

From c6e603dcf79a7aeabcedc8f208fa2449753be490 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 06:08:56 +0200
Subject: [PATCH 38/50] chore: add `dropDatabase` to the dexie database

---
 app/utils/pkg-size/db.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/utils/pkg-size/db.ts b/app/utils/pkg-size/db.ts
index 68bb36baf3..86f71d4752 100644
--- a/app/utils/pkg-size/db.ts
+++ b/app/utils/pkg-size/db.ts
@@ -39,7 +39,7 @@ class NpmxPkgSizeDB extends Dexie {
 
     const finishedSessions = await this.sessions
       .where('isFinished')
-      .equals(1) // In IndexedDB, boolean values are stored as 0/1
+      .equals(1) // In IndexedDB, boolean values (false/true) are stored as 0/1
       .sortBy('timestamp')
 
     const count = finishedSessions.length
@@ -52,6 +52,14 @@ class NpmxPkgSizeDB extends Dexie {
     }
   }
 
+  async dropDatabase(): Promise<void> {
+    if (this.isOpen()) {
+      this.close()
+    }
+    await this.delete()
+    await this.open()
+  }
+
   async getSession(id: string): Promise<AnalysisSessionEntity | undefined> {
     if (!this.isOpen()) {
       await this.open()

From cf000b7ce01fab7e8745b06743c5c57367e6273c Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 06:10:18 +0200
Subject: [PATCH 39/50] chore: cleanup database

---
 app/utils/pkg-size/db.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/utils/pkg-size/db.ts b/app/utils/pkg-size/db.ts
index 86f71d4752..c5251b4a88 100644
--- a/app/utils/pkg-size/db.ts
+++ b/app/utils/pkg-size/db.ts
@@ -37,10 +37,7 @@ class NpmxPkgSizeDB extends Dexie {
       await this.open()
     }
 
-    const finishedSessions = await this.sessions
-      .where('isFinished')
-      .equals(1) // In IndexedDB, boolean values (false/true) are stored as 0/1
-      .sortBy('timestamp')
+    const finishedSessions = await this.sessions.where('isFinished').equals(1).sortBy('timestamp')
 
     const count = finishedSessions.length
     if (count > MAX_SESSIONS) {

From cacab535154a2fb67a6fe11ab0e9f660367e2926 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 25 Jul 2026 06:50:49 +0200
Subject: [PATCH 40/50] chore: remove node:crypto

---
 app/composables/pkg-size/useAnalyzeCauseWorker.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/app/composables/pkg-size/useAnalyzeCauseWorker.ts b/app/composables/pkg-size/useAnalyzeCauseWorker.ts
index 248fa5b6d4..b2dac00a6e 100644
--- a/app/composables/pkg-size/useAnalyzeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalyzeCauseWorker.ts
@@ -82,11 +82,7 @@ export function useAnalyzeCauseWorker(
 
       analyzing.value = true
       currentId =
-        import.meta.test || import.meta.dev
-          ? (currentId as number)++
-          : import.meta.client
-            ? crypto.randomUUID()
-            : await import('node:crypto').then(({ randomUUID }) => randomUUID())
+        import.meta.test || import.meta.dev ? (currentId as number)++ : crypto.randomUUID()
       cancelling.value = false
       error.value = undefined
       summary.value = undefined
@@ -139,8 +135,6 @@ export function useAnalyzeCauseWorker(
       case 'unchanged':
         return bytesFormatter.t('package.size_increase.analyze.status.unchanged')
     }
-
-    return diffResult.status
   }
 
   async function handleWorkerMessage(event: MessageEvent<AnalyzeWorkerResponse>) {

From 4616ee5af958c4d1e5d03d11ad3ffa51de2e53b4 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sun, 26 Jul 2026 15:13:57 +0200
Subject: [PATCH 41/50] chore: include somw a11y markup and a11y test

---
 .../Package/SizeIncreaseAnalysis.vue          | 16 ++++-
 .../pkg-size/useAnalyzeCauseWorker.ts         | 13 ++--
 test/nuxt/a11y.spec.ts                        | 63 +++++++++++++++++++
 test/unit/a11y-component-coverage.spec.ts     |  2 -
 4 files changed, 82 insertions(+), 12 deletions(-)

diff --git a/app/components/Package/SizeIncreaseAnalysis.vue b/app/components/Package/SizeIncreaseAnalysis.vue
index 2e61401e6a..0b16d10b2f 100644
--- a/app/components/Package/SizeIncreaseAnalysis.vue
+++ b/app/components/Package/SizeIncreaseAnalysis.vue
@@ -5,6 +5,7 @@ const props = defineProps<{
   packageName?: string | null
   version?: string | null
   comparisonVersion?: string | null
+  open?: boolean
 }>()
 
 const usePackage = computed(() => props.packageName)
@@ -32,6 +33,7 @@ const {
       <button
         type="button"
         :disabled="!available || cancelling"
+        :aria-busy="loading || analyzing || cancelling"
         class="border border-amber-600/40 bg-amber-500/10 hover:bg-amber-500/20 rounded-md inline-flex items-center gap-1.5 text-xs font-medium text-amber-900 dark:text-amber-300 px-3 py-1.5 transition-all duration-200 ease-out disabled:opacity-50 disabled:cursor-not-allowed overflow-hidden"
         @click="analyzing ? cancelAnalyzeCause() : startAnalyzeCause()"
       >
@@ -65,6 +67,7 @@ const {
       <div v-if="summary || error" class="mt-3 border-t border-amber-600/20 pt-3 flex flex-col">
         <div
           v-if="error"
+          role="alert"
           class="border border-rose-500/20 bg-rose-500/10 rounded-md px-3 py-2.5 flex items-start gap-2"
         >
           <span
@@ -84,7 +87,7 @@ const {
         </div>
         <template v-else-if="summary">
           <!-- SUMMARY -->
-          <div class="flex flex-col gap-1">
+          <div class="flex flex-col gap-1" aria-live="polite">
             <p class="text-xs text-amber-700 dark:text-amber-500 m-0">
               <span aria-hidden="true">📦</span>
               <i18n-t keypath="package.size_increase.analyze.summary.total_size" scope="global">
@@ -133,7 +136,7 @@ const {
             </p>
           </div>
           <!-- DIFF BALANCE -->
-          <details class="group border-t border-amber-600/20 mt-3 pt-3 pb-1">
+          <details class="group border-t border-amber-600/20 mt-3 pt-3 pb-1" :open>
             <summary
               class="flex items-center gap-2 cursor-pointer text-sm font-medium text-amber-900 dark:text-amber-400 select-none hover:text-amber-700 dark:hover:text-amber-200 rounded transition-colors duration-150"
             >
@@ -147,9 +150,12 @@ const {
             <div class="mt-3">
               <div
                 class="flex items-center justify-start gap-1.5 mb-2 pb-2 border-b border-amber-600/10"
+                role="toolbar"
+                aria-label="Dependency view controls"
               >
                 <button
                   type="button"
+                  :aria-pressed="allDependencies"
                   @click="allDependencies = !allDependencies"
                   class="inline-flex items-center gap-1 text-xs uppercase font-bold tracking-wider text-amber-900 dark:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-600/20 px-2 py-1 rounded transition-colors"
                 >
@@ -167,6 +173,7 @@ const {
 
                 <button
                   type="button"
+                  :aria-pressed="noResultScroll"
                   @click="noResultScroll = !noResultScroll"
                   class="inline-flex items-center gap-1 text-xs uppercase font-bold tracking-wider text-amber-900 dark:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-600/20 px-2 py-1 rounded transition-colors"
                 >
@@ -186,6 +193,8 @@ const {
               <div
                 class="custom-scrollbar pe-1 transition-all duration-300"
                 :class="{ 'overflow-y-auto max-h-[216px]': !noResultScroll }"
+                role="region"
+                aria-label="Dependencies difference list"
               >
                 <ul
                   v-if="result && result.length > 0"
@@ -242,6 +251,7 @@ const {
                         </span>
                         <span
                           class="i-lucide:arrow-right w-3.5 h-3.5 shrink-0 text-amber-700/60 rtl:rotate-180"
+                          aria-hidden="true"
                         />
                         <span
                           class="font-mono text-2xs font-bold text-amber-900 dark:text-amber-300"
@@ -257,7 +267,7 @@ const {
                         </span>
                       </template>
 
-                      <span class="text-amber-600/40 mx-1 shrink-0">|</span>
+                      <span class="text-amber-600/40 mx-1 shrink-0" aria-hidden="true">|</span>
 
                       <span
                         class="font-mono text-2xs font-bold min-w-14 text-end shrink-0"
diff --git a/app/composables/pkg-size/useAnalyzeCauseWorker.ts b/app/composables/pkg-size/useAnalyzeCauseWorker.ts
index b2dac00a6e..0ee7c9c709 100644
--- a/app/composables/pkg-size/useAnalyzeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalyzeCauseWorker.ts
@@ -33,9 +33,6 @@ export function useAnalyzeCauseWorker(
   const summary = shallowRef<UISummary | undefined>()
   const error = shallowRef<string | undefined>()
 
-  let startAnalyzeCause: () => void = () => {}
-  let cancelAnalyzeCause: () => void = () => {}
-
   if (import.meta.server) {
     return {
       available,
@@ -47,8 +44,8 @@ export function useAnalyzeCauseWorker(
       allDependencies,
       summary,
       error,
-      startAnalyzeCause,
-      cancelAnalyzeCause,
+      startAnalyzeCause: () => {},
+      cancelAnalyzeCause: () => {},
     }
   }
 
@@ -74,7 +71,7 @@ export function useAnalyzeCauseWorker(
     console.error('Worker failure:', event)
   }
 
-  startAnalyzeCause = useThrottleFn(
+  const startAnalyzeCause = useThrottleFn(
     async () => {
       if (!worker || !available.value || analyzing.value) {
         return
@@ -104,7 +101,7 @@ export function useAnalyzeCauseWorker(
     true,
   )
 
-  cancelAnalyzeCause = useThrottleFn(
+  const cancelAnalyzeCause = useThrottleFn(
     async () => {
       if (!worker || !analyzing.value || cancelling.value) {
         return
@@ -169,6 +166,8 @@ export function useAnalyzeCauseWorker(
           addedText: rawBytesFormatter.value.format(msg.summary.added),
           removedText: rawBytesFormatter.value.format(msg.summary.removed),
         })
+        console.log(summary.value)
+        console.log(rawResult.value)
         analyzing.value = false
         cancelling.value = false
         break
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index f0791c7990..e0e043b6d7 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -134,6 +134,51 @@ vi.mock('~/composables/useCanGoBack', () => {
   }
 })
 
+vi.mock('~/composables/pkg-size/useAnalyzeCauseWorker', () => ({
+  useAnalyzeCauseWorker: () => ({
+    available: ref(true),
+    analyzing: ref(false),
+    cancelling: ref(false),
+    loading: ref(false),
+    result: ref([
+      {
+        isOptional: false,
+        name: 'valibot',
+        sizeDelta: 1843461,
+        sizeDeltaText: '1.8 MB',
+        status: 'added',
+        statusText: 'Added',
+        v1: null,
+        v2: {
+          isOptional: false,
+          size: 1843461,
+          sizeText: '1.8 MB',
+          version: '1.4.2',
+        },
+      },
+    ]),
+    error: ref(null),
+    summary: ref({
+      added: 20,
+      addedText: '20',
+      mandatorySizeDelta: 13357056,
+      mandatorySizeDeltaBytesText: '13,357,056',
+      mandatorySizeDeltaText: '13.4 MB',
+      netDependencies: 14,
+      netDependenciesText: '+14',
+      removed: 6,
+      removedText: '6',
+      sizeDelta: 94035365,
+      sizeDeltaBytesText: '94,035,365',
+      sizeDeltaText: '94 MB',
+    }),
+    noResultScroll: ref(false),
+    allDependencies: ref(true),
+    startAnalyzeCause: vi.fn(),
+    cancelAnalyzeCause: vi.fn(),
+  }),
+}))
+
 // Import components from #components where possible
 // For server/client variants, we need to import directly to test the specific variant
 import {
@@ -277,6 +322,7 @@ import {
   TabList,
   TabItem,
   TabPanel,
+  PackageSizeIncreaseAnalysis,
 } from '#components'
 
 // Server variant components must be imported directly to test the server-side render
@@ -4573,6 +4619,23 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
   })
+
+  describe('SizeIncreaseAnalysis', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageSizeIncreaseAnalysis, {
+        props: {
+          packageName: 'nuxt',
+          version: '4.5.0',
+          comparisonVersion: '4.4.8',
+          open: true,
+        },
+      })
+
+      const results = await runAxe(component)
+
+      expect(results.violations).toEqual([])
+    })
+  })
 })
 
 function applyTheme(colorMode: string, bgTheme: string | null) {
diff --git a/test/unit/a11y-component-coverage.spec.ts b/test/unit/a11y-component-coverage.spec.ts
index 47a219959b..86f8371613 100644
--- a/test/unit/a11y-component-coverage.spec.ts
+++ b/test/unit/a11y-component-coverage.spec.ts
@@ -61,8 +61,6 @@ const SKIPPED_COMPONENTS: Record<string, string> = {
   'Translation/StatusByFile.unused.vue': 'Unused component, might be needed in the future',
   'ColorScheme/Img.vue': 'Image component, basic ui',
   'VideoPlayer.vue': 'Atproto video component, basic ui',
-  // TODO: add a test for this component, but it requires mocking the composable and maybe the worker
-  'Package/SizeIncreaseAnalysis.vue': 'we need to mock the composable and maybe the worker',
 }
 
 function normalizeComponentPath(filePath: string): string {

From e470b18ca12aa49e53db9238641d4760c65ee9c8 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sun, 26 Jul 2026 15:27:46 +0200
Subject: [PATCH 42/50] chore: add hint for open prop

---
 app/components/Package/SizeIncreaseAnalysis.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/Package/SizeIncreaseAnalysis.vue b/app/components/Package/SizeIncreaseAnalysis.vue
index 0b16d10b2f..ca4f5654b7 100644
--- a/app/components/Package/SizeIncreaseAnalysis.vue
+++ b/app/components/Package/SizeIncreaseAnalysis.vue
@@ -5,6 +5,7 @@ const props = defineProps<{
   packageName?: string | null
   version?: string | null
   comparisonVersion?: string | null
+  // don't use and don't remove open: used at a11y.spec.ts
   open?: boolean
 }>()
 

From 0e7668afb32360d4e96cdee473d66dec11f7ddf0 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sun, 26 Jul 2026 16:05:00 +0200
Subject: [PATCH 43/50] chore: add some pkg-size tests

---
 package.json                              |   1 +
 pnpm-lock.yaml                            |   3 +
 test/unit/pkg-size-analyze-worker.spec.ts | 199 ++++++++++++++++++++++
 test/unit/pkg-size-analyze.spec.ts        | 108 ++++++++++++
 4 files changed, 311 insertions(+)
 create mode 100644 test/unit/pkg-size-analyze-worker.spec.ts
 create mode 100644 test/unit/pkg-size-analyze.spec.ts

diff --git a/package.json b/package.json
index d3b77b0f1e..e98ac8ecde 100644
--- a/package.json
+++ b/package.json
@@ -136,6 +136,7 @@
     "chromatic": "18.0.1",
     "devalue": "5.8.1",
     "eslint-plugin-regexp": "3.1.1",
+    "fake-indexeddb": "^6.2.5",
     "fast-check": "4.8.0",
     "h3": "1.15.11",
     "h3-next": "npm:h3@2.0.1-rc.22",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ca769e7da1..7cdce54e45 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -334,6 +334,9 @@ importers:
       eslint-plugin-regexp:
         specifier: 3.1.1
         version: 3.1.1(eslint@10.6.0)
+      fake-indexeddb:
+        specifier: ^6.2.5
+        version: 6.2.5
       fast-check:
         specifier: 4.8.0
         version: 4.8.0
diff --git a/test/unit/pkg-size-analyze-worker.spec.ts b/test/unit/pkg-size-analyze-worker.spec.ts
new file mode 100644
index 0000000000..09d93f8387
--- /dev/null
+++ b/test/unit/pkg-size-analyze-worker.spec.ts
@@ -0,0 +1,199 @@
+import { vi, describe, it, expect, beforeEach, beforeAll } from 'vitest'
+
+vi.mock('~/utils/pkg-size/resolve-and-persist-graph', () => ({
+  resolveAndPersistGraph: vi.fn().mockResolvedValue('mocked-key'),
+}))
+
+vi.mock('~/utils/pkg-size/db', () => ({
+  db: {
+    getSessions: vi.fn().mockResolvedValue([]),
+    initSession: vi.fn().mockResolvedValue(undefined),
+    getSession: vi.fn().mockImplementation(key => ({
+      rootKey: key,
+      resolvedPackageKeys: ['dep-a@1.0.0'],
+      optionalPackageKeys: [],
+      totalSize: 1024,
+      totalOptionalSize: 0,
+      isFinished: true,
+    })),
+    packages: {
+      where: vi.fn().mockReturnThis(),
+      anyOf: vi.fn().mockReturnThis(),
+      toArray: vi
+        .fn()
+        .mockResolvedValue([
+          {
+            id: 'dep-a@1.0.0',
+            name: 'dep-a',
+            version: '1.0.0',
+            unpackedSize: 1024,
+            isOptional: false,
+          },
+        ]),
+    },
+  },
+}))
+
+const postMessageMock = vi.fn()
+let messageHandler: (event: any) => Promise<void>
+
+describe('analyze-cause-worker', () => {
+  beforeAll(async () => {
+    vi.stubGlobal('self', {
+      addEventListener: (event: string, handler: any) => {
+        if (event === 'message') messageHandler = handler
+      },
+      postMessage: postMessageMock,
+    })
+
+    await import('../../app/utils/pkg-size/analyze-cause-worker')
+  })
+
+  beforeEach(() => {
+    postMessageMock.mockClear()
+    vi.clearAllMocks()
+  })
+
+  it('should handle analyze-cause-abort correctly', async () => {
+    await messageHandler({
+      data: { type: 'analyze-cause-abort', id: 'test-1' },
+    })
+    expect(postMessageMock).toHaveBeenCalledWith({ type: 'aborted', id: 'test-1' })
+  })
+
+  it('should process analyze-cause successfully', async () => {
+    await messageHandler({
+      data: {
+        type: 'analyze-cause',
+        id: 'test-2',
+        packageName: 'vue',
+        fromVersion: '3.4.0',
+        toVersion: '3.5.0',
+      },
+    })
+
+    expect(postMessageMock).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'sessions', id: 'test-2' }),
+    )
+
+    expect(postMessageMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'result',
+        id: 'test-2',
+        summary: expect.any(Object),
+      }),
+    )
+  })
+
+  it('should ignore unknown message types (Line 34)', async () => {
+    await messageHandler({ data: { type: 'random-unknown-type' } })
+    expect(postMessageMock).not.toHaveBeenCalled()
+  })
+
+  it('should handle abort with mismatched id (Lines 25-26)', async () => {
+    messageHandler({
+      data: {
+        type: 'analyze-cause',
+        id: 'active-id',
+        packageName: 'foo',
+        fromVersion: '1',
+        toVersion: '2',
+      },
+    })
+
+    await messageHandler({ data: { type: 'analyze-cause-abort', id: 'wrong-id' } })
+
+    expect(postMessageMock).toHaveBeenCalledWith({ type: 'aborted', id: 'wrong-id' })
+  })
+
+  it('should handle generic errors in catch block (Lines 169-172)', async () => {
+    const { resolveAndPersistGraph } =
+      await import('../../app/utils/pkg-size/resolve-and-persist-graph')
+    vi.mocked(resolveAndPersistGraph).mockRejectedValueOnce(new Error('Network explosion'))
+
+    await messageHandler({
+      data: {
+        type: 'analyze-cause',
+        id: 'error-id',
+        packageName: 'foo',
+        fromVersion: '1',
+        toVersion: '2',
+      },
+    })
+
+    expect(postMessageMock).toHaveBeenCalledWith({
+      type: 'error',
+      id: 'error-id',
+      message: 'Network explosion',
+    })
+  })
+
+  it('should handle missing sessions, removed packages, and flatMap merges (Lines 81, 110, 148, 189)', async () => {
+    const { db } = await import('../../app/utils/pkg-size/db')
+
+    vi.mocked(db.getSession).mockImplementation(async key => {
+      if (key.includes('1.0.0')) {
+        return {
+          rootKey: key,
+          resolvedPackageKeys: ['dep-a@1.0.0', 'dep-a@1.0.1'], // Diferente versión, mismo paquete para L189
+          optionalPackageKeys: [],
+          totalSize: 2000,
+          isFinished: true,
+        } as any
+      }
+      return undefined
+    })
+
+    vi.mocked(db.packages.toArray).mockResolvedValueOnce([
+      {
+        id: 'dep-a@1.0.0',
+        name: 'dep-a',
+        version: '1.0.0',
+        unpackedSize: 1000,
+        isOptional: false,
+      } as any,
+      {
+        id: 'dep-a@1.0.1',
+        name: 'dep-a',
+        version: '1.0.1',
+        unpackedSize: 1000,
+        isOptional: false,
+      } as any,
+    ])
+
+    await messageHandler({
+      data: {
+        type: 'analyze-cause',
+        id: 'complex-id',
+        packageName: 'foo',
+        fromVersion: '1.0.0',
+        toVersion: '2.0.0',
+      },
+    })
+
+    expect(postMessageMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'result',
+        summary: expect.objectContaining({ removed: 1 }),
+      }),
+    )
+  })
+})
+
+describe('analyze-cause-client-worker', () => {
+  it('should instantiate the Vite worker', async () => {
+    const WorkerMock = vi.fn()
+    vi.stubGlobal('Worker', WorkerMock)
+
+    vi.doMock('~/utils/pkg-size/analyze-cause-worker?worker', () => ({
+      default: WorkerMock,
+    }))
+
+    const { worker } = await import('../../app/utils/pkg-size/analyze-cause-client-worker')
+
+    expect(WorkerMock).toHaveBeenCalledWith({
+      name: 'NpmxPkgSizeAnalyzeCauseWorker',
+    })
+    expect(worker).toBeInstanceOf(WorkerMock)
+  })
+})
diff --git a/test/unit/pkg-size-analyze.spec.ts b/test/unit/pkg-size-analyze.spec.ts
new file mode 100644
index 0000000000..f134364d01
--- /dev/null
+++ b/test/unit/pkg-size-analyze.spec.ts
@@ -0,0 +1,108 @@
+import { describe, it, expect, beforeAll, afterEach, afterAll } from 'vitest'
+import 'fake-indexeddb/auto'
+import { setupServer } from 'msw/node'
+import { http, HttpResponse } from 'msw'
+import { resolveAndPersistGraph } from '../../app/utils/pkg-size/resolve-and-persist-graph'
+import { db } from '../../app/utils/pkg-size/db'
+
+const server = setupServer(
+  http.get('https://registry.npmjs.org/:packageName', ({ params }) => {
+    const { packageName } = params
+
+    if (packageName === 'test-pkg' || packageName === '@scope/test-pkg') {
+      return HttpResponse.json({
+        'name': packageName,
+        'dist-tags': { latest: '1.0.0' },
+        'versions': {
+          '1.0.0': {
+            name: packageName,
+            version: '1.0.0',
+            dist: {
+              unpackedSize: 1024,
+              tarball: `https://registry.npmjs.org/${packageName}/-/${packageName}-1.0.0.tgz`,
+            },
+            dependencies: {
+              'dep-child': '^1.0.0',
+            },
+            optionalDependencies: {
+              'opt-child': '^2.0.0',
+            },
+          },
+          'dep-child': {
+            name: 'dep-child',
+            version: '1.0.0',
+            dist: { unpackedSize: 512, tarball: '' },
+          },
+          'opt-child': {
+            name: 'opt-child',
+            version: '2.0.0',
+            dist: { unpackedSize: 256, tarball: '' },
+          },
+        },
+      })
+    }
+
+    if (packageName === 'dep-child') {
+      return HttpResponse.json({
+        'name': 'dep-child',
+        'dist-tags': { latest: '1.0.0' },
+        'versions': {
+          '1.0.0': {
+            name: 'dep-child',
+            version: '1.0.0',
+            dist: { unpackedSize: 512, tarball: '' },
+          },
+        },
+      })
+    }
+
+    if (packageName === 'opt-child') {
+      return HttpResponse.json({
+        'name': 'opt-child',
+        'dist-tags': { latest: '2.0.0' },
+        'versions': {
+          '2.0.0': {
+            name: 'opt-child',
+            version: '2.0.0',
+            dist: { unpackedSize: 256, tarball: '' },
+          },
+        },
+      })
+    }
+
+    return new HttpResponse(null, { status: 404 })
+  }),
+)
+
+beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
+afterEach(() => {
+  server.resetHandlers()
+  db.dropDatabase()
+})
+afterAll(() => server.close())
+
+describe('resolveAndPersistGraph', () => {
+  it('should resolve metadata, process BFS queue, and persist session successfully', async () => {
+    const controller = new AbortController()
+    const rootKey = await resolveAndPersistGraph('test-pkg', '1.0.0', controller)
+
+    expect(rootKey).toBe('test-pkg@1.0.0')
+
+    const session = await db.getSession(rootKey)
+    expect(session).toBeDefined()
+    expect(session?.isFinished).toBe(true)
+    expect(session?.totalSize).toBeGreaterThan(0)
+
+    const pkgCount = await db.packages.count()
+    expect(pkgCount).toBeGreaterThan(0)
+  })
+
+  it('should handle aborted requests gracefully', async () => {
+    const controller = new AbortController()
+    controller.abort()
+
+    await expect(resolveAndPersistGraph('test-pkg', '1.0.0', controller)).rejects.toThrow(
+      'pkg-size-aborted',
+    )
+  })
+})

From 93e3e9c34f5d9325fb45e9939757fe2f9c47a7cb Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 26 Jul 2026 14:07:56 +0000
Subject: [PATCH 44/50] [autofix.ci] apply automated fixes

---
 test/unit/pkg-size-analyze-worker.spec.ts | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/test/unit/pkg-size-analyze-worker.spec.ts b/test/unit/pkg-size-analyze-worker.spec.ts
index 09d93f8387..dee03b2179 100644
--- a/test/unit/pkg-size-analyze-worker.spec.ts
+++ b/test/unit/pkg-size-analyze-worker.spec.ts
@@ -19,17 +19,15 @@ vi.mock('~/utils/pkg-size/db', () => ({
     packages: {
       where: vi.fn().mockReturnThis(),
       anyOf: vi.fn().mockReturnThis(),
-      toArray: vi
-        .fn()
-        .mockResolvedValue([
-          {
-            id: 'dep-a@1.0.0',
-            name: 'dep-a',
-            version: '1.0.0',
-            unpackedSize: 1024,
-            isOptional: false,
-          },
-        ]),
+      toArray: vi.fn().mockResolvedValue([
+        {
+          id: 'dep-a@1.0.0',
+          name: 'dep-a',
+          version: '1.0.0',
+          unpackedSize: 1024,
+          isOptional: false,
+        },
+      ]),
     },
   },
 }))

From 398cf19b29b88dbc471cfa06616af76b189cff74 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sun, 26 Jul 2026 16:26:52 +0200
Subject: [PATCH 45/50] chore: clenup

---
 app/composables/pkg-size/useAnalyzeCauseWorker.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/composables/pkg-size/useAnalyzeCauseWorker.ts b/app/composables/pkg-size/useAnalyzeCauseWorker.ts
index 0ee7c9c709..44b6499a2e 100644
--- a/app/composables/pkg-size/useAnalyzeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalyzeCauseWorker.ts
@@ -166,8 +166,6 @@ export function useAnalyzeCauseWorker(
           addedText: rawBytesFormatter.value.format(msg.summary.added),
           removedText: rawBytesFormatter.value.format(msg.summary.removed),
         })
-        console.log(summary.value)
-        console.log(rawResult.value)
         analyzing.value = false
         cancelling.value = false
         break

From d224f7abf49bed0a7f0201c5bd697842dd3071b8 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sun, 26 Jul 2026 16:41:40 +0200
Subject: [PATCH 46/50] chore: apply coderabbit suggestions to the tests

---
 test/unit/pkg-size-analyze-worker.spec.ts | 24 +++++++++++------------
 test/unit/pkg-size-analyze.spec.ts        | 15 +++++++++++---
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/test/unit/pkg-size-analyze-worker.spec.ts b/test/unit/pkg-size-analyze-worker.spec.ts
index 09d93f8387..c0ad31683d 100644
--- a/test/unit/pkg-size-analyze-worker.spec.ts
+++ b/test/unit/pkg-size-analyze-worker.spec.ts
@@ -19,17 +19,15 @@ vi.mock('~/utils/pkg-size/db', () => ({
     packages: {
       where: vi.fn().mockReturnThis(),
       anyOf: vi.fn().mockReturnThis(),
-      toArray: vi
-        .fn()
-        .mockResolvedValue([
-          {
-            id: 'dep-a@1.0.0',
-            name: 'dep-a',
-            version: '1.0.0',
-            unpackedSize: 1024,
-            isOptional: false,
-          },
-        ]),
+      toArray: vi.fn().mockResolvedValue([
+        {
+          id: 'dep-a@1.0.0',
+          name: 'dep-a',
+          version: '1.0.0',
+          unpackedSize: 1024,
+          isOptional: false,
+        },
+      ]),
     },
   },
 }))
@@ -91,7 +89,7 @@ describe('analyze-cause-worker', () => {
   })
 
   it('should handle abort with mismatched id (Lines 25-26)', async () => {
-    messageHandler({
+    const pending = messageHandler({
       data: {
         type: 'analyze-cause',
         id: 'active-id',
@@ -104,6 +102,8 @@ describe('analyze-cause-worker', () => {
     await messageHandler({ data: { type: 'analyze-cause-abort', id: 'wrong-id' } })
 
     expect(postMessageMock).toHaveBeenCalledWith({ type: 'aborted', id: 'wrong-id' })
+
+    await pending
   })
 
   it('should handle generic errors in catch block (Lines 169-172)', async () => {
diff --git a/test/unit/pkg-size-analyze.spec.ts b/test/unit/pkg-size-analyze.spec.ts
index f134364d01..51ed95cd64 100644
--- a/test/unit/pkg-size-analyze.spec.ts
+++ b/test/unit/pkg-size-analyze.spec.ts
@@ -75,9 +75,9 @@ const server = setupServer(
 )
 
 beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
-afterEach(() => {
+afterEach(async () => {
   server.resetHandlers()
-  db.dropDatabase()
+  await db.dropDatabase()
 })
 afterAll(() => server.close())
 
@@ -94,7 +94,16 @@ describe('resolveAndPersistGraph', () => {
     expect(session?.totalSize).toBeGreaterThan(0)
 
     const pkgCount = await db.packages.count()
-    expect(pkgCount).toBeGreaterThan(0)
+    expect(pkgCount).toBe(3)
+
+    const depChild = await db.packages.get('dep-child@1.0.0')
+    expect(depChild).toBeDefined()
+
+    const optChild = await db.packages.get('opt-child@2.0.0')
+    expect(optChild).toBeDefined()
+
+    const edgesCount = await db.edges.count()
+    expect(edgesCount).toBe(2)
   })
 
   it('should handle aborted requests gracefully', async () => {

From 82c65c8b153dd6afc187f716b3384b0a3080beea Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sun, 26 Jul 2026 16:42:44 +0200
Subject: [PATCH 47/50] chore: apply coderabbit suggestions to composable

---
 app/composables/pkg-size/useAnalyzeCauseWorker.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/composables/pkg-size/useAnalyzeCauseWorker.ts b/app/composables/pkg-size/useAnalyzeCauseWorker.ts
index 44b6499a2e..9e4bf60f55 100644
--- a/app/composables/pkg-size/useAnalyzeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalyzeCauseWorker.ts
@@ -79,7 +79,7 @@ export function useAnalyzeCauseWorker(
 
       analyzing.value = true
       currentId =
-        import.meta.test || import.meta.dev ? (currentId as number)++ : crypto.randomUUID()
+        import.meta.test || import.meta.dev ? (currentId as number) + 1 : crypto.randomUUID()
       cancelling.value = false
       error.value = undefined
       summary.value = undefined

From d9f1af27db84978873bcd11365d1f7ca5ef940ea Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sun, 26 Jul 2026 18:23:08 +0200
Subject: [PATCH 48/50] chore: add composable test

---
 .../pkg-size/useAnalyzeCauseWorker.ts         |   6 +-
 .../use-analyze-cause-worker.spec.ts          | 179 ++++++++++++++++++
 2 files changed, 182 insertions(+), 3 deletions(-)
 create mode 100644 test/nuxt/composables/use-analyze-cause-worker.spec.ts

diff --git a/app/composables/pkg-size/useAnalyzeCauseWorker.ts b/app/composables/pkg-size/useAnalyzeCauseWorker.ts
index 9e4bf60f55..2a4af09842 100644
--- a/app/composables/pkg-size/useAnalyzeCauseWorker.ts
+++ b/app/composables/pkg-size/useAnalyzeCauseWorker.ts
@@ -33,7 +33,7 @@ export function useAnalyzeCauseWorker(
   const summary = shallowRef<UISummary | undefined>()
   const error = shallowRef<string | undefined>()
 
-  if (import.meta.server) {
+  if (!import.meta.dev && import.meta.server) {
     return {
       available,
       analyzing,
@@ -44,8 +44,8 @@ export function useAnalyzeCauseWorker(
       allDependencies,
       summary,
       error,
-      startAnalyzeCause: () => {},
-      cancelAnalyzeCause: () => {},
+      startAnalyzeCause: async () => {},
+      cancelAnalyzeCause: async () => {},
     }
   }
 
diff --git a/test/nuxt/composables/use-analyze-cause-worker.spec.ts b/test/nuxt/composables/use-analyze-cause-worker.spec.ts
new file mode 100644
index 0000000000..7a279003a0
--- /dev/null
+++ b/test/nuxt/composables/use-analyze-cause-worker.spec.ts
@@ -0,0 +1,179 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { computed, defineComponent } from 'vue'
+import { mount } from '@vue/test-utils'
+import { until } from '@vueuse/core'
+import { useAnalyzeCauseWorker } from '../../../app/composables/pkg-size/useAnalyzeCauseWorker'
+
+vi.mock('~/composables/useNumberFormatter', () => ({
+  useBytesFormatter: () => ({
+    format: (v: number) => `${v} B`,
+    t: (key: string) => key,
+  }),
+  useNumberFormatter: () =>
+    computed(() => ({
+      format: (v: number) => `${v}`,
+    })),
+}))
+
+const mockWorker = {
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+  postMessage: vi.fn(),
+}
+
+vi.mock('../../../app/utils/pkg-size/analyze-cause-client-worker', () => ({
+  worker: mockWorker,
+}))
+
+function mountComposable(pkg = 'test-pkg', vTo = '2.0.0', vFrom = '1.0.0') {
+  let composableResult: ReturnType<typeof useAnalyzeCauseWorker> | undefined
+
+  const TestComponent = defineComponent({
+    setup() {
+      const packageName = computed(() => pkg)
+      const version = computed(() => vTo)
+      const comparedVersion = computed(() => vFrom)
+
+      composableResult = useAnalyzeCauseWorker(packageName, version, comparedVersion)
+      return () => {}
+    },
+  })
+
+  const wrapper = mount(TestComponent)
+  return { wrapper, result: composableResult! }
+}
+
+describe('useAnalyzeCauseWorker', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('should initialize and load the worker correctly', async () => {
+    const { result } = mountComposable()
+
+    await until(result.loading).toBe(false, { timeout: 2000 })
+
+    expect(result.loading.value).toBe(false)
+    expect(result.available.value).toBe(true)
+    expect(mockWorker.addEventListener).toHaveBeenCalledWith('message', expect.any(Function))
+  })
+
+  it('should start analysis and send postMessage', async () => {
+    const { result } = mountComposable()
+    await until(result.loading).toBe(false, { timeout: 2000 })
+
+    vi.useFakeTimers()
+
+    const startPromise = result.startAnalyzeCause()
+    await vi.runAllTimersAsync()
+    await startPromise
+
+    expect(result.analyzing.value).toBe(true)
+    expect(mockWorker.postMessage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'analyze-cause',
+        packageName: 'test-pkg',
+      }),
+    )
+  })
+
+  it('should cancel analysis', async () => {
+    const { result } = mountComposable()
+    await until(result.loading).toBe(false, { timeout: 2000 })
+
+    vi.useFakeTimers()
+
+    const startPromise = result.startAnalyzeCause()
+    await vi.runAllTimersAsync()
+    await startPromise
+
+    const cancelPromise = result.cancelAnalyzeCause()
+    await vi.runAllTimersAsync()
+    await cancelPromise
+
+    expect(result.cancelling.value).toBe(true)
+    expect(mockWorker.postMessage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'analyze-cause-abort',
+      }),
+    )
+  })
+
+  it('should handle successful result messages', async () => {
+    const { result } = mountComposable()
+    await until(result.loading).toBe(false, { timeout: 2000 })
+
+    vi.useFakeTimers()
+
+    const messageHandler = mockWorker.addEventListener.mock.calls.find(
+      call => call[0] === 'message',
+    )![1]
+
+    const startPromise = result.startAnalyzeCause()
+    await vi.runAllTimersAsync()
+    await startPromise
+
+    const currentId = mockWorker.postMessage.mock.calls[0]![0].id
+
+    const mockMsg = {
+      data: {
+        id: currentId,
+        type: 'result',
+        result: [{ name: 'dep-a', status: 'added', sizeDelta: 100, isOptional: false }],
+        summary: {
+          sizeDelta: 100,
+          mandatorySizeDelta: 100,
+          netDependencies: 1,
+          added: 1,
+          removed: 0,
+        },
+      },
+    }
+
+    const handlerPromise = messageHandler(mockMsg as any)
+    await vi.runAllTimersAsync()
+    await handlerPromise
+
+    expect(result.analyzing.value).toBe(false)
+    expect(result.result.value).toHaveLength(1)
+    expect(result.summary.value?.sizeDeltaText).toBe('100 B')
+  })
+
+  it('should handle worker error messages', async () => {
+    const { result } = mountComposable()
+    await until(result.loading).toBe(false, { timeout: 2000 })
+
+    vi.useFakeTimers()
+
+    const messageHandler = mockWorker.addEventListener.mock.calls.find(
+      call => call[0] === 'message',
+    )![1]
+
+    const startPromise = result.startAnalyzeCause()
+    await vi.runAllTimersAsync()
+    await startPromise
+
+    const currentId = mockWorker.postMessage.mock.calls[0]![0].id
+
+    await messageHandler({
+      data: { id: currentId, type: 'error', message: 'Something exploded' },
+    } as any)
+
+    expect(result.error.value).toBe('Something exploded')
+    expect(result.analyzing.value).toBe(false)
+  })
+
+  it('should clean up listeners on unmount', async () => {
+    const { wrapper, result } = mountComposable()
+    await until(result.loading).toBe(false, { timeout: 2000 })
+
+    wrapper.unmount()
+
+    expect(mockWorker.removeEventListener).toHaveBeenCalledWith('message', expect.any(Function))
+    expect(mockWorker.removeEventListener).toHaveBeenCalledWith('error', expect.any(Function))
+  })
+})

From e391f4050064e5fb88b02aceb2ca125fd658a67e Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sun, 26 Jul 2026 18:43:59 +0200
Subject: [PATCH 49/50] chore: apply coderabbit suggestions to composable test

---
 .../use-analyze-cause-worker.spec.ts          | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/test/nuxt/composables/use-analyze-cause-worker.spec.ts b/test/nuxt/composables/use-analyze-cause-worker.spec.ts
index 7a279003a0..38d287a0f3 100644
--- a/test/nuxt/composables/use-analyze-cause-worker.spec.ts
+++ b/test/nuxt/composables/use-analyze-cause-worker.spec.ts
@@ -15,11 +15,11 @@ vi.mock('~/composables/useNumberFormatter', () => ({
     })),
 }))
 
-const mockWorker = {
+const mockWorker = vi.hoisted(() => ({
   addEventListener: vi.fn(),
   removeEventListener: vi.fn(),
   postMessage: vi.fn(),
-}
+}))
 
 vi.mock('../../../app/utils/pkg-size/analyze-cause-client-worker', () => ({
   worker: mockWorker,
@@ -44,6 +44,22 @@ function mountComposable(pkg = 'test-pkg', vTo = '2.0.0', vFrom = '1.0.0') {
 }
 
 describe('useAnalyzeCauseWorker', () => {
+  function getWorkerMessageHandler() {
+    const call = mockWorker.addEventListener.mock.calls.find(c => c[0] === 'message')
+    if (!call || typeof call[1] !== 'function') {
+      throw new Error('Worker message handler not registered')
+    }
+    return call[1] as (event: any) => Promise<void>
+  }
+
+  function getWorkerPostMessageId() {
+    const call = mockWorker.postMessage.mock.calls[0]
+    if (!call || !call[0] || typeof call[0] !== 'object' || !('id' in call[0])) {
+      throw new Error('Worker postMessage not called with expected payload')
+    }
+    return (call[0] as { id: string | number }).id
+  }
+
   beforeEach(() => {
     vi.clearAllMocks()
   })
@@ -109,15 +125,13 @@ describe('useAnalyzeCauseWorker', () => {
 
     vi.useFakeTimers()
 
-    const messageHandler = mockWorker.addEventListener.mock.calls.find(
-      call => call[0] === 'message',
-    )![1]
+    const messageHandler = getWorkerMessageHandler()
 
     const startPromise = result.startAnalyzeCause()
     await vi.runAllTimersAsync()
     await startPromise
 
-    const currentId = mockWorker.postMessage.mock.calls[0]![0].id
+    const currentId = getWorkerPostMessageId()
 
     const mockMsg = {
       data: {
@@ -134,7 +148,7 @@ describe('useAnalyzeCauseWorker', () => {
       },
     }
 
-    const handlerPromise = messageHandler(mockMsg as any)
+    const handlerPromise = messageHandler(mockMsg)
     await vi.runAllTimersAsync()
     await handlerPromise
 
@@ -149,19 +163,17 @@ describe('useAnalyzeCauseWorker', () => {
 
     vi.useFakeTimers()
 
-    const messageHandler = mockWorker.addEventListener.mock.calls.find(
-      call => call[0] === 'message',
-    )![1]
+    const messageHandler = getWorkerMessageHandler()
 
     const startPromise = result.startAnalyzeCause()
     await vi.runAllTimersAsync()
     await startPromise
 
-    const currentId = mockWorker.postMessage.mock.calls[0]![0].id
+    const currentId = getWorkerPostMessageId()
 
     await messageHandler({
       data: { id: currentId, type: 'error', message: 'Something exploded' },
-    } as any)
+    })
 
     expect(result.error.value).toBe('Something exploded')
     expect(result.analyzing.value).toBe(false)

From fce678c0080082d3388339c08b01ea493be514f3 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sun, 26 Jul 2026 19:05:18 +0200
Subject: [PATCH 50/50] chore: .

---
 .../composables/use-analyze-cause-worker.spec.ts     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/test/nuxt/composables/use-analyze-cause-worker.spec.ts b/test/nuxt/composables/use-analyze-cause-worker.spec.ts
index 38d287a0f3..6448e538c1 100644
--- a/test/nuxt/composables/use-analyze-cause-worker.spec.ts
+++ b/test/nuxt/composables/use-analyze-cause-worker.spec.ts
@@ -49,7 +49,7 @@ describe('useAnalyzeCauseWorker', () => {
     if (!call || typeof call[1] !== 'function') {
       throw new Error('Worker message handler not registered')
     }
-    return call[1] as (event: any) => Promise<void>
+    return call[1] as (event: unknown) => Promise<void>
   }
 
   function getWorkerPostMessageId() {
@@ -133,11 +133,13 @@ describe('useAnalyzeCauseWorker', () => {
 
     const currentId = getWorkerPostMessageId()
 
-    const mockMsg = {
+    const handlerPromise = messageHandler({
       data: {
         id: currentId,
         type: 'result',
-        result: [{ name: 'dep-a', status: 'added', sizeDelta: 100, isOptional: false }],
+        result: [
+          { name: 'dep-a', status: 'added', sizeDelta: 100, isOptional: false, v1: null, v2: null },
+        ],
         summary: {
           sizeDelta: 100,
           mandatorySizeDelta: 100,
@@ -146,9 +148,7 @@ describe('useAnalyzeCauseWorker', () => {
           removed: 0,
         },
       },
-    }
-
-    const handlerPromise = messageHandler(mockMsg)
+    })
     await vi.runAllTimersAsync()
     await handlerPromise