Merge branch 'feat/plugin-host-interactions' into integration/plugin-capabilities-ui

application/i18n/locales/en/core.ts

@@ -1282,6 +1282,11 @@ Highlight the focused split pane:
   "settings.plugins.market.offline": "Registry unavailable. Showing the last valid catalog or bundled examples. Installation is unavailable until refresh succeeds.",
   "settings.plugins.manager.details": "View details",
   "settings.plugins.manager.noDescription": "No description provided.",
+  "settings.plugins.status": "Notices: {count}",
+  "settings.plugins.info": "Plugin information",
+  "settings.plugins.manager.noVaultShort": "Secret storage unavailable",
+  "settings.plugins.market.offlineShort": "Offline catalog · installation unavailable",
+  "settings.plugins.market.readmeInfo": "About this README",
   "settings.plugins.market.installed": "Installed",
   "settings.plugins.market.sourceBadge": "Source example",
   "settings.plugins.market.title": "Marketplace",

application/i18n/locales/es/core.ts

@@ -1282,6 +1282,11 @@ Resalta el panel dividido enfocado:
   "settings.plugins.market.offline": "El registro no está disponible. Se muestra el último catálogo válido o los ejemplos incluidos. La instalación requiere una actualización correcta.",
   "settings.plugins.manager.details": "Ver detalles",
   "settings.plugins.manager.noDescription": "No se proporcionó una descripción.",
+  "settings.plugins.status": "{count} avisos",
+  "settings.plugins.info": "Información de plugins",
+  "settings.plugins.manager.noVaultShort": "Almacenamiento de secretos no disponible",
+  "settings.plugins.market.offlineShort": "Catálogo sin conexión · instalación no disponible",
+  "settings.plugins.market.readmeInfo": "Acerca de este README",
   "settings.plugins.market.installed": "Instalado",
   "settings.plugins.market.sourceBadge": "Ejemplo de código",
   "settings.plugins.market.title": "Catálogo",

application/i18n/locales/ru/core.ts

@@ -1177,6 +1177,11 @@ export const ruCoreMessages: Messages = {
   "settings.plugins.market.offline": "Реестр недоступен. Показан последний корректный каталог или встроенные примеры. Для установки необходимо успешно обновить каталог.",
   "settings.plugins.manager.details": "Подробнее",
   "settings.plugins.manager.noDescription": "Описание не предоставлено.",
+  "settings.plugins.status": "Уведомления: {count}",
+  "settings.plugins.info": "Информация о плагинах",
+  "settings.plugins.manager.noVaultShort": "Хранилище секретов недоступно",
+  "settings.plugins.market.offlineShort": "Каталог офлайн · установка недоступна",
+  "settings.plugins.market.readmeInfo": "Об этом README",
   "settings.plugins.market.installed": "Установлен",
   "settings.plugins.market.sourceBadge": "Пример исходного кода",
   "settings.plugins.market.title": "Каталог",

application/i18n/locales/zh-CN/core.ts

@@ -1197,6 +1197,11 @@ Vaults 标签保持扁平，不使用这块背景。
   "settings.plugins.market.offline": "官方目录暂时不可用，正在显示上次有效目录或内置示例。刷新成功前不能从市场安装。",
   "settings.plugins.manager.details": "查看详情",
   "settings.plugins.manager.noDescription": "作者暂未提供功能简介。",
+  "settings.plugins.status": "{count} 项提醒",
+  "settings.plugins.info": "插件说明",
+  "settings.plugins.manager.noVaultShort": "凭据存储不可用",
+  "settings.plugins.market.offlineShort": "目录离线 · 暂不可安装",
+  "settings.plugins.market.readmeInfo": "README 来源说明",
   "settings.plugins.market.installed": "已安装",
   "settings.plugins.market.sourceBadge": "源码示例",
   "settings.plugins.market.title": "插件市场",

application/i18n/locales/zh-TW/core.ts

@@ -1206,6 +1206,11 @@ Vaults 分頁維持扁平，不使用這塊背景。
   "settings.plugins.market.offline": "官方目錄暫時無法使用，正在顯示上次有效目錄或內建範例。重新整理成功前無法從市場安裝。",
   "settings.plugins.manager.details": "查看詳情",
   "settings.plugins.manager.noDescription": "作者尚未提供功能簡介。",
+  "settings.plugins.status": "{count} 項提醒",
+  "settings.plugins.info": "外掛說明",
+  "settings.plugins.manager.noVaultShort": "憑據儲存無法使用",
+  "settings.plugins.market.offlineShort": "目錄離線 · 暫時無法安裝",
+  "settings.plugins.market.readmeInfo": "README 來源說明",
   "settings.plugins.market.installed": "已安裝",
   "settings.plugins.market.sourceBadge": "原始碼範例",
   "settings.plugins.market.title": "插件市場",

components/settings/tabs/PluginInfo.interaction.test.tsx

@@ -0,0 +1,114 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { JSDOM } from 'jsdom';
+
+test('information previews on hover/focus, pins on click and Escape returns focus without closing the manager', async () => {
+  const dom = new JSDOM('<!doctype html><html><body><div id="root"></div></body></html>', { pretendToBeVisual: true, url: 'http://localhost' });
+  const previous = new Map<string, PropertyDescriptor | undefined>();
+  const install = (key: string, value: unknown) => {
+    previous.set(key, Object.getOwnPropertyDescriptor(globalThis, key));
+    Object.defineProperty(globalThis, key, { configurable: true, writable: true, value });
+  };
+  for (const key of ['window', 'document', 'navigator', 'HTMLElement', 'HTMLInputElement', 'Element', 'Node', 'NodeFilter', 'MutationObserver', 'CustomEvent', 'Event', 'KeyboardEvent', 'MouseEvent']) {
+    install(key, key === 'window' ? dom.window : dom.window[key as keyof typeof dom.window]);
+  }
+  install('getComputedStyle', dom.window.getComputedStyle.bind(dom.window));
+  install('requestAnimationFrame', dom.window.requestAnimationFrame.bind(dom.window));
+  install('cancelAnimationFrame', dom.window.cancelAnimationFrame.bind(dom.window));
+  install('IS_REACT_ACT_ENVIRONMENT', true);
+  const { default: React, act, useState } = await import('react');
+  const { createRoot } = await import('react-dom/client');
+  const { PluginInfo } = await import('./PluginInfo');
+  const { PluginManagementDialog } = await import('./PluginManagementDialog');
+  const { I18nProvider } = await import('../../../application/i18n/I18nProvider');
+  const root = createRoot(document.getElementById('root')!);
+  const settle = (ms = 60) => new Promise((resolve) => setTimeout(resolve, ms));
+  try {
+    await act(async () => root.render(<I18nProvider locale="en"><PluginManagementDialog><PluginInfo label="Plugin help">Packages remain disabled until reviewed.</PluginInfo><button data-other>Other control</button></PluginManagementDialog></I18nProvider>));
+    await act(async () => { document.querySelector<HTMLButtonElement>('button')!.click(); await settle(); });
+    const trigger = document.querySelector<HTMLButtonElement>('button[aria-label="Plugin help"]')!;
+    const other = document.querySelector<HTMLButtonElement>('[data-other]')!;
+    assert.ok(trigger); assert.equal(trigger.getAttribute('title'), null, 'not a native title-only hint');
+    await act(async () => { other.focus(); await settle(); });
+    const hover = new MouseEvent('pointermove', { bubbles: true });
+    Object.defineProperty(hover, 'pointerType', { value: 'mouse' });
+    await act(async () => { trigger.dispatchEvent(hover); await settle(260); });
+    assert.match(document.querySelector('[role="tooltip"]')?.textContent ?? '', /Packages remain disabled/);
+    await act(async () => { trigger.focus(); await settle(); });
+    assert.ok(document.querySelector('[role="tooltip"]'));
+    await act(async () => { trigger.click(); await settle(); });
+    const pinned = document.querySelector<HTMLElement>('[role="dialog"][aria-label="Plugin help"]');
+    assert.ok(pinned, 'click exposes a persistent readable popover');
+    assert.equal(document.querySelector('[role="tooltip"]'), null);
+    await act(async () => { pinned.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })); await settle(); });
+    assert.equal(document.querySelector('[role="dialog"][aria-label="Plugin help"]'), null);
+    assert.equal(document.querySelectorAll('[role="dialog"]').length, 1, 'Escape closes only the information layer');
+    assert.equal(document.activeElement, trigger);
+    assert.equal(Boolean(document.querySelector('[role="tooltip"]')), false, 'Escape does not immediately reopen the focus preview');
+    await act(async () => { other.focus(); trigger.focus(); await settle(); });
+    assert.ok(document.querySelector('[role="tooltip"]'), 'a subsequent deliberate focus still previews help');
+
+    const { PluginMarketplaceContent } = await import('./PluginMarketplace');
+    const entry = { id: 'com.example.guide', name: 'Guide', author: 'Example', version: '1.0.0', license: 'MIT', repository: 'example/plugin', commit: 'a'.repeat(40), description: 'Synthetic metadata',
+      manifest: { id: 'com.example.guide', name: 'Guide', publisher: 'Example', main: { browser: 'index.js' }, engines: { netcatty: '*', api: '0.1.0-internal' } },
+    } as NetcattyPluginCatalogEntry;
+    const catalog = { entries: [entry], source: 'registry', listStatus: 'ready', listError: null, readme: '# Guide', readmeStatus: 'ready', readmeError: null, error: null, busy: false, retryList() {}, retryReadme() {}, async install() {} } as ReturnType<typeof import('../../../application/state/usePluginCatalog').usePluginCatalog>;
+    function Browser() {
+      const [selected, setSelected] = useState<string | null>(null);
+      const [toolbar, setToolbar] = useState<HTMLDivElement | null>(null);
+      return <I18nProvider locale="en"><div data-toolbar ref={setToolbar} /><div data-settings-scroll-pane><PluginMarketplaceContent catalog={catalog} installed={[]} selected={selected} onSelect={setSelected} toolbarContainer={toolbar} /></div></I18nProvider>;
+    }
+    await act(async () => { root.render(<Browser />); await settle(); });
+    const pane = document.querySelector<HTMLElement>('[data-settings-scroll-pane]')!;
+    assert.match(document.querySelector('[data-toolbar]')?.textContent ?? '', /Refresh/);
+    pane.scrollTop = 450;
+    await act(async () => { document.querySelector<HTMLButtonElement>('[data-plugin-id]')!.click(); await settle(); });
+    assert.equal(document.querySelector('.plugin-marketplace-catalog'), null, 'detail replaces the candidate list');
+    assert.doesNotMatch(document.querySelector('[data-toolbar]')?.textContent ?? '', /Refresh/, 'list refresh stays out of detail');
+    assert.equal(pane.scrollTop, 0);
+    assert.equal(document.activeElement?.tagName, 'H4');
+    assert.equal(document.activeElement?.textContent, 'Guide');
+    const back = Array.from(document.querySelectorAll('button')).find((button) => button.textContent?.includes('All plugins'))!;
+    await act(async () => { back.click(); await settle(); });
+    assert.equal(pane.scrollTop, 450);
+    assert.equal(document.activeElement?.getAttribute('data-plugin-id'), entry.id);
+    assert.match(document.querySelector('[data-toolbar]')?.textContent ?? '', /Refresh/);
+
+    const { PluginStatus } = await import('./PluginStatus');
+    function StatusHarness() {
+      const [offline, setOffline] = useState(true);
+      const [noVault, setNoVault] = useState(true);
+      return <I18nProvider locale="en"><PluginStatus noVault={noVault} offlineError={offline ? 'Network unavailable' : null} retry={() => setOffline(false)} /><button onClick={() => setNoVault(false)}>Restore vault</button></I18nProvider>;
+    }
+    await act(async () => { root.render(<StatusHarness />); await settle(); });
+    const status = document.querySelector<HTMLButtonElement>('button[aria-label$="Notices: 2"]')!;
+    await act(async () => { status.focus(); await settle(); });
+    assert.match(document.querySelector('[role="tooltip"]')?.textContent ?? '', /Network unavailable/);
+    assert.equal(document.querySelector('[role="tooltip"] button'), null, 'hover preview never contains an interactive Retry');
+    await act(async () => { status.click(); await settle(); });
+    const retry = document.querySelector<HTMLButtonElement>('[role="dialog"] button')!;
+    assert.equal(retry.textContent, 'Retry');
+    assert.equal(status.textContent, '2', 'only the number badge is visible, not a second text label');
+    assert.equal(document.querySelectorAll('button[aria-label*="Notices:"]').length, 1);
+    assert.match(document.querySelector('[role="dialog"]')?.textContent ?? '', /Updates are manual/);
+    assert.ok(document.querySelector('[role="dialog"] hr'));
+    await act(async () => { retry.click(); await settle(); });
+    assert.ok(document.querySelector('button[aria-label$="Notices: 1"]'));
+    assert.doesNotMatch(document.querySelector('[role="dialog"]')?.textContent ?? '', /Network unavailable/);
+    await act(async () => { document.querySelector('[role="dialog"]')!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })); await settle(); });
+    assert.match(document.activeElement?.getAttribute('aria-label') ?? '', /Notices: 1$/);
+    await act(async () => { Array.from(document.querySelectorAll('button')).find((button) => button.textContent === 'Restore vault')!.click(); await settle(); });
+    const healthy = document.querySelector<HTMLButtonElement>('button[aria-label="Plugin information"]')!;
+    assert.ok(healthy, 'one information control remains when healthy');
+    assert.equal(healthy.querySelector('span[aria-hidden="true"]'), null, 'healthy control has no count badge');
+    await act(async () => { healthy.click(); await settle(); });
+    assert.match(document.querySelector('[role="dialog"]')?.textContent ?? '', /Updates are manual/);
+    await act(async () => { document.querySelector('[role="dialog"]')!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })); await settle(); });
+  } finally {
+    await act(async () => root.unmount());
+    dom.window.close();
+    for (const [key, descriptor] of previous) {
+      if (descriptor) Object.defineProperty(globalThis, key, descriptor); else Reflect.deleteProperty(globalThis, key);
+    }
+  }
+});

components/settings/tabs/PluginInfo.tsx

@@ -0,0 +1,25 @@
+import React, { useRef, useState } from 'react';
+import { Info } from 'lucide-react';
+import { Button } from '../../ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip';
+
+/** Hover/focus previews explanatory text; click pins it in the existing accessible popover. */
+export function PluginInfo({ label, children, badgeCount, previewContent }: { label: string; children: React.ReactNode; badgeCount?: number; previewContent?: React.ReactNode }) {
+  const [pinned, setPinned] = useState(false);
+  const [preview, setPreview] = useState(false);
+  const suppressFocusPreview = useRef(false);
+  return <Popover open={pinned} onOpenChange={(open) => { setPinned(open); setPreview(false); }}>
+    <TooltipProvider delayDuration={200}>
+      <Tooltip open={!pinned && preview} onOpenChange={(open) => { if (!open || !suppressFocusPreview.current) setPreview(open); }}>
+        <TooltipTrigger asChild><PopoverTrigger asChild>
+          <Button type="button" variant="ghost" size="sm" className="relative h-8 w-8 shrink-0 p-0 text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring" aria-label={label} onBlur={() => { suppressFocusPreview.current = false; }} onPointerMove={() => { suppressFocusPreview.current = false; }}>
+            <Info size={15} />{Boolean(badgeCount) && <span aria-hidden="true" className="absolute right-0 top-0 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-muted px-0.5 text-[9px] font-medium leading-none text-foreground">{badgeCount}</span>}
+          </Button>
+        </PopoverTrigger></TooltipTrigger>
+        <TooltipContent className="max-w-xs space-y-2 bg-popover p-3 text-xs leading-5 text-popover-foreground shadow-sm">{previewContent ?? children}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+    <PopoverContent onEscapeKeyDown={() => { suppressFocusPreview.current = true; }} aria-label={label} align="end" className="max-w-xs space-y-2 text-xs leading-5">{children}</PopoverContent>
+  </Popover>;
+}

components/settings/tabs/PluginMarketplace.interaction.test.tsx

@@ -1,5 +1,6 @@
 import assert from 'node:assert/strict';
-import test from 'node:test';
+import test, { before, after } from 'node:test';
+import { JSDOM } from 'jsdom';
 import React, { useState } from 'react';
 import { act, create, type ReactTestRenderer } from 'react-test-renderer';
 import { renderToStaticMarkup } from 'react-dom/server';
@@ -8,6 +9,19 @@ import { I18nProvider } from '../../../application/i18n/I18nProvider';
 import { PluginMarketplaceContent } from './PluginMarketplace';
 import type { usePluginCatalog } from '../../../application/state/usePluginCatalog';
 
+const infoDom = new JSDOM('<!doctype html><html><body></body></html>');
+const previousWindow = Object.getOwnPropertyDescriptor(globalThis, 'window');
+const previousDocument = Object.getOwnPropertyDescriptor(globalThis, 'document');
+before(() => {
+  Object.defineProperty(globalThis, 'window', { configurable: true, value: infoDom.window });
+  Object.defineProperty(globalThis, 'document', { configurable: true, value: infoDom.window.document });
+});
+after(() => {
+  infoDom.window.close();
+  if (previousWindow) Object.defineProperty(globalThis, 'window', previousWindow); else Reflect.deleteProperty(globalThis, 'window');
+  if (previousDocument) Object.defineProperty(globalThis, 'document', previousDocument); else Reflect.deleteProperty(globalThis, 'document');
+});
+
 const entries = ['Alpha', 'Beta'].map((name) => ({
   id: `com.example.${name.toLowerCase()}`, name, author: 'Example', version: '1.0.0', license: 'MIT',
   description: `${name} local utility`, repository: 'example/plugins', commit: 'a'.repeat(40),
@@ -39,16 +53,13 @@ test('catalog keeps search during selection/back, switches detail, and displays
     assert.equal(cards().length, 1);
     await act(async () => cards()[0].props.onClick());
     assert.equal(renderer.root.findByType('article').props['aria-label'], 'Alpha');
-    assert.equal(cards()[0].props['aria-current'], 'true');
+    assert.equal(cards().length, 0, 'detail replaces the entire grid at every width');
+    assert.equal(renderer.root.findAllByType('input').length, 0);
     const detailText = JSON.stringify(renderer.toJSON());
     assert.match(detailText, /0.9.0/);
     assert.match(detailText, /Disabled/);
     assert.match(detailText, /Incompatible with this host/);
     assert.match(detailText, /Last recorded error/);
-    assert.match(cards()[0].props.className, /bg-primary\/10/);
-    assert.match(cards()[0].props.className, /border-primary\/40/);
-    assert.doesNotMatch(cards()[0].props.className, /bg-accent|text-accent-foreground/);
-    assert.match(detailText, /1 plugins/);
     assert.equal(renderer.root.findAllByType('details').length, 0, 'permissions are not hidden in a disclosure');
     assert.equal(renderer.root.findAll((node) => node.type === 'button' && node.children.includes('Install this version (disabled)')).length, 0, 'source-only cards have no install action');
     const back = () => renderer.root.findAllByType('button').find((node) => node.children.includes('All plugins'))!;
@@ -56,15 +67,12 @@ test('catalog keeps search during selection/back, switches detail, and displays
     assert.equal(renderer.root.findAllByType('article').length, 0);
     assert.equal(input().props.value, 'Alpha');
     await act(async () => input().props.onChange({ target: { value: '' } }));
-    await act(async () => cards()[0].props.onClick());
     await act(async () => cards()[1].props.onClick());
     assert.equal(renderer.root.findByType('article').props['aria-label'], 'Beta');
-    assert.equal(cards()[1].props['aria-current'], 'true');
-    assert.equal(cards()[0].props['aria-current'], undefined);
+    assert.equal(cards().length, 0);
+    await act(async () => back().props.onClick());
     await act(async () => input().props.onChange({ target: { value: 'no match' } }));
     assert.equal(cards().length, 0);
-    assert.equal(renderer.root.findByType('article').props['aria-label'], 'Beta', 'filtering does not erase the selected detail');
-    await act(async () => back().props.onClick());
     assert.equal(input().props.value, 'no match');
     await act(async () => renderer.unmount());
   } finally {
@@ -81,29 +89,29 @@ test('README failure leaves the permissions and source visible, before the failu
   assert.match(html, /Compatibility and permissions/);
   assert.match(html, /settings.read/);
   assert.match(html, /not a grant/);
-  assert.match(html, /Build with the local CLI/);
+  assert.match(html, /Source example/);
   assert.ok(html.indexOf('settings.read') < html.indexOf('Network unavailable'));
   assert.match(html, /Retry/);
   assert.doesNotMatch(html, /<details/);
 });
 
-test('responsive layout is scoped to marketplace content width, with a narrow detail-only fallback', () => {
+test('cards use subtle shadows and details have no breakpoint-specific columns or nested scroller', () => {
   const css = readFileSync(new URL('./plugin-marketplace.css', import.meta.url), 'utf8');
-  assert.match(css, /\.plugin-marketplace \{ container-type: inline-size;/);
-  assert.match(css, /@container \(min-width: 820px\)/);
-  assert.match(css, /grid-template-columns: 248px minmax\(0, 1fr\)/);
-  assert.match(css, /plugin-marketplace-browser--selected \.plugin-marketplace-catalog \{ display: none;/);
+  assert.match(css, /box-shadow: 0 1px 4px/);
+  assert.match(css, /\.dark \.plugin-card/);
+  assert.doesNotMatch(css, /@container|248px|max-height|overflow-y/);
 });
 
-test('narrow detail starts at the top and back restores the settings scroll and card focus', async () => {
+test('full-page detail starts at the top and back restores the settings scroll and card focus', async () => {
   const previousRaf = globalThis.requestAnimationFrame;
-  globalThis.requestAnimationFrame = (callback) => { callback(0); return 0; };
+  const frames: FrameRequestCallback[] = [];
+  globalThis.requestAnimationFrame = (callback) => { frames.push(callback); return frames.length; };
   const actGlobal = globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean };
   const previousActEnvironment = actGlobal.IS_REACT_ACT_ENVIRONMENT;
   actGlobal.IS_REACT_ACT_ENVIRONMENT = true;
   const pane = { scrollTop: 450 };
   let focused = false;
-  const list = { scrollTop: 0, closest: (selector: string) => selector === '.plugin-marketplace' ? { clientWidth: 700 } : pane,
+  const list = { scrollTop: 0, closest: (selector: string) => selector === '.plugin-marketplace' ? { clientWidth: 1100 } : pane,
     querySelectorAll: () => [{ dataset: { pluginId: entries[0].id }, focus: () => { focused = true; } }] };
   let renderer!: ReactTestRenderer;
   function Harness() {
@@ -111,12 +119,14 @@ test('narrow detail starts at the top and back restores the settings scroll and
     return <I18nProvider locale="en"><PluginMarketplaceContent catalog={catalog} selected={selected} onSelect={setSelected} installed={[]} /></I18nProvider>;
   }
   try {
-    await act(async () => { renderer = create(<Harness />, { createNodeMock: (element) => element.type === 'div' ? list : { scrollTo() {}, focus() {} } }); });
+    await act(async () => { renderer = create(<Harness />, { createNodeMock: (element) => element.type === 'div' && (element.props as { className?: string }).className?.includes('plugin-marketplace-catalog') ? list : null }); });
     const card = renderer.root.findAll((node) => node.type === 'button' && node.props['data-plugin-id'] === entries[0].id)[0];
     await act(async () => card.props.onClick());
+    frames.splice(0).forEach((frame) => frame(0));
     assert.equal(pane.scrollTop, 0);
     const back = renderer.root.findAllByType('button').find((node) => node.children.includes('All plugins'))!;
     await act(async () => back.props.onClick());
+    frames.splice(0).forEach((frame) => frame(0));
     assert.equal(pane.scrollTop, 450);
     assert.equal(focused, true);
     await act(async () => renderer.unmount());
@@ -131,11 +141,10 @@ test('offline catalog warning keeps details visible and disables market installa
   const html = renderToStaticMarkup(<I18nProvider locale="en"><PluginMarketplaceContent
     catalog={{ ...catalog, entries: [downloadable], listError: 'Registry offline', source: 'cached' }}
     selected={downloadable.id} onSelect={() => {}} installed={[]} /></I18nProvider>);
-  assert.match(html, /Registry offline/);
-  assert.match(html, /Installation is unavailable until refresh succeeds/);
+  assert.match(html, /Offline catalog · installation unavailable/);
   assert.match(html, /Compatibility and permissions/);
   assert.match(html, /<button[^>]*disabled=""[^>]*>Install this version/);
-  assert.match(html, /Retry/);
+  assert.match(html, /Notices: 1/);
 });
 
 test('manual refresh remains available after success and is disabled while loading', () => {
@@ -144,3 +153,12 @@ test('manual refresh remains available after success and is disabled while loadi
   const loading = renderToStaticMarkup(<I18nProvider locale="en"><PluginMarketplaceContent catalog={{ ...catalog, listStatus: 'loading' }} selected={null} onSelect={() => {}} installed={[]} /></I18nProvider>);
   assert.match(loading, /<button[^>]*disabled=""[^>]*>Refresh<\/button>/);
 });
+
+test('replacing an installed plugin discloses that its running version will stop beside the install action', () => {
+  const downloadable = { ...entries[0], artifact: { url: 'https://github.com/example/plugin/releases/download/v1/plugin.ncpkg', sha256: 'a'.repeat(64) } };
+  const html = renderToStaticMarkup(<I18nProvider locale="en"><PluginMarketplaceContent
+    catalog={{ ...catalog, entries: [downloadable] }} selected={downloadable.id} onSelect={() => {}}
+    installed={[{ id: downloadable.id, activeVersion: '0.9.0', enabled: true } as NetcattyInstalledPlugin]} /></I18nProvider>);
+  assert.match(html, /<p[^>]*>This replaces and stops the installed version\./);
+  assert.ok(html.indexOf('This replaces and stops') < html.indexOf('Install this version (disabled)'));
+});

components/settings/tabs/PluginMarketplace.tsx

@@ -1,3 +1,6 @@
+import { createPortal } from 'react-dom';
+import { PluginStatus } from './PluginStatus';
+import { PluginInfo } from './PluginInfo';
 import React, { useRef, useState } from 'react';
 import { PluginBrandIcon } from '../../plugins/PluginBrandIcon';
 import { ArrowLeft } from 'lucide-react';
@@ -5,18 +8,19 @@ import { useI18n } from '../../../application/i18n/I18nProvider';
 import { usePluginCatalog } from '../../../application/state/usePluginCatalog';
 import { Input } from '../../ui/input';
 import { Button } from '../../ui/button';
-import { SettingCard } from '../settings-ui';
 import { PluginPackageDetails } from './PluginPackageManager';
 import { PluginReadme } from './PluginReadme';
 
-export function PluginMarketplace({ installed = [] }: { installed?: NetcattyInstalledPlugin[] }) {
+export function PluginMarketplace({ installed = [], toolbarContainer, noVault }: { noVault?: boolean; installed?: NetcattyInstalledPlugin[]; toolbarContainer?: HTMLElement | null }) {
   const [selected, setSelected] = useState<string | null>(null);
   const catalog = usePluginCatalog(selected);
-  return <PluginMarketplaceContent catalog={catalog} installed={installed} selected={selected} onSelect={setSelected} />;
+  return <PluginMarketplaceContent catalog={catalog} installed={installed} selected={selected} onSelect={setSelected} toolbarContainer={toolbarContainer} noVault={noVault} />;
 }
 
 // The browser owns only presentation state; installation and README policy stay in the existing hook.
-export function PluginMarketplaceContent({ catalog, installed, selected, onSelect }: {
+export function PluginMarketplaceContent({ catalog, installed, selected, onSelect, toolbarContainer, noVault }: {
+  noVault?: boolean;
+  toolbarContainer?: HTMLElement | null;
   catalog: ReturnType<typeof usePluginCatalog>;
   installed: NetcattyInstalledPlugin[];
   selected: string | null;
@@ -25,23 +29,19 @@ export function PluginMarketplaceContent({ catalog, installed, selected, onSelec
   const { t } = useI18n();
   const [search, setSearch] = useState('');
   const listRef = useRef<HTMLDivElement>(null);
-  const detailRef = useRef<HTMLElement>(null);
+  const detailRef = useRef<HTMLHeadingElement>(null);
   const lastSelection = useRef<string | null>(null);
-  const listScroll = useRef(0);
   const pageScroll = useRef(0);
   const entry = catalog.entries.find((item) => item.id === selected);
   const filtered = filterPluginCatalog(catalog.entries, search);
   const installedEntry = installed.find((item) => item.id === entry?.id);
   const choose = (id: string) => {
-    listScroll.current = listRef.current?.scrollTop ?? 0;
-    if (!entry) pageScroll.current = listRef.current?.closest('[data-settings-scroll-pane]')?.scrollTop ?? 0;
+    const pane = listRef.current?.closest<HTMLElement>('[data-settings-scroll-pane]');
+    pageScroll.current = pane?.scrollTop ?? 0;
     lastSelection.current = id;
     onSelect(id);
     requestAnimationFrame(() => {
-      detailRef.current?.scrollTo?.(0, 0);
-      const container = listRef.current?.closest<HTMLElement>('.plugin-marketplace');
-      const pane = listRef.current?.closest('[data-settings-scroll-pane]');
-      if (container && container.clientWidth < 820 && pane) pane.scrollTop = 0;
+      if (pane) pane.scrollTop = 0;
       detailRef.current?.focus({ preventScroll: true });
     });
   };
@@ -49,7 +49,6 @@ export function PluginMarketplaceContent({ catalog, installed, selected, onSelec
     onSelect(null);
     requestAnimationFrame(() => {
       if (listRef.current) {
-        listRef.current.scrollTop = listScroll.current;
         const pane = listRef.current.closest('[data-settings-scroll-pane]');
         if (pane) pane.scrollTop = pageScroll.current;
         const button = Array.from(listRef.current.querySelectorAll<HTMLButtonElement>('[data-plugin-id]'))
@@ -58,14 +57,14 @@ export function PluginMarketplaceContent({ catalog, installed, selected, onSelec
       }
     });
   };
+  const refresh = !entry && <Button variant="outline" size="sm" disabled={catalog.listStatus === 'loading'} onClick={catalog.retryList}>{t('common.refresh')}</Button>;
   return <section className="plugin-marketplace space-y-4" aria-label={t('settings.plugins.market.title')}>
-    <div className="flex items-start justify-between gap-3"><p className="text-xs text-muted-foreground">{t('settings.plugins.market.note')}</p><Button variant="outline" size="sm" disabled={catalog.listStatus === 'loading'} onClick={catalog.retryList}>{t('common.refresh')}</Button></div>
-    {catalog.listStatus === 'ready' && catalog.listError && <div role="status" className="space-y-2 rounded-lg border p-3 text-xs text-muted-foreground"><p>{t('settings.plugins.market.offline')}</p><p>{catalog.listError}</p><Button variant="outline" size="sm" onClick={catalog.retryList}>{t('settings.plugins.market.retry')}</Button></div>}
+    {toolbarContainer ? createPortal(<><PluginStatus noVault={noVault} offlineError={catalog.listError} retry={catalog.retryList} />{refresh}</>, toolbarContainer) : <div className="flex items-center gap-2"><PluginStatus noVault={noVault} offlineError={catalog.listError} retry={catalog.retryList} />{refresh}</div>}
     {catalog.error && <p role="alert" className="text-xs text-destructive">{catalog.error}</p>}
-    <div className={`plugin-marketplace-browser${entry ? ' plugin-marketplace-browser--selected' : ''}`}>
-      <div className="plugin-marketplace-catalog space-y-3" ref={listRef}>
-        <Input value={search} onChange={(event) => setSearch(event.target.value)} placeholder={t('settings.plugins.market.search')} aria-label={t('settings.plugins.market.search')} />
-        {catalog.listStatus === 'ready' && <p className="text-xs text-muted-foreground" aria-live="polite">{t('settings.plugins.market.results', { count: filtered.length })}</p>}
+    <div className="plugin-marketplace-browser">
+      {!entry && <div className="plugin-marketplace-catalog space-y-3" ref={listRef}>
+        <div className="flex items-center gap-3"><Input value={search} onChange={(event) => setSearch(event.target.value)} placeholder={t('settings.plugins.market.search')} aria-label={t('settings.plugins.market.search')} />
+        {catalog.listStatus === 'ready' && <p className="shrink-0 text-xs text-muted-foreground" aria-live="polite">{t('settings.plugins.market.results', { count: filtered.length })}</p>}</div>
         {catalog.listStatus === 'ready' && catalog.entries.length > 0 && filtered.length === 0 && <p className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">{t('settings.plugins.market.noResults')}</p>}
         {catalog.listStatus === 'loading' && <p className="text-xs text-muted-foreground">{t('settings.plugins.loading')}</p>}
         {catalog.listStatus === 'error' && <div role="alert" className="space-y-2 text-xs text-destructive"><p>{catalog.listError}</p><Button variant="outline" size="sm" onClick={catalog.retryList}>{t('settings.plugins.market.retry')}</Button></div>}
@@ -73,26 +72,26 @@ export function PluginMarketplaceContent({ catalog, installed, selected, onSelec
         <div className="plugin-marketplace-grid">{filtered.map((item) => {
           const isInstalled = installed.some((plugin) => plugin.id === item.id);
           return <button key={item.id} type="button" data-plugin-id={item.id} aria-current={selected === item.id ? 'true' : undefined} onClick={() => choose(item.id)}
-            className={`min-w-0 flex flex-col gap-3 rounded-lg border p-4 text-left ${entry ? '' : 'min-h-[200px]'} transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${selected === item.id ? 'border-primary/40 bg-primary/10 text-foreground' : 'border-border bg-card hover:bg-muted/50'}`}>
-            <div className="flex items-start gap-2"><PluginBrandIcon entry={item} size={32} className="mt-0.5 shrink-0 text-muted-foreground" /><span className="min-w-0 break-words text-sm font-semibold">{item.name}</span></div>
+            className="plugin-card min-w-0 flex min-h-[200px] flex-col gap-3 rounded-lg bg-card p-4 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+            <div className="flex items-center gap-3"><span className="flex h-8 w-8 shrink-0 items-center justify-center"><PluginBrandIcon entry={item} size={32} className="text-muted-foreground" /></span><span className="min-w-0 break-words text-sm font-semibold leading-5">{item.name}</span></div>
             <p className="break-words text-xs text-muted-foreground">{item.author}</p>
             <p className="line-clamp-3 break-words text-sm leading-5 text-muted-foreground">{item.description}</p>
             <div className="mt-auto flex flex-wrap items-center justify-between gap-2 pt-1 text-xs text-muted-foreground"><span>{item.version} · {item.license}</span><span className="text-foreground">{t('settings.plugins.manager.details')}</span></div>
-            <div className="flex flex-wrap gap-2 text-xs text-muted-foreground">{isInstalled && <span className="rounded bg-muted px-2 py-0.5 text-foreground">{t('settings.plugins.market.installed')}</span>}{!item.artifact && <span className="rounded border px-2 py-0.5">{t('settings.plugins.market.sourceBadge')}</span>}</div>
+            <div className="flex flex-wrap gap-2 text-xs text-muted-foreground">{isInstalled && <span className="rounded bg-muted px-2 py-0.5 text-foreground">{t('settings.plugins.market.installed')}</span>}{!item.artifact && <span className="rounded bg-muted/40 px-2 py-0.5">{t('settings.plugins.market.sourceBadge')}</span>}</div>
           </button>;
         })}</div>
-      </div>
-      {entry && <article key={entry.id} ref={detailRef} tabIndex={-1} aria-label={entry.name} className="plugin-marketplace-detail min-w-0 space-y-5 rounded-lg border bg-card p-4 focus:outline-none">
+      </div>}
+      {entry && <article key={entry.id} aria-label={entry.name} className="plugin-marketplace-detail mx-auto w-full max-w-[920px] min-w-0 space-y-6 focus:outline-none">
         <Button variant="ghost" size="sm" onClick={back}><ArrowLeft size={14} className="mr-2" />{t('settings.plugins.market.back')}</Button>
-        <div className="space-y-2"><div className="flex items-center gap-3"><PluginBrandIcon entry={entry} size={48} /><h4 className="break-words text-xl font-semibold">{entry.name}</h4></div><p className="text-xs text-muted-foreground">{entry.author} · {entry.version} · {entry.license}</p>
+        <div className="space-y-2"><div className="flex items-center gap-3"><PluginBrandIcon entry={entry} size={48} /><h4 ref={detailRef} tabIndex={-1} className="break-words text-xl font-semibold focus:outline-none">{entry.name}</h4></div><p className="text-xs text-muted-foreground">{entry.author} · {entry.version} · {entry.license}</p>
           {installedEntry && <p className="text-xs text-muted-foreground">{t('settings.plugins.market.installed')} · {installedEntry.activeVersion} · {t(installedEntry.enabled ? 'settings.plugins.manager.enabled' : 'settings.plugins.manager.disabled')}</p>}
         </div>
         {installedEntry?.runtime?.lastError && <p role="status" className="break-words text-xs text-destructive">{t('settings.plugins.manager.lastError')}: {installedEntry.runtime.lastError}</p>}
         <p className="text-sm leading-6 text-muted-foreground">{entry.description}</p>
         <a className="block break-all text-xs text-primary underline underline-offset-4" href={`https://github.com/${entry.repository}/tree/${entry.commit}`} target="_blank" rel="noopener noreferrer">{entry.repository} @ {entry.commit.slice(0, 12)}</a>
-        {entry.artifact ? <div className="space-y-2"><p className="text-xs text-muted-foreground">{t('settings.plugins.market.installNote')}</p><Button size="sm" disabled={catalog.busy || Boolean(catalog.listError)} onClick={() => void catalog.install(entry.id)}>{t('settings.plugins.market.install')}</Button></div> : <p className="rounded-lg bg-muted/40 p-3 text-xs leading-5">{t('settings.plugins.market.sourceOnly')}</p>}
-        <SettingCard padded><h4 className="mb-3 text-sm font-semibold">{t('settings.plugins.market.manifest')}</h4><PluginPackageDetails plugin={{ id: entry.id, activeVersion: entry.version, enabled: false, manifest: entry.manifest, archiveSha256: entry.artifact?.sha256, runtime: { status: 'stopped', kind: null, lastError: null, quarantinedAt: null } }} /></SettingCard>
-        <div className="min-w-0 border-t pt-4"><h4 className="text-sm font-semibold">README</h4><p className="mt-2 text-xs text-muted-foreground">{t('settings.plugins.market.readmeNote')}</p>{catalog.readmeStatus === 'loading' && <p className="mt-3 text-xs text-muted-foreground">{t('settings.plugins.loading')}</p>}
+        {entry.artifact ? <div className="space-y-2"><p className="text-xs text-muted-foreground">{t('settings.plugins.market.installNote')}</p>{catalog.listError && <p role="status" className="text-xs text-muted-foreground">{t('settings.plugins.market.offlineShort')}</p>}<Button size="sm" disabled={catalog.busy || Boolean(catalog.listError)} onClick={() => void catalog.install(entry.id)}>{t('settings.plugins.market.install')}</Button></div> : <div className="flex items-center gap-1 text-xs text-muted-foreground"><span>{t('settings.plugins.market.sourceBadge')}</span><PluginInfo label={t('settings.plugins.market.sourceBadge')}>{t('settings.plugins.market.sourceOnly')}</PluginInfo></div>}
+        <section><h4 className="mb-3 text-sm font-semibold">{t('settings.plugins.market.manifest')}</h4><PluginPackageDetails plugin={{ id: entry.id, activeVersion: entry.version, enabled: false, manifest: entry.manifest, archiveSha256: entry.artifact?.sha256, runtime: { status: 'stopped', kind: null, lastError: null, quarantinedAt: null } }} /></section>
+        <div className="min-w-0 border-t pt-4"><div className="flex items-center gap-1"><h4 className="text-sm font-semibold">README</h4><PluginInfo label={t('settings.plugins.market.readmeInfo')}>{t('settings.plugins.market.readmeNote')}</PluginInfo></div>{catalog.readmeStatus === 'loading' && <p className="mt-3 text-xs text-muted-foreground">{t('settings.plugins.loading')}</p>}
           {catalog.readmeStatus === 'error' && <div role="alert" className="mt-3 space-y-2 text-xs text-destructive"><p>{catalog.readmeError}</p><Button variant="outline" size="sm" onClick={catalog.retryReadme}>{t('settings.plugins.market.retry')}</Button></div>}
           {catalog.readmeStatus === 'ready' && (catalog.readme?.trim() ? <PluginReadme markdown={catalog.readme} /> : <p className="mt-3 text-xs text-muted-foreground">{t('settings.plugins.market.emptyReadme')}</p>)}
         </div>

components/settings/tabs/PluginPackageManager.tsx

@@ -76,14 +76,13 @@ export function PluginPackageManager({ manager, onSelectionChange }: { manager:
   const [removing, setRemoving] = useState<string | null>(null);
   if (!manager.available) return null;
   return <section ref={rootRef} className="space-y-4" aria-label={t('settings.plugins.manager.installed')}>
-    <p className="text-xs text-muted-foreground">{t('settings.plugins.manager.preview')}</p>
     {selectedPlugin && <Button variant="ghost" size="sm" onClick={() => choose(null)}><ArrowLeft size={14} className="mr-2" />{t('settings.plugins.manager.installed')}</Button>}
     {!selectedPlugin && manager.plugins.length > 0 && <Input value={search} onChange={(event) => setSearch(event.target.value)} placeholder={t('settings.plugins.market.search')} aria-label={t('settings.plugins.market.search')} />}
     {!selectedPlugin && manager.plugins.length > 0 && visible.length === 0 && <p className="p-6 text-center text-sm text-muted-foreground">{t('settings.plugins.market.noResults')}</p>}
     {manager.error && <p role="alert" className="text-sm text-destructive">{manager.error}</p>}
     {!manager.plugins.length && <div className="rounded-xl border border-dashed border-border p-8 text-center text-sm text-muted-foreground">{t('settings.plugins.manager.empty')}</div>}
     <div className={selectedPlugin ? 'space-y-4' : 'grid grid-cols-[repeat(auto-fill,minmax(min(100%,280px),1fr))] gap-3'}>
-    {visible.map((plugin) => <article key={plugin.id} data-plugin-detail={selectedPlugin ? true : undefined} tabIndex={selectedPlugin ? -1 : undefined} aria-label={nameOf(plugin)} className={`min-w-0 rounded-lg border bg-card p-4 focus:outline-none ${selectedPlugin ? 'space-y-4' : 'flex min-h-[200px] flex-col gap-3'}`}>
+    {visible.map((plugin) => <article key={plugin.id} data-plugin-detail={selectedPlugin ? true : undefined} tabIndex={selectedPlugin ? -1 : undefined} aria-label={nameOf(plugin)} className={`min-w-0 rounded-lg focus:outline-none ${selectedPlugin ? 'space-y-4' : 'plugin-card flex min-h-[200px] flex-col gap-3 bg-card p-4'}`}>
       <div className="flex flex-wrap items-center gap-3">
         <div className="flex h-12 w-12 shrink-0 items-center justify-center"><PluginBrandIcon plugin={plugin} size={32} /></div>
         <button type="button" data-plugin-card={plugin.id} className="min-w-0 flex-1 rounded text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-expanded={selected === plugin.id} onClick={() => choose(selected === plugin.id ? null : plugin.id)}>

components/settings/tabs/PluginStatus.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useI18n } from '../../../application/i18n/I18nProvider';
+import { Button } from '../../ui/button';
+import { PluginInfo } from './PluginInfo';
+
+export function PluginStatus({ noVault, offlineError, retry }: { noVault?: boolean; offlineError?: string | null; retry?: () => void }) {
+  const { t } = useI18n();
+  const count = Number(Boolean(noVault)) + Number(Boolean(offlineError));
+  const explanation = <>{noVault && <p>{t('settings.plugins.manager.noVault')}</p>}{offlineError && <><p>{t('settings.plugins.market.offline')}</p><p className="break-words">{offlineError}</p></>}</>;
+  const label = count ? `${t('settings.plugins.info')} · ${t('settings.plugins.status', { count })}` : t('settings.plugins.info');
+  const help = <><p>{t('settings.plugins.manager.preview')}</p><p>{t('settings.plugins.market.note')}</p></>;
+  const preview = <>{count > 0 && <p>{t('settings.plugins.status', { count })}</p>}{explanation}{help}</>;
+  return <PluginInfo label={label} badgeCount={count} previewContent={preview}>{explanation}{offlineError && retry && <Button variant="outline" size="sm" onClick={retry}>{t('settings.plugins.market.retry')}</Button>}{count > 0 && <hr className="border-border/60" />}{help}</PluginInfo>;
+}

components/settings/tabs/SettingsPluginsTab.tsx

@@ -3,6 +3,7 @@ import { PluginManagementDialog } from './PluginManagementDialog';
 import { PluginMarketplace } from './PluginMarketplace';
 import { PluginPackageManager } from './PluginPackageManager';
 import { FolderOpen } from 'lucide-react';
+import { PluginStatus } from './PluginStatus';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { normalizePluginKeyboardEvent } from '../../../application/state/pluginKeybindings';
@@ -286,6 +287,7 @@ export function PluginSettingField({
 function PluginManagementContent({ handoff }: { handoff: (action: () => void) => void }) {
   const { t } = useI18n();
   const manager = usePluginManager();
+  const [catalogToolbar, setCatalogToolbar] = useState<HTMLDivElement | null>(null);
   const [selectedInstalled, setSelectedInstalled] = useState<string | null>(null);
   const [pluginView, setPluginView] = useState<'installed' | 'marketplace'>('installed');
   const availableFonts = useAvailableFonts();
@@ -314,10 +316,13 @@ function PluginManagementContent({ handoff }: { handoff: (action: () => void) =>
             <TabsTrigger value="installed">{t('settings.plugins.manager.installed')} <span className="ml-2 text-muted-foreground">{manager.plugins.length}</span></TabsTrigger>
             <TabsTrigger value="marketplace">{t('settings.plugins.market.title')}</TabsTrigger>
           </TabsList>
+          <div className="flex items-center gap-2">
+          {pluginView === 'installed' && <PluginStatus noVault={manager.credentialStorageAvailable === false} />}
+          <div ref={setCatalogToolbar} className="flex items-center gap-2" />
           <Button variant="outline" size="sm" disabled={!manager.available || manager.busy} onClick={() => { setPluginView('installed'); void manager.importPackage(); }}><FolderOpen size={14} className="mr-2" />{t('settings.plugins.manager.import')}</Button>
+          </div>
         </div>
-        {manager.credentialStorageAvailable === false && <p role="status" className="text-xs text-muted-foreground">{t('settings.plugins.manager.noVault')}</p>}
-        <TabsContent value="marketplace" className="m-0 space-y-6"><PluginMarketplace installed={manager.plugins} /></TabsContent>
+        <TabsContent value="marketplace" className="m-0 space-y-6"><PluginMarketplace installed={manager.plugins} toolbarContainer={catalogToolbar} noVault={manager.credentialStorageAvailable === false} /></TabsContent>
         <TabsContent value="installed" className="m-0 space-y-6">
         <PluginPackageManager manager={manager} onSelectionChange={setSelectedInstalled} />
         {contextualScopes.size > 0 && (

components/settings/tabs/plugin-marketplace.css

@@ -1,13 +1,9 @@
-/* Container breakpoints account for the Settings sidebar, unlike viewport breakpoints. */
-.plugin-marketplace { container-type: inline-size; }
-.plugin-marketplace-browser { display: grid; gap: 16px; min-width: 0; }
+.plugin-marketplace-browser { min-width: 0; }
 .plugin-marketplace-catalog { min-width: 0; }
-.plugin-marketplace-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
-.plugin-marketplace-browser--selected .plugin-marketplace-catalog { display: none; }
+.plugin-marketplace-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
+/* Details use only the manager's main scrolling surface at every width. */
 .plugin-marketplace-detail { overflow-wrap: anywhere; }
-@container (min-width: 820px) {
-  .plugin-marketplace-browser--selected { grid-template-columns: 248px minmax(0, 1fr); align-items: start; }
-  .plugin-marketplace-browser--selected .plugin-marketplace-catalog { display: block; max-height: min(680px, 65vh); overflow-y: auto; padding: 2px; }
-  .plugin-marketplace-browser--selected .plugin-marketplace-grid { grid-template-columns: minmax(0, 1fr); }
-  .plugin-marketplace-browser--selected .plugin-marketplace-detail { max-height: min(680px, 65vh); overflow-y: auto; }
-}
+.plugin-card { box-shadow: 0 1px 4px hsl(var(--foreground) / 0.06); }
+.plugin-card:hover { box-shadow: 0 2px 8px hsl(var(--foreground) / 0.09); }
+.dark .plugin-card { background: hsl(var(--muted) / 0.2); box-shadow: none; }
+.dark .plugin-card:hover { background: hsl(var(--muted) / 0.3); box-shadow: none; }