dsh-subagent-profile 0.1.0 → 0.2.0

package/lib/client.js

@@ -1,11 +1,11 @@
 /**
- * dsh-subagent-profile — browser half: a read-only `dispatch` tool-call card
+ * dsh-subagent-profile — browser side: a read-only `dispatch` tool-call card
  * plus a settings page that manages the profile registry.
  *
  * Hand-written `__ModuleLoader__` factory (no build step), modeled on
  * @dsh-external/dsh-persona-ref: React comes from the shared module host, every
  * data operation goes through the loopback /subagent-profiles/* HTTP routes
- * served by the host half (index.mjs), and slots register through the shared
+ * served by the host side (index.mjs), and slots register through the shared
  * `slots` service. The card lives on the keyed `tool.call.toolview` seat (key
  * `dispatch`); the settings page lives on the `settings.section` list.
  *
@@ -27,7 +27,7 @@ window.__ModuleLoader__.load({
     /** Required cordis services: the slot registry only. */
     const inject = ['slots']
 
-    // ── api (loopback HTTP, host half serves /subagent-profiles/*) ──────────
+    // ── api (loopback HTTP, host side serves /subagent-profiles/*) ──────────
 
     async function api(path, payload) {
       const init = payload === undefined
@@ -65,10 +65,15 @@ window.__ModuleLoader__.load({
       '.sap-rowTag{border:1px solid var(--dsw-alias-border-l3);color:var(--dsw-alias-label-secondary);border-radius:4px;flex:none;padding:1px 6px;font-size:11px;line-height:16px}',
       '.sap-rowActions{align-items:center;gap:4px;margin-left:auto;display:inline-flex}',
       '.sap-desc{color:var(--dsw-alias-label-secondary);margin:0;font-size:12px;line-height:18px}',
-      '.sap-meta{flex-wrap:wrap;gap:6px 14px;display:flex}',
-      '.sap-metaItem{display:inline-flex;align-items:baseline;gap:6px;font-size:12px;line-height:18px}',
-      '.sap-metaLabel{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}',
-      '.sap-metaValue{color:var(--dsw-alias-label-primary)}',
+      '.sap-warn{color:var(--dsw-alias-state-warn-label);margin:0;font-size:12px;line-height:18px}',
+      '.sap-chips{flex-wrap:wrap;gap:6px;display:flex}',
+      '.sap-chip{box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);border-radius:6px;flex:none;align-items:center;gap:5px;padding:2px 8px;font-size:12px;line-height:18px;display:inline-flex}',
+      '.sap-chipLabel{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}',
+      '.sap-chipValue{color:var(--dsw-alias-label-primary)}',
+      '.sap-chipValueDim{color:var(--dsw-alias-label-tertiary)}',
+      '.sap-chipWarn{background:var(--dsw-alias-state-warn-tertiary);border-color:var(--dsw-alias-state-warn-tertiary);color:var(--dsw-alias-state-warn-label);font-weight:500}',
+      '.sap-chipSuccess{color:var(--dsw-alias-state-success-primary);font-weight:500}',
+      '.sap-chipDisabled{color:var(--dsw-alias-state-warn-label);font-weight:500}',
       '.sap-metaValueDefault{color:var(--dsw-alias-label-tertiary)}',
       '.sap-addBlock{margin-top:4px}',
       '.sap-addActions{flex-wrap:wrap;gap:10px;display:flex}',
@@ -105,7 +110,8 @@ window.__ModuleLoader__.load({
       '.sap-switch input::before{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:left .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}',
       '.sap-switch input:checked{background:var(--dsw-alias-brand-primary)}',
       '.sap-switch input:checked::before{left:18px}',
-      '.sap-toolview{display:flex;align-items:baseline;gap:6px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary);padding:4px 8px;white-space:pre-wrap;word-break:break-word}',
+      '.sap-toolview{flex-direction:column;align-items:flex-start;gap:6px;padding:4px 8px;display:flex}',
+      '.sap-toolText{font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary);white-space:pre-wrap;word-break:break-word}',
       '.sap-toolModes{flex-wrap:wrap;gap:4px 16px;display:flex}',
       '.sap-toolGroups{flex-direction:column;gap:8px;display:flex}',
       '.sap-toolLayerCard{border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:6px 10px}',
@@ -130,45 +136,214 @@ window.__ModuleLoader__.load({
 
     // ── dispatch tool-call card ─────────────────────────────────────────────
 
+    // 面向用户的固定文案（G1）。注意：此表仅集中 dispatch 卡片文案；设置页文案
+    // 仍为 v0.1.0 散落硬编码，属 G1 待迁移债（V2.0 中期一次性迁入）。
+    const ZH = {
+      inlineProfile: '内联',
+      inherit: '继承父',
+      effortDefault: '默认（继承父）',
+      chipProfile: '方案',
+      chipPreset: '预设',
+      chipProvider: '提供方',
+      chipModel: '模型',
+      chipEffort: '推理强度',
+      chipTier: '档位',
+      chipEnabled: '已启用',
+      chipDisabled: '已禁用',
+      ignoredMark: '已忽略',
+      toolLabel: '派发子 Agent',
+      cont: 'continuable 子 Agent',
+      canContinue: '可续跑',
+      toolBackground: '后台任务',
+      toolForeground: '前台',
+      toolRunning: '运行中',
+      tierZh: { cheap: '省 token（cheap）', balanced: '均衡（balanced）', premium: '高成本（premium）' },
+      persistFail: '已保存但未持久化',
+      persistFailHint: '（磁盘写入未成功，重启 dsh web 后该改动可能丢失）'
+    }
+
+    const effortZh = (id) => {
+      if (id === undefined || id === null || id === '') return ZH.inherit
+      if (id === '(default)') return ZH.effortDefault
+      if (id === '(parent)' || id === 'undefined') return ZH.inherit
+      return EFFORT_ZH[id] ? `${EFFORT_ZH[id]}（${id}）` : id
+    }
+    const presetZh = (v) => (v === 'inherit' ? ZH.inherit : (typeof v === 'string' && v !== '' ? v : ZH.inherit))
+    const profileZh = (v) => (v === undefined || v === '' || v === '(inline)' ? ZH.inlineProfile : v)
+    const rawOrInherit = (v) => (v === '(parent)' ? ZH.inherit : (typeof v === 'string' && v !== '' ? v : ZH.inherit))
+
+    /** 统一 chip 元素：label + value，dim=继承/默认值弱显。 */
+    const chip = (key, label, value, opts) => {
+      const valueCls = opts && opts.dim ? 'sap-chipValueDim' : 'sap-chipValue'
+      return el('span', {
+        key,
+        className: 'sap-chip',
+        ...(opts && typeof opts.title === 'string' && opts.title !== '' ? { title: opts.title } : {})
+      },
+        el('span', { className: 'sap-chipLabel' }, label),
+        el('span', { className: valueCls }, value)
+      )
+    }
+
+    // 请求值：argsRaw（运行中 / 已结算两种 block 形态都有）。
+    function readDispatchRequest(block) {
+      const out = { profile: '', preset: '', provider: '', model: '', reasoningEffort: '', continuable: false, runInBackground: false }
+      if (!block || typeof block !== 'object') return out
+      const done = 'kind' in block
+      const argsRaw = (done ? (block.call && block.call.argsRaw) : block.argsRaw) ?? ''
+      if (typeof argsRaw !== 'string' || argsRaw === '') return out
+      try {
+        const parsed = JSON.parse(argsRaw)
+        if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+          for (const key of ['profile', 'preset', 'provider', 'model', 'reasoningEffort']) {
+            if (typeof parsed[key] === 'string' && parsed[key] !== '') out[key] = parsed[key]
+          }
+          out.continuable = parsed.continuable === true
+          out.runInBackground = parsed.run_in_background === true
+        }
+      } catch {
+        // unparsable argsRaw：保持默认（继承/内联口径）。
+      }
+      return out
+    }
+
+    // 结果 meta（生效值）：宿主 render 行（"[dispatch] …"）是持久回放的唯一
+    // 生效值来源——结构化 value 只存在于执行局部（dsh-tools 约定），且宿主未
+    // 定义 output.presentationMeta（block.meta 为空）。解析成功返回
+    // {kind, id, fields, ignored}；任何一步不符预期返回 null，调用方回退请求值。
+    const DISPATCH_RESULT_KEYS = ['profile', 'preset', 'provider', 'model', 'reasoningEffort', 'tokenTier']
+    function parseDispatchText(text) {
+      if (typeof text !== 'string') return null
+      const firstLine = text.split('\n')[0] ?? ''
+      if (!firstLine.startsWith('[dispatch] ')) return null
+      let rest = firstLine.slice('[dispatch] '.length)
+      let kind = 'foreground'
+      let id = ''
+      if (rest.startsWith('background job ')) {
+        kind = 'background'
+        rest = rest.slice('background job '.length)
+      } else if (rest.startsWith('started subagent ')) {
+        kind = 'continuable'
+        rest = rest.slice('started subagent '.length)
+      }
+      if (kind !== 'foreground') {
+        const sep = rest.indexOf(' · ')
+        id = sep >= 0 ? rest.slice(0, sep) : rest
+        rest = sep >= 0 ? rest.slice(sep + 3) : ''
+      }
+      const fields = {}
+      let ignored = []
+      let known = 0
+      for (const seg of rest.split(' · ')) {
+        const eq = seg.indexOf('=')
+        if (eq <= 0) continue
+        const key = seg.slice(0, eq)
+        if (!DISPATCH_RESULT_KEYS.includes(key)) continue
+        let value = seg.slice(eq + 1)
+        const m = /^(.+)\(ignored:\s*([^)]*)\)$/.exec(value)
+        if (m !== null) {
+          value = m[1]
+          ignored = m[2].split(',').map((s) => s.trim()).filter((s) => s !== '')
+        }
+        if (value === 'undefined') value = ''   // v0.1.0 渲染该字段为字面 undefined
+        fields[key] = value
+        known += 1
+      }
+      if (known <= 0) return null
+      return { kind, id, fields, ignored }
+    }
+
+    function readDispatchResult(block) {
+      if (!block || typeof block !== 'object' || !('kind' in block)) return null
+      const content = block.content
+      if (!Array.isArray(content)) return null
+      for (const item of content) {
+        if (item && typeof item === 'object' && typeof item.text === 'string') {
+          const parsed = parseDispatchText(item.text)
+          if (parsed !== null) return parsed
+        }
+      }
+      return null
+    }
+
     function DispatchToolview(props) {
       const block = props && props.block
-      let args = {}
-      if (block && typeof block === 'object') {
-        const done = 'kind' in block
-        const argsRaw = (done ? (block.call && block.call.argsRaw) : block.argsRaw) ?? ''
-        if (typeof argsRaw === 'string' && argsRaw !== '') {
-          try {
-            const parsed = JSON.parse(argsRaw)
-            if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) args = parsed
-          } catch {
-            // unparsable argsRaw: fall through to the default field rendering
-          }
+      const request = readDispatchRequest(block)
+      const result = readDispatchResult(block)
+      const settled = !!(block && typeof block === 'object' && 'kind' in block)
+      // 生效值：结果解析成功用结果（优先），字段缺失回退请求值。
+      const eff = {
+        profile: result ? (result.fields.profile || request.profile) : request.profile,
+        preset: result ? (result.fields.preset || request.preset) : request.preset,
+        provider: result ? (result.fields.provider || request.provider) : request.provider,
+        model: result ? (result.fields.model || request.model) : request.model,
+        reasoningEffort: result ? (result.fields.reasoningEffort || request.reasoningEffort) : request.reasoningEffort
+      }
+      // ignored 列表：已结算读结果；运行中（无结果）按已知降级规则预判——
+      // continuable 恒忽略 preset 换用与 reasoningEffort（与结果同口径）。
+      const ignored = result ? result.ignored.slice() : []
+      if (!settled && request.continuable) {
+        if (request.preset !== '' && request.preset !== 'inherit' && !ignored.includes('preset')) ignored.push('preset')
+        if (request.reasoningEffort !== '' && !ignored.includes('reasoningEffort')) ignored.push('reasoningEffort')
+      }
+      // P2（请求≠生效）：被忽略字段的生效值 = 确定性降级值。
+      if (ignored.includes('preset')) eff.preset = 'inherit'
+      if (ignored.includes('reasoningEffort')) eff.reasoningEffort = '(default)'
+
+      let kindLabel
+      const kindPrefix = request.continuable ? ZH.cont : (request.runInBackground ? ZH.toolBackground : ZH.toolForeground)
+      // 运行/结算标签判据 = settled（`'kind' in block`）：已结算块即使 render 为
+      // 旧格式不可解析（result===null）也绝不落入「运行中」分支。
+      if (settled) {
+        if (result) {
+          if (result.kind === 'background') kindLabel = `${ZH.toolBackground} #${result.id}`
+          else if (result.kind === 'continuable') kindLabel = `${ZH.cont} #${result.id}（${ZH.canContinue}）`
+          else kindLabel = ZH.toolForeground
+        } else {
+          // 已结算但结果不可解析：kind 由请求值推导，不带「运行中」。
+          kindLabel = kindPrefix
         }
+      } else {
+        kindLabel = `${kindPrefix}（${ZH.toolRunning}）`
+      }
+
+      const chips = []
+      chips.push(chip('profile', ZH.chipProfile, profileZh(eff.profile)))
+      // preset 继承值（'inherit' 或未请求即空串，均渲染为「继承父」）与
+      // provider·model / effort 一样弱显。
+      chips.push(chip('preset', ZH.chipPreset, presetZh(eff.preset), { dim: eff.preset === 'inherit' || eff.preset === '' }))
+      const p = rawOrInherit(eff.provider)
+      const m = rawOrInherit(eff.model)
+      chips.push(chip('providerModel', `${ZH.chipProvider}·${ZH.chipModel}`, p === ZH.inherit && m === ZH.inherit ? ZH.inherit : `${p} / ${m}`, { dim: p === ZH.inherit && m === ZH.inherit }))
+      chips.push(chip('effort', ZH.chipEffort, effortZh(eff.reasoningEffort), { dim: eff.reasoningEffort === '' || eff.reasoningEffort === '(default)' }))
+      // tokenTier：宿主当前结果里未产出（§8.3 属中期切片）；字段出现即渲染（向前兼容）。
+      let tier = ''
+      if (result && result.fields && typeof result.fields.tokenTier === 'string' && result.fields.tokenTier !== '') {
+        tier = result.fields.tokenTier
+      } else if (block && block.meta && typeof block.meta === 'object' && typeof block.meta.tokenTier === 'string' && block.meta.tokenTier !== '') {
+        tier = block.meta.tokenTier
       }
-      const field = (key, fallback) => {
-        const value = args[key]
-        return typeof value === 'string' && value !== '' ? value : fallback
+      if (tier !== '') chips.push(chip('tier', ZH.chipTier, ZH.tierZh[tier] || tier))
+      // ignored 项：警示色、置于 chip 行末尾（BP-03 根治：非静默）。
+      for (const key of ignored) {
+        const reqVal = request[key] || ''
+        chips.push(el('span', {
+          key: `ignored-${key}`,
+          className: 'sap-chip sap-chipWarn',
+          title: reqVal !== '' ? `请求值 "${reqVal}" 已忽略` : '请求值已忽略'
+        }, `⬆${key}(${ZH.ignoredMark})`))
       }
-      const profile = field('profile', '内联')
-      const preset = field('preset', '继承父')
-      const provider = field('provider', '继承父')
-      const model = field('model', '继承父')
-      const rawEffort = field('reasoningEffort', '继承父')
-      const reasoningEffort = EFFORT_ZH[rawEffort] ?? rawEffort
-      const continuable = args.continuable === true
-      const text = `派发子 Agent：方案=${profile} · 预设=${preset} · 提供方=${provider} · 模型=${model} · 推理强度=${reasoningEffort}${continuable ? ' · 可续跑' : ''}`
-      return el('div', { className: 'sap-toolview' }, text)
+
+      const text = `${ZH.toolLabel}：${kindLabel} · 方案=${profileZh(eff.profile)} · 预设=${presetZh(eff.preset)} · 提供方=${p} · 模型=${m} · 推理强度=${effortZh(eff.reasoningEffort)}`
+      return el('div', { className: 'sap-toolview' },
+        el('div', { className: 'sap-chips' }, chips),
+        el('div', { className: 'sap-toolText' }, text)
+      )
     }
 
     // ── settings page ───────────────────────────────────────────────────────
 
     const EMPTY_FORM = { id: '', description: '', preset: '', provider: '', model: '', reasoningEffort: '', toolMode: 'none', toolList: [] }
-    const META_DEFS = [
-      ['预设', 'preset'],
-      ['提供方', 'provider'],
-      ['模型', 'model'],
-      ['推理强度', 'reasoningEffort'],
-    ]
     const EFFORT_ZH = { off: '关闭', high: '高', max: '最大' }
     const effortLabel = (effort) => {
       const id = effort && effort.id
@@ -183,6 +358,7 @@ window.__ModuleLoader__.load({
       const [editingId, setEditingId] = useState(null)
       const [error, setError] = useState('')
       const [savedNotice, setSavedNotice] = useState('')
+      const [persistWarning, setPersistWarning] = useState('')
       const [form, setForm] = useState(EMPTY_FORM)
       const [tools, setTools] = useState([])
 
@@ -255,16 +431,30 @@ window.__ModuleLoader__.load({
         return { ...prev, toolList: [...cur.filter((n) => !toRemove.has(n)), ...toAdd] }
       })
 
+      // D5/B1 写路径契约：HTTP 200 但 persisted:false 时 host 附
+      // persistWarning「已保存但未持久化」——这里改为 amber 警示（非绿色成功态）。
+      const applyWrite = (data, successNotice) => {
+        if (data && data.persisted === false) {
+          setSavedNotice('')
+          setPersistWarning(typeof data.persistWarning === 'string' && data.persistWarning !== '' ? data.persistWarning : ZH.persistFail)
+          return
+        }
+        setPersistWarning('')
+        if (typeof successNotice === 'string' && successNotice !== '') setSavedNotice(successNotice)
+        else setSavedNotice('')
+      }
+
       const openAdd = () => {
         setError('')
         setSavedNotice('')
+        setPersistWarning('')
         setForm(EMPTY_FORM)
         setEditingId(null)
         setAdding(true)
       }
 
       const openEdit = (profile) => () => {
-        setError(''); setSavedNotice('')
+        setError(''); setSavedNotice(''); setPersistWarning('')
         const tf = profile.toolFilter && typeof profile.toolFilter === 'object' ? profile.toolFilter : {}
         const allowArr = Array.isArray(tf.allow) ? tf.allow.slice() : []
         const denyArr = Array.isArray(tf.deny) ? tf.deny.slice() : []
@@ -287,6 +477,7 @@ window.__ModuleLoader__.load({
         setAdding(false)
         setEditingId(null)
         setError('')
+        setPersistWarning('')
         setForm(EMPTY_FORM)
       }
 
@@ -312,9 +503,9 @@ window.__ModuleLoader__.load({
           if (existing.enabled === false) payload.enabled = false
         }
         api('/add', payload)
-          .then(() => {
+          .then((data) => {
             setForm(EMPTY_FORM); setAdding(false); setEditingId(null); setError('')
-            setSavedNotice(`已保存 ${payload.id}`)
+            applyWrite(data, `已保存 ${payload.id}`)
             refresh()
           })
           .catch((err) => setError(String((err && err.message) || err)))
@@ -323,7 +514,7 @@ window.__ModuleLoader__.load({
       const setProfileEnabled = (profile, next) => () => {
         setError('')
         api('/set-profile-enabled', { id: profile.id, enabled: next })
-          .then(() => refresh())
+          .then((data) => { applyWrite(data, ''); refresh() })
           .catch((err) => setError(String((err && err.message) || err)))
       }
 
@@ -331,16 +522,16 @@ window.__ModuleLoader__.load({
         if (!window.confirm('将所有内置方案重置为默认配置？已删除的内置也会恢复。')) return
         setError('')
         api('/reset-all')
-          .then(() => { setSavedNotice('已重置所有内置方案'); refresh() })
+          .then((data) => { applyWrite(data, '已重置所有内置方案'); refresh() })
           .catch((err) => setError(String((err && err.message) || err)))
       }
 
       const remove = (profile) => () => {
         if (!window.confirm(`删除方案「${profile.name || profile.id}」？${profile.builtin === true ? '内置方案删除后可在上方「重置内置方案」恢复' : ''}`)) return
         api('/remove', { id: profile.id })
-          .then(() => {
+          .then((data) => {
             setError('')
-            setSavedNotice(`已删除 ${profile.id}`)
+            applyWrite(data, `已删除 ${profile.id}`)
             refresh()
           })
           .catch((err) => setError(String((err && err.message) || err)))
@@ -361,21 +552,23 @@ window.__ModuleLoader__.load({
         const builtin = profile.builtin === true
         const isDisabled = profile.enabled === false
         const hasName = typeof profile.name === 'string' && profile.name !== '' && profile.name !== String(profile.id)
-        const metaItems = META_DEFS.map(([label, key]) => {
-          const value = profile[key]
-          const has = typeof value === 'string' && value !== ''
-          return el('span', { key: label, className: 'sap-metaItem' },
-            el('span', { className: 'sap-metaLabel' }, `${label} `),
-            el('span', { className: has ? 'sap-metaValue' : 'sap-metaValueDefault' }, has ? value : '继承父')
-          )
-        })
+        const hasPreset = typeof profile.preset === 'string' && profile.preset !== ''
+        const hasModel = typeof profile.model === 'string' && profile.model !== ''
+        const hasEffort = typeof profile.reasoningEffort === 'string' && profile.reasoningEffort !== ''
+        const chipItems = [
+          chip('preset', ZH.chipPreset, presetZh(profile.preset), { dim: !hasPreset }),
+          chip('model', ZH.chipModel, rawOrInherit(profile.model), { dim: !hasModel }),
+          chip('effort', ZH.chipEffort, effortZh(profile.reasoningEffort), { dim: !hasEffort }),
+          isDisabled
+            ? el('span', { key: 'state', className: 'sap-chip sap-chipDisabled' }, ZH.chipDisabled)
+            : el('span', { key: 'state', className: 'sap-chip sap-chipSuccess' }, ZH.chipEnabled)
+        ]
         return el('li', { key: String(profile.id), className: 'sap-rowCard' },
           el('div', { className: 'sap-rowHead' },
             el('span', { className: 'sap-rowIdentity' },
               el('span', { className: 'sap-rowName' }, hasName ? profile.name : String(profile.id)),
               hasName ? el('span', { className: 'sap-rowId' }, String(profile.id)) : null,
-              builtin ? el('span', { className: 'sap-rowTag' }, '内置') : null,
-              isDisabled ? el('span', { className: 'sap-rowTag' }, '已禁用') : null
+              builtin ? el('span', { className: 'sap-rowTag' }, '内置') : null
             ),
             el('span', { className: 'sap-rowActions' },
               el('label', { className: 'sap-switch', title: '启用/禁用' },
@@ -386,10 +579,10 @@ window.__ModuleLoader__.load({
               el('button', { className: 'sap-dangerButton', onClick: remove(profile) }, '删除')
             )
           ),
+          el('div', { className: 'sap-chips' }, chipItems),
           typeof profile.description === 'string' && profile.description !== ''
             ? el('p', { className: 'sap-desc' }, profile.description)
-            : null,
-          el('div', { className: 'sap-meta' }, metaItems)
+            : null
         )
       })
 
@@ -488,6 +681,7 @@ window.__ModuleLoader__.load({
         !enabled ? el('p', { className: 'sap-notice' }, '插件已禁用：「派发子 Agent」工具已从模型工具列表中移除，打开开关即可恢复。') : null,
         error !== '' ? el('p', { className: 'sap-notice' }, error) : null,
         savedNotice !== '' ? el('p', { className: 'sap-savedNotice', role: 'status' }, savedNotice) : null,
+        persistWarning !== '' ? el('p', { className: 'sap-warn', role: 'alert' }, `${persistWarning}${ZH.persistFailHint}`) : null,
         el('ul', { className: 'sap-rows' }, rows),
         el('div', { className: 'sap-addBlock' },
           adding