@yadsh/dsh-plugin-log-ui 0.1.0 → 0.2.1

package/compatibility.json

@@ -0,0 +1,13 @@
+{
+  "deepseekHarness": {
+    "channel": "next",
+    "range": ">=0.1.1-rc.2 <0.2.0",
+    "testedReleases": [
+      "0.1.1-rc.2"
+    ],
+    "requiredClientFeatures": [
+      "settings.plugin.item"
+    ]
+  },
+  "node": ">=22"
+}

package/lib/client/index.js

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import pluginLogUiRemote from "@yadsh/dsh-plugin-log-ui/remote";
+import { CardShell, bindSettingsExternalStore, registerSettingsCard, startVisibilityAwarePolling, } from "@yadsh/dsh-plugin-kit/client";
 import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import { styles } from "./styles.js";
-import { bindSettingsExternalStore } from "./settings-store.js";
 const SETTINGS_NAMESPACE = "plugin-log";
 const REFRESH_INTERVAL_MS = 2_000;
 const LEVELS = [
@@ -24,13 +24,9 @@ function errorText(error) {
 function LevelOptions({ inherit }) {
     return (_jsxs(_Fragment, { children: [inherit !== undefined ? _jsxs("option", { value: "", children: ["Inherit default (", inherit, ")"] }) : null, LEVELS.map((level) => (_jsx("option", { value: level, children: level === "silent" ? "silent (off)" : level }, level)))] }));
 }
-function ChevronDown() {
-    return (_jsx("svg", { className: "dsh-plugin-card__chevron", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m3.5 5.25 3.5 3.5 3.5-3.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-}
 function PluginLogSettingsCard({ scope, inspect }) {
     const settingsStore = useMemo(() => bindSettingsExternalStore(scope), [scope]);
     const settings = useSyncExternalStore(settingsStore.subscribe, settingsStore.getSnapshot, settingsStore.getSnapshot);
-    const [open, setOpen] = useState(false);
     const [snapshot, setSnapshot] = useState({ consumers: [] });
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
@@ -55,9 +51,7 @@ function PluginLogSettingsCard({ scope, inspect }) {
         }
     }, [inspect]);
     useEffect(() => {
-        void refresh();
-        const timer = window.setInterval(() => void refresh(), REFRESH_INTERVAL_MS);
-        return () => window.clearInterval(timer);
+        return startVisibilityAwarePolling(refresh, REFRESH_INTERVAL_MS);
     }, [refresh]);
     const write = useCallback(async (field, value) => {
         setSaving(true);
@@ -83,7 +77,7 @@ function PluginLogSettingsCard({ scope, inspect }) {
     }, [levels, write]);
     if (settings.status === "unavailable")
         return null;
-    return (_jsxs("li", { className: `dsh-plugin-card${open ? " dsh-plugin-card--open" : ""}`, children: [_jsxs("button", { type: "button", className: "dsh-plugin-card__header", "aria-expanded": open, "aria-label": `${open ? "Hide" : "Show"} settings: Plugin logging`, onClick: () => setOpen(!open), children: [_jsxs("span", { className: "dsh-plugin-card__head-text", children: [_jsx("span", { className: "dsh-plugin-card__name", children: "Plugin logging" }), _jsx("span", { className: "dsh-plugin-card__description", children: "Levels and readable file output for registered server plugins." })] }), _jsxs("span", { className: "dsh-plugin-card__badge", children: [snapshot.consumers.length, " active"] }), _jsx(ChevronDown, {})] }), open ? (_jsxs("div", { className: "dsh-plugin-card__body plu-body", children: [error !== null ? _jsx("p", { className: "plu-error", role: "status", children: error }) : null, !writable ? _jsx("p", { className: "plu-status", children: "Settings are read-only for this connection." }) : null, _jsxs("section", { className: "plu-section", children: [_jsx("h3", { children: "Defaults" }), _jsxs("div", { className: "plu-grid", children: [_jsxs("label", { className: "plu-field", children: [_jsx("span", { children: "Default level" }), _jsx("select", { className: "plu-select", value: defaultLevel, disabled: !writable || saving, onChange: (event) => void write("defaultLevel", event.currentTarget.value), children: _jsx(LevelOptions, {}) })] }), _jsxs("label", { className: "plu-field", children: [_jsx("span", { children: "File format" }), _jsxs("select", { className: "plu-select", value: format, disabled: !writable || saving, onChange: (event) => void write("format", event.currentTarget.value), children: [_jsx("option", { value: "text", children: "Text \u2014 readable lines" }), _jsx("option", { value: "json", children: "JSON \u2014 NDJSON records" })] })] })] }), _jsx("p", { className: "plu-hint", children: "Changes apply live. A format switch affects new lines; an existing daily file can contain both formats until rotation." })] }), _jsxs("section", { className: "plu-section", children: [_jsx("h3", { children: "Registered plugins" }), snapshot.consumers.length === 0 ? (_jsx("p", { className: "plu-empty", children: "No active plugin logger consumers yet." })) : (_jsx("div", { className: "plu-list", children: snapshot.consumers.map((consumer) => (_jsxs("div", { className: "plu-row", children: [_jsxs("div", { className: "plu-plugin", children: [_jsx("code", { children: consumer.pluginId }), _jsxs("span", { children: [consumer.instances, " instance", consumer.instances === 1 ? "" : "s", " \u00B7 active: ", consumer.level, " \u00B7 ", consumer.format] })] }), _jsx("select", { className: "plu-select", "aria-label": `Log level for ${consumer.pluginId}`, value: levels[consumer.pluginId] ?? "", disabled: !writable || saving, onChange: (event) => setOverride(consumer.pluginId, event.currentTarget.value), children: _jsx(LevelOptions, { inherit: defaultLevel }) })] }, consumer.pluginId))) }))] })] })) : null] }));
+    return (_jsxs(CardShell, { title: "Plugin logging", description: "Levels and readable file output for registered server plugins.", badge: _jsxs("span", { className: "dsh-plugin-card__badge", children: [snapshot.consumers.length, " active"] }), label: (open) => `${open ? "Hide" : "Show"} settings: Plugin logging`, bodyClassName: "plu-body", children: [error !== null ? _jsx("p", { className: "plu-error", role: "status", children: error }) : null, !writable ? _jsx("p", { className: "plu-status", children: "Settings are read-only for this connection." }) : null, _jsxs("section", { className: "plu-section", children: [_jsx("h3", { children: "Defaults" }), _jsxs("div", { className: "plu-grid", children: [_jsxs("label", { className: "plu-field", children: [_jsx("span", { children: "Default level" }), _jsx("select", { className: "plu-select", value: defaultLevel, disabled: !writable || saving, onChange: (event) => void write("defaultLevel", event.currentTarget.value), children: _jsx(LevelOptions, {}) })] }), _jsxs("label", { className: "plu-field", children: [_jsx("span", { children: "File format" }), _jsxs("select", { className: "plu-select", value: format, disabled: !writable || saving, onChange: (event) => void write("format", event.currentTarget.value), children: [_jsx("option", { value: "text", children: "Text \u2014 readable lines" }), _jsx("option", { value: "json", children: "JSON \u2014 NDJSON records" })] })] })] }), _jsx("p", { className: "plu-hint", children: "Changes apply live. A format switch affects new lines; an existing daily file can contain both formats until rotation." })] }), _jsxs("section", { className: "plu-section", children: [_jsx("h3", { children: "Registered plugins" }), snapshot.consumers.length === 0 ? (_jsx("p", { className: "plu-empty", children: "No active plugin logger consumers yet." })) : (_jsx("div", { className: "plu-list", children: snapshot.consumers.map((consumer) => (_jsxs("div", { className: "plu-row", children: [_jsxs("div", { className: "plu-plugin", children: [_jsx("code", { children: consumer.pluginId }), _jsxs("span", { children: [consumer.instances, " instance", consumer.instances === 1 ? "" : "s", " \u00B7 active: ", consumer.level, " \u00B7 ", consumer.format] })] }), _jsx("select", { className: "plu-select", "aria-label": `Log level for ${consumer.pluginId}`, value: levels[consumer.pluginId] ?? "", disabled: !writable || saving, onChange: (event) => setOverride(consumer.pluginId, event.currentTarget.value), children: _jsx(LevelOptions, { inherit: defaultLevel }) })] }, consumer.pluginId))) }))] })] }));
 }
 export const inject = ["slots", "settingsScope", "remote"];
 export async function apply(ctx) {
@@ -95,19 +89,13 @@ export async function apply(ctx) {
         const scope = remoteCtx.settingsScope.bind({
             namespace: SETTINGS_NAMESPACE,
         });
-        const style = document.createElement("style");
-        style.dataset.plugin = "dsh-plugin-log-ui";
-        style.textContent = styles;
-        document.head.append(style);
-        const disposeSlot = remoteCtx.slots.inject("settings.plugin.item", () => remoteCtx.slots.register({
-            name: "settings.plugin.item",
+        return registerSettingsCard(remoteCtx, {
             key: SETTINGS_NAMESPACE,
+            pluginName: "dsh-plugin-log-ui",
+            styles,
+            component: PluginLogSettingsCard,
             inject: () => ({ scope, inspect: () => inspector.inspect() }),
-        }, PluginLogSettingsCard));
-        return () => {
-            disposeSlot();
-            style.remove();
-        };
+        });
     });
     return disposeRemote;
 }

package/lib/client/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/client/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/client/index.tsx"],"names":[],"mappings":"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"}

package/lib/client/styles.js

@@ -1,16 +1,5 @@
-export const styles = `
-.dsh-plugin-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;list-style:none;transition:border-color .16s,background .16s}
-.dsh-plugin-card:hover{border-color:var(--dsw-alias-label-dimmed)}
-.dsh-plugin-card--open{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}
-.dsh-plugin-card__header{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;display:flex}
-.dsh-plugin-card__header:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
-.dsh-plugin-card__head-text{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}
-.dsh-plugin-card__name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}
-.dsh-plugin-card__description{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}
-.dsh-plugin-card__badge{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}
-.dsh-plugin-card__chevron{width:14px;height:14px;color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s}
-.dsh-plugin-card--open .dsh-plugin-card__chevron{transform:rotate(180deg)}
-.dsh-plugin-card__body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}
+import { PLUGIN_CARD_SHELL_CSS } from "@yadsh/dsh-plugin-kit/client";
+export const styles = `${PLUGIN_CARD_SHELL_CSS}
 .plu-body{padding-top:16px;display:flex;flex-direction:column;gap:18px}
 .plu-section{display:flex;flex-direction:column;gap:10px}.plu-section h3{margin:0;font-size:13px;color:var(--dsw-alias-label-primary)}
 .plu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.plu-field{display:flex;flex-direction:column;gap:6px}.plu-field>span{font-size:12px;font-weight:500;color:var(--dsw-alias-label-secondary)}

package/lib/client/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/client/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;CAqBrB,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/client/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAErE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,qBAAqB;;;;;;;;;CAS7C,CAAC"}

package/lib/client.js

@@ -4,8 +4,8 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-		let react = require("react");
 		let react_jsx_runtime = require("react/jsx-runtime");
+		let react = require("react");
 		//#region ../../node_modules/.pnpm/zod@4.5.2/node_modules/zod/v4/core/util.js
 		function getEnumValues(entries) {
 			const numericValues = Object.values(entries).filter((v) => typeof v === "number");
@@ -4946,14 +4946,20 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				},
 				sourceLocation: {
 					"file": "packages/dsh-plugin-log-ui/src/index.ts",
-					"line": 62,
+					"line": 75,
 					"column": 3
 				}
 			}]
 		};
 		//#endregion
-		//#region src/client/styles.ts
-		const styles = `
+		//#region ../../packages/plugin-kit/lib/client/plugin-card-css.js
+		/**
+		* Canonical DSH settings-plugin card shell CSS — the single source of truth
+		* for the shared `dsh-plugin-card` outer shell (see AGENTS.md). Plugins must
+		* inject this CSS unchanged and may only append rules for their own controls
+		* inside the card body; plugin-specific shell styling is forbidden.
+		*/
+		const PLUGIN_CARD_SHELL_CSS = `
 .dsh-plugin-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;list-style:none;transition:border-color .16s,background .16s}
 .dsh-plugin-card:hover{border-color:var(--dsw-alias-label-dimmed)}
 .dsh-plugin-card--open{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}
@@ -4966,21 +4972,126 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 .dsh-plugin-card__chevron{width:14px;height:14px;color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s}
 .dsh-plugin-card--open .dsh-plugin-card__chevron{transform:rotate(180deg)}
 .dsh-plugin-card__body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}
-.plu-body{padding-top:16px;display:flex;flex-direction:column;gap:18px}
-.plu-section{display:flex;flex-direction:column;gap:10px}.plu-section h3{margin:0;font-size:13px;color:var(--dsw-alias-label-primary)}
-.plu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.plu-field{display:flex;flex-direction:column;gap:6px}.plu-field>span{font-size:12px;font-weight:500;color:var(--dsw-alias-label-secondary)}
-.plu-select{box-sizing:border-box;width:100%;height:34px;padding:0 10px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);font:inherit;font-size:13px}.plu-select:focus{outline:none;border-color:var(--dsw-alias-border-brand)}.plu-select:disabled{opacity:.55}
-.plu-hint,.plu-status,.plu-empty{margin:0;font-size:12px;line-height:1.5;color:var(--dsw-alias-label-tertiary)}.plu-error{margin:0;padding:9px 10px;border-radius:8px;background:var(--dsw-alias-bg-error);color:var(--dsw-alias-label-error);font-size:12px}
-.plu-list{display:flex;flex-direction:column;border-top:1px solid var(--dsw-alias-border-l2)}.plu-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,220px);gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--dsw-alias-border-l2)}
-.plu-plugin{min-width:0}.plu-plugin code{display:block;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--dsw-alias-label-primary)}.plu-plugin span{display:block;margin-top:3px;font-size:11px;color:var(--dsw-alias-label-tertiary)}
-@media(max-width:720px){.plu-grid{grid-template-columns:1fr}.plu-row{grid-template-columns:1fr}}
 `;
 		//#endregion
-		//#region src/client/settings-store.ts
+		//#region ../../packages/plugin-kit/lib/client/chevron.js
 		/**
-		* React calls external-store callbacks as plain functions. SettingsScope's
-		* methods use their receiver, so forwarding them directly loses `this` and
-		* crashes while reading the internal store.
+		* The standard disclosure chevron of the shared settings-card shell: a
+		* 14x14 inline SVG stroked with `currentColor` (round caps and joins).
+		* Font glyphs must not be used for this shape — their appearance and
+		* baseline vary by font and encoding.
+		*/
+		function ChevronDown() {
+			return (0, react_jsx_runtime.jsx)("svg", {
+				className: "dsh-plugin-card__chevron",
+				viewBox: "0 0 14 14",
+				fill: "none",
+				"aria-hidden": "true",
+				children: (0, react_jsx_runtime.jsx)("path", {
+					d: "m3.5 5.25 3.5 3.5 3.5-3.5",
+					stroke: "currentColor",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			});
+		}
+		//#endregion
+		//#region ../../packages/plugin-kit/lib/client/card-shell.js
+		/**
+		* Shared outer shell of a plugin configuration card (AGENTS.md contract): a
+		* direct `<li>` child of the host list with a full-width header button
+		* (`type="button"`, `aria-expanded`, accessible show/hide label, the
+		* title/description stack, an optional status badge, then the chevron) and a
+		* body rendered only while open. Plugin-specific controls belong inside the
+		* body and must not restyle the shell.
+		*/
+		function CardShell(props) {
+			const [open, setOpen] = (0, react.useState)(false);
+			const body = props.bodyClassName === void 0 ? "dsh-plugin-card__body" : `dsh-plugin-card__body ${props.bodyClassName}`;
+			return (0, react_jsx_runtime.jsxs)("li", {
+				className: open ? "dsh-plugin-card dsh-plugin-card--open" : "dsh-plugin-card",
+				children: [(0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "dsh-plugin-card__header",
+					"aria-expanded": open,
+					"aria-label": props.label(open),
+					onClick: () => {
+						setOpen(!open);
+					},
+					children: [
+						(0, react_jsx_runtime.jsxs)("span", {
+							className: "dsh-plugin-card__head-text",
+							children: [(0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-plugin-card__name",
+								children: props.title
+							}), (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-plugin-card__description",
+								children: props.description
+							})]
+						}),
+						props.badge ?? null,
+						(0, react_jsx_runtime.jsx)(ChevronDown, {})
+					]
+				}), open ? (0, react_jsx_runtime.jsx)("div", {
+					className: body,
+					children: props.children
+				}) : null]
+			});
+		}
+		function noop() {}
+		/**
+		* Inject one stylesheet tag for the plugin's card CSS. The tag carries
+		* `data-plugin="<pluginName>"` and is guarded against double injection; the
+		* returned disposer removes the tag when this call created it. No-op in
+		* non-DOM environments (headless bundles, module probes).
+		*/
+		function injectCardStyles(pluginName, css) {
+			if (typeof document === "undefined") return noop;
+			const selector = `style[data-plugin="${pluginName}"]`;
+			if (typeof document.querySelector === "function" && document.querySelector(selector) !== null) return noop;
+			const tag = document.createElement("style");
+			tag.dataset.plugin = pluginName;
+			tag.textContent = css;
+			document.head.appendChild(tag);
+			return () => {
+				tag.remove();
+			};
+		}
+		/**
+		* Register the card component into the shared settings-plugins slot. Returns
+		* the registration disposer. Use this variant when the plugin drives the
+		* slot's inject-factory itself (e.g. to dispose a form controller alongside).
+		*/
+		function registerSettingsSlot(host, options) {
+			const slotOptions = {
+				name: options.slotName ?? "settings.plugin.item",
+				key: options.key,
+				...options.locale === void 0 ? {} : { locale: options.locale },
+				...options.inject === void 0 ? {} : { inject: options.inject }
+			};
+			return host.slots.register(slotOptions, options.component);
+		}
+		/**
+		* Full bootstrap: inject {@link options.styles} once (when provided), then
+		* mount the card into the settings-plugins slot. Returns a disposer removing
+		* the slot effect and the injected stylesheet.
+		*/
+		function registerSettingsCard(host, options) {
+			const removeStyles = options.styles === void 0 || options.pluginName === void 0 ? void 0 : injectCardStyles(options.pluginName, options.styles);
+			const slotName = options.slotName ?? "settings.plugin.item";
+			const disposeEffect = host.slots.inject(slotName, () => registerSettingsSlot(host, options));
+			return () => {
+				disposeEffect();
+				removeStyles?.();
+			};
+		}
+		//#endregion
+		//#region ../../packages/plugin-kit/lib/client/settings-store.js
+		/**
+		* React calls external-store callbacks as plain functions, while
+		* SettingsScope's methods depend on their receiver. Forwarding the methods
+		* directly loses `this` and crashes while reading the internal store, so
+		* bind them through stable wrappers.
 		*/
 		function bindSettingsExternalStore(scope) {
 			return {
@@ -4988,6 +5099,35 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				getSnapshot: () => scope.getSnapshot()
 			};
 		}
+		//#endregion
+		//#region ../../packages/plugin-kit/lib/client/polling.js
+		function startVisibilityAwarePolling(refresh, intervalMs, visibilityDocument = document, pollingWindow = window) {
+			const refreshWhenVisible = () => {
+				if (!visibilityDocument.hidden) refresh();
+			};
+			const handleVisibilityChange = () => {
+				refreshWhenVisible();
+			};
+			refreshWhenVisible();
+			const timer = pollingWindow.setInterval(refreshWhenVisible, intervalMs);
+			visibilityDocument.addEventListener("visibilitychange", handleVisibilityChange);
+			return () => {
+				pollingWindow.clearInterval(timer);
+				visibilityDocument.removeEventListener("visibilitychange", handleVisibilityChange);
+			};
+		}
+		//#endregion
+		//#region src/client/styles.ts
+		const styles = `${PLUGIN_CARD_SHELL_CSS}
+.plu-body{padding-top:16px;display:flex;flex-direction:column;gap:18px}
+.plu-section{display:flex;flex-direction:column;gap:10px}.plu-section h3{margin:0;font-size:13px;color:var(--dsw-alias-label-primary)}
+.plu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.plu-field{display:flex;flex-direction:column;gap:6px}.plu-field>span{font-size:12px;font-weight:500;color:var(--dsw-alias-label-secondary)}
+.plu-select{box-sizing:border-box;width:100%;height:34px;padding:0 10px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-primary);font:inherit;font-size:13px}.plu-select:focus{outline:none;border-color:var(--dsw-alias-border-brand)}.plu-select:disabled{opacity:.55}
+.plu-hint,.plu-status,.plu-empty{margin:0;font-size:12px;line-height:1.5;color:var(--dsw-alias-label-tertiary)}.plu-error{margin:0;padding:9px 10px;border-radius:8px;background:var(--dsw-alias-bg-error);color:var(--dsw-alias-label-error);font-size:12px}
+.plu-list{display:flex;flex-direction:column;border-top:1px solid var(--dsw-alias-border-l2)}.plu-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,220px);gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--dsw-alias-border-l2)}
+.plu-plugin{min-width:0}.plu-plugin code{display:block;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--dsw-alias-label-primary)}.plu-plugin span{display:block;margin-top:3px;font-size:11px;color:var(--dsw-alias-label-tertiary)}
+@media(max-width:720px){.plu-grid{grid-template-columns:1fr}.plu-row{grid-template-columns:1fr}}
+`;
 		//#endregion
 		//#region src/client/index.tsx
 		const SETTINGS_NAMESPACE = "plugin-log";
@@ -5019,24 +5159,9 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				children: level === "silent" ? "silent (off)" : level
 			}, level))] });
 		}
-		function ChevronDown() {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-				className: "dsh-plugin-card__chevron",
-				viewBox: "0 0 14 14",
-				fill: "none",
-				"aria-hidden": "true",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					d: "m3.5 5.25 3.5 3.5 3.5-3.5",
-					stroke: "currentColor",
-					strokeLinecap: "round",
-					strokeLinejoin: "round"
-				})
-			});
-		}
 		function PluginLogSettingsCard({ scope, inspect }) {
 			const settingsStore = (0, react.useMemo)(() => bindSettingsExternalStore(scope), [scope]);
 			const settings = (0, react.useSyncExternalStore)(settingsStore.subscribe, settingsStore.getSnapshot, settingsStore.getSnapshot);
-			const [open, setOpen] = (0, react.useState)(false);
 			const [snapshot, setSnapshot] = (0, react.useState)({ consumers: [] });
 			const [error, setError] = (0, react.useState)(null);
 			const [saving, setSaving] = (0, react.useState)(false);
@@ -5057,9 +5182,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				}
 			}, [inspect]);
 			(0, react.useEffect)(() => {
-				refresh();
-				const timer = window.setInterval(() => void refresh(), REFRESH_INTERVAL_MS);
-				return () => window.clearInterval(timer);
+				return startVisibilityAwarePolling(refresh, REFRESH_INTERVAL_MS);
 			}, [refresh]);
 			const write = (0, react.useCallback)(async (field, value) => {
 				setSaving(true);
@@ -5080,114 +5203,95 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				write("levels", next);
 			}, [levels, write]);
 			if (settings.status === "unavailable") return null;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: `dsh-plugin-card${open ? " dsh-plugin-card--open" : ""}`,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					type: "button",
-					className: "dsh-plugin-card__header",
-					"aria-expanded": open,
-					"aria-label": `${open ? "Hide" : "Show"} settings: Plugin logging`,
-					onClick: () => setOpen(!open),
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "dsh-plugin-card__head-text",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-plugin-card__name",
-								children: "Plugin logging"
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-plugin-card__description",
-								children: "Levels and readable file output for registered server plugins."
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "dsh-plugin-card__badge",
-							children: [snapshot.consumers.length, " active"]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, {})
-					]
-				}), open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "dsh-plugin-card__body plu-body",
-					children: [
-						error !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "plu-error",
-							role: "status",
-							children: error
-						}) : null,
-						!writable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "plu-status",
-							children: "Settings are read-only for this connection."
-						}) : null,
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-							className: "plu-section",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: "Defaults" }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "plu-grid",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-										className: "plu-field",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Default level" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
-											className: "plu-select",
-											value: defaultLevel,
-											disabled: !writable || saving,
-											onChange: (event) => void write("defaultLevel", event.currentTarget.value),
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LevelOptions, {})
-										})]
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-										className: "plu-field",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "File format" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-											className: "plu-select",
-											value: format,
-											disabled: !writable || saving,
-											onChange: (event) => void write("format", event.currentTarget.value),
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-												value: "text",
-												children: "Text — readable lines"
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-												value: "json",
-												children: "JSON — NDJSON records"
-											})]
-										})]
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardShell, {
+				title: "Plugin logging",
+				description: "Levels and readable file output for registered server plugins.",
+				badge: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "dsh-plugin-card__badge",
+					children: [snapshot.consumers.length, " active"]
+				}),
+				label: (open) => `${open ? "Hide" : "Show"} settings: Plugin logging`,
+				bodyClassName: "plu-body",
+				children: [
+					error !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "plu-error",
+						role: "status",
+						children: error
+					}) : null,
+					!writable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "plu-status",
+						children: "Settings are read-only for this connection."
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+						className: "plu-section",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: "Defaults" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "plu-grid",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+									className: "plu-field",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Default level" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+										className: "plu-select",
+										value: defaultLevel,
+										disabled: !writable || saving,
+										onChange: (event) => void write("defaultLevel", event.currentTarget.value),
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LevelOptions, {})
 									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: "plu-hint",
-									children: "Changes apply live. A format switch affects new lines; an existing daily file can contain both formats until rotation."
-								})
-							]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-							className: "plu-section",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: "Registered plugins" }), snapshot.consumers.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "plu-empty",
-								children: "No active plugin logger consumers yet."
-							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "plu-list",
-								children: snapshot.consumers.map((consumer) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "plu-row",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "plu-plugin",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: consumer.pluginId }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-											consumer.instances,
-											" instance",
-											consumer.instances === 1 ? "" : "s",
-											" · active: ",
-											consumer.level,
-											" · ",
-											consumer.format
-										] })]
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+									className: "plu-field",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "File format" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
 										className: "plu-select",
-										"aria-label": `Log level for ${consumer.pluginId}`,
-										value: levels[consumer.pluginId] ?? "",
+										value: format,
 										disabled: !writable || saving,
-										onChange: (event) => setOverride(consumer.pluginId, event.currentTarget.value),
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LevelOptions, { inherit: defaultLevel })
+										onChange: (event) => void write("format", event.currentTarget.value),
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: "text",
+											children: "Text — readable lines"
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: "json",
+											children: "JSON — NDJSON records"
+										})]
 									})]
-								}, consumer.pluginId))
-							})]
-						})
-					]
-				}) : null]
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "plu-hint",
+								children: "Changes apply live. A format switch affects new lines; an existing daily file can contain both formats until rotation."
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+						className: "plu-section",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: "Registered plugins" }), snapshot.consumers.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "plu-empty",
+							children: "No active plugin logger consumers yet."
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "plu-list",
+							children: snapshot.consumers.map((consumer) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "plu-row",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "plu-plugin",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: consumer.pluginId }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+										consumer.instances,
+										" instance",
+										consumer.instances === 1 ? "" : "s",
+										" · active: ",
+										consumer.level,
+										" · ",
+										consumer.format
+									] })]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+									className: "plu-select",
+									"aria-label": `Log level for ${consumer.pluginId}`,
+									value: levels[consumer.pluginId] ?? "",
+									disabled: !writable || saving,
+									onChange: (event) => setOverride(consumer.pluginId, event.currentTarget.value),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LevelOptions, { inherit: defaultLevel })
+								})]
+							}, consumer.pluginId))
+						})]
+					})
+				]
 			});
 		}
 		const inject = [
@@ -5200,22 +5304,16 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 			await ctx.inject(["remote.pluginLogUi"], (remoteCtx) => {
 				const inspector = remoteCtx.remote.pluginLogUi;
 				const scope = remoteCtx.settingsScope.bind({ namespace: SETTINGS_NAMESPACE });
-				const style = document.createElement("style");
-				style.dataset.plugin = "dsh-plugin-log-ui";
-				style.textContent = styles;
-				document.head.append(style);
-				const disposeSlot = remoteCtx.slots.inject("settings.plugin.item", () => remoteCtx.slots.register({
-					name: "settings.plugin.item",
+				return registerSettingsCard(remoteCtx, {
 					key: SETTINGS_NAMESPACE,
+					pluginName: "dsh-plugin-log-ui",
+					styles,
+					component: PluginLogSettingsCard,
 					inject: () => ({
 						scope,
 						inspect: () => inspector.inspect()
 					})
-				}, PluginLogSettingsCard));
-				return () => {
-					disposeSlot();
-					style.remove();
-				};
+				});
 			});
 			return disposeRemote;
 		}