diff --git a/app/components/JsrBadge.vue b/app/components/JsrBadge.vue
new file mode 100644
index 0000000000..4575e44eea
--- /dev/null
+++ b/app/components/JsrBadge.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineProps<{
+  /** JSR package URL (e.g., "https://jsr.io/@std/fs") */
+  url: string
+  /** Whether to show as compact (icon only) or full (with text) */
+  compact?: boolean
+}>()
+</script>
+
+<template>
+  <a
+    :href="url"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="inline-flex items-center gap-1 text-xs font-mono text-fg-muted hover:text-fg transition-colors duration-200"
+    title="also available on JSR"
+  >
+    <span
+      class="i-simple-icons-jsr shrink-0"
+      :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'"
+      aria-hidden="true"
+    />
+    <span v-if="!compact" class="sr-only sm:not-sr-only">jsr</span>
+  </a>
+</template>
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index b67f912165..aa8760747e 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { joinURL } from 'ufo'
 import type { PackumentVersion, NpmVersionDist } from '#shared/types'
+import type { JsrPackageInfo } from '#shared/types/jsr'
 
 definePageMeta({
   name: 'package',
@@ -59,6 +60,13 @@ const { data: readmeData } = useLazyFetch<{ html: string }>(
   { default: () => ({ html: '' }) },
 )
 
+// Check if package exists on JSR (only for scoped packages)
+const { data: jsrInfo } = useLazyFetch<JsrPackageInfo>(() => `/api/jsr/${packageName.value}`, {
+  default: () => ({ exists: false }),
+  // Only fetch for scoped packages (JSR requirement)
+  immediate: computed(() => packageName.value.startsWith('@')).value,
+})
+
 // Get the version to display (requested or latest)
 const displayVersion = computed(() => {
   if (!pkg.value) return null
@@ -143,18 +151,7 @@ function hasProvenance(version: PackumentVersion | null): boolean {
   return !!dist.attestations
 }
 
-// Package manager install commands
-const packageManagers = [
-  { id: 'npm', label: 'npm', action: 'install' },
-  { id: 'pnpm', label: 'pnpm', action: 'add' },
-  { id: 'yarn', label: 'yarn', action: 'add' },
-  { id: 'bun', label: 'bun', action: 'add' },
-  { id: 'deno', label: 'deno', action: 'add npm:' },
-] as const
-
-type PackageManagerId = (typeof packageManagers)[number]['id']
-
-// Persist preference in localStorage
+// Persist package manager preference in localStorage
 const selectedPM = ref<PackageManagerId>('npm')
 
 onMounted(() => {
@@ -168,24 +165,24 @@ watch(selectedPM, value => {
   localStorage.setItem('npmx-pm', value)
 })
 
-const currentPM = computed(
-  () => packageManagers.find(p => p.id === selectedPM.value) || packageManagers[0],
-)
-const selectedPMLabel = computed(() => currentPM.value.label)
-const selectedPMAction = computed(() => currentPM.value.action)
+const installCommandParts = computed(() => {
+  if (!pkg.value) return []
+  return getInstallCommandParts({
+    packageName: pkg.value.name,
+    packageManager: selectedPM.value,
+    version: requestedVersion.value,
+    jsrInfo: jsrInfo.value,
+  })
+})
 
 const installCommand = computed(() => {
   if (!pkg.value) return ''
-  const pm = currentPM.value
-  let command = `${pm.label} ${pm.action} ${pkg.value.name}`
-  // deno uses "add npm:package" format
-  if (pm.id === 'deno') {
-    command = `${pm.label} ${pm.action}${pkg.value.name}`
-  }
-  if (requestedVersion.value) {
-    command += `@${requestedVersion.value}`
-  }
-  return command
+  return getInstallCommand({
+    packageName: pkg.value.name,
+    packageManager: selectedPM.value,
+    version: requestedVersion.value,
+    jsrInfo: jsrInfo.value,
+  })
 })
 
 // Copy install command
@@ -415,6 +412,18 @@ defineOgImageComponent('Package', {
                 npm
               </a>
             </li>
+            <li v-if="jsrInfo?.exists && jsrInfo.url">
+              <a
+                :href="jsrInfo.url"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+                title="Also available on JSR"
+              >
+                <span class="i-simple-icons-jsr w-4 h-4" />
+                jsr
+              </a>
+            </li>
             <li>
               <a
                 :href="`https://socket.dev/npm/package/${pkg.name}/overview/${displayVersion?.version ?? 'latest'}`"
@@ -517,16 +526,14 @@ defineOgImageComponent('Package', {
               <span class="text-fg-subtle font-mono text-sm select-none">$</span>
               <code class="font-mono text-sm"
                 ><ClientOnly
-                  ><span class="text-fg">{{ selectedPMLabel }}</span
-                  >&nbsp;<span class="text-fg-muted">{{ selectedPMAction }}</span
-                  ><span v-if="selectedPM !== 'deno'" class="text-fg-muted"
-                    >&nbsp;{{ pkg.name }}</span
-                  ><span v-else class="text-fg-muted">{{ pkg.name }}</span
-                  ><span v-if="requestedVersion" class="text-fg-muted">@{{ requestedVersion }}</span
+                  ><span
+                    v-for="(part, i) in installCommandParts"
+                    :key="i"
+                    :class="i === 0 ? 'text-fg' : 'text-fg-muted'"
+                    >{{ i > 0 ? ' ' : '' }}{{ part }}</span
                   ><template #fallback
-                    ><span class="text-fg">npm</span>&nbsp;<span class="text-fg-muted"
-                      >install&nbsp;{{ pkg.name }}</span
-                    ></template
+                    ><span class="text-fg">npm</span
+                    ><span class="text-fg-muted"> install {{ pkg.name }}</span></template
                   ></ClientOnly
                 ></code
               >
diff --git a/app/utils/install-command.ts b/app/utils/install-command.ts
new file mode 100644
index 0000000000..038c3b9e10
--- /dev/null
+++ b/app/utils/install-command.ts
@@ -0,0 +1,66 @@
+import type { JsrPackageInfo } from '#shared/types/jsr'
+
+export const packageManagers = [
+  { id: 'npm', label: 'npm', action: 'install' },
+  { id: 'pnpm', label: 'pnpm', action: 'add' },
+  { id: 'yarn', label: 'yarn', action: 'add' },
+  { id: 'bun', label: 'bun', action: 'add' },
+  { id: 'deno', label: 'deno', action: 'add' },
+  { id: 'jsr', label: 'jsr', action: 'add' },
+] as const
+
+export type PackageManagerId = (typeof packageManagers)[number]['id']
+
+export interface InstallCommandOptions {
+  packageName: string
+  packageManager: PackageManagerId
+  version?: string | null
+  jsrInfo?: JsrPackageInfo | null
+}
+
+/**
+ * Get the package specifier for a given package manager.
+ * Handles npm: prefix for deno and jsr (when not native).
+ */
+export function getPackageSpecifier(options: InstallCommandOptions): string {
+  const { packageName, packageManager, jsrInfo } = options
+
+  if (packageManager === 'deno') {
+    // deno add npm:package
+    return `npm:${packageName}`
+  }
+
+  if (packageManager === 'jsr') {
+    if (jsrInfo?.exists && jsrInfo.scope && jsrInfo.name) {
+      // Native JSR package: @scope/name
+      return `@${jsrInfo.scope}/${jsrInfo.name}`
+    }
+    // npm compatibility: npm:package
+    return `npm:${packageName}`
+  }
+
+  // Standard package managers (npm, pnpm, yarn, bun)
+  return packageName
+}
+
+/**
+ * Generate the full install command for a package.
+ */
+export function getInstallCommand(options: InstallCommandOptions): string {
+  return getInstallCommandParts(options).join(' ')
+}
+
+/**
+ * Generate install command as an array of parts.
+ * First element is the command (e.g., "npm"), rest are arguments.
+ * Useful for rendering with different styling for command vs args.
+ */
+export function getInstallCommandParts(options: InstallCommandOptions): string[] {
+  const pm = packageManagers.find(p => p.id === options.packageManager)
+  if (!pm) return []
+
+  const spec = getPackageSpecifier(options)
+  const version = options.version ? `@${options.version}` : ''
+
+  return [pm.label, pm.action, `${spec}${version}`]
+}
diff --git a/cli/package.json b/cli/package.json
index 5f6609aed0..4b13e92f2f 100644
--- a/cli/package.json
+++ b/cli/package.json
@@ -26,7 +26,7 @@
     "citty": "^0.2.0",
     "consola": "^3.4.2",
     "defu": "^6.1.4",
-    "h3": "^2.0.1-rc.11",
+    "h3-next": "npm:h3@^2.0.1-rc.11",
     "ofetch": "^1.5.1",
     "picocolors": "^1.1.1",
     "srvx": "^0.10.1",
diff --git a/cli/src/server.ts b/cli/src/server.ts
index e87b1e930f..101d7215e6 100644
--- a/cli/src/server.ts
+++ b/cli/src/server.ts
@@ -1,6 +1,6 @@
 import crypto from 'node:crypto'
-import { H3, HTTPError, handleCors, type H3Event } from 'h3'
-import type { CorsOptions } from 'h3'
+import { H3, HTTPError, handleCors, type H3Event } from 'h3-next'
+import type { CorsOptions } from 'h3-next'
 
 import type { ConnectorState, PendingOperation, OperationType, ApiResponse } from './types.ts'
 import {
diff --git a/package.json b/package.json
index 6a616a2f4e..f8b1c3856a 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "test:unit": "vitest --project unit"
   },
   "dependencies": {
+    "@iconify-json/simple-icons": "^1.2.67",
     "@iconify-json/vscode-icons": "^1.2.40",
     "@nuxt/fonts": "^0.13.0",
     "@nuxt/scripts": "^0.13.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0b9f4f229e..f5d9a6eefa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,6 +13,9 @@ importers:
 
   .:
     dependencies:
+      '@iconify-json/simple-icons':
+        specifier: ^1.2.67
+        version: 1.2.67
       '@iconify-json/vscode-icons':
         specifier: ^1.2.40
         version: 1.2.40
@@ -161,9 +164,9 @@ importers:
       defu:
         specifier: ^6.1.4
         version: 6.1.4
-      h3:
-        specifier: ^2.0.1-rc.11
-        version: 2.0.1-rc.11
+      h3-next:
+        specifier: npm:h3@^2.0.1-rc.11
+        version: h3@2.0.1-rc.11
       ofetch:
         specifier: ^1.5.1
         version: 1.5.1
@@ -1225,6 +1228,9 @@ packages:
   '@iconify-json/carbon@1.2.18':
     resolution: {integrity: sha512-Grb13E6r/RqTEV4Sqd/BQR2FUt57U2WLuticJ5H8JbTdHLop1LmdePu3EJJA3Xi8DcWRbD6OnC133hKfOwlgtg==}
 
+  '@iconify-json/simple-icons@1.2.67':
+    resolution: {integrity: sha512-RGJRwlxyup54L1UDAjCshy3ckX5zcvYIU74YLSnUgHGvqh6B4mvksbGNHAIEp7dZQ6cM13RZVT5KC07CmnFNew==}
+
   '@iconify-json/solar@1.2.5':
     resolution: {integrity: sha512-WMAiNwchU8zhfrySww6KQBRIBbsQ6SvgIu2yA+CHGyMima/0KQwT5MXogrZPJGoQF+1Ye3Qj6K+1CiyNn3YkoA==}
 
@@ -8103,6 +8109,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/simple-icons@1.2.67':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/solar@1.2.5':
     dependencies:
       '@iconify/types': 2.0.0
diff --git a/server/api/jsr/[...pkg].get.ts b/server/api/jsr/[...pkg].get.ts
new file mode 100644
index 0000000000..c09ec7db11
--- /dev/null
+++ b/server/api/jsr/[...pkg].get.ts
@@ -0,0 +1,25 @@
+import type { JsrPackageInfo } from '#shared/types/jsr'
+
+/**
+ * Check if an npm package exists on JSR.
+ *
+ * GET /api/jsr/:pkg
+ *
+ * @example GET /api/jsr/@std/fs → { exists: true, scope: "std", name: "fs", ... }
+ * @example GET /api/jsr/lodash → { exists: false }
+ */
+export default defineCachedEventHandler<Promise<JsrPackageInfo>>(
+  async event => {
+    const pkgPath = getRouterParam(event, 'pkg')
+    if (!pkgPath) {
+      throw createError({ statusCode: 400, message: 'Package name is required' })
+    }
+
+    return await fetchJsrPackageInfo(pkgPath)
+  },
+  {
+    maxAge: 60 * 60, // 1 hour
+    name: 'api-jsr-package',
+    getKey: event => getRouterParam(event, 'pkg') ?? '',
+  },
+)
diff --git a/server/utils/jsr.ts b/server/utils/jsr.ts
new file mode 100644
index 0000000000..5bc51aa134
--- /dev/null
+++ b/server/utils/jsr.ts
@@ -0,0 +1,66 @@
+import type { JsrPackageMeta, JsrPackageInfo } from '#shared/types/jsr'
+
+const JSR_REGISTRY = 'https://jsr.io'
+
+/**
+ * Check if a scoped npm package exists on JSR with the same name.
+ *
+ * This only works for scoped packages (@scope/name) since:
+ * 1. JSR only has scoped packages
+ * 2. We can only authoritatively match when names are identical
+ *
+ * Unscoped npm packages (e.g., "hono") may exist on JSR under a different
+ * name (e.g., "@hono/hono"), but we don't attempt to guess these mappings.
+ *
+ * @param npmPackageName - The npm package name (e.g., "@hono/hono")
+ * @returns JsrPackageInfo with existence status and metadata
+ */
+export const fetchJsrPackageInfo = defineCachedFunction(
+  async (npmPackageName: string): Promise<JsrPackageInfo> => {
+    // Only check scoped packages - we can't authoritatively map unscoped names
+    if (!npmPackageName.startsWith('@')) {
+      return { exists: false }
+    }
+
+    // Parse scope and name from @scope/name format
+    const match = npmPackageName.match(/^@([^/]+)\/(.+)$/)
+    if (!match) {
+      return { exists: false }
+    }
+
+    const [, scope, name] = match
+
+    try {
+      // Fetch JSR package metadata
+      const meta = await $fetch<JsrPackageMeta>(`${JSR_REGISTRY}/@${scope}/${name}/meta.json`, {
+        // Short timeout since this is a nice-to-have feature
+        timeout: 3000,
+      })
+
+      // Find latest non-yanked version
+      const versions = Object.entries(meta.versions)
+        .filter(([, v]) => !v.yanked)
+        .map(([version]) => version)
+
+      versions.sort()
+      const latestVersion = versions[versions.length - 1]
+
+      return {
+        exists: true,
+        scope: meta.scope,
+        name: meta.name,
+        url: `${JSR_REGISTRY}/@${meta.scope}/${meta.name}`,
+        latestVersion,
+      }
+    } catch {
+      // Package doesn't exist on JSR or API error
+      return { exists: false }
+    }
+  },
+  {
+    // Cache for 1 hour - JSR info doesn't change often
+    maxAge: 60 * 60,
+    name: 'jsr-package-info',
+    getKey: (name: string) => name,
+  },
+)
diff --git a/shared/types/index.ts b/shared/types/index.ts
index 482b790eb8..5896a16122 100644
--- a/shared/types/index.ts
+++ b/shared/types/index.ts
@@ -1 +1,2 @@
 export * from './npm-registry'
+export * from './jsr'
diff --git a/shared/types/jsr.ts b/shared/types/jsr.ts
new file mode 100644
index 0000000000..ad3115b275
--- /dev/null
+++ b/shared/types/jsr.ts
@@ -0,0 +1,43 @@
+/**
+ * JSR (jsr.io) Registry API Types
+ *
+ * @see https://jsr.io/docs/api
+ */
+
+/**
+ * JSR package metadata from meta.json
+ * GET https://jsr.io/@<scope>/<package-name>/meta.json
+ */
+export interface JsrPackageMeta {
+  /** Package scope (without @) */
+  scope: string
+  /** Package name */
+  name: string
+  /** Map of versions to version metadata */
+  versions: Record<string, JsrVersionMeta>
+}
+
+/**
+ * JSR version metadata (minimal, from meta.json)
+ */
+export interface JsrVersionMeta {
+  /** If true, the version has been yanked */
+  yanked?: boolean
+}
+
+/**
+ * JSR package info response for our API
+ * Indicates whether a package exists on JSR
+ */
+export interface JsrPackageInfo {
+  /** Whether the package exists on JSR */
+  exists: boolean
+  /** JSR scope (without @) */
+  scope?: string
+  /** JSR package name */
+  name?: string
+  /** Full JSR URL */
+  url?: string
+  /** Latest version on JSR (non-yanked) */
+  latestVersion?: string
+}
diff --git a/test/unit/install-command.spec.ts b/test/unit/install-command.spec.ts
new file mode 100644
index 0000000000..667054eed4
--- /dev/null
+++ b/test/unit/install-command.spec.ts
@@ -0,0 +1,287 @@
+import { describe, expect, it } from 'vitest'
+import {
+  getInstallCommand,
+  getInstallCommandParts,
+  getPackageSpecifier,
+} from '../../app/utils/install-command'
+import type { JsrPackageInfo } from '../../shared/types/jsr'
+
+describe('install command generation', () => {
+  // Test fixtures
+  const unscopedPackage = 'lodash'
+  const scopedPackage = '@trpc/server'
+
+  const jsrAvailable: JsrPackageInfo = {
+    exists: true,
+    scope: 'trpc',
+    name: 'server',
+    url: 'https://jsr.io/@trpc/server',
+    latestVersion: '10.0.0',
+  }
+
+  const jsrNotAvailable: JsrPackageInfo = {
+    exists: false,
+  }
+
+  describe('getPackageSpecifier', () => {
+    describe('unscoped package (lodash) - not on JSR', () => {
+      it.each([
+        ['npm', 'lodash'],
+        ['pnpm', 'lodash'],
+        ['yarn', 'lodash'],
+        ['bun', 'lodash'],
+        ['deno', 'npm:lodash'],
+        ['jsr', 'npm:lodash'],
+      ] as const)('%s → %s', (pm, expected) => {
+        expect(
+          getPackageSpecifier({
+            packageName: unscopedPackage,
+            packageManager: pm,
+            jsrInfo: jsrNotAvailable,
+          }),
+        ).toBe(expected)
+      })
+    })
+
+    describe('scoped package (@trpc/server) - available on JSR', () => {
+      it.each([
+        ['npm', '@trpc/server'],
+        ['pnpm', '@trpc/server'],
+        ['yarn', '@trpc/server'],
+        ['bun', '@trpc/server'],
+        ['deno', 'npm:@trpc/server'],
+        ['jsr', '@trpc/server'], // Native JSR specifier
+      ] as const)('%s → %s', (pm, expected) => {
+        expect(
+          getPackageSpecifier({
+            packageName: scopedPackage,
+            packageManager: pm,
+            jsrInfo: jsrAvailable,
+          }),
+        ).toBe(expected)
+      })
+    })
+
+    describe('scoped package (@vue/shared) - NOT on JSR', () => {
+      it.each([
+        ['npm', '@vue/shared'],
+        ['pnpm', '@vue/shared'],
+        ['yarn', '@vue/shared'],
+        ['bun', '@vue/shared'],
+        ['deno', 'npm:@vue/shared'],
+        ['jsr', 'npm:@vue/shared'], // Falls back to npm: compat
+      ] as const)('%s → %s', (pm, expected) => {
+        expect(
+          getPackageSpecifier({
+            packageName: '@vue/shared',
+            packageManager: pm,
+            jsrInfo: jsrNotAvailable,
+          }),
+        ).toBe(expected)
+      })
+    })
+  })
+
+  describe('getInstallCommand', () => {
+    describe('unscoped package without version', () => {
+      it.each([
+        ['npm', 'npm install lodash'],
+        ['pnpm', 'pnpm add lodash'],
+        ['yarn', 'yarn add lodash'],
+        ['bun', 'bun add lodash'],
+        ['deno', 'deno add npm:lodash'],
+        ['jsr', 'jsr add npm:lodash'],
+      ] as const)('%s → %s', (pm, expected) => {
+        expect(
+          getInstallCommand({
+            packageName: unscopedPackage,
+            packageManager: pm,
+            jsrInfo: jsrNotAvailable,
+          }),
+        ).toBe(expected)
+      })
+    })
+
+    describe('unscoped package with version', () => {
+      it.each([
+        ['npm', 'npm install lodash@4.17.21'],
+        ['pnpm', 'pnpm add lodash@4.17.21'],
+        ['yarn', 'yarn add lodash@4.17.21'],
+        ['bun', 'bun add lodash@4.17.21'],
+        ['deno', 'deno add npm:lodash@4.17.21'],
+        ['jsr', 'jsr add npm:lodash@4.17.21'],
+      ] as const)('%s → %s', (pm, expected) => {
+        expect(
+          getInstallCommand({
+            packageName: unscopedPackage,
+            packageManager: pm,
+            version: '4.17.21',
+            jsrInfo: jsrNotAvailable,
+          }),
+        ).toBe(expected)
+      })
+    })
+
+    describe('scoped package on JSR without version', () => {
+      it.each([
+        ['npm', 'npm install @trpc/server'],
+        ['pnpm', 'pnpm add @trpc/server'],
+        ['yarn', 'yarn add @trpc/server'],
+        ['bun', 'bun add @trpc/server'],
+        ['deno', 'deno add npm:@trpc/server'],
+        ['jsr', 'jsr add @trpc/server'], // Native JSR
+      ] as const)('%s → %s', (pm, expected) => {
+        expect(
+          getInstallCommand({
+            packageName: scopedPackage,
+            packageManager: pm,
+            jsrInfo: jsrAvailable,
+          }),
+        ).toBe(expected)
+      })
+    })
+
+    describe('scoped package on JSR with version', () => {
+      it.each([
+        ['npm', 'npm install @trpc/server@10.0.0'],
+        ['pnpm', 'pnpm add @trpc/server@10.0.0'],
+        ['yarn', 'yarn add @trpc/server@10.0.0'],
+        ['bun', 'bun add @trpc/server@10.0.0'],
+        ['deno', 'deno add npm:@trpc/server@10.0.0'],
+        ['jsr', 'jsr add @trpc/server@10.0.0'], // Native JSR with version
+      ] as const)('%s → %s', (pm, expected) => {
+        expect(
+          getInstallCommand({
+            packageName: scopedPackage,
+            packageManager: pm,
+            version: '10.0.0',
+            jsrInfo: jsrAvailable,
+          }),
+        ).toBe(expected)
+      })
+    })
+
+    describe('scoped package NOT on JSR', () => {
+      it.each([
+        ['npm', 'npm install @vue/shared'],
+        ['pnpm', 'pnpm add @vue/shared'],
+        ['yarn', 'yarn add @vue/shared'],
+        ['bun', 'bun add @vue/shared'],
+        ['deno', 'deno add npm:@vue/shared'],
+        ['jsr', 'jsr add npm:@vue/shared'], // Falls back to npm: compat
+      ] as const)('%s → %s', (pm, expected) => {
+        expect(
+          getInstallCommand({
+            packageName: '@vue/shared',
+            packageManager: pm,
+            jsrInfo: jsrNotAvailable,
+          }),
+        ).toBe(expected)
+      })
+    })
+  })
+
+  describe('getInstallCommandParts', () => {
+    it('returns correct parts for npm without version', () => {
+      const parts = getInstallCommandParts({
+        packageName: 'lodash',
+        packageManager: 'npm',
+        jsrInfo: jsrNotAvailable,
+      })
+      expect(parts).toEqual(['npm', 'install', 'lodash'])
+    })
+
+    it('returns correct parts for npm with version', () => {
+      const parts = getInstallCommandParts({
+        packageName: 'lodash',
+        packageManager: 'npm',
+        version: '4.17.21',
+        jsrInfo: jsrNotAvailable,
+      })
+      expect(parts).toEqual(['npm', 'install', 'lodash@4.17.21'])
+    })
+
+    it('returns correct parts for deno with npm: prefix', () => {
+      const parts = getInstallCommandParts({
+        packageName: '@trpc/server',
+        packageManager: 'deno',
+        jsrInfo: jsrAvailable,
+      })
+      expect(parts).toEqual(['deno', 'add', 'npm:@trpc/server'])
+    })
+
+    it('returns correct parts for jsr with native package', () => {
+      const parts = getInstallCommandParts({
+        packageName: '@trpc/server',
+        packageManager: 'jsr',
+        jsrInfo: jsrAvailable,
+      })
+      expect(parts).toEqual(['jsr', 'add', '@trpc/server'])
+    })
+
+    it('returns correct parts for jsr with npm compat', () => {
+      const parts = getInstallCommandParts({
+        packageName: 'lodash',
+        packageManager: 'jsr',
+        jsrInfo: jsrNotAvailable,
+      })
+      expect(parts).toEqual(['jsr', 'add', 'npm:lodash'])
+    })
+
+    it('joined parts match getInstallCommand output', () => {
+      const options = {
+        packageName: '@trpc/server',
+        packageManager: 'pnpm' as const,
+        version: '10.0.0',
+        jsrInfo: jsrAvailable,
+      }
+      const parts = getInstallCommandParts(options)
+      const command = getInstallCommand(options)
+      expect(parts.join(' ')).toBe(command)
+    })
+  })
+
+  describe('edge cases', () => {
+    it('handles null jsrInfo same as not available', () => {
+      expect(
+        getPackageSpecifier({
+          packageName: 'lodash',
+          packageManager: 'jsr',
+          jsrInfo: null,
+        }),
+      ).toBe('npm:lodash')
+    })
+
+    it('handles undefined jsrInfo same as not available', () => {
+      expect(
+        getPackageSpecifier({
+          packageName: 'lodash',
+          packageManager: 'jsr',
+          jsrInfo: undefined,
+        }),
+      ).toBe('npm:lodash')
+    })
+
+    it('handles jsrInfo with exists:true but missing scope/name', () => {
+      const partialJsr: JsrPackageInfo = {
+        exists: true,
+        // Missing scope and name
+      }
+      expect(
+        getPackageSpecifier({
+          packageName: '@foo/bar',
+          packageManager: 'jsr',
+          jsrInfo: partialJsr,
+        }),
+      ).toBe('npm:@foo/bar')
+    })
+
+    it('getInstallCommandParts returns empty array for invalid package manager', () => {
+      const parts = getInstallCommandParts({
+        packageName: 'lodash',
+        packageManager: 'invalid' as any,
+      })
+      expect(parts).toEqual([])
+    })
+  })
+})