From c90beb52893fbbdeb7f2b84ed93522d4071561a4 Mon Sep 17 00:00:00 2001
From: Pine <wwork.wss@icloud.com>
Date: Fri, 14 Aug 2026 23:01:57 +0800
Subject: [PATCH] style(plugin-inventory): align install/toggle controls with
 the design system

The install input matched the catalog search field, and the install button plus
the enable/disable toggles now use the shared Button primitive (primary /
outline sm), replacing unstyled native buttons. The install hint clarifies that
registry installs require a published npm package.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../PluginInventorySettingsTab.module.css     | 17 +++++++++++----
 .../src/client/PluginInventorySettingsTab.tsx | 21 +++++++++++--------
 .../src/client/locales.ts                     |  2 +-
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/packages/client/ui-settings-plugin-inventory/src/client/PluginInventorySettingsTab.module.css b/packages/client/ui-settings-plugin-inventory/src/client/PluginInventorySettingsTab.module.css
index 48e79bde19..fc20685ad7 100644
--- a/packages/client/ui-settings-plugin-inventory/src/client/PluginInventorySettingsTab.module.css
+++ b/packages/client/ui-settings-plugin-inventory/src/client/PluginInventorySettingsTab.module.css
@@ -57,12 +57,14 @@
   pointer-events: none;
 }
 
-.search input {
+/* The catalog search and the install field share the same field geometry. */
+.search input,
+.installInput {
   width: 100%;
   height: 36px;
   border: 1px solid var(--dsw-alias-border-l2);
   border-radius: 8px;
-  padding: 0 34px 0 36px;
+  padding: 0 12px;
   outline: none;
   background: var(--dsw-alias-bg-layer-1);
   color: var(--dsw-alias-label-primary);
@@ -70,11 +72,18 @@
   font-size: 13px;
 }
 
-.search input::placeholder {
+/* The search field reserves leading space for its absolutely-placed icon. */
+.search input {
+  padding: 0 34px 0 36px;
+}
+
+.search input::placeholder,
+.installInput::placeholder {
   color: var(--dsw-alias-label-tertiary);
 }
 
-.search input:focus-visible {
+.search input:focus-visible,
+.installInput:focus-visible {
   border-color: var(--dsw-alias-state-business-primary);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-state-business-primary) 18%, transparent);
 }
diff --git a/packages/client/ui-settings-plugin-inventory/src/client/PluginInventorySettingsTab.tsx b/packages/client/ui-settings-plugin-inventory/src/client/PluginInventorySettingsTab.tsx
index c0b2096249..c20e50f2b8 100644
--- a/packages/client/ui-settings-plugin-inventory/src/client/PluginInventorySettingsTab.tsx
+++ b/packages/client/ui-settings-plugin-inventory/src/client/PluginInventorySettingsTab.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useId, useMemo, useState, type ReactNode } from 'react'
 import type { InstallResult, InstallSpec, PluginInventorySnapshot } from '@deepseek-ai/dsh-api-remotes/client'
 import {
+  Button,
   IconChevronDownOutline14,
   IconSearchOutline16,
 } from '@deepseek-ai/dsh-client-ui-primitives'
@@ -197,27 +198,29 @@ export function PluginInventorySettingsTab({
               ) : null}
             </dl>
             {!entry.enabled ? (
-              <button
+              <Button
                 className={css.toggle}
-                type="button"
+                variant="outline"
+                size="sm"
                 disabled={busy === entry.entryId}
                 aria-busy={busy === entry.entryId || undefined}
                 onClick={() => { toggle(entry.entryId, true) }}
               >
                 {busy === entry.entryId ? t('toggling') : t('enable')}
-              </button>
+              </Button>
             ) : entry.protected ? (
               <p className={css.required}>{t('required')}</p>
             ) : (
-              <button
+              <Button
                 className={css.toggle}
-                type="button"
+                variant="outline"
+                size="sm"
                 disabled={busy === entry.entryId}
                 aria-busy={busy === entry.entryId || undefined}
                 onClick={() => { toggle(entry.entryId, false) }}
               >
                 {busy === entry.entryId ? t('toggling') : t('disable')}
-              </button>
+              </Button>
             )}
           </div>
         ) : null}
@@ -248,14 +251,14 @@ export function PluginInventorySettingsTab({
                 onChange={(event) => { setSpec(event.currentTarget.value) }}
                 onKeyDown={(event) => { if (event.key === 'Enter') installRegistry() }}
               />
-              <button
-                type="button"
+              <Button
                 className={css.installAction}
+                variant="primary"
                 disabled={installBusy || spec.trim().length === 0}
                 onClick={installRegistry}
               >
                 {installBusy ? t('installing') : t('install')}
-              </button>
+              </Button>
             </div>
             {installNote !== null
               ? <p className={installNote.kind === 'error' ? css.installError : css.installRestart} role="status">{installNote.text}</p>
diff --git a/packages/client/ui-settings-plugin-inventory/src/client/locales.ts b/packages/client/ui-settings-plugin-inventory/src/client/locales.ts
index b156e3deea..d158bbc902 100644
--- a/packages/client/ui-settings-plugin-inventory/src/client/locales.ts
+++ b/packages/client/ui-settings-plugin-inventory/src/client/locales.ts
@@ -25,7 +25,7 @@ export const zh = {
   toggling: '切换中…',
   required: '应用必需插件，不可切换',
   installPlugin: '安装插件',
-  installSpec: '输入插件包名，如 @scope/plugin',
+  installSpec: '输入插件包名，目前只支持已发布npm的包；如 @scope/plugin',
   install: '安装',
   installing: '安装中…',
   restartRequired: '已安装，重启后生效',