@yadsh/dsh-prompt-firewall 0.1.2 → 0.2.0

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");
@@ -5124,7 +5124,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				},
 				sourceLocation: {
 					"file": "packages/dsh-prompt-firewall/src/index.ts",
-					"line": 140,
+					"line": 136,
 					"column": 3
 				}
 			}, {
@@ -5173,26 +5173,20 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				},
 				sourceLocation: {
 					"file": "packages/dsh-prompt-firewall/src/index.ts",
-					"line": 154,
+					"line": 150,
 					"column": 9
 				}
 			}]
 		};
 		//#endregion
-		//#region src/client/settings-store.ts
+		//#region ../../packages/plugin-kit/lib/client/plugin-card-css.js
 		/**
-		* React invokes external-store callbacks as plain functions. SettingsScope's
-		* methods depend on their receiver, so forward calls through stable wrappers.
+		* 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.
 		*/
-		function bindSettingsExternalStore(scope) {
-			return {
-				subscribe: (listener) => scope.subscribe(listener),
-				getSnapshot: () => scope.getSnapshot()
-			};
-		}
-		//#endregion
-		//#region src/client/styles.ts
-		const styles = `
+		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)}
@@ -5205,6 +5199,153 @@ 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}
+`;
+		//#endregion
+		//#region ../../packages/plugin-kit/lib/client/chevron.js
+		/**
+		* 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 {
+				subscribe: (listener) => scope.subscribe(listener),
+				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}
 .pf-body,.pf-body *{box-sizing:border-box}
 .pf-body{padding-top:16px;display:grid;gap:18px;color:var(--dsw-alias-label-primary)}
 .pf-section{display:grid;gap:12px}.pf-section-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.pf-section-title h3{font-size:13px;margin:0}.pf-muted{color:var(--dsw-alias-label-tertiary);font-size:12px;margin:0;line-height:1.5}
@@ -5221,32 +5362,11 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 @media(max-width:720px){.pf-grid{grid-template-columns:1fr}.pf-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.pf-editor{grid-template-columns:1fr 1fr}.pf-editor input{grid-column:1/-1}.pf-rule{grid-template-columns:minmax(0,1fr) 58px auto}.pf-rule .pf-kind{display:none}}
 `;
 		//#endregion
-		//#region src/client/index.tsx
-		const SETTINGS_NAMESPACE = "prompt-firewall";
-		const REFRESH_INTERVAL_MS = 3e3;
+		//#region src/client/sections.tsx
 		const EMPTY_LIST = Object.freeze([]);
 		function list(config, field) {
 			return config?.[field] ?? EMPTY_LIST;
 		}
-		function displayError(error) {
-			if (error instanceof Error) return error.message;
-			if (typeof error === "string") return error;
-			return "Could not load Prompt Inspector data.";
-		}
-		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 Toggle(props) {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 				className: "pf-toggle-row",
@@ -5264,68 +5384,163 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 				})]
 			});
 		}
-		function PromptFirewallCard({ scope, inspect, setSectionPolicy }) {
-			const settingsStore = (0, react.useMemo)(() => bindSettingsExternalStore(scope), [scope]);
-			const settings = (0, react.useSyncExternalStore)(settingsStore.subscribe, settingsStore.getSnapshot, settingsStore.getSnapshot);
-			const config = settings.value;
-			const writable = settings.status === "ready" && settings.writable;
-			const [open, setOpen] = (0, react.useState)(false);
-			const [inspector, setInspector] = (0, react.useState)(null);
-			const [error, setError] = (0, react.useState)(null);
-			const [refreshing, setRefreshing] = (0, react.useState)(false);
+		function PolicySection(props) {
+			const { config, writable, setPath } = props;
+			const configuredMode = config?.mode ?? (config?.preset === "strict" ? "allowlist" : config?.preset === "audit-only" ? "audit" : "blocklist");
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "pf-section",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "pf-section-title",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: "Policy" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "pf-muted",
+						children: "Changes apply live"
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "pf-grid",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
+							checked: config?.enabled ?? true,
+							disabled: !writable,
+							label: "Firewall enabled",
+							hint: "Keep auditing available when policy is off.",
+							onChange: (value) => {
+								setPath(["enabled"], value);
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
+							checked: config?.protectCoreSections ?? true,
+							disabled: !writable,
+							label: "Protect core sections",
+							hint: "Prevents ordinary rules from removing Harness internals.",
+							onChange: (value) => {
+								setPath(["protectCoreSections"], value);
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							className: "pf-field",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Mode" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+								className: "pf-control",
+								value: configuredMode,
+								disabled: !writable,
+								onChange: (event) => {
+									setPath(["mode"], event.currentTarget.value);
+								},
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "off",
+										children: "Off"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "audit",
+										children: "Audit only"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "blocklist",
+										children: "Blocklist"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "allowlist",
+										children: "Allowlist"
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							className: "pf-field",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Preset" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+								className: "pf-control",
+								value: config?.preset ?? "",
+								disabled: !writable,
+								onChange: (event) => {
+									const value = event.currentTarget.value;
+									if (value === "") props.unsetPreset();
+									else setPath(["preset"], value);
+								},
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "",
+										children: "None"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "clean",
+										children: "Clean"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "strict",
+										children: "Strict"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "audit-only",
+										children: "Audit only"
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							className: "pf-field",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Unknown plugin sections" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+								className: "pf-control",
+								value: config?.unknownPluginPolicy ?? "allow",
+								disabled: !writable,
+								onChange: (event) => {
+									setPath(["unknownPluginPolicy"], event.currentTarget.value);
+								},
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+									value: "allow",
+									children: "Allow"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+									value: "block",
+									children: "Block"
+								})]
+							})]
+						})
+					]
+				})]
+			});
+		}
+		function LastRequestSection(props) {
+			const last = props.inspector?.last ?? null;
+			const effectiveMode = props.inspector?.config.mode ?? props.config?.mode ?? "blocklist";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "pf-section",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "pf-section-title",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: "Last request" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						className: "pf-btn",
+						disabled: props.refreshing,
+						onClick: () => {
+							props.onRefresh();
+						},
+						children: props.refreshing ? "Refreshing…" : "Refresh"
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "pf-stats",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "pf-stat",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: last?.totalSections ?? "—" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "sections" })]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "pf-stat",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: last?.blockedSections ?? "—" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "blocked" })]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "pf-stat",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: last === null ? "—" : "~" + String(last.estimatedTokensRemoved) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "tokens removed (estimate)" })]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "pf-stat",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: effectiveMode }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "effective mode" })]
+						})
+					]
+				})]
+			});
+		}
+		function RulesSection(props) {
+			const { config, writable, setPath } = props;
 			const [rule, setRule] = (0, react.useState)("");
 			const [ruleKind, setRuleKind] = (0, react.useState)("exact");
 			const [ruleAction, setRuleAction] = (0, react.useState)("block");
-			const activeRequest = (0, react.useRef)(0);
-			const refresh = (0, react.useCallback)(async () => {
-				const request = ++activeRequest.current;
-				setRefreshing(true);
-				try {
-					const result = await inspect();
-					if (request !== activeRequest.current) return;
-					if (result.ok) {
-						setInspector(result.value);
-						setError(null);
-					} else setError(displayError(result.error));
-				} catch (cause) {
-					if (request === activeRequest.current) setError(displayError(cause));
-				} finally {
-					if (request === activeRequest.current) setRefreshing(false);
-				}
-			}, [inspect]);
-			(0, react.useEffect)(() => {
-				refresh();
-				const interval = window.setInterval(() => {
-					refresh();
-				}, REFRESH_INTERVAL_MS);
-				return () => {
-					window.clearInterval(interval);
-					activeRequest.current += 1;
-				};
-			}, [refresh]);
-			const setPath = (0, react.useCallback)((path, value) => {
-				const [field, nested] = path;
-				if (field === void 0) return;
-				if (nested === void 0) {
-					scope.set(field, value);
-					return;
-				}
-				const current = scope.getSnapshot().value;
-				const parent = field === "audit" ? current?.audit : current?.metrics;
-				scope.set(field, {
-					...parent,
-					[nested]: value
-				});
-			}, [scope]);
-			const setPolicy = (0, react.useCallback)(async (name, policy) => {
-				const result = await setSectionPolicy(name, policy, scope.getSnapshot().revision);
-				if (!result.ok) setError(displayError(result.error));
-				await refresh();
-			}, [
-				refresh,
-				scope,
-				setSectionPolicy
-			]);
 			const addRule = (event) => {
 				event.preventDefault();
 				const value = rule.trim();
@@ -5379,493 +5594,427 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 					action: "block"
 				}))
 			];
-			const enabled = config?.enabled ?? true;
-			const last = inspector?.last ?? null;
-			const effectiveMode = inspector?.config.mode ?? config?.mode ?? "blocklist";
-			const configuredMode = config?.mode ?? (config?.preset === "strict" ? "allowlist" : config?.preset === "audit-only" ? "audit" : "blocklist");
-			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: Prompt Firewall`,
-					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: "Prompt Firewall"
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-plugin-card__description",
-								children: "Prompt hygiene, section policy, and request-level observability."
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "dsh-plugin-card__badge",
-							children: enabled ? "Enabled" : "Disabled"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, {})
-					]
-				}), open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "dsh-plugin-card__body pf-body",
-					children: [
-						error !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "pf-error",
-							children: error
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-							className: "pf-section",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "pf-section-title",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: "Policy" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "pf-muted",
-									children: "Changes apply live"
-								})]
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "pf-grid",
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "pf-section",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "pf-section-title",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: "Rules" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "pf-muted",
+							children: "Explicit rules; preset rules are applied in addition"
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+						className: "pf-editor",
+						onSubmit: addRule,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								className: "pf-control",
+								value: rule,
+								disabled: !writable,
+								placeholder: "plugin:example or announcement:*",
+								onChange: (event) => {
+									setRule(event.currentTarget.value);
+								}
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+								className: "pf-control",
+								value: ruleKind,
+								disabled: !writable || ruleAction === "protect",
+								onChange: (event) => {
+									setRuleKind(event.currentTarget.value);
+								},
 								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
-										checked: enabled,
-										disabled: !writable,
-										label: "Firewall enabled",
-										hint: "Keep auditing available when policy is off.",
-										onChange: (value) => {
-											setPath(["enabled"], value);
-										}
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "exact",
+										children: "Exact"
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
-										checked: config?.protectCoreSections ?? true,
-										disabled: !writable,
-										label: "Protect core sections",
-										hint: "Prevents ordinary rules from removing Harness internals.",
-										onChange: (value) => {
-											setPath(["protectCoreSections"], value);
-										}
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "prefix",
+										children: "Prefix"
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-										className: "pf-field",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Mode" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-											className: "pf-control",
-											value: configuredMode,
-											disabled: !writable,
-											onChange: (event) => {
-												setPath(["mode"], event.currentTarget.value);
-											},
-											children: [
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-													value: "off",
-													children: "Off"
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-													value: "audit",
-													children: "Audit only"
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-													value: "blocklist",
-													children: "Blocklist"
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-													value: "allowlist",
-													children: "Allowlist"
-												})
-											]
-										})]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-										className: "pf-field",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Preset" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-											className: "pf-control",
-											value: config?.preset ?? "",
-											disabled: !writable,
-											onChange: (event) => {
-												const value = event.currentTarget.value;
-												if (value === "") scope.unset("preset");
-												else setPath(["preset"], value);
-											},
-											children: [
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-													value: "",
-													children: "None"
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-													value: "clean",
-													children: "Clean"
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-													value: "strict",
-													children: "Strict"
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-													value: "audit-only",
-													children: "Audit only"
-												})
-											]
-										})]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-										className: "pf-field",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Unknown plugin sections" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-											className: "pf-control",
-											value: config?.unknownPluginPolicy ?? "allow",
-											disabled: !writable,
-											onChange: (event) => {
-												setPath(["unknownPluginPolicy"], event.currentTarget.value);
-											},
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-												value: "allow",
-												children: "Allow"
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-												value: "block",
-												children: "Block"
-											})]
-										})]
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "glob",
+										children: "Glob"
 									})
 								]
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-							className: "pf-section",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "pf-section-title",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: "Last request" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									className: "pf-btn",
-									disabled: refreshing,
-									onClick: () => {
-										refresh();
-									},
-									children: refreshing ? "Refreshing…" : "Refresh"
-								})]
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "pf-stats",
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+								className: "pf-control",
+								value: ruleAction,
+								disabled: !writable,
+								onChange: (event) => {
+									const action = event.currentTarget.value;
+									setRuleAction(action);
+									if (action === "protect") setRuleKind("exact");
+								},
 								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "pf-stat",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: last?.totalSections ?? "—" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "sections" })]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "pf-stat",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: last?.blockedSections ?? "—" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "blocked" })]
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "block",
+										children: "Block"
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "pf-stat",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: last === null ? "—" : `~${last.estimatedTokensRemoved}` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "tokens removed (estimate)" })]
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "allow",
+										children: "Allow"
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "pf-stat",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: effectiveMode }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "effective mode" })]
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										value: "protect",
+										children: "Protect"
 									})
 								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								className: "pf-btn primary",
+								type: "submit",
+								disabled: !writable || rule.trim().length === 0,
+								children: "Add rule"
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "pf-rules",
+						children: [explicitRules.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "pf-empty",
+							children: "No explicit rules yet."
+						}), explicitRules.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "pf-rule",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+									title: item.value,
+									children: item.value
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "pf-pill pf-kind",
+									children: item.kind
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: `pf-pill ${item.action}`,
+									children: item.action
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									className: "pf-btn link danger",
+									disabled: !writable,
+									onClick: () => {
+										setPath([item.field], list(config, item.field).filter((value) => value !== item.value));
+									},
+									children: "Remove"
+								})
+							]
+						}, `${item.field}:${item.value}`))]
+					})
+				]
+			});
+		}
+		function AuditSection(props) {
+			const { config, writable, setPath } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+				className: "pf-advanced",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: "Audit & metrics" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "pf-advanced-content pf-grid",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
+							checked: config?.audit?.enabled ?? true,
+							disabled: !writable,
+							label: "Audit history",
+							hint: "Keep recent assemblies in Host memory.",
+							onChange: (value) => {
+								setPath(["audit", "enabled"], value);
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
+							checked: config?.audit?.includePreview ?? false,
+							disabled: !writable,
+							label: "Section preview",
+							hint: "Expose only the configured prefix in Inspector.",
+							onChange: (value) => {
+								setPath(["audit", "includePreview"], value);
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
+							checked: config?.audit?.logBlocked ?? true,
+							disabled: !writable,
+							label: "Log blocked sections",
+							hint: "Names and sizes only unless preview is enabled.",
+							onChange: (value) => {
+								setPath(["audit", "logBlocked"], value);
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
+							checked: config?.audit?.logAllowed ?? false,
+							disabled: !writable,
+							label: "Log allowed sections",
+							hint: "Useful for initial policy discovery.",
+							onChange: (value) => {
+								setPath(["audit", "logAllowed"], value);
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
+							checked: config?.audit?.highlightNewSections ?? true,
+							disabled: !writable,
+							label: "Highlight new plugin sections",
+							hint: "Informational only; never blocks automatically.",
+							onChange: (value) => {
+								setPath(["audit", "highlightNewSections"], value);
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
+							checked: config?.metrics?.enabled ?? true,
+							disabled: !writable,
+							label: "Aggregate metrics",
+							hint: "No arbitrary section-name labels.",
+							onChange: (value) => {
+								setPath(["metrics", "enabled"], value);
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							className: "pf-field",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Preview characters" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								className: "pf-control",
+								type: "number",
+								min: "0",
+								step: "1",
+								value: config?.audit?.previewChars ?? 160,
+								disabled: !writable,
+								onChange: (event) => {
+									setPath(["audit", "previewChars"], Number(event.currentTarget.value));
+								}
 							})]
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-							className: "pf-section",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "pf-section-title",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: "Rules" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							className: "pf-field",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "History size" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								className: "pf-control",
+								type: "number",
+								min: "0",
+								step: "1",
+								value: config?.audit?.historySize ?? 100,
+								disabled: !writable,
+								onChange: (event) => {
+									setPath(["audit", "historySize"], Number(event.currentTarget.value));
+								}
+							})]
+						})
+					]
+				})]
+			});
+		}
+		function InspectorSection(props) {
+			const last = props.inspector?.last ?? null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "pf-section",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "pf-section-title",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: "Prompt Inspector" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "pf-muted",
+							children: "Updates every 3 seconds"
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "pf-table-wrap",
+						children: last === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "pf-empty",
+							children: "No audited prompt assembly yet."
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+							className: "pf-table",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: "Section" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: "Size" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: "Decision" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: "Reason" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: "Policy" })
+							] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: last.sections.map((section, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("td", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "pf-section-name",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: section.name }),
+										section.isNew && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "pf-new",
+											children: "NEW"
+										}),
+										section.suspicious && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "pf-warn",
+											children: "POSSIBLE ANNOUNCEMENT"
+										})
+									]
+								}), section.preview !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "pf-preview",
+									children: section.preview
+								})] }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("td", { children: [
+									"~",
+									section.estimatedTokens,
+									" t",
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 										className: "pf-muted",
-										children: "Explicit rules; preset rules are applied in addition"
-									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
-									className: "pf-editor",
-									onSubmit: addRule,
+										children: [section.chars, " chars"]
+									})
+								] }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: `pf-pill ${section.decision === "blocked" ? "block" : section.decision === "protected" ? "protect" : "allow"}`,
+									children: section.decision
+								}) }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: section.reason }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "pf-actions",
 									children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-											className: "pf-control",
-											value: rule,
-											disabled: !writable,
-											placeholder: "plugin:example or announcement:*",
-											onChange: (event) => {
-												setRule(event.currentTarget.value);
-											}
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											className: "pf-btn link",
+											disabled: !props.writable,
+											onClick: () => {
+												props.setPolicy(section.name, "allow");
+											},
+											children: "Allow"
 										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-											className: "pf-control",
-											value: ruleKind,
-											disabled: !writable || ruleAction === "protect",
-											onChange: (event) => {
-												setRuleKind(event.currentTarget.value);
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											className: "pf-btn link danger",
+											disabled: !props.writable,
+											onClick: () => {
+												props.setPolicy(section.name, "block");
 											},
-											children: [
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-													value: "exact",
-													children: "Exact"
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-													value: "prefix",
-													children: "Prefix"
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-													value: "glob",
-													children: "Glob"
-												})
-											]
+											children: "Block"
 										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-											className: "pf-control",
-											value: ruleAction,
-											disabled: !writable,
-											onChange: (event) => {
-												const action = event.currentTarget.value;
-												setRuleAction(action);
-												if (action === "protect") setRuleKind("exact");
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											className: "pf-btn link",
+											disabled: !props.writable,
+											onClick: () => {
+												props.setPolicy(section.name, "protect");
 											},
-											children: [
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-													value: "block",
-													children: "Block"
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-													value: "allow",
-													children: "Allow"
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-													value: "protect",
-													children: "Protect"
-												})
-											]
+											children: "Protect"
 										}),
 										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-											className: "pf-btn primary",
-											type: "submit",
-											disabled: !writable || rule.trim().length === 0,
-											children: "Add rule"
+											className: "pf-btn link",
+											disabled: !props.writable,
+											onClick: () => {
+												props.setPolicy(section.name, "clear");
+											},
+											children: "Clear"
 										})
 									]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "pf-rules",
-									children: [explicitRules.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: "pf-empty",
-										children: "No explicit rules yet."
-									}), explicitRules.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										className: "pf-rule",
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
-												title: item.value,
-												children: item.value
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "pf-pill pf-kind",
-												children: item.kind
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: `pf-pill ${item.action}`,
-												children: item.action
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-												className: "pf-btn link danger",
-												disabled: !writable,
-												onClick: () => {
-													setPath([item.field], list(config, item.field).filter((value) => value !== item.value));
-												},
-												children: "Remove"
-											})
-										]
-									}, `${item.field}:${item.value}`))]
-								})
-							]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
-							className: "pf-advanced",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: "Audit & metrics" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "pf-advanced-content pf-grid",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
-										checked: config?.audit?.enabled ?? true,
-										disabled: !writable,
-										label: "Audit history",
-										hint: "Keep recent assemblies in Host memory.",
-										onChange: (value) => {
-											setPath(["audit", "enabled"], value);
-										}
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
-										checked: config?.audit?.includePreview ?? false,
-										disabled: !writable,
-										label: "Section preview",
-										hint: "Expose only the configured prefix in Inspector.",
-										onChange: (value) => {
-											setPath(["audit", "includePreview"], value);
-										}
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
-										checked: config?.audit?.logBlocked ?? true,
-										disabled: !writable,
-										label: "Log blocked sections",
-										hint: "Names and sizes only unless preview is enabled.",
-										onChange: (value) => {
-											setPath(["audit", "logBlocked"], value);
-										}
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
-										checked: config?.audit?.logAllowed ?? false,
-										disabled: !writable,
-										label: "Log allowed sections",
-										hint: "Useful for initial policy discovery.",
-										onChange: (value) => {
-											setPath(["audit", "logAllowed"], value);
-										}
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
-										checked: config?.audit?.highlightNewSections ?? true,
-										disabled: !writable,
-										label: "Highlight new plugin sections",
-										hint: "Informational only; never blocks automatically.",
-										onChange: (value) => {
-											setPath(["audit", "highlightNewSections"], value);
-										}
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
-										checked: config?.metrics?.enabled ?? true,
-										disabled: !writable,
-										label: "Aggregate metrics",
-										hint: "No arbitrary section-name labels.",
-										onChange: (value) => {
-											setPath(["metrics", "enabled"], value);
-										}
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-										className: "pf-field",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Preview characters" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-											className: "pf-control",
-											type: "number",
-											min: "0",
-											step: "1",
-											value: config?.audit?.previewChars ?? 160,
-											disabled: !writable,
-											onChange: (event) => {
-												setPath(["audit", "previewChars"], Number(event.currentTarget.value));
-											}
-										})]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-										className: "pf-field",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "History size" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-											className: "pf-control",
-											type: "number",
-											min: "0",
-											step: "1",
-											value: config?.audit?.historySize ?? 100,
-											disabled: !writable,
-											onChange: (event) => {
-												setPath(["audit", "historySize"], Number(event.currentTarget.value));
-											}
-										})]
-									})
-								]
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-							className: "pf-section",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "pf-section-title",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: "Prompt Inspector" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "pf-muted",
-										children: "Updates every 3 seconds"
-									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "pf-table-wrap",
-									children: last === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: "pf-empty",
-										children: "No audited prompt assembly yet."
-									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
-										className: "pf-table",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: "Section" }),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: "Size" }),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: "Decision" }),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: "Reason" }),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: "Policy" })
-										] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: last.sections.map((section, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("td", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-												className: "pf-section-name",
-												children: [
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: section.name }),
-													section.isNew && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-														className: "pf-new",
-														children: "NEW"
-													}),
-													section.suspicious && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-														className: "pf-warn",
-														children: "POSSIBLE ANNOUNCEMENT"
-													})
-												]
-											}), section.preview !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-												className: "pf-preview",
-												children: section.preview
-											})] }),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("td", { children: [
-												"~",
-												section.estimatedTokens,
-												" t",
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-													className: "pf-muted",
-													children: [section.chars, " chars"]
-												})
-											] }),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: `pf-pill ${section.decision === "blocked" ? "block" : section.decision === "protected" ? "protect" : "allow"}`,
-												children: section.decision
-											}) }),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: section.reason }),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-												className: "pf-actions",
-												children: [
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-														className: "pf-btn link",
-														disabled: !writable,
-														onClick: () => {
-															setPolicy(section.name, "allow");
-														},
-														children: "Allow"
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-														className: "pf-btn link danger",
-														disabled: !writable,
-														onClick: () => {
-															setPolicy(section.name, "block");
-														},
-														children: "Block"
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-														className: "pf-btn link",
-														disabled: !writable,
-														onClick: () => {
-															setPolicy(section.name, "protect");
-														},
-														children: "Protect"
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-														className: "pf-btn link",
-														disabled: !writable,
-														onClick: () => {
-															setPolicy(section.name, "clear");
-														},
-														children: "Clear"
-													})
-												]
-											}) })
-										] }, `${section.name}:${index}`)) })]
-									})
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: "pf-footer-note",
-									children: "Token counts are estimates. Prompt Firewall is a hygiene and observability layer, not a security boundary."
-								})
-							]
+								}) })
+							] }, `${section.name}:${index}`)) })]
 						})
-					]
-				}) : null]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "pf-footer-note",
+						children: "Token counts are estimates. Prompt Firewall is a hygiene and observability layer, not a security boundary."
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/index.tsx
+		const SETTINGS_NAMESPACE = "prompt-firewall";
+		const REFRESH_INTERVAL_MS = 3e3;
+		function displayError(error) {
+			if (error instanceof Error) return error.message;
+			if (typeof error === "string") return error;
+			return "Could not load Prompt Inspector data.";
+		}
+		function PromptFirewallCard({ scope, inspect, setSectionPolicy }) {
+			const settingsStore = (0, react.useMemo)(() => bindSettingsExternalStore(scope), [scope]);
+			const settings = (0, react.useSyncExternalStore)(settingsStore.subscribe, settingsStore.getSnapshot, settingsStore.getSnapshot);
+			const config = settings.value;
+			const writable = settings.status === "ready" && settings.writable;
+			const [inspector, setInspector] = (0, react.useState)(null);
+			const [error, setError] = (0, react.useState)(null);
+			const [refreshing, setRefreshing] = (0, react.useState)(false);
+			const activeRequest = (0, react.useRef)(0);
+			const refresh = (0, react.useCallback)(async () => {
+				const request = ++activeRequest.current;
+				setRefreshing(true);
+				try {
+					const result = await inspect();
+					if (request !== activeRequest.current) return;
+					if (result.ok) {
+						setInspector(result.value);
+						setError(null);
+					} else setError(displayError(result.error));
+				} catch (cause) {
+					if (request === activeRequest.current) setError(displayError(cause));
+				} finally {
+					if (request === activeRequest.current) setRefreshing(false);
+				}
+			}, [inspect]);
+			(0, react.useEffect)(() => {
+				const stopPolling = startVisibilityAwarePolling(refresh, REFRESH_INTERVAL_MS);
+				return () => {
+					stopPolling();
+					activeRequest.current += 1;
+				};
+			}, [refresh]);
+			const setPath = (0, react.useCallback)((path, value) => {
+				const [field, nested] = path;
+				if (field === void 0) return;
+				if (nested === void 0) {
+					scope.set(field, value);
+					return;
+				}
+				const current = scope.getSnapshot().value;
+				const parent = field === "audit" ? current?.audit : current?.metrics;
+				scope.set(field, {
+					...parent,
+					[nested]: value
+				});
+			}, [scope]);
+			const setPolicy = (0, react.useCallback)(async (name, policy) => {
+				const result = await setSectionPolicy(name, policy, scope.getSnapshot().revision);
+				if (!result.ok) setError(displayError(result.error));
+				await refresh();
+			}, [
+				refresh,
+				scope,
+				setSectionPolicy
+			]);
+			const enabled = config?.enabled ?? true;
+			if (settings.status === "unavailable") return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardShell, {
+				title: "Prompt Firewall",
+				description: "Prompt hygiene, section policy, and request-level observability.",
+				badge: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dsh-plugin-card__badge",
+					children: enabled ? "Enabled" : "Disabled"
+				}),
+				label: (open) => `${open ? "Hide" : "Show"} settings: Prompt Firewall`,
+				bodyClassName: "pf-body",
+				children: [
+					error !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "pf-error",
+						children: error
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PolicySection, {
+						config,
+						writable,
+						setPath,
+						unsetPreset: () => {
+							scope.unset("preset");
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LastRequestSection, {
+						config,
+						inspector,
+						refreshing,
+						onRefresh: () => {
+							refresh();
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RulesSection, {
+						config,
+						writable,
+						setPath
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AuditSection, {
+						config,
+						writable,
+						setPath
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InspectorSection, {
+						inspector,
+						writable,
+						setPolicy
+					})
+				]
 			});
 		}
 		const inject = [
@@ -5884,19 +6033,13 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 						inspect: () => injectedRemote.promptFirewall.inspect(),
 						setSectionPolicy: (section, policy, revision) => injectedRemote.promptFirewall.setSectionPolicy(section, policy, revision)
 					};
-					const style = document.createElement("style");
-					style.dataset.plugin = "dsh-prompt-firewall";
-					style.textContent = styles;
-					document.head.appendChild(style);
-					const disposeSlot = remoteCtx.slots.inject("settings.plugin.item", () => remoteCtx.slots.register({
-						name: "settings.plugin.item",
+					return registerSettingsCard(remoteCtx, {
 						key: SETTINGS_NAMESPACE,
+						pluginName: "dsh-prompt-firewall",
+						styles,
+						component: PromptFirewallCard,
 						inject: () => face
-					}, PromptFirewallCard));
-					return () => {
-						disposeSlot();
-						style.remove();
-					};
+					});
 				});
 			} catch (cause) {
 				await disposeRemote();