dsh-prompt-customizer 0.2.7 → 0.3.1

package/src/client/PresetsTab.tsx

@@ -1,78 +1,167 @@
-/** 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'
+/** 配置 Tab：两种「预设」分开 ——
+ *  - 保存当前配置：本插件内的配置快照库（config.presets），可应用 / 导出 / 导入，
+ *    不会变成可选的 agent 预设；
+ *  - 存为 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'
-import { addImportedPresets, applyPresetData, buildPresetData, mergeSections, removePreset, serializePreset } from './presets.ts'
+import { addImportedPresets, applyPresetData, buildPresetData, genId, mergeSections, PART_ORDER, removePreset, type ConfigPatch } from './presets.ts'
+import { decodePresetExport, exportPresetFile, importPresetFile } from './preset-io.ts'
 import { s } from './styles.ts'
 
-export function PresetsTab({ cfg, inv, scope, t }: { cfg: Config; inv: Inventory | null; scope: SettingsScope; t: Translate }): ReactElement {
+/** 一次性操作提示：kind 决定配色，几秒后自动消失。 */
+interface Notice {
+  kind: 'ok' | 'error'
+  text: string
+}
+
+export function PresetsTab({ cfg, inv, phases, t, writePatch, writeGlobal, saveAsPreset, forkSource }: {
+  cfg: Config
+  inv: Inventory | null
+  /** Panel 并行拉取的三阶段装配：快照只捕获当前装配里真实存在的段。 */
+  phases: Record<PhaseViewKey, Preview | null> | null
+  t: Translate
+  /** 应用预设：完整补丁一次落盘（显式意图，不经草稿）。 */
+  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
+}): ReactElement {
   const presets = cfg.presets ?? []
   const [name, setName] = useState('')
+  // 「存为 agent 预设」的名字与在途标记（与服务端往返期间禁用按钮）。
+  const [agentName, setAgentName] = useState('')
+  const [creating, setCreating] = useState(false)
+  const [notice, setNotice] = useState<Notice | null>(null)
+  // 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 ?? [])
-  const merged = mergeSections(inv, cfg, blockedNames)
+  // 快照的捕获宇宙 = 当前预设三个阶段装配里真实存在的段名。「本系统全部提示词」
+  // 是跨预设只增不减的并集池，直接拿它当捕获集合会把别的预设独有段名灌进快照，
+  // 应用回来就是一条条空白幽灵段。装配数据未就绪（宇宙为空）时不过滤，避免捕获成空。
+  const assemblyNames = new Set<string>()
+  for (const key of PART_ORDER) {
+    for (const sec of phases?.[key]?.baseSections ?? []) assemblyNames.add(sec.name)
+  }
+  const mergedAll = mergeSections(inv, cfg, blockedNames)
+  const merged = assemblyNames.size === 0
+    ? mergedAll
+    : mergedAll.filter((sec) => sec.source === 'custom' || assemblyNames.has(sec.name))
   const currentNames = new Set(merged.map((sec) => sec.name))
 
-  // 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 data = buildPresetData(cfg, merged)
-    scope.set('presets', [...presets, { id: genId(), name: presetName, data }])
+    writeGlobal('presets', [...presets, { id: genId(), name: presetName, data }])
     setName('')
   }
 
-  // Apply a preset. The patch is computed by the pure helper:
-  //  - 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)
-  //  - only the preset's ACTIVE sections are unblocked (its own blocked list
-  //    is preserved)
+  // 应用预设。补丁由纯函数助手计算：
+  //  - 同名段被覆盖（内容 + 顺序）
+  //  - 预设中有、当前提示词中没有的段被添加
+  //  - 当前有、但不在预设列表中的段被屏蔽
+  //  - 只有预设的「激活段」被解除屏蔽（预设自己的屏蔽名单被保留）
+  // 四个定制字段以一个补丁写入当前编辑目标（全局顶层或 overrides[id]）；
+  // 快照库（presets / activePreset）永远保持在全局。
   const applyPreset = (preset: Preset): void => {
-    const patch = applyPresetData(preset.data, cfg, currentNames)
-    scope.set('inject', patch.inject)
-    scope.set('replace', patch.replace)
-    scope.set('sections', patch.sections)
-    scope.set('tools', patch.tools)
-    scope.set('activePreset', preset.id)
+    writePatch(applyPresetData(preset.data, cfg, currentNames))
+    writeGlobal('activePreset', preset.id)
   }
 
   const deletePreset = (id: string): void => {
     const next = removePreset(presets, id, cfg.activePreset)
-    scope.set('presets', next.presets)
-    if (next.activeId === undefined && cfg.activePreset === id) scope.unset('activePreset')
+    writeGlobal('presets', next.presets)
+    if (next.activeId === undefined && cfg.activePreset === id) writeGlobal('activePreset', undefined)
+  }
+
+  // 导出一个预设：Tauri 桌面走原生保存对话框，Web（或 tauri 插件不可用
+  // 时）回退为下载。saved/downloaded = 成功；用户取消单独提示，不算失败。
+  const exportPreset = async (preset: Preset): Promise<void> => {
+    try {
+      const res = await exportPresetFile(preset)
+      if (res.ok) show('ok', t('exportOk'))
+      else if (res.cancelled) show('ok', t('exportCancel'))
+      else show('error', `${t('exportFail')}${res.message ? ': ' + res.message : ''}`)
+    } catch (e) {
+      show('error', `${t('exportFail')}: ${e instanceof Error ? e.message : String(e)}`)
+    }
+  }
+
+  // 解析导入文本 → 去重追加 → 提示新增数量。解析失败提示错误。
+  const importParsed = (text: string): void => {
+    try {
+      const parsed = decodePresetExport(text)
+      const next = addImportedPresets(presets, parsed, genId)
+      const added = next.length - presets.length
+      if (added <= 0) show('ok', t('importNone'))
+      else {
+        writeGlobal('presets', next)
+        show('ok', `${t('importOk')} (+${added})`)
+      }
+    } catch (e) {
+      show('error', `${t('importFail')}: ${e instanceof Error ? e.message : String(e)}`)
+    }
   }
 
-  // Serialize a preset to a downloadable JSON file.
-  const exportPreset = (preset: Preset): void => {
-    const blob = new Blob([JSON.stringify(serializePreset(preset), 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)
+  // 导入预设：优先 Tauri 原生打开对话框；unavailable（Web 或桌面端缺
+  // dialog/fs 插件）时点隐藏 file input 回退到文件选择器。取消单独提示。
+  const importPreset = async (): Promise<void> => {
+    try {
+      const res = await importPresetFile()
+      if (res.kind === 'text') { importParsed(res.text); return }
+      if (res.kind === 'cancelled') { show('ok', t('importCancel')); return }
+      fileRef.current?.click()
+    } catch (e) {
+      show('error', `${t('importFail')}: ${e instanceof Error ? e.message : String(e)}`)
+    }
   }
 
-  // Import preset(s) from a JSON file. Same-name presets are skipped; only
-  // presets with new names are added to the local list.
+  // Web 回退路径：文件选择器的 onChange。用户取消（无文件）静默返回。
   const onImportFile = (e: ChangeEvent<HTMLInputElement>): void => {
     const file = e.target.files?.[0]
+    e.target.value = ''
     if (!file) return
     const reader = new FileReader()
-    reader.onload = () => {
-      try {
-        const parsed = JSON.parse(String(reader.result))
-        scope.set('presets', addImportedPresets(presets, parsed, genId))
-      } catch { /* ignore invalid json */ }
-    }
+    reader.onload = () => importParsed(String(reader.result))
+    reader.onerror = () => show('error', t('importFail'))
     reader.readAsText(file)
-    e.target.value = ''
+  }
+
+  // 存为 agent 预设：fork 当前编辑目标的预设目录 + 把当前定制写进它的覆盖项。
+  // 成败由服务端返回，提示统一走面板顶部的消息条（Panel 的 flash），这里只在
+  // 成功时清空输入框，避免同一条消息显示两遍。
+  const createAgentPreset = async (): Promise<void> => {
+    const trimmed = agentName.trim()
+    if (trimmed.length === 0 || creating) return
+    setCreating(true)
+    if (await saveAsPreset(trimmed)) setAgentName('')
+    setCreating(false)
   }
 
   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 }, [
@@ -80,10 +169,18 @@ export function PresetsTab({ cfg, inv, scope, t }: { cfg: Config; inv: Inventory
         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')),
+      ]),
+    ]),
     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('button', { style: s.mini, onClick: () => { void importPreset() } }, t('import')),
         h('input', { ref: fileRef, type: 'file', accept: '.json,application/json', style: { display: 'none' }, onChange: onImportFile }),
       ]),
     ]),
@@ -98,13 +195,9 @@ export function PresetsTab({ cfg, inv, scope, t }: { cfg: Config; inv: Inventory
           ]),
         ]),
         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: () => { void 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)
-}

package/src/client/PreviewTab.tsx

@@ -1,54 +1,70 @@
-/** 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'
+/** 预览 Tab：两个只读子视图 —— 所有插件过滤后的最终装配系统提示词，
+ *  以及当前定制（黑名单过滤之后）将注入的工具目录视图。
+ *  两个视图都不修改配置。预览目标跟随面板顶部的编辑目标（`target`）；
+ *  数据直接来自 Panel 并行拉取的三阶段装配（`phases`）—— 与提示词/
+ *  工具 Tab 同源（同一份 base + post 视图），杜绝三个视图数据不一致。
+ *  阶段按钮恒为引导期 / 常驻期 / 压缩受控期三个（与另两个 Tab 同源同形）。 */
+import { createElement as h, useState, type ReactElement } from 'react'
+import type { PhaseViewKey, Preview } from './types.ts'
 import type { Translate } from './locales.ts'
+import { PART_ORDER } from './presets.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 {
+export function PreviewTab({ t, active, refreshId, target, version, phases }: {
+  t: Translate
+  active: boolean
+  refreshId: number
+  /** 顶部编辑目标：undefined = 全局（standard scope）；字符串 = agent 预设 id。 */
+  target: string | undefined
+  /** 配置写入计数：Panel 每次成功写配置后 +1（驱动统一重载）。
+   *  ponytail: refreshId/version 由 Panel 的统一重载消费，本组件内未直接使用。 */
+  version: number
+  /** Panel 并行拉取的三阶段装配（模型视角统一数据源）。 */
+  phases: Record<PhaseViewKey, Preview | null> | null
+}): ReactElement {
   const [sub, setSub] = useState<'prompt' | 'tools'>('prompt')
-  const [data, setData] = useState<Preview | null>(null)
-  const [error, setError] = useState<string | null>(null)
+  const [phase, setPhase] = useState<PhaseViewKey>('bootstrap')
+
+  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
 
-  // 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])
+  // 阶段按钮命名：引导期 / 常驻期 / 压缩受控期。
+  const stageLabel = (p: PhaseViewKey): string =>
+    p === 'bootstrap' ? t('phaseStageGuide') : p === 'compaction' ? t('phaseStageControlled') : t('phaseStageResident')
 
   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')),
+      h('div', { style: { marginLeft: 'auto', display: 'flex', gap: 4 } },
+        PART_ORDER.map((key) => h('button', {
+          key,
+          style: phase === key ? s.tabActive : s.tab,
+          onClick: () => setPhase(key),
+        }, stageLabel(key)))),
     ]),
-    error ? h('div', { style: s.error }, String(error)) : null,
-    data === null && !error ? h('div', { style: s.muted }, t('loading')) : null,
+    // 该阶段的本插件段级产出没进最终提示词（整段接管或被下游丢弃）。
+    lossNote !== null ? h('div', { style: s.noticeWarn }, lossNote) : null,
+    // scope 挂载失败回退全局层时明确警示：这不是该预设的原生装配。
+    data !== null && data.scopeResolved === false
+      ? h('div', { style: s.noticeWarn }, t('scopeFallback'))
+      : null,
+    // 伪会话触发预设插件异常时本次预览降级为无会话装配（原生阶段规则未运行）。
+    data !== null && data.degraded === true
+      ? h('div', { style: s.noticeWarn }, t('previewDegraded'))
+      : 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
         ? [
@@ -60,7 +76,17 @@ export function PreviewTab({ scope, t }: { scope: SettingsScope; t: Translate })
           ]
         : null
       : data
-        ? h(PreviewTools, { tools: data.tools, t })
+        ? [
+            // 模型视角 vs 注册表视角的对照：预览按所选阶段运行全部装配规则
+            // （含预设原生的阶段裁剪），某些预设（如 PTC / Code Mode）会把
+            // 完整目录包装成单一工具，注册表原始目录仍列在工具 Tab。
+            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,
   ])
-}
+}

package/src/client/PreviewTools.tsx

@@ -1,13 +1,15 @@
-/** 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
 
+/** 把字符串形态的条目补全为 { name, description: '' }。 */
+
 function norm(tool: PreviewTool): { name: string; description: string } {
   return typeof tool === 'string' ? { name: tool, description: '' } : tool
 }