From 2231fd72eb1d806edae09e96694329a2cb360df5 Mon Sep 17 00:00:00 2001
From: eryue0220 <eryue0220@gmail.com>
Date: Wed, 4 Feb 2026 18:15:22 +0800
Subject: [PATCH 1/9] feat: add deprecate feature

---
 .../Package/DeprecatePackageModal.vue         | 176 ++++++++++++++++++
 app/pages/package/[...package].vue            |  35 ++++
 cli/src/npm-client.ts                         |  27 +++
 cli/src/schemas.ts                            |  16 ++
 cli/src/server.ts                             |   9 +
 cli/src/types.ts                              |   1 +
 lunaria/files/en-GB.json                      |  15 +-
 lunaria/files/en-US.json                      |  15 +-
 8 files changed, 292 insertions(+), 2 deletions(-)
 create mode 100644 app/components/Package/DeprecatePackageModal.vue

diff --git a/app/components/Package/DeprecatePackageModal.vue b/app/components/Package/DeprecatePackageModal.vue
new file mode 100644
index 000000000..c6164f3ff
--- /dev/null
+++ b/app/components/Package/DeprecatePackageModal.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import type { NewOperation } from '~/composables/useConnector'
+
+const props = withDefaults(
+  defineProps<{
+    packageName: string
+    version?: string
+  }>(),
+  { version: '' },
+)
+
+const { t } = useI18n()
+const { isConnected, state, addOperation, approveOperation, executeOperations, refreshState } =
+  useConnector()
+
+const deprecateMessage = ref('')
+const deprecateVersion = ref(props.version)
+const isDeprecating = shallowRef(false)
+const deprecateSuccess = shallowRef(false)
+const deprecateError = shallowRef<string | null>(null)
+
+const connectorModal = useModal('connector-modal')
+
+const modalTitle = computed(() =>
+  deprecateVersion.value
+    ? `${$t('package.deprecation.modal.title')} ${props.packageName}@${deprecateVersion.value}`
+    : `${$t('package.deprecation.modal.title')} ${props.packageName}`,
+)
+
+async function handleDeprecate() {
+  const message = deprecateMessage.value.trim()
+  if (!message || !isConnected.value) return
+
+  isDeprecating.value = true
+  deprecateError.value = null
+
+  try {
+    const params: Record<string, string> = {
+      pkg: props.packageName,
+      message,
+    }
+    if (deprecateVersion.value.trim()) {
+      params.version = deprecateVersion.value.trim()
+    }
+
+    const command = params.version
+      ? `npm deprecate ${props.packageName}@${params.version} "${message}"`
+      : `npm deprecate ${props.packageName} "${message}"`
+
+    const operation = await addOperation({
+      type: 'package:deprecate',
+      params,
+      description: params.version
+        ? `Deprecate ${props.packageName}@${params.version}`
+        : `Deprecate ${props.packageName}`,
+      command,
+    } as NewOperation)
+
+    if (!operation) {
+      throw new Error('Failed to create operation')
+    }
+
+    await approveOperation(operation.id)
+    await executeOperations()
+    await refreshState()
+
+    const completedOp = state.value.operations.find(op => op.id === operation.id)
+    if (completedOp?.status === 'completed') {
+      deprecateSuccess.value = true
+    } else if (completedOp?.status === 'failed') {
+      if (completedOp.result?.requiresOtp) {
+        close()
+        connectorModal.open()
+      } else {
+        deprecateError.value = completedOp.result?.stderr || t('deprecate.modal.failed')
+      }
+    } else {
+      close()
+      connectorModal.open()
+    }
+  } catch (err) {
+    deprecateError.value = err instanceof Error ? err.message : t('deprecate.modal.failed')
+  } finally {
+    isDeprecating.value = false
+  }
+}
+
+const dialogRef = ref<HTMLDialogElement>()
+
+function open() {
+  deprecateError.value = null
+  deprecateSuccess.value = false
+  deprecateMessage.value = ''
+  deprecateVersion.value = props.version ?? ''
+  dialogRef.value?.showModal()
+}
+
+function close() {
+  dialogRef.value?.close()
+}
+
+defineExpose({ open, close })
+</script>
+
+<template>
+  <Modal ref="dialogRef" :modal-title="modalTitle" id="deprecate-package-modal" class="max-w-md">
+    <!-- Success state -->
+    <div v-if="deprecateSuccess" class="space-y-4">
+      <div
+        class="flex items-center gap-3 p-4 bg-green-500/10 border border-green-500/20 rounded-lg"
+      >
+        <span class="i-carbon-checkmark-filled text-green-500 w-6 h-6" aria-hidden="true" />
+        <div>
+          <p class="font-mono text-sm text-fg">{{ $t('package.deprecation.modal.success') }}</p>
+          <p class="text-xs text-fg-muted">
+            {{ $t('package.deprecation.modal.success_detail') }}
+          </p>
+        </div>
+      </div>
+      <button
+        type="button"
+        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        @click="close"
+      >
+        {{ $t('common.close') }}
+      </button>
+    </div>
+
+    <!-- Form (only shown when connected; parent only opens modal when isConnected) -->
+    <div v-else class="space-y-4">
+      <div>
+        <label for="deprecate-message" class="block text-sm font-medium text-fg mb-1">
+          {{ $t('package.deprecation.modal.reason') }}
+        </label>
+        <textarea
+          id="deprecate-message"
+          v-model="deprecateMessage"
+          rows="3"
+          class="w-full px-3 py-2 font-mono text-sm bg-bg border border-border rounded-md text-fg placeholder:text-fg-muted focus:outline-none focus:ring-2 focus:ring-fg/50"
+          :placeholder="$t('package.deprecation.modal.reason_placeholder')"
+        />
+      </div>
+      <div>
+        <label for="deprecate-version" class="block text-sm font-medium text-fg mb-1">
+          {{ $t('package.deprecation.modal.version') }}
+        </label>
+        <input
+          id="deprecate-version"
+          v-model="deprecateVersion"
+          type="text"
+          class="w-full px-3 py-2 font-mono text-sm bg-bg border border-border rounded-md text-fg placeholder:text-fg-muted focus:outline-none focus:ring-2 focus:ring-fg/50"
+          :placeholder="$t('package.deprecation.modal.version_placeholder')"
+        />
+      </div>
+      <div
+        v-if="deprecateError"
+        role="alert"
+        class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
+      >
+        {{ deprecateError }}
+      </div>
+      <button
+        type="button"
+        :disabled="isDeprecating || !deprecateMessage.trim()"
+        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-colors duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+        @click="handleDeprecate"
+      >
+        {{
+          isDeprecating
+            ? $t('package.deprecation.modal.deprecating')
+            : $t('package.deprecation.action')
+        }}
+      </button>
+    </div>
+  </Modal>
+</template>
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 11be99087..288271f65 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -187,6 +187,17 @@ const deprecationNoticeMessage = useMarkdown(() => ({
   text: deprecationNotice.value?.message ?? '',
 }))
 
+const { isConnected, npmUser } = useConnector()
+const deprecateModal = useTemplateRef<{ open: () => void }>('deprecateModal')
+
+const isPackageOwner = computed(() => {
+  const maintainers = pkg.value?.maintainers
+  const user = npmUser.value
+  if (!maintainers?.length || !user) return false
+  const userLower = user.toLowerCase()
+  return maintainers.some((m: { name?: string }) => (m.name ?? '').toLowerCase() === userLower)
+})
+
 const sizeTooltip = computed(() => {
   const chunks = [
     displayVersion.value &&
@@ -1135,6 +1146,22 @@ defineOgImageComponent('Package', {
             :peer-dependencies-meta="displayVersion.peerDependenciesMeta"
             :optional-dependencies="displayVersion.optionalDependencies"
           />
+
+          <!-- Deprecation (when connected as package owner) -->
+          <div v-if="isConnected && resolvedVersion && isPackageOwner" class="space-y-1">
+            <button
+              type="button"
+              class="flex items-center justify-center w-full px-3 py-1.5 bg-bg-subtle rounded text-sm font-mono text-red-400 hover:text-red-500 transition-colors inline-flex items-center gap-1.5 w-full"
+              @click="deprecateModal?.open()"
+            >
+              <span class="i-carbon-warning-alt w-4 h-4 shrink-0" aria-hidden="true" />
+              {{
+                deprecationNotice
+                  ? $t('package.deprecation.action_change')
+                  : $t('package.deprecation.action')
+              }}
+            </button>
+          </div>
         </div>
       </div>
     </article>
@@ -1153,6 +1180,14 @@ defineOgImageComponent('Package', {
       </p>
       <NuxtLink to="/" class="btn">{{ $t('common.go_back_home') }}</NuxtLink>
     </div>
+    <ClientOnly>
+      <PackageDeprecatePackageModal
+        v-if="pkg"
+        ref="deprecateModal"
+        :package-name="pkg.name"
+        :version="resolvedVersion ?? ''"
+      />
+    </ClientOnly>
   </main>
 </template>
 
diff --git a/cli/src/npm-client.ts b/cli/src/npm-client.ts
index 77ebcccf9..68cd177b2 100644
--- a/cli/src/npm-client.ts
+++ b/cli/src/npm-client.ts
@@ -428,3 +428,30 @@ export async function packageInit(
     })
   }
 }
+
+/**
+ * Deprecate a package or a specific version with a custom message.
+ * @param pkg Package name (e.g. "vue" or "@nuxt/kit")
+ * @param reason Deprecation message shown to users
+ * @param version Optional version to deprecate (e.g. "1.0.0"); if omitted, deprecates the whole package
+ * @param options.dryRun If true, passes --dry-run to npm (report what would be done without making changes)
+ * @param options.registry Registry URL (e.g. "https://registry.npmjs.org"); if set, passes --registry
+ */
+export async function packageDeprecate(
+  pkg: string,
+  reason: string,
+  version?: string,
+  otp?: string,
+  options?: { dryRun?: boolean; registry?: string },
+): Promise<NpmExecResult> {
+  validatePackageName(pkg)
+  const target = version ? `${pkg}@${version}` : pkg
+  const args = ['deprecate', target, reason]
+  if (options?.dryRun) {
+    args.push('--dry-run')
+  }
+  if (options?.registry?.trim()) {
+    args.push('--registry', options.registry.trim())
+  }
+  return execNpm(args, { otp })
+}
diff --git a/cli/src/schemas.ts b/cli/src/schemas.ts
index 95ee4c1ca..33203c977 100644
--- a/cli/src/schemas.ts
+++ b/cli/src/schemas.ts
@@ -109,6 +109,7 @@ export const OperationTypeSchema = v.picklist([
   'owner:add',
   'owner:rm',
   'package:init',
+  'package:deprecate',
 ])
 
 /**
@@ -240,6 +241,18 @@ export const PackageInitParamsSchema = v.object({
   author: v.optional(UsernameSchema),
 })
 
+const PackageDeprecateParamsSchema = v.object({
+  pkg: PackageNameSchema,
+  message: v.pipe(
+    v.string(),
+    v.nonEmpty('Deprecation message is required'),
+    v.maxLength(500, 'Message is too long'),
+  ),
+  version: v.optional(v.pipe(v.string(), v.nonEmpty())),
+  dryRun: v.optional(v.picklist(['true', 'false'], 'dryRun must be "true" or "false"')),
+  registry: v.optional(v.pipe(v.string(), v.minLength(1, 'Registry URL cannot be empty'))),
+})
+
 // ============================================================================
 // Helper Functions
 // ============================================================================
@@ -289,6 +302,9 @@ export function validateOperationParams(
     case 'package:init':
       v.parse(PackageInitParamsSchema, params)
       break
+    case 'package:deprecate':
+      v.parse(PackageDeprecateParamsSchema, params)
+      break
   }
 }
 
diff --git a/cli/src/server.ts b/cli/src/server.ts
index fc609e06f..9e4d7c620 100644
--- a/cli/src/server.ts
+++ b/cli/src/server.ts
@@ -23,6 +23,7 @@ import {
   ownerAdd,
   ownerRemove,
   packageInit,
+  packageDeprecate,
   listUserPackages,
   type NpmExecResult,
 } from './npm-client.ts'
@@ -734,6 +735,14 @@ async function executeOperation(op: PendingOperation, otp?: string): Promise<Npm
       return ownerRemove(params.user, params.pkg, otp)
     case 'package:init':
       return packageInit(params.name, params.author, otp)
+    case 'package:deprecate': {
+      const dryRun = params.dryRun === 'true'
+      const registry = params.registry?.trim() ?? undefined
+      return packageDeprecate(params.pkg, params.message, params.version, otp, {
+        dryRun: dryRun ?? undefined,
+        registry,
+      })
+    }
     default:
       return {
         stdout: '',
diff --git a/cli/src/types.ts b/cli/src/types.ts
index a83e9f3b7..7b6483a0e 100644
--- a/cli/src/types.ts
+++ b/cli/src/types.ts
@@ -24,6 +24,7 @@ export type OperationType =
   | 'owner:add'
   | 'owner:rm'
   | 'package:init'
+  | 'package:deprecate'
 
 export type OperationStatus =
   | 'pending'
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index 39a1a00bb..57c239ad1 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -128,9 +128,22 @@
     "navigation": "Package",
     "copy_name": "Copy package name",
     "deprecation": {
+      "action": "Deprecate",
+      "action_change": "Change deprecation",
       "package": "This package has been deprecated.",
       "version": "This version has been deprecated.",
-      "no_reason": "No reason provided"
+      "no_reason": "No reason provided",
+      "modal": {
+        "deprecating": "Deprecating",
+        "title": "Deprecate",
+        "title_version": "Deprecate Version",
+        "reason": "Reason",
+        "reason_placeholder": "e.g. Use package-x instead. This package is no longer maintained.",
+        "success": "Package deprecated",
+        "success_detail": "The package has been deprecated.",
+        "version": "Version",
+        "version_placeholder": "Leave empty to deprecate the whole package"
+      }
     },
     "replacement": {
       "title": "You might not need this dependency.",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index f67cdff4f..f7e17d057 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -128,9 +128,22 @@
     "navigation": "Package",
     "copy_name": "Copy package name",
     "deprecation": {
+      "action": "Deprecate",
+      "action_change": "Change deprecation",
       "package": "This package has been deprecated.",
       "version": "This version has been deprecated.",
-      "no_reason": "No reason provided"
+      "no_reason": "No reason provided",
+      "modal": {
+        "deprecating": "Deprecating",
+        "title": "Deprecate",
+        "title_version": "Deprecate Version",
+        "reason": "Reason",
+        "reason_placeholder": "e.g. Use package-x instead. This package is no longer maintained.",
+        "success": "Package deprecated",
+        "success_detail": "The package has been deprecated.",
+        "version": "Version",
+        "version_placeholder": "Leave empty to deprecate the whole package"
+      }
     },
     "replacement": {
       "title": "You might not need this dependency.",

From f9d0df563c8618abca3effafc4e2739488cfe699 Mon Sep 17 00:00:00 2001
From: eryue0220 <eryue0220@gmail.com>
Date: Wed, 4 Feb 2026 18:22:19 +0800
Subject: [PATCH 2/9] add i18n

---
 i18n/locales/en.json    | 15 ++++++++++++++-
 i18n/locales/zh-CN.json | 15 ++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index f67cdff4f..f7e17d057 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -128,9 +128,22 @@
     "navigation": "Package",
     "copy_name": "Copy package name",
     "deprecation": {
+      "action": "Deprecate",
+      "action_change": "Change deprecation",
       "package": "This package has been deprecated.",
       "version": "This version has been deprecated.",
-      "no_reason": "No reason provided"
+      "no_reason": "No reason provided",
+      "modal": {
+        "deprecating": "Deprecating",
+        "title": "Deprecate",
+        "title_version": "Deprecate Version",
+        "reason": "Reason",
+        "reason_placeholder": "e.g. Use package-x instead. This package is no longer maintained.",
+        "success": "Package deprecated",
+        "success_detail": "The package has been deprecated.",
+        "version": "Version",
+        "version_placeholder": "Leave empty to deprecate the whole package"
+      }
     },
     "replacement": {
       "title": "You might not need this dependency.",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 22b562dd2..c5c8f4eea 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -124,9 +124,22 @@
     "navigation": "包导航",
     "copy_name": "拷贝包名",
     "deprecation": {
+      "action": "废弃",
+      "action_change": "修改弃用",
       "package": "这个包已经被弃用。",
       "version": "这个版本已经被弃用。",
-      "no_reason": "没有提供原因"
+      "no_reason": "没有提供原因",
+      "modal": {
+        "deprecating": "废弃中",
+        "title": "废弃",
+        "title_version": "废弃版本",
+        "reason": "原因",
+        "reason_placeholder": "例如：使用 package-x 替代。这个包不再维护。",
+        "success": "包已废弃",
+        "success_detail": "这个包已废弃。",
+        "version": "版本",
+        "version_placeholder": "留空则废弃整个包"
+      }
     },
     "replacement": {
       "title": "你可能不需要这个依赖。",

From bb372288ff32968c178c2041336cf0be84d165de Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 4 Feb 2026 10:24:54 +0000
Subject: [PATCH 3/9] [autofix.ci] apply automated fixes

---
 lunaria/files/zh-CN.json | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/lunaria/files/zh-CN.json b/lunaria/files/zh-CN.json
index 22b562dd2..c5c8f4eea 100644
--- a/lunaria/files/zh-CN.json
+++ b/lunaria/files/zh-CN.json
@@ -124,9 +124,22 @@
     "navigation": "包导航",
     "copy_name": "拷贝包名",
     "deprecation": {
+      "action": "废弃",
+      "action_change": "修改弃用",
       "package": "这个包已经被弃用。",
       "version": "这个版本已经被弃用。",
-      "no_reason": "没有提供原因"
+      "no_reason": "没有提供原因",
+      "modal": {
+        "deprecating": "废弃中",
+        "title": "废弃",
+        "title_version": "废弃版本",
+        "reason": "原因",
+        "reason_placeholder": "例如：使用 package-x 替代。这个包不再维护。",
+        "success": "包已废弃",
+        "success_detail": "这个包已废弃。",
+        "version": "版本",
+        "version_placeholder": "留空则废弃整个包"
+      }
     },
     "replacement": {
       "title": "你可能不需要这个依赖。",

From 58e112d3f907a9300a8ed35ed64558cd3b8f1d02 Mon Sep 17 00:00:00 2001
From: eryue0220 <eryue0220@gmail.com>
Date: Wed, 4 Feb 2026 23:07:32 +0800
Subject: [PATCH 4/9] update

---
 app/components/Package/DeprecatePackageModal.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/components/Package/DeprecatePackageModal.vue b/app/components/Package/DeprecatePackageModal.vue
index c6164f3ff..ad21d7f65 100644
--- a/app/components/Package/DeprecatePackageModal.vue
+++ b/app/components/Package/DeprecatePackageModal.vue
@@ -43,9 +43,10 @@ async function handleDeprecate() {
       params.version = deprecateVersion.value.trim()
     }
 
+    const escapedMessage = message.replace(/"/g, '\\"')
     const command = params.version
-      ? `npm deprecate ${props.packageName}@${params.version} "${message}"`
-      : `npm deprecate ${props.packageName} "${message}"`
+      ? `npm deprecate ${props.packageName}@${params.version} "${escapedMessage}"`
+      : `npm deprecate ${props.packageName} "${escapedMessage}"`
 
     const operation = await addOperation({
       type: 'package:deprecate',
@@ -72,14 +73,14 @@ async function handleDeprecate() {
         close()
         connectorModal.open()
       } else {
-        deprecateError.value = completedOp.result?.stderr || t('deprecate.modal.failed')
+        deprecateError.value = completedOp.result?.stderr || t('common.try_again')
       }
     } else {
       close()
       connectorModal.open()
     }
   } catch (err) {
-    deprecateError.value = err instanceof Error ? err.message : t('deprecate.modal.failed')
+    deprecateError.value = err instanceof Error ? err.message : t('common.try_again')
   } finally {
     isDeprecating.value = false
   }

From 2159074cb47308311c26573704db2e1743ebc6ea Mon Sep 17 00:00:00 2001
From: eryue0220 <eryue0220@gmail.com>
Date: Wed, 4 Feb 2026 23:10:57 +0800
Subject: [PATCH 5/9] update

---
 cli/src/npm-client.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/cli/src/npm-client.ts b/cli/src/npm-client.ts
index 901ab135d..88dbde1d2 100644
--- a/cli/src/npm-client.ts
+++ b/cli/src/npm-client.ts
@@ -448,13 +448,23 @@ export async function packageDeprecate(
   options?: { dryRun?: boolean; registry?: string },
 ): Promise<NpmExecResult> {
   validatePackageName(pkg)
+
+  const reasonText = reason.trim()
+
+  if (!reasonText) {
+    throw new Error('Deprecation reason must not be empty')
+  }
+
   const target = version ? `${pkg}@${version}` : pkg
   const args = ['deprecate', target, reason]
+
   if (options?.dryRun) {
     args.push('--dry-run')
   }
+
   if (options?.registry?.trim()) {
     args.push('--registry', options.registry.trim())
   }
+
   return execNpm(args, { otp })
 }

From 2530ba930ee6860d86e1bf9d4316cb7ad5c31669 Mon Sep 17 00:00:00 2001
From: eryue0220 <eryue0220@gmail.com>
Date: Wed, 4 Feb 2026 23:29:33 +0800
Subject: [PATCH 6/9] update

---
 app/components/Package/DeprecatePackageModal.vue | 3 ++-
 cli/src/npm-client.ts                            | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/DeprecatePackageModal.vue b/app/components/Package/DeprecatePackageModal.vue
index ad21d7f65..66f061b9f 100644
--- a/app/components/Package/DeprecatePackageModal.vue
+++ b/app/components/Package/DeprecatePackageModal.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { NewOperation } from '~/composables/useConnector'
+import type Modal from '~/components/Modal.client.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -86,7 +87,7 @@ async function handleDeprecate() {
   }
 }
 
-const dialogRef = ref<HTMLDialogElement>()
+const dialogRef = ref<InstanceType<typeof Modal> | undefined>()
 
 function open() {
   deprecateError.value = null
diff --git a/cli/src/npm-client.ts b/cli/src/npm-client.ts
index 88dbde1d2..e47251985 100644
--- a/cli/src/npm-client.ts
+++ b/cli/src/npm-client.ts
@@ -456,7 +456,7 @@ export async function packageDeprecate(
   }
 
   const target = version ? `${pkg}@${version}` : pkg
-  const args = ['deprecate', target, reason]
+  const args = ['deprecate', target, reasonText]
 
   if (options?.dryRun) {
     args.push('--dry-run')

From d80dd64f19f9a799622944248646eb9cb20203f3 Mon Sep 17 00:00:00 2001
From: eryue0220 <eryue0220@gmail.com>
Date: Wed, 4 Feb 2026 23:47:55 +0800
Subject: [PATCH 7/9] ut

---
 .gitignore             |  1 +
 test/nuxt/a11y.spec.ts | 24 ++++++++++++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/.gitignore b/.gitignore
index 45734458b..4e02b9143 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,6 +29,7 @@ test-results
 
 # Test coverage
 coverage/
+*.junit.xml
 
 # Playwright
 playwright-report/
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index bbdf014d6..2abfcb496 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -112,6 +112,7 @@ import {
   PackageChartModal,
   PackageClaimPackageModal,
   PackageCompatibility,
+  PackageDeprecatePackageModal,
   PackageDependencies,
   PackageDeprecatedTree,
   PackageInstallScripts,
@@ -951,6 +952,29 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('PackageDeprecatePackageModal', () => {
+    it('should have no accessibility violations when closed', async () => {
+      const component = await mountSuspended(PackageDeprecatePackageModal, {
+        props: {
+          packageName: 'test-package',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when closed with version', async () => {
+      const component = await mountSuspended(PackageDeprecatePackageModal, {
+        props: {
+          packageName: 'test-package',
+          version: '1.0.0',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('PackageProvenanceSection', () => {
     it('should have no accessibility violations with minimal details', async () => {
       const component = await mountSuspended(PackageProvenanceSection, {

From 0c221f5e97433d9172f6d1ba96d54f9d934badbf Mon Sep 17 00:00:00 2001
From: eryue0220 <eryue0220@gmail.com>
Date: Wed, 4 Feb 2026 23:50:30 +0800
Subject: [PATCH 8/9] Update app/components/Package/DeprecatePackageModal.vue

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 app/components/Package/DeprecatePackageModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/DeprecatePackageModal.vue b/app/components/Package/DeprecatePackageModal.vue
index 66f061b9f..bbacce4f8 100644
--- a/app/components/Package/DeprecatePackageModal.vue
+++ b/app/components/Package/DeprecatePackageModal.vue
@@ -24,8 +24,8 @@ const connectorModal = useModal('connector-modal')
 
 const modalTitle = computed(() =>
   deprecateVersion.value
-    ? `${$t('package.deprecation.modal.title')} ${props.packageName}@${deprecateVersion.value}`
-    : `${$t('package.deprecation.modal.title')} ${props.packageName}`,
+    ? `${t('package.deprecation.modal.title')} ${props.packageName}@${deprecateVersion.value}`
+    : `${t('package.deprecation.modal.title')} ${props.packageName}`,
 )
 
 async function handleDeprecate() {

From 4264814d093f42389b330c9d0eed38a10bad9b65 Mon Sep 17 00:00:00 2001
From: eryue0220 <eryue0220@gmail.com>
Date: Thu, 5 Feb 2026 00:15:32 +0800
Subject: [PATCH 9/9] add ut

---
 .../components/DeprecatePackageModal.spec.ts  | 418 ++++++++++++++++++
 1 file changed, 418 insertions(+)
 create mode 100644 test/nuxt/components/DeprecatePackageModal.spec.ts

diff --git a/test/nuxt/components/DeprecatePackageModal.spec.ts b/test/nuxt/components/DeprecatePackageModal.spec.ts
new file mode 100644
index 000000000..e72a0bdca
--- /dev/null
+++ b/test/nuxt/components/DeprecatePackageModal.spec.ts
@@ -0,0 +1,418 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { Ref } from 'vue'
+import { defineComponent, h, ref } from 'vue'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import DeprecatePackageModal from '~/components/Package/DeprecatePackageModal.vue'
+import type { PendingOperation } from '../../../cli/src/types'
+
+/** Internal state exposed on vm for testing (not in defineExpose) */
+interface DeprecateModalVM {
+  deprecateMessage?: Ref<string>
+  deprecateVersion?: Ref<string>
+  deprecateError?: Ref<string | null>
+  deprecateSuccess?: Ref<boolean>
+  handleDeprecate?: () => Promise<void>
+  open?: () => void
+  close?: () => void
+}
+
+function getVM(component: { vm: unknown }) {
+  return component.vm as DeprecateModalVM
+}
+
+const mockAddOperation = vi.fn()
+const mockApproveOperation = vi.fn()
+const mockExecuteOperations = vi.fn()
+const mockRefreshState = vi.fn()
+const mockConnectorModalOpen = vi.fn()
+
+const mockIsConnected = ref(true)
+const mockState = ref<{ operations: PendingOperation[] }>({
+  operations: [],
+})
+
+vi.mock('~/composables/useConnector', () => ({
+  useConnector: () => ({
+    isConnected: mockIsConnected,
+    state: mockState,
+    addOperation: (...args: unknown[]) => mockAddOperation(...args),
+    approveOperation: (...args: unknown[]) => mockApproveOperation(...args),
+    executeOperations: (...args: unknown[]) => mockExecuteOperations(...args),
+    refreshState: (...args: unknown[]) => mockRefreshState(...args),
+  }),
+}))
+
+vi.mock('~/composables/useModal', () => ({
+  useModal: (id: string) => ({
+    id,
+    open: mockConnectorModalOpen,
+    close: vi.fn(),
+  }),
+}))
+
+// Stub Modal so slot content is rendered inline (no Teleport to body), making form elements findable
+const ModalStub = defineComponent({
+  name: 'ModalStub',
+  inheritAttrs: false,
+  setup() {
+    const showModal = vi.fn()
+    const close = vi.fn()
+    return { showModal, close }
+  },
+  render() {
+    return h('div', { ...this.$attrs, 'data-testid': 'modal-stub' }, this.$slots.default?.())
+  },
+})
+
+const mountOptions = {
+  global: {
+    stubs: {
+      Modal: ModalStub,
+    },
+  },
+}
+
+function createMockOperation(overrides: Partial<PendingOperation> = {}): PendingOperation {
+  return {
+    id: 'op-1',
+    type: 'package:deprecate',
+    params: { pkg: 'test-package', message: 'test message' },
+    description: 'Deprecate test-package',
+    command: 'npm deprecate test-package "test message"',
+    status: 'completed',
+    createdAt: Date.now(),
+    ...overrides,
+  }
+}
+
+describe('DeprecatePackageModal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockIsConnected.value = true
+    mockState.value = { operations: [] }
+  })
+
+  describe('props and rendering', () => {
+    it('renders with packageName only', async () => {
+      const component = await mountSuspended(DeprecatePackageModal, {
+        props: { packageName: 'my-pkg' },
+        ...mountOptions,
+      })
+
+      expect(component.find('[data-testid="modal-stub"]').exists()).toBe(true)
+      expect(component.find('#deprecate-message').exists()).toBe(true)
+      expect(component.find('#deprecate-version').exists()).toBe(true)
+    })
+
+    it('renders with packageName and version', async () => {
+      const component = await mountSuspended(DeprecatePackageModal, {
+        props: { packageName: 'my-pkg', version: '2.0.0' },
+        ...mountOptions,
+      })
+
+      const versionInput = component.find('#deprecate-version')
+      expect(versionInput.exists()).toBe(true)
+      expect((versionInput.element as HTMLInputElement).value).toBe('2.0.0')
+    })
+  })
+
+  describe('exposed open() and close()', () => {
+    it('open() resets form state and calls showModal on inner Modal', async () => {
+      const component = await mountSuspended(DeprecatePackageModal, {
+        props: { packageName: 'pkg', version: '1.0.0' },
+        ...mountOptions,
+      })
+
+      const modalStub = component.findComponent({ name: 'ModalStub' })
+      expect(modalStub.exists()).toBe(true)
+      getVM(component).open?.()
+
+      expect(modalStub.vm.showModal).toHaveBeenCalled()
+      const vm = getVM(component)
+      expect(vm.deprecateMessage?.value ?? vm.deprecateMessage).toBe('')
+      expect(vm.deprecateVersion?.value ?? vm.deprecateVersion).toBe('1.0.0')
+      expect(vm.deprecateError?.value ?? vm.deprecateError).toBeNull()
+      expect(vm.deprecateSuccess?.value ?? vm.deprecateSuccess).toBe(false)
+    })
+
+    it('close() calls close on inner Modal', async () => {
+      const component = await mountSuspended(DeprecatePackageModal, {
+        props: { packageName: 'pkg' },
+        ...mountOptions,
+      })
+
+      const modalStub = component.findComponent({ name: 'ModalStub' })
+      getVM(component).close?.()
+
+      expect(modalStub.vm.close).toHaveBeenCalled()
+    })
+  })
+
+  describe('form state', () => {
+    it('deprecate button is disabled when message is empty', async () => {
+      const component = await mountSuspended(DeprecatePackageModal, {
+        props: { packageName: 'pkg' },
+        ...mountOptions,
+      })
+
+      const buttons = component.findAll('button[type="button"]')
+      const submitBtn = buttons.find(b => b.attributes('disabled') !== undefined)
+      expect(submitBtn).toBeDefined()
+    })
+
+    it('deprecate button is enabled when message is filled and connected', async () => {
+      mockIsConnected.value = true
+      const component = await mountSuspended(DeprecatePackageModal, {
+        props: { packageName: 'pkg' },
+        ...mountOptions,
+      })
+
+      await component.find('#deprecate-message').setValue('Deprecated, use foo instead')
+      await component.vm.$nextTick()
+
+      const buttons = component.findAll('button[type="button"]')
+      const submitBtn = buttons.find(b => b.attributes('disabled') === undefined)
+      expect(submitBtn).toBeDefined()
+    })
+
+    it('handleDeprecate does nothing when not connected', async () => {
+      mockIsConnected.value = false
+      const component = await mountSuspended(DeprecatePackageModal, {
+        props: { packageName: 'pkg' },
+        ...mountOptions,
+      })
+
+      await component.find('#deprecate-message').setValue('message')
+      await component.vm.$nextTick()
+      await getVM(component).handleDeprecate?.()
+
+      expect(mockAddOperation).not.toHaveBeenCalled()
+    })
+
+    it('handleDeprecate does nothing when message is empty', async () => {
+      const component = await mountSuspended(DeprecatePackageModal, {
+        props: { packageName: 'pkg' },
+        ...mountOptions,
+      })
+
+      await getVM(component).handleDeprecate?.()
+
+      expect(mockAddOperation).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('handleDeprecate flow', () => {
+    it('calls addOperation with correct params (no version)', async () => {
+      const op = createMockOperation({ status: 'completed' })
+      mockAddOperation.mockResolvedValue(op)
+      mockApproveOperation.mockResolvedValue(true)
+      mockExecuteOperations.mockResolvedValue({ success: true })
+      mockRefreshState.mockImplementation(() => {
+        mockState.value = { operations: [op] }
+        return Promise.resolve()
+      })
+
+      const component = await mountSuspended(DeprecatePackageModal, {
+        props: { packageName: 'test-package' },
+        ...mountOptions,
+      })
+
+      await component.find('#deprecate-message').setValue('  use other-pkg  ')
+      await component.vm.$nextTick()
+      await getVM(component).handleDeprecate?.()
+
+      expect(mockAddOperation).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'package:deprecate',
+          params: { pkg: 'test-package', message: 'use other-pkg' },
+          description: 'Deprecate test-package',
+          command: 'npm deprecate test-package "use other-pkg"',
+        }),
+      )
+      expect(mockApproveOperation).toHaveBeenCalledWith('op-1')
+      expect(mockExecuteOperations).toHaveBeenCalled()
+      expect(mockRefreshState).toHaveBeenCalled()
+    })
+
+    it('calls addOperation with version when version is set', async () => {
+      const op = createMockOperation({
+        status: 'completed',
+        params: { pkg: 'pkg', message: 'msg', version: '1.0.0' },
+      })
+      mockAddOperation.mockResolvedValue(op)
+      mockApproveOperation.mockResolvedValue(true)
+      mockExecuteOperations.mockResolvedValue({ success: true })
+      mockRefreshState.mockImplementation(() => {
+        mockState.value = { operations: [op] }
+        return Promise.resolve()
+      })
+
+      const component = await mountSuspended(DeprecatePackageModal, {
+        props: { packageName: 'pkg', version: '1.0.0' },
+        ...mountOptions,
+      })
+
+      await component.find('#deprecate-message').setValue('deprecated')
+      await component.vm.$nextTick()
+      await getVM(component).handleDeprecate?.()
+
+      expect(mockAddOperation).toHaveBeenCalledWith(
+        expect.objectContaining({
+          params: expect.objectContaining({ pkg: 'pkg', message: 'deprecated', version: '1.0.0' }),
+          description: 'Deprecate pkg@1.0.0',
+          command: 'npm deprecate pkg@1.0.0 "deprecated"',
+        }),
+      )
+    })
+
+    it('shows success state when operation completes successfully', async () => {
+      const op = createMockOperation({ status: 'completed' })
+      mockAddOperation.mockResolvedValue(op)
+      mockApproveOperation.mockResolvedValue(true)
+      mockExecuteOperations.mockResolvedValue({ success: true })
+      mockRefreshState.mockImplementation(() => {
+        mockState.value = { operations: [op] }
+        return Promise.resolve()
+      })
+
+      const component = await mountSuspended(DeprecatePackageModal, {
+        props: { packageName: 'pkg' },
+        ...mountOptions,
+      })
+
+      await component.find('#deprecate-message').setValue('use other')
+      await component.vm.$nextTick()
+      await getVM(component).handleDeprecate?.()
+
+      await component.vm.$nextTick()
+      const success = getVM(component).deprecateSuccess?.value ?? getVM(component).deprecateSuccess
+      expect(success).toBe(true)
+      expect(component.html()).toMatch(/Package deprecated|deprecated/i)
+    })
+
+    it('shows error when operation fails without requiresOtp', async () => {
+      const op = createMockOperation({
+        status: 'failed',
+        result: { stdout: '', stderr: 'EPERM', exitCode: 1 },
+      })
+      mockAddOperation.mockResolvedValue(op)
+      mockApproveOperation.mockResolvedValue(true)
+      mockExecuteOperations.mockResolvedValue({ success: true })
+      mockRefreshState.mockImplementation(() => {
+        mockState.value = { operations: [op] }
+        return Promise.resolve()
+      })
+
+      const component = await mountSuspended(DeprecatePackageModal, {
+        props: { packageName: 'pkg' },
+        ...mountOptions,
+      })
+
+      await component.find('#deprecate-message').setValue('msg')
+      await component.vm.$nextTick()
+      await getVM(component).handleDeprecate?.()
+
+      await component.vm.$nextTick()
+      const vm = getVM(component)
+      expect(vm.deprecateError?.value ?? vm.deprecateError).toBe('EPERM')
+      expect(vm.deprecateSuccess?.value ?? vm.deprecateSuccess).toBe(false)
+    })
+
+    it('closes modal and opens connector when operation fails with requiresOtp', async () => {
+      const op = createMockOperation({
+        status: 'failed',
+        result: { stdout: '', stderr: '', exitCode: 1, requiresOtp: true },
+      })
+      mockAddOperation.mockResolvedValue(op)
+      mockApproveOperation.mockResolvedValue(true)
+      mockExecuteOperations.mockResolvedValue({ success: true })
+      mockRefreshState.mockImplementation(() => {
+        mockState.value = { operations: [op] }
+        return Promise.resolve()
+      })
+
+      const component = await mountSuspended(DeprecatePackageModal, {
+        props: { packageName: 'pkg' },
+        ...mountOptions,
+      })
+      const modalStub = component.findComponent({ name: 'ModalStub' })
+
+      await component.find('#deprecate-message').setValue('msg')
+      await component.vm.$nextTick()
+      await getVM(component).handleDeprecate?.()
+
+      await component.vm.$nextTick()
+      expect(modalStub.vm.close).toHaveBeenCalled()
+      expect(mockConnectorModalOpen).toHaveBeenCalled()
+    })
+
+    it('closes modal and opens connector when operation is not completed', async () => {
+      const op = createMockOperation({ status: 'pending' })
+      mockAddOperation.mockResolvedValue(op)
+      mockApproveOperation.mockResolvedValue(true)
+      mockExecuteOperations.mockResolvedValue({ success: true })
+      mockRefreshState.mockImplementation(() => {
+        mockState.value = { operations: [op] }
+        return Promise.resolve()
+      })
+
+      const component = await mountSuspended(DeprecatePackageModal, {
+        props: { packageName: 'pkg' },
+        ...mountOptions,
+      })
+      const modalStub = component.findComponent({ name: 'ModalStub' })
+
+      await component.find('#deprecate-message').setValue('msg')
+      await component.vm.$nextTick()
+      await getVM(component).handleDeprecate?.()
+
+      await component.vm.$nextTick()
+      expect(modalStub.vm.close).toHaveBeenCalled()
+      expect(mockConnectorModalOpen).toHaveBeenCalled()
+    })
+
+    it('sets deprecateError when addOperation throws', async () => {
+      mockAddOperation.mockRejectedValue(new Error('Network error'))
+
+      const component = await mountSuspended(DeprecatePackageModal, {
+        props: { packageName: 'pkg' },
+        ...mountOptions,
+      })
+
+      await component.find('#deprecate-message').setValue('msg')
+      await component.vm.$nextTick()
+      await getVM(component).handleDeprecate?.()
+
+      await component.vm.$nextTick()
+      expect(getVM(component).deprecateError?.value ?? getVM(component).deprecateError).toBe(
+        'Network error',
+      )
+    })
+
+    it('escapes double quotes in command', async () => {
+      const op = createMockOperation({ status: 'completed' })
+      mockAddOperation.mockResolvedValue(op)
+      mockApproveOperation.mockResolvedValue(true)
+      mockExecuteOperations.mockResolvedValue({ success: true })
+      mockRefreshState.mockImplementation(() => {
+        mockState.value = { operations: [op] }
+        return Promise.resolve()
+      })
+
+      const component = await mountSuspended(DeprecatePackageModal, {
+        props: { packageName: 'pkg' },
+        ...mountOptions,
+      })
+
+      await component.find('#deprecate-message').setValue('say "hello"')
+      await component.vm.$nextTick()
+      await getVM(component).handleDeprecate?.()
+
+      expect(mockAddOperation).toHaveBeenCalledWith(
+        expect.objectContaining({
+          command: 'npm deprecate pkg "say \\"hello\\""',
+        }),
+      )
+    })
+  })
+})