diff --git a/docs/superpowers/specs/2026-05-30-bundle-dependency-compatibility-design.md b/docs/superpowers/specs/2026-05-30-bundle-dependency-compatibility-design.md
new file mode 100644
index 0000000000..d68f99d3cb
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-30-bundle-dependency-compatibility-design.md
@@ -0,0 +1,136 @@
+# Bundle Dependency Compatibility View — Design
+
+Date: 2026-05-30
+Status: Approved for implementation
+Related PR (precursor): #2373 (fixed empty compare picker by gating on `native_packages`)
+
+## Problem
+
+The bundle **Dependencies** tab (`src/pages/app/[app].bundle.[bundle].dependencies.vue`)
+can compare two bundles, but it only shows a **version diff** ("changed" vs
+"unchanged" counts, and lists only changed packages). It does not tell the user
+the thing that actually matters: **is shipping this bundle over-the-air (OTA) safe,
+or does it require an app-store update?** — which is exactly what the CLI
+`capgo bundle compatibility` command answers.
+
+This design upgrades the tab to:
+1. Show every package with an explicit, color-coded status (changed / added /
+   removed / unchanged), each with the relevant version(s).
+2. Show a CLI-grade **compatibility verdict** banner (compatible ✅ / not
+   compatible ❌ + reasons).
+
+## Direction (decided)
+
+The verdict is directional. The **viewed bundle is the candidate update**; the
+bundle chosen in "Compare with bundle" is the **installed baseline**. The verdict
+answers: *"Can devices running the compare (baseline) bundle safely receive the
+viewed (candidate) bundle over-the-air?"* This matches the CLI semantics
+(`local` = candidate being uploaded, `remote` = what's already deployed).
+
+Implication: a **newly added** native plugin in the candidate is the cause of
+incompatibility (the installed app lacks that native code → needs app-store
+update). A **removed** plugin is OTA-safe.
+
+## Data model
+
+`app_versions.native_packages` is `jsonb[]`; each entry:
+
+```ts
+interface NativePackage {
+  name: string
+  version: string
+  ios_checksum?: string
+  android_checksum?: string
+}
+```
+
+Confirmed against prod data: entries can carry `ios_checksum` / `android_checksum`
+(not just version). The verdict uses these — a version match with a changed native
+checksum is still incompatible (native code changed).
+
+## Compatibility algorithm (ported from CLI `getCompatibilityDetails`)
+
+For each package, compare candidate (`local`) vs baseline (`remote`):
+
+- **No candidate version (removed):** compatible. "Package only exists on baseline
+  (will be removed)" — OTA-safe.
+- **Candidate present, no baseline version (added/new plugin):** **incompatible**,
+  reason `new_plugin` — requires app-store update.
+- **Both present:**
+  - version ranges don't intersect (`@std/semver` `parseRange` + `rangeIntersects`)
+    → reason `version_mismatch`.
+  - `ios_checksum` differs (both present) → reason `ios_code_changed`.
+  - `android_checksum` differs (both present) → reason `android_code_changed`.
+  - both checksums differ → reason `both_platforms_changed`.
+  - no reasons → compatible.
+
+Overall verdict = incompatible if **any** package is incompatible.
+
+This logic lives in a new shared util so the page stays thin and the logic is
+unit-testable: `src/services/bundleCompatibility.ts`.
+
+## Per-package status + color scheme (decided)
+
+| Status | Color | Display | Meaning |
+|---|---|---|---|
+| changed | blue | `old → new` | present in both, version differs |
+| added | green | `New · <version>` | only in candidate (cause of incompat) |
+| removed | red | `Removed · <version>` | only in baseline (OTA-safe) |
+| unchanged | gray | `Unchanged · <version>` | present in both, identical version |
+
+- When no compare bundle is selected, fall back to current behavior: a plain list
+  of the viewed bundle's packages (status concept doesn't apply with one bundle).
+- With a compare bundle selected: list **all** packages (changed first, then
+  added/removed, then unchanged), each with a colored pill + left-border accent.
+- Counts row: Changed / Added / Removed / Unchanged / Total.
+
+Color tokens follow existing Tailwind/DaisyUI usage already in the file
+(blue-100/800, emerald, red, slate for gray), dark-mode variants included.
+
+## Compatibility verdict banner (decided)
+
+Shown only when a compare bundle is selected (a verdict needs a baseline):
+
+- ✅ **Compatible** (green banner): "This bundle can be delivered over-the-air to
+  devices running {baseline}."
+- ❌ **Not compatible** (red banner): "{n} package(s) require an app-store update."
+  followed by the offending packages and their reason text (new native plugin /
+  version change / iOS or Android native code changed), reusing the CLI's reason
+  → message mapping.
+
+Note on the green-added / red-verdict tension: an added package shows green in the
+diff (it *was* added) but is named in the red verdict banner as a cause of
+incompatibility. The banner lists offending packages by name so the two readings
+never contradict.
+
+## Components / files
+
+- **New:** `src/services/bundleCompatibility.ts` — pure functions:
+  - `NativePackage`, `CompatibilityReason`, `PackageComparison` types
+  - `comparePackages(candidate, baseline)` → `PackageComparison[]` (status + reasons + versions)
+  - `summarizeCompatibility(comparisons)` → `{ compatible, incompatibleCount, offenders }`
+  - Uses `@std/semver` `parseRange` + `rangeIntersects` (same as CLI).
+- **Edit:** `src/pages/app/[app].bundle.[bundle].dependencies.vue` — replace the
+  diff-only computeds + table with status-aware rendering and the verdict banner.
+  Keep existing data fetching, `BundleCompareSelect`, caching, request-id guards.
+- **i18n:** add keys to `messages/en.json` (source of truth; `fallbackLocale: 'en'`
+  so other locales fall back gracefully — no need to translate 15 files in this PR).
+
+## Out of scope
+
+- No backend/schema/API changes.
+- No changes to the Manifest tab.
+- Not wiring the verdict into the channel-set flow (that already has its own toast).
+
+## Test plan
+
+- Unit tests for `bundleCompatibility.ts`: added/removed/changed/unchanged,
+  version-range intersect, checksum-only change, new-plugin incompatibility,
+  overall verdict aggregation.
+- Manual: on `me.wcaleniewolny.test.ionic.vue2`, view `1.0.7-c`, compare with
+  `0.0.0`:
+  - 3 changed rows (blue, `8.3.4 → 8.1.0` ×2, `8.46.1 → 8.45.9`).
+  - Verdict ❌ Not compatible (version mismatches + updater checksum change).
+- Manual: compare two identical bundles → all gray unchanged, verdict ✅.
+- Dev server points at **prod DB** for manual testing (plain `vite`, default branch
+  → prod config; do NOT use `serve:dev`).
diff --git a/messages/en.json b/messages/en.json
index 19116463e4..067e337523 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -888,22 +888,34 @@
   "demo-select-role": "Select a role",
   "demo-teleport-desc": "This input is teleported into the dialog content area",
   "demo-text-placeholder": "Enter your text here...",
+  "compat-reason-android-changed": "Android native code changed (requires app store update)",
+  "compat-reason-both-changed": "iOS and Android native code changed (requires app store update)",
+  "compat-reason-ios-changed": "iOS native code changed (requires app store update)",
+  "compat-reason-new-plugin": "New native plugin (requires app store update)",
+  "compat-reason-removed-plugin": "Plugin removed",
+  "compat-reason-version-mismatch": "Native version changed (requires app store update)",
+  "compat-verdict-compatible": "Compatible",
+  "compat-verdict-compatible-detail": "This bundle can be delivered over-the-air to devices running {bundle}.",
+  "compat-verdict-incompatible": "Not compatible ({count})",
+  "compat-verdict-incompatible-detail": "Some packages require an app store update, so this bundle cannot be delivered over-the-air.",
   "dependencies": "Dependencies",
-  "dependencies-changed-packages": "Changed packages",
+  "dependencies-added-packages": "Added",
+  "dependencies-changed-packages": "Changed",
   "dependencies-compare-label": "Compare with bundle",
   "dependencies-compare-latest": "Latest bundles",
   "dependencies-compare-none": "All packages (no comparison)",
-  "dependencies-compare-note": "Only changed dependencies are listed.",
   "dependencies-compare-results": "Search results",
-  "dependencies-diff-empty": "All {unchanged} dependencies are identical.",
-  "dependencies-no-changes": "No dependency changes",
+  "dependencies-removed-packages": "Removed",
+  "dependencies-status-added": "Added",
+  "dependencies-status-changed": "Changed",
   "dependencies-status-compare-empty": "We could not find any dependencies for {bundle}.",
-  "dependencies-status-diff": "Showing {count} dependencies that differ from {bundle} ({unchanged} unchanged).",
   "dependencies-status-full": "Showing all dependencies for this bundle.",
+  "dependencies-status-removed": "Removed",
+  "dependencies-status-unchanged": "Unchanged",
   "dependencies-summary-packages": "Packages",
   "dependencies-summary-versions": "Unique versions",
   "dependencies-total-packages": "Total packages",
-  "dependencies-unchanged-packages": "Unchanged packages",
+  "dependencies-unchanged-packages": "Unchanged",
   "deploy-confirm": "Deploy",
   "deploy-date": "Deploy Date",
   "deploy-default-channels-help": "Select the default channels that should receive this bundle.",
diff --git a/src/components/bundle/BundleCompareSelect.vue b/src/components/bundle/BundleCompareSelect.vue
index 4569b0db96..82dcd4fc88 100644
--- a/src/components/bundle/BundleCompareSelect.vue
+++ b/src/components/bundle/BundleCompareSelect.vue
@@ -74,16 +74,23 @@ function resetSearchState() {
 function selectCompareVersion(option: VersionRow | null) {
   resetSearchState()
   emit('update:modelValue', option)
+  // The DaisyUI dropdown is CSS-only (opens on :focus-within), so blur the
+  // active element to close it after a selection.
+  if (typeof document !== 'undefined' && document.activeElement instanceof HTMLElement)
+    document.activeElement.blur()
 }
 
 // The manifest tab compares per-file manifest entries (manifest_count), while the
 // dependencies tab compares native_packages. Only offer bundles that actually carry
-// the data the current tab diffs on, so gate the candidate list per mode.
+// the data the current tab diffs on, so gate the candidate list per mode. Deleted
+// bundles are excluded — their storage may be gone (and is purged after 90 days),
+// so they are not meaningful comparison targets.
 function buildCompareBaseQuery() {
   const query = supabase
     .from('app_versions')
     .select('id, name, created_at, manifest_count, app_id')
     .eq('app_id', props.appId)
+    .eq('deleted', false)
   return props.compareMode === 'dependencies'
     ? query.not('native_packages', 'is', null)
     : query.gt('manifest_count', 0)
@@ -164,7 +171,12 @@ async function loadPreferredCompareVersions() {
   if (channelIds.size === 0)
     return
 
-  const preferredHistory: Array<{ versionId: number, deployedAt: string | null }> = []
+  // Fetch several recent prior deployments per channel (not just one): if the
+  // most recent points to a now-deleted bundle, the deleted filter below would
+  // otherwise leave the channel with no baseline. Keeping a small lookback lets
+  // us fall back to the next older non-deleted deployment instead.
+  const PREFERRED_LOOKBACK = 20
+  const candidatesByChannel: Array<Array<{ versionId: number, deployedAt: string | null }>> = []
   for (const channelId of channelIds) {
     const cutoff = deployedAtByChannel.get(channelId)
     let query = supabase
@@ -179,7 +191,7 @@ async function loadPreferredCompareVersions() {
 
     const { data, error } = await query
       .order('created_at', { ascending: false })
-      .limit(1)
+      .limit(PREFERRED_LOOKBACK)
 
     if (requestId !== preferredCompareRequestId)
       return
@@ -189,19 +201,18 @@ async function loadPreferredCompareVersions() {
       continue
     }
 
-    const entry = (data ?? [])[0] as DeployHistoryRow | undefined
-    if (!entry)
-      continue
-    preferredHistory.push({
+    const candidates = ((data ?? []) as DeployHistoryRow[]).map(entry => ({
       versionId: entry.version_id,
       deployedAt: entry.created_at ?? entry.deployed_at ?? null,
-    })
+    }))
+    if (candidates.length)
+      candidatesByChannel.push(candidates)
   }
 
-  if (!preferredHistory.length)
+  if (!candidatesByChannel.length)
     return
 
-  const uniqueIds = [...new Set(preferredHistory.map(entry => entry.versionId))]
+  const uniqueIds = [...new Set(candidatesByChannel.flat().map(entry => entry.versionId))]
   const { data: versions, error } = await buildCompareBaseQuery()
     .in('id', uniqueIds)
 
@@ -214,11 +225,20 @@ async function loadPreferredCompareVersions() {
   }
 
   const versionMap = new Map((versions ?? []).map(version => [version.id, version]))
-  const sorted = preferredHistory
-    .filter(entry => versionMap.has(entry.versionId))
+  // Per channel, keep the most recent deployment whose bundle survived the
+  // deleted filter (candidates are already ordered newest-first).
+  const seen = new Set<number>()
+  preferredCompareVersions.value = candidatesByChannel
+    .map(candidates => candidates.find(entry => versionMap.has(entry.versionId)))
+    .filter((entry): entry is { versionId: number, deployedAt: string | null } => Boolean(entry))
     .sort((a, b) => (b.deployedAt ?? '').localeCompare(a.deployedAt ?? ''))
-
-  preferredCompareVersions.value = sorted
+    .filter((entry) => {
+      // Dedupe: the same bundle can be the surviving pick for multiple channels.
+      if (seen.has(entry.versionId))
+        return false
+      seen.add(entry.versionId)
+      return true
+    })
     .map(entry => versionMap.get(entry.versionId))
     .filter((version): version is VersionRow => Boolean(version))
 }
diff --git a/src/pages/app/[app].bundle.[bundle].dependencies.vue b/src/pages/app/[app].bundle.[bundle].dependencies.vue
index 5a702a0eb2..6d62239a4d 100644
--- a/src/pages/app/[app].bundle.[bundle].dependencies.vue
+++ b/src/pages/app/[app].bundle.[bundle].dependencies.vue
@@ -1,21 +1,40 @@
 <script setup lang="ts">
+import type { IncompatibilityReason, NativePackage, PackageComparison, PackageStatus } from '~/services/bundleCompatibility'
 import type { Database } from '~/types/supabase.types'
-import { computed, ref, watch, watchEffect } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import IconExternalLink from '~icons/heroicons/arrow-top-right-on-square'
+import IconCheckCircle from '~icons/heroicons/check-circle'
 import IconPuzzle from '~icons/heroicons/puzzle-piece'
 import IconAlertCircle from '~icons/lucide/alert-circle'
+import { comparePackages, summarizeCompatibility } from '~/services/bundleCompatibility'
 import { useSupabase } from '~/services/supabase'
 import { useDisplayStore } from '~/stores/display'
 
-interface NativePackage {
-  name: string
-  version: string
-}
-
 type VersionRow = Pick<Database['public']['Tables']['app_versions']['Row'], 'id' | 'name' | 'created_at' | 'manifest_count' | 'app_id'>
 
+// Tailwind classes per status. Blue = changed, green = added, red = removed,
+// gray = unchanged (the colour scheme requested for this view).
+const STATUS_STYLES: Record<PackageStatus, { pill: string, accent: string }> = {
+  changed: {
+    pill: 'text-blue-800 bg-blue-100 dark:text-blue-200 dark:bg-blue-900',
+    accent: 'border-l-4 border-blue-400 dark:border-blue-500',
+  },
+  added: {
+    pill: 'text-emerald-800 bg-emerald-100 dark:text-emerald-200 dark:bg-emerald-900',
+    accent: 'border-l-4 border-emerald-400 dark:border-emerald-500',
+  },
+  removed: {
+    pill: 'text-red-800 bg-red-100 dark:text-red-200 dark:bg-red-900',
+    accent: 'border-l-4 border-red-400 dark:border-red-500',
+  },
+  unchanged: {
+    pill: 'text-slate-600 bg-slate-100 dark:text-slate-300 dark:bg-slate-700',
+    accent: 'border-l-4 border-transparent',
+  },
+}
+
 const route = useRoute()
 const router = useRouter()
 const displayStore = useDisplayStore()
@@ -27,8 +46,8 @@ const loading = ref(true)
 const tableLoading = ref(false)
 const version = ref<Database['public']['Tables']['app_versions']['Row']>()
 const selectedCompareVersion = ref<VersionRow | null>(null)
-const comparePackages = ref<NativePackage[]>([])
-const comparePackagesCache = ref<Record<number, NativePackage[]>>({})
+const baselinePackages = ref<NativePackage[]>([])
+const baselinePackagesCache = ref<Record<number, NativePackage[]>>({})
 const compareRequestId = ref(0)
 
 const nativePackages = computed<NativePackage[]>(() => {
@@ -39,21 +58,22 @@ const nativePackages = computed<NativePackage[]>(() => {
 
 const compareVersionId = computed(() => selectedCompareVersion.value?.id ?? null)
 
-const compareMap = computed(() => new Map(comparePackages.value.map(pkg => [pkg.name, pkg.version])))
-
-const diffPackages = computed(() => {
-  if (!compareVersionId.value)
-    return nativePackages.value
-  return nativePackages.value.filter(pkg => compareMap.value.get(pkg.name) !== pkg.version)
-})
-
-const unchangedPackages = computed(() => {
+// The viewed bundle is the candidate (what would ship OTA); the picked bundle is
+// the installed baseline. This matches the CLI `bundle compatibility` direction.
+const comparisons = computed<PackageComparison[]>(() => {
   if (!compareVersionId.value)
     return []
-  return nativePackages.value.filter(pkg => compareMap.value.get(pkg.name) === pkg.version)
+  return comparePackages(nativePackages.value, baselinePackages.value)
 })
 
-const displayPackages = computed(() => (compareVersionId.value ? diffPackages.value : nativePackages.value))
+const compatibilitySummary = computed(() => summarizeCompatibility(comparisons.value))
+
+const statusCounts = computed(() => {
+  const counts: Record<PackageStatus, number> = { changed: 0, added: 0, removed: 0, unchanged: 0 }
+  for (const entry of comparisons.value)
+    counts[entry.status] += 1
+  return counts
+})
 
 const uniqueVersionsCount = computed(() => new Set(nativePackages.value.map(pkg => pkg.version)).size)
 
@@ -65,22 +85,42 @@ const compareStatusMessage = computed(() => {
   if (!compareVersionId.value)
     return t('dependencies-status-full')
   const compareName = selectedCompareVersion.value?.name ?? t('unknown')
-  if (comparePackages.value.length === 0)
+  if (baselinePackages.value.length === 0)
     return t('dependencies-status-compare-empty', { bundle: compareName })
-  if (diffPackages.value.length === 0)
-    return t('dependencies-diff-empty', { unchanged: unchangedPackages.value.length })
-  return t('dependencies-status-diff', {
-    bundle: compareName,
-    count: diffPackages.value.length,
-    unchanged: unchangedPackages.value.length,
-  })
+  // In comparison mode the verdict banner already names the baseline bundle, so
+  // a separate "comparing against ..." line would be redundant.
+  return ''
 })
 
+// Reason → human label, mirroring the CLI's getCompatibilityDetails messages.
+function reasonLabel(reason: IncompatibilityReason): string {
+  switch (reason) {
+    case 'new_plugin':
+      return t('compat-reason-new-plugin')
+    case 'removed_plugin':
+      return t('compat-reason-removed-plugin')
+    case 'version_mismatch':
+      return t('compat-reason-version-mismatch')
+    case 'ios_code_changed':
+      return t('compat-reason-ios-changed')
+    case 'android_code_changed':
+      return t('compat-reason-android-changed')
+    case 'both_platforms_changed':
+      return t('compat-reason-both-changed')
+    default:
+      return reason
+  }
+}
+
+function reasonsLabel(reasons: IncompatibilityReason[]): string {
+  return reasons.map(reasonLabel).join(', ')
+}
+
 function openNpmPackage(packageName: string) {
   window.open(`https://www.npmjs.com/package/${packageName}`, '_blank', 'noopener,noreferrer')
 }
 
-async function fetchComparePackages(versionId: number) {
+async function fetchBaselinePackages(versionId: number) {
   if (!packageId.value)
     return []
   const { data, error } = await supabase
@@ -128,49 +168,118 @@ async function getVersion() {
 
 function resetCompareSelection() {
   selectedCompareVersion.value = null
-  comparePackages.value = []
+  baselinePackages.value = []
   tableLoading.value = false
 }
 
+// Reflect the selected baseline in the URL (?compare=<versionId>) so a
+// comparison is shareable / deep-linkable. Uses replace so each dropdown change
+// does not pollute browser history, and skips no-op writes.
+function replaceCompareParam(value: number | null) {
+  const current = route.query.compare
+  const currentStr = (Array.isArray(current) ? current[0] : current) ?? undefined
+  const desired = value ? String(value) : undefined
+  if (currentStr === desired)
+    return
+  const query = { ...route.query }
+  if (desired)
+    query.compare = desired
+  else
+    delete query.compare
+  // Ignore redundant-navigation rejections from vue-router.
+  router.replace({ path: route.path, query }).catch(() => {})
+}
+
+// Pre-select a baseline from ?compare=<versionId> on load. Reads route.query
+// imperatively (never inside a tracked scope) so it cannot retrigger init.
+async function restoreCompareFromQuery() {
+  const raw = route.query.compare
+  if (raw == null)
+    return
+  const compareId = Number(Array.isArray(raw) ? raw[0] : raw)
+  // Ignore a missing/self/invalid id and scrub it from the URL.
+  if (!compareId || Number.isNaN(compareId) || compareId === id.value) {
+    replaceCompareParam(null)
+    return
+  }
+  // Match the picker's eligibility: a deep link must not resolve a deleted
+  // bundle or one without native packages (which the picker excludes), else the
+  // baseline load would coerce missing packages to [] and report every
+  // dependency as newly added/incompatible. Scrub the param if it doesn't match.
+  const { data, error } = await supabase
+    .from('app_versions')
+    .select('id, name, created_at, manifest_count, app_id')
+    .eq('app_id', packageId.value)
+    .eq('id', compareId)
+    .eq('deleted', false)
+    .not('native_packages', 'is', null)
+    .maybeSingle()
+  if (error || !data) {
+    replaceCompareParam(null)
+    return
+  }
+  selectedCompareVersion.value = data
+}
+
 watch(compareVersionId, async (value) => {
   const requestId = ++compareRequestId.value
+  replaceCompareParam(value)
   if (!value) {
-    comparePackages.value = []
+    baselinePackages.value = []
     tableLoading.value = false
     return
   }
 
-  const cached = comparePackagesCache.value[value]
+  const cached = baselinePackagesCache.value[value]
   if (cached) {
-    comparePackages.value = cached
+    baselinePackages.value = cached
     tableLoading.value = false
     return
   }
 
+  // Clear before the async gap so the summary cards / verdict never show the
+  // previous baseline's counts while the new one loads.
+  baselinePackages.value = []
   tableLoading.value = true
-  const packages = await fetchComparePackages(value)
+  const packages = await fetchBaselinePackages(value)
   if (requestId !== compareRequestId.value)
     return
-  comparePackagesCache.value[value] = packages
-  comparePackages.value = packages
+  baselinePackagesCache.value[value] = packages
+  baselinePackages.value = packages
   tableLoading.value = false
 })
 
-watchEffect(async () => {
-  if (route.path.includes('/bundle/') && route.path.includes('/dependencies')) {
-    const params = route.params as { app?: string, bundle?: string }
-    loading.value = true
-    packageId.value = params.app as string
-    id.value = Number(params.bundle as string)
-    comparePackagesCache.value = {}
-    resetCompareSelection()
-    await getVersion()
-    loading.value = false
-    if (!version.value?.name)
-      displayStore.NavTitle = t('bundle')
-    displayStore.defaultBack = `/app/${params.app}/bundles`
-  }
+// Init key derived ONLY from the path params (app + bundle). Watching this
+// instead of route.params/route.path means a query-only navigation — e.g. the
+// ?compare write below — never retriggers page init (which would reset the
+// selection and cause a flash/loop).
+const bundleRouteKey = computed(() => {
+  if (!route.path.includes('/bundle/') || !route.path.includes('/dependencies'))
+    return null
+  const params = route.params as { app?: string, bundle?: string }
+  if (!params.app || !params.bundle)
+    return null
+  return `${params.app}::${params.bundle}`
 })
+
+watch(bundleRouteKey, async (key) => {
+  if (!key)
+    return
+  const [app, bundle] = key.split('::')
+  loading.value = true
+  packageId.value = app
+  id.value = Number(bundle)
+  baselinePackagesCache.value = {}
+  resetCompareSelection()
+  await getVersion()
+  // Pre-select from ?compare only after the version loads.
+  if (version.value)
+    await restoreCompareFromQuery()
+  loading.value = false
+  if (!version.value?.name)
+    displayStore.NavTitle = t('bundle')
+  displayStore.defaultBack = `/app/${app}/bundles`
+}, { immediate: true })
 </script>
 
 <template>
@@ -228,43 +337,150 @@ watchEffect(async () => {
                   </div>
                 </div>
 
-                <div v-else class="grid w-full grid-cols-2 gap-3 text-right md:w-auto md:grid-cols-4 md:text-left">
-                  <div class="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300">
+                <div v-else-if="!tableLoading" class="grid w-full grid-cols-2 gap-3 text-right md:w-auto md:grid-cols-4 md:text-left">
+                  <div class="rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300">
                     <div class="uppercase tracking-wide">
                       {{ t('dependencies-changed-packages') }}
                     </div>
+                    <div class="text-lg font-semibold text-blue-900 dark:text-blue-100">
+                      {{ statusCounts.changed }}
+                    </div>
+                  </div>
+                  <div class="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300">
+                    <div class="uppercase tracking-wide">
+                      {{ t('dependencies-added-packages') }}
+                    </div>
                     <div class="text-lg font-semibold text-emerald-900 dark:text-emerald-100">
-                      {{ diffPackages.length }}
+                      {{ statusCounts.added }}
                     </div>
                   </div>
-                  <div class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">
+                  <div class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300">
                     <div class="uppercase tracking-wide">
-                      {{ t('dependencies-unchanged-packages') }}
+                      {{ t('dependencies-removed-packages') }}
                     </div>
-                    <div class="text-lg font-semibold text-slate-900 dark:text-white">
-                      {{ unchangedPackages.length }}
+                    <div class="text-lg font-semibold text-red-900 dark:text-red-100">
+                      {{ statusCounts.removed }}
                     </div>
                   </div>
-                  <div class="col-span-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs text-slate-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 md:col-span-2">
+                  <div class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">
                     <div class="uppercase tracking-wide">
-                      {{ t('dependencies-total-packages') }}
+                      {{ t('dependencies-unchanged-packages') }}
                     </div>
-                    <div class="text-base font-semibold text-slate-700 dark:text-slate-200">
-                      {{ nativePackages.length }}
+                    <div class="text-lg font-semibold text-slate-900 dark:text-white">
+                      {{ statusCounts.unchanged }}
                     </div>
                   </div>
                 </div>
               </div>
+
+              <!-- Compatibility verdict (only meaningful with a baseline selected) -->
+              <div
+                v-if="compareVersionId && !tableLoading && comparisons.length > 0"
+                class="mt-3 rounded-lg border px-4 py-3"
+                :class="compatibilitySummary.compatible
+                  ? 'border-emerald-300 bg-emerald-50 dark:border-emerald-800 dark:bg-emerald-950'
+                  : 'border-red-300 bg-red-50 dark:border-red-800 dark:bg-red-950'"
+              >
+                <div class="flex items-center gap-2">
+                  <IconCheckCircle v-if="compatibilitySummary.compatible" class="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
+                  <IconAlertCircle v-else class="w-5 h-5 text-red-600 dark:text-red-400" />
+                  <span
+                    class="text-sm font-semibold"
+                    :class="compatibilitySummary.compatible
+                      ? 'text-emerald-900 dark:text-emerald-100'
+                      : 'text-red-900 dark:text-red-100'"
+                  >
+                    {{ compatibilitySummary.compatible
+                      ? t('compat-verdict-compatible')
+                      : t('compat-verdict-incompatible', { count: compatibilitySummary.incompatibleCount }) }}
+                  </span>
+                </div>
+                <p
+                  class="mt-1 text-xs"
+                  :class="compatibilitySummary.compatible
+                    ? 'text-emerald-700 dark:text-emerald-300'
+                    : 'text-red-700 dark:text-red-300'"
+                >
+                  {{ compatibilitySummary.compatible
+                    ? t('compat-verdict-compatible-detail', { bundle: selectedCompareVersion?.name ?? t('unknown') })
+                    : t('compat-verdict-incompatible-detail') }}
+                </p>
+              </div>
+
               <p v-if="compareStatusMessage" class="mt-2 text-xs text-slate-500 dark:text-slate-400">
                 {{ compareStatusMessage }}
               </p>
-              <p v-if="compareVersionId" class="mt-1 text-xs text-slate-500 dark:text-slate-400">
-                {{ t('dependencies-compare-note') }}
-              </p>
             </div>
 
             <div class="px-2 pb-2 relative">
-              <div v-if="displayPackages.length > 0" class="overflow-x-auto">
+              <!-- Comparison view: status-aware rows with the candidate→baseline diff -->
+              <div v-if="compareVersionId && comparisons.length > 0" class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                  <thead class="bg-gray-50 dark:bg-gray-900">
+                    <tr>
+                      <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-gray-400">
+                        {{ t('package-name') }}
+                      </th>
+                      <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-gray-400">
+                        {{ t('status') }}
+                      </th>
+                      <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase dark:text-gray-400">
+                        {{ t('version') }}
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
+                    <tr
+                      v-for="entry in comparisons"
+                      :key="entry.name"
+                      class="hover:bg-gray-50 dark:hover:bg-gray-700"
+                      :class="STATUS_STYLES[entry.status].accent"
+                    >
+                      <td class="px-6 py-4 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-gray-100">
+                        <div class="flex items-center gap-2">
+                          <IconPuzzle class="w-4 h-4 text-gray-400" />
+                          {{ entry.name }}
+                          <button
+                            class="p-1 transition-colors rounded-md hover:bg-gray-100 dark:hover:bg-gray-600"
+                            :title="t('view-on-npm')"
+                            @click="openNpmPackage(entry.name)"
+                          >
+                            <IconExternalLink class="w-4 h-4 text-gray-400 cursor-pointer hover:text-blue-500 dark:hover:text-blue-400" />
+                          </button>
+                        </div>
+                        <p v-if="!entry.compatible" class="mt-1 text-xs text-red-600 dark:text-red-400">
+                          {{ reasonsLabel(entry.reasons) }}
+                        </p>
+                      </td>
+                      <td class="px-6 py-4 text-sm whitespace-nowrap">
+                        <span class="px-2 py-1 text-xs font-medium rounded-full" :class="STATUS_STYLES[entry.status].pill">
+                          {{ t(`dependencies-status-${entry.status}`) }}
+                        </span>
+                      </td>
+                      <td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
+                        <!-- changed: old → new; added: new only; removed: old only; unchanged: single version -->
+                        <span v-if="entry.status === 'changed'" class="inline-flex items-center gap-2">
+                          <span class="px-2 py-1 text-xs font-medium rounded-full text-slate-600 bg-slate-100 line-through dark:text-slate-300 dark:bg-slate-700">{{ entry.baselineVersion }}</span>
+                          <span class="text-slate-400">→</span>
+                          <span class="px-2 py-1 text-xs font-medium rounded-full text-blue-800 bg-blue-100 dark:text-blue-200 dark:bg-blue-900">{{ entry.candidateVersion }}</span>
+                        </span>
+                        <span v-else-if="entry.status === 'added'" class="px-2 py-1 text-xs font-medium rounded-full text-emerald-800 bg-emerald-100 dark:text-emerald-200 dark:bg-emerald-900">
+                          {{ entry.candidateVersion }}
+                        </span>
+                        <span v-else-if="entry.status === 'removed'" class="px-2 py-1 text-xs font-medium rounded-full text-red-800 bg-red-100 line-through dark:text-red-200 dark:bg-red-900">
+                          {{ entry.baselineVersion }}
+                        </span>
+                        <span v-else class="px-2 py-1 text-xs font-medium rounded-full text-slate-600 bg-slate-100 dark:text-slate-300 dark:bg-slate-700">
+                          {{ entry.candidateVersion }}
+                        </span>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+
+              <!-- No baseline selected: plain list of this bundle's packages -->
+              <div v-else-if="!compareVersionId && nativePackages.length > 0" class="overflow-x-auto">
                 <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                   <thead class="bg-gray-50 dark:bg-gray-900">
                     <tr>
@@ -277,7 +493,7 @@ watchEffect(async () => {
                     </tr>
                   </thead>
                   <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
-                    <tr v-for="pkg in displayPackages" :key="`${pkg.name}@${pkg.version}`" class="hover:bg-gray-50 dark:hover:bg-gray-700">
+                    <tr v-for="pkg in nativePackages" :key="`${pkg.name}@${pkg.version}`" class="hover:bg-gray-50 dark:hover:bg-gray-700">
                       <td class="px-6 py-4 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-gray-100">
                         <div class="flex items-center gap-2">
                           <IconPuzzle class="w-4 h-4 text-gray-400" />
@@ -301,16 +517,6 @@ watchEffect(async () => {
                 </table>
               </div>
 
-              <div v-else-if="compareVersionId && !tableLoading" class="flex flex-col items-center justify-center px-4 py-12">
-                <IconPuzzle class="w-16 h-16 mb-4 text-gray-400 dark:text-gray-500" />
-                <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100">
-                  {{ t('dependencies-no-changes') }}
-                </h4>
-                <p class="mt-1 text-sm text-center text-gray-500 dark:text-gray-400">
-                  {{ compareStatusMessage }}
-                </p>
-              </div>
-
               <div
                 v-if="tableLoading"
                 class="absolute inset-0 flex items-center justify-center bg-white/70 dark:bg-slate-900/70"
diff --git a/src/services/bundleCompatibility.ts b/src/services/bundleCompatibility.ts
new file mode 100644
index 0000000000..4dd463db1d
--- /dev/null
+++ b/src/services/bundleCompatibility.ts
@@ -0,0 +1,165 @@
+import { parseRange, rangeIntersects } from '@std/semver'
+
+/**
+ * Native package metadata stored per bundle in `app_versions.native_packages`.
+ * Mirrors the CLI's `nativePackageSchema` (cli/src/schemas/common.ts).
+ */
+export interface NativePackage {
+  name: string
+  version: string
+  ios_checksum?: string
+  android_checksum?: string
+}
+
+/**
+ * Reasons a candidate bundle may be incompatible with the installed baseline.
+ * Mirrors the CLI's `IncompatibilityReason`. Note `removed_plugin` is part of the
+ * shared vocabulary but never emitted here: removing native code is OTA-safe, so
+ * a removed package is reported as compatible (matching the CLI).
+ */
+export type IncompatibilityReason
+  = | 'new_plugin'
+    | 'removed_plugin'
+    | 'version_mismatch'
+    | 'ios_code_changed'
+    | 'android_code_changed'
+    | 'both_platforms_changed'
+
+export type PackageStatus = 'added' | 'removed' | 'changed' | 'unchanged'
+
+/**
+ * One package compared between the candidate bundle (the one being viewed /
+ * potentially shipped OTA) and the baseline bundle (what is already installed).
+ */
+export interface PackageComparison {
+  name: string
+  /** Version in the candidate bundle, or undefined when removed. */
+  candidateVersion?: string
+  /** Version in the baseline bundle, or undefined when newly added. */
+  baselineVersion?: string
+  status: PackageStatus
+  compatible: boolean
+  reasons: IncompatibilityReason[]
+}
+
+export interface CompatibilitySummary {
+  compatible: boolean
+  incompatibleCount: number
+  /** Names of packages that block OTA delivery. */
+  offenders: string[]
+}
+
+function versionsIntersect(candidate: string, baseline: string): boolean {
+  try {
+    return rangeIntersects(parseRange(candidate), parseRange(baseline))
+  }
+  catch {
+    return false
+  }
+}
+
+/**
+ * Evaluate one package's compatibility, directionally: `candidate` is what would
+ * be shipped over-the-air, `baseline` is what the device already runs.
+ *
+ * Ported from the CLI's `getCompatibilityDetails` (cli/src/utils.ts) so the
+ * dashboard verdict matches `capgo bundle compatibility` exactly.
+ */
+function evaluateReasons(
+  candidate: NativePackage | undefined,
+  baseline: NativePackage | undefined,
+): IncompatibilityReason[] {
+  // Removed package (only on baseline): OTA-safe — removing native code is fine.
+  if (!candidate)
+    return []
+
+  // New native plugin (only on candidate): requires an app-store update.
+  if (!baseline)
+    return ['new_plugin']
+
+  const reasons: IncompatibilityReason[] = []
+
+  if (!versionsIntersect(candidate.version, baseline.version))
+    reasons.push('version_mismatch')
+
+  const iosChanged = candidate.ios_checksum != null && baseline.ios_checksum != null && candidate.ios_checksum !== baseline.ios_checksum
+  const androidChanged = candidate.android_checksum != null && baseline.android_checksum != null && candidate.android_checksum !== baseline.android_checksum
+
+  if (iosChanged && androidChanged)
+    reasons.push('both_platforms_changed')
+  else if (iosChanged)
+    reasons.push('ios_code_changed')
+  else if (androidChanged)
+    reasons.push('android_code_changed')
+
+  return reasons
+}
+
+function statusFor(
+  candidate: NativePackage | undefined,
+  baseline: NativePackage | undefined,
+  reasons: readonly IncompatibilityReason[],
+): PackageStatus {
+  if (candidate && !baseline)
+    return 'added'
+  if (!candidate && baseline)
+    return 'removed'
+  // Present in both: "changed" covers a version difference OR a native-code
+  // (checksum) change. Deriving from `reasons` keeps status consistent with the
+  // compatibility verdict — a same-version bundle whose native code changed must
+  // not render as "unchanged" while the verdict flags it as incompatible.
+  if (candidate && baseline && (candidate.version !== baseline.version || reasons.length > 0))
+    return 'changed'
+  return 'unchanged'
+}
+
+const STATUS_ORDER: Record<PackageStatus, number> = {
+  changed: 0,
+  added: 1,
+  removed: 2,
+  unchanged: 3,
+}
+
+/**
+ * Compare the candidate bundle's packages against the baseline's. Returns one
+ * entry per package present in either bundle, ordered changes-first then by name.
+ */
+export function comparePackages(
+  candidatePackages: readonly NativePackage[],
+  baselinePackages: readonly NativePackage[],
+): PackageComparison[] {
+  const candidateMap = new Map(candidatePackages.map(pkg => [pkg.name, pkg]))
+  const baselineMap = new Map(baselinePackages.map(pkg => [pkg.name, pkg]))
+  const names = new Set<string>([...candidateMap.keys(), ...baselineMap.keys()])
+
+  const comparisons = [...names].map((name): PackageComparison => {
+    const candidate = candidateMap.get(name)
+    const baseline = baselineMap.get(name)
+    const reasons = evaluateReasons(candidate, baseline)
+    return {
+      name,
+      candidateVersion: candidate?.version,
+      baselineVersion: baseline?.version,
+      status: statusFor(candidate, baseline, reasons),
+      compatible: reasons.length === 0,
+      reasons,
+    }
+  })
+
+  return comparisons.sort((a, b) => {
+    const byStatus = STATUS_ORDER[a.status] - STATUS_ORDER[b.status]
+    return byStatus === 0 ? a.name.localeCompare(b.name) : byStatus
+  })
+}
+
+/**
+ * Aggregate per-package comparisons into an overall OTA-compatibility verdict.
+ */
+export function summarizeCompatibility(comparisons: readonly PackageComparison[]): CompatibilitySummary {
+  const offenders = comparisons.filter(entry => !entry.compatible).map(entry => entry.name)
+  return {
+    compatible: offenders.length === 0,
+    incompatibleCount: offenders.length,
+    offenders,
+  }
+}
diff --git a/tests/bundle-compatibility.unit.test.ts b/tests/bundle-compatibility.unit.test.ts
new file mode 100644
index 0000000000..c6f5f1046a
--- /dev/null
+++ b/tests/bundle-compatibility.unit.test.ts
@@ -0,0 +1,152 @@
+import type { NativePackage } from '../src/services/bundleCompatibility'
+import { describe, expect, it } from 'vitest'
+import { comparePackages, summarizeCompatibility } from '../src/services/bundleCompatibility'
+
+function pkg(name: string, version: string, extra: Partial<NativePackage> = {}): NativePackage {
+  return { name, version, ...extra }
+}
+
+function byName(name: string, comparisons: ReturnType<typeof comparePackages>) {
+  const found = comparisons.find(entry => entry.name === name)
+  if (!found)
+    throw new Error(`missing comparison for ${name}`)
+  return found
+}
+
+describe('comparePackages', () => {
+  it.concurrent('marks a package present in both with the same version as unchanged + compatible', () => {
+    const result = comparePackages([pkg('a', '1.0.0')], [pkg('a', '1.0.0')])
+    const a = byName('a', result)
+    expect(a.status).toBe('unchanged')
+    expect(a.compatible).toBe(true)
+    expect(a.reasons).toEqual([])
+    expect(a.candidateVersion).toBe('1.0.0')
+    expect(a.baselineVersion).toBe('1.0.0')
+  })
+
+  it.concurrent('stays unchanged when version and both checksums match', () => {
+    const result = comparePackages(
+      [pkg('a', '1.0.0', { ios_checksum: 'i', android_checksum: 'd' })],
+      [pkg('a', '1.0.0', { ios_checksum: 'i', android_checksum: 'd' })],
+    )
+    const a = byName('a', result)
+    expect(a.status).toBe('unchanged')
+    expect(a.compatible).toBe(true)
+  })
+
+  it.concurrent('marks a newly added package as added + incompatible (new_plugin)', () => {
+    const result = comparePackages([pkg('a', '1.0.0')], [])
+    const a = byName('a', result)
+    expect(a.status).toBe('added')
+    expect(a.compatible).toBe(false)
+    expect(a.reasons).toEqual(['new_plugin'])
+    expect(a.baselineVersion).toBeUndefined()
+  })
+
+  it.concurrent('marks a removed package as removed + compatible (OTA-safe)', () => {
+    const result = comparePackages([], [pkg('a', '1.0.0')])
+    const a = byName('a', result)
+    expect(a.status).toBe('removed')
+    expect(a.compatible).toBe(true)
+    expect(a.reasons).toEqual([])
+    expect(a.candidateVersion).toBeUndefined()
+  })
+
+  it.concurrent('flags a non-intersecting version change as changed + version_mismatch', () => {
+    const result = comparePackages([pkg('a', '2.0.0')], [pkg('a', '1.0.0')])
+    const a = byName('a', result)
+    expect(a.status).toBe('changed')
+    expect(a.compatible).toBe(false)
+    expect(a.reasons).toEqual(['version_mismatch'])
+  })
+
+  it.concurrent('treats an intersecting version range as compatible (no version_mismatch)', () => {
+    // Caret range on baseline intersects the concrete candidate version.
+    const result = comparePackages([pkg('a', '1.2.0')], [pkg('a', '^1.0.0')])
+    const a = byName('a', result)
+    expect(a.reasons).not.toContain('version_mismatch')
+    expect(a.compatible).toBe(true)
+  })
+
+  it.concurrent('flags a same-version package whose iOS native checksum changed', () => {
+    const result = comparePackages(
+      [pkg('a', '1.0.0', { ios_checksum: 'new' })],
+      [pkg('a', '1.0.0', { ios_checksum: 'old' })],
+    )
+    const a = byName('a', result)
+    // Same version string but native code differs => status must be 'changed'
+    // (not 'unchanged') so it stays consistent with the incompatible verdict.
+    expect(a.status).toBe('changed')
+    expect(a.compatible).toBe(false)
+    expect(a.reasons).toEqual(['ios_code_changed'])
+  })
+
+  it.concurrent('flags a same-version package whose Android native checksum changed', () => {
+    const result = comparePackages(
+      [pkg('a', '1.0.0', { android_checksum: 'new' })],
+      [pkg('a', '1.0.0', { android_checksum: 'old' })],
+    )
+    const a = byName('a', result)
+    expect(a.status).toBe('changed')
+    expect(a.compatible).toBe(false)
+    expect(a.reasons).toEqual(['android_code_changed'])
+  })
+
+  it.concurrent('flags both platforms when both checksums changed', () => {
+    const result = comparePackages(
+      [pkg('a', '1.0.0', { ios_checksum: 'i2', android_checksum: 'a2' })],
+      [pkg('a', '1.0.0', { ios_checksum: 'i1', android_checksum: 'a1' })],
+    )
+    expect(byName('a', result).reasons).toEqual(['both_platforms_changed'])
+  })
+
+  it.concurrent('emits multiple reasons when version and native code both change', () => {
+    const result = comparePackages(
+      [pkg('a', '2.0.0', { ios_checksum: 'i2' })],
+      [pkg('a', '1.0.0', { ios_checksum: 'i1' })],
+    )
+    const a = byName('a', result)
+    expect(a.status).toBe('changed')
+    expect(a.compatible).toBe(false)
+    expect(a.reasons).toEqual(['version_mismatch', 'ios_code_changed'])
+  })
+
+  it.concurrent('ignores checksum when only one side has it', () => {
+    const result = comparePackages(
+      [pkg('a', '1.0.0', { ios_checksum: 'i2' })],
+      [pkg('a', '1.0.0')],
+    )
+    expect(byName('a', result).compatible).toBe(true)
+  })
+
+  it.concurrent('orders changes first, then added, removed, unchanged, then by name', () => {
+    const result = comparePackages(
+      [pkg('keep', '1.0.0'), pkg('added', '1.0.0'), pkg('changed', '2.0.0')],
+      [pkg('keep', '1.0.0'), pkg('removed', '1.0.0'), pkg('changed', '1.0.0')],
+    )
+    expect(result.map(entry => entry.status)).toEqual(['changed', 'added', 'removed', 'unchanged'])
+  })
+})
+
+describe('summarizeCompatibility', () => {
+  it.concurrent('is compatible when every package is compatible', () => {
+    const result = comparePackages([pkg('a', '1.0.0')], [pkg('a', '1.0.0')])
+    expect(summarizeCompatibility(result)).toEqual({ compatible: true, incompatibleCount: 0, offenders: [] })
+  })
+
+  it.concurrent('reports offenders and count when any package is incompatible', () => {
+    const result = comparePackages(
+      [pkg('newplug', '1.0.0'), pkg('bump', '2.0.0'), pkg('same', '1.0.0')],
+      [pkg('bump', '1.0.0'), pkg('same', '1.0.0')],
+    )
+    const summary = summarizeCompatibility(result)
+    expect(summary.compatible).toBe(false)
+    expect(summary.incompatibleCount).toBe(2)
+    expect(summary.offenders.sort()).toEqual(['bump', 'newplug'])
+  })
+
+  it.concurrent('stays compatible when the only difference is a removed package', () => {
+    const result = comparePackages([], [pkg('gone', '1.0.0')])
+    expect(summarizeCompatibility(result).compatible).toBe(true)
+  })
+})