dsh-prompt-customizer 0.1.0

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "dsh-prompt-customizer",
+  "description": "System-prompt & tool customizer for DeepSeek Harness with a settings-panel UI: block / replace / inject prompt sections by name, and hide tools from the model catalog by exclude/include. Config lives in the dsh settings document (namespace prompt-customizer).",
+  "version": "0.1.0",
+  "type": "module",
+  "private": false,
+  "main": "lib/index.js",
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.client.json --noEmit",
+    "build": "tsdown",
+    "check": "npm run typecheck && npm run build",
+    "prepack": "npm run build"
+  },
+  "exports": {
+    ".": "./lib/index.js",
+    "./client": "./client/client.js",
+    "./cordis.patch.yml": "./cordis.patch.yml",
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-settings"
+      ],
+      "platform": "web"
+    }
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-settings": "^0.1.0-rc.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@deepseek-ai/schemastery": "^3.18.0"
+  },
+  "devDependencies": {
+    "@types/react": "~18.3.1",
+    "@types/react-dom": "~18.3.1",
+    "react": "^18.3.1",
+    "react-dom": "~18.3.1",
+    "tsdown": "^0.22.14",
+    "typescript": "^5.6.0"
+  },
+  "files": [
+    "lib",
+    "client",
+    "src",
+    "cordis.patch.yml"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
+}

package/src/client/PresetsTab.tsx

@@ -0,0 +1,184 @@
+/** Presets tab: save / apply / export / import complete customization snapshots. */
+import { createElement as h, useRef, useState, type ReactElement, type ChangeEvent } from 'react'
+import type { Config, Inventory, Preset, PresetData, SettingsScope } from './types.ts'
+import type { Translate } from './locales.ts'
+import { s } from './styles.ts'
+
+export function PresetsTab({ cfg, inv, scope, t }: { cfg: Config; inv: Inventory | null; scope: SettingsScope; t: Translate }): ReactElement {
+  const presets = cfg.presets ?? []
+  const [name, setName] = useState('')
+  const fileRef = useRef<HTMLInputElement | null>(null)
+
+  // Current section names (inventory + injected), used to decide what to block.
+  const currentNames = (() => {
+    const set = new Set<string>()
+    for (const sec of inv?.sections ?? []) set.add(sec.name)
+    for (const item of cfg.inject ?? []) set.add(item.name)
+    return set
+  })()
+
+  // Capture the current customization as a new preset (full snapshot). The
+  // absolute order is converted to a relative form (each section records the
+  // section it should follow) so the preset stays portable across prompts.
+  const saveCurrent = (): void => {
+    const presetName = name.trim() || `${t('preset')} ${presets.length + 1}`
+    const inject = cfg.inject ?? []
+    const order = inject.map((sec, i) => ({
+      name: sec.name,
+      after: i > 0 ? inject[i - 1].name : undefined,
+      text: sec.text,
+    }))
+    const data: PresetData = {
+      sections: cfg.sections,
+      replace: cfg.replace,
+      order,
+      tools: cfg.tools,
+    }
+    scope.set('presets', [...presets, { id: genId(), name: presetName, data }])
+    setName('')
+  }
+
+  // Apply a preset. The preset's section list defines the active set:
+  //  - same-name sections are overridden (content + order)
+  //  - preset sections missing from the current prompt are added
+  //  - current sections NOT in the preset list are disabled (blocked)
+  //  - the active sections are arranged by the preset's relative order
+  const applyPreset = (preset: Preset): void => {
+    const presetOrder = preset.data.order ?? []
+    const presetNames = new Set(presetOrder.map((x) => x.name))
+
+    // Blocked list: preset's own blocked names, plus any current section that
+    // is not part of the preset's active set; preset's active names unblocked.
+    const blocked = new Set(preset.data.sections ?? [])
+    for (const name of currentNames) if (!presetNames.has(name)) blocked.add(name)
+    for (const name of presetNames) blocked.delete(name)
+
+    scope.set('inject', resolveOrder(presetOrder))
+    scope.set('replace', { ...(cfg.replace ?? {}), ...(preset.data.replace ?? {}) })
+    scope.set('sections', [...blocked])
+    scope.set('tools', preset.data.tools ?? { exclude: [], include: [] })
+    scope.set('activePreset', preset.id)
+  }
+
+  const deletePreset = (id: string): void => {
+    scope.set('presets', presets.filter((p) => p.id !== id))
+    if (cfg.activePreset === id) scope.unset('activePreset')
+  }
+
+  // Serialize a preset to a downloadable JSON file.
+  const exportPreset = (preset: Preset): void => {
+    const blob = new Blob([JSON.stringify({ name: preset.name, data: preset.data }, null, 2)], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${preset.name}.json`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  // Import preset(s) from a JSON file. Same-name presets are skipped; only
+  // presets with new names are added to the local list.
+  const onImportFile = (e: ChangeEvent<HTMLInputElement>): void => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    const reader = new FileReader()
+    reader.onload = () => {
+      try {
+        const parsed = JSON.parse(String(reader.result))
+        const incoming = Array.isArray(parsed) ? parsed : [parsed]
+        const existing = new Set(presets.map((p) => p.name))
+        const added = incoming
+          .filter((p) => p && typeof p.name === 'string' && !existing.has(p.name))
+          .map((p) => ({ id: genId(), name: p.name, data: (p.data ?? {}) as PresetData }))
+        if (added.length > 0) scope.set('presets', [...presets, ...added])
+      } catch { /* ignore invalid json */ }
+    }
+    reader.readAsText(file)
+    e.target.value = ''
+  }
+
+  return h('div', { style: s.list }, [
+    h('div', { style: s.injectBox }, [
+      h('div', { style: s.rowTitle }, t('savePreset')),
+      h('div', { style: s.injectRow }, [
+        h('input', { style: { ...s.input, flex: 1 }, placeholder: t('presetName'), value: name, onChange: (e: ChangeEvent<HTMLInputElement>) => setName(e.target.value) }),
+        h('button', { style: s.mini, onClick: saveCurrent }, t('save')),
+      ]),
+    ]),
+    h('div', { style: s.injectBox }, [
+      h('div', { style: s.rowTitle }, t('importPreset')),
+      h('div', { style: s.injectRow }, [
+        h('button', { style: s.mini, onClick: () => fileRef.current?.click() }, t('import')),
+        h('input', { ref: fileRef, type: 'file', accept: '.json,application/json', style: { display: 'none' }, onChange: onImportFile }),
+      ]),
+    ]),
+    presets.length === 0 ? h('div', { style: s.muted }, t('empty')) : null,
+    presets.map((preset) => {
+      const active = cfg.activePreset === preset.id
+      return h('div', { key: preset.id, style: s.row }, [
+        h('div', { style: s.rowBody }, [
+          h('div', { style: s.rowTitle }, [
+            h('span', { style: s.code }, preset.name),
+            active ? h('span', { style: s.badgeOk }, t('active')) : null,
+          ]),
+        ]),
+        h('button', { style: s.mini, onClick: () => applyPreset(preset) }, t('apply')),
+        h('button', { style: s.mini, onClick: () => exportPreset(preset) }, t('export')),
+        h('button', { style: s.mini, onClick: () => deletePreset(preset.id) }, t('delete')),
+      ])
+    }),
+  ])
+}
+
+function genId(): string {
+  return 'p_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 7)
+}
+
+/**
+ * Resolve a preset's relative order into an absolute ordered list (0..n-1).
+ * Sections with no anchor (or whose anchor is absent) come first in preset
+ * order; each anchored section is inserted right after its anchor; any
+ * remaining sections (cycles) are appended.
+ */
+function resolveOrder(presetOrder: Array<{ name: string; after?: string; text: string }>): Array<{ name: string; order: number; text: string }> {
+  const afterMap = new Map<string, string | undefined>()
+  const textMap = new Map<string, string>()
+  for (const sec of presetOrder) {
+    afterMap.set(sec.name, sec.after)
+    textMap.set(sec.name, sec.text)
+  }
+
+  const result: string[] = []
+  const placed = new Set<string>()
+
+  // Roots: no anchor, or anchor not part of the preset's own set.
+  for (const sec of presetOrder) {
+    const anchor = afterMap.get(sec.name)
+    if (!anchor || !afterMap.has(anchor)) {
+      result.push(sec.name)
+      placed.add(sec.name)
+    }
+  }
+
+  // Chain resolution: place each section right after its (already placed) anchor.
+  let changed = true
+  while (changed) {
+    changed = false
+    for (const sec of presetOrder) {
+      if (placed.has(sec.name)) continue
+      const anchor = afterMap.get(sec.name)
+      if (anchor && placed.has(anchor)) {
+        result.splice(result.indexOf(anchor) + 1, 0, sec.name)
+        placed.add(sec.name)
+        changed = true
+      }
+    }
+  }
+
+  // Any remaining (cycle / unresolved) → append in preset order.
+  for (const sec of presetOrder) {
+    if (!placed.has(sec.name)) { result.push(sec.name); placed.add(sec.name) }
+  }
+
+  return result.map((name, i) => ({ name, order: i, text: textMap.get(name) ?? '' }))
+}

package/src/client/SectionsTab.tsx

@@ -0,0 +1,207 @@
+/** Prompt-sections tab: block / replace / inject / reorder prompt sections. */
+import { createElement as h, useState, type ReactElement, type DragEvent, type ChangeEvent } from 'react'
+import type { Config, Inventory, SettingsScope } from './types.ts'
+import type { Translate } from './locales.ts'
+import { s } from './styles.ts'
+
+interface Section {
+  name: string
+  order: number
+  text?: string
+  active: boolean
+  replaced: boolean
+}
+
+export function SectionsTab({ cfg, inv, scope, t }: { cfg: Config; inv: Inventory | null; scope: SettingsScope; t: Translate }): ReactElement {
+  const replace = cfg.replace ?? {}
+  const blockedNames = new Set(cfg.sections ?? [])
+  const [editing, setEditing] = useState<string | null>(null)
+  const [draft, setDraft] = useState('')
+  const [dragName, setDragName] = useState<string | null>(null)
+  const [dropTarget, setDropTarget] = useState<{ name: string; pos: 'above' | 'below' } | null>(null)
+
+  // Merge inventory sections with user-injected sections, sorted by order.
+  // Injected sections that don't exist in the original prompt appear here too,
+  // positioned by their order value.
+  const merged: Section[] = (() => {
+    const map = new Map<string, Section>()
+    for (const sec of inv?.sections ?? []) map.set(sec.name, sec)
+    for (const item of cfg.inject ?? []) {
+      const existing = map.get(item.name)
+      if (existing) map.set(item.name, { ...existing, order: item.order })
+      else map.set(item.name, {
+        name: item.name,
+        order: item.order,
+        text: item.text || '<动态生成>',
+        active: !blockedNames.has(item.name),
+        replaced: false,
+      })
+    }
+    return [...map.values()].sort((a, b) => a.order - b.order)
+  })()
+
+  const toggleBlock = (name: string, currentlyBlocked: boolean): void => {
+    const list = (cfg.sections ?? []).slice()
+    if (currentlyBlocked) { const i = list.indexOf(name); if (i >= 0) list.splice(i, 1) }
+    else list.push(name)
+    scope.set('sections', list)
+  }
+  const startReplace = (name: string, original: string): void => {
+    // Echo the ORIGINAL prompt text so the user edits from the current value.
+    setEditing(name)
+    setDraft(replace[name] ?? original)
+  }
+  const commitReplace = (name: string): void => {
+    const next = { ...replace }
+    if (draft.trim() === '') delete next[name]
+    else next[name] = draft
+    scope.set('replace', next)
+    setEditing(null)
+  }
+  const clearReplace = (name: string): void => {
+    const next = { ...replace }
+    delete next[name]
+    scope.set('replace', next)
+  }
+
+  // Persist the full ordered list. We treat the sorted list as an array and
+  // re-index every section with a sequential integer order (0, 1, 2, …), so
+  // there are never duplicate or fractional orders. text is left empty for
+  // original sections (keeps their text); injected sections keep their own.
+  const persistOrder = (ordered: Section[]): void => {
+    const list = ordered.map((sec, i) => {
+      const existing = (cfg.inject ?? []).find((x) => x.name === sec.name)
+      return { name: sec.name, order: i, text: existing ? existing.text : '' }
+    })
+    scope.set('inject', list)
+  }
+
+  // Move a section up/down one slot (array-index swap), then re-index.
+  const moveOrder = (index: number, dir: -1 | 1): void => {
+    const target = index + dir
+    if (target < 0 || target >= merged.length) return
+    const next = merged.slice()
+    const [item] = next.splice(index, 1)
+    next.splice(target, 0, item)
+    persistOrder(next)
+  }
+
+  const onDragStart = (e: DragEvent, name: string): void => {
+    setDragName(name)
+    e.dataTransfer.effectAllowed = 'move'
+    try { e.dataTransfer.setData('text/plain', name) } catch { /* ignore */ }
+  }
+  const onDragOver = (e: DragEvent, name: string): void => {
+    if (!dragName || dragName === name) return
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    const rect = e.currentTarget.getBoundingClientRect()
+    const pos = e.clientY < rect.top + rect.height / 2 ? 'above' : 'below'
+    setDropTarget({ name, pos })
+  }
+  const onDrop = (e: DragEvent, target: Section): void => {
+    e.preventDefault()
+    if (!dragName || dragName === target.name) { setDragName(null); setDropTarget(null); return }
+    const dragged = merged.find((x) => x.name === dragName)
+    if (!dragged) { setDragName(null); setDropTarget(null); return }
+    const next = merged.filter((x) => x.name !== dragName)
+    const idx = next.findIndex((x) => x.name === target.name)
+    const pos = dropTarget?.name === target.name ? dropTarget.pos : 'below'
+    next.splice(pos === 'above' ? idx : idx + 1, 0, dragged)
+    persistOrder(next)
+    setDragName(null)
+    setDropTarget(null)
+  }
+  const onDragEnd = (): void => { setDragName(null); setDropTarget(null) }
+
+  // Add a new injected section, placed by its order hint, then re-index.
+  const addSection = (name: string, order: number, text: string): void => {
+    const next = merged.slice()
+    const entry: Section = { name, order, text: text || '<动态生成>', active: true, replaced: false }
+    const existing = next.findIndex((x) => x.name === name)
+    if (existing >= 0) next[existing] = entry
+    else {
+      const idx = next.findIndex((x) => x.order > order)
+      if (idx < 0) next.push(entry)
+      else next.splice(idx, 0, entry)
+    }
+    persistOrder(next)
+  }
+
+  return h('div', { style: s.list }, [
+    merged.length === 0 ? h('div', { style: s.muted }, t('empty')) : null,
+    merged.map((sec, index) => {
+      const blocked = blockedNames.has(sec.name)
+      const isEditing = editing === sec.name
+      const isDragging = dragName === sec.name
+      const isDropTarget = dropTarget?.name === sec.name
+      const rowStyle = {
+        ...s.row,
+        ...(isDragging ? s.rowDragging : {}),
+        ...(isDropTarget && dropTarget.pos === 'above' ? s.rowDropAbove : {}),
+        ...(isDropTarget && dropTarget.pos === 'below' ? s.rowDropBelow : {}),
+      }
+      return h('div', {
+        key: sec.name,
+        style: rowStyle,
+        draggable: true,
+        onDragStart: (e: DragEvent) => onDragStart(e, sec.name),
+        onDragOver: (e: DragEvent) => onDragOver(e, sec.name),
+        onDrop: (e: DragEvent) => onDrop(e, sec),
+        onDragEnd,
+      }, [
+        h('span', { style: s.dragHandle, title: t('drag') }, '⠿'),
+        h('label', { style: s.switchWrap }, [
+          h('input', { type: 'checkbox', checked: blocked, onChange: () => toggleBlock(sec.name, blocked) }),
+          h('span', { style: blocked ? s.badgeBlocked : s.badgeOk }, blocked ? t('blockedOn') : t('blockedOff')),
+        ]),
+        h('div', { style: s.rowBody }, [
+          h('div', { style: s.rowTitle }, [
+            h('span', { style: s.code }, sec.name),
+            h('span', { style: s.orderTag }, '#' + index),
+            sec.replaced ? h('span', { style: s.badgeReplaced }, t('replaced')) : null,
+          ]),
+          isEditing
+            ? h('div', { style: s.editBox }, [
+                h('textarea', { style: s.editInput, value: draft, onChange: (e: ChangeEvent<HTMLTextAreaElement>) => setDraft(e.target.value), rows: 3 }),
+                h('div', { style: s.injectRow }, [
+                  h('button', { style: s.mini, onClick: () => commitReplace(sec.name) }, t('add')),
+                  h('button', { style: s.mini, onClick: () => setEditing(null) }, t('clearReplace')),
+                ]),
+              ])
+            : h('div', { style: s.preview }, String(sec.text ?? '').slice(0, 140) || t('dynamic')),
+        ]),
+        h('div', { style: s.arrowCol }, [
+          h('button', { style: s.arrow, disabled: index === 0, onClick: () => moveOrder(index, -1), title: t('moveUp') }, '↑'),
+          h('button', { style: s.arrow, disabled: index === merged.length - 1, onClick: () => moveOrder(index, 1), title: t('moveDown') }, '↓'),
+        ]),
+        h('button', { style: s.mini, onClick: () => replace[sec.name] ? clearReplace(sec.name) : startReplace(sec.name, String(sec.text ?? '')) }, replace[sec.name] ? t('clearReplace') : t('replace')),
+      ])
+    }),
+    h('div', { style: s.injectBox }, [
+      h('div', { style: s.rowTitle }, t('injectNew')),
+      h(InjectForm, { onAdd: addSection, t }),
+    ]),
+  ])
+}
+
+function InjectForm({ onAdd, t }: { onAdd: (name: string, order: number, text: string) => void; t: Translate }): ReactElement {
+  const [name, setName] = useState('')
+  const [order, setOrder] = useState('120')
+  const [text, setText] = useState('')
+
+  const submit = (): void => {
+    if (!name.trim()) return
+    onAdd(name.trim(), Number(order) || 120, text)
+    setName(''); setText(''); setOrder('120')
+  }
+
+  return h('div', {}, [
+    h('div', { style: s.injectRow }, [
+      h('input', { style: { ...s.input, width: '22%' }, placeholder: t('name'), value: name, onChange: (e) => setName(e.target.value) }),
+      h('input', { style: { ...s.input, width: '12%' }, type: 'number', placeholder: t('order'), value: order, onChange: (e) => setOrder(e.target.value) }),
+      h('input', { style: { ...s.input, flex: 1 }, placeholder: t('text'), value: text, onChange: (e) => setText(e.target.value) }),
+      h('button', { style: s.mini, onClick: submit }, t('add')),
+    ]),
+  ])
+}

package/src/client/ToolsTab.tsx

@@ -0,0 +1,62 @@
+/** Tools tab: hide tools from the model catalog by exclude/include. */
+import { createElement as h, type ReactElement } from 'react'
+import type { Config, Inventory, SettingsScope } from './types.ts'
+import type { Translate } from './locales.ts'
+import { s } from './styles.ts'
+
+export function ToolsTab({ cfg, inv, scope, t }: { cfg: Config; inv: Inventory | null; scope: SettingsScope; t: Translate }): ReactElement {
+  const tools = inv?.tools ?? []
+  const toolsCfg = cfg.tools ?? { exclude: [], include: [] }
+  const exclude = toolsCfg.exclude ?? []
+  const include = toolsCfg.include ?? []
+  const includeMode = include.length > 0
+
+  const toggle = (name: string, currentlyHidden: boolean): void => {
+    if (includeMode) {
+      const next = include.slice()
+      if (currentlyHidden) next.push(name)
+      else { const i = next.indexOf(name); if (i >= 0) next.splice(i, 1) }
+      scope.set('tools', { ...toolsCfg, include: next })
+    } else {
+      const next = exclude.slice()
+      if (currentlyHidden) { const i = next.indexOf(name); if (i >= 0) next.splice(i, 1) }
+      else next.push(name)
+      scope.set('tools', { ...toolsCfg, exclude: next })
+    }
+  }
+  const setIncludeMode = (on: boolean): void => {
+    scope.set('tools', on
+      ? { exclude: exclude.filter((n) => tools.some((tool) => tool.name === n)), include: tools.filter((tool) => !tool.hidden).map((tool) => tool.name) }
+      : { exclude: ensureOnlyKnown(exclude, tools), include: [] })
+  }
+
+  return h('div', {}, [
+    h('div', { style: s.bar }, [
+      h('button', { style: includeMode ? s.tabActive : s.tab, onClick: () => setIncludeMode(true) }, t('includeMode')),
+      h('button', { style: includeMode ? s.tab : s.tabActive, onClick: () => setIncludeMode(false) }, t('excludeMode')),
+    ]),
+    h('div', { style: s.list }, [
+      tools.length === 0 ? h('div', { style: s.muted }, t('empty')) : null,
+      tools.map((tool) => {
+        // Hidden state comes from the CONFIG (exclude/include lists), not the
+        // inventory snapshot, so toggling updates the checkbox immediately.
+        const hidden = includeMode ? !include.includes(tool.name) : exclude.includes(tool.name)
+        return h('div', { key: tool.name, style: s.row }, [
+          h('label', { style: s.switchWrap }, [
+            h('input', { type: 'checkbox', checked: hidden, onChange: () => toggle(tool.name, hidden) }),
+            h('span', { style: hidden ? s.badgeBlocked : s.badgeOk }, hidden ? t('hiddenOn') : t('hiddenOff')),
+          ]),
+          h('div', { style: s.rowBody }, [
+            h('div', { style: s.rowTitle }, h('span', { style: s.code }, tool.name)),
+            h('div', { style: s.preview }, String(tool.description ?? '').slice(0, 140)),
+          ]),
+        ])
+      }),
+    ]),
+  ])
+}
+
+function ensureOnlyKnown(list: string[], known: Array<{ name: string }>): string[] {
+  const names = known.map((tool) => tool.name)
+  return list.filter((n) => names.includes(n))
+}

package/src/client/index.ts

@@ -0,0 +1,117 @@
+/**
+ * dsh-prompt-customizer — browser half (TypeScript source).
+ *
+ * Registers a "提示词定制" settings section (sidebar entry) and a plugin
+ * settings card. The panel fetches the effective section / tool inventory
+ * from the host `/api/prompt-customizer/inventory` and lets the user block,
+ * replace, inject prompt sections and hide tools. All writes go through the
+ * bound settings scope (`prompt-customizer` namespace) and apply live.
+ *
+ * Built by tsdown into the __ModuleLoader__ factory bundle at client/client.js;
+ * the only external is the loader module table's react entry.
+ */
+import { createElement as h, useEffect, useState, type ReactElement } from 'react'
+import { DICT, type Translate } from './locales.ts'
+import { s } from './styles.ts'
+import type { Config, Inventory, SettingsScope } from './types.ts'
+import { SectionsTab } from './SectionsTab.tsx'
+import { ToolsTab } from './ToolsTab.tsx'
+import { PresetsTab } from './PresetsTab.tsx'
+
+const NS = 'prompt-customizer'
+const INVENTORY_URL = '/api/prompt-customizer/inventory'
+
+export const name = 'prompt-customizer'
+export const inject = ['slots', 'locale']
+
+/** The subset of the client cordis context this plugin touches. */
+interface ClientContext {
+  effect(callback: () => unknown, label?: string): void
+  locale: {
+    register(namespace: string, dicts: { zh: Record<string, string>; en: Record<string, string> }): unknown
+    bind(namespace: string): Translate
+  }
+  inject(services: string[], callback: (scoped: SettingsScopeHost) => void): void
+}
+
+/** The host surface the settings card needs (settingsScope transport). */
+interface SettingsScopeHost {
+  settingsScope: {
+    bind(options: { namespace: string }): SettingsScope
+  }
+  slots: {
+    inject(name: string, register: () => unknown): void
+    register(meta: Record<string, unknown>, render: () => unknown): unknown
+  }
+}
+
+export function apply(ctx: ClientContext): void {
+  ctx.effect(() => ctx.locale.register(NS, DICT), 'prompt-customizer: locale')
+  const t = ctx.locale.bind(NS)
+
+  // Register a standalone settings section (sidebar menu entry) AND a plugin
+  // settings card. Both go through a NESTED inject of settingsScope so the
+  // panel can read/write the namespace config; on hosts without the settings
+  // transport neither appears instead of unmounting the whole plugin.
+  ctx.inject(['settingsScope'], (scoped) => {
+    const scope = scoped.settingsScope.bind({ namespace: NS })
+
+    scoped.slots.inject('settings.section', () => scoped.slots.register({
+      name: 'settings.section',
+      id: 'prompt-customizer',
+      order: 50,
+      label: () => t('nav'),
+      locale: NS,
+      inject: () => ({ t }),
+    }, () => h(Panel, { scope, t })))
+
+    scoped.slots.inject('settings.plugin.item', () => scoped.slots.register({
+      name: 'settings.plugin.item',
+      key: NS,
+      locale: NS,
+      inject: () => ({ t }),
+    }, () => h(Panel, { scope, t })))
+  })
+}
+
+// ── Root panel ──────────────────────────────────────────────────────────────
+
+function Panel({ scope, t }: { scope: SettingsScope; t: Translate }): ReactElement {
+  const [snap, setSnap] = useState(() => scope.getSnapshot())
+  const [inv, setInv] = useState<Inventory | null>(null)
+  const [tab, setTab] = useState<'sections' | 'tools' | 'presets'>('sections')
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => scope.subscribe(() => setSnap(scope.getSnapshot())), [scope])
+
+  const refresh = (): void => {
+    fetch(INVENTORY_URL)
+      .then((r) => r.json())
+      .then((data: Inventory) => { setInv(data); setError(null) })
+      .catch((e: unknown) => setError(String(e instanceof Error ? e.message : e)))
+  }
+  useEffect(refresh, [])
+
+  if (snap.status !== 'ready' && snap.value === undefined) {
+    return h('div', { style: s.muted }, t('loading'))
+  }
+
+  const cfg: Config = snap.value && typeof snap.value === 'object'
+    ? snap.value as Config
+    : { sections: [], replace: {}, inject: [], tools: { exclude: [], include: [] } }
+
+  return h('div', { style: s.root }, [
+    h('div', { style: s.bar }, [
+      h('button', { style: tab === 'sections' ? s.tabActive : s.tab, onClick: () => setTab('sections') }, t('tabsSections')),
+      h('button', { style: tab === 'tools' ? s.tabActive : s.tab, onClick: () => setTab('tools') }, t('tabsTools')),
+      h('button', { style: tab === 'presets' ? s.tabActive : s.tab, onClick: () => setTab('presets') }, t('tabsPresets')),
+      h('button', { style: s.refresh, onClick: refresh }, t('refresh')),
+    ]),
+    error ? h('div', { style: s.error }, String(error)) : null,
+    tab === 'sections'
+      ? h(SectionsTab, { cfg, inv, scope, t })
+      : tab === 'tools'
+        ? h(ToolsTab, { cfg, inv, scope, t })
+        : h(PresetsTab, { cfg, inv, scope, t }),
+  ])
+}