dsh-system-prompt-insertion 0.0.1 → 0.2.1

package/lib/client.js

@@ -0,0 +1,1414 @@
+window.__ModuleLoader__.load({
+	id: "dsh-system-prompt-insertion",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		// src/client.ts
+		/**
+		* `dsh-system-prompt-insertion` — browser half.
+		*
+		* ## What this module is
+		*
+		* A sidebar panel for the user-owned text the host half registers as sections —
+		* not a settings page. The shell's own panel family works through two seats that
+		* this module fills together:
+		*
+		* - `sidebar.panellist` gives us a row in the left column (the rail the Plugins,
+		*   Schedules, Market and Context entries live in). The shell owns the button,
+		*   the label, the tooltip, the active highlight and the collapsed rail; all we
+		*   draw is the glyph, at the size and selection state it asks for.
+		* - `main` renders the panel body once the row with the same id is selected.
+		*   Reserving `conversation` is not our business: any other key receives no
+		*   Session binding, so this page works with no session open.
+		*
+		* Both registrations go through `ctx.slots.inject`, which fires only after the
+		* owning shell entry declares the seat, so load order between this package and
+		* the shell does not matter.
+		*
+		* It is loaded as a lazy-CJS factory (`window.__ModuleLoader__.load`) whose id
+		* is the package name; `react` comes from the page's module table, and NOTHING
+		* else is imported — no harness client package, no component kit. The panel
+		* therefore cannot break when an internal client API moves, and it is
+		* theme-consistent through `--dsw-alias-*` tokens rather than by copying host
+		* components.
+		*
+		* ## Shape of the page
+		*
+		* One column, top to bottom: heading, preview, section editor. The preview
+		* comes first because it is the outcome the editor exists to shape. Save,
+		* discard and Add section live at the end of the editor rather than in a pinned
+		* footer, so the whole page scrolls as one document. The preview sits above
+		* instead of beside the editor: at a 960px content width two columns forced the
+		* prompt text into a third of the window, and the list of assembled sections
+		* was clipped. A single column keeps every control at the width the shell gives
+		* its own pages.
+		*
+		* The panel borrows the shell's visual grammar deliberately: a 960px content
+		* column behind responsive gutters, 20px/500 page title, 0.5px hairline
+		* borders, pill-shaped primary actions, the theme's switch geometry (36×20),
+		* focus rings from `--dsw-focus-ring-*`, and hover fills from
+		* `--dsw-alias-interactive-*`. Nothing hard-codes a colour: the stylesheet
+		* below only reads theme tokens, so light, dark and skin themes all follow.
+		*
+		* ## Data flow
+		*
+		* The panel reads and writes the same JSON API the host half serves
+		* (`/dsh-system-prompt-insertion/state`, `/preview`). Edits stage locally, so a
+		* half-typed rule never reaches a running session; Save commits the whole
+		* document at once. The master switch is the exception: it applies immediately,
+		* because the preview must agree with the control. Preview calls the host's
+		* real `assemble()`+`renderPrompt()`, which is why it can honestly list the
+		* host's own sections and flag our text as hidden under a complete-prompt
+		* preset. Entry, Save and switch changes refresh it automatically; the refresh
+		* control beside its heading covers prompt changes made by other plugins.
+		*
+		* @module dsh-system-prompt-insertion/client
+		*/
+		/** Locale namespace owned by this panel. */
+		const NS = "dsh-system-prompt-insertion";
+		/** URL prefix served by the host half (kept in sync with `routes.ts`). */
+		const API = "/dsh-system-prompt-insertion";
+		/**
+		* The one panel id shared by the sidebar row and the `main` occupant.
+		*
+		* The shell projects the row's label and dispatches `main` by this exact key, so
+		* both registrations read it instead of repeating a literal.
+		*/
+		const PANEL_ID = "system-prompt-insertion";
+		/**
+		* Position among the shell's global panel rows.
+		*
+		* Shipped rows sit at 0 (Plugins), 10 (Schedules) and 20 (Context); 30 keeps
+		* this entry after them without claiming a shipped slot.
+		*/
+		const PANEL_ORDER = 30;
+		/** Placement bands, mirroring the host's `POSITIONS`. */
+		const POSITIONS = [
+			"head",
+			"body",
+			"tail"
+		];
+		/** Copy, in the two languages the harness ships. */
+		const zh = {
+			nav: "提示词注入",
+			title: "提示词注入",
+			description: "把你自己写的文字放到系统提示词的开头、中间或末尾。保存后下一个请求生效，不用重启。",
+			enabled: "启用",
+			enabledHint: "关闭后所有段落都不再进入系统提示词，不必逐段停用；切换会立即保存。",
+			add: "添加段落",
+			addFirst: "添加第一个段落",
+			save: "保存",
+			saving: "保存中…",
+			saveHint: "保存到状态文件；也可以按 {keys}",
+			revert: "撤销修改",
+			refreshPreview: "刷新预览",
+			previewing: "组装中…",
+			statusSaved: "已保存",
+			statusDirty: "有未保存的修改",
+			pathLabel: "状态文件",
+			originFile: "来自文件",
+			originMissing: "文件尚未创建",
+			originMemory: "刚保存",
+			originUnreadable: "文件无法读取",
+			tailBase: "宿主末段 {order}",
+			tailBaseHint: "宿主最后一个段落的 order；本插件末尾段从它 +300 开始，预览里能看到每段的最终 order。",
+			section: "段落",
+			sectionsTitle: "段落",
+			sectionsSummary: "{count} 段 · 已注册 {registered}",
+			sectionTitle: "名称",
+			sectionTitleOf: "第 {index} 段名称",
+			sectionTextOf: "第 {index} 段正文",
+			positionOf: "第 {index} 段位置",
+			moveUpNamed: "上移「{title}」",
+			moveDownNamed: "下移「{title}」",
+			textPlaceholder: "例如：回答前先复述我的目标；不确定的事实先检索再回答；代码注释保持简短。",
+			positionHead: "开头",
+			positionBody: "中间",
+			positionTail: "末尾",
+			positionHintHead: "紧跟人格设定，排在计划策略与工具说明之前。",
+			positionHintBody: "排在所有工具说明之后、交付物引用之前。",
+			positionHintTail: "排在宿主最后一段之后，是提示词真正的结尾。",
+			interpolate: "解析 {{变量}}",
+			interpolateHint: "关闭时正文原样进入提示词；开启后可引用 {{model}} / {{provider}}，未知变量会让请求失败。",
+			removeNamed: "删除「{title}」",
+			toggleNamed: "启停「{title}」",
+			bytes: "{bytes} 字节",
+			bytesShort: "字节",
+			orderShort: "order",
+			emptyListTitle: "还没有段落",
+			emptyListHint: "写下的文字只进入你自己的系统提示词，保存后从下一个请求开始生效。",
+			emptyChip: "正文为空",
+			disabledChip: "已停用",
+			previewTitle: "当前系统提示词",
+			previewSummary: "共 {count} 段，{bytes} 字节",
+			previewStale: "预览是已保存的版本；保存后会自动刷新。",
+			previewNone: "还没有预览。点标题旁的刷新按钮，看看下一次请求真正发出去的完整提示词。",
+			warnings: "检查结果",
+			noWarnings: "没有发现问题。",
+			ours: "本插件",
+			variables: "可用变量",
+			loading: "加载中…",
+			loadFailed: "读取失败",
+			retry: "重试",
+			saveFailed: "保存失败",
+			previewFailed: "预览失败",
+			dismiss: "关闭",
+			copy: "复制全文",
+			copied: "已复制",
+			copyFailed: "复制失败",
+			copyFailedHint: "浏览器拒绝了剪贴板访问，请手动选择全文。",
+			warnEmpty: "「{title}」已启用但正文为空，不会被注册。",
+			warnOversize: "「{title}」{bytes} 字节，超过软上限 {cap} 字节。",
+			warnDuplicate: "「{title}」有一行与「{other}」重复。",
+			warnUnknownVariable: "「{title}」引用了 {{name}}，当前组装没有可用值（已知：{known}）。",
+			warnHidden: "有段落已注册但不在当前组装里——当前预设可能用 complete: true 接管了整份提示词。",
+			warnStoreError: "状态文件读取失败，仍在使用上一份内容：{message}",
+			warnRenderError: "渲染失败：{message}",
+			warnPreviewPartial: "预览没有带上 agent scope，{names} 这类按 agent 取值的变量会按原样显示。"
+		};
+		const en = {
+			nav: "Prompt insertion",
+			title: "Prompt insertion",
+			description: "Place your own text at the head, middle, or tail of the system prompt. Saved text applies on the next request, with no restart.",
+			enabled: "Enabled",
+			enabledHint: "Turning this off keeps every section out of the prompt without disabling them one by one. The switch is saved immediately.",
+			add: "Add section",
+			addFirst: "Add the first section",
+			save: "Save",
+			saving: "Saving…",
+			saveHint: "Save to the state file; {keys} works too",
+			revert: "Discard changes",
+			refreshPreview: "Refresh preview",
+			previewing: "Assembling…",
+			statusSaved: "Saved",
+			statusDirty: "Unsaved changes",
+			pathLabel: "State file",
+			originFile: "from file",
+			originMissing: "file not created yet",
+			originMemory: "just saved",
+			originUnreadable: "file unreadable",
+			tailBase: "Host tail {order}",
+			tailBaseHint: "The order of the host's last section; our tail sections start 300 after it. The preview shows each final order.",
+			section: "Section",
+			sectionsTitle: "Sections",
+			sectionsSummary: "{count} total · {registered} registered",
+			sectionTitle: "Name",
+			sectionTitleOf: "Name of section {index}",
+			sectionTextOf: "Body of section {index}",
+			positionOf: "Placement of section {index}",
+			moveUpNamed: "Move \"{title}\" up",
+			moveDownNamed: "Move \"{title}\" down",
+			textPlaceholder: "For example: restate my goal before answering; verify uncertain facts before asserting them; keep code comments short.",
+			positionHead: "Head",
+			positionBody: "Middle",
+			positionTail: "Tail",
+			positionHintHead: "Right after the persona, before plan policy and tool guidance.",
+			positionHintBody: "After every tool section, before deliverable references.",
+			positionHintTail: "After the host's own last section (persona suffix) — the true end of the prompt.",
+			interpolate: "Resolve {{variables}}",
+			interpolateHint: "Off keeps the body literal; on lets you use {{model}} / {{provider}}, and an unknown name fails the request.",
+			removeNamed: "Remove \"{title}\"",
+			toggleNamed: "Toggle \"{title}\"",
+			bytes: "{bytes} bytes",
+			bytesShort: "Bytes",
+			orderShort: "order",
+			emptyListTitle: "No sections yet",
+			emptyListHint: "Text you write here enters your own system prompt only, starting with the first request after you save.",
+			emptyChip: "Empty body",
+			disabledChip: "Off",
+			previewTitle: "The current system prompt",
+			previewSummary: "{count} sections, {bytes} bytes",
+			previewStale: "The preview shows what is SAVED; it refreshes after you save.",
+			previewNone: "Nothing previewed yet. Use the refresh button next to the title to see the full prompt the next request sends.",
+			warnings: "Checks",
+			noWarnings: "Nothing looks wrong.",
+			ours: "this plugin",
+			variables: "Variables",
+			loading: "Loading…",
+			loadFailed: "Could not load",
+			retry: "Retry",
+			saveFailed: "Could not save",
+			previewFailed: "Could not preview",
+			dismiss: "Dismiss",
+			copy: "Copy all",
+			copied: "Copied",
+			copyFailed: "Copy failed",
+			copyFailedHint: "The browser refused clipboard access; select the text and copy it manually.",
+			warnEmpty: "\"{title}\" is enabled but empty, so it is not registered.",
+			warnOversize: "\"{title}\" is {bytes} bytes, above the {cap}-byte soft cap.",
+			warnDuplicate: "\"{title}\" repeats a line already present in \"{other}\".",
+			warnUnknownVariable: "\"{title}\" references {{name}}, which has no value in this assembly (known: {known}).",
+			warnHidden: "A section is registered but absent from the current assembly — the active preset may be taking over the whole prompt with complete: true.",
+			warnStoreError: "The state file could not be read; the previous content is still live: {message}",
+			warnRenderError: "Rendering failed: {message}",
+			warnPreviewPartial: "Previewed without an agent scope, so per-agent variables such as {names} stayed literal."
+		};
+		/** Localize one preview warning, falling back to the host's English message. */
+		function warningText(t, warning) {
+			const key = {
+				empty: "warnEmpty",
+				oversize: "warnOversize",
+				duplicate: "warnDuplicate",
+				"unknown-variable": "warnUnknownVariable",
+				hidden: "warnHidden",
+				"store-error": "warnStoreError",
+				"render-error": "warnRenderError",
+				"preview-partial": "warnPreviewPartial"
+			}[warning.code];
+			if (key === void 0) return warning.message;
+			const template = t(key);
+			if (template === key) return warning.message;
+			return format(template, {
+				...warning.params ?? {},
+				message: warning.message
+			});
+		}
+		/** Fill `{name}` placeholders in a locale string. */
+		function format(template, values) {
+			return template.replace(/\{([a-z][a-z0-9]*)\}/gi, (match, key) => String(values[key] ?? match));
+		}
+		/** Monospace stack for prompt text, following the shell's configured code font. */
+		const MONO = "var(--dsh-font-family-code, \"SF Mono\", \"JetBrains Mono\", Menlo, Consolas, monospace)";
+		/** UTF-8 size, matching how the host counts section bytes. */
+		function byteLength(text) {
+			return new TextEncoder().encode(text).length;
+		}
+		/** The hint for one placement band. */
+		function placementHint(t, position) {
+			return position === "head" ? t("positionHintHead") : position === "body" ? t("positionHintBody") : t("positionHintTail");
+		}
+		/** Human-facing state of the backing file. */
+		function originLabel(t, origin) {
+			if (origin === "file") return t("originFile");
+			if (origin === "memory") return t("originMemory");
+			if (origin === "unreadable") return t("originUnreadable");
+			return t("originMissing");
+		}
+		/** Localize one API error envelope. */
+		function errorText(body, fallback) {
+			const field = body.error;
+			if (typeof field === "string" && field !== "") return `${fallback}: ${field}`;
+			if (field !== null && typeof field === "object") {
+				const detail = field;
+				const text = detail.message ?? detail.code;
+				if (text !== void 0) return `${fallback}: ${String(text)}`;
+			}
+			return fallback;
+		}
+		/** Build the panel payload from one `/state` response body. */
+		function payloadFrom(body, fallbackOrigin) {
+			return {
+				state: body.state,
+				path: String(body.path ?? ""),
+				origin: body.origin ?? fallbackOrigin,
+				...typeof body.error === "string" ? { error: body.error } : {},
+				orderBases: body.orderBases ?? { tailBase: 10200 },
+				registered: body.registered ?? []
+			};
+		}
+		/** Remove a leading localized prefix so a titled card does not repeat itself. */
+		function withoutPrefix(text, prefix) {
+			if (text === void 0) return void 0;
+			const lead = `${prefix}: `;
+			return text.startsWith(lead) ? text.slice(lead.length) : text;
+		}
+		/** Read a JSON response, tolerating an HTML error page. */
+		async function readJson(response) {
+			const text = await response.text();
+			try {
+				return JSON.parse(text);
+			} catch {
+				return {
+					ok: false,
+					error: {
+						code: `http-${response.status}`,
+						message: text.slice(0, 300)
+					}
+				};
+			}
+		}
+		/** Make a fresh section id that satisfies the host's `SECTION_ID` pattern. */
+		function newId() {
+			return `s-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`;
+		}
+		/**
+		* The panel stylesheet.
+		*
+		* One scoped block instead of dozens of inline style objects: hover, focus,
+		* `:disabled` and media-query states cannot be expressed inline, and every
+		* global panel is judged against the shell's own pages. Every colour comes from
+		* a `--dsw-*` token (the accompanying test refuses literals), so a theme or a
+		* skin changes the panel without touching it.
+		*/
+		const PANEL_CSS = `
+.dspi-root {
+  --dspi-gutter: clamp(24px, 4vw, 48px);
+  --dspi-content: 960px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-primary);
+  font-size: 14px;
+  line-height: 1.6;
+}
+.dspi-root *, .dspi-root *:before, .dspi-root *:after { box-sizing: border-box; }
+.dspi-root button, .dspi-root input, .dspi-root select, .dspi-root textarea { font-family: inherit; }
+.dspi-root button, .dspi-root input, .dspi-root select, .dspi-root textarea, .dspi-root pre { -webkit-app-region: no-drag; }
+.dspi-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-gutter: stable; }
+.dspi-content { width: 100%; max-width: var(--dspi-content); margin: 0 auto; padding: 0 var(--dspi-gutter) 36px; }
+.dspi-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px 24px;
+  flex-wrap: wrap;
+  padding-top: 28px;
+  margin-bottom: 22px;
+}
+[data-platform='darwin'] .dspi-head { padding-top: calc(28px + var(--dsh-frame-top-clearance, 0px)); }
+.dspi-head-main { flex: 1 1 360px; min-width: 0; }
+.dspi-title { margin: 0; font-size: 20px; font-weight: 500; line-height: 28px; color: var(--dsw-alias-label-primary); }
+.dspi-subtitle { max-width: 640px; margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-tertiary); }
+.dspi-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px 14px;
+  margin-top: 10px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-caption);
+}
+.dspi-meta code {
+  max-width: min(100%, 420px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: ${MONO};
+  font-size: 12px;
+}
+.dspi-origin[data-origin='missing'] { color: var(--dsw-alias-state-warn-label); }
+.dspi-origin[data-origin='unreadable'] { color: var(--dsw-alias-state-error-primary); }
+.dspi-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.dspi-master {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-secondary);
+  user-select: none;
+}
+.dspi-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 16px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  font-size: 13px;
+  line-height: 20px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color .15s, border-color .15s, opacity .15s;
+}
+.dspi-btn:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
+.dspi-btn:disabled { opacity: .4; cursor: not-allowed; }
+.dspi-btn--primary { background: var(--dsw-alias-button-primary-fill); color: var(--dsw-alias-label-primary-foreground); }
+.dspi-btn--primary:hover:not(:disabled) { background: var(--dsw-alias-button-primary-hover); }
+.dspi-btn--outline { box-shadow: inset 0 0 0 .5px var(--dsw-alias-border-l3); }
+.dspi-btn--sm { height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12px; line-height: 18px; }
+.dspi-switch {
+  position: relative;
+  flex: none;
+  width: 36px;
+  height: 20px;
+  padding: 2px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--dsw-alias-border-l3);
+  cursor: pointer;
+  transition: background-color .15s;
+}
+.dspi-switch[aria-checked='true'] { background: var(--dsw-alias-brand-primary); }
+.dspi-switch:disabled { opacity: .5; cursor: default; }
+.dspi-switch-thumb {
+  display: block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--dsw-alias-label-primary-foreground);
+  transition: transform .12s ease;
+}
+.dspi-switch[aria-checked='false'] .dspi-switch-thumb { background: var(--dsw-alias-switch-thumb); }
+.dspi-switch[aria-checked='true'] .dspi-switch-thumb { transform: translateX(16px); }
+.dspi-root button:focus-visible,
+.dspi-root select:focus-visible,
+.dspi-root input[type='checkbox']:focus-visible,
+.dspi-root pre:focus-visible {
+  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 2px;
+}
+.dspi-switch:focus-visible {
+  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 2px;
+}
+.dspi-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 0 0 16px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+  font-size: 13px;
+  line-height: 20px;
+}
+.dspi-banner--error { background: var(--dsw-alias-interactive-bg-hover-danger); color: var(--dsw-alias-state-error-primary); }
+.dspi-banner--warn { background: var(--dsw-alias-state-warn-tertiary); color: var(--dsw-alias-state-warn-label); }
+.dspi-banner-icon { flex: none; margin-top: 3px; }
+.dspi-banner-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
+.dspi-banner .dspi-btn { flex: none; margin-left: auto; }
+.dspi-section { margin-top: 26px; }
+.dspi-section--preview { margin-top: 0; }
+.dspi-section-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
+.dspi-section-title { margin: 0; font-size: 13px; font-weight: 600; line-height: 20px; color: var(--dsw-alias-label-secondary); }
+.dspi-section-meta { font-size: 12px; line-height: 20px; color: var(--dsw-alias-label-caption); }
+.dspi-section-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
+.dspi-icon-btn.dspi-preview-refresh[data-busy='true'] { opacity: .55; }
+.dspi-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
+.dspi-list-item { display: block; min-width: 0; }
+.dspi-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  height: 40px;
+  margin-top: 10px;
+  border: 1px dashed var(--dsw-alias-border-l3);
+  border-radius: 12px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 13px;
+  line-height: 20px;
+  cursor: pointer;
+  transition: background-color .15s, border-color .15s, color .15s;
+}
+.dspi-add:hover {
+  border-color: var(--dsw-alias-border-l4);
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+.dspi-card {
+  padding: 12px 14px 10px;
+  border: .5px solid var(--dsw-alias-border-l3);
+  border-radius: 16px;
+  background: var(--dsw-alias-bg-layer-1);
+  transition: border-color .15s;
+}
+.dspi-card:hover, .dspi-card:focus-within { border-color: var(--dsw-alias-border-l4); }
+.dspi-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 32px; }
+.dspi-card-head-main { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; }
+.dspi-card-head-side { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
+.dspi-title-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 28px;
+  padding: 0 2px;
+  border: 0;
+  border-bottom: 1px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+}
+.dspi-title-input:hover { border-bottom-color: var(--dsw-alias-border-l3); }
+.dspi-title-input:focus { outline: none; border-bottom-color: var(--dsw-alias-state-business-primary); }
+.dspi-title-input::placeholder { color: var(--dsw-alias-label-caption); font-weight: 400; }
+.dspi-card[data-enabled='false'] .dspi-title-input { color: var(--dsw-alias-label-secondary); }
+.dspi-select-wrap { position: relative; display: inline-flex; align-items: center; flex: none; }
+.dspi-select {
+  height: 28px;
+  padding: 0 24px 0 10px;
+  border: .5px solid var(--dsw-alias-border-l3);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+  line-height: 18px;
+  cursor: pointer;
+  appearance: none;
+}
+.dspi-select:hover { background: var(--dsw-alias-interactive-bg-hover); }
+.dspi-caret { position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); color: var(--dsw-alias-label-tertiary); pointer-events: none; }
+.dspi-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: pointer;
+  transition: background-color .15s, color .15s;
+}
+.dspi-icon-btn:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-label-primary); }
+.dspi-icon-btn:disabled { opacity: .3; cursor: default; }
+.dspi-icon-btn--danger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover-danger); color: var(--dsw-alias-state-error-primary); }
+.dspi-textarea {
+  display: block;
+  width: 100%;
+  min-height: 96px;
+  max-height: 360px;
+  margin-top: 6px;
+  padding: 10px 12px;
+  border: .5px solid var(--dsw-alias-border-l3);
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-primary);
+  font-family: ${MONO};
+  font-size: 12.5px;
+  line-height: 1.7;
+  resize: vertical;
+  field-sizing: content;
+  transition: border-color .15s;
+}
+.dspi-textarea:hover { border-color: var(--dsw-alias-border-l2); }
+.dspi-textarea:focus { outline: none; border-color: var(--dsw-alias-state-business-primary); }
+.dspi-textarea::placeholder { color: var(--dsw-alias-label-caption); }
+.dspi-card-meta { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; line-height: 20px; color: var(--dsw-alias-label-caption); }
+.dspi-card-hint { flex: 1 1 220px; min-width: 0; color: var(--dsw-alias-label-tertiary); }
+.dspi-check { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 20px; cursor: pointer; white-space: nowrap; }
+.dspi-check input { width: 14px; height: 14px; margin: 0; accent-color: var(--dsw-alias-brand-primary); cursor: inherit; }
+.dspi-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11px;
+  line-height: 20px;
+  white-space: nowrap;
+}
+.dspi-chip--warn { background: var(--dsw-alias-state-warn-tertiary); color: var(--dsw-alias-state-warn-label); }
+.dspi-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 36px 20px;
+  border: 1px dashed var(--dsw-alias-border-l3);
+  border-radius: 16px;
+  text-align: center;
+}
+.dspi-empty-glyph { margin-bottom: 6px; color: var(--dsw-alias-label-caption); }
+.dspi-empty-title { margin: 0; font-size: 14px; font-weight: 500; line-height: 22px; color: var(--dsw-alias-label-secondary); }
+.dspi-empty-hint { margin: 0; max-width: 440px; font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-tertiary); }
+.dspi-empty-action { margin-top: 14px; }
+.dspi-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px;
+  border: .5px solid var(--dsw-alias-border-l3);
+  border-radius: 16px;
+  background: var(--dsw-alias-bg-layer-1);
+}
+.dspi-panel--idle { padding: 20px; color: var(--dsw-alias-label-tertiary); font-size: 13px; line-height: 20px; }
+.dspi-panel--idle p { margin: 0; }
+.dspi-note { margin: 0; font-size: 12px; line-height: 20px; color: var(--dsw-alias-label-tertiary); }
+.dspi-note--warn { color: var(--dsw-alias-state-warn-label); }
+.dspi-subhead { margin: 0; font-size: 12px; font-weight: 600; line-height: 20px; color: var(--dsw-alias-label-secondary); }
+.dspi-inline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; line-height: 20px; color: var(--dsw-alias-label-tertiary); }
+.dspi-var {
+  padding: 1px 6px;
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+  font-family: ${MONO};
+  font-size: 11.5px;
+}
+.dspi-checks { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
+.dspi-check-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 20px; color: var(--dsw-alias-state-warn-label); }
+.dspi-check-dot { flex: none; width: 5px; height: 5px; margin-top: 7px; border-radius: 50%; background: currentColor; }
+.dspi-check-row--ok { color: var(--dsw-alias-state-success-primary); }
+.dspi-check-row .dspi-check-icon { flex: none; margin-top: 4px; }
+.dspi-table-scroll {
+  overflow: hidden;
+  border: .5px solid var(--dsw-alias-border-l3);
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-base);
+}
+.dspi-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: ${MONO}; font-size: 11.5px; }
+.dspi-table th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 6px 8px;
+  border-bottom: .5px solid var(--dsw-alias-border-l3);
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-caption);
+  font-weight: 500;
+  text-align: left;
+}
+.dspi-table td {
+  padding: 5px 8px;
+  border-bottom: .5px solid var(--dsw-alias-border-l1);
+  color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dspi-table tr:last-child td { border-bottom: 0; }
+.dspi-table tr[data-ours='true'] td { color: var(--dsw-alias-label-primary); }
+.dspi-table .dspi-col-index { width: 38px; }
+.dspi-table .dspi-col-order { width: 64px; }
+.dspi-table .dspi-col-bytes { width: 64px; text-align: right; }
+.dspi-name-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.dspi-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dspi-tag {
+  flex: none;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: 9px;
+  background: var(--dsw-alias-state-business-tertiary);
+  color: var(--dsw-alias-state-business-primary);
+  font-family: var(--dsw-font-family);
+  font-size: 10.5px;
+  line-height: 18px;
+}
+.dspi-pre {
+  margin: 0;
+  max-height: 340px;
+  overflow: auto;
+  padding: 12px;
+  border: .5px solid var(--dsw-alias-border-l3);
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-secondary);
+  font-family: ${MONO};
+  font-size: 12px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.dspi-settings-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 14px;
+}
+.dspi-settings-actions .dspi-status { margin-right: auto; }
+.dspi-status { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; font-size: 12px; line-height: 20px; color: var(--dsw-alias-label-tertiary); }
+.dspi-status-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dsw-alias-state-success-primary); }
+.dspi-status-dot[data-dirty='true'] { background: var(--dsw-alias-state-warn-primary); }
+.dspi-loading { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-tertiary); }
+.dspi-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--dsw-alias-border-l3);
+  border-top-color: var(--dsw-alias-state-business-primary);
+  border-radius: 50%;
+  animation: dspi-spin .8s linear infinite;
+}
+@keyframes dspi-spin { to { transform: rotate(360deg); } }
+.dspi-spin { display: inline-flex; animation: dspi-spin 1s linear infinite; }
+.dspi-skeleton { height: 118px; margin-top: 12px; border-radius: 16px; background: var(--dsw-alias-bg-skeleton, var(--dsw-alias-bg-layer-2)); }
+.dspi-state { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: .5px solid var(--dsw-alias-border-l3); border-radius: 16px; background: var(--dsw-alias-bg-layer-1); }
+.dspi-state-icon { flex: none; margin-top: 1px; color: var(--dsw-alias-state-error-primary); }
+.dspi-state-body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
+.dspi-state-title { margin: 0; font-size: 14px; font-weight: 500; line-height: 22px; color: var(--dsw-alias-label-primary); }
+.dspi-state-hint { margin: 0; font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-tertiary); overflow-wrap: anywhere; }
+@media (max-width: 720px) {
+  .dspi-head { gap: 12px; }
+  .dspi-head-actions { width: 100%; }
+}
+@media (max-width: 560px) {
+  .dspi-card { padding: 10px 12px 8px; }
+  .dspi-card-head-main { flex-basis: 100%; }
+  .dspi-card-head-side { margin-left: 0; }
+  .dspi-check { margin-left: 0; }
+  .dspi-meta code { max-width: 100%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dspi-spinner { animation: none; }
+  .dspi-card, .dspi-btn, .dspi-switch, .dspi-switch-thumb, .dspi-icon-btn { transition: none; }
+}
+`;
+		/**
+		* One 16×16 stroke glyph.
+		*
+		* @param h - React's createElement.
+		* @param name - which path set to draw.
+		* @param size - rendered square edge.
+		* @returns the SVG element.
+		*/
+		function glyph(h, name, size = 14) {
+			const svg = (children) => h("svg", {
+				viewBox: "0 0 16 16",
+				width: size,
+				height: size,
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.3",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true"
+			}, ...children);
+			switch (name) {
+				case "up": return svg([h("path", { d: "M4 9.5 8 5.5l4 4" })]);
+				case "down": return svg([h("path", { d: "M4 6.5 8 10.5l4-4" })]);
+				case "trash": return svg([h("path", { d: "M3 4.5h10M6.2 4.5V3.3h3.6v1.2M4.6 4.5l.5 8.2h5.8l.5-8.2M6.8 6.8v3.6M9.2 6.8v3.6" })]);
+				case "warning": return svg([h("path", { d: "M8 2.2 14 13H2L8 2.2Z" }), h("path", { d: "M8 6.3v3.3M8 11.6v.1" })]);
+				case "check": return svg([h("path", { d: "M3.2 8.4 6.4 11.6 12.8 4.8" })]);
+				case "close": return svg([h("path", { d: "M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6" })]);
+				case "copy": return svg([h("rect", {
+					x: "5.5",
+					y: "5.5",
+					width: "7",
+					height: "7",
+					rx: "1.2"
+				}), h("path", { d: "M10.5 5.5V3.8a1 1 0 0 0-1-1H4.3a1.5 1.5 0 0 0-1.5 1.5v5.2a1 1 0 0 0 1 1h1.7" })]);
+				case "refresh": return svg([h("path", { d: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9" }), h("path", { d: "M13.5 3v4h-4" })]);
+				default: return svg([h("rect", {
+					x: "2",
+					y: "2.5",
+					width: "12",
+					height: "11",
+					rx: "1.5"
+				}), h("path", { d: "M4.9 6h6.2M4.9 8.4h6.2M4.9 10.8h3.4" })]);
+			}
+		}
+		/**
+		* The sidebar row's glyph.
+		*
+		* The shell draws the row box, the label, the tooltip and the collapsed rail,
+		* then asks this component for a `size`-square, `currentColor` glyph; `active`
+		* is the shell's selection state and the shell already paints it, so the glyph
+		* stays decorative. `data-dsh-panel-entry` marks the only DOM this plugin owns
+		* inside that row, which is how skins and diagnostics identify the entry.
+		*
+		* @param props - the shell's icon share: square edge and selection state.
+		* @returns the decorative section-list glyph.
+		*/
+		function PanelIcon(props) {
+			const h = require("react").createElement;
+			return h("svg", {
+				"data-dsh-panel-entry": PANEL_ID,
+				viewBox: "0 0 16 16",
+				width: props.size,
+				height: props.size,
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.3",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true"
+			}, h("rect", {
+				x: "2",
+				y: "2.5",
+				width: "12",
+				height: "11",
+				rx: "1.5"
+			}), h("path", { d: "M4.9 6h6.2M4.9 8.4h6.2M4.9 10.8h3.4" }));
+		}
+		/** The shell's switch geometry, drawn from theme tokens. */
+		function Switch(props) {
+			const h = require("react").createElement;
+			return h("button", {
+				type: "button",
+				role: "switch",
+				className: "dspi-switch",
+				"aria-checked": props.checked,
+				"aria-label": props.label,
+				...props.title === void 0 ? {} : { title: props.title },
+				...props.disabled === true ? { disabled: true } : {},
+				onClick: () => props.onChange(!props.checked)
+			}, h("span", {
+				className: "dspi-switch-thumb",
+				"aria-hidden": "true"
+			}));
+		}
+		/** One section editor card. */
+		function SectionCard(props) {
+			const h = require("react").createElement;
+			const { section, t } = props;
+			const bytes = byteLength(section.text);
+			const hint = placementHint(t, section.position);
+			const empty = section.text.trim() === "";
+			return h("div", {
+				className: "dspi-card",
+				"data-enabled": section.enabled ? "true" : "false",
+				"data-section-id": section.id
+			}, h("div", { className: "dspi-card-head" }, h("div", { className: "dspi-card-head-main" }, h(Switch, {
+				checked: section.enabled,
+				label: format(t("toggleNamed"), { title: section.title || t("section") }),
+				title: section.enabled ? t("enabled") : t("disabledChip"),
+				onChange: (next) => props.onChange({
+					...section,
+					enabled: next
+				})
+			}), h("input", {
+				className: "dspi-title-input",
+				value: section.title,
+				maxLength: 80,
+				autoFocus: props.autoFocus,
+				placeholder: t("sectionTitle"),
+				"aria-label": format(t("sectionTitleOf"), { index: props.index + 1 }),
+				onChange: (event) => props.onChange({
+					...section,
+					title: event.target.value
+				})
+			})), h("div", { className: "dspi-card-head-side" }, h("span", { className: "dspi-select-wrap" }, h("select", {
+				className: "dspi-select",
+				value: section.position,
+				title: hint,
+				"aria-label": format(t("positionOf"), { index: props.index + 1 }),
+				onChange: (event) => props.onChange({
+					...section,
+					position: event.target.value
+				})
+			}, h("option", { value: "head" }, t("positionHead")), h("option", { value: "body" }, t("positionBody")), h("option", { value: "tail" }, t("positionTail"))), h("svg", {
+				className: "dspi-caret",
+				viewBox: "0 0 12 12",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true"
+			}, h("path", { d: "M3 4.6 6 7.6 9 4.6" }))), h("button", {
+				type: "button",
+				className: "dspi-icon-btn",
+				title: format(t("moveUpNamed"), { title: section.title || t("section") }),
+				"aria-label": format(t("moveUpNamed"), { title: section.title || t("section") }),
+				disabled: props.index === 0,
+				onClick: () => props.onMove(-1)
+			}, glyph(h, "up", 15)), h("button", {
+				type: "button",
+				className: "dspi-icon-btn",
+				title: format(t("moveDownNamed"), { title: section.title || t("section") }),
+				"aria-label": format(t("moveDownNamed"), { title: section.title || t("section") }),
+				disabled: props.index === props.total - 1,
+				onClick: () => props.onMove(1)
+			}, glyph(h, "down", 15)), h("button", {
+				type: "button",
+				className: "dspi-icon-btn dspi-icon-btn--danger",
+				title: format(t("removeNamed"), { title: section.title || t("section") }),
+				"aria-label": format(t("removeNamed"), { title: section.title || t("section") }),
+				onClick: props.onRemove
+			}, glyph(h, "trash", 15)))), h("textarea", {
+				className: "dspi-textarea",
+				value: section.text,
+				rows: Math.min(18, Math.max(5, section.text.split("\n").length + 2)),
+				placeholder: t("textPlaceholder"),
+				"aria-label": format(t("sectionTextOf"), { index: props.index + 1 }),
+				spellCheck: false,
+				onChange: (event) => props.onChange({
+					...section,
+					text: event.target.value
+				})
+			}), h("div", { className: "dspi-card-meta" }, h("span", null, format(t("bytes"), { bytes })), h("span", { className: "dspi-card-hint" }, hint), section.enabled ? empty ? h("span", { className: "dspi-chip dspi-chip--warn" }, t("emptyChip")) : null : h("span", { className: "dspi-chip" }, t("disabledChip")), h("label", {
+				className: "dspi-check",
+				title: t("interpolateHint")
+			}, h("input", {
+				type: "checkbox",
+				checked: section.interpolate,
+				onChange: (event) => props.onChange({
+					...section,
+					interpolate: event.target.checked
+				})
+			}), t("interpolate"))));
+		}
+		/** The section list, including its empty state. */
+		function SectionList(props) {
+			const h = require("react").createElement;
+			const { sections, t } = props;
+			if (sections.length === 0) return h("div", { className: "dspi-empty" }, h("span", { className: "dspi-empty-glyph" }, glyph(h, "sections", 28)), h("p", { className: "dspi-empty-title" }, t("emptyListTitle")), h("p", { className: "dspi-empty-hint" }, t("emptyListHint")), h("div", { className: "dspi-empty-action" }, h("button", {
+				type: "button",
+				className: "dspi-btn dspi-btn--primary",
+				onClick: props.onAdd
+			}, `＋ ${t("addFirst")}`)));
+			return h("ol", { className: "dspi-list" }, sections.map((section, index) => h("li", {
+				key: section.id,
+				className: "dspi-list-item"
+			}, h(SectionCard, {
+				section,
+				index,
+				total: sections.length,
+				autoFocus: section.id === props.justAdded,
+				t,
+				onChange: (next) => props.onChange(index, next),
+				onRemove: () => props.onRemove(index),
+				onMove: (delta) => props.onMove(index, delta)
+			}))));
+		}
+		/** The assembled-prompt preview, shown above the editor. */
+		function PreviewPanel(props) {
+			const React = require("react");
+			const h = React.createElement;
+			const { preview, t } = props;
+			const copyLabel = props.copying === "copied" ? t("copied") : props.copying === "failed" ? t("copyFailed") : t("copy");
+			const copyGlyph = props.copying === "copied" ? "check" : props.copying === "failed" ? "warning" : "copy";
+			return h(React.Fragment, null, h("div", {
+				className: "dspi-section-head",
+				id: "dsh-system-prompt-insertion-preview"
+			}, h("h2", { className: "dspi-section-title" }, t("previewTitle")), h("button", {
+				type: "button",
+				className: "dspi-icon-btn dspi-preview-refresh",
+				onClick: props.onRefresh,
+				disabled: props.previewing,
+				"data-busy": props.previewing ? "true" : "false",
+				title: t("refreshPreview"),
+				"aria-label": t("refreshPreview")
+			}, h("span", {
+				className: props.previewing ? "dspi-spin" : void 0,
+				"aria-hidden": "true"
+			}, glyph(h, "refresh", 15))), preview === void 0 ? null : h("span", { className: "dspi-section-meta" }, format(t("previewSummary"), {
+				count: preview.sections.length,
+				bytes: preview.bytes
+			})), preview === void 0 ? null : h("div", { className: "dspi-section-actions" }, h("button", {
+				type: "button",
+				className: "dspi-btn dspi-btn--sm",
+				onClick: props.onCopy,
+				disabled: preview.rendered === "",
+				title: props.copying === "failed" ? t("copyFailedHint") : t("copy")
+			}, glyph(h, copyGlyph, 12), copyLabel))), props.previewError === void 0 ? null : h("div", {
+				className: "dspi-banner dspi-banner--error",
+				role: "alert"
+			}, h("span", { className: "dspi-banner-icon" }, glyph(h, "warning")), h("div", { className: "dspi-banner-text" }, props.previewError), h("button", {
+				type: "button",
+				className: "dspi-btn dspi-btn--sm",
+				onClick: props.onRefresh
+			}, t("retry"))), preview === void 0 ? props.previewError === void 0 ? h("div", { className: "dspi-panel dspi-panel--idle" }, props.previewing ? h("div", { className: "dspi-loading" }, h("span", {
+				className: "dspi-spinner",
+				"aria-hidden": "true"
+			}), h("span", null, t("previewing"))) : h("p", null, t("previewNone"))) : null : h("div", { className: "dspi-panel" }, props.dirty ? h("p", { className: "dspi-note dspi-note--warn" }, t("previewStale")) : null, h("div", { className: "dspi-inline" }, h("span", null, t("variables")), preview.variables.length === 0 ? h("span", null, "—") : preview.variables.map((name) => h("code", {
+				key: name,
+				className: "dspi-var"
+			}, name))), h("div", null, h("h3", { className: "dspi-subhead" }, t("warnings")), preview.warnings.length === 0 ? h("div", { className: "dspi-check-row dspi-check-row--ok" }, h("span", { className: "dspi-check-icon" }, glyph(h, "check", 12)), h("span", null, t("noWarnings"))) : h("ul", { className: "dspi-checks" }, preview.warnings.map((warning, index) => h("li", {
+				key: `${warning.code}-${warning.sectionId ?? index}`,
+				className: "dspi-check-row"
+			}, h("span", {
+				className: "dspi-check-dot",
+				"aria-hidden": "true"
+			}), h("span", null, warningText(t, warning)))))), h("div", { className: "dspi-table-scroll" }, h("table", { className: "dspi-table" }, h("thead", null, h("tr", null, h("th", {
+				scope: "col",
+				className: "dspi-col-index"
+			}, "#"), h("th", {
+				scope: "col",
+				className: "dspi-col-order"
+			}, t("orderShort")), h("th", { scope: "col" }, t("section")), h("th", {
+				scope: "col",
+				className: "dspi-col-bytes"
+			}, t("bytesShort")))), h("tbody", null, preview.sections.map((section) => h("tr", {
+				key: `${section.name}-${section.index}`,
+				"data-ours": section.ours ? "true" : "false"
+			}, h("td", null, String(section.index + 1).padStart(2, "0")), h("td", null, section.order === void 0 ? "—" : String(section.order)), h("td", null, h("span", { className: "dspi-name-cell" }, h("span", { className: "dspi-name" }, section.name), section.ours ? h("span", { className: "dspi-tag" }, t("ours")) : null)), h("td", { className: "dspi-col-bytes" }, `${section.bytes}B`)))))), h("pre", {
+				className: "dspi-pre",
+				tabIndex: 0,
+				"aria-label": t("previewTitle")
+			}, preview.rendered === "" ? "—" : preview.rendered)));
+		}
+		/** The sidebar panel body. */
+		function PromptInsertionPanel(props) {
+			const React = require("react");
+			const h = React.createElement;
+			const t = props.t ?? ((key) => key);
+			const saveKeys = typeof document !== "undefined" && document.documentElement.dataset.platform === "darwin" ? "⌘S" : "Ctrl+S";
+			const [phase, setPhase] = React.useState("loading");
+			const [payload, setPayload] = React.useState(void 0);
+			const [draft, setDraft] = React.useState(void 0);
+			const [error, setError] = React.useState(void 0);
+			const [saving, setSaving] = React.useState(false);
+			const [preview, setPreview] = React.useState(void 0);
+			const [previewing, setPreviewing] = React.useState(false);
+			const [previewError, setPreviewError] = React.useState(void 0);
+			const [copying, setCopying] = React.useState("idle");
+			const [justAdded, setJustAdded] = React.useState(void 0);
+			const adopt = React.useCallback((next) => {
+				setPayload(next);
+				setDraft(next.state);
+				setPhase("ready");
+				setError(void 0);
+			}, []);
+			/** Bumped on every preview request; only the newest answer may land. */
+			const previewTicket = React.useRef(0);
+			const runPreview = React.useCallback(() => {
+				const ticket = ++previewTicket.current;
+				setPreviewing(true);
+				setPreviewError(void 0);
+				fetch(`${API}/preview`, { headers: { accept: "application/json" } }).then((response) => readJson(response)).then((body) => {
+					if (ticket !== previewTicket.current) return;
+					setPreviewing(false);
+					if (body.ok === true) {
+						setPreview(body);
+						return;
+					}
+					setPreviewError(errorText(body, t("previewFailed")));
+				}).catch((cause) => {
+					if (ticket !== previewTicket.current) return;
+					setPreviewing(false);
+					setPreviewError(`${t("previewFailed")}: ${cause instanceof Error ? cause.message : String(cause)}`);
+				});
+			}, [t]);
+			const refresh = React.useCallback(() => {
+				setPhase("loading");
+				fetch(`${API}/state`, { headers: { accept: "application/json" } }).then((response) => readJson(response)).then((body) => {
+					if (body.ok === true) {
+						adopt(payloadFrom(body, "missing"));
+						runPreview();
+						return;
+					}
+					setPhase("error");
+					setError(errorText(body, t("loadFailed")));
+				}).catch((cause) => {
+					setPhase("error");
+					setError(`${t("loadFailed")}: ${cause instanceof Error ? cause.message : String(cause)}`);
+				});
+			}, [
+				adopt,
+				runPreview,
+				t
+			]);
+			React.useEffect(() => {
+				refresh();
+			}, [refresh]);
+			const dirty = draft !== void 0 && payload !== void 0 && JSON.stringify(draft) !== JSON.stringify(payload.state);
+			const save = React.useCallback(() => {
+				if (draft === void 0 || saving) return;
+				setSaving(true);
+				setError(void 0);
+				fetch(`${API}/state`, {
+					method: "POST",
+					headers: {
+						"content-type": "application/json",
+						accept: "application/json"
+					},
+					body: JSON.stringify(draft)
+				}).then((response) => readJson(response)).then((body) => {
+					setSaving(false);
+					if (body.ok === true) {
+						adopt(payloadFrom(body, "memory"));
+						runPreview();
+						return;
+					}
+					setError(errorText(body, t("saveFailed")));
+				}).catch((cause) => {
+					setSaving(false);
+					setError(`${t("saveFailed")}: ${cause instanceof Error ? cause.message : String(cause)}`);
+				});
+			}, [
+				adopt,
+				draft,
+				runPreview,
+				saving,
+				t
+			]);
+			/**
+			* Apply the master switch at once instead of staging it.
+			*
+			* The switch controls what the host registers, so a staged toggle would leave
+			* the preview disagreeing with the control until Save. Only the saved
+			* document's `enabled` field is sent; unsaved section edits stay staged.
+			*/
+			const toggleEnabled = React.useCallback((next) => {
+				if (payload === void 0 || draft === void 0 || saving) return;
+				const previous = payload.state.enabled;
+				setSaving(true);
+				setError(void 0);
+				setDraft({
+					...draft,
+					enabled: next
+				});
+				fetch(`${API}/state`, {
+					method: "POST",
+					headers: {
+						"content-type": "application/json",
+						accept: "application/json"
+					},
+					body: JSON.stringify({
+						...payload.state,
+						enabled: next
+					})
+				}).then((response) => readJson(response)).then((body) => {
+					setSaving(false);
+					if (body.ok === true) {
+						const applied = payloadFrom(body, "memory");
+						setPayload(applied);
+						setDraft((current) => current === void 0 ? applied.state : {
+							...current,
+							enabled: next
+						});
+						runPreview();
+						return;
+					}
+					setDraft((current) => current === void 0 ? current : {
+						...current,
+						enabled: previous
+					});
+					setError(errorText(body, t("saveFailed")));
+				}).catch((cause) => {
+					setSaving(false);
+					setDraft((current) => current === void 0 ? current : {
+						...current,
+						enabled: previous
+					});
+					setError(`${t("saveFailed")}: ${cause instanceof Error ? cause.message : String(cause)}`);
+				});
+			}, [
+				draft,
+				payload,
+				runPreview,
+				saving,
+				t
+			]);
+			React.useEffect(() => {
+				if (!dirty) return;
+				const onKeyDown = (event) => {
+					if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "s") return;
+					if (document.querySelector("[role=\"dialog\"], [role=\"alertdialog\"]") !== null) return;
+					event.preventDefault();
+					save();
+				};
+				document.addEventListener("keydown", onKeyDown);
+				return () => document.removeEventListener("keydown", onKeyDown);
+			}, [dirty, save]);
+			const updateSection = React.useCallback((index, next) => {
+				setDraft((current) => {
+					if (current === void 0) return current;
+					const sections = [...current.sections];
+					sections[index] = next;
+					return {
+						...current,
+						sections
+					};
+				});
+			}, []);
+			const removeSection = React.useCallback((index) => {
+				setDraft((current) => current === void 0 ? current : {
+					...current,
+					sections: current.sections.filter((_, position) => position !== index)
+				});
+			}, []);
+			const moveSection = React.useCallback((index, delta) => {
+				setDraft((current) => {
+					if (current === void 0) return current;
+					const target = index + delta;
+					if (target < 0 || target >= current.sections.length) return current;
+					const sections = [...current.sections];
+					const [moved] = sections.splice(index, 1);
+					if (moved === void 0) return current;
+					sections.splice(target, 0, moved);
+					return {
+						...current,
+						sections
+					};
+				});
+			}, []);
+			const addSection = React.useCallback(() => {
+				const id = newId();
+				setJustAdded(id);
+				setDraft((current) => current === void 0 ? current : {
+					...current,
+					sections: [...current.sections, {
+						id,
+						title: `${t("section")} ${current.sections.length + 1}`,
+						text: "",
+						position: "tail",
+						order: null,
+						enabled: true,
+						interpolate: false
+					}]
+				});
+			}, [t]);
+			const copyRendered = React.useCallback(() => {
+				if (preview === void 0) return;
+				const clipboard = typeof navigator === "undefined" ? void 0 : navigator.clipboard;
+				if (clipboard === void 0) {
+					setCopying("failed");
+					return;
+				}
+				clipboard.writeText(preview.rendered).then(() => {
+					setCopying("copied");
+					window.setTimeout(() => setCopying("idle"), 1600);
+				}, () => setCopying("failed"));
+			}, [preview]);
+			const shell = (content) => h("div", { className: "dspi-root" }, h("style", { "data-dsh-system-prompt-insertion": "styles" }, PANEL_CSS), h("div", { className: "dspi-scroll" }, h("div", { className: "dspi-content" }, ...content)));
+			const heading = (extra, actions) => h("header", { className: "dspi-head" }, h("div", { className: "dspi-head-main" }, h("h1", { className: "dspi-title" }, t("title")), h("p", { className: "dspi-subtitle" }, t("description")), extra ?? null), actions ?? null);
+			if (phase === "loading") return shell([
+				heading(),
+				h("div", {
+					className: "dspi-loading",
+					role: "status"
+				}, h("span", {
+					className: "dspi-spinner",
+					"aria-hidden": "true"
+				}), h("span", null, t("loading"))),
+				h("div", {
+					className: "dspi-skeleton",
+					"aria-hidden": "true"
+				}),
+				h("div", {
+					className: "dspi-skeleton",
+					"aria-hidden": "true"
+				})
+			]);
+			if (phase === "error" || draft === void 0 || payload === void 0) return shell([heading(), h("div", { className: "dspi-state" }, h("span", { className: "dspi-state-icon" }, glyph(h, "warning", 16)), h("div", { className: "dspi-state-body" }, h("p", { className: "dspi-state-title" }, t("loadFailed")), h("p", { className: "dspi-state-hint" }, withoutPrefix(error, t("loadFailed")) ?? t("loadFailed"))), h("button", {
+				type: "button",
+				className: "dspi-btn dspi-btn--primary",
+				onClick: refresh
+			}, t("retry")))]);
+			const origin = originLabel(t, payload.origin);
+			const registered = payload.registered.length;
+			const showStoreWarning = payload.error !== void 0;
+			const saveHint = format(t("saveHint"), { keys: saveKeys });
+			return shell([
+				heading(h("div", { className: "dspi-meta" }, h("span", null, `${t("pathLabel")} `, h("code", { title: payload.path }, payload.path)), h("span", {
+					className: "dspi-origin",
+					"data-origin": payload.origin
+				}, origin), h("span", { title: t("tailBaseHint") }, format(t("tailBase"), { order: payload.orderBases.tailBase }))), h("div", { className: "dspi-head-actions" }, h("div", {
+					className: "dspi-master",
+					title: t("enabledHint")
+				}, h("span", null, t("enabled")), h(Switch, {
+					checked: draft.enabled,
+					label: t("enabled"),
+					title: t("enabledHint"),
+					disabled: saving,
+					onChange: toggleEnabled
+				})))),
+				error === void 0 ? null : h("div", {
+					className: "dspi-banner dspi-banner--error",
+					role: "alert"
+				}, h("span", { className: "dspi-banner-icon" }, glyph(h, "warning")), h("div", { className: "dspi-banner-text" }, error), h("button", {
+					type: "button",
+					className: "dspi-icon-btn",
+					"aria-label": t("dismiss"),
+					title: t("dismiss"),
+					onClick: () => setError(void 0)
+				}, glyph(h, "close"))),
+				showStoreWarning ? h("div", {
+					className: "dspi-banner dspi-banner--warn",
+					role: "status"
+				}, h("span", { className: "dspi-banner-icon" }, glyph(h, "warning")), h("div", { className: "dspi-banner-text" }, format(t("warnStoreError"), { message: payload.error ?? "" }))) : null,
+				h("section", { className: "dspi-section dspi-section--preview" }, h(PreviewPanel, {
+					preview,
+					previewing,
+					previewError,
+					dirty,
+					copying,
+					t,
+					onCopy: copyRendered,
+					onRefresh: runPreview
+				})),
+				h("section", { className: "dspi-section" }, h("div", { className: "dspi-section-head" }, h("h2", { className: "dspi-section-title" }, t("sectionsTitle")), h("span", { className: "dspi-section-meta" }, format(t("sectionsSummary"), {
+					count: draft.sections.length,
+					registered
+				}))), h(SectionList, {
+					sections: draft.sections,
+					justAdded,
+					t,
+					onAdd: addSection,
+					onChange: updateSection,
+					onRemove: removeSection,
+					onMove: moveSection
+				}), draft.sections.length === 0 ? null : h("button", {
+					type: "button",
+					className: "dspi-add",
+					onClick: addSection
+				}, `＋ ${t("add")}`), h("div", { className: "dspi-settings-actions" }, h("div", {
+					className: "dspi-status",
+					role: "status",
+					"aria-live": "polite"
+				}, h("span", {
+					className: "dspi-status-dot",
+					"data-dirty": dirty || saving ? "true" : "false",
+					"aria-hidden": "true"
+				}), h("span", null, saving ? t("saving") : dirty ? t("statusDirty") : t("statusSaved"))), dirty ? h("button", {
+					type: "button",
+					className: "dspi-btn",
+					disabled: saving,
+					onClick: () => setDraft(payload.state)
+				}, t("revert")) : null, h("button", {
+					type: "button",
+					className: "dspi-btn dspi-btn--primary",
+					onClick: save,
+					disabled: !dirty || saving,
+					title: saveHint
+				}, saving ? t("saving") : t("save"))))
+			]);
+		}
+		/** Locale + slot registration. */
+		const inject = ["slots", "locale"];
+		/**
+		* Register this package's sidebar row and main-column panel.
+		*
+		* The two seats are declared by shell plugins, so each registration is wrapped
+		* in `ctx.slots.inject`: the callback runs only after the owning entry declares
+		* the seat, and a shell that cannot serve the seats leaves the panel simply
+		* absent instead of failing boot.
+		*
+		* @param ctx - the client context carrying `slots` and `locale`.
+		*/
+		function apply(ctx) {
+			ctx.effect(() => ctx.locale.register(NS, {
+				zh,
+				en
+			}), "dsh-system-prompt-insertion: dictionaries");
+			const t = ctx.locale.bind(NS);
+			ctx.effect(() => {
+				const offRow = ctx.slots.inject("sidebar.panellist", () => ctx.slots.register({
+					name: "sidebar.panellist",
+					id: PANEL_ID,
+					order: 30,
+					label: () => t("nav")
+				}, PanelIcon));
+				const offPanel = ctx.slots.inject("main", () => ctx.slots.register({
+					name: "main",
+					key: PANEL_ID,
+					inject: () => ({ t })
+				}, PromptInsertionPanel));
+				return () => {
+					offPanel();
+					offRow();
+				};
+			}, "dsh-system-prompt-insertion: sidebar panel");
+		}
+		exports.NS = NS;
+		exports.PANEL_CSS = PANEL_CSS;
+		exports.PANEL_ID = PANEL_ID;
+		exports.PANEL_ORDER = PANEL_ORDER;
+		exports.POSITIONS = POSITIONS;
+		exports.PanelIcon = PanelIcon;
+		exports.PreviewPanel = PreviewPanel;
+		exports.PromptInsertionPanel = PromptInsertionPanel;
+		exports.SectionCard = SectionCard;
+		exports.SectionList = SectionList;
+		exports.Switch = Switch;
+		exports.apply = apply;
+		exports.inject = inject;
+		return module.exports;
+	}
+});