@waterplus-ai/waterbuddy 0.2.10 → 0.2.37

package/lib/client/index.js

@@ -414,12 +414,179 @@ window.__ModuleLoader__.load({
       ] })
     }
 
-    function UserAction({ wide }) {
+    // —— 设置菜单里的账号条目：把官方账号菜单（settings.launcher）里的登录/退出登录取代成
+    // 我们的。菜单与条目都是官方 primitives（`button[role=menuitem]`），所以克隆官方条目继承
+    // 其样式（不手写动态类名哈希），只改文案与图标；克隆项不在官方 React fiber 里，交互只能走
+    // 原生捕获监听——与壳层 dsh-tauri-pet 处理同款菜单的手法一致。
+    const MENU_ITEM_SELECTOR = 'button[role="menuitem"]'
+    const MENU_LABEL_SELECTOR = '[class*="itemLabel"]'
+    const MENU_ICON_SELECTOR = '[class*="itemIcon"]'
+    const MENU_ANCHOR_LABELS = ['设置', 'Settings']
+    const MENU_ACCOUNT_LABELS = ['登录', 'Sign in', '退出登录', 'Sign out']
+    /** 官方菜单里的「意见反馈」（id=contact，locales.ts: contactUs）——按要求隐藏 */
+    const MENU_CONTACT_LABELS = ['意见反馈', 'Feedback']
+    const MENU_ITEM_ATTR = 'data-waterbuddy-menu-item'
+    const MENU_PATCH_ATTR = 'data-waterbuddy-menu-patched'
+    const MENU_ICON_SVG = '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"/><path d="M4 20c0-3 3.6-5 8-5s8 2 8 5v1H4v-1Z"/></svg>'
+
+    /** 账号状态唯一真值：`UserAction` 每次拿到会话就更新它，菜单条目文案只读它。 */
+    const waterbuddyAccount = { signedIn: false, name: '', avatar: '', balance: '', hosted: false }
+
+
+    function waterbuddyMenuLabel() {
+      return waterbuddyAccount.signedIn ? '退出登录' : '登录 水务之窗'
+    }
+
+    /** 隐藏官方账号条目并插入我们的条目；文案变了就地更新，不重建节点。 */
+    function patchWaterbuddyMenu() {
+      if (typeof document === 'undefined' || typeof document.querySelectorAll !== 'function') return
+      for (const anchor of document.querySelectorAll(MENU_ITEM_SELECTOR)) {
+        const menu = typeof anchor.closest === 'function' ? anchor.closest('[role="menu"]') : null
+        if (!menu || !MENU_ANCHOR_LABELS.includes((anchor.textContent || '').trim())) continue
+        for (const item of menu.querySelectorAll(MENU_ITEM_SELECTOR)) {
+          if (item.hasAttribute(MENU_ITEM_ATTR)) continue
+          const itemText = (item.textContent || '').trim()
+          const hidden = MENU_ACCOUNT_LABELS.includes(itemText) || MENU_CONTACT_LABELS.includes(itemText)
+          if (!hidden) continue
+          if (item.style.display !== 'none') item.style.display = 'none'
+        }
+        const label = waterbuddyMenuLabel()
+        const existing = menu.querySelector(`[${MENU_ITEM_ATTR}]`)
+        if (existing) {
+          const node = existing.querySelector(MENU_LABEL_SELECTOR)
+          if (node && node.textContent !== label) node.textContent = label
+          continue
+        }
+        if (menu.hasAttribute(MENU_PATCH_ATTR)) continue
+        const clone = anchor.cloneNode(true)
+        const labelNode = typeof clone.querySelector === 'function' ? clone.querySelector(MENU_LABEL_SELECTOR) : null
+        // 非 primitives 结构（没有 itemLabel）：中止插入，不追加半成品条目
+        if (!labelNode) continue
+        menu.setAttribute(MENU_PATCH_ATTR, '1')
+        clone.setAttribute(MENU_ITEM_ATTR, '1')
+        labelNode.textContent = label
+        const icon = clone.querySelector(MENU_ICON_SELECTOR)
+        if (icon) icon.innerHTML = MENU_ICON_SVG
+        // 登录项固定放菜单**最后一条**（不管官方/其它插件贡献了多少条目）
+        const items = menu.querySelectorAll(MENU_ITEM_SELECTOR)
+        const last = items.length > 0 ? items[items.length - 1] : anchor
+        last.after(clone)
+      }
+    }
+
+    /**
+     * 设置入口（官方 AccountMenu 的触发按钮）上的账号文案也归我们，否则侧栏底部会同时挂着
+     * 我们的卡片和官方的「尚未登录」。
+     *
+     * 认这个按钮用 `data-collapsed`：官方编译后的结构是
+     * `button[data-collapsed][aria-haspopup="menu"] > span.avatar + (wide && span.label)`，
+     * 而壳层自有的触发器没有该属性。label 的类名来自 CSS modules（形如 `yHnPSG_label`），
+     * 所以按 `[class*="label"]` 取；文案不再做状态匹配，无论官方显示什么一律换成我们的身份。
+     */
+    function patchWaterbuddyTrigger() {
+      if (typeof document === 'undefined' || typeof document.querySelectorAll !== 'function') return
+      const entries = document.querySelectorAll('button[data-collapsed] [class*="label"]')
+      // 官方入口缺席（浏览器态 / 更老内核）时保留我们自己的卡片，否则底下就没有登录入口了
+      if (entries.length === 0) return
+      const label = waterbuddyAccount.name || '登录 水务之窗'
+      for (const node of entries) {
+        if (node.textContent !== label) node.textContent = label
+      }
+      // 官方入口既然承载了我们的登录，侧栏那条就只"不渲染卡片"，**不能注销注册**——
+      // 登录面板挂在 UserAction 里，注销会让菜单里的登录点了没反应（实测踩过）。
+      if (!waterbuddyAccount.hosted) {
+        waterbuddyAccount.hosted = true
+        if (typeof Event === 'function') document.dispatchEvent(new Event('waterbuddy:account-hosted'))
+      }
+      // 官方入口在宿主那一行里是靠右的：给它一个 margin-right:auto 推回左侧（官方 CSS 本身是
+      // width:100% + flex-start，位置由外壳容器决定）
+      for (const node of entries) {
+        const anchor = node.parentElement
+        if (anchor && anchor.style.marginRight !== 'auto') anchor.style.marginRight = 'auto'
+      }
+
+      // 额度靠右：在官方那一行（button 是 flex）里追加我们的额度元素，margin-left:auto 推到行尾。
+      // 图标内联 SVG（本插件是零依赖包，拿不到图标库；与菜单条目用同一做法），随 currentColor 变色。
+      // 没有额度（未登录 / 取不到）就移除，绝不显示一个不是用户在花的数字。
+      const POINTS_ICON = '<svg viewBox="0 0 1024 1024" width="12" height="12" fill="currentColor" aria-hidden="true" style="flex:none"><path d="M781.312 497.7152a34.133333 34.133333 0 0 1 46.916267-11.349333C897.809067 528.810667 938.666667 585.437867 938.666667 648.533333c0 137.966933-193.501867 238.933333-426.666667 238.933334S85.333333 786.500267 85.333333 648.533333c0-62.72 40.3968-119.074133 109.2608-161.450666a34.133333 34.133333 0 1 1 35.771734 58.146133C179.848533 576.3072 153.6 612.932267 153.6 648.533333c0 88.234667 157.986133 170.666667 358.4 170.666667s358.4-82.432 358.4-170.666667c0-35.84-26.589867-72.704-77.738667-103.901866a34.133333 34.133333 0 0 1-11.349333-46.916267z" fill="currentColor"/><path d="M512 136.533333C278.8352 136.533333 85.333333 237.499733 85.333333 375.466667s193.501867 238.933333 426.666667 238.933333 426.666667-100.9664 426.666667-238.933333S745.1648 136.533333 512 136.533333z m0 68.266667c200.413867 0 358.4 82.432 358.4 170.666667s-157.986133 170.666667-358.4 170.666666S153.6 463.701333 153.6 375.466667c0-87.210667 154.282667-168.721067 351.351467-170.632534L512 204.8z" fill="currentColor"/><path d="M458.24 477.764267l-6.3488-0.256a510.0032 510.0032 0 0 1-27.5968-2.423467c-26.248533-2.952533-52.565333-7.748267-77.431467-14.848-57.719467-16.503467-100.266667-42.871467-119.3472-84.4288l-1.962666-4.5056 63.214933-25.8048c8.123733 19.933867 35.259733 37.205333 76.8512 49.083733 20.855467 5.973333 43.5712 10.103467 66.338133 12.680534 6.007467 0.682667 11.6736 1.194667 16.913067 1.604266l9.147733 0.580267 3.6864 0.170667a34.133333 34.133333 0 1 1-1.809066 68.232533l-1.467734-0.068267h-0.187733z" fill="#00B386"/></svg>'
+      for (const node of entries) {
+        const row = node.parentElement
+        if (!row) continue
+        const text = waterbuddyAccount.balance || ''
+        const existing = row.querySelector('[data-waterbuddy-balance]')
+        if (!text) {
+          if (existing) existing.remove()
+          continue
+        }
+        const target = existing || (() => {
+          const created = document.createElement('span')
+          created.setAttribute('data-waterbuddy-balance', '1')
+          created.setAttribute('style', 'margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;opacity:.7;white-space:nowrap')
+          row.appendChild(created)
+          return created
+        })()
+        if (target.getAttribute('data-waterbuddy-balance-text') !== text) {
+          target.setAttribute('data-waterbuddy-balance-text', text)
+          while (target.firstChild) target.removeChild(target.firstChild)
+          target.innerHTML = POINTS_ICON
+          target.appendChild(document.createTextNode(text))
+        }
+      }
+
+      // 头像：只有登录用户带真实头像（/api/waterbuddy/avatar?...）时才覆盖官方头像，
+      // 用背景图而不是替换 DOM —— 官方那个人形图标留在下面，退出登录后清掉覆盖即可恢复。
+      const officialAvatar = document.querySelector('button[data-collapsed] [class*="avatar"]')
+      if (officialAvatar) {
+        const url = waterbuddyAccount.avatar
+        if (url) {
+          if (officialAvatar.getAttribute('data-waterbuddy-avatar') !== url) {
+            officialAvatar.setAttribute('data-waterbuddy-avatar', url)
+            officialAvatar.style.backgroundImage = `url("${url}")`
+            officialAvatar.style.backgroundSize = 'cover'
+            officialAvatar.style.backgroundPosition = 'center'
+          }
+          // 官方的人形图标是子节点、绘制在背景之上，盖了头像必须把它藏起来（visibility 保留布局）
+          for (const child of officialAvatar.children) {
+            if (child.style.visibility !== 'hidden') child.style.visibility = 'hidden'
+          }
+        }
+        else if (officialAvatar.getAttribute('data-waterbuddy-avatar')) {
+          officialAvatar.removeAttribute('data-waterbuddy-avatar')
+          officialAvatar.style.backgroundImage = ''
+          officialAvatar.style.backgroundSize = ''
+          officialAvatar.style.backgroundPosition = ''
+          for (const child of officialAvatar.children) {
+            if (child.style.visibility === 'hidden') child.style.visibility = ''
+          }
+        }
+      }
+    }
+
+    function startWaterbuddyMenu() {
+      if (typeof document === 'undefined' || typeof document.addEventListener !== 'function') return undefined
+      const onClick = event => {
+        const origin = event.target
+        if (!origin || typeof origin.closest !== 'function' || !origin.closest(`[${MENU_ITEM_ATTR}]`)) return
+        event.preventDefault()
+        event.stopImmediatePropagation()
+        // 复用 UserAction 里那套登录面板 / 登出，事件驱动，不写第二份逻辑
+        const name = waterbuddyAccount.signedIn ? 'waterbuddy:menu-logout' : 'waterbuddy:menu-login'
+        if (typeof Event === 'function') document.dispatchEvent(new Event(name))
+        // 克隆条目不会触发官方 onSelect（菜单不自关），派发一次外部 pointerdown 收起菜单
+        const PointerEventCtor = typeof PointerEvent === 'function' ? PointerEvent : (typeof MouseEvent === 'function' ? MouseEvent : null)
+        if (PointerEventCtor) document.dispatchEvent(new PointerEventCtor('pointerdown', { bubbles: true, cancelable: true }))
+      }
+      document.addEventListener('click', onClick, true)
+      return () => document.removeEventListener('click', onClick, true)
+    }
+
+    function UserAction({ wide, inputActions }) {
       const { useEffect, useRef, useState } = require('react')
       const [open, setOpen] = useState(false)
       const [user, setUser] = useState(null)
       const [llm, setLlm] = useState(null)
       const [session, setSession] = useState({ qrCode: '', status: '', error: '', loading: false })
+      const [hosted, setHosted] = useState(false)
 
       useEffect(() => {
         let cancelled = false
@@ -510,6 +677,9 @@ window.__ModuleLoader__.load({
         return () => { stopped = true; if (timer) clearTimeout(timer) }
       }, [open, session.sessionId, user])
 
+      // portal 渲染的推荐卡片拿不到 slot props，这里把写草稿的能力暴露给同一页面
+      // portal 渲染的推荐卡片拿不到 slot props，这里把「写草稿」的能力暴露给同一页面
+      if (typeof window !== 'undefined' && inputActions) window.__WB_INPUT_ACTIONS__ = inputActions
       const openPanel = () => { setOpen(true); if (!user && !session.sessionId) startLogin() }
       // 额度耗尽是**主动**提示：模型调用由 Harness 自己发起，插件看不到那次 403
       // （harness 还会把它归类成「API 密钥无效」，文案完全误导），只能靠额度轮询
@@ -531,6 +701,36 @@ window.__ModuleLoader__.load({
         if (llm.exhausted !== true) exhaustedNotified.current = false
       }, [llm, user])
       const logout = async () => { await fetch('/api/waterbuddy/logout', { method: 'POST' }); setUser(null); setOpen(false); setSession({ qrCode: '', status: '', error: '', loading: false }) }
+
+      // 设置菜单里的账号条目走事件驱动同一个面板 / 登出，避免第二套登录逻辑
+      useEffect(() => {
+        if (typeof document === 'undefined' || typeof document.addEventListener !== 'function') return undefined
+        const onLogin = () => openPanel()
+        const onLogout = () => { void logout() }
+        document.addEventListener('waterbuddy:menu-login', onLogin)
+        document.addEventListener('waterbuddy:menu-logout', onLogout)
+        return () => {
+          document.removeEventListener('waterbuddy:menu-login', onLogin)
+          document.removeEventListener('waterbuddy:menu-logout', onLogout)
+        }
+      }, [user, session.sessionId])
+      // 账号状态变化后就地刷新菜单条目文案（登录 / 退出登录）
+      // 官方入口接管后只隐藏卡片本身：组件必须继续挂载，否则菜单里的登录/登出没有宿主
+      useEffect(() => {
+        if (typeof document === 'undefined' || typeof document.addEventListener !== 'function') return undefined
+        const sync = () => setHosted(waterbuddyAccount.hosted)
+        document.addEventListener('waterbuddy:account-hosted', sync)
+        sync()
+        return () => document.removeEventListener('waterbuddy:account-hosted', sync)
+      }, [])
+      useEffect(() => {
+        waterbuddyAccount.signedIn = Boolean(user)
+        waterbuddyAccount.name = user ? userName(user) : ''
+        waterbuddyAccount.balance = llm && llm.balanceText ? llm.balanceText : ''
+        waterbuddyAccount.avatar = (user && user.avatar) || ''
+        patchWaterbuddyMenu()
+        patchWaterbuddyTrigger()
+      }, [user, llm])
       const name = userName(user)
       const buttonStyle = { borderRadius: 10, padding: '9px 18px', fontSize: 13, fontWeight: 600, cursor: 'pointer' }
       // 额度以美元记账、按积分向用户展示；折算与格式化都在 Host 侧完成
@@ -589,9 +789,10 @@ window.__ModuleLoader__.load({
 
       return jsxs(Fragment, {
         children: [
-          jsx('button', {
+          hosted ? null : jsx('button', {
             type: 'button',
             onClick: openPanel,
+            'data-waterbuddy-account-card': '1',
             title: user ? name : '登录 WaterPlusAI',
             'data-waterbuddy-account': '',
             // 注意：**不要**给它 `flex: 0 0 auto`。底栏被我们摆成一行时，宿主那层的
@@ -634,13 +835,16 @@ window.__ModuleLoader__.load({
       const edge = typeof size === 'number' && size > 0 ? size : 24
       // 与侧边栏左上角同一个 mark（模块级 data URI）。之前这里写的是
       // `/waterplus-mark.png`，该路径在 hero 里取不到，渲染成了黑方块。
-      return jsx('img', {
+      return jsxs(Fragment, { children: [jsx('img', {
         src: mark,
         alt: 'WaterPlusAI',
         width: edge,
         height: edge,
         style: { width: edge, height: edge, objectFit: 'contain', borderRadius: '22%' },
-      })
+      }) ,
+      // 推荐任务区跟随 hero 品牌槽位渲染（官方 hero 空态专属，进行中的对话不会出现）
+      jsx(RecommendationDock, {})
+    ] })
     }
 
     // ── locales.js ──────────────────────────────────────────────────────────
@@ -758,6 +962,62 @@ window.__ModuleLoader__.load({
       }
     }
 
+    /**
+     * 在 chip 之后补一段**调用方给的**正文（推荐卡片用）。手法与 {@link appendExpertTaskExample}
+     * 完全一致：`insertText` 存在于输入 facade 但不在公开契约里，取不到就安静跳过。
+     */
+    function appendExpertTaskText(target, text) {
+      if (typeof text !== 'string' || text.trim() === '' || typeof target.insertText !== 'function') return false
+      try {
+        const snapshot = target.state.getSnapshot()
+        const at = String(snapshot.draft || '').length
+        return target.insertText(' ' + text, { start: at, end: at, draftRev: snapshot.draftRev }) === true
+      } catch {
+        return false
+      }
+    }
+
+    /**
+     * 兜底：宿主没暴露 `insertText`（公开契约里没有）时，用**公开的 setDraft** 把正文接在引用之后。
+     * 插完 chip 后草稿文本里已经有引用占位符（U+FFFC），在它之后补正文即保持「chip 在前、正文在后」。
+     */
+    function appendTaskViaDraft(target, text) {
+      if (typeof text !== 'string' || text.trim() === '') return false
+      try {
+        if (typeof target.setDraft !== 'function') return false
+        const snapshot = target.state.getSnapshot()
+        target.setDraft(String(snapshot.draft || '') + ' ' + text)
+        return true
+      } catch {
+        return false
+      }
+    }
+
+    /**
+     * 把输入框光标移到正文末尾。
+     *
+     * 为什么要在 DOM 层做：公开契约（SessionInput）只有 setDraft / insertReference / focus /
+     * submit / notify / state，**没有光标或选区接口**；能精确定位的内部 insertText(text, {start,end})
+     * 在本内核上未暴露（实测：插完引用光标停在 chip 之后）。这里在编辑器（contenteditable）上折叠
+     * 选区到末尾，延后一拍执行，等宿主自己的更新先落完。
+     */
+    function moveExpertCaretToEnd() {
+      if (typeof document === 'undefined' || typeof window === 'undefined') return false
+      try {
+        const editable = document.querySelector('[contenteditable="true"]')
+        const selection = window.getSelection()
+        if (!editable || !selection || typeof document.createRange !== 'function') return false
+        const range = document.createRange()
+        range.selectNodeContents(editable)
+        range.collapse(false)
+        selection.removeAllRanges()
+        selection.addRange(range)
+        return true
+      } catch {
+        return false
+      }
+    }
+
     /** 名册读取（`@` 菜单与工具栏共用）。每次现读，用户一改开关立刻生效。 */
     async function loadExpertRoster() {
       const response = await fetch('/api/waterbuddy/experts')
@@ -862,6 +1122,16 @@ window.__ModuleLoader__.load({
     const MENU_WIDTH = 320
 
     function ExpertInputEntry(props) {
+  // 推荐任务区（portal 渲染在 React 会话上下文之外）需要同一套写草稿能力：
+  // 只有 session 作用域的条目才拿得到 inputActions，因此在这里发布。
+  if (typeof window !== 'undefined' && props && props.inputActions) window.__WB_INPUT_ACTIONS__ = props.inputActions
+  // 推荐卡片在 portal 里渲染，拿不到 slot 注入，所以把「插引用 chip」的能力也发布出来 ——
+  // 与「召唤专家」按钮走同一条路径（buildExpertReference + insertExpert），保证形态一致。
+  if (typeof window !== 'undefined' && props && typeof props.summonExpertWithTask === 'function') {
+    // 插 chip + 补任务正文，两步都做（只插 chip 会缺正文，用户会看到"做一半丢一半"）
+    window.__WB_SUMMON_TASK__ = (expert, task) => props.summonExpertWithTask(buildExpertReference(expert), expert, task) === true
+  }
+
       if (props && typeof props.insertExpert === 'function') return ExpertInputButton(props)
       if (props && props.inputActions && typeof props.inputActions.setDraft === 'function') {
         return ExpertInputButton({ ...props, insertExpert: undefined })
@@ -1557,6 +1827,511 @@ window.__ModuleLoader__.load({
 
     // `inputTriggers` 必须**声明**才能拿到：`ctx.get` 同样受 inject 边界限制（实测未声明时
     // 拿到 undefined，@ 菜单静默不注册）。参考实现同样把它列在 inject 里。
+
+/**
+ * 新会话页推荐任务的数据源：**只推荐我们真实可用的东西** —— 专家、专家团，以及专家自带的
+ * skills（都来自 Host 的 /api/waterbuddy/experts 快照）。接口不可用时回落到水务行业种子任务，
+ * 保证这一块永远不为空。
+ */
+
+/**
+ * 推荐卡片是「任务模板」，不是专家名片：标题描述用户要完成的工作，点击后补充可交付的输出结构。
+ * 专家名仍作为协作对象显示在副标题里，避免标题和实际产出脱节。
+ */
+const RECOMMENDATION_TEMPLATES = {
+  'smart-water-assistant': {
+    title: '制定智慧水务建设路线图',
+    subtitle: '从现状评估到分期落地的可执行方案',
+    task: '请制定智慧水务建设路线图。先列出需要补充的现状信息，再输出目标架构、一期最小闭环、分期项目、投资与风险假设、里程碑和验收指标；无法确认的内容标注为待核实。',
+    tag: '建设规划',
+  },
+  'smart-water-case-expert': {
+    title: '拆解一个可迁移的智慧水务案例',
+    subtitle: '从问题、投入、成效到适用条件逐项对照',
+    task: '请拆解一个与当前水务企业相近的智慧水务案例，按“问题—方案—实施—投入—成效—依赖条件—可迁移做法—风险”输出，并区分已核实事实、宣传口径和待验证信息。',
+    tag: '案例研究',
+  },
+  'water-industry-brain': {
+    title: '研判水务行业趋势与机会',
+    subtitle: '统一指标口径，给出证据与决策影响',
+    task: '请围绕指定地区和细分领域研判水务行业趋势。先明确数据口径和时间范围，再输出关键趋势、证据来源、影响判断、机会与风险，以及仍需补充的数据；不要用单一案例推导行业结论。',
+    tag: '行业洞察',
+  },
+  'it-assessment': {
+    title: '完成水务企业 IT 现状评估',
+    subtitle: '盘点系统、数据、治理与组织能力差距',
+    task: '请设计一份水务企业 IT 现状评估方案，输出访谈提纲、资料清单、评估维度、成熟度判定口径、差距台账和分阶段改进路线；每项判断都注明证据要求。',
+    tag: '现状评估',
+  },
+  'water-source-dispatch': {
+    title: '编制供水调度与水量平衡方案',
+    subtitle: '明确约束、监测指标、切换阈值和备用方案',
+    task: '请编制供水调度方案。先核对水源、产能、库容、压力、需水预测和设备约束，再给推荐方案、备选方案、监测清单、触发阈值、执行反馈和撤销条件。',
+    tag: '供水调度',
+  },
+  'network-asset-leakage': {
+    title: '制定管网漏损治理计划',
+    subtitle: '从水量平衡到 DMA、压力和资产更新闭环',
+    task: '请制定管网漏损治理计划。先建立供水量与售水量的水量平衡，再区分计量误差、数据处理、合法未计量、非法用水和真实漏损，最后给出验证动作、优先级、指标和复盘周期。',
+    tag: '漏损治理',
+  },
+  'inspection-repair': {
+    title: '组织一次爆管抢修与保供',
+    subtitle: '覆盖前 30 分钟、恢复条件和用户通知',
+    task: '请针对一起供水管网爆管事件编制处置清单。先给前 30 分钟行动，再给隔离、抢修、检测、复水、用户通知和复盘安排，并明确责任岗位、启动条件、完成时限和现场待核实项。',
+    tag: '应急抢修',
+  },
+  'plant-water-quality': {
+    title: '排查出厂水质异常',
+    subtitle: '按原水—工艺—出厂—管网链路定位风险',
+    task: '请排查一次出厂水质异常。按“风险等级—数据有效性—原因排序—补测与现场核查—立即控制—恢复验证—长期预防”输出，注明采样点、时间、标准依据和不确定性。',
+    tag: '水质诊断',
+  },
+  'drainage-sewage-ops': {
+    title: '诊断排水与污水运营异常',
+    subtitle: '把现象、指标、验证步骤和处置建议串成闭环',
+    task: '请诊断一项排水或污水运营异常，按“现象—关键指标—可能原因—验证步骤—临时措施—恢复条件—长期改进”输出；区分日常养护、小修和改造事项。',
+    tag: '排水运营',
+  },
+  'flood-control-pumping': {
+    title: '制定防汛排涝泵站响应方案',
+    subtitle: '结合雨情、水情、设施能力和队伍资源分级调度',
+    task: '请制定防汛排涝响应方案。先判断当前风险等级，再给未来一至三小时的滚动行动清单，按区域、设施、队伍、物资、交通和信息报送分工，并写明升级与解除条件。',
+    tag: '防汛调度',
+  },
+  'energy-equipment-ops': {
+    title: '分析水务设备能耗异常',
+    subtitle: '定位泵组、风机、加药和运行组合的节能机会',
+    task: '请分析一项水务设备能耗异常，输出现象、可能原因、验证数据、立即措施、后续措施和节能项目基线；写清公式、边界、单位、停机窗口和回退条件。',
+    tag: '设备节能',
+  },
+  'construction-safety': {
+    title: '建立水务工程安全检查清单',
+    subtitle: '把风险、责任、整改时限和验收证据落到现场',
+    task: '请为一项水务工程建立安全与质量检查清单，按风险事件、触发条件、可能后果、控制措施、责任人、整改时限和验收证据组织，注明必须现场核验的事项。',
+    tag: '工程安全',
+  },
+  'smart-water-standards': {
+    title: '做一次智慧水务标准合规对照',
+    subtitle: '把条款要求映射到设计、采购、实施和验收证据',
+    task: '请对指定智慧水务项目做标准合规对照，输出适用标准清单、条款要求、当前做法、符合性、证据、差距和整改建议；无法确认现行性的文件标注待核验。',
+    tag: '标准合规',
+  },
+  'water-pricing': {
+    title: '论证一次水价调整方案',
+    subtitle: '明确成本口径、用户影响、程序要求和敏感性',
+    task: '请论证一次水价调整方案，先列政策与数据基础，再比较方案、测算成本和用户影响，最后给出程序要求、风险沟通和实施评估；所有假设标明基准年、单位和来源。',
+    tag: '水价论证',
+  },
+  'group-management-assistant': {
+    title: '设计水务集团年度经营考核',
+    subtitle: '统一指标口径、数据来源、权重和改进闭环',
+    task: '请设计水务集团年度经营考核方案，输出指标体系、定义与口径、数据来源、权重、考核周期、评分规则、异常处理和改进闭环，并指出需要管理层确认的事项。',
+    tag: '经营考核',
+  },
+  'procurement-contract-risk': {
+    title: '审查水务采购与合同风险',
+    subtitle: '按条款、流程、证据和责任界面形成风险清单',
+    task: '请审查一份水务采购或合同方案，输出风险清单、条款依据、风险等级、可能后果、修改建议、流程节点和需补充的证据；不要替代法务作最终结论。',
+    tag: '合同风控',
+  },
+  'hr-performance': {
+    title: '设计水务企业绩效改进方案',
+    subtitle: '把岗位目标、指标口径、反馈和复盘机制连起来',
+    task: '请设计一套水务企业绩效改进方案，先明确组织目标和岗位边界，再给指标、数据来源、评分规则、反馈节奏、申诉机制和复盘安排，区分待确认的制度前提。',
+    tag: '绩效管理',
+  },
+  'admin-party-affairs': {
+    title: '起草一份规范的行政与党群材料',
+    subtitle: '先梳理事实和结构，再输出可直接修改的初稿',
+    task: '请根据我提供的素材起草行政或党群材料，先列事实缺口和结构，再给出正文初稿、标题备选、需核验的名称日期和可替换段落；不要补造事实。',
+    tag: '材料起草',
+  },
+  'customer-service': {
+    title: '优化供水客服工单处置流程',
+    subtitle: '覆盖分级、时限、回访、升级和服务口径',
+    task: '请优化一套供水客服工单流程，输出问题分类、分级标准、响应与解决时限、责任岗位、升级条件、回访口径和服务质量指标，并标出需要结合现行制度核对的内容。',
+    tag: '客服运营',
+  },
+  'metering-revenue': {
+    title: '排查抄收营收与对账差异',
+    subtitle: '沿户、表、量、价、费、款逐环节定位问题',
+    task: '请排查一项抄收营收或财务对账差异，按客户/账户、异常类型、判断依据、风险、核查动作和处理状态输出，并写清统计时点、单位和未纳入因素。',
+    tag: '营收对账',
+  },
+  'benchmarking': {
+    title: '建立水务企业对标分析框架',
+    subtitle: '先统一口径，再解释差距来源和改进目标',
+    task: '请建立水务企业对标分析框架，输出标杆选择条件、指标定义、数据口径、可比性限制、差距归因、优先改进目标和验证周期，不把单一案例当作行业平均。',
+    tag: '对标分析',
+  },
+  'data-analysis': {
+    title: '把水务业务数据转成决策结论',
+    subtitle: '从清洗、口径、分析到可视化和行动建议',
+    task: '请为一份水务业务数据设计分析方案，输出数据质量检查、指标定义、分析方法、可视化结构、异常解释、结论边界和下一步行动；明确哪些结论需要补充数据验证。',
+    tag: '数据分析',
+  },
+  'evaluation-assistant': {
+    title: '设计项目或成果评估框架',
+    subtitle: '让评分标准、证据、权重和结论可复核',
+    task: '请设计一个水务项目或成果评估框架，输出评价目标、维度、指标、评分规则、权重、证据要求、打分表和结论模板，并区分事实、判断和待验证事项。',
+    tag: '项目评估',
+  },
+  'meeting-minutes': {
+    title: '把会议记录整理成可执行清单',
+    subtitle: '提炼决议、责任人、时限、依赖和验收标准',
+    task: '请把以下会议记录整理成结构化纪要，先给会议结论，再列任务、责任人、完成时限、前置依赖、验收标准和待确认事项；不要把讨论意见误写成已确认决议。',
+    tag: '会议纪要',
+  },
+  'work-report': {
+    title: '把工作进展写成管理层汇报',
+    subtitle: '突出结果、证据、问题、风险和下一步动作',
+    task: '请把以下工作素材整理成管理层汇报，输出标题、结论摘要、已完成成果、数据证据、问题与风险、需要协调的事项和下一步计划；缺少数据的地方标注待补。',
+    tag: '工作汇报',
+  },
+  'article-writing': {
+    title: '写一篇有证据的水务行业文章',
+    subtitle: '先给标题与结构，再输出可核验正文',
+    task: '请围绕给定主题写一篇水务行业文章，先给标题备选和文章结构，再给正文；核对数字、时间、机构和政策名称，不确定的信息标注待核实。',
+    tag: '文章创作',
+  },
+  'video-script': {
+    title: '把水务主题改成短视频脚本',
+    subtitle: '按镜头、画面、口播和节奏输出可拍版本',
+    task: '请把以下水务主题改写成短视频脚本，输出目标受众、时长、分镜、画面、口播、字幕、转场和结尾行动引导；不要虚构案例数据。',
+    tag: '视频脚本',
+  },
+  'award-application': {
+    title: '提炼水务项目奖项申报亮点',
+    subtitle: '把问题、做法、成效和佐证材料一一对应',
+    task: '请根据真实素材整理奖项申报框架，输出匹配度、材料缺口、核心亮点、问题—做法—创新—成效—证据—推广条件对照表，以及佐证材料清单；没有证据的亮点列为待补。',
+    tag: '奖项申报',
+  },
+  'event-planning': {
+    title: '策划一次水务主题活动',
+    subtitle: '从目标、流程、人员、预算到风险预案完整展开',
+    task: '请策划一次水务主题活动，输出目标与受众、流程、时间表、人员分工、物料、预算框架、宣传内容、现场风险和复盘指标；标出需要主办方确认的信息。',
+    tag: '活动策划',
+  },
+  'summarization': {
+    title: '把长材料压缩成决策摘要',
+    subtitle: '保留结论、证据、争议和待办，不丢关键限定条件',
+    task: '请把以下长材料整理成决策摘要，输出三条以内结论、关键证据、争议与不确定性、对业务的影响和待办事项；保留原文中的限定条件，不补写材料没有的事实。',
+    tag: '总结摘要',
+  },
+  'excel-formula': {
+    title: '生成可复核的 Excel 处理方案',
+    subtitle: '先确认表结构，再给公式、示例和异常处理',
+    task: '请根据表头和示例数据生成 Excel 处理方案，先确认字段含义，再给公式、适用范围、示例结果、空值与异常处理和验证方法；不要假设未提供的列。',
+    tag: '表格自动化',
+  },
+  'it-coding': {
+    title: '定位报错并给出可验证的修复',
+    subtitle: '先解释根因，再给最小改动、验证命令和回滚方式',
+    task: '请分析以下代码或日志，先判断最可能的根因和证据，再给最小改动方案、完整修改片段、验证命令、预期结果和回滚方式；不确定的环境信息列出来。',
+    tag: '开发调试',
+  },
+}
+
+const RECOMMENDATION_TASKS = {
+  supply: RECOMMENDATION_TEMPLATES['water-source-dispatch'],
+  drainage: RECOMMENDATION_TEMPLATES['drainage-sewage-ops'],
+  quality: RECOMMENDATION_TEMPLATES['plant-water-quality'],
+  digital: RECOMMENDATION_TEMPLATES['smart-water-assistant'],
+  policy: RECOMMENDATION_TEMPLATES['smart-water-standards'],
+  operations: RECOMMENDATION_TEMPLATES['customer-service'],
+  management: RECOMMENDATION_TEMPLATES['group-management-assistant'],
+  general: RECOMMENDATION_TEMPLATES['meeting-minutes'],
+}
+
+const RECOMMENDATION_DIVISION_IMAGES = {
+  supply: 'water-source-dispatch',
+  drainage: 'drainage-sewage-ops',
+  quality: 'plant-water-quality',
+  digital: 'smart-water-assistant',
+  policy: 'smart-water-standards',
+  operations: 'customer-service',
+  management: 'group-management-assistant',
+  general: 'meeting-minutes',
+}
+
+const RECOMMENDATION_TEAM_IMAGES = new Set([
+  'smart-water-delivery-team',
+  'software-development-team',
+  'water-operations-team',
+])
+
+const REPORT_TEAM_SLUG = 'report-consulting-team'
+
+const REPORT_RECOMMENDATION_TEMPLATES = [
+  {
+    image: 'report-review',
+    title: '复盘十四五数字化建设',
+    subtitle: '从建设成效、问题根因到十五五行动建议',
+    task: '请按《十四五数字化回顾》固定模板开展报告。先建立资料台账、事实表、投资和指标口径，再按“数字化建设总体情况与综合评价、六大体系建设成效评估、分子公司/业务板块建设情况评估、存在问题与原因分析、经验启示与典型案例、面向十五五的工作思路与行动建议”连续撰写。每章承接前章，缺失数字标注待补，最后同步给出执行摘要、图表清单、Word结构、PPT大纲和Excel数据表建议。',
+    tag: '十四五回顾',
+  },
+  {
+    image: 'report-assessment',
+    title: '形成数字化现状与需求报告',
+    subtitle: '按七大章节梳理业务、系统、数据和治理诊断',
+    task: '请按《数字化现状总结与需求分析报告》固定模板开展报告。严格沿用七章结构：项目概述、集团战略理解、业务分析与诊断、数字化现状评估、数字化现状调研总结、数字化建设对标分析、数字化转型建设需求及主要问题总结。先整理资料依据和缺口，再按章节连续写作，统一术语与数据口径，区分事实、判断和待确认项，最后输出需求优先级、执行摘要及Word/PPT/Excel交付设计。',
+    tag: '现状诊断',
+  },
+  {
+    image: 'report-plan',
+    title: '规划数字化建设总体蓝图',
+    subtitle: '把战略、架构、治理和标准串成可落地计划',
+    task: '请按《数字化建设计划》固定模板开展总体规划报告。严格沿用八章结构：总体战略与总体蓝图设计、应用架构设计、数据资源架构设计、基础设施架构设计、信息安全架构设计、IT治理架构设计、标准体系架构设计、总体规划报告编制与交付要求。围绕“战略目标—总体蓝图—应用体系—数据底座—基础设施—安全防护—治理标准—规划交付”连续展开，不虚构投资、系统数量或成熟度，最后同步给出蓝图图表、项目卡片、PPT汇报页和Excel项目台账字段。',
+    tag: '建设规划',
+  },
+]
+
+function recommendationImage(name, version = '') {
+  const query = new URLSearchParams({ name })
+  if (version) query.set('v', version)
+  return `/api/waterbuddy/recommendations/image?${query}`
+}
+
+/** 兜底卡片（接口不可用时用，同样是真实任务，不是占位文案）。 */
+const RECOMMENDATION_SEEDS = [
+  { title: '拆解智慧水务标杆案例', subtitle: '对比建设要点、成效证据和适用条件', prompt: '请拆解一个典型智慧水务案例，按“问题—方案—实施—成效—依赖条件—可迁移做法—风险”输出，并区分已核实事实与待验证信息。', tag: '案例研究', image: recommendationImage('smart-water-case-expert') },
+  { title: '制定管网漏损治理路径', subtitle: '从水量平衡、分区计量到持续复盘', prompt: '请制定水务企业管网漏损治理路径，先建立水量平衡，再给分区计量、压力管理、主动检漏、表务治理和效果验证的分阶段计划。', tag: '漏损治理', image: recommendationImage('network-asset-leakage') },
+  { title: '规划智慧水厂改造方案', subtitle: '从现状盘点到分阶段实施与验收', prompt: '请规划智慧水厂改造方案，先列现状与数据缺口，再输出目标架构、一期闭环、实施阶段、投资假设、风险和验收指标。', tag: '水厂建设', image: recommendationImage('smart-water-assistant') },
+  { title: '编制防汛排涝联动预案', subtitle: '明确预警、调度、队伍和信息报送', prompt: '请编制城市防汛排涝联动预案，输出风险分级、启动条件、设施与队伍调度、交通和信息报送分工，以及升级、解除和复盘条件。', tag: '防汛调度', image: recommendationImage('flood-control-pumping') },
+]
+
+let recommendationItems = null
+
+function recommendationPickFour(list, cursor) {
+  const size = Math.min(4, list.length)
+  return Array.from({ length: size }, (_, index) => list[(cursor + index) % list.length])
+}
+
+/** 由名册快照生成卡片：专家团在前，其次是各专家 —— 任务文本按分区区分，不再所有卡片一个句式。 */
+function recommendationFromRoster(roster) {
+  const items = []
+  for (const team of roster.teams || []) {
+    if (team.slug === REPORT_TEAM_SLUG) {
+      for (const template of REPORT_RECOMMENDATION_TEMPLATES) {
+        items.push({
+          title: template.title,
+          subtitle: template.subtitle,
+          task: template.task,
+          prompt: '@' + team.name + ' ' + template.task,
+          tag: template.tag,
+          expert: team,
+          avatar: team.avatar || '',
+          emoji: team.emoji || '📊',
+          image: recommendationImage(template.image, roster.version),
+        })
+      }
+      continue
+    }
+    const members = (team.members || []).map(member => member.name || member.slug).filter(Boolean)
+    const focus = (team.description || '').trim()
+    items.push({
+      title: '协同评估一个智慧水务项目',
+      subtitle: members.length > 0 ? `${members.length} 位专家协同：${members.slice(0, 3).join('、')}` : (focus || '专家团'),
+      task: '请协同评估一个智慧水务项目，分别输出需求、方案、投资、实施风险和待核实信息，最后汇总推荐路径与下一步行动。',
+      prompt: `@${team.name} 请协同评估一个智慧水务项目，分别输出需求、方案、投资、实施风险和待核实信息，最后汇总推荐路径与下一步行动。`,
+      tag: '专家团',
+      expert: team,
+      avatar: team.avatar || '',
+      emoji: team.emoji || '团',
+      image: recommendationImage(RECOMMENDATION_TEAM_IMAGES.has(team.slug) ? team.slug : 'smart-water-assistant', roster.version),
+    })
+  }
+  for (const expert of roster.experts || []) {
+    // 名册的 experts 里**已经包含专家团**（expertType/kind = team），而上面 teams 那一轮
+    // 已经推过它们 —— 不过滤就会一份数据两张卡，"换一批"时重复项反复出现（实测 bug）。
+    if (expert.expertType === 'team' || expert.kind === 'team') continue
+    if (expert.enabled === false) continue
+    const template = RECOMMENDATION_TEMPLATES[expert.slug] || RECOMMENDATION_TASKS[expert.division] || RECOMMENDATION_TASKS.general
+    items.push({
+      title: template.title,
+      subtitle: `${expert.name} · ${template.subtitle}`,
+      task: template.task,
+      prompt: `@${expert.name} ${template.task}`,
+      tag: template.tag || expert.divisionName || '专家',
+      expert,
+      avatar: expert.avatar || '',
+      image: recommendationImage(Object.hasOwn(RECOMMENDATION_TEMPLATES, expert.slug) ? expert.slug : (RECOMMENDATION_DIVISION_IMAGES[expert.division] || 'meeting-minutes'), roster.version),
+      emoji: expert.emoji || (expert.name || '').slice(0, 1),
+    })
+  }
+  return items
+}
+
+async function recommendationLoad() {
+  if (recommendationItems) return recommendationItems
+  try {
+    const response = await fetch('/api/waterbuddy/experts', { headers: { accept: 'application/json' } })
+    const roster = await response.json()
+    const items = recommendationFromRoster(roster)
+    if (items.length > 0) {
+      recommendationItems = items
+      return items
+    }
+  } catch (error) {
+    console.warn('[WaterBuddy] recommendations: roster unavailable, using seeds', error)
+  }
+  recommendationItems = RECOMMENDATION_SEEDS
+  return recommendationItems
+}
+
+/**
+ * 新会话页的推荐任务区。
+ *
+ * 位置（方案 B）：官方空态页的输入框**下方没有槽位** —— conversation.composer.dock 要求
+ * sessionId 且 variant='composer'（hero 态都不成立），conversation.hero.agentPreset 已被官方
+ * ui-agent-preset 占用。所以本组件挂在 hero 品牌槽位上（保证只在空态挂载），但内容用 React
+ * portal 渲染到 composer 栈**之后**的容器里 —— 原地不留空壳，标题行不会被挤，官方重渲染时由
+ * MutationObserver 重新挂回。
+ */
+function RecommendationDock() {
+  const { useEffect, useState } = require('react')
+  // 插件的客户端模块表不一定提供 react-dom；取不到就整体不渲染（绝不让插件加载失败）
+  let createPortal = null
+  try {
+    const reactDom = require('react-dom')
+    createPortal = reactDom && reactDom.createPortal
+  } catch (error) {
+    console.warn('[WaterBuddy] recommendations: react-dom unavailable', error)
+  }
+  const [items, setItems] = useState(null)
+  const [cursor, setCursor] = useState(0)
+  const [target, setTarget] = useState(null)
+  const [isOwner] = useState(() => {
+    if (typeof window === 'undefined') return true
+    if (window.__WB_RECOMMENDATIONS_OWNER__) return false
+    window.__WB_RECOMMENDATIONS_OWNER__ = true
+    return true
+  })
+
+  useEffect(() => () => {
+    if (isOwner && typeof window !== 'undefined' && window.__WB_RECOMMENDATIONS_OWNER__) {
+      delete window.__WB_RECOMMENDATIONS_OWNER__
+    }
+  }, [isOwner])
+
+  useEffect(() => {
+    if (!isOwner) return undefined
+    let cancelled = false
+    recommendationLoad().then(list => { if (!cancelled) setItems(list) }).catch(() => {})
+    return () => { cancelled = true }
+  }, [isOwner])
+
+  useEffect(() => {
+    if (!isOwner) return undefined
+    if (typeof document === 'undefined' || typeof MutationObserver !== 'function') return undefined
+    const ATTR = 'data-waterbuddy-recommendations-host'
+    const ensure = () => {
+      const stack = document.querySelector('[class*="composerHero"]') || document.querySelector('[class*="composerStack"]')
+      const parent = stack && stack.parentElement
+      if (!parent) return
+      let host = document.querySelector('[' + ATTR + ']')
+      if (!host) {
+        host = document.createElement('div')
+        host.setAttribute(ATTR, '1')
+      }
+      document.querySelectorAll('[' + ATTR + ']').forEach(candidate => {
+        if (candidate !== host) candidate.remove()
+      })
+      if (host.parentElement !== parent || host.previousElementSibling !== stack) stack.after(host)
+      setTarget(current => (current === host ? current : host))
+    }
+    ensure()
+    const observer = new MutationObserver(ensure)
+    observer.observe(document.body, { childList: true, subtree: true })
+    return () => observer.disconnect()
+  }, [isOwner])
+
+  if (!isOwner || !createPortal || !target || !items || items.length === 0) return null
+  const visible = recommendationPickFour(items, cursor)
+
+  const pick = item => {
+    // 先走宿主引用：插真 chip（与手动 @ 选择专家团完全同形），插不进去才退回纯文本。
+    if (typeof window !== 'undefined' && typeof window.__WB_SUMMON_TASK__ === 'function' && item.expert) {
+      try {
+        // 插 chip + 补正文都要成功才算完成（只插 chip 等于丢正文）
+        if (window.__WB_SUMMON_TASK__(item.expert, item.task || '') === true) return
+      } catch (error) {
+        console.warn('[WaterBuddy] recommendations: summon with task failed', error)
+      }
+    }
+    const actions = typeof window !== 'undefined' ? window.__WB_INPUT_ACTIONS__ : null
+    if (actions && typeof actions.setDraft === 'function') actions.setDraft(item.prompt)
+  }
+
+  // 注意：jsx/jsxs 的第三个参数是 key，不是 children —— children 必须放进 props.children，
+  // 否则真实运行时什么都不渲染（卡片会只剩空框，本插件早期已踩过同一个坑）。
+  // 卡片（对齐参考图）：**图就是卡片** —— 圆角图片直接铺满，标题放在图下面、无白底卡片框。
+  // key 必须**全局唯一**：同一分区/同一模板的卡片标题会重复（3 个专家团标题完全相同），
+  // 用 title+tag 当 key 会让 React 复用节点、旧卡片不被移除 —— 表现就是"换一批越点越多"（实测）。
+  const card = (item, index) => jsxs('button', {
+    type: 'button',
+    key: `${index}:${(item.expert && (item.expert.slug || item.expert.name)) || item.title}`,
+    onClick: () => pick(item),
+    'aria-label': `${item.title}：${item.subtitle || ''}`,
+    title: item.subtitle || item.title,
+    style: {
+      flex: '1 1 0', minWidth: 0, textAlign: 'left', cursor: 'pointer', padding: 0,
+      border: 0, background: 'transparent', display: 'flex', flexDirection: 'column', gap: 8,
+    },
+    children: [
+      jsx('span', {
+        style: {
+          height: 136, flex: 'none', borderRadius: 14, overflow: 'hidden',
+          background: 'linear-gradient(135deg,#eaf3ff,#f7fbff)',
+          backgroundImage: item.image ? `url("${item.image}")` : undefined,
+          backgroundSize: 'cover', backgroundPosition: 'center',
+          display: item.image ? 'block' : 'flex', alignItems: 'center', justifyContent: 'center',
+          boxShadow: '0 1px 2px rgba(15,23,42,.05)',
+        },
+        children: item.image
+          ? null
+          : (item.avatar
+              ? jsx('img', { src: item.avatar, alt: item.title, style: { width: 52, height: 52, borderRadius: 14, objectFit: 'cover', background: '#fff' } })
+              : jsx('span', { style: { width: 52, height: 52, borderRadius: 14, background: '#fff', color: '#2563eb', fontSize: 22, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: item.emoji || '水' })),
+      }),
+      jsx('span', {
+        style: { fontSize: 13, fontWeight: 650, color: '#162033', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+        children: item.title,
+      }),
+      jsx('span', {
+        style: { minHeight: 32, fontSize: 11.5, lineHeight: 1.45, color: '#718096', display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: 2, overflow: 'hidden' },
+        children: item.subtitle || item.tag || '',
+      }),
+    ],
+  })
+
+  return createPortal(
+    // 宽度对齐输入框：复用宿主自己的两个 CSS 变量（会话根节点上定义，逐级继承）。
+    // 外层宽度 = 卡片上限 + 两侧 clearance，内边距 = clearance —— 与官方 hero 容器的算法完全一致，
+    // 这样推荐区的内容左右边缘与输入卡片严格对齐，且随宿主响应式规则一起变。
+    jsxs('div', {
+      style: {
+        width: 'min(calc(var(--dsh-composer-card-max-width, 952px) + 2 * var(--dsh-composer-side-clearance, 16px)), 100%)',
+        margin: '18px auto 0',
+        padding: '0 var(--dsh-composer-side-clearance, 16px)',
+        boxSizing: 'border-box',
+      },
+      children: [
+      jsxs('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }, children: [
+        jsx('span', { style: { fontSize: 13, fontWeight: 600, color: '#162033' }, children: '不知道从哪开始？试试这些水务工作模板' }),
+        jsx('button', {
+          type: 'button',
+          onClick: () => setCursor(current => current + 4),
+          style: { marginLeft: 'auto', border: '1px solid #e3ebf7', background: '#fff', color: '#2563eb', fontSize: 12.5, cursor: 'pointer', padding: '4px 12px', borderRadius: 999 },
+          children: '换一批',
+        }),
+      ] }),
+      jsx('div', { style: { display: 'flex', gap: 10 }, children: visible.map((item, index) => card(item, index)) }),
+    ] }),
+    target,
+  )
+}
     const inject = ['slots', 'inputTriggers']
     function apply(ctx) {
       ctx.effect(() => {
@@ -1592,7 +2367,6 @@ window.__ModuleLoader__.load({
           //   b. 必须允许 wrap —— 宿主默认 nowrap，放不下时会**裁掉**最后一个子元素（「设置」消失）；
           //   c. 我们自己那部分必须能收缩且足够窄 —— 行是"放得下才成立"，宽度只由我们的卡片贡献。
           // 三个条件都满足时：放得下 → 一行；放不下 → 优雅换成两行，且绝不丢元素。
-          '[class*="footArea"]{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;gap:8px}',
 
           // **关键的一半，前几轮都漏了**：宿主 `SidebarRoot.module.css` 里
           //
@@ -1604,8 +2378,6 @@ window.__ModuleLoader__.load({
           // 账号卡那一侧**吃掉剩余空间**（用户区占满整行），设置区保持自身宽度 →
           // 被自然推到最右。两者都是局部类名，不碰祖先；设置区 flex 为 0 0 auto，
           // 所以卡片再胖也不会挤到它。
-          '[class*="footerActions"]{width:auto!important;flex:1 1 auto!important;min-width:0!important}',
-          '[class*="settingsArea"]{width:auto!important;flex:0 0 auto!important;min-width:0!important}',
 
           // 以下是最初的写法记录（保留以免重复踩坑）：
           //
@@ -1636,7 +2408,7 @@ window.__ModuleLoader__.load({
           yield ctx.slots.register({ name: 'sidebar.brand.mark', priority: -10 }, WaterBuddyMark)
           yield ctx.slots.register({ name: 'sidebar.brand.name', priority: -10 }, WaterBuddyName)
         }))
-      ctx.slots.inject('sidebar.footer.action', () => ctx.slots.register({ name: 'sidebar.footer.action', id: 'waterbuddy-user', order: 90, label: '登录 WaterPlusAI' }, UserAction))
+      ctx.slots.inject('sidebar.footer.action', () => ctx.slots.register({ name: 'sidebar.footer.action', id: 'waterbuddy-user', order: 90, label: '登录 水务之窗' }, UserAction))
       ctx.slots.inject('settings.onboarding', () => ctx.slots.register({ name: 'settings.onboarding', id: 'welcome-notice', priority: -1000, order: -100 }, SkipWelcomeNotice))
       // 专家名册页：在设置左侧列出一项「专家」。`label` 用纯字符串——本插件的界面文案
       // 都是硬编码中文，没有走宿主词典（见 AGENTS.md 的产物面边界）。
@@ -1690,11 +2462,13 @@ window.__ModuleLoader__.load({
           }
         }
         swap(document.body)
-        const observer = new MutationObserver(() => swap(document.body))
+        const observer = new MutationObserver(() => { swap(document.body); patchWaterbuddyMenu(); patchWaterbuddyTrigger() })
         observer.observe(document.body, { childList: true, subtree: true })
         return () => observer.disconnect()
       }, 'waterbuddy: hero headline')
 
+      ctx.effect(() => startWaterbuddyMenu(), 'waterbuddy: settings account entry')
+
       // 会话输入框左侧的专家入口。`inject` 是宿主支持的 slot owner 注入：框架按会话调用它，
       // 把返回值并进组件 props——我们的实现靠它拿到当前会话的输入机，才能写原生引用 chip。
       ctx.slots.inject('conversation.input.left', () => ctx.slots.register({
@@ -1714,6 +2488,22 @@ window.__ModuleLoader__.load({
             if (expertDraftBodyIsEmpty(target)) appendExpertTaskExample(target, expert)
             return true
           },
+          /** 推荐卡片用：插 chip 之后补上卡片那句任务正文（插引用 + 补正文，两步都不省）。 */
+          summonExpertWithTask: (reference, expert, task) => {
+            const target = resolveExpertInputTarget(ctx, sessionId)
+            if (target === undefined) return false
+            // 顺序很关键：setDraft 会清掉草稿里已有的引用节点（实测：只剩 @名字 纯文本，
+            // 药丸消失），所以没有 insertText 的内核必须**先写正文、再插引用**，
+            // 这样 chip 与正文两半都在（chip 落在正文之后）。
+            if (typeof task === 'string' && task.trim() !== '' && typeof target.setDraft === 'function'
+              && !appendExpertTaskText(target, task)) {
+              target.setDraft(task)
+            }
+            const inserted = insertExpertReference(target, reference)
+            // 光标移到末尾：宿主没有光标接口，只能延后一拍在编辑器上折叠选区
+            if (inserted) setTimeout(moveExpertCaretToEnd, 0)
+            return inserted
+          },
         }),
       }, ExpertInputEntry))