dsh-prompt-customizer 0.2.7 → 0.3.0

package/lib/schema.js

@@ -1,70 +1,52 @@
-import Schema from '@deepseek-ai/schemastery'
-
-/** Settings namespace for this plugin (lowercase kebab-case). */
-export const NS = 'prompt-customizer'
-
-/**
- * The plugin's configuration schema, also used as the settings-namespace
- * schema. GUI edits write into this shape under `~/.dsh/settings.yaml`.
- */
-export const Config = Schema.object({
-  // Block these prompt sections by name (filtered out of the assembled system prompt).
-  sections: Schema.array(Schema.string()).default([]),
-  // Replace a section's text by name (original order kept).
-  replace: Schema.dict(Schema.string()).default({}),
-  // Inject / overwrite sections (by name + order + text). `custom` marks a
-  // section this plugin generated (a hidden marker so it can be identified as
-  // deletable, even across presets, without relying on name collisions).
-  inject: Schema.array(Schema.object({
-    name: Schema.string().required(),
-    order: Schema.number().default(120),
-    text: Schema.string().required(),
-    custom: Schema.boolean().default(false),
-  })).default([]),
-  // Tool catalog filtering: exclude hides listed tools; include (when non-empty)
-  // keeps only listed tools and wins over exclude.
-  tools: 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(),
-    name: Schema.string().required(),
-    data: Schema.object({
-      sections: Schema.array(Schema.string()),
-      replace: Schema.dict(Schema.string()),
-      // Relative order: each entry records the section it should follow.
-      order: Schema.array(Schema.object({
-        name: Schema.string().required(),
-        after: Schema.string(),
-        text: Schema.string(),
-        custom: Schema.boolean().default(false),
-      })),
-      tools: Schema.object({
-        exclude: Schema.array(Schema.string()),
-        include: Schema.array(Schema.string()),
-      }),
-    }),
-  })).default([]),
-  // The id of the currently applied preset (only one active at a time).
-  activePreset: Schema.string(),
+import Schema from '@deepseek-ai/schemastery'
+
+/** Settings namespace for this plugin (lowercase kebab-case). */
+export const NS = 'prompt-customizer'
+
+/**
+ * The plugin's configuration schema, also used as the settings-namespace
+ * schema. GUI edits write into this shape under `~/.dsh/settings.yaml`.
+ */
+export const Config = Schema.object({
+  // Block these prompt sections by name (filtered out of the assembled system prompt).
+  sections: Schema.array(Schema.string()).default([]),
+  // Replace a section's text by name (original order kept).
+  replace: Schema.dict(Schema.string()).default({}),
+  // Inject / overwrite sections (by name + order + text). `custom` marks a
+  // section this plugin generated (a hidden marker so it can be identified as
+  // deletable, even across presets, without relying on name collisions).
+  inject: Schema.array(Schema.object({
+    name: Schema.string().required(),
+    order: Schema.number().default(120),
+    text: Schema.string().required(),
+    custom: Schema.boolean().default(false),
+  })).default([]),
+  // Tool catalog filtering: exclude hides listed tools; include (when non-empty)
+  // keeps only listed tools and wins over exclude.
+  tools: Schema.object({
+    exclude: Schema.array(Schema.string()).default([]),
+    include: Schema.array(Schema.string()).default([]),
+  }).default({}),
+  // Presets: complete customization snapshots (full prompt + tool config).
+  presets: Schema.array(Schema.object({
+    id: Schema.string().required(),
+    name: Schema.string().required(),
+    data: Schema.object({
+      sections: Schema.array(Schema.string()),
+      replace: Schema.dict(Schema.string()),
+      // Relative order: each entry records the section it should follow.
+      order: Schema.array(Schema.object({
+        name: Schema.string().required(),
+        after: Schema.string(),
+        text: Schema.string(),
+        custom: Schema.boolean().default(false),
+      })),
+      tools: Schema.object({
+        exclude: Schema.array(Schema.string()),
+        include: Schema.array(Schema.string()),
+      }),
+    }),
+  })).default([]),
+  // The id of the currently applied preset (only one active at a time).
+  activePreset: Schema.string(),
 })

package/package.json

@@ -1,62 +1,62 @@
-{
-  "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.7",
-  "type": "module",
-  "private": false,
-  "main": "lib/index.js",
-  "scripts": {
-    "typecheck": "tsc -p tsconfig.client.json --noEmit",
-    "build": "tsdown",
-    "test": "node --test",
-    "check": "npm run typecheck && npm run build && npm run test",
-    "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"
+{
+  "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.3.0",
+  "type": "module",
+  "private": false,
+  "main": "lib/index.js",
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.client.json --noEmit",
+    "build": "tsdown",
+    "test": "node --test",
+    "check": "npm run typecheck && npm run build && npm run test",
+    "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

@@ -1,110 +1,110 @@
-/** 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 { addImportedPresets, applyPresetData, buildPresetData, mergeSections, removePreset, serializePreset } from './presets.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)
-
-  const blockedNames = new Set(cfg.sections ?? [])
-  const merged = mergeSections(inv, cfg, blockedNames)
-  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 }])
-    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)
-  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)
-  }
-
-  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')
-  }
-
-  // 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)
-  }
-
-  // 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))
-        scope.set('presets', addImportedPresets(presets, parsed, genId))
-      } 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)
-}
+/** 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 { addImportedPresets, applyPresetData, buildPresetData, mergeSections, removePreset, serializePreset } from './presets.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)
+
+  const blockedNames = new Set(cfg.sections ?? [])
+  const merged = mergeSections(inv, cfg, blockedNames)
+  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 }])
+    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)
+  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)
+  }
+
+  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')
+  }
+
+  // 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)
+  }
+
+  // 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))
+        scope.set('presets', addImportedPresets(presets, parsed, genId))
+      } 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)
+}

package/src/client/PreviewTab.tsx

@@ -1,66 +1,61 @@
-/** 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,
-  ])
-}
+/** 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, active, refreshId }: { scope: SettingsScope; t: Translate; active: boolean; refreshId: number }): 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.
+  const inFlight = useRef(false)
+  const load = (): void => {
+    if (inFlight.current) return
+    inFlight.current = true
+    setData(null)
+    fetch(`${PREVIEW_URL}?t=${Date.now()}`)
+      .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 })
+  }
+  useEffect(load, [])
+  useEffect(() => scope.subscribe(load), [scope])
+  // Refresh when this tab becomes active or when refresh button is clicked
+  useEffect(() => { if (active) load() }, [active, refreshId])
+
+  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,
+  ])
+}