@chentyit/dsh-chatbot-panel 0.0.0-stage → 0.2.0

package/client.js

@@ -0,0 +1,516 @@
+/**
+ * Browser half of the ChatBot capability panel bundle.
+ *
+ * Renders a split capsule immediately right of the permission chip in the
+ * composer tool row: the left segment toggles the session's web capability and
+ * the right segment opens an upward panel listing the capabilities plus this
+ * session's usage and estimated cost. Capability state and usage are Host
+ * projections; this file only reads them and dispatches `/chatbot ...` lines.
+ */
+window.__ModuleLoader__.load({
+  id: '@chentyit/dsh-chatbot-panel',
+  factory(require) {
+    const React = require('react')
+    const { createPortal } = require('react-dom')
+    const h = React.createElement
+
+    /** Locale namespace for the capsule copy and the registration's `t`. */
+    const NS = 'chatbot-panel'
+    /** Official platform usage page; the Host projection carries the same link. */
+    const USAGE_URL = 'https://platform.deepseek.com/usage'
+    /** Panel width in CSS pixels, used to keep it inside the viewport. */
+    const PANEL_WIDTH = 328
+
+    const zh = {
+      label: 'ChatBot',
+      openPanel: '展开 ChatBot 能力',
+      panelTitle: 'ChatBot 能力',
+      scope: '本会话',
+      groupWeb: '联网工具',
+      web: '联网搜索',
+      webHint: '¥5 / 千次 · 附图提问即搜图',
+      deep: '深度思考搜索',
+      deepHint: '多步推理 · 支持以图搜图 · 更耗 token',
+      deepNeedsWeb: '先开启联网搜索',
+      searchNote: '以图搜图只读本轮图片；搜图与深搜需 DeepSeek 账号或 API key。',
+      pending: '应用中…',
+      usageTitle: '本会话用量',
+      search: '搜索',
+      fetch: '抓取',
+      imageUsage: '搜图',
+      billed: '次计费请求',
+      imagesCount: '张图',
+      deepUsage: '深搜',
+      failed: '失败',
+      times: '次',
+      sources: '个来源',
+      toolCalls: '次工具调用',
+      input: '输入',
+      output: '输出',
+      feeTitle: '费用估算',
+      searchFee: '搜索费',
+      fetchFee: '抓取费',
+      imageToolFee: '搜图工具费',
+      imageTokenFee: '搜图 token 费',
+      deepToolFee: '深搜工具费',
+      deepTokenFee: '深搜 token 费',
+      totalFee: '合计',
+      fetchFree: '匿名抓取不计费',
+      feeNote: '按官方价估算，实际以平台账单为准',
+      usageLink: '查看官方用量 ↗',
+      active: '已开启',
+      inactive: '未开启',
+      errorUnknown: '命令未生效',
+      errorPrefix: '操作失败：',
+    }
+
+    const en = {
+      label: 'ChatBot',
+      openPanel: 'Open ChatBot capabilities',
+      panelTitle: 'ChatBot capabilities',
+      scope: 'this session',
+      groupWeb: 'Web tools',
+      web: 'Web search',
+      webHint: '¥5 / 1,000 · attach an image and ask',
+      deep: 'Deep thinking search',
+      deepHint: 'Multi-step · image search · token-heavy',
+      deepNeedsWeb: 'Turn on web search first',
+      searchNote: 'Image search reads only this turn\'s images; image and deep search need a DeepSeek sign-in or API key.',
+      pending: 'Applying…',
+      usageTitle: 'Session usage',
+      search: 'Search',
+      fetch: 'Fetch',
+      imageUsage: 'Image search',
+      billed: 'billed requests',
+      imagesCount: 'images',
+      deepUsage: 'Deep',
+      failed: 'Failed',
+      times: '',
+      sources: 'sources',
+      toolCalls: 'tool calls',
+      input: 'in',
+      output: 'out',
+      feeTitle: 'Estimated cost',
+      searchFee: 'Search',
+      fetchFee: 'Fetch',
+      imageToolFee: 'Image tools',
+      imageTokenFee: 'Image tokens',
+      deepToolFee: 'Deep tools',
+      deepTokenFee: 'Deep tokens',
+      totalFee: 'Total',
+      fetchFree: 'Anonymous fetch is free',
+      feeNote: 'Estimated from official prices; the platform bill is authoritative',
+      usageLink: 'Open platform usage ↗',
+      active: 'on',
+      inactive: 'off',
+      errorUnknown: 'The command did not apply',
+      errorPrefix: 'Failed: ',
+    }
+
+    const CSS = [
+      /* Chip chrome copied from the permission trigger: transparent, 28px,
+         label-secondary, hover-only tint, small glyph and chevron. No border,
+         no fill, so it reads as another composer tool next to 「工作区内修改」. */
+      '.cbp-capsule{display:inline-flex;align-items:center;height:28px;border-radius:var(--dsw-radius-sm);background:transparent;color:var(--dsw-alias-label-secondary);font-family:var(--dsw-font-family,inherit);font-size:13px;line-height:20px;font-weight:500;vertical-align:middle}',
+      '.cbp-main{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:220px;height:28px;box-sizing:border-box;padding:0 4px 0 8px;border:none;border-radius:var(--dsw-radius-sm);outline:none;background:transparent;color:inherit;font:inherit;cursor:pointer}',
+      /* The chip is one control: clicking anywhere on it opens or closes the
+         capability panel. Hover tints the whole chip, arrow included. */
+      '@media (hover: hover) {',
+      '.cbp-capsule:hover{background:var(--dsw-alias-interactive-bg-hover)}',
+      '}',
+      '.cbp-main:focus-visible{box-shadow:0 0 0 2px var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary))}',
+      '.cbp-icon{display:inline-flex;flex:0 0 auto;color:var(--dsw-alias-label-caption);transition:color .12s ease}',
+      '.cbp-icon svg{display:block;width:14px;height:14px}',
+      '.cbp-capsule[data-on="true"] .cbp-icon{color:var(--dsw-alias-state-success-primary)}',
+      '.cbp-capsule[data-on="true"] .cbp-label{color:var(--dsw-alias-label-primary)}',
+      '.cbp-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+      '.cbp-arrow{display:inline-flex;flex:0 0 auto;margin-left:1px;color:var(--dsw-alias-label-caption)}',
+      '.cbp-arrow svg{display:block;width:12px;height:12px;transition:transform 120ms ease}',
+      '.cbp-main[data-open="true"] .cbp-arrow svg{transform:rotate(180deg)}',
+      '.cbp-panel{position:fixed;z-index:1200;box-sizing:border-box;display:flex;flex-direction:column;padding:6px;border-radius:var(--dsw-radius-lg);background:var(--dsw-specific-menu,var(--dsw-alias-bg-layer-1,#fff));backdrop-filter:var(--dsw-menu-backdrop-filter,none);box-shadow:var(--dsw-elevation-prominent,0 12px 32px rgba(0,0,0,.18));color:var(--dsw-alias-label-primary);font-family:var(--dsw-font-family,inherit);overflow-y:auto;overscroll-behavior:contain}',
+      '.cbp-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:6px 8px 2px}',
+      '.cbp-head-title{font-size:12px;font-weight:600;color:var(--dsw-alias-label-primary)}',
+      '.cbp-head-scope{font-size:11px;color:var(--dsw-alias-label-caption)}',
+      '.cbp-group{padding:8px 8px 2px;font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--dsw-alias-label-tertiary)}',
+      '.cbp-group-note{padding:4px 8px 2px}',
+      '.cbp-row{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:7px 8px;border:0;border-radius:var(--dsw-radius-md,8px);background:transparent;color:var(--dsw-alias-label-primary);font-family:inherit;text-align:left;cursor:pointer}',
+      '.cbp-row:hover:not([aria-disabled="true"]){background:var(--dsw-alias-interactive-bg-hover)}',
+      '.cbp-row:focus-visible{outline:var(--dsw-focus-ring-width,2px) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:-1px}',
+      '.cbp-row[aria-disabled="true"]{cursor:default;opacity:.55}',
+      '.cbp-row-sub{padding-left:22px}',
+      '.cbp-row-text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}',
+      '.cbp-row-label{font-size:13px;line-height:18px}',
+      '.cbp-row-hint{font-size:11px;line-height:15px;color:var(--dsw-alias-label-secondary)}',
+      '.cbp-check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;border-radius:var(--dsw-radius-sm,6px);border:1.5px solid var(--dsw-alias-border-l2,currentColor);box-sizing:border-box;color:transparent}',
+      '.cbp-check[data-checked="true"]{border-color:transparent;background:var(--dsw-alias-state-business-primary);color:var(--dsw-alias-label-primary-inverted)}',
+      '.cbp-check svg{display:block;width:12px;height:12px}',
+      '.cbp-sep{height:1px;margin:6px 6px;background:var(--dsw-alias-border-l1)}',
+      '.cbp-usage{display:flex;flex-direction:column;gap:2px;padding:2px 8px 4px;font-size:11px;line-height:17px;color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums}',
+      '.cbp-usage-title{font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--dsw-alias-label-tertiary);padding:0 0 2px}',
+      '.cbp-usage-line{display:flex;justify-content:space-between;gap:10px}',
+      '.cbp-usage-line b{font-weight:600;color:var(--dsw-alias-label-primary)}',
+      '.cbp-fee{border-top:1px dashed var(--dsw-alias-border-l1);margin-top:4px;padding-top:4px}',
+      '.cbp-total{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--dsw-alias-label-primary);font-weight:600}',
+      '.cbp-note{font-size:10px;line-height:15px;color:var(--dsw-alias-label-caption)}',
+      '.cbp-link{font-size:11px;line-height:17px;color:var(--dsw-alias-link);text-decoration:none}',
+      '.cbp-link:hover{text-decoration:underline}',
+      '.cbp-error{margin:4px 6px 2px;padding:5px 8px;border-radius:var(--dsw-radius-sm,6px);background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 12%,transparent);color:var(--dsw-alias-state-error-primary);font-size:11px;line-height:15px}',
+    ].join('')
+
+    /** The capsule owns its stylesheet, removed with the plugin's activation. */
+    function insertStyles() {
+      if (typeof document === 'undefined') return () => {}
+      const tag = document.createElement('style')
+      tag.setAttribute('data-plugin', '@chentyit/dsh-chatbot-panel')
+      tag.textContent = CSS
+      document.head.appendChild(tag)
+      return () => { tag.remove() }
+    }
+
+    /** Format a yuan amount for the detail rows. */
+    function yuan(value) {
+      const amount = typeof value === 'number' && Number.isFinite(value) ? value : 0
+      return `¥${amount.toFixed(4)}`
+    }
+
+    /** Format a token count compactly. */
+    function tokens(value) {
+      const amount = typeof value === 'number' && Number.isFinite(value) ? value : 0
+      return amount >= 1000 ? `${(amount / 1000).toFixed(1)}k` : String(amount)
+    }
+
+    /** Join a count and its unit without a trailing space when the unit is empty. */
+    function count(value, unit) {
+      const amount = typeof value === 'number' && Number.isFinite(value) ? value : 0
+      return typeof unit === 'string' && unit.length > 0 ? `${amount} ${unit}` : String(amount)
+    }
+
+    /** A small check mark drawn in the theme's inverted label color. */
+    function CheckGlyph() {
+      return h('svg', { viewBox: '0 0 12 12', 'aria-hidden': true },
+        h('path', {
+          d: 'M2.2 6.3 4.6 8.7 9.8 3.4',
+          fill: 'none',
+          stroke: 'currentColor',
+          strokeWidth: '1.8',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round',
+        }))
+    }
+
+    /** Chevron pointing up while the panel is closed, down while it is open. */
+    /** A small bot-head mark (antenna, head, eyes) matching the 14px chip glyphs. */
+    function BotGlyph() {
+      // Optically centered against the 13px label: text ink sits ~0.35px above
+      // the flex-line center, so the glyph's ink bounds (outer top 1.17 … outer
+      // bottom 12.12, stroke included) center on y≈6.65 instead of 7. Measured
+      // from a rendered chip screenshot, this lands the icon level with the text.
+      return h('svg', { viewBox: '0 0 14 14', 'aria-hidden': true },
+        h('path', {
+          d: 'M7 3.67v1.2',
+          fill: 'none',
+          stroke: 'currentColor',
+          strokeWidth: '1.2',
+          strokeLinecap: 'round',
+        }),
+        h('circle', { cx: 7, cy: 2.72, r: 0.95, fill: 'currentColor' }),
+        h('rect', {
+          x: 2.1,
+          y: 4.92,
+          width: 9.8,
+          height: 6.6,
+          rx: 2.2,
+          fill: 'none',
+          stroke: 'currentColor',
+          strokeWidth: '1.2',
+        }),
+        h('circle', { cx: 5.3, cy: 7.27, r: 0.85, fill: 'currentColor' }),
+        h('circle', { cx: 8.7, cy: 7.27, r: 0.85, fill: 'currentColor' }),
+        h('path', {
+          d: 'M5.6 9.37h2.8',
+          fill: 'none',
+          stroke: 'currentColor',
+          strokeWidth: '1.1',
+          strokeLinecap: 'round',
+        }))
+    }
+
+    /** Chevron pointing down; the open state rotates it in CSS. */
+    function ChevronGlyph() {
+      return h('svg', { viewBox: '0 0 12 12', 'aria-hidden': true },
+        h('path', {
+          d: 'M2.4 4.4 6 8 9.6 4.4',
+          fill: 'none',
+          stroke: 'currentColor',
+          strokeWidth: '1.6',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round',
+        }))
+    }
+
+    /** One multi-select capability row. */
+    function CapabilityRow(props) {
+      const { t, checked, label, hint, sub, disabled, onToggle } = props
+      return h('button', {
+        type: 'button',
+        role: 'checkbox',
+        'aria-checked': checked ? 'true' : 'false',
+        'aria-disabled': disabled ? 'true' : undefined,
+        className: sub === true ? 'cbp-row cbp-row-sub' : 'cbp-row',
+        onClick: disabled ? undefined : onToggle,
+      },
+        h('span', { className: 'cbp-row-text' },
+          h('span', { className: 'cbp-row-label' }, label),
+          typeof hint === 'string' && hint.length > 0 ? h('span', { className: 'cbp-row-hint' }, hint) : null),
+        h('span', { className: 'cbp-check', 'data-checked': checked ? 'true' : 'false', 'aria-hidden': true },
+          checked ? h(CheckGlyph) : null))
+    }
+
+    /** Detailed usage and estimate block. */
+    function UsageBlock(props) {
+      const { t, usage } = props
+      if (usage === undefined || usage === null) {
+        return h('div', { className: 'cbp-usage' },
+          h('div', { className: 'cbp-usage-title' }, t('usageTitle')),
+          h('div', { className: 'cbp-usage-line' }, h('span', null, t('search')), h('b', null, count(0, t('times')))))
+      }
+      const search = usage.search || { calls: 0, queries: 0, sources: 0, failed: 0, failedQueries: 0 }
+      const fetch = usage.fetch || { calls: 0, failed: 0 }
+      const image = usage.image || { calls: 0, failed: 0, images: 0, results: 0, imageResults: 0, toolSearch: 0, toolFetch: 0, imageSearch: 0, inputTokens: 0, outputTokens: 0 }
+      const deep = usage.deep || { calls: 0, failed: 0, toolSearch: 0, toolFetch: 0, imageSearch: 0, inputTokens: 0, outputTokens: 0, sources: 0 }
+      const fees = usage.fees || { search: 0, fetch: 0, image: 0, imageTools: 0, imageTokens: 0, deepTools: 0, deepTokens: 0, total: 0 }
+      const deepTools = (deep.toolSearch || 0) + (deep.toolFetch || 0) + (deep.imageSearch || 0)
+      const imageBilled = (image.toolSearch || 0) + (image.toolFetch || 0) + (image.imageSearch || 0)
+      const showImage = image.calls > 0 || image.failed > 0 || imageBilled > 0
+      const failures = (search.failed || 0) + (fetch.failed || 0) + (image.failed || 0) + (deep.failed || 0)
+      const lines = []
+      lines.push(h('div', { key: 'title', className: 'cbp-usage-title' }, t('usageTitle')))
+      lines.push(h('div', { key: 'search', className: 'cbp-usage-line' },
+        h('span', null, t('search')),
+        h('span', null,
+          h('b', null, count(search.calls, t('billed'))),
+          ` · ${count(search.sources, t('sources'))}`)))
+      if (showImage) {
+        lines.push(h('div', { key: 'image', className: 'cbp-usage-line' },
+          h('span', null, t('imageUsage')),
+          h('span', null,
+            h('b', null, count(image.calls, t('times'))),
+            ` · ${count(image.images, t('imagesCount'))} · ${count(imageBilled, t('billed'))}`)))
+      }
+      lines.push(h('div', { key: 'fetch', className: 'cbp-usage-line' },
+        h('span', null, t('fetch')),
+        h('span', null,
+          h('b', null, count(fetch.calls, t('times'))),
+          usage.countFetchCost === true ? '' : ` · ${t('fetchFree')}`)))
+      lines.push(h('div', { key: 'deep', className: 'cbp-usage-line' },
+        h('span', null, t('deepUsage')),
+        h('span', null,
+          h('b', null, count(deep.calls, t('times'))),
+          ` · ${count(deepTools, t('toolCalls'))} · ${tokens(deep.inputTokens)}/${tokens(deep.outputTokens)} tok`)))
+      if (failures > 0) {
+        lines.push(h('div', { key: 'failed', className: 'cbp-usage-line' },
+          h('span', null, t('failed')),
+          h('span', null, count(failures, t('times')))))
+      }
+      lines.push(h('div', { key: 'sep', className: 'cbp-sep' }))
+      lines.push(h('div', { key: 'fee-title', className: 'cbp-usage-title' }, t('feeTitle')))
+      lines.push(h('div', { key: 'fee-search', className: 'cbp-usage-line' },
+        h('span', null, t('searchFee')), h('span', null, yuan(fees.search))))
+      if (showImage) {
+        lines.push(h('div', { key: 'fee-image-tools', className: 'cbp-usage-line' },
+          h('span', null, t('imageToolFee')), h('span', null, yuan(fees.imageTools))))
+        lines.push(h('div', { key: 'fee-image-tokens', className: 'cbp-usage-line' },
+          h('span', null, t('imageTokenFee')), h('span', null, yuan(fees.imageTokens))))
+      }
+      lines.push(h('div', { key: 'fee-fetch', className: 'cbp-usage-line' },
+        h('span', null, t('fetchFee')), h('span', null, yuan(fees.fetch))))
+      lines.push(h('div', { key: 'fee-deep-tools', className: 'cbp-usage-line' },
+        h('span', null, t('deepToolFee')), h('span', null, yuan(fees.deepTools))))
+      lines.push(h('div', { key: 'fee-deep-tokens', className: 'cbp-usage-line' },
+        h('span', null, t('deepTokenFee')), h('span', null, yuan(fees.deepTokens))))
+      lines.push(h('div', { key: 'total', className: 'cbp-total' },
+        h('span', null, t('totalFee')), h('span', null, `≈ ${yuan(fees.total)}`)))
+      lines.push(h('div', { key: 'note', className: 'cbp-note' }, t('feeNote')))
+      lines.push(h('a', {
+        key: 'link',
+        className: 'cbp-link',
+        href: typeof usage.usageUrl === 'string' && usage.usageUrl.length > 0 ? usage.usageUrl : USAGE_URL,
+        target: '_blank',
+        rel: 'noopener noreferrer',
+      }, t('usageLink')))
+      return h('div', { className: 'cbp-usage' }, ...lines)
+    }
+
+    /** The composer control: split capsule plus the upward panel. */
+    function ChatBotControl(props) {
+      const t = typeof props.t === 'function' ? props.t : key => key
+      const caps = props.useProjection('chatbotCapabilities')
+      const usage = props.useProjection('chatbotUsage')
+      const web = caps !== undefined && caps !== null && caps.web === true
+      const deep = caps !== undefined && caps !== null && caps.deep === true
+      const pending = caps !== undefined && caps !== null && caps.pending === true
+      const [open, setOpen] = React.useState(false)
+      const [busy, setBusy] = React.useState(false)
+      const [error, setError] = React.useState(null)
+      const [position, setPosition] = React.useState(null)
+      const wrapRef = React.useRef(null)
+      const panelRef = React.useRef(null)
+
+      const submit = typeof props.submit === 'function' ? props.submit : async () => undefined
+      const sessionId = props.sessionId
+      const run = React.useCallback((line) => {
+        setBusy(true)
+        setError(null)
+        Promise.resolve()
+          .then(() => submit(sessionId, line))
+          .then((result) => {
+            if (result === undefined || result === null) { setError(t('errorUnknown')); return }
+            if (result.ok !== true) {
+              const message = result.error && typeof result.error.message === 'string' ? result.error.message : t('errorUnknown')
+              setError(message)
+              return
+            }
+            const value = result.value
+            if (value === undefined) { setError(t('errorUnknown')); return }
+            if (value !== null && typeof value === 'object' && value.kind === 'error') {
+              setError(typeof value.text === 'string' ? value.text : t('errorUnknown'))
+            }
+          })
+          .catch((failure) => { setError(`${t('errorPrefix')}${String(failure)}`) })
+          .finally(() => { setBusy(false) })
+      }, [submit, sessionId, t])
+
+      const place = React.useCallback(() => {
+        const element = wrapRef.current
+        if (element === null || typeof window === 'undefined') return
+        const rect = element.getBoundingClientRect()
+        const width = Math.min(PANEL_WIDTH, Math.max(160, window.innerWidth - 16))
+        const left = Math.min(Math.max(8, rect.left), Math.max(8, window.innerWidth - width - 8))
+        const bottom = Math.max(8, window.innerHeight - rect.top + 8)
+        setPosition({ left, bottom, width, maxHeight: Math.max(120, window.innerHeight - bottom - 8) })
+      }, [])
+
+      React.useLayoutEffect(() => {
+        if (!open) return undefined
+        place()
+        const onResize = () => { place() }
+        window.addEventListener('resize', onResize)
+        return () => { window.removeEventListener('resize', onResize) }
+      }, [open, place])
+
+      React.useEffect(() => {
+        if (!open || panelRef.current === null) return undefined
+        const first = panelRef.current.querySelector('button[role="checkbox"]:not([aria-disabled="true"])')
+        if (first !== null && typeof first.focus === 'function') first.focus({ preventScroll: true })
+        return undefined
+      }, [open])
+
+      React.useEffect(() => {
+        if (!open) return undefined
+        const onPointerDown = (event) => {
+          if (wrapRef.current !== null && wrapRef.current.contains(event.target)) return
+          if (panelRef.current !== null && panelRef.current.contains(event.target)) return
+          setOpen(false)
+        }
+        const onKeyDown = (event) => {
+          if (event.key !== 'Escape') return
+          setOpen(false)
+          const trigger = wrapRef.current === null ? null : wrapRef.current.querySelector('button')
+          if (trigger !== null && typeof trigger.focus === 'function') trigger.focus()
+        }
+        document.addEventListener('pointerdown', onPointerDown, true)
+        document.addEventListener('keydown', onKeyDown, true)
+        return () => {
+          document.removeEventListener('pointerdown', onPointerDown, true)
+          document.removeEventListener('keydown', onKeyDown, true)
+        }
+      }, [open])
+
+      const disabled = busy || pending
+
+      const active = web || deep
+
+      const capsule = h('span', {
+        ref: wrapRef,
+        className: 'cbp-capsule',
+        'data-on': active ? 'true' : 'false',
+      },
+        h('button', {
+          type: 'button',
+          className: 'cbp-main',
+          'data-open': open ? 'true' : 'false',
+          'aria-haspopup': 'dialog',
+          'aria-expanded': open ? 'true' : 'false',
+          'aria-label': `${t('openPanel')} · ${active ? t('active') : t('inactive')}`,
+          title: t('openPanel'),
+          onClick: () => { setOpen(value => !value) },
+        },
+          h('span', { className: 'cbp-icon', 'aria-hidden': true }, h(BotGlyph)),
+          h('span', { className: 'cbp-label' }, t('label')),
+          h('span', { className: 'cbp-arrow', 'aria-hidden': true }, h(ChevronGlyph))))
+
+      let panel = null
+      if (open && typeof document !== 'undefined') {
+        panel = createPortal(h('div', {
+          ref: panelRef,
+          className: 'cbp-panel',
+          role: 'dialog',
+          'aria-label': t('panelTitle'),
+          style: {
+            left: position === null ? 0 : `${position.left}px`,
+            bottom: position === null ? 12 : `${position.bottom}px`,
+            width: position === null ? 'min(328px, calc(100vw - 16px))' : `${position.width}px`,
+            maxHeight: position === null ? 'calc(100vh - 24px)' : `${position.maxHeight}px`,
+          },
+        },
+          h('div', { className: 'cbp-head' },
+            h('span', { className: 'cbp-head-title' }, t('panelTitle')),
+            h('span', { className: 'cbp-head-scope' }, t('scope'))),
+          h('div', { className: 'cbp-group' }, t('groupWeb')),
+          h(CapabilityRow, {
+            t,
+            checked: web,
+            label: t('web'),
+            hint: t('webHint'),
+            disabled,
+            onToggle: () => { run(web ? 'web off' : 'web on') },
+          }),
+          h(CapabilityRow, {
+            t,
+            checked: deep,
+            label: t('deep'),
+            hint: web ? t('deepHint') : t('deepNeedsWeb'),
+            sub: true,
+            disabled: disabled || !web,
+            onToggle: () => { run(deep ? 'deep off' : 'deep on') },
+          }),
+          h('div', { className: 'cbp-note cbp-group-note' }, t('searchNote')),
+          h('div', { className: 'cbp-sep' }),
+          h(UsageBlock, { t, usage }),
+          pending || busy ? h('div', { className: 'cbp-note' }, t('pending')) : null,
+          error === null ? null : h('div', { className: 'cbp-error', role: 'alert' }, error)),
+        document.body)
+      }
+
+      return h(React.Fragment, null, capsule, panel)
+    }
+
+    return {
+      inject: ['slots', 'locale', 'remote', 'remote.commands'],
+
+      apply(ctx) {
+        ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'chatbot-panel: dictionaries')
+        ctx.effect(insertStyles, 'chatbot-panel: styles')
+        ctx.slots.inject('conversation.input.left', () => ctx.slots.register({
+          name: 'conversation.input.left',
+          id: 'chatbot-panel',
+          order: 0,
+          locale: NS,
+          inject: () => ({
+            submit: (sessionId, line) => ctx.remote.commands.execute(sessionId, `/chatbot ${line}`, []),
+          }),
+        }, ChatBotControl))
+      },
+    }
+  },
+})

package/cordis.patch.yml

@@ -0,0 +1,24 @@
+# Profile patch for the ChatBot capability panel bundle: one Host row whose
+# package also carries the browser half (`dsh.client` in package.json).
+- insert:
+    - id: chatbot-panel
+      name: '@chentyit/dsh-chatbot-panel'
+      config:
+        # New sessions start with every capability off; the panel turns them on.
+        manageBuiltinWebTools: true
+        # Official web-tool price: 5 CNY per 1,000 successful requests.
+        pricePerThousand: 5
+        # Anonymous HTTP fetch is free; enable only when the fetch provider is
+        # the DeepSeek Fetch API.
+        countFetchCost: false
+        # Deep and image search share this endpoint, model and credential.
+        deepSearch:
+          baseURL: https://api.deepseek.com/anthropic/v1
+          apiKeyEnv: DEEPSEEK_API_KEY
+          model: deepseek-flash
+          maxTokens: 4096
+          timeoutMs: 180000
+        tokenPrice:
+          # deepseek-flash off-peak prices; peak hours are double.
+          inputPerMillion: 1
+          outputPerMillion: 4

package/icon.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" role="img" aria-label="ChatBot capability panel">
+  <defs>
+    <linearGradient id="cbp-bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#101319"/>
+      <stop offset="1" stop-color="#2a3342"/>
+    </linearGradient>
+  </defs>
+  <rect x="2" y="2" width="60" height="60" rx="16" fill="url(#cbp-bg)"/>
+  <path d="M14 22.5c0-3 2.4-5.5 5.4-5.5h25.2c3 0 5.4 2.5 5.4 5.5v14c0 3-2.4 5.5-5.4 5.5H29.6l-8.4 7.2c-.8.7-2 .1-2-1V42h-.8c-2.4 0-4.4-2-4.4-4.5z" fill="#f7f8fb"/>
+  <circle cx="24" cy="29.5" r="2.6" fill="#101319"/>
+  <circle cx="32" cy="29.5" r="2.6" fill="#101319"/>
+  <circle cx="40" cy="29.5" r="2.6" fill="#101319"/>
+  <circle cx="47" cy="47" r="9" fill="#4b8bf5"/>
+  <path d="M43 47h8M47 43v8" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/>
+</svg>