dsh-prompt-customizer 0.2.6 → 0.3.0

package/src/client/SectionsTab.tsx

@@ -1,201 +1,202 @@
-/** 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 { mergeSections, removeSection, type Section } from './presets.ts'
-import { s } from './styles.ts'
-
-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[] = mergeSections(inv, cfg, blockedNames)
-
-  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. System sections keep empty
-  // text (so we never freeze their dynamically generated content); custom
-  // (plugin-generated) sections keep their own text and the hidden `custom`
-  // marker, so they render real content and stay identifiable/deletable.
-  const persistOrder = (ordered: Section[]): void => {
-    const list = ordered.map((sec, i) => {
-      const existing = (cfg.inject ?? []).find((x) => x.name === sec.name)
-      const isCustom = sec.source === 'custom'
-      return { name: sec.name, order: i, text: isCustom ? (sec.text ?? '') : (existing?.text ?? ''), custom: isCustom }
-    })
-    scope.set('inject', list)
-  }
-
-  // Delete a custom (plugin-added) section: remove it from inject / sections /
-  // replace so it no longer appears in the panel at all.
-  const removeCustom = (name: string): void => {
-    const patch = removeSection(name, cfg)
-    scope.set('sections', patch.sections)
-    scope.set('inject', patch.inject)
-    scope.set('replace', patch.replace)
-  }
-
-  // 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. The
-  // section is marked `custom` (the hidden marker) so it is identified as
-  // plugin-generated and thus deletable, and its own text is preserved.
-  const addSection = (name: string, order: number, text: string): void => {
-    const next = merged.slice()
-    const entry: Section = { name, order, text, active: true, replaced: false, source: 'custom' }
-    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),
-            h('span', { style: sec.source === 'custom' ? s.badgeCustom : s.badgeSystem }, sec.source === 'custom' ? t('manual') : t('system')),
-            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) || (sec.source === 'custom' ? t('empty') : 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')),
-        sec.source === 'custom' ? h('button', { style: s.mini, onClick: () => removeCustom(sec.name), title: t('delete') }, t('delete')) : null,
-      ])
-    }),
-    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')),
-    ]),
-  ])
-}
+/** 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 { mergeSections, removeSection, type Section } from './presets.ts'
+import { s } from './styles.ts'
+
+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[] = mergeSections(inv, cfg, blockedNames)
+
+  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 restoreReplace = (name: string): void => {
+    const next = { ...replace }
+    delete next[name]
+    scope.set('replace', next)
+  }
+
+  // Persist the full ordered list (system + custom). We re-index every section
+  // with a sequential integer order (0, 1, 2, …) so the plugin panel order is
+  // the authoritative sort order. System sections keep empty text (so the
+  // server never freezes their dynamically generated content); custom sections
+  // keep their own text.
+  const persistOrder = (ordered: Section[]): void => {
+    const list = ordered.map((sec, i) => {
+      const existing = (cfg.inject ?? []).find((x) => x.name === sec.name)
+      const isCustom = sec.source === 'custom'
+      return { name: sec.name, order: i, text: isCustom ? (sec.text ?? '') : (existing?.text ?? ''), custom: isCustom }
+    })
+    scope.set('inject', list)
+  }
+
+  // Delete a custom (plugin-added) section: remove it from inject / sections /
+  // replace so it no longer appears in the panel at all.
+  const removeCustom = (name: string): void => {
+    const patch = removeSection(name, cfg)
+    scope.set('sections', patch.sections)
+    scope.set('inject', patch.inject)
+    scope.set('replace', patch.replace)
+  }
+
+  // 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. The
+  // section is marked `custom` (the hidden marker) so it is identified as
+  // plugin-generated and thus deletable, and its own text is preserved.
+  const addSection = (name: string, order: number, text: string): void => {
+    const next = merged.slice()
+    const entry: Section = { name, order, text, active: true, replaced: false, source: 'custom' }
+    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),
+            h('span', { style: sec.source === 'custom' ? s.badgeCustom : s.badgeSystem }, sec.source === 'custom' ? t('manual') : t('system')),
+            replace[sec.name] ? 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('save')),
+                  h('button', { style: s.mini, onClick: () => setEditing(null) }, t('clearInput')),
+                  sec.source !== 'custom' && replace[sec.name] ? h('button', { style: s.mini, onClick: () => restoreReplace(sec.name) }, t('restore')) : null,
+                ]),
+              ])
+            : h('div', { style: s.preview }, String(replace[sec.name] ?? sec.text ?? '').slice(0, 140) || (sec.source === 'custom' ? t('empty') : 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') }, '↓'),
+        ]),
+        isEditing ? null : h('button', { style: s.mini, onClick: () => startReplace(sec.name, String(sec.text ?? '')) }, t('replace')),
+        !isEditing && sec.source !== 'custom' && replace[sec.name] ? h('button', { style: s.mini, onClick: () => restoreReplace(sec.name) }, t('restore')) : null,
+        sec.source === 'custom' ? h('button', { style: s.mini, onClick: () => removeCustom(sec.name), title: t('delete') }, t('delete')) : null,
+      ])
+    }),
+    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

@@ -1,48 +1,48 @@
-/** 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 { 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 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 => {
-    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 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: 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) => {
-        const isHidden = hidden(tool.name)
-        return h('div', { key: tool.name, style: s.row }, [
-          h('label', { style: s.switchWrap }, [
-            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)),
-            h('div', { style: s.preview }, String(tool.description ?? '').slice(0, 140)),
-          ]),
-        ])
-      }),
-    ]),
-  ])
-}
+/** 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 { 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 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 => {
+    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 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: 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) => {
+        const isHidden = hidden(tool.name)
+        return h('div', { key: tool.name, style: s.row }, [
+          h('label', { style: s.switchWrap }, [
+            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)),
+            h('div', { style: s.preview }, String(tool.description ?? '').slice(0, 140)),
+          ]),
+        ])
+      }),
+    ]),
+  ])
+}