dsh-prompt-customizer 0.4.2 → 0.5.1

package/src/client/{PresetsTab.tsx → PresetsPane.tsx}

@@ -1,10 +1,16 @@
-/** 配置 Tab：两种「预设」分开 ——
- *  - 保存当前配置：本插件内的配置快照库（config.presets），可应用 / 导出 / 导入，
- *    不会变成可选的 agent 预设；
- *  - 存为 agent 预设：整体 fork 当前编辑目标的预设目录，并把当前定制写进它的
- *    覆盖项，新预设随即出现在顶部的编辑目标选择器里。
- *  导入导出经 preset-io 双端适配：Tauri 2 桌面走原生对话框，Web 走
- *  下载 / 文件选择；成功 / 失败 / 取消都有面板内消息条提示。 */
+/**
+ * PresetsPane — 独立面板的预设模式（左右双栏）。
+ *
+ * 两种「预设」分开，各占一栏：
+ *  - 左栏（PresetsPane）：配置快照库 —— 保存当前配置 / 导入 / 应用 / 导出 /
+ *    删除。快照只改本插件内的 presets 库，不会变成可选的 agent 预设；
+ *  - 右栏（SettingsPane）：存为 agent 预设（整体 fork 当前编辑目标的预设目录，
+ *    并把当前定制写进它的覆盖项）+ 全局设置（强制覆盖开关、环境变量黑名单、
+ *    提示词变量参考、恢复初始状态）。
+ *
+ * 导入导出经 preset-io 双端适配：Tauri 2 桌面走原生对话框，Web 走下载 /
+ * 文件选择；成功 / 失败 / 取消都有面板内消息条提示。
+ */
 import { createElement as h, useEffect, useRef, useState, type ReactElement, type ChangeEvent } from 'react'
 import type { Config, Inventory, PhaseViewKey, Preview, Preset } from './types.ts'
 import type { Translate } from './locales.ts'
@@ -18,7 +24,22 @@ interface Notice {
   text: string
 }
 
-export function PresetsTab({ cfg, inv, phases, t, writePatch, writeGlobal, saveAsPreset, forkSource, onReset, envBlocklist }: {
+/** 4 秒自动消失的面板内消息条（左右两栏共用行为）。 */
+function useNotice(): { notice: Notice | null; show: (kind: Notice['kind'], text: string) => void } {
+  const [notice, setNotice] = useState<Notice | null>(null)
+  const noticeTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  useEffect(() => () => {
+    if (noticeTimer.current !== null) clearTimeout(noticeTimer.current)
+  }, [])
+  const show = (kind: Notice['kind'], text: string): void => {
+    if (noticeTimer.current !== null) clearTimeout(noticeTimer.current)
+    setNotice({ kind, text })
+    noticeTimer.current = setTimeout(() => setNotice(null), 4000)
+  }
+  return { notice, show }
+}
+
+export function PresetsPane({ cfg, inv, phases, t, writePatch, writeGlobal, envBlocklist }: {
   cfg: Config
   inv: Inventory | null
   /** Panel 并行拉取的三阶段装配：快照只捕获当前装配里真实存在的段。 */
@@ -28,38 +49,14 @@ export function PresetsTab({ cfg, inv, phases, t, writePatch, writeGlobal, saveA
   writePatch: (patch: ConfigPatch) => void
   /** 预设库专用：永远写在全局字段（presets / activePreset 不分作用域）。 */
   writeGlobal: (field: string, value: unknown) => void
-  /** 存为 agent 预设：fork 当前编辑目标的预设目录并写入 overrides[新名]。 */
-  saveAsPreset: (name: string) => Promise<boolean>
-  /** fork 来源的显示名（当前编辑目标预设）；undefined = 全局目标，由服务端回落默认预设。 */
-  forkSource: string | undefined
-  /** 恢复初始状态：清空全部定制并关闭 forceSections（与不装插件等效）。 */
-  onReset: () => void
   /** 全局环境变量黑名单（永远顶层字段，不分作用域）；导出随行、导入并集。 */
   envBlocklist: string[]
 }): ReactElement {
   const presets = cfg.presets ?? []
   const [name, setName] = useState('')
-  // 黑名单「添加」输入框的暂存值。
-  const [blockInput, setBlockInput] = useState('')
-  // 「存为 agent 预设」的名字与在途标记（与服务端往返期间禁用按钮）。
-  const [agentName, setAgentName] = useState('')
-  const [creating, setCreating] = useState(false)
-  const [notice, setNotice] = useState<Notice | null>(null)
+  const { notice, show } = useNotice()
   // Web 回退用的隐藏文件输入（tauri 不可用时才点它）。
   const fileRef = useRef<HTMLInputElement | null>(null)
-  // 消息条自动消失的定时器；新消息会重置旧定时器。
-  const noticeTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  useEffect(() => () => {
-    if (noticeTimer.current !== null) clearTimeout(noticeTimer.current)
-  }, [])
-
-  // 显示提示；ok 与 error 分别配色，4 秒后自动消失。
-  const show = (kind: Notice['kind'], text: string): void => {
-    if (noticeTimer.current !== null) clearTimeout(noticeTimer.current)
-    setNotice({ kind, text })
-    noticeTimer.current = setTimeout(() => setNotice(null), 4000)
-  }
 
   const blockedNames = new Set(cfg.sections ?? [])
   // 快照的捕获宇宙 = 当前预设三个阶段装配里真实存在的段名。「本系统全部提示词」
@@ -76,7 +73,7 @@ export function PresetsTab({ cfg, inv, phases, t, writePatch, writeGlobal, saveA
   const currentNames = new Set(merged.map((sec) => sec.name))
 
   // 把当前定制捕获为新预设（完整快照）。绝对顺序会被转成相对形式
-  // （每段记录它应跟随的前一段），因此预设可以跨不同提示词移植。
+  //（每段记录它应跟随的前一段），因此预设可以跨不同提示词移植。
   const saveCurrent = (): void => {
     const presetName = name.trim() || `${t('preset')} ${presets.length + 1}`
     const data = buildPresetData(cfg, merged)
@@ -84,13 +81,9 @@ export function PresetsTab({ cfg, inv, phases, t, writePatch, writeGlobal, saveA
     setName('')
   }
 
-  // 应用预设。补丁由纯函数助手计算：
-  //  - 同名段被覆盖（内容 + 顺序）
-  //  - 预设中有、当前系统里匹配不上的段默认跳过（跨系统导入不凭空建段）
-  //  - 当前有、但不在预设列表中的段被屏蔽
-  //  - 只有预设的「激活段」被解除屏蔽（预设自己的屏蔽名单被保留）
-  // 四个定制字段以一个补丁写入当前编辑目标（全局顶层或 overrides[id]）；
-  // 快照库（presets / activePreset）永远保持在全局。
+  // 应用预设。补丁由纯函数助手计算（同名段覆盖、匹配不上的跳过、不在预设
+  // 列表中的当前段被屏蔽、只有预设的「激活段」被解除屏蔽）。四个定制字段以
+  // 一个补丁写入当前编辑目标；快照库（presets / activePreset）永远保持在全局。
   const applyPreset = (preset: Preset): void => {
     writePatch(applyPresetData(preset.data, cfg, currentNames))
     writeGlobal('activePreset', preset.id)
@@ -116,8 +109,7 @@ export function PresetsTab({ cfg, inv, phases, t, writePatch, writeGlobal, saveA
   }
 
   // 解析导入文本 → 去重追加 → 提示新增数量。解析失败提示错误。
-  // 单对象格式的文件还可能随行携带全局环境变量黑名单：与当前名单并集合并
-  // （只增不减），新增条数一并报进提示。
+  // 单对象格式的文件还可能随行携带全局环境变量黑名单：与当前名单并集合并。
   const importParsed = (text: string): void => {
     try {
       const parsed = decodePresetExport(text)
@@ -164,9 +156,61 @@ export function PresetsTab({ cfg, inv, phases, t, writePatch, writeGlobal, saveA
     reader.readAsText(file)
   }
 
-  // 存为 agent 预设：fork 当前编辑目标的预设目录 + 把当前定制写进它的覆盖项。
-  // 成败由服务端返回，提示统一走面板顶部的消息条（Panel 的 flash），这里只在
-  // 成功时清空输入框，避免同一条消息显示两遍。
+  return h('div', { style: s.colLeft }, [
+    h('div', { style: s.colScroll }, [
+      notice ? h('div', { style: notice.kind === 'ok' ? s.noticeOk : s.error }, notice.text) : null,
+      h('div', { style: s.groupHead }, t('libraryTitle')),
+      h('div', { style: s.injectBox }, [
+        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.injectRow }, [
+          h('button', { style: s.mini, onClick: () => { void importPreset() } }, 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: () => { void exportPreset(preset) } }, t('export')),
+          h('button', { style: s.mini, onClick: () => deletePreset(preset.id) }, t('delete')),
+        ])
+      }),
+    ]),
+  ])
+}
+
+export function SettingsPane({ cfg, inv, t, writeGlobal, saveAsPreset, forkSource, onReset, envBlocklist }: {
+  cfg: Config
+  inv: Inventory | null
+  t: Translate
+  /** 全局字段专用写通道（forceSections / envBlocklist，不经草稿）。 */
+  writeGlobal: (field: string, value: unknown) => void
+  /** 存为 agent 预设：fork 当前编辑目标的预设目录并写入 overrides[新名]。 */
+  saveAsPreset: (name: string) => Promise<boolean>
+  /** fork 来源的显示名（当前编辑目标预设）；undefined = 全局目标，由服务端回落默认预设。 */
+  forkSource: string | undefined
+  /** 恢复初始状态：清空全部定制并关闭 forceSections（与不装插件等效）。 */
+  onReset: () => void
+  envBlocklist: string[]
+}): ReactElement {
+  // 「存为 agent 预设」的名字与在途标记（与服务端往返期间禁用按钮）。
+  const [agentName, setAgentName] = useState('')
+  const [creating, setCreating] = useState(false)
+  // 黑名单「添加」输入框的暂存值。
+  const [blockInput, setBlockInput] = useState('')
+
+  // 存为 agent 预设：成败由服务端返回，提示统一走面板顶部的消息条（Panel
+  // 的 flash），这里只在成功时清空输入框，避免同一条消息显示两遍。
   const createAgentPreset = async (): Promise<void> => {
     const trimmed = agentName.trim()
     if (trimmed.length === 0 || creating) return
@@ -186,96 +230,69 @@ export function PresetsTab({ cfg, inv, phases, t, writePatch, writeGlobal, saveA
     writeGlobal('envBlocklist', [...envBlocklist, entry])
   }
 
-  return h('div', { style: s.list }, [
-    notice ? h('div', { style: notice.kind === 'ok' ? s.noticeOk : s.error }, notice.text) : null,
-    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('saveAsPresetCard')),
-      h('div', { style: s.muted }, t('saveAsPresetHint', { name: forkSource ?? t('forkSourceDefault') })),
-      h('div', { style: s.injectRow }, [
-        h('input', { style: { ...s.input, flex: 1 }, placeholder: t('agentPresetName'), value: agentName, onChange: (e: ChangeEvent<HTMLInputElement>) => setAgentName(e.target.value) }),
-        h('button', { style: s.mini, disabled: creating || agentName.trim().length === 0, onClick: () => { void createAgentPreset() } }, t('saveAsPreset')),
+  return h('div', { style: s.colRight }, [
+    h('div', { style: s.colRightScroll }, [
+      h('div', { style: s.injectBox }, [
+        h('div', { style: s.rowTitle }, t('saveAsPresetCard')),
+        h('div', { style: s.muted }, t('saveAsPresetHint', { name: forkSource ?? t('forkSourceDefault') })),
+        h('div', { style: s.injectRow }, [
+          h('input', { style: { ...s.input, flex: 1 }, placeholder: t('agentPresetName'), value: agentName, onChange: (e: ChangeEvent<HTMLInputElement>) => setAgentName(e.target.value) }),
+          h('button', { style: s.mini, disabled: creating || agentName.trim().length === 0, onClick: () => { void createAgentPreset() } }, t('saveAsPreset')),
+        ]),
       ]),
-    ]),
-    h('div', { style: s.injectBox }, [
-      h('div', { style: s.rowTitle }, t('importPreset')),
-      h('div', { style: s.injectRow }, [
-        h('button', { style: s.mini, onClick: () => { void importPreset() } }, t('import')),
-        h('input', { ref: fileRef, type: 'file', accept: '.json,application/json', style: { display: 'none' }, onChange: onImportFile }),
+      h('div', { style: s.groupHead }, t('settingsTitle')),
+      h('div', { style: s.injectBox }, [
+        h('div', { style: s.rowTitle }, t('forceTitle')),
+        h('div', { style: s.muted }, t('forceHint')),
+        h('div', { style: s.injectRow }, [
+          h('label', { style: s.switchWrap }, [
+            h('input', {
+              type: 'checkbox',
+              checked: cfg.forceSections !== false,
+              // forceSections 是全局字段，与 presets/activePreset 一样永远写顶层。
+              onChange: (e: ChangeEvent<HTMLInputElement>) => writeGlobal('forceSections', e.target.checked),
+            }),
+            h('span', { style: cfg.forceSections !== false ? s.badgeOk : s.badgeBlocked },
+              cfg.forceSections !== false ? t('forceOn') : t('forceOff')),
+          ]),
+        ]),
       ]),
-    ]),
-    h('div', { style: s.injectBox }, [
-      h('div', { style: s.rowTitle }, t('forceTitle')),
-      h('div', { style: s.muted }, t('forceHint')),
-      h('div', { style: s.injectRow }, [
-        h('label', { style: s.switchWrap }, [
+      h('div', { style: s.injectBox }, [
+        h('div', { style: s.rowTitle }, t('envBlockTitle')),
+        h('div', { style: s.muted }, t('envBlockHint')),
+        h('div', { style: { ...s.toolWrap, marginTop: 6 } }, envBlocklist.map((entry) => h('span', {
+          key: entry,
+          style: { ...s.toolChip, display: 'inline-flex', alignItems: 'center', gap: 4 },
+        }, [
+          entry,
+          h('span', { style: { cursor: 'pointer' }, title: t('delete'), onClick: () => removeBlockEntry(entry) }, '×'),
+        ]))),
+        envBlocklist.length === 0 ? h('div', { style: s.muted }, t('envBlockEmpty')) : null,
+        h('div', { style: { ...s.injectRow, marginTop: 6 } }, [
           h('input', {
-            type: 'checkbox',
-            checked: cfg.forceSections !== false,
-            // forceSections 是全局字段，与 presets/activePreset 一样永远写顶层。
-            onChange: (e: ChangeEvent<HTMLInputElement>) => writeGlobal('forceSections', e.target.checked),
+            style: { ...s.input, flex: 1 },
+            placeholder: t('envBlockAdd'),
+            value: blockInput,
+            onChange: (e: ChangeEvent<HTMLInputElement>) => setBlockInput(e.target.value),
           }),
-          h('span', { style: cfg.forceSections !== false ? s.badgeOk : s.badgeBlocked },
-            cfg.forceSections !== false ? t('forceOn') : t('forceOff')),
+          h('button', { style: s.mini, disabled: blockInput.trim() === '', onClick: addBlockEntry }, t('envBlockAddAction')),
+        ]),
+        h('details', { style: { marginTop: 6 } }, [
+          h('summary', { style: { ...s.muted, cursor: 'pointer' } }, `${t('envVarsTitle')} (${inv?.variables?.length ?? 0})`),
+          h('div', { style: { ...s.muted, marginTop: 4 } }, t('envVarsHint')),
+          h('div', { style: { ...s.toolWrap, marginTop: 4 } }, (inv?.variables ?? []).map((varName) => h('span', { key: varName, style: s.toolChip }, `{{${varName}}}`))),
         ]),
       ]),
-    ]),
-    h('div', { style: s.injectBox }, [
-      h('div', { style: s.rowTitle }, t('envBlockTitle')),
-      h('div', { style: s.muted }, t('envBlockHint')),
-      h('div', { style: { ...s.toolWrap, marginTop: 6 } }, envBlocklist.map((entry) => h('span', {
-        key: entry,
-        style: { ...s.toolChip, display: 'inline-flex', alignItems: 'center', gap: 4 },
-      }, [
-        entry,
-        h('span', { style: { cursor: 'pointer' }, title: t('delete'), onClick: () => removeBlockEntry(entry) }, '×'),
-      ]))),
-      envBlocklist.length === 0 ? h('div', { style: s.muted }, t('envBlockEmpty')) : null,
-      h('div', { style: { ...s.injectRow, marginTop: 6 } }, [
-        h('input', {
-          style: { ...s.input, flex: 1 },
-          placeholder: t('envBlockAdd'),
-          value: blockInput,
-          onChange: (e: ChangeEvent<HTMLInputElement>) => setBlockInput(e.target.value),
-        }),
-        h('button', { style: s.mini, disabled: blockInput.trim() === '', onClick: addBlockEntry }, t('envBlockAddAction')),
-      ]),
-      h('details', { style: { marginTop: 6 } }, [
-        h('summary', { style: { ...s.muted, cursor: 'pointer' } }, `${t('envVarsTitle')} (${inv?.variables?.length ?? 0})`),
-        h('div', { style: { ...s.muted, marginTop: 4 } }, t('envVarsHint')),
-        h('div', { style: { ...s.toolWrap, marginTop: 4 } }, (inv?.variables ?? []).map((name) => h('span', { key: name, style: s.toolChip }, `{{${name}}}`))),
-      ]),
-    ]),
-    h('div', { style: s.injectBox }, [
-      h('div', { style: s.rowTitle }, t('resetTitle')),
-      h('div', { style: s.muted }, t('resetHint')),
-      h('div', { style: s.injectRow }, [
-        h('button', { style: s.mini, onClick: () => {
-          // 二次确认：清空不可撤销，必须明确点头才动手。
-          if (window.confirm(t('resetConfirm'))) onReset()
-        } }, t('resetAction')),
+      h('div', { style: s.injectBox }, [
+        h('div', { style: s.rowTitle }, t('resetTitle')),
+        h('div', { style: s.muted }, t('resetHint')),
+        h('div', { style: s.injectRow }, [
+          h('button', { style: s.mini, onClick: () => {
+            // 二次确认：清空不可撤销，必须明确点头才动手。
+            if (window.confirm(t('resetConfirm'))) onReset()
+          } }, t('resetAction')),
+        ]),
       ]),
     ]),
-    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: () => { void exportPreset(preset) } }, t('export')),
-        h('button', { style: s.mini, onClick: () => deletePreset(preset.id) }, t('delete')),
-      ])
-    }),
   ])
 }

package/src/client/PreviewPane.tsx

@@ -0,0 +1,73 @@
+/**
+ * PreviewPane — 独立面板的右栏（提示词 / 工具模式常驻）。
+ *
+ * 只读预览，没有任何切换控件：看提示词还是工具由顶部模式决定（选「提示词」
+ * = 提示词编辑 + 提示词预览；选「工具」= 工具编辑 + 工具预览），阶段由头部
+ * 的阶段按钮统一控制（与左栏联动）。数据来自 Panel 并行拉取的三阶段装配，
+ * 编辑草稿后由 Panel 防抖叠加同步 —— 所见即模型所见。本视图绝不修改配置。
+ */
+import { createElement as h, type ReactElement } from 'react'
+import type { PhaseViewKey, Preview } from './types.ts'
+import type { Translate } from './locales.ts'
+import { s } from './styles.ts'
+import { PreviewTools } from './PreviewTools.tsx'
+
+/** Panel 并行拉取的三阶段装配。 */
+type PhaseViews = Record<PhaseViewKey, Preview | null>
+
+export function PreviewPane({ t, phases, phase, sub }: {
+  t: Translate
+  phases: PhaseViews | null
+  /** 当前阶段（状态在 Panel 持有，头部阶段按钮统一切换）。 */
+  phase: PhaseViewKey
+  /** 提示词 / 工具子视图：跟随顶部模式（无手动切换）。 */
+  sub: 'prompt' | 'tools'
+}): ReactElement {
+  const data = phases?.[phase] ?? null
+  // 按当前所选阶段判定「段级定制没进最终提示词」：有 complete 段整段接管就说
+  // 接管，否则探测本插件产出的段是否被下游丢弃（丢弃规则不止一种）。
+  const lossNote = data === null || data === undefined ? null
+    : data.takenOverBy !== undefined
+      ? t('sectionsTakenOver', { name: data.takenOverBy })
+      : data.lostSections !== undefined
+        ? t('sectionsLost', { emitted: data.lostSections.emitted, survived: data.lostSections.survived })
+        : null
+
+  return h('div', { style: s.colRight }, [
+    h('div', { style: s.colRightScroll }, [
+      // 该阶段的本插件段级产出没进最终提示词（整段接管或被下游丢弃）。
+      lossNote !== null ? h('div', { style: s.noticeWarn }, lossNote) : null,
+      // scope 挂载失败回退全局层时明确警示：这不是该预设的原生装配。
+      data !== null && data.scopeResolved === false
+        ? h('div', { style: s.noticeWarn }, t('scopeFallback'))
+        : null,
+      phases === null ? h('div', { style: s.muted }, t('loading')) : null,
+      phases !== null && data === null
+        ? h('div', { style: s.error }, t('previewFail'))
+        : 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
+          ? [
+              // 模型视角 vs 注册表视角的对照：预览按所选阶段运行全部装配规则
+              //（含预设原生的阶段裁剪），某些预设（如 PTC / Code Mode）会把
+              // 完整目录包装成单一工具，注册表原始目录仍列在工具子视图。
+              h('div', { style: s.rowTitle }, [
+                h('span', { style: s.muted }, t('previewToolsHint')),
+                h('span', { style: s.orderTag },
+                  `${data.tools.length} / ${data.registryTotal ?? '?'} ${t('previewToolsCount')}`),
+              ]),
+              h(PreviewTools, { tools: data.tools, t }),
+            ]
+          : null,
+    ]),
+  ])
+}