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>

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,6 +114,81 @@ export function PluginInventorySettingsTab({ list, setEnabled, t }: PluginInvent
     setRequest(value => value + 1)
   }
 
+  /** 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')
+    const open = expanded === entry.entryId
+    const detailId = `${catalogId}-details-${encodeURIComponent(entry.entryId)}`
+    return (
+      <li
+        className={css.card}
+        key={entry.entryId}
+        data-plugin-entry={entry.entryId}
+        data-open={open ? 'true' : undefined}
+      >
+        <button
+          className={css.cardContent}
+          type="button"
+          aria-expanded={open}
+          aria-controls={detailId}
+          aria-label={entry.enabled ? `${title}, ${status}, ${configuration}` : `${title}, ${configuration}`}
+          onClick={() => {
+            setExpanded(current => current === entry.entryId ? null : entry.entryId)
+          }}
+        >
+          <strong className={css.cardTitle} title={entry.moduleName}>{title}</strong>
+          <span className={css.cardTrailing}>
+            {entry.enabled ? (
+              <span
+                className={css.statusDot}
+                data-phase={entry.fiberPhase ?? 'unobserved'}
+                role="img"
+                aria-label={status}
+                title={status}
+              />
+            ) : null}
+            <span className={css.configTag} data-enabled={entry.enabled ? 'true' : 'false'}>
+              {configuration}
+            </span>
+            <IconChevronDownOutline14 className={css.chevron} size={12} aria-hidden="true" />
+          </span>
+        </button>
+        {open ? (
+          <div className={css.cardDetails} id={detailId}>
+            <code className={css.entryValue} data-loader-entry>{entry.entryId}</code>
+            <dl className={css.details}>
+              <div>
+                <dt>{t('configuration')}</dt>
+                <dd>{configuration}</dd>
+              </div>
+              {entry.enabled ? (
+                <div>
+                  <dt>{t('cordis')}</dt>
+                  <dd>{status}</dd>
+                </div>
+              ) : null}
+            </dl>
+            {entry.protected ? (
+              <p className={css.required}>{t('required')}</p>
+            ) : (
+              <button
+                className={css.toggle}
+                type="button"
+                disabled={busy === entry.entryId}
+                aria-busy={busy === entry.entryId || undefined}
+                onClick={() => { toggle(entry.entryId, !entry.enabled) }}
+              >
+                {busy === entry.entryId ? t('toggling') : entry.enabled ? t('disable') : t('enable')}
+              </button>
+            )}
+          </div>
+        ) : null}
+      </li>
+    )
+  }
+
   return (
     <div className={css.section} aria-busy={state.status === 'loading'}>
       {state.status === 'loading' ? <p className={css.status}>{t('loading')}</p> : null}
@@ -139,83 +219,31 @@ export function PluginInventorySettingsTab({ list, setEnabled, t }: PluginInvent
           {state.snapshot.entries.length > 0 && filteredEntries.length === 0
             ? <p className={css.status}>{t('emptySearch')}</p>
             : null}
-          {filteredEntries.length > 0 ? (
+          {userEntries.length > 0 ? (
             <ul className={css.cards}>
-              {filteredEntries.map((entry) => {
-                const status = phaseLabel(entry.fiberPhase, t)
-                const title = moduleShortName(entry.moduleName)
-                const configuration = t(entry.enabled ? 'enabledTag' : 'disabledTag')
-                const open = expanded === entry.entryId
-                const detailId = `${catalogId}-details-${encodeURIComponent(entry.entryId)}`
-                return (
-                  <li
-                    className={css.card}
-                    key={entry.entryId}
-                    data-plugin-entry={entry.entryId}
-                    data-open={open ? 'true' : undefined}
-                  >
-                    <button
-                      className={css.cardContent}
-                      type="button"
-                      aria-expanded={open}
-                      aria-controls={detailId}
-                      aria-label={entry.enabled ? `${title}, ${status}, ${configuration}` : `${title}, ${configuration}`}
-                      onClick={() => {
-                        setExpanded(current => current === entry.entryId ? null : entry.entryId)
-                      }}
-                    >
-                      <strong className={css.cardTitle} title={entry.moduleName}>{title}</strong>
-                      <span className={css.cardTrailing}>
-                        {entry.enabled ? (
-                          <span
-                            className={css.statusDot}
-                            data-phase={entry.fiberPhase ?? 'unobserved'}
-                            role="img"
-                            aria-label={status}
-                            title={status}
-                          />
-                        ) : null}
-                        <span className={css.configTag} data-enabled={entry.enabled ? 'true' : 'false'}>
-                          {configuration}
-                        </span>
-                        <IconChevronDownOutline14 className={css.chevron} size={12} aria-hidden="true" />
-                      </span>
-                    </button>
-                    {open ? (
-                      <div className={css.cardDetails} id={detailId}>
-                        <code className={css.entryValue} data-loader-entry>{entry.entryId}</code>
-                        <dl className={css.details}>
-                          <div>
-                            <dt>{t('configuration')}</dt>
-                            <dd>{configuration}</dd>
-                          </div>
-                          {entry.enabled ? (
-                            <div>
-                              <dt>{t('cordis')}</dt>
-                              <dd>{status}</dd>
-                            </div>
-                          ) : null}
-                        </dl>
-                        {entry.protected ? (
-                          <p className={css.required}>{t('required')}</p>
-                        ) : (
-                          <button
-                            className={css.toggle}
-                            type="button"
-                            disabled={busy === entry.entryId}
-                            aria-busy={busy === entry.entryId || undefined}
-                            onClick={() => { toggle(entry.entryId, !entry.enabled) }}
-                          >
-                            {busy === entry.entryId ? t('toggling') : entry.enabled ? t('disable') : t('enable')}
-                          </button>
-                        )}
-                      </div>
-                    ) : null}
-                  </li>
-                )
-              })}
+              {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>