feat(ui): group the plugin list into toggleable and system sections

User-added (toggleable) plugins carry an enable/disable button in the main
list; required system plugins sit in a separate collapsible 'system plugins'
section with no controls. The system section starts expanded so the existing
web e2e/snapshot (which targets a system plugin row) still passes.

Co-Authored-By: Claude <noreply@anthropic.com>

.agents/notes/implemented/feature/2026-08-14-plugin-enable-disable-in-page.i18n.yaml

@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write .agents/notes/implemented/feature/2026-08-14-plugin-enable-disable-in-page.md
-2026-08-14-plugin-enable-disable-in-page.md: 10560799d5543a3622e0a8d751012066ca36512a
-2026-08-14-plugin-enable-disable-in-page.zh.md: 988b9f8fad9216f358e39966767e2e0649715a43
+2026-08-14-plugin-enable-disable-in-page.md: b868a8e4f84357e944c184cb80d58ea40858f7b8
+2026-08-14-plugin-enable-disable-in-page.zh.md: c53187fd067f3e208e62ecc09d361548ba61bda1

.agents/notes/implemented/feature/2026-08-14-plugin-enable-disable-in-page.md

@@ -34,6 +34,9 @@ patch's `applyEntryPatches` target lookup.
 
 The Web plugin-list tab (`ui-settings-plugin-inventory`) adds an enable/disable
 button to each expanded card, wired to the Remote, re-listing after the toggle.
+The list is grouped: toggleable plugins carry the button in the main list, while
+the required system plugins sit in a separate collapsible "system plugins"
+section with no controls.
 
 **Guard:** every entry carries a `protected` flag. The rule is default-protect —
 disabling a plugin that another plugin injects breaks the dependent, and

.agents/notes/implemented/feature/2026-08-14-plugin-enable-disable-in-page.zh.md

@@ -26,7 +26,8 @@ Web UI 的插件列表是只读的：它展示 Loader 的条目和生命周期
 （`include:<rowId>`）；两者不同，只有裸 id 能命中 patch 的 `applyEntryPatches` 目标查找。
 
 Web 插件列表 tab（`ui-settings-plugin-inventory`）在每张展开卡片的详情区加启用/停用按钮，
-绑定该 Remote，切换后重新拉取列表。
+绑定该 Remote，切换后重新拉取列表。列表分组：可切换插件在主列表带按钮，必需的系统插件
+放在一个可折叠的"系统插件"区，无任何开关。
 
 **门卫：** 每条条目带 `protected` 标记。规则默认保护——停用一个被其他插件注入的插件会破坏
 依赖者，启用一个服务不可用的插件会导致启动失败（坏切换后都会表现为

packages/client/ui-settings-plugin-inventory/src/client/PluginInventorySettingsTab.module.css

@@ -289,3 +289,25 @@
   opacity: 0.7;
   font-size: 0.85em;
 }
+
+.systemSection {
+  margin-top: 1rem;
+}
+
+.systemHeading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 0;
+  font-weight: 600;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+}
+
+.systemCount {
+  font-weight: 400;
+  opacity: 0.7;
+}

packages/client/ui-settings-plugin-inventory/src/client/PluginInventorySettingsTab.tsx

@@ -70,6 +70,7 @@ export function PluginInventorySettingsTab({ list, setEnabled, t }: PluginInvent
   const [expanded, setExpanded] = useState<PluginInventoryEntry['entryId'] | null>(null)
   const [state, setState] = useState<ViewState>({ status: 'loading' })
   const [busy, setBusy] = useState<PluginInventoryEntry['entryId'] | null>(null)
+  const [systemOpen, setSystemOpen] = useState(true)
 
   useEffect(() => {
     let current = true
@@ -97,6 +98,10 @@ export function PluginInventorySettingsTab({ list, setEnabled, t }: PluginInvent
       : [],
     [normalizedQuery, state],
   )
+  // User-added (opt-in bundle) plugins are toggleable; the rest are required
+  // system plugins shown in a separate collapsible section without toggles.
+  const userEntries = filteredEntries.filter(entry => !entry.protected)
+  const systemEntries = filteredEntries.filter(entry => entry.protected)
 
   useEffect(() => {
     if (expanded !== null && !filteredEntries.some(entry => entry.entryId === expanded)) {
@@ -109,39 +114,8 @@ export function PluginInventorySettingsTab({ list, setEnabled, t }: PluginInvent
     setRequest(value => value + 1)
   }
 
-  return (
-    <div className={css.section} aria-busy={state.status === 'loading'}>
-      {state.status === 'loading' ? <p className={css.status}>{t('loading')}</p> : null}
-      {state.status === 'error' ? (
-        <div className={css.failure}>
-          <p role="alert">{t('error')}</p>
-          <button type="button" onClick={retry}>{t('retry')}</button>
-        </div>
-      ) : null}
-      {state.status === 'ready' ? (
-        <div className={css.catalog}>
-          <label className={css.search}>
-            <IconSearchOutline16 aria-hidden="true" />
-            <span className={css.visuallyHidden}>{t('search')}</span>
-            <input
-              type="search"
-              value={query}
-              placeholder={t('search')}
-              aria-label={t('search')}
-              onChange={(event) => { setQuery(event.currentTarget.value) }}
-            />
-          </label>
-          <div className={css.catalogHeading}>
-            <h3>{t('catalog')}</h3>
-            <span data-plugin-count={filteredEntries.length}>{filteredEntries.length}</span>
-          </div>
-          {state.snapshot.entries.length === 0 ? <p className={css.status}>{t('empty')}</p> : null}
-          {state.snapshot.entries.length > 0 && filteredEntries.length === 0
-            ? <p className={css.status}>{t('emptySearch')}</p>
-            : null}
-          {filteredEntries.length > 0 ? (
-            <ul className={css.cards}>
-              {filteredEntries.map((entry) => {
+  /** Render one inventory card; the toggle is hidden for protected system plugins. */
+  const card = (entry: PluginInventoryEntry): ReactNode => {
     const status = phaseLabel(entry.fiberPhase, t)
     const title = moduleShortName(entry.moduleName)
     const configuration = t(entry.enabled ? 'enabledTag' : 'disabledTag')
@@ -213,9 +187,63 @@ export function PluginInventorySettingsTab({ list, setEnabled, t }: PluginInvent
         ) : null}
       </li>
     )
-              })}
+  }
+
+  return (
+    <div className={css.section} aria-busy={state.status === 'loading'}>
+      {state.status === 'loading' ? <p className={css.status}>{t('loading')}</p> : null}
+      {state.status === 'error' ? (
+        <div className={css.failure}>
+          <p role="alert">{t('error')}</p>
+          <button type="button" onClick={retry}>{t('retry')}</button>
+        </div>
+      ) : null}
+      {state.status === 'ready' ? (
+        <div className={css.catalog}>
+          <label className={css.search}>
+            <IconSearchOutline16 aria-hidden="true" />
+            <span className={css.visuallyHidden}>{t('search')}</span>
+            <input
+              type="search"
+              value={query}
+              placeholder={t('search')}
+              aria-label={t('search')}
+              onChange={(event) => { setQuery(event.currentTarget.value) }}
+            />
+          </label>
+          <div className={css.catalogHeading}>
+            <h3>{t('catalog')}</h3>
+            <span data-plugin-count={filteredEntries.length}>{filteredEntries.length}</span>
+          </div>
+          {state.snapshot.entries.length === 0 ? <p className={css.status}>{t('empty')}</p> : null}
+          {state.snapshot.entries.length > 0 && filteredEntries.length === 0
+            ? <p className={css.status}>{t('emptySearch')}</p>
+            : null}
+          {userEntries.length > 0 ? (
+            <ul className={css.cards}>
+              {userEntries.map(card)}
             </ul>
           ) : null}
+          {systemEntries.length > 0 ? (
+            <section className={css.systemSection} aria-labelledby={`${catalogId}-system-heading`}>
+              <button
+                className={css.systemHeading}
+                type="button"
+                id={`${catalogId}-system-heading`}
+                aria-expanded={systemOpen}
+                onClick={() => { setSystemOpen(current => !current) }}
+              >
+                <span>{t('systemPlugins')}</span>
+                <span className={css.systemCount}>{systemEntries.length}</span>
+                <IconChevronDownOutline14 className={css.chevron} size={12} aria-hidden="true" />
+              </button>
+              {systemOpen ? (
+                <ul className={css.cards}>
+                  {systemEntries.map(card)}
+                </ul>
+              ) : null}
+            </section>
+          ) : null}
         </div>
       ) : null}
     </div>

packages/client/ui-settings-plugin-inventory/src/client/locales.ts

@@ -24,6 +24,7 @@ export const zh = {
   disable: '停用',
   toggling: '切换中…',
   required: '应用必需插件，不可切换',
+  systemPlugins: '系统插件',
 } satisfies Record<string, string>
 
 /** Plugin inventory locale key union. */
@@ -53,4 +54,5 @@ export const en = {
   disable: 'Disable',
   toggling: 'Toggling…',
   required: 'Required by the app; cannot be toggled',
+  systemPlugins: 'System plugins',
 } satisfies Record<PluginInventoryLocaleKey, string>

packages/host/plugin-inventory/README.md

@@ -6,7 +6,7 @@ Host projection of the current Cordis Loader tree with per-plugin enable/disable
 
 The phase is `pending`, `loading`, `active`, `failed`, or `unloading`; it is `null` when the entry has no live root Fiber. The snapshot is intentionally point-in-time: Loader remains the sole lifecycle authority, while this package owns no cache, history, provenance model, or event stream. `setEnabled` toggles one entry live through `ctx.loader.update` and persists an explicit `disabled` override into the profile's user patch layer so the choice survives a restart (a bundle-default disable needs the `disabled: false` override to stick).
 
-Every entry carries a `protected` flag. The guard is default-protect: every shipped plugin is required by the application (disabling one that another plugin injects breaks the dependent; enabling one whose service is unavailable fails the boot), so `setEnabled` refuses them and the UI hides the toggle. Only plugins a deployment adds through an opt-in bundle (`USER_TOGGLEABLE_PLUGINS` in `src/required.ts`) are toggleable. Its public payload types live under `./types`, and Typert generates the Host and Client Remote artifacts exposed by `./typert` and `./remote`.
+Every entry carries a `protected` flag. The guard is default-protect: every shipped plugin is required by the application (disabling one that another plugin injects breaks the dependent; enabling one whose service is unavailable fails the boot), so `setEnabled` refuses them and the UI hides the toggle. Only plugins a deployment adds through an opt-in bundle (`USER_TOGGLEABLE_PLUGINS` in `src/required.ts`) are toggleable. The Web plugin-list tab groups the inventory accordingly: toggleable plugins carry an enable/disable button, while the required system plugins sit in a separate collapsible "system plugins" section with no controls. Its public payload types live under `./types`, and Typert generates the Host and Client Remote artifacts exposed by `./typert` and `./remote`.
 
 The service is Remote-only and deliberately declares no same-process Cordis `Context` merge. Client packages consume it through the explicit [`api-remotes`](../../api/remotes/README.md) assembly rather than importing the Host implementation.
 

packages/host/plugin-inventory/README.zh.md

@@ -6,7 +6,7 @@
 
 阶段为 `pending`、`loading`、`active`、`failed` 或 `unloading`；条目没有存活的根 Fiber 时则为 `null`。该快照刻意只表示调用当下：Loader 仍是唯一的生命周期权威，本包不拥有缓存、历史、来源模型或事件流。`setEnabled` 通过 `ctx.loader.update` 实时切换单条条目，并把显式 `disabled` 覆盖写进 profile 的用户补丁层，使选择在重启后保留（bundle 默认禁用的行需要 `disabled: false` 覆盖才能保持启用）。
 
-每条条目带 `protected` 标记。守卫默认保护：所有随包插件都是应用必需（停用一个被其他插件注入的插件会破坏依赖者；启用一个服务不可用的插件会导致启动失败），所以 `setEnabled` 拒绝它们、UI 隐藏开关。只有部署通过 opt-in bundle 添加的插件（`src/required.ts` 的 `USER_TOGGLEABLE_PLUGINS`）可切换。公开 payload 类型位于 `./types`，Typert 生成由 `./typert` 与 `./remote` 导出的 Host 和 Client Remote 产物。
+每条条目带 `protected` 标记。守卫默认保护：所有随包插件都是应用必需（停用一个被其他插件注入的插件会破坏依赖者；启用一个服务不可用的插件会导致启动失败），所以 `setEnabled` 拒绝它们、UI 隐藏开关。只有部署通过 opt-in bundle 添加的插件（`src/required.ts` 的 `USER_TOGGLEABLE_PLUGINS`）可切换。Web 插件列表 tab 据此分组：可切换插件带启用/停用按钮，必需的系统插件放在一个可折叠的"系统插件"区，无任何开关。公开 payload 类型位于 `./types`，Typert 生成由 `./typert` 与 `./remote` 导出的 Host 和 Client Remote 产物。
 
 该服务仅供 Remote 使用，刻意不声明同进程 Cordis `Context` merge。Client 包通过显式的 [`api-remotes`](../../api/remotes/README.md) 组合消费它，而不导入 Host 实现。