dsh-prompt-customizer 0.2.5 → 0.2.7

package/lib/schema.js

@@ -27,6 +27,24 @@ export const Config = Schema.object({
     exclude: Schema.array(Schema.string()).default([]),
     include: Schema.array(Schema.string()).default([]),
   }).default({}),
+  // Per-agent customizations: byAgent.<agentPresetId> OVERRIDES the default
+  // sections / replace / inject / tools for that specific agent preset. The
+  // top-level fields act as the shared default applied to every other agent.
+  // Each entry is a partial overlay; omitted fields inherit the default.
+  byAgent: Schema.dict(Schema.object({
+    sections: Schema.array(Schema.string()),
+    replace: Schema.dict(Schema.string()),
+    inject: Schema.array(Schema.object({
+      name: Schema.string().required(),
+      order: Schema.number().default(120),
+      text: Schema.string().required(),
+      custom: Schema.boolean().default(false),
+    })),
+    tools: Schema.object({
+      exclude: Schema.array(Schema.string()),
+      include: Schema.array(Schema.string()),
+    }),
+  })).default({}),
   // Presets: complete customization snapshots (full prompt + tool config).
   presets: Schema.array(Schema.object({
     id: Schema.string().required(),

package/package.json

@@ -1,7 +1,7 @@
 {
   "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.2.5",
+  "version": "0.2.7",
   "type": "module",
   "private": false,
   "main": "lib/index.js",

package/src/client/PreviewTab.tsx

@@ -0,0 +1,66 @@
+/** Preview tab: two read-only sub-tabs — the FINAL assembled system prompt
+ *  after every plugin's filter, and the tools the current preset will inject
+ *  (whitelist-style, after include/exclude). Neither view edits config. */
+import { createElement as h, useEffect, useRef, useState, type ReactElement } from 'react'
+import type { Preview, SettingsScope } from './types.ts'
+import type { Translate } from './locales.ts'
+import { s } from './styles.ts'
+import { PreviewTools } from './PreviewTools.tsx'
+
+const PREVIEW_URL = '/api/prompt-customizer/preview'
+
+export function PreviewTab({ scope, t }: { scope: SettingsScope; t: Translate }): ReactElement {
+  const [sub, setSub] = useState<'prompt' | 'tools'>('prompt')
+  const [data, setData] = useState<Preview | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  // Reload whenever the namespace config changes (block/replace/inject), so the
+  // section count and final text always reflect the current customization —
+  // not just on mount. A config change that lands while a fetch is in flight is
+  // never dropped: it schedules one trailing reload, so the preview converges
+  // to the latest config even when the in-flight response was served before the
+  // write committed on the host.
+  const inFlight = useRef(false)
+  const pending = useRef(false)
+  const load = (): void => {
+    if (inFlight.current) { pending.current = true; return }
+    inFlight.current = true
+    setData(null)
+    fetch(PREVIEW_URL, { cache: 'no-store' })
+      .then((r) => r.json())
+      .then((body: Preview) => {
+        if (body && body.ok === false) throw new Error((body as { error?: string }).error ?? 'preview failed')
+        setData(body)
+        setError(null)
+      })
+      .catch((e: unknown) => setError(String(e instanceof Error ? e.message : e)))
+      .finally(() => {
+        inFlight.current = false
+        if (pending.current) { pending.current = false; load() }
+      })
+  }
+  useEffect(load, [])
+  useEffect(() => scope.subscribe(load), [scope])
+
+  return h('div', { style: s.list }, [
+    h('div', { style: s.bar }, [
+      h('button', { style: sub === 'prompt' ? s.tabActive : s.tab, onClick: () => setSub('prompt') }, t('previewPrompt')),
+      h('button', { style: sub === 'tools' ? s.tabActive : s.tab, onClick: () => setSub('tools') }, t('previewTools')),
+    ]),
+    error ? h('div', { style: s.error }, String(error)) : null,
+    data === null && !error ? h('div', { style: s.muted }, t('loading')) : null,
+    sub === 'prompt'
+      ? data
+        ? [
+            h('div', { style: s.rowTitle }, [
+              h('span', { style: s.muted }, t('previewHint')),
+              h('span', { style: s.orderTag }, `${data.sections.length} ${t('previewSections')}`),
+            ]),
+            h('pre', { style: s.previewText }, data.text || t('empty')),
+          ]
+        : null
+      : data
+        ? h(PreviewTools, { tools: data.tools, t })
+        : null,
+  ])
+}

package/src/client/PreviewTools.tsx

@@ -0,0 +1,31 @@
+/** Tools preview: read-only whitelist-style list of the tools the current
+ *  preset will inject (the FINAL model-visible catalog after include/exclude).
+ *  A tool being listed means it is visible — there is no "blocked" state here.
+ *  This view never edits the blacklist/whitelist config. */
+import { createElement as h, type ReactElement } from 'react'
+import type { Translate } from './locales.ts'
+import { s } from './styles.ts'
+
+export type PreviewTool = { name: string; description: string } | string
+
+function norm(tool: PreviewTool): { name: string; description: string } {
+  return typeof tool === 'string' ? { name: tool, description: '' } : tool
+}
+
+export function PreviewTools({ tools, t }: { tools: PreviewTool[]; t: Translate }): ReactElement {
+  if (tools.length === 0) return h('div', { style: s.muted }, t('empty'))
+  return h('div', { style: s.list }, [
+    h('div', { style: s.rowTitle }, [
+      h('span', { style: s.orderTag }, `${tools.length} ${t('previewToolCount')}`),
+    ]),
+    tools.map((tool) => {
+      const { name, description } = norm(tool)
+      return h('div', { key: name, style: s.row }, [
+        h('div', { style: s.rowBody }, [
+          h('div', { style: s.rowTitle }, h('span', { style: s.code }, name)),
+          h('div', { style: s.preview }, String(description ?? '').slice(0, 140)),
+        ]),
+      ])
+    }),
+  ])
+}

package/src/client/ToolsTab.tsx

@@ -1,37 +1,41 @@
-/** Tools tab: hide tools from the model catalog by exclude/include. */
+/** Tools tab: hide tools from the model catalog (blacklist only — check = hide). */
 import { createElement as h, type ReactElement } from 'react'
 import type { Config, Inventory, SettingsScope } from './types.ts'
 import type { Translate } from './locales.ts'
-import { isToolHidden, setToolMode, toggleTool } from './presets.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 includeMode = (toolsCfg.include ?? []).length > 0
+  const exclude = cfg.tools?.exclude ?? []
+
+  // Blacklist-only: a tool is hidden iff it is in the exclude list. Any stale
+  // whitelist (include) is discarded on write so mode switching is gone.
+  const hidden = (name: string): boolean => exclude.includes(name)
 
   const toggle = (name: string, currentlyHidden: boolean): void => {
-    scope.set('tools', toggleTool(name, currentlyHidden, toolsCfg))
+    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', { exclude: next, include: [] })
   }
-  const setIncludeMode = (on: boolean): void => {
-    scope.set('tools', setToolMode(on, toolsCfg, tools.map((tool) => tool.name)))
+
+  const setAll = (hideAll: boolean): void => {
+    scope.set('tools', { exclude: hideAll ? tools.map((tool) => tool.name) : [], 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('button', { style: s.mini, onClick: () => setAll(true) }, t('selectAll')),
+      h('button', { style: s.mini, onClick: () => setAll(false) }, t('selectNone')),
     ]),
     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 = isToolHidden(tool.name, toolsCfg)
+        const isHidden = hidden(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('input', { type: 'checkbox', checked: isHidden, onChange: () => toggle(tool.name, isHidden) }),
+            h('span', { style: isHidden ? s.badgeBlocked : s.badgeOk }, isHidden ? t('hiddenOn') : t('hiddenOff')),
           ]),
           h('div', { style: s.rowBody }, [
             h('div', { style: s.rowTitle }, h('span', { style: s.code }, tool.name)),

package/src/client/index.ts

@@ -17,6 +17,7 @@ import type { Config, Inventory, SettingsScope } from './types.ts'
 import { SectionsTab } from './SectionsTab.tsx'
 import { ToolsTab } from './ToolsTab.tsx'
 import { PresetsTab } from './PresetsTab.tsx'
+import { PreviewTab } from './PreviewTab.tsx'
 
 const NS = 'prompt-customizer'
 const INVENTORY_URL = '/api/prompt-customizer/inventory'
@@ -73,7 +74,7 @@ export function apply(ctx: ClientContext): void {
 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 [tab, setTab] = useState<'sections' | 'tools' | 'presets' | 'preview'>('sections')
   const [error, setError] = useState<string | null>(null)
 
   useEffect(() => scope.subscribe(() => setSnap(scope.getSnapshot())), [scope])
@@ -99,6 +100,7 @@ function Panel({ scope, t }: { scope: SettingsScope; t: Translate }): ReactEleme
       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: tab === 'preview' ? s.tabActive : s.tab, onClick: () => setTab('preview') }, t('tabsPreview')),
       h('button', { style: s.refresh, onClick: refresh }, t('refresh')),
     ]),
     error ? h('div', { style: s.error }, String(error)) : null,
@@ -106,6 +108,8 @@ function Panel({ scope, t }: { scope: SettingsScope; t: Translate }): ReactEleme
       ? h(SectionsTab, { cfg, inv, scope, t })
       : tab === 'tools'
         ? h(ToolsTab, { cfg, inv, scope, t })
-        : h(PresetsTab, { cfg, inv, scope, t }),
+        : tab === 'presets'
+          ? h(PresetsTab, { cfg, inv, scope, t })
+          : h(PreviewTab, { scope, t }),
   ])
 }

package/src/client/locales.ts

@@ -7,6 +7,7 @@ export const DICT = {
     tabsSections: '提示词',
     tabsTools: '工具',
     tabsPresets: '预设',
+    tabsPreview: '预览',
     refresh: '刷新',
     blockedOff: '未屏蔽',
     blockedOn: '已屏蔽',
@@ -22,13 +23,18 @@ export const DICT = {
     add: '添加',
     hiddenOff: '可见',
     hiddenOn: '已隐藏',
-    includeMode: '白名单模式：仅保留勾选项',
-    excludeMode: '黑名单模式：勾选 = 隐藏',
+    selectAll: '全选',
+    selectNone: '全不选',
     empty: '（空）',
     dynamic: '<动态生成>',
     drag: '拖动排序',
     moveUp: '上移',
     moveDown: '下移',
+    previewHint: '以下为屏蔽/替换/注入后的最终系统提示词：',
+    previewPrompt: '提示词预览',
+    previewSections: '段',
+    previewTools: '工具预览',
+    previewToolCount: '个工具',
     savePreset: '保存当前为预设',
     presetName: '预设名称',
     save: '保存',
@@ -47,6 +53,7 @@ export const DICT = {
     tabsSections: 'Sections',
     tabsTools: 'Tools',
     tabsPresets: 'Presets',
+    tabsPreview: 'Preview',
     refresh: 'Refresh',
     blockedOff: 'Active',
     blockedOn: 'Blocked',
@@ -62,13 +69,18 @@ export const DICT = {
     add: 'Add',
     hiddenOff: 'Visible',
     hiddenOn: 'Hidden',
-    includeMode: 'Whitelist: keep only checked',
-    excludeMode: 'Blacklist: check to hide',
+    selectAll: 'Select all',
+    selectNone: 'Select none',
     empty: '(empty)',
     dynamic: '<dynamic>',
     drag: 'Drag to reorder',
     moveUp: 'Move up',
     moveDown: 'Move down',
+    previewHint: 'Final system prompt after block/replace/inject:',
+    previewPrompt: 'Prompt preview',
+    previewSections: 'sections',
+    previewTools: 'Tools preview',
+    previewToolCount: 'tools',
     savePreset: 'Save current as preset',
     presetName: 'Preset name',
     save: 'Save',

package/src/client/styles.ts

@@ -15,6 +15,9 @@ export const s = (() => {
     code: { fontFamily: 'monospace', fontSize: 12, wordBreak: 'break-all' },
     orderTag: { color: 'rgba(128,128,128,.8)', fontSize: 11 },
     preview: { color: 'rgba(128,128,128,.85)', fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+    previewText: { fontFamily: 'monospace', fontSize: 12, lineHeight: 1.6, whiteSpace: 'pre-wrap', wordBreak: 'break-word', maxHeight: 480, overflowY: 'auto', padding: 10, border: '1px solid rgba(128,128,128,.2)', borderRadius: 8, background: 'rgba(0,0,0,.18)', margin: 0 },
+    toolWrap: { display: 'flex', flexWrap: 'wrap', gap: 6 },
+    toolChip: { fontFamily: 'monospace', fontSize: 12, color: 'rgba(128,128,128,.95)', border: '1px solid rgba(128,128,128,.3)', borderRadius: 6, padding: '2px 6px', cursor: 'help' },
     badgeOk: { color: '#3fb950', fontSize: 11, border: '1px solid rgba(63,185,80,.5)', borderRadius: 999, padding: '0 6px' },
     badgeBlocked: { color: '#f85149', fontSize: 11, border: '1px solid rgba(248,81,73,.5)', borderRadius: 999, padding: '0 6px' },
     badgeReplaced: { color: '#d29922', fontSize: 11, border: '1px solid rgba(210,153,34,.5)', borderRadius: 999, padding: '0 6px' },

package/src/client/types.ts

@@ -14,16 +14,50 @@ export interface Inventory {
   tools: Array<{ name: string; description?: string; hidden: boolean }>
 }
 
+/** Final-assembly preview payload from the host route. */
+export interface Preview {
+  ok: boolean
+  scope?: unknown
+  sections: Array<{ name: string; text: string }>
+  text: string
+  tools: Array<{ name: string; description: string } | string>
+}
+
 /** The resolved config object (namespace value). */
 export interface Config {
   sections?: string[]
   replace?: Record<string, string>
   inject?: Array<{ name: string; order: number; text: string; custom?: boolean }>
   tools?: { exclude?: string[]; include?: string[] }
+  /** Per-agent overlays: byAgent.<agentId> overrides the default fields for that agent. */
+  byAgent?: Record<string, AgentOverlay>
   presets?: Preset[]
   activePreset?: string
 }
 
+/** The per-agent overlay subset of Config (everything except byAgent/presets). */
+export interface AgentOverlay {
+  sections?: string[]
+  replace?: Record<string, string>
+  inject?: Array<{ name: string; order: number; text: string; custom?: boolean }>
+  tools?: { exclude?: string[]; include?: string[] }
+}
+
+/** Agent-preset info returned by /api/prompt-customizer/agents. */
+export interface AgentInfo {
+  id: string
+  name: string
+  description: string
+  order: number
+}
+
+export interface AgentsPayload {
+  ok: boolean
+  agents: AgentInfo[]
+  defaultAgent?: string
+  error?: string
+}
+
 /** A complete customization snapshot that can be saved / applied / exported. */
 export interface Preset {
   id: string