Merge branch 'integration/plugin-capabilities-ui' into feat/plugin-vault-pages

# Conflicts:
#	electron/plugins/hostService.cjs
#	packages/plugin-cli/src/manifest.ts
#	packages/plugin-contract/src/index.ts
#	packages/plugin-sdk/src/index.ts

application/i18n/locales/en/core.ts

@@ -1246,6 +1246,9 @@ Highlight the focused split pane:
   "settings.plugins.manager.remove": "Uninstall",
   "settings.plugins.manager.removeNote": "Uninstall removes package code and local KV data. User-owned settings, secrets and sync sidecars are retained.",
   "settings.plugins.permissions.statusUnknown": "Status unknown",
+  "plugins.vault.loading": "Loading plugin page…",
+  "plugins.vault.extensions": "Extensions",
+  "plugins.vault.back": "Back to hosts",
   "plugins.interaction.title": "Plugin request",
   "plugins.interaction.sharing": "Text you share becomes available to this plugin and its granted capabilities, including network access. Reading does not approve a new network destination.",
   "plugins.interaction.input": "Input text",
@@ -1282,6 +1285,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

@@ -1246,6 +1246,9 @@ Resalta el panel dividido enfocado:
   "settings.plugins.manager.remove": "Desinstalar",
   "settings.plugins.manager.removeNote": "La desinstalación elimina el código y los datos KV locales. Se conservan los ajustes del usuario, los secretos y los datos auxiliares de sincronización.",
   "settings.plugins.permissions.statusUnknown": "Estado desconocido",
+  "plugins.vault.loading": "Cargando página del plugin…",
+  "plugins.vault.extensions": "Extensiones",
+  "plugins.vault.back": "Volver a hosts",
   "plugins.interaction.title": "Solicitud de complemento",
   "plugins.interaction.sharing": "El texto compartido estará disponible para este complemento y sus capacidades autorizadas, incluida la red. Leer no autoriza un nuevo destino de red.",
   "plugins.interaction.input": "Introducir texto",
@@ -1282,6 +1285,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

@@ -1141,6 +1141,9 @@ export const ruCoreMessages: Messages = {
   "settings.plugins.manager.remove": "Удалить",
   "settings.plugins.manager.removeNote": "Удаление очищает код пакета и локальные данные KV. Настройки пользователя, секреты и данные синхронизации сохраняются.",
   "settings.plugins.permissions.statusUnknown": "Состояние неизвестно",
+  "plugins.vault.loading": "Загрузка страницы плагина…",
+  "plugins.vault.extensions": "Расширения",
+  "plugins.vault.back": "К хостам",
   "plugins.interaction.title": "Запрос плагина",
   "plugins.interaction.sharing": "Переданный текст доступен плагину и его разрешённым возможностям, включая сеть. Чтение не разрешает новый сетевой адрес.",
   "plugins.interaction.input": "Ввести текст",
@@ -1177,6 +1180,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

@@ -1161,6 +1161,9 @@ Vaults 标签保持扁平，不使用这块背景。
   "settings.plugins.manager.remove": "卸载",
   "settings.plugins.manager.removeNote": "卸载会移除插件代码和本地 KV 数据，保留用户设置、秘密存储和同步 sidecar。",
   "settings.plugins.permissions.statusUnknown": "状态未知",
+  "plugins.vault.loading": "正在加载插件页面…",
+  "plugins.vault.extensions": "扩展",
+  "plugins.vault.back": "返回主机",
   "plugins.interaction.title": "插件请求",
   "plugins.interaction.sharing": "分享的文本将交给此插件及其已授权的能力（包括网络访问）。读取文本不代表批准新的网络目标。",
   "plugins.interaction.input": "输入文本",
@@ -1197,6 +1200,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

@@ -1164,6 +1164,9 @@ Vaults 分頁維持扁平，不使用這塊背景。
   "settings.plugins.manager.remove": "卸載",
   "settings.plugins.manager.removeNote": "卸載會移除插件代碼和本地 KV 數據，保留用戶設置、秘密存儲和同步 sidecar。",
   "settings.plugins.permissions.statusUnknown": "狀態不明",
+  "plugins.vault.loading": "正在載入擴充功能頁面…",
+  "plugins.vault.extensions": "擴充功能",
+  "plugins.vault.back": "返回主機",
   "plugins.interaction.title": "外掛請求",
   "plugins.interaction.sharing": "分享的文字會交給此外掛及其已授權能力（包括網路存取）。讀取文字不代表核准新的網路目的地。",
   "plugins.interaction.input": "輸入文字",
@@ -1206,6 +1209,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/state/pluginVaultPages.ts

@@ -0,0 +1,27 @@
+export const PLUGIN_VAULT_PAGE_PREFIX = 'plugin-vault:';
+
+export interface PluginVaultPage {
+  key: `plugin-vault:${string}`;
+  pluginId: string;
+  pluginName: string;
+  version: string;
+  viewId: string;
+  title: string;
+  icon?: NetcattyPluginIconReference;
+  order: number;
+}
+
+export function collectPluginVaultPages(plugins: NetcattyPluginContributionSnapshot['plugins']): PluginVaultPage[] {
+  return plugins.flatMap((plugin) => plugin.views
+    .filter((view) => view.location === 'vault-page' && view.visible)
+    .map((view): PluginVaultPage => ({
+      key: `${PLUGIN_VAULT_PAGE_PREFIX}${view.id}`,
+      pluginId: plugin.id, pluginName: plugin.displayName, version: plugin.version,
+      viewId: view.id, title: view.title, icon: view.icon, order: view.order ?? 0,
+    })))
+    .sort((left, right) => left.order - right.order || left.viewId.localeCompare(right.viewId));
+}
+
+export function resolvePluginVaultPage(pages: readonly PluginVaultPage[], section: string): PluginVaultPage | null {
+  return pages.find((page) => page.key === section) ?? null;
+}

application/state/pluginViewOcclusion.ts

@@ -0,0 +1,18 @@
+/** Native child views must yield to host dialogs and overlapping portals. */
+export function isPluginViewOccluded(mount: HTMLElement): boolean {
+  const rect = mount.getBoundingClientRect();
+  if (!mount.isConnected || mount.closest('[hidden], [inert]')) return true;
+  const overlays = mount.ownerDocument.querySelectorAll(
+    '[data-app-lock-overlay], [role="dialog"], [role="alertdialog"], '
+    + '[role="menu"][data-state="open"], [data-radix-popper-content-wrapper] > *, [data-native-view-occluder]',
+  );
+  return [...overlays].some((overlay) => {
+    if (mount.contains(overlay)) return false;
+    const style = getComputedStyle(overlay);
+    if (style.display === 'none' || style.visibility === 'hidden' || overlay.closest('[hidden], [inert]')) return false;
+    if (overlay.matches('[data-app-lock-overlay], [role="dialog"][aria-modal="true"], [role="alertdialog"]')) return true;
+    const other = overlay.getBoundingClientRect();
+    return other.width > 0 && other.height > 0 && other.x < rect.right && other.right > rect.x
+      && other.y < rect.bottom && other.bottom > rect.y;
+  });
+}

application/state/useEmbeddedPluginView.ts

@@ -0,0 +1,99 @@
+import { useEffect, useRef, useState } from 'react';
+import { PluginViewLifecycleController, type HostedPluginViewState } from './pluginViewLifecycle';
+import { resolvePluginViewWindowScope } from './pluginViewScopes';
+import { isPluginViewOccluded } from './pluginViewOcclusion';
+import type { UsePluginContributionsResult } from './usePluginContributions';
+
+type ViewAdapter = Pick<UsePluginContributionsResult, 'openView' | 'closeView' | 'setViewBounds' | 'setViewVisibility' | 'onViewClosed'>;
+
+/** Host-owned mounting only. No plugin router, DOM, session or vault data API. */
+export function useEmbeddedPluginView({ viewId, version, slot, active, context, adapter, subscribeHidden, unavailable }: {
+  viewId: string;
+  version: string;
+  slot: string;
+  active: boolean;
+  context: Record<string, unknown>;
+  adapter: ViewAdapter;
+  subscribeHidden(listener: () => void): () => void;
+  unavailable(): void;
+}) {
+  const mountRef = useRef<HTMLDivElement>(null);
+  const [loading, setLoading] = useState(true);
+  const adapterRef = useRef(adapter);
+  const unavailableRef = useRef(unavailable);
+  adapterRef.current = adapter;
+  unavailableRef.current = unavailable;
+  useEffect(() => {
+    const mount = mountRef.current;
+    if (!active || !mount) return;
+    let cancelled = false;
+    const lifecycle = new PluginViewLifecycleController<HostedPluginViewState>();
+    const instanceId = crypto.randomUUID();
+    const scopeId = resolvePluginViewWindowScope({ pathname: window.location.pathname,
+      search: window.location.search, hash: `${window.location.hash}|plugin-slot:${slot}` });
+    const { openView, closeView, setViewBounds, setViewVisibility, onViewClosed } = adapterRef.current;
+    const close = () => {
+      if (cancelled) return;
+      cancelled = true;
+      lifecycle.markViewClosed(viewId);
+      void closeView(instanceId).catch(() => {});
+    };
+    const failCurrent = () => {
+      if (cancelled) return;
+      close();
+      unavailableRef.current();
+    };
+    const unsubscribe = onViewClosed((event) => {
+      lifecycle.handleHostClose(event.instanceId);
+      if (event.instanceId === instanceId && !cancelled) {
+        close();
+        unavailableRef.current();
+      }
+    });
+    const stopOnHide = subscribeHidden(close);
+    const bounds = () => {
+      const rect = mount.getBoundingClientRect();
+      return { x: Math.round(rect.x), y: Math.round(rect.y), width: Math.max(1, Math.round(rect.width)), height: Math.max(1, Math.round(rect.height)) };
+    };
+    let opened = false;
+    let visible = false;
+    const updateVisibility = () => {
+      if (!opened || cancelled) return;
+      const rect = mount.getBoundingClientRect();
+      const next = rect.width > 0 && rect.height > 0 && !isPluginViewOccluded(mount);
+      if (visible === next) return;
+      visible = next;
+      void setViewVisibility(instanceId, next).catch(failCurrent);
+    };
+    const resize = () => {
+      if (opened && !cancelled) void setViewBounds(instanceId, bounds()).catch(failCurrent);
+      updateVisibility();
+    };
+    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(resize);
+    observer?.observe(mount);
+    const mutations = new MutationObserver(updateVisibility);
+    mutations.observe(document.body, { childList: true, subtree: true, attributes: true,
+      attributeFilter: ['class', 'style', 'hidden', 'inert', 'role', 'aria-modal', 'data-state', 'data-app-lock-overlay', 'data-native-view-occluder'] });
+    window.addEventListener('resize', resize);
+    document.addEventListener('scroll', resize, true);
+    setLoading(true);
+    const opening = lifecycle.beginOpen({ viewKey: viewId });
+    void openView({ viewId, instanceId, scopeId, bounds: bounds(), context }).then(async (result) => {
+      if (cancelled || lifecycle.shouldCloseOpen(opening) || lifecycle.consumeHostClose(result.instanceId)) {
+        await closeView(result.instanceId);
+        return;
+      }
+      opened = true;
+      lifecycle.setCurrent({ id: result.instanceId, viewId, scopeId, retainContextWhenHidden: false });
+      resize();
+      setLoading(false);
+    }).catch(() => {
+      if (!cancelled) { close(); unavailableRef.current(); }
+    }).finally(() => lifecycle.finishOpen({ token: opening, viewKey: viewId }));
+    return () => {
+      close(); unsubscribe(); stopOnHide(); observer?.disconnect(); mutations.disconnect();
+      window.removeEventListener('resize', resize); document.removeEventListener('scroll', resize, true);
+    };
+  }, [active, context, slot, subscribeHidden, version, viewId]);
+  return { mountRef, loading };
+}

application/state/usePluginVaultPages.ts

@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { activeTabStore, useActiveTabId } from './activeTabStore';
+import { collectPluginVaultPages, PLUGIN_VAULT_PAGE_PREFIX, resolvePluginVaultPage } from './pluginVaultPages';
+import { usePluginContributions } from './usePluginContributions';
+import { OPEN_PLUGIN_VIEW_EVENT, type OpenPluginViewDetail } from './usePluginViewLifecycle';
+
+const CONTEXT = Object.freeze({ 'netcatty.surface': 'vault-page' });
+
+export function usePluginVaultPages({ locale, section, select }: {
+  locale: string;
+  section: string;
+  select(section: 'hosts' | `plugin-vault:${string}`): void;
+}) {
+  const active = useActiveTabId() === 'vault';
+  const sectionRef = useRef(section);
+  const focusFrame = useRef<number | null>(null);
+  sectionRef.current = section;
+  useEffect(() => () => { if (focusFrame.current !== null) cancelAnimationFrame(focusFrame.current); }, []);
+  const contributions = usePluginContributions({ locale, context: CONTEXT });
+  const pages = useMemo(() => collectPluginVaultPages(contributions.snapshot.plugins), [contributions.snapshot.plugins]);
+  const selected = resolvePluginVaultPage(pages, section);
+  const fallback = useCallback(() => {
+    select('hosts');
+    if (focusFrame.current !== null) cancelAnimationFrame(focusFrame.current);
+    focusFrame.current = requestAnimationFrame(() => {
+      focusFrame.current = null;
+      if (sectionRef.current === 'hosts' && activeTabStore.getActiveTabId() === 'vault') {
+        document.querySelector<HTMLButtonElement>('[data-plugin-vault-fallback]')?.focus();
+      }
+    });
+  }, [select]);
+  useEffect(() => {
+    if (!contributions.loading && section.startsWith(PLUGIN_VAULT_PAGE_PREFIX) && !selected) fallback();
+  }, [contributions.loading, fallback, section, selected]);
+  useEffect(() => {
+    const open = (event: Event) => {
+      const detail = (event as CustomEvent<OpenPluginViewDetail>).detail;
+      const page = pages.find((item) => item.viewId === detail?.viewId);
+      if (!page) return;
+      activeTabStore.setActiveTabId('vault');
+      select(page.key);
+    };
+    window.addEventListener(OPEN_PLUGIN_VIEW_EVENT, open);
+    return () => window.removeEventListener(OPEN_PLUGIN_VIEW_EVENT, open);
+  }, [pages, select]);
+  return { pages, selected, active, select, fallback, contributions, context: CONTEXT };
+}

application/state/usePluginViewLifecycle.ts

@@ -82,7 +82,7 @@ export function usePluginViewLifecycle({
   const mountRef = useRef<HTMLDivElement>(null);
   const resolvedActiveView = useMemo(() => viewContributions.snapshot.plugins
     .flatMap((plugin) => plugin.views.map((view) => ({ plugin, view })))
-    .find(({ view }) => view.id === effectiveRequested?.viewId && view.visible) ?? null,
+    .find(({ view }) => view.id === effectiveRequested?.viewId && view.visible && view.location !== 'vault-page') ?? null,
   [effectiveRequested?.viewId, viewContributions.snapshot.plugins]);
   const stableActiveViewRef = useRef<PluginViewSnapshotSelection<ResolvedPluginView> | null>(null);
   const activeView = resolvePluginViewSnapshotSelection({

components/PluginVaultPages.test.tsx

@@ -0,0 +1,101 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { JSDOM } from 'jsdom';
+
+test('Vault navigation mounts a real content slot, yields to host dialogs, and withdraws stale pages', 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>();
+  for (const key of ['window', 'document', 'navigator', 'HTMLElement', 'Element', 'Node', 'MutationObserver', 'CustomEvent', 'Event']) {
+    previous.set(key, Object.getOwnPropertyDescriptor(globalThis, key));
+    Object.defineProperty(globalThis, key, { configurable: true, writable: true, value: key === 'window' ? dom.window : dom.window[key as keyof Window] });
+  }
+  for (const [key, value] of Object.entries({ getComputedStyle: dom.window.getComputedStyle.bind(dom.window),
+    requestAnimationFrame: dom.window.requestAnimationFrame.bind(dom.window), cancelAnimationFrame: dom.window.cancelAnimationFrame.bind(dom.window), IS_REACT_ACT_ENVIRONMENT: true })) {
+    previous.set(key, Object.getOwnPropertyDescriptor(globalThis, key)); Object.defineProperty(globalThis, key, { configurable: true, writable: true, value });
+  }
+  dom.window.HTMLElement.prototype.getBoundingClientRect = () => ({ x: 200, y: 100, width: 640, height: 480, top: 100, left: 200, right: 840, bottom: 580, toJSON() {} });
+  const { default: React, act, useState } = await import('react');
+  const { createRoot } = await import('react-dom/client');
+  const { usePluginVaultPages } = await import('../application/state/usePluginVaultPages');
+  const { PluginVaultNavigation, PluginVaultPage } = await import('./plugins/PluginVaultPages');
+  const { activeTabStore } = await import('../application/state/activeTabStore');
+  const { requestOpenPluginView } = await import('../application/state/usePluginViewLifecycle');
+  const { I18nProvider } = await import('../application/i18n/I18nProvider');
+  const page = { id: 'com.example.page.main', title: 'Synthetic page', location: 'vault-page', entry: 'page.html', visible: true };
+  let snapshot = { locale: 'en', plugins: [{ id: 'com.example.page', version: '1.0.0', displayName: 'Synthetic plugin', commands: [], keybindings: [], menus: [], settings: [], views: [page] }] };
+  let changed: (() => void) | undefined;
+  const listeners = new Set<(event: NetcattyPluginViewClosedEvent) => void>();
+  const opens: NetcattyPluginViewOpenRequest[] = [], closes: string[] = [], visibility: boolean[] = [];
+  let defer: ((value: { instanceId: string }) => void) | undefined;
+  let deferOpen = false;
+  let delayLayout = false;
+  const rejectOldLayout: Array<(error: Error) => void> = [];
+  const layoutResult = () => delayLayout ? new Promise<void>((_resolve, reject) => { rejectOldLayout.push(reject); }) : Promise.resolve();
+  Object.assign(dom.window, { netcatty: {
+    async getPluginRuntimeStatus() { return { available: true }; },
+    async getPluginContributions() { return snapshot; },
+    onPluginContributionsChanged(fn: () => void) { changed = fn; return () => { changed = undefined; }; },
+    onPluginViewClosed(fn: (event: NetcattyPluginViewClosedEvent) => void) { listeners.add(fn); return () => { listeners.delete(fn); }; },
+    async openPluginView(payload: NetcattyPluginViewOpenRequest) { opens.push(payload); return deferOpen ? new Promise<{ instanceId: string }>((resolve) => { defer = resolve; }) : { instanceId: payload.instanceId! }; },
+    async closePluginView(id: string) { closes.push(id); }, async setPluginViewBounds() { await layoutResult(); },
+    async setPluginViewVisibility(_id: string, visible: boolean) { visibility.push(visible); await layoutResult(); },
+  } });
+  let selectSection!: (section: 'hosts' | `plugin-vault:${string}`) => void;
+  function Fixture() {
+    const [section, select] = useState<'hosts' | `plugin-vault:${string}`>('hosts'); selectSection = select;
+    const model = usePluginVaultPages({ locale: 'en', section, select });
+    return <><aside><button data-plugin-vault-fallback onClick={() => select('hosts')}>Hosts</button><PluginVaultNavigation model={model} collapsed={false} /></aside>
+      <main data-section="vault-main">{model.selected ? <PluginVaultPage key={model.selected.key} model={model} /> : <p>Built-in hosts</p>}</main></>;
+  }
+  const root = createRoot(document.getElementById('root')!);
+  const settle = () => new Promise((resolve) => setTimeout(resolve, 35));
+  const clickPage = async () => { await act(async () => { document.querySelector<HTMLButtonElement>('button[aria-label="Synthetic page — Synthetic plugin"]')!.click(); await settle(); }); };
+  try {
+    activeTabStore.setActiveTabId('vault');
+    await act(async () => { root.render(<I18nProvider locale="en"><Fixture /></I18nProvider>); await settle(); });
+    assert.equal(opens.length, 0, 'catalog enumeration does not activate the plugin');
+    await clickPage();
+    assert.ok(document.querySelector('[data-section="vault-main"] [data-plugin-view-slot="vault-page"]'));
+    assert.equal(opens.length, 1);
+    assert.deepEqual(opens[0].context, { 'netcatty.surface': 'vault-page' }, 'no Vault/session data accompanies navigation');
+    assert.equal(visibility.at(-1), true);
+    const dialog = document.createElement('div'); dialog.setAttribute('role', 'dialog'); dialog.setAttribute('aria-modal', 'true');
+    await act(async () => { document.body.append(dialog); await settle(); });
+    assert.equal(visibility.at(-1), false, 'native content yields to host security/settings dialogs');
+    await act(async () => { dialog.remove(); await settle(); });
+    assert.equal(visibility.at(-1), true);
+    await act(async () => { activeTabStore.setActiveTabId('terminal:synthetic'); assert.ok(closes.includes(opens[0].instanceId!)); await settle(); });
+    await act(async () => { activeTabStore.setActiveTabId('vault'); await settle(); });
+    assert.equal(opens.length, 2);
+    await act(async () => { snapshot = { ...snapshot, plugins: [] }; changed?.(); await settle(); });
+    await act(async () => { await settle(); });
+    assert.ok(closes.includes(opens[1].instanceId!));
+    assert.equal(document.querySelector('[data-plugin-vault-page]'), null);
+    assert.equal(document.activeElement?.textContent, 'Hosts');
+    await act(async () => { selectSection('plugin-vault:missing'); await settle(); });
+    assert.match(document.querySelector('main')!.textContent!, /Built-in hosts/);
+    await act(async () => { snapshot = { ...snapshot, plugins: [{ id: 'com.example.page', version: '1.0.0', displayName: 'Synthetic plugin', commands: [], keybindings: [], menus: [], settings: [], views: [page] }] }; changed?.(); await settle(); });
+    deferOpen = true;
+    await act(async () => { requestOpenPluginView({ viewId: page.id }); await settle(); });
+    assert.equal(opens.length, 3);
+    await act(async () => { selectSection('hosts'); await settle(); });
+    assert.ok(closes.includes(opens[2].instanceId!), 'cancel reserved instance before its open response');
+    await act(async () => { defer!({ instanceId: opens[2].instanceId! }); await settle(); });
+    assert.equal(document.querySelector('[data-plugin-vault-page]'), null, 'late open cannot restore withdrawn page');
+    assert.ok(closes.filter((id) => id === opens[2].instanceId).length >= 2, 'late native response is also closed');
+    deferOpen = false;
+    const second = { ...page, id: 'com.example.page.second', title: 'Second page' };
+    await act(async () => { snapshot = { ...snapshot, plugins: [{ ...snapshot.plugins[0], views: [page, second] }] }; changed?.(); await settle(); });
+    delayLayout = true;
+    await clickPage();
+    assert.ok(rejectOldLayout.length >= 2, 'old page has both bounds and visibility IPC in flight');
+    await act(async () => { selectSection('hosts'); await settle(); });
+    delayLayout = false;
+    await act(async () => { document.querySelector<HTMLButtonElement>('button[aria-label="Second page — Synthetic plugin"]')!.click(); await settle(); });
+    await act(async () => { for (const reject of rejectOldLayout) reject(new Error('old page layout failed')); await settle(); });
+    assert.equal(document.querySelector('[data-plugin-vault-page]')?.getAttribute('aria-label'), 'Second page', 'old bounds/visibility failures cannot withdraw the newly selected page');
+  } finally {
+    await act(async () => { root.unmount(); await settle(); }); dom.window.close();
+    for (const [key, descriptor] of previous) { if (descriptor) Object.defineProperty(globalThis, key, descriptor); else Reflect.deleteProperty(globalThis, key); }
+  }
+});

components/VaultView.tsx

@@ -161,6 +161,7 @@ import { VaultViewLayout } from "./vault/VaultViewLayout";
 import { useVaultHostCollections } from "./vault/useVaultHostCollections";
 import { useVaultImportHandlers } from "../application/state/useVaultImportHandlers";
 import { useVaultGroupDragHandlers } from "./vault/useVaultGroupDragHandlers";
+import { usePluginVaultPages } from "../application/state/usePluginVaultPages";
 
 const LazyProtocolSelectDialog = lazy(() => import("./ProtocolSelectDialog"));
 const LazyConnectionLogsManager = lazy(() => import("./ConnectionLogsManager"));
@@ -178,7 +179,8 @@ export type VaultSection =
   | "notes"
   | "port"
   | "knownhosts"
-  | "logs";
+  | "logs"
+  | `plugin-vault:${string}`;
 
 const haveSameHostOrderResult = (previous: Host[], next: Host[]) => {
   if (previous.length !== next.length) return false;
@@ -365,11 +367,12 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
   onVaultFocusRequestHandled,
   terminalSettings,
 }) => {
-  const { t } = useI18n();
+  const { t, locale } = useI18n();
   const rootRef = useRef<HTMLDivElement>(null);
   const hostsRef = useRef(hosts);
   hostsRef.current = hosts;
   const [currentSection, setCurrentSection] = useState<VaultSection>("hosts");
+  const pluginVault = usePluginVaultPages({ locale, section: currentSection, select: setCurrentSection });
   const [search, setSearch] = useState("");
   const [selectedGroupPath, setSelectedGroupPath] = useState<string | null>(
     null,
@@ -1522,6 +1525,7 @@ const VaultViewInner: React.FC<VaultViewProps> = ({
           ContextMenuTrigger,
           Copy,
           currentSection,
+          pluginVault,
           customGroups,
           deleteGroupPath,
           deleteGroupPaths,

components/plugins/PluginVaultPages.tsx

@@ -0,0 +1,44 @@
+import { activeTabStore } from '../../application/state/activeTabStore';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import { useEmbeddedPluginView } from '../../application/state/useEmbeddedPluginView';
+import type { usePluginVaultPages } from '../../application/state/usePluginVaultPages';
+import { PluginContributionIcon } from './PluginContributionIcon';
+import { Button } from '../ui/button';
+
+type VaultPages = ReturnType<typeof usePluginVaultPages>;
+const subscribeHidden = (hide: () => void) => activeTabStore.subscribeSync((id) => { if (id !== 'vault') hide(); });
+
+export function PluginVaultNavigation({ model, collapsed }: { model: VaultPages; collapsed: boolean }) {
+  const { t } = useI18n();
+  if (!model.pages.length) return null;
+  return <div role="group" aria-label={t('plugins.vault.extensions')} className="mt-3 space-y-1 border-t border-border/50 pt-3">
+    {!collapsed && <p className="px-2 text-xs text-muted-foreground">{t('plugins.vault.extensions')}</p>}
+    {model.pages.map((page) => <Button key={page.key} type="button"
+      variant={model.selected?.key === page.key ? 'secondary' : 'ghost'}
+      className={`w-full ${collapsed ? 'justify-center px-0' : 'justify-start gap-3'}`}
+      title={`${page.title} — ${page.pluginName}`}
+      aria-label={`${page.title} — ${page.pluginName}`}
+      aria-current={model.selected?.key === page.key ? 'page' : undefined}
+      onClick={() => model.select(page.key)}>
+      <PluginContributionIcon pluginId={page.pluginId} icon={page.icon} className="shrink-0" />
+      {!collapsed && <span className="truncate">{page.title}</span>}
+    </Button>)}
+  </div>;
+}
+
+export function PluginVaultPage({ model }: { model: VaultPages }) {
+  const { t } = useI18n();
+  const page = model.selected!;
+  const { mountRef, loading } = useEmbeddedPluginView({ viewId: page.viewId, version: page.version, slot: 'vault-page',
+    active: model.active, context: model.context, adapter: model.contributions, subscribeHidden, unavailable: model.fallback });
+  return <section className="flex min-h-0 flex-1 flex-col" aria-label={page.title} data-plugin-vault-page={page.key}>
+    <header className="app-no-drag flex h-12 shrink-0 items-center justify-between gap-3 border-b border-border px-4">
+      <div className="min-w-0"><h2 className="truncate text-sm font-medium">{page.title}</h2>
+        <p className="truncate text-xs text-muted-foreground">{page.pluginName} · {page.version}</p></div>
+      <Button variant="ghost" onClick={model.fallback}>{t('plugins.vault.back')}</Button>
+    </header>
+    <div ref={mountRef} className="relative min-h-0 flex-1 overflow-hidden" data-plugin-view-slot="vault-page">
+      {loading && <p role="status" className="p-4 text-sm text-muted-foreground">{t('plugins.vault.loading')}</p>}
+    </div>
+  </section>;
+}

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; }

components/vault/VaultViewLayout.tsx

@@ -29,6 +29,7 @@ import { LazyLoadBoundary } from "../ui/lazy-load-boundary";
 import { toast } from "../ui/toast";
 import { AppWordmark } from "../AppWordmark";
 import { openHostBrowser } from "../../application/hostBrowser";
+import { PluginVaultNavigation, PluginVaultPage } from '../plugins/PluginVaultPages';
 
 type VaultViewLayoutContext = Record<string, any>;
 
@@ -156,6 +157,7 @@ export function VaultViewLayout({ ctx }: { ctx: VaultViewLayoutContext }) {
     ContextMenuTrigger,
     Copy,
     currentSection,
+    pluginVault,
     customGroups,
     deleteGroupPaths,
     deleteGroupWithHosts,
@@ -595,12 +597,13 @@ export function VaultViewLayout({ ctx }: { ctx: VaultViewLayoutContext }) {
           </div>
 
           <div
-            className={cn("space-y-1", sidebarCollapsed ? "px-1.5" : "px-2.5")}
+            className={cn("min-h-0 flex-1 overflow-y-auto space-y-1", sidebarCollapsed ? "px-1.5" : "px-2.5")}
           >
             <Tooltip>
               <TooltipTrigger asChild>
                 <RippleButton
                   variant={currentSection === "hosts" ? "secondary" : "ghost"}
+                  data-plugin-vault-fallback
                   className={cn(
                     "w-full h-10",
                     sidebarCollapsed
@@ -805,11 +808,12 @@ export function VaultViewLayout({ ctx }: { ctx: VaultViewLayoutContext }) {
                 </TooltipContent>
               )}
             </Tooltip>
+            {pluginVault && <PluginVaultNavigation model={pluginVault} collapsed={sidebarCollapsed} />}
           </div>
 
           <div
             className={cn(
-              "mt-auto pb-4 space-y-2",
+              "mt-auto shrink-0 pb-4 space-y-2",
               sidebarCollapsed ? "px-1.5" : "px-2.5",
             )}
           >
@@ -864,6 +868,7 @@ export function VaultViewLayout({ ctx }: { ctx: VaultViewLayoutContext }) {
             className="flex-1 min-w-0 flex flex-col min-h-0 relative"
             data-section="vault-main"
           >
+            {pluginVault?.selected && <PluginVaultPage key={pluginVault.selected.key} model={pluginVault} />}
             <VaultPageHeader
               className={cn(!isHostsSectionActive && "hidden")}
               dataSection="vault-hosts-header"

docs/plugin-platform/capability-coverage.md

@@ -17,7 +17,7 @@ mean complete. Existing APIs remain available.
 | Terminal providers | Decorations, links, completion, snapshots through provider requests | Session change delivery follows prior provider request and non-once grant | Preserve providers. Standalone selected-session watch planned | Hostnames, session state, endpoint identity | Host-selected session, runtime identity | Session-close and revoke cleanup, bounded event rate | Existing provider tests. Ordinary views cannot independently subscribe today |
 | Current context and host picker | Host context keys are boolean state | `vault.metadata` enumeration is not generic SDK | Selected host/session DTO from an explicit whitelist | Labels and endpoint metadata are sensitive | Host-owned user-action context, selected host/session | TTL, runtime and session invalidation, redacted audit | Planned. Never reuse agent `sanitizeHostForAgent` as plugin DTO |
 | Terminal selection and input draft | Provider-supplied snapshots, completion suggestions | No explicit selection-share or draft API | User shares selection, plugin proposes a visible editable draft | Terminal plaintext, accidental execution | Host action token plus exact live session/endpoint | Single-use token, size cap, no plaintext audit, active identity before commit | Planned. Reject Enter/control characters for draft insertion. No full history or direct shell |
-| Native interactions and clipboard | Native permission dialogs; new browser SDK host choice/input and explicit copy/share workflow | Progress/toast remain unimplemented | Host-owned prompts, two-phase clipboard snapshot/share, exact copy preview | Clipboard and input may contain secrets; UI discloses granted network capability; prompt spam | `ui.interact`, clipboard direction, host-signed window/runtime/version/phase/TTL action | Admission before permission prompt, byte/rate/concurrency limits, lock/blur/close/revoke cleanup, active guard, content-free audit | [Host interaction slice](./host-interactions.md) implemented and synthetic-tested; native acceptance/review/CI pending. Progress/toast still planned. No background reads or trusted plugin `userGesture` boolean |
+| Native interactions and clipboard | Native permission dialogs; new browser SDK host choice/input and explicit copy/share workflow | Progress/toast remain unimplemented | Host-owned prompts, two-phase clipboard snapshot/share, exact copy preview | Clipboard and input may contain secrets; UI discloses granted network capability; prompt spam | `ui.interact`, clipboard direction, host-signed window/runtime/version/phase/TTL action | Admission before permission prompt, byte/rate/concurrency limits, lock/blur/close/revoke cleanup, active guard, content-free audit | [Host interaction slice](./host-interactions.md) implemented and synthetic-tested. d4ca123 exact test/packaging CI and parent independent delta review passed; parent native rerun pending after the permission-modal focus fix. Progress/toast still planned. No background reads or trusted plugin `userGesture` boolean |
 | Local filesystem | Read file, stat, overwrite existing regular file | Directory listing lacks same-handle native adapter | Keep current boundary, evaluate file picker handles | Arbitrary local file content and writes | Canonical exact path or selected file handle | Inode checks, no symlink alias, bounded bytes, active runtime | Existing filesystem tests. Directory enumeration and new arbitrary-path creation deferred until portable safe native adapter exists |
 | SFTP and remote files | No generic plugin API | `sftp.read` and `sftp.write` enumerated only | Host-selected session/path/mode/TTL handles, read and explicit save/upload | Remote secrets and destructive overwrite | Live endpoint identity, exact path, read/write split | Cancel streams, byte quota, overwrite confirmation, close/revoke cleanup | Batch 2 planned. Never forward arbitrary MCP catalog or session ID alone |
 | Editor and Notes | No plugin document API | No versioned snapshot or edit preview | Explicit snapshot and versioned proposed edit | Document secrets, lost updates, executable files | Selected document plus revision and action token | Version conflict check, preview, bounded bytes, revocation | Planned evaluation after shared action context. No unattended edits |
@@ -32,7 +32,7 @@ mean complete. Existing APIs remain available.
 | AI, MCP, automation | Host agent catalog and harness exist separately | No generic plugin AI or tool forwarding | Selection-to-proposal workflow through the same controlled primitives | Content disclosure, account authority and model cost | Explicit content sharing plus service origin/budget | No inherited history, tools, account, or hidden cron | Controlled workflow planned. Generic host AI and visible schedules deferred to distinct product decision |
 | Known hosts, app lock and global security | Host security management UI | No plugin management API | Future allowlisted security-page navigation | Host-key trust, unlock, keys and security policy affect all sessions | Host navigation action only | No mutation or sensitive DTO | Security policy mutation, private-key reads, auto-trust and unlocking deferred indefinitely |
 | Plugin blob/cache | Local KV exists | No exclusive blob cache | Evaluate bounded plugin-owned cache when a real workflow needs it | Disk growth and lifecycle ambiguity | Plugin namespace, no arbitrary path | Size quota, eviction and uninstall policy required | Deferred until a concrete larger-than-KV workflow establishes value and retention policy |
-| Vault and terminal navigation | `tab` mounts a sandbox page through TopTabs/QuickSwitcher; aside/panel are overlays | No Vault subpage registry or terminal side-panel plugin tool. `settings` is a detail entry, not a new settings category | Accepted independent slice: host-owned namespaced Vault pages in an Extensions group, mounted in the Vault content area through existing ViewHost; then terminal pane/split pages for the selected session | Navigation cannot disclose session contents or replace built-in/security navigation | Declared page contribution plus host selection. Content reads have independent permissions | Host order/when/focus, cancellation of late open, view cleanup on hide/update/disable/uninstall, safe invalid-link fallback | Planned after host interaction/selected-context workflow. A button that merely opens a top tab does not satisfy Vault-page acceptance. No arbitrary router/DOM API |
+| Vault and terminal navigation | `tab` mounts a sandbox page through TopTabs/QuickSwitcher; aside/panel are overlays | No Vault subpage registry or terminal side-panel plugin tool. `settings` is a detail entry, not a new settings category | Accepted independent slice: host-owned namespaced Vault pages in an Extensions group, mounted in the Vault content area through existing ViewHost; then terminal pane/split pages for the selected session | Navigation cannot disclose session contents or replace built-in/security navigation | Declared page contribution plus host selection. Content reads have independent permissions | Host order/when/focus, cancellation of late open, view cleanup on hide/update/disable/uninstall, safe invalid-link fallback | [Vault page slice](./vault-pages.md) implemented and synthetic-tested: actual Vault content slot, private Scratchpad, catalog withdrawal, host occlusion, reserved-open cancellation, owner/crash/lock cleanup. Exact CI/independent/native acceptance pending. Terminal pane/split pages remain the next separate stage. No arbitrary router/DOM API |
 | Distribution and runtimes | Browser-only public catalog, immutable packages, advanced developer gate | Signing/trust and release remain separate phase | Retain existing boundary | Package execution and publisher trust | Pinned catalog selection, hash, engine/features | Existing install transaction, quarantine and cleanup | No merge/release. Do not extend to arbitrary Node, IPC, shell, or global capabilities |
 
 ## Delivery order and stopping rule
@@ -83,3 +83,18 @@ Baseline code references: `electron/plugins/hostService.cjs`,
 implementations under `electron/capabilities/catalog/` are reference material,
 not plugin authority. `infrastructure/ai/vaultAgentBridgeClient.ts` is not a
 plugin DTO sanitizer.
+
+## Navigation slice checkpoint
+
+The Vault stage adds `views.vault-pages`, the `vault-page` location, and the
+existing `views` permission. It grants no Vault/session data. The ordinary
+browser Scratchpad example uses only its own bounded view-state API and
+explicit user input. It is not a Notes API or automatic sync feature.
+
+The independent integration base includes #3956 UI polish and #3960 d4ca fixes;
+frozen evidence heads and prior PR bases are unchanged. Related UI changes in
+this stage are limited to VaultView/VaultViewLayout, new independent plugin
+components/hooks, and localized strings. PluginMarketplace/PluginPackageManager
+layouts are not rewritten. Native acceptance belongs to the parent with a new
+fixture-specific own-views approval. Sidebar, ThemePack, selected context and
+SFTP remain unfinished; this checkpoint is not overall completion.

docs/plugin-platform/vault-pages.md

@@ -0,0 +1,80 @@
+# Vault extension pages
+
+`views.vault-pages` adds the `vault-page` view location. A package must require
+the feature and declare the existing `views` permission. Hosts without the
+feature reject the package deterministically. Existing view locations and API
+versions keep their behavior; there is no public plugin router or new Vault
+read/write permission.
+
+## User workflow
+
+Visible, enabled contributions appear in Vault's **Extensions** group. The
+host generates a namespaced route from the declared view ID, orders by declared
+order and ID, localizes the label, and resolves the declared icon through the
+existing safe icon pipeline. Built-in navigation and security entry points
+remain host-owned. Collapsed navigation retains source-labelled accessible
+buttons.
+
+Selecting a page mounts its existing sandbox WebContentsView in the Vault main
+content area. It does not create a top tab, use an aside overlay, open a
+connection, or share host/session/Vault records. The trusted host context
+contains only `netcatty.surface: vault-page`. The manager's existing Open action
+can select the same page through an internal host event; this is not exposed
+as a generic SDK navigation capability.
+
+The `vault-scratchpad` browser example lets the user type synthetic text, save
+it in the plugin's own view state, return to Hosts, reopen, and clear it. It
+does not create a Vault Note or enable automatic cloud sync. The fixture asks
+for only `views`; granting it does not approve another plugin or data access.
+
+## Ownership and lifecycle
+
+The host owns the route and validates the selected contribution against the
+current visible catalog. Missing IDs, disable/uninstall/update, a false `when`,
+failed activation or a host close return to Hosts. Focus restoration checks
+the current section and active tab so an old fallback cannot steal focus after
+a newer selection. Catalog listing does not activate a plugin.
+
+The embedded host reuses PluginViewHost, its ephemeral session, CSP, no-Node
+preload, protocol validation, own-command checks, and bounded own view state.
+No DOM or Electron object enters the SDK. A window-route-and-slot scope separates
+this page's state from other view placements; actual BrowserWindow ownership is
+validated separately and does not rely on that state key. This initial embedded slice
+closes on navigation away even if `retainContextWhenHidden` is declared.
+
+Each opening reserves an instance ID owned by its actual BrowserWindow before
+asynchronous activation. Close can cancel that reservation before native
+construction. Owner closure, shutdown and renderer cleanup prevent a late open
+from attaching; late responses are also closed by the renderer lifecycle
+controller. Current plugin version/runtime and `when` are checked before
+attachment and on subsequent contribution changes. Existing owner checks apply
+to bounds, visibility, close and view-state IPC.
+
+Host reload/renderer exit and a view renderer crash close the associated native
+page. Plain Escape in a Vault page is handled by the host and returns to Hosts;
+it does not dispatch a plugin command or expose a general navigation API.
+
+Native child views sit above React portals. A Vault page starts hidden; the
+trusted renderer reveals it only after checking the mount and host dialogs,
+menus, popovers, overlay panels and lock surfaces. Overlapping host surfaces
+hide the page. App Lock additionally closes all hosted plugin views and
+cancels pending opens in the main process; showing a view while locked fails.
+
+The shared manifest bound remains 128 views per package. Only one Vault page is
+mounted per owner; listing and routing do not create a background view queue.
+View-state JSON size limits and existing runtime/permission quotas remain in
+force. No page text or state is added to audit logs by this adapter.
+
+## Validation status
+
+Source tests cover normal catalog selection, the actual embedded content slot,
+host-modal occlusion, synchronous tab-away cleanup, withdrawn and invalid
+routes, internal host selection, delayed open cancellation, feature/permission
+admission, host ownership, `when` withdrawal and App Lock. Production build,
+aggregate host tests and precise-SHA CI are reported on the accompanying Draft
+PR. Parent native acceptance must use the packed browser example through
+normal Settings and record its exact source SHA/package hash. Unit tests do
+not substitute for that native acceptance.
+
+Terminal sidebar pages and selected-session DTOs remain separate stages. This
+page location does not make those capabilities available.

electron/plugins/generated/plugin-contract.schema.json

@@ -1293,9 +1293,13 @@
         "panel",
         "tab",
         "modal",
-        "settings"
+        "settings",
+        "vault-page"
       ]
     },
+    "VaultPagesFeature": {
+      "const": "views.vault-pages"
+    },
     "ViewContribution": {
       "type": "object",
       "required": [

electron/plugins/hostService.cjs

@@ -2,6 +2,7 @@
 
 const path = require("node:path");
 const NETWORK_CREDENTIAL_LEASE_FEATURE = require("./generated/plugin-contract.schema.json").$defs.NetworkCredentialLeaseFeature.const;
+const VAULT_PAGES_FEATURE = require("./generated/plugin-contract.schema.json").$defs.VaultPagesFeature.const;
 const INTERACTIVE_COMMAND_FEATURE = require("./generated/plugin-contract.schema.json").$defs.InteractiveCommandFeature.const;
 
 const { assertBrowserOnlyPlugin } = require("../../domain/pluginRuntimePolicy.cjs");
@@ -96,7 +97,7 @@ function createPluginHostService(options) {
       database,
       netcattyVersion: options.app.getVersion(),
       apiVersion: PLUGIN_API_VERSION,
-      supportedFeatures: [...new Set(["metadata.brand-icon", NETWORK_CREDENTIAL_LEASE_FEATURE, HOST_INTERACTION_FEATURE, INTERACTIVE_COMMAND_FEATURE, ...(options.supportedFeatures ?? [])])],
+      supportedFeatures: [...new Set(["metadata.brand-icon", NETWORK_CREDENTIAL_LEASE_FEATURE, HOST_INTERACTION_FEATURE, VAULT_PAGES_FEATURE, INTERACTIVE_COMMAND_FEATURE, ...(options.supportedFeatures ?? [])])],
     });
     const contributionIconService = new PluginContributionIconService({
       database,
@@ -236,7 +237,7 @@ function createPluginHostService(options) {
       paths,
       netcattyVersion: options.app.getVersion(),
       apiVersion: PLUGIN_API_VERSION,
-      supportedFeatures: [...new Set(["metadata.brand-icon", NETWORK_CREDENTIAL_LEASE_FEATURE, HOST_INTERACTION_FEATURE, INTERACTIVE_COMMAND_FEATURE, ...(options.supportedFeatures ?? [])])],
+      supportedFeatures: [...new Set(["metadata.brand-icon", NETWORK_CREDENTIAL_LEASE_FEATURE, HOST_INTERACTION_FEATURE, VAULT_PAGES_FEATURE, INTERACTIVE_COMMAND_FEATURE, ...(options.supportedFeatures ?? [])])],
       runtimeDirectory,
       appRoot,
       rpcRegistry,
@@ -364,6 +365,8 @@ function createPluginHostService(options) {
           packageStore,
           database,
           contributionService,
+          isLocked: options.isAppLocked,
+          subscribeLock: options.subscribeAppLock,
         })
       : null;
     const manager = new PluginManager({

electron/plugins/pluginViewHost.cjs

@@ -36,10 +36,19 @@ class PluginViewHost {
     this.contributionService = options.contributionService;
     this.preloadPath = options.preloadPath ?? path.join(__dirname, "runtime", "viewPreload.cjs");
     this.instances = new Map();
+    this.opening = new Map();
+    this.closed = false;
+    this.isLocked = options.isLocked ?? (() => false);
+    this.subscriptions = [];
+    const unsubscribeLock = options.subscribeLock?.((state) => {
+      if (!state.locked) return;
+      for (const opening of this.opening.values()) opening.cancelled = true;
+      for (const instanceId of [...this.instances.keys()]) void this.close(instanceId, undefined, "app-locked");
+    });
+    this.subscriptions.push({ dispose: () => unsubscribeLock?.() });
     this.byWebContentsId = new Map();
     this.closeListeners = new Set();
     this.environment = { locale: "en", theme: "system", reducedMotion: false, highContrast: false };
-    this.subscriptions = [];
     this.#registerIpc();
     this.subscriptions.push(this.contributionService.onDidPostViewMessage((event) => {
       for (const instance of this.instances.values()) {
@@ -49,10 +58,14 @@ class PluginViewHost {
       }
     }));
     this.subscriptions.push(this.contributionService.onDidChange?.((event) => {
-      if (!["plugin-disabled", "runtime-stopped", "runtime-error", "runtime-quarantined"].includes(event.reason)
-        || !event.pluginId) return;
       for (const instance of [...this.instances.values()]) {
-        if (instance.pluginId === event.pluginId) void this.close(instance.instanceId, undefined, event.reason);
+        if (["plugin-disabled", "runtime-stopped", "runtime-error", "runtime-quarantined"].includes(event.reason)
+          && instance.pluginId === event.pluginId) {
+          void this.close(instance.instanceId, undefined, event.reason);
+        } else if (instance.location === "vault-page") {
+          try { this.contributionService.assertViewActivationCurrent(instance.activation, { context: instance.context }); }
+          catch { void this.close(instance.instanceId, undefined, "contribution-unavailable"); }
+        }
       }
     }));
   }
@@ -115,10 +128,45 @@ class PluginViewHost {
 
   async open(payload, sender) {
     if (!payload || typeof payload !== "object") throw new TypeError("Plugin view request is invalid");
+    const owner = this.electron.BrowserWindow.fromWebContents(sender);
+    if (this.closed || this.isLocked() || !owner || owner.isDestroyed()) throw new Error("Plugin view owner is unavailable");
+    const instanceId = typeof payload.instanceId === "string" && payload.instanceId.length <= 128
+      ? payload.instanceId : randomUUID();
+    if (this.instances.has(instanceId) || this.opening.has(instanceId)) throw new Error(`Plugin view already exists: ${instanceId}`);
+    const opening = { owner, cancelled: false };
+    const cancel = () => { opening.cancelled = true; };
+    const rendererGone = () => { void this.close(instanceId, undefined, "owner-renderer-gone"); };
+    const navigate = (details, _url, isInPlace, isMainFrame) => {
+      if ((details?.isMainFrame ?? isMainFrame) !== false && (details?.isSameDocument ?? isInPlace) !== true) rendererGone();
+    };
+    const cleanupOwner = () => {
+      sender.removeListener?.("render-process-gone", rendererGone);
+      sender.removeListener?.("did-start-navigation", navigate);
+    };
+    this.opening.set(instanceId, opening);
+    owner.once?.("closed", cancel);
+    sender.on?.("render-process-gone", rendererGone);
+    sender.on?.("did-start-navigation", navigate);
+    try { return await this.#open({ ...payload, instanceId }, sender, opening); }
+    finally {
+      owner.removeListener?.("closed", cancel);
+      const instance = this.instances.get(instanceId);
+      if (instance) instance.cleanupOwner = cleanupOwner;
+      else cleanupOwner();
+      if (this.opening.get(instanceId) === opening) this.opening.delete(instanceId);
+    }
+  }
+
+  #assertOpening(opening) {
+    if (this.closed || this.isLocked() || opening.cancelled || opening.owner.isDestroyed()) throw new Error("Plugin view opening was cancelled");
+  }
+
+  async #open(payload, sender, opening) {
     const { plugin, view, identity } = await this.contributionService.activateView(
       payload.viewId,
       { context: payload.context },
     );
+    this.#assertOpening(opening);
     const activation = Object.freeze({
       pluginId: plugin.id,
       pluginVersion: plugin.activeVersion,
@@ -135,6 +183,7 @@ class PluginViewHost {
       : randomUUID();
     if (this.instances.has(instanceId)) throw new Error(`Plugin view already exists: ${instanceId}`);
     const packageRoot = await this.packageStore.preparePackageRoot(plugin);
+    this.#assertOpening(opening);
     this.contributionService.assertViewActivationCurrent(activation, { context: payload.context });
     const partition = `netcatty-plugin-view-${randomUUID()}`;
     const pluginSession = this.electron.session.fromPartition(partition, { cache: false });
@@ -183,12 +232,22 @@ class PluginViewHost {
         if (url !== registration.url) event.preventDefault();
       });
       contents.on("will-attach-webview", (event) => event.preventDefault());
+      contents.once("render-process-gone", () => { void this.close(instanceId, undefined, "view-renderer-gone"); });
+      if (view.location === "vault-page") contents.on("before-input-event", (event, input) => {
+        if (input.type === "keyDown" && input.key === "Escape" && !input.control && !input.meta && !input.alt && !input.shift) {
+          event.preventDefault();
+          void this.close(instanceId, undefined, "host-escape");
+        }
+      });
       const ownerClosed = () => { void this.close(instanceId, undefined, "owner-closed"); };
       const instance = {
         instanceId,
         pluginId: plugin.id,
         viewId: view.id,
         scopeId,
+        location: view.location,
+        activation,
+        context: structuredClone(payload.context ?? {}),
         owner,
         ownerClosed,
         view: contentsView,
@@ -197,6 +256,7 @@ class PluginViewHost {
         sessionRegistration,
         state: "opening",
         attached: false,
+        visible: view.location !== "vault-page",
       };
       this.instances.set(instanceId, instance);
       this.byWebContentsId.set(contents.id, instance);
@@ -208,6 +268,10 @@ class PluginViewHost {
         || owner.isDestroyed() || contents.isDestroyed()) {
         throw new Error("Plugin view ownership changed while opening");
       }
+      this.#assertOpening(opening);
+      // Embedded pages start hidden until the trusted renderer checks host
+      // dialogs/lock/popovers. A late open must never cover a security surface.
+      if (view.location === "vault-page") contentsView.setVisible(false);
       owner.contentView.addChildView(contentsView);
       instance.attached = true;
       contentsView.setBounds(normalizeBounds(payload.bounds));
@@ -232,7 +296,11 @@ class PluginViewHost {
   setVisible(instanceId, visible, sender) {
     if (typeof visible !== "boolean") throw new TypeError("Plugin view visibility must be a boolean");
     const instance = this.#ownedInstance(instanceId, sender);
+    if (visible && this.isLocked()) throw new Error("Plugin view owner is unavailable");
+    const rising = visible && !instance.visible;
+    instance.visible = visible;
     instance.view.setVisible(visible);
+    if (rising && instance.location === "vault-page" && instance.owner.isFocused?.()) instance.contents.focus?.();
   }
 
   async postMessage(instanceId, message, sender) {
@@ -250,11 +318,17 @@ class PluginViewHost {
   }
 
   async close(instanceId, sender, reason = sender ? "renderer-requested" : "host-requested") {
+    const opening = this.opening.get(instanceId);
+    if (opening) {
+      if (sender && this.electron.BrowserWindow.fromWebContents(sender) !== opening.owner) throw new Error("Untrusted plugin view owner");
+      opening.cancelled = true;
+    }
     const instance = this.instances.get(instanceId);
     if (!instance) return;
     if (sender) this.#ownedInstance(instanceId, sender);
     this.instances.delete(instanceId);
     this.byWebContentsId.delete(instance.contents.id);
+    try { instance.cleanupOwner?.(); } catch {}
     try { instance.owner.removeListener?.("closed", instance.ownerClosed); } catch {}
     if (instance.attached) {
       try { instance.owner.contentView.removeChildView(instance.view); } catch {}
@@ -279,6 +353,8 @@ class PluginViewHost {
   }
 
   async shutdown() {
+    this.closed = true;
+    for (const opening of this.opening.values()) opening.cancelled = true;
     await Promise.all([...this.instances.keys()].map((instanceId) => this.close(instanceId)));
     for (const subscription of this.subscriptions.splice(0)) subscription?.dispose?.();
     this.closeListeners.clear();

electron/plugins/pluginViewHost.test.cjs

@@ -87,9 +87,10 @@ function fixture(options = {}) {
     onDidPostViewMessage(listener) { viewListener = listener; return { dispose() {} }; },
     onDidChange(listener) { changeListener = listener; return { dispose() {} }; },
     async activateView() {
+      await options.activateView?.();
       return {
         plugin: { id: "com.example.view", activeVersion: "1.0.0" },
-        view: { id: "com.example.view.panel", entry: "view.html", location: "aside" },
+        view: { id: "com.example.view.panel", entry: "view.html", location: options.location ?? "aside" },
         identity: { runtimeId: "runtime-view-1", pluginVersion: "1.0.0" },
       };
     },
@@ -121,6 +122,8 @@ function fixture(options = {}) {
       setViewState(pluginId, viewId, scopeId, value) { state.set(`${pluginId}:${viewId}:${scopeId}`, value); },
     },
     contributionService,
+    isLocked: options.isLocked,
+    subscribeLock: options.subscribeLock,
     preloadPath: "/runtime/viewPreload.cjs",
   });
   function createOwner() {
@@ -131,7 +134,7 @@ function fixture(options = {}) {
       addChildView(view) { owner.children.push(view); },
       removeChildView(view) { owner.children = owner.children.filter((entry) => entry !== view); },
     };
-    const sender = {};
+    const sender = new EventEmitter();
     senderOwners.set(sender, owner);
     return { owner, sender };
   }
@@ -341,3 +344,114 @@ test("view cleanup failures cannot suppress owner removal or the renderer close
     reason: "renderer-requested",
   }]);
 });
+
+test("Vault pages start hidden and are withdrawn when their current contribution is no longer available", async () => {
+  const value = fixture({ location: "vault-page" });
+  const { owner, sender } = value.createOwner();
+  const result = await value.host.open({ viewId: "com.example.view.panel", scopeId: "window-1:vault-page" }, sender);
+  assert.equal(owner.children.length, 1);
+  assert.equal(value.views[0].visible, false, "host modal checks precede native visibility");
+  value.host.setVisible(result.instanceId, true, sender);
+  assert.equal(value.views[0].visible, true);
+  value.setActivationCurrent(false);
+  value.changeListener()({ reason: "context-key-changed" });
+  assert.equal(owner.children.length, 0);
+  assert.equal(value.views[0].webContents.destroyed, true);
+  await value.host.shutdown();
+});
+
+test("closing a reserved owner instance cancels activation before any native page is constructed", async () => {
+  let release;
+  const gate = new Promise((resolve) => { release = resolve; });
+  const value = fixture({ location: "vault-page", activateView: () => gate });
+  const { owner, sender } = value.createOwner();
+  const other = value.createOwner();
+  const opening = value.host.open({ viewId: "com.example.view.panel", scopeId: "window-1:vault-page", instanceId: "reserved-page" }, sender);
+  await assert.rejects(value.host.close("reserved-page", other.sender), /Untrusted/);
+  await value.host.close("reserved-page", sender);
+  release();
+  await assert.rejects(opening, /cancelled/);
+  assert.equal(value.views.length, 0);
+  assert.equal(owner.children.length, 0);
+  assert.equal(value.host.opening.size, 0);
+  await value.host.shutdown();
+});
+
+test("app lock closes attached pages and cancels pending opens, with subscription cleanup", async () => {
+  let listener, locked = false, disposed = 0;
+  const value = fixture({ location: "vault-page", isLocked: () => locked,
+    subscribeLock(fn) { listener = fn; return () => { disposed++; }; } });
+  const { owner, sender } = value.createOwner();
+  const result = await value.host.open({ viewId: "com.example.view.panel", scopeId: "window-1:vault-page" }, sender);
+  locked = true; listener({ locked: true });
+  assert.equal(owner.children.length, 0);
+  assert.equal(value.views[0].webContents.destroyed, true);
+  await assert.rejects(value.host.open({ viewId: "com.example.view.panel", scopeId: "window-1:vault-page" }, sender), /unavailable/);
+  assert.throws(() => value.host.setVisible(result.instanceId, true, sender));
+  await value.host.shutdown();
+  assert.equal(disposed, 1);
+});
+
+test("browser Scratchpad saves, reopens and clears only its own view state through the real host IPC", async () => {
+  const { readFile } = require("node:fs/promises");
+  const path = require("node:path");
+  const { JSDOM } = require("jsdom");
+  const { VIEW_CHANNELS } = require("./pluginViewHost.cjs");
+  const html = await readFile(path.join(__dirname, "../../examples/plugins/vault-scratchpad/page.html"), "utf8");
+  const script = await readFile(path.join(__dirname, "../../examples/plugins/vault-scratchpad/page.js"), "utf8");
+  const value = fixture({ location: "vault-page" });
+  const { sender } = value.createOwner();
+  async function open(scopeId) {
+    const result = await value.host.open({ viewId: "com.example.view.panel", scopeId }, sender);
+    const contents = value.host.instances.get(result.instanceId).contents;
+    const dom = new JSDOM(html, { runScripts: "outside-only" });
+    dom.window.netcattyView = {
+      getState: async () => value.ipcHandlers.get(VIEW_CHANNELS.getState)({ sender: contents }),
+      setState: async (state) => value.ipcHandlers.get(VIEW_CHANNELS.setState)({ sender: contents }, structuredClone(state)),
+    };
+    dom.window.eval(script);
+    await new Promise((resolve) => setImmediate(resolve));
+    return { dom, document: dom.window.document, id: result.instanceId, contents };
+  }
+  const first = await open("window-1:vault-page");
+  first.document.getElementById("draft").value = "synthetic private draft";
+  first.document.getElementById("save").click();
+  await new Promise((resolve) => setImmediate(resolve));
+  assert.match(first.document.getElementById("status").textContent, /saved/);
+  await value.host.close(first.id, sender); first.dom.window.close();
+  const separate = await open("window-2:vault-page");
+  assert.equal(separate.document.getElementById("draft").value, "", "a different host-owned state scope does not inherit this draft");
+  const reopened = await open("window-1:vault-page");
+  assert.equal(reopened.document.getElementById("draft").value, "synthetic private draft");
+  reopened.document.getElementById("clear").click();
+  await new Promise((resolve) => setImmediate(resolve));
+  assert.equal(reopened.document.getElementById("draft").value, "");
+  const cleared = await open("window-1:vault-page");
+  assert.equal(cleared.document.getElementById("draft").value, "");
+  await value.host.shutdown();
+  assert.throws(() => value.ipcHandlers.get(VIEW_CHANNELS.getState)({ sender: reopened.contents }), /Untrusted/);
+  for (const panel of [separate, reopened, cleared]) panel.dom.window.close();
+});
+
+test("host reload, host/view renderer exit, and host Escape close embedded pages", async () => {
+  for (const action of ["reload", "host-exit", "view-exit", "escape"]) {
+    const value = fixture({ location: "vault-page" });
+    const { sender, owner } = value.createOwner();
+    const opened = await value.host.open({ viewId: "com.example.view.panel", scopeId: "window-1:vault-page" }, sender);
+    const contents = value.views[0].webContents;
+    sender.emit("did-start-navigation", { isMainFrame: true, isSameDocument: true });
+    assert.equal(owner.children.length, 1);
+    if (action === "reload") sender.emit("did-start-navigation", { isMainFrame: true, isSameDocument: false });
+    if (action === "host-exit") sender.emit("render-process-gone");
+    if (action === "view-exit") contents.emit("render-process-gone");
+    if (action === "escape") {
+      let prevented = false;
+      contents.emit("before-input-event", { preventDefault() { prevented = true; } }, { type: "keyDown", key: "Escape" });
+      assert.equal(prevented, true);
+    }
+    assert.equal(owner.children.length, 0, action);
+    assert.equal(value.host.instances.has(opened.instanceId), false, action);
+    assert.equal(sender.listenerCount("render-process-gone"), 0, action);
+    await value.host.shutdown();
+  }
+});

examples/plugins/vault-scratchpad/README.md

@@ -0,0 +1,27 @@
+# Vault Scratchpad
+
+Browser-only example of an actual Vault extension page. It needs only `views`
+and the required `views.vault-pages` feature. No host/session/Vault data,
+clipboard, network, filesystem, credentials or shell permission is requested.
+Text explicitly typed here is stored in this plugin's own bounded view state;
+it is not a Netcatty Note and is not automatically cloud-synced.
+
+```sh
+node packages/plugin-cli/dist/cli.js pack examples/plugins/vault-scratchpad --out /tmp/vault-scratchpad.ncpkg
+```
+
+Import disabled through normal Settings, inspect and enable it. Under Vault's
+**Extensions** group choose **Scratchpad**. The sandbox must fill Vault's main
+content area, retaining the built-in sidebar and top tabs. Opening its detail
+entry must navigate to this same Vault page, without creating a top plugin tab.
+
+For native QA, a separate explicit approval for this fixture's own `views`
+permission is required; earlier fixtures' grants do not cover this ID. With
+synthetic text, save, return to Hosts and reopen; verify the draft. Clear and
+reopen to verify deletion. Cancel the first permission prompt to verify that no
+page attaches. Switch away during opening, then disable/revoke and verify the
+page/entry disappear. Closing or withdrawing a page returns to Hosts. A host
+modal or overlapping menu must hide the native view while it is present.
+
+This source example is not independent/native acceptance evidence. Parent QA
+records the precise tested commit and package hash separately.

examples/plugins/vault-scratchpad/browser.js

@@ -0,0 +1 @@
+export default { activate() {} };

examples/plugins/vault-scratchpad/netcatty.plugin.json

@@ -0,0 +1,23 @@
+{
+  "manifestVersion": 1,
+  "id": "com.netcatty.vault-scratchpad",
+  "name": "vault-scratchpad",
+  "displayName": { "en": "Vault Scratchpad", "zh-CN": "Vault 草稿板" },
+  "version": "0.1.0",
+  "publisher": "netcatty",
+  "license": "GPL-3.0-or-later",
+  "engines": { "netcatty": ">=0.0.0", "api": ">=0.1.0-internal.1 <0.2.0" },
+  "features": { "required": ["views.vault-pages"] },
+  "main": { "browser": "browser.js" },
+  "activationEvents": ["onView:com.netcatty.vault-scratchpad.page"],
+  "permissions": { "required": ["views"] },
+  "contributes": {
+    "views": [{
+      "id": "com.netcatty.vault-scratchpad.page",
+      "title": { "en": "Scratchpad", "zh-CN": "草稿板" },
+      "location": "vault-page",
+      "entry": "page.html",
+      "order": 10
+    }]
+  }
+}

examples/plugins/vault-scratchpad/page.css

@@ -0,0 +1,5 @@
+:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
+body { margin: 0; padding: 24px; } main { max-width: 720px; margin: auto; }
+textarea { display: block; box-sizing: border-box; width: 100%; margin: 12px 0; padding: 10px; font: inherit; }
+button { padding: 8px 12px; margin: 0 8px 0 0; font: inherit; }
+#status { min-height: 1.5em; }

examples/plugins/vault-scratchpad/page.html

@@ -0,0 +1,7 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Vault Scratchpad</title><link rel="stylesheet" href="page.css"></head>
+<body><main><h1>Scratchpad</h1><p>This page stores only text you type here, in this plugin's own view state. It cannot read Vault hosts, notes, credentials, sessions or the clipboard.</p>
+<label for="draft">Synthetic draft</label><textarea id="draft" maxlength="4096" rows="8" disabled></textarea>
+<button type="button" id="save" disabled>Save draft</button><button type="button" id="clear" disabled>Clear draft</button>
+<p id="status" role="status">Loading your plugin draft…</p></main><script src="page.js"></script></body></html>

examples/plugins/vault-scratchpad/page.js

@@ -0,0 +1,25 @@
+"use strict";
+/* global document, window */
+const draft = document.getElementById("draft");
+const status = document.getElementById("status");
+let busy = false;
+async function save(clear) {
+  if (busy) return;
+  busy = true;
+  try {
+    const text = clear ? "" : draft.value;
+    await window.netcattyView.setState({ version: 1, text });
+    if (clear) draft.value = "";
+    status.textContent = clear ? "Draft cleared." : "Draft saved in this plugin only.";
+  } catch { status.textContent = "Could not save this draft."; }
+  finally { busy = false; }
+}
+document.getElementById("save").addEventListener("click", () => { void save(false); });
+document.getElementById("clear").addEventListener("click", () => { void save(true); });
+window.netcattyView.getState().then((state) => {
+  if (state?.version === 1 && typeof state.text === "string" && state.text.length <= 4096) draft.value = state.text;
+  status.textContent = "Ready. Use synthetic text for this example.";
+  draft.disabled = false;
+  document.getElementById("save").disabled = false;
+  document.getElementById("clear").disabled = false;
+}).catch(() => { status.textContent = "Could not load this plugin draft."; });

packages/plugin-cli/src/manifest.ts

@@ -367,6 +367,10 @@ function validateSemantics(manifest: PluginManifest): string[] {
   }
 
   const requiredFeatures = new Set(manifest.features?.required ?? []);
+  if (manifest.contributes?.views?.some((view) => view.location === 'vault-page')
+    && !requiredFeatures.has('views.vault-pages')) {
+    errors.push('Vault pages require views.vault-pages');
+  }
   if (manifest.contributes?.commands?.some((command) => command.interactive)
     && !requiredFeatures.has('commands.interactive')) errors.push('Interactive commands require commands.interactive');
   if (manifest.icon) {

packages/plugin-cli/src/vaultPages.test.ts

@@ -0,0 +1,16 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { readFile } from 'node:fs/promises';
+import { validateManifestValue } from './manifest.js';
+import { checkPluginCompatibility } from './compatibility.js';
+
+const manifest = JSON.parse(await readFile(new URL('../../../examples/plugins/vault-scratchpad/netcatty.plugin.json', import.meta.url), 'utf8'));
+test('Vault pages require exact feature negotiation and the existing views permission', () => {
+  assert.equal(validateManifestValue(manifest).valid, true);
+  assert.equal(validateManifestValue({ ...manifest, features: {} }).valid, false);
+  assert.equal(validateManifestValue({ ...manifest, permissions: {} }).valid, false);
+  assert.equal(checkPluginCompatibility(manifest, { netcattyVersion: '1.0.0', features: [] }).compatible, false);
+  assert.equal(checkPluginCompatibility(manifest, { netcattyVersion: '1.0.0', features: ['views.vault-pages'] }).compatible, true);
+  const legacy = { ...manifest, features: {}, contributes: { views: [{ ...manifest.contributes.views[0], location: 'tab' }] } };
+  assert.equal(validateManifestValue(legacy).valid, true, 'legacy tab packages keep their contract');
+});

packages/plugin-contract/schema/plugin-contract.schema.json

@@ -1005,7 +1005,10 @@
     },
     "ViewLocation": {
       "type": "string",
-      "enum": ["aside", "panel", "tab", "modal", "settings"]
+      "enum": ["aside", "panel", "tab", "modal", "settings", "vault-page"]
+    },
+    "VaultPagesFeature": {
+      "const": "views.vault-pages"
     },
     "ViewContribution": {
       "type": "object",

packages/plugin-contract/src/generated/plugin-contract.ts

@@ -1040,6 +1040,8 @@ export type ThemeIcon = {
   name: string;
 };
 
+export type VaultPagesFeature = "views.vault-pages";
+
 export type ViewContribution = {
   id: ContributionId;
   title: LocalizedText;
@@ -1051,6 +1053,6 @@ export type ViewContribution = {
   retainContextWhenHidden?: boolean;
 };
 
-export type ViewLocation = "aside" | "panel" | "tab" | "modal" | "settings";
+export type ViewLocation = "aside" | "panel" | "tab" | "modal" | "settings" | "vault-page";
 
 export type WireIntegerLimits = {"maxSafeInteger":9007199254740991};

packages/plugin-contract/src/index.ts

@@ -55,4 +55,5 @@ export const PLUGIN_NETWORK_CREDENTIAL_LEASE_FEATURE = "network.credential-lease
 
 export const PLUGIN_HOST_INTERACTION_FEATURE = "host.interactions" as const satisfies import("./generated/plugin-contract.js").HostInteractionFeature;
 
+export const PLUGIN_VAULT_PAGES_FEATURE = "views.vault-pages" as const satisfies import("./generated/plugin-contract.js").VaultPagesFeature;
 export const PLUGIN_INTERACTIVE_COMMAND_FEATURE = "commands.interactive" as const satisfies import("./generated/plugin-contract.js").InteractiveCommandFeature;

packages/plugin-sdk/src/index.ts

@@ -930,4 +930,5 @@ export function throwIfCancellationRequested(token: CancellationToken): void {
 export { PLUGIN_NETWORK_CREDENTIAL_LEASE_FEATURE } from "@netcatty/plugin-contract";
 
 export { PLUGIN_HOST_INTERACTION_FEATURE } from "@netcatty/plugin-contract";
+export { PLUGIN_VAULT_PAGES_FEATURE } from "@netcatty/plugin-contract";
 export { PLUGIN_INTERACTIVE_COMMAND_FEATURE } from "@netcatty/plugin-contract";