weflow-cli 1.7.0 → 1.8.1

package/resources/panel/quick-menu.cjs

@@ -0,0 +1,197 @@
+/**
+ * 右键菜单的**内容**：纯数据 + 回调，不 require electron。
+ *
+ * 为什么单独一个文件：菜单里的点击在 CI 里点不了，但**"有哪几项、点了各自该干什么"是我们的代码**，
+ * 而 `Menu.buildFromTemplate` + `popup` 那一步才是 Electron 的。拆开之后这个函数能被测试直接
+ * require 进来、把每个 `click` 真的调一遍——比拿正则去匹配源码文本结实得多（同 `tray-menu.cjs`）。
+ *
+ * **为什么球形态下用原生菜单而不是页内那个**：原生菜单画在**窗口外面**，所以球那 76x76 的
+ * 窗口不用先展开成对话窗——用户的原话是"右键应该算是快速功能"，而"顺手把窗口弹出来"恰好
+ * 是他要避免的那一下。页内菜单留给浏览器降级那条路（那条路没有 Electron，也就没有原生菜单，
+ * 而它的窗口是正常的浏览器窗，画得下）。
+ *
+ * 菜单有两段：**起草回复**（联系人名单）与**快捷功能**（固定动作）。第二段是后加的，
+ * 加它的判据只有一条：**这个动作能不能用一句固定的话做完**。要打字才能用的（搜索、导出、
+ * 指定某条消息）做不成一键，不许往这里塞——塞进来只会做出一个点了没反应的菜单项。
+ *
+ * 一条不能松的语义：**代价写在菜单里**，而且**逐项说清**（见 `costNote()`）。点一下 = 一次
+ * 出境这件事必须在菜单里看得见，而不是点完才知道；反过来，"这几项其实只读本地"也该看得见，
+ * 否则用户会不敢点本地那几项。
+ *
+ * 最后一项是**「关闭悬浮球」**，它是这个菜单里唯一不碰 AI 的一项。三条取舍：
+ * - 它是 `win.hide()`（收起来），**不是退出**。退出面板 / 退出并停止助手属于"退出"那一类，
+ *   在托盘菜单里（`tray-menu.cjs` 把它们和"显示 / 展开"分隔开了），这里塞进来就把两类混了。
+ * - 所以它**可逆**，而收回来的路（托盘图标）必须写在标签里——球藏起来以后任务栏没有它的位置
+ *   （`setSkipTaskbar(true)`），不写清楚就成了"点一下它永远消失了"。
+ * - **任何情况下它都在**：名单没配过、快捷功能全不可用时，用户照样得有个办法把球收起来。
+ */
+'use strict'
+
+/** 菜单最多列几个人。窗口小、名单可能很长，超出部分不该把菜单撑成一整屏 */
+const MAX_ITEMS = 20
+
+/** 名单为空时菜单显示的两行：说清没配，并给出该跑的那条命令 */
+const EMPTY_HINT = [
+  '还没配名单',
+  'weflow-cli config set quickReplyContacts "某人,另一人"',
+]
+
+/**
+ * 收起来那一项的标签。括号里那句**不是凑字数的**：球藏起来之后任务栏里没有它
+ * （`setSkipTaskbar(true)`），不写出"托盘图标能再打开"，这一项看上去就像"永久关掉"。
+ */
+const CLOSE_LABEL = '关闭悬浮球（托盘图标能再打开）'
+
+/** 两段的段头。**不可点**：它们是分组，不是按钮 */
+const REPLY_SECTION = '起草回复'
+const ACTION_SECTION = '快捷功能'
+
+/**
+ * 快捷功能。每一项 = 一句固定的话 + 一句给人看的标签。
+ *
+ * `prompt` **随菜单项一起回传**（经 `panel:quickMenu` 的返回值到页面），页面不另存一份
+ * id→话术的映射：两份映射一定会漂移，而漂移的那种失败是"菜单写着甲、点下去做了乙"，
+ * 不报错、只有读代码才发现。
+ *
+ * `cloud` 只用来生成提示（`costNote()`），不影响行为——但这些话术**要么点了就调模型**，
+ * 要么**纯本地**，没有中间态，所以一个布尔值够用。
+ *
+ * 措辞里点名工具（"用 who_owes_reply 看一遍"）是必要的：助手是在 19 个工具里自己选，
+ * 不点名时"谁在等我回话"这种话它可能去调 `search_chats` 凑答案。**这仍是靠模型选对工具**，
+ * 不是硬绑定——真出现选错的情况再谈加参数。
+ */
+const ACTIONS = [
+  {
+    id: 'who_owes_reply',
+    label: '谁在等我回话',
+    cloud: true,
+    prompt: '用 who_owes_reply 逐会话看一遍：谁在等我回话？只列真的欠着回复的，每条写清是对方和该回什么。',
+  },
+  {
+    id: 'get_todos',
+    label: '我的待办',
+    cloud: false,
+    prompt: '用 get_todos 把我的待办列出来，按紧急程度排。',
+  },
+  {
+    id: 'get_daily_report',
+    label: '今日日报',
+    cloud: false,
+    prompt: '用 get_daily_report 说说最新一期日报里有什么。',
+  },
+  {
+    id: 'get_stats',
+    label: '最近统计',
+    cloud: false,
+    prompt: '用 get_stats 说说我最近的聊天统计。',
+  },
+  {
+    id: 'get_reading_stats',
+    label: '阅读统计',
+    cloud: false,
+    prompt: '用 get_reading_stats 说说我的阅读情况。',
+  },
+  {
+    id: 'list_sessions',
+    label: '最近会话',
+    cloud: false,
+    prompt: '用 list_sessions 列出我最近的会话。',
+  },
+  {
+    id: 'get_sns',
+    label: '朋友圈',
+    cloud: false,
+    prompt: '用 get_sns 说说我朋友圈最近有什么。',
+  },
+  {
+    id: 'get_weread',
+    label: '微信读书',
+    cloud: false,
+    prompt: '用 get_weread 说说我微信读书的最近情况。',
+  },
+]
+
+/** 把名单规整成菜单项用的数组：只要非空字符串、去重、有上限 */
+function normalizeNames(labels) {
+  const seen = new Set()
+  const names = []
+  for (const raw of Array.isArray(labels) ? labels : []) {
+    if (typeof raw !== 'string') continue
+    const name = raw.trim()
+    if (!name || seen.has(name)) continue
+    seen.add(name)
+    names.push(name)
+    if (names.length >= MAX_ITEMS) break
+  }
+  return names
+}
+
+/**
+ * 代价那一行。**从 ACTIONS 派生，不写死**——写死的那种失败是"菜单加了功能、提示还停在旧话上"，
+ * 而不准确的代价提示比没有更糟：它让人以为已经被告知了。
+ *
+ * 起草回复（联系人名单）也要算进去：它是这个菜单里唯一**会把聊天正文发出去**的一项。
+ */
+function costNote(hasContacts) {
+  const cloud = []
+  if (hasContacts) cloud.push(REPLY_SECTION)
+  for (const action of ACTIONS) {
+    if (action.cloud) cloud.push(action.label)
+  }
+  if (!cloud.length) return '这些项都不调云端模型，只读本地'
+  return `会调云端模型的只有：${cloud.join('、')}；其余只读本地，不花钱`
+}
+
+/**
+ * @param {unknown} labels 名单（联系人名）
+ * @param {{
+ *   pick: (item: {kind: 'contact', name: string} | {kind: 'action', label: string, prompt: string}) => void,
+ *   close: () => void,
+ * }} actions 选中了哪一项 / 选了"收起来"。
+ *   关掉菜单这件事由调用方的 `popup({ callback })` 负责，这里不管。
+ *
+ * 两项都必填：少给一个就当场抛，而不是弹出一个点了没反应的菜单。
+ */
+function quickMenuTemplate(labels, actions) {
+  if (typeof actions?.pick !== 'function') {
+    throw new Error('quickMenuTemplate 需要一个 pick 回调')
+  }
+  if (typeof actions?.close !== 'function') {
+    throw new Error('quickMenuTemplate 需要一个 close 回调')
+  }
+  const names = normalizeNames(labels)
+  const closeItem = { label: CLOSE_LABEL, click: () => actions.close() }
+
+  const items = []
+  if (names.length) {
+    items.push({ label: REPLY_SECTION, enabled: false })
+    for (const name of names) {
+      items.push({ label: name, click: () => actions.pick({ kind: 'contact', name }) })
+    }
+  } else {
+    // 没配名单**不等于这个菜单没用**：下面那八个快捷功能照常给出，所以这里只是少了一段，
+    // 不是"空框"（第一版没有快捷功能时，这一段之后就直接是收起来，那才叫空框）。
+    items.push(...EMPTY_HINT.map(label => ({ label, enabled: false })))
+  }
+
+  items.push({ type: 'separator' }, { label: ACTION_SECTION, enabled: false })
+  for (const action of ACTIONS) {
+    items.push({
+      label: action.label,
+      click: () => actions.pick({ kind: 'action', label: action.label, prompt: action.prompt }),
+    })
+  }
+
+  items.push(
+    { type: 'separator' },
+    { label: costNote(names.length > 0), enabled: false },
+    { type: 'separator' },
+    closeItem,
+  )
+  return items
+}
+
+module.exports = {
+  MAX_ITEMS, EMPTY_HINT, CLOSE_LABEL, REPLY_SECTION, ACTION_SECTION,
+  ACTIONS, costNote, normalizeNames, quickMenuTemplate,
+}

package/resources/panel/renderer.js

@@ -0,0 +1,470 @@
+/**
+ * 面板的渲染层。**这是整条链路上最不可信的一层**——它显示的东西来自助手的回复，
+ * 而助手的回复里会有用户自己的聊天内容。所以两条死规矩：
+ *
+ * 1. **一律 `textContent`，绝不 `innerHTML`**。回复里出现 `<script>` 或 `<img onerror>` 之类的
+ *    内容时，用 innerHTML 就等于在那个窗口里执行它。这个窗口没有地址栏，用户看不出被导航走了。
+ * 2. **拿不到 token，也拿不到端口**：凭据在 `HttpOnly` cookie 里（脚本读不到），
+ *    请求只发相对路径 `/api/...`。所以这个文件里不该出现任何凭据相关的东西。
+ *
+ * 页面本身由守护进程从回环端点递过来（`GET /panel`），CSP 走响应头：`default-src 'none'` +
+ * `script-src 'self'`，所以也没有内联脚本、没有外部资源。
+ */
+'use strict'
+
+const log = document.getElementById('log')
+const input = document.getElementById('input')
+const send = document.getElementById('send')
+const statusEl = document.getElementById('status')
+const foot = document.getElementById('foot')
+
+const COPY_LABEL = '复制'
+const COPIED_LABEL = '已复制'
+const MANUAL_LABEL = '按 Ctrl+C'
+
+/** 把节点内容全选上。用于剪贴板 API 用不了时的退路 */
+function selectContents(node) {
+  const range = document.createRange()
+  range.selectNodeContents(node)
+  const selection = window.getSelection()
+  selection.removeAllRanges()
+  selection.addRange(range)
+}
+
+/**
+ * 助手回答下面的复制按钮。
+ *
+ * 为什么要有：起草回复那条路**只产出文本**——不碰微信窗口、不模拟按键（见 D-047），
+ * 所以"把这几条候选拿到别处去用"这一步只能由用户自己做，那就得让他一键拿得走。
+ * 它是**整条回答**的复制，不做"逐条候选分别复制"：候选是模型用自己的话重述过的，
+ * 在客户端按行去猜哪行是候选，猜错就是把半句话复制走。
+ *
+ * 反馈必须落在按钮自己身上（窗口只有巴掌大，用户不会去看别处）。
+ */
+function addCopyButton(turn, textNode, text) {
+  const button = document.createElement('button')
+  button.type = 'button'
+  button.className = 'copy'
+  button.textContent = COPY_LABEL
+  let timer = null
+  const flash = (label) => {
+    button.textContent = label
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(() => { button.textContent = COPY_LABEL }, 1500)
+  }
+  button.addEventListener('click', async () => {
+    try {
+      await navigator.clipboard.writeText(text)
+      flash(COPIED_LABEL)
+    } catch {
+      // 剪贴板 API 拿不到时**不许假装复制成功**：用户会以为剪贴板里有东西，粘出来
+      // 是上一次的旧内容——那比什么都不做更坏。改成把这段选上，让他自己按 Ctrl+C。
+      selectContents(textNode)
+      flash(MANUAL_LABEL)
+    }
+  })
+  turn.appendChild(button)
+}
+
+/** 把一条消息加进对话区。`who` 决定样式，**内容永远走 textContent** */
+function addTurn(who, text) {
+  const empty = log.querySelector('.empty')
+  if (empty) empty.remove()      // 第一句话一来，开头那段提示就该让位
+  const div = document.createElement('div')
+  div.className = 'turn ' + who
+  const body = document.createElement('div')
+  body.className = 'turn-text'
+  body.textContent = text
+  div.appendChild(body)
+  // 只有助手的回答带复制按钮：用户自己发的不用复制，"正在输入"没有内容可复制，
+  // 错误提示也不该被粘到别处去。
+  if (who === 'it') addCopyButton(div, body, text)
+  log.appendChild(div)
+  log.scrollTop = log.scrollHeight
+  return div
+}
+
+/**
+ * 还没聊过时的开头。**空白是这里最糟的状态**：第一次打开的人看到一整片黑，
+ * 既不知道它能干什么，也看不出它是活的（下面没有正在输入之类的动静）。
+ * 例子做成可点的按钮——点一下就是真的问一句，走的还是同一条提交路径。
+ */
+const EXAMPLES = [
+  '我最近都在忙什么？',
+  '总结我和某某的聊天',
+  '收藏里有哪些 AI 文章？',
+  '我最近都在读什么？',
+]
+
+function renderEmptyState() {
+  if (log.children.length) return
+  const box = document.createElement('div')
+  box.className = 'empty'
+
+  const title = document.createElement('div')
+  title.className = 'empty-title'
+  title.textContent = '直接问就行，我会查本机数据回答'
+  box.appendChild(title)
+
+  const sub = document.createElement('div')
+  sub.className = 'empty-sub'
+  sub.textContent = '聊天、收藏、公众号、微信读书、待办都在本机，数据库不出这台机器。'
+  box.appendChild(sub)
+
+  for (const example of EXAMPLES) {
+    const chip = document.createElement('button')
+    chip.type = 'button'
+    chip.className = 'chip'
+    chip.textContent = example
+    chip.addEventListener('click', () => {
+      if (input.disabled) return          // 上一句还在飞的时候点了没用，就不该有反应
+      input.value = example
+      document.getElementById('composer').requestSubmit()
+    })
+    box.appendChild(chip)
+  }
+  log.appendChild(box)
+}
+
+/**
+ * 球的背景跟着状态走（CSS 里 `body.busy/.offline/.quota #ball .glow`）。
+ *
+ * 集中在一个函数里改：之前这些类名散在 ask()/refreshStatus() 各处的话，
+ * 迟早有一条分支忘了摘掉 `busy`，球就一直亮着——那种"看起来在忙其实没在忙"比不显示更糟。
+ * 传进来的每一项都**整体替换**，不做增量。
+ */
+function setBallState(state) {
+  document.body.classList.remove('busy', 'offline', 'quota')
+  if (state) document.body.classList.add(state)
+}
+
+/** 服务端的状态码 → 一句人话。**别把 code 原样丢给用户** */
+function explain(code, fallback) {
+  switch (code) {
+    case 'BUSY': return '上一句还在处理，等它说完再发。'
+    case 'NOT_RUNNING': return '助手没在运行。在电脑上跑一次 `weflow-cli assistant start`。'
+    case 'QUOTA_EXCEEDED': return '今天的额度用完了。'
+    case 'TIMEOUT': return '这一轮太久没结束（它可能还在后台跑）。稍等一下再问。'
+    case 'UNAUTHORIZED': return '凭据失效了。重新用 `weflow-cli panel` 打开这个窗口。'
+    case 'ORIGIN_DENIED': return '这个来源被拒绝了。'
+    default: return fallback || ('没成（' + code + '）')
+  }
+}
+
+/** 已请求过几次自愈。成功会重载页面，这个计数自然归零 */
+let repairTries = 0
+
+/**
+ * 凭据失效时请主进程换一张。
+ *
+ * **为什么需要它**：token 是守护进程每次启动新生成的，而窗口的 cookie 是打开那一刻种的。
+ * 所以 `assistant stop/start` 之后，还开着的窗口手里是死凭据——`/api/status` 与**球的脸图**
+ * （`Cache-Control: no-store`）一起 401，表现是**球变成空白**。2026-09-28 实测到：窗口比守护
+ * 进程早 25 小时，用户看到的是"图标不见了"，而状态栏那句"凭据失效了"在球形态下根本没人看。
+ *
+ * 连试三次还不行就停手：**重载风暴比空白球更难排查**，剩下的交给状态栏那句话。
+ */
+async function requestRepair() {
+  if (repairTries >= 3) return
+  repairTries += 1
+  try {
+    const r = await weflowPanel.repair()
+    if (r && r.ok) return                       // 主进程会重载页面，这里不用做别的
+    if (r && r.code === 'DAEMON_DOWN') {
+      statusEl.textContent = '助手没在运行。先在终端跑 weflow-cli assistant start。'
+    }
+  } catch {
+    // 主进程没接上就算了这个（例如旧版 preload），状态栏那句话已经说了该做什么
+  }
+}
+
+async function refreshStatus() {
+  try {
+    const res = await fetch('/api/status', { credentials: 'same-origin' })
+    if (!res.ok) {
+      const body = await res.json().catch(() => ({}))
+      statusEl.textContent = explain(body.code, '连接异常')
+      // 只有**凭据过期**这一类能自愈；别的 401/403 重载多少次都一样
+      if (body.code === 'UNAUTHORIZED') requestRepair()
+      return
+    }
+    const s = await res.json()
+    quickReplies = Array.isArray(s.quickReplies) ? s.quickReplies.filter(n => typeof n === 'string') : []
+    const mode = s.channelActive ? '微信 + 本机' : '仅本机入口'
+    statusEl.textContent = mode + '｜今日 ' + s.quota.used + '/' + s.quota.limit
+    // 额度用尽是"今天不能再用"，值得在球上看得出来（琥珀），但**不是**错误
+    if (s.quota.used >= s.quota.limit) setBallState('quota')
+
+    // 记忆桶那句话说清"是不是同一个大脑"——这是用户最容易误解的地方
+    foot.textContent = ''
+    const line = document.createElement('div')
+    line.textContent = s.memoryNote || ('记忆桶：' + s.memoryBucket)
+    foot.appendChild(line)
+    if (!s.aiConfigured) {
+      const warn = document.createElement('div')
+      warn.className = 'warn'
+      warn.textContent = '还没配置 LLM：在电脑上跑 `weflow-cli config set deepseekApiKey "..."`'
+      foot.appendChild(warn)
+      input.disabled = true
+      send.disabled = true
+    }
+  } catch {
+    statusEl.textContent = '连不上本机入口'
+    setBallState('offline')     // 暖色且停住流动：不动的东西才会被注意到
+  }
+}
+
+/** 让助手给这个人起草一条回复。**只产文本**——发送在这条链路上结构性不可达。 */
+function draftRequest(name) {
+  return `用 draft_reply 给「${name}」起草 3 条候选回复，把候选原样列出来。只产文本，不要发送。`
+}
+
+/**
+ * 问一句。`display` 用来把"用户看到的那句话"和"实际发出去的那句"分开：
+ * 快速回复要发的是一句点名工具的请求（要模型选对工具），但那句话长得像机器指令，
+ * 摆进对话里读起来不像人说的——所以对话里显示「快速回复：咸鱼梦想家」。
+ */
+async function ask(text, display = null) {
+  addTurn('me', display || text)
+  const pending = addTurn('it pending', '…')
+  input.disabled = true
+  send.disabled = true
+  // 球收起来的时候，此前完全看不出它在干活——这是这条状态最主要的用处
+  setBallState('busy')
+
+  try {
+    const res = await fetch('/api/ask', {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text: text }),
+    })
+    const body = await res.json().catch(() => ({}))
+    pending.remove()
+
+    if (res.ok && body.ok) {
+      addTurn('it', body.reply)
+      // 配额用尽时服务端回的是一句**回答**（不是错误），所以上面照常显示；
+      // 这里只是把状态条上的数字刷新一下
+      void refreshStatus()
+      return
+    }
+    addTurn('err', explain(body.code, body.error))
+  } catch {
+    pending.remove()
+    addTurn('err', '请求没发出去（助手进程可能刚停）。')
+  } finally {
+    input.disabled = false
+    send.disabled = false
+    setBallState(null)
+    void refreshStatus()      // 顺手把用量与配额状态刷新（额度用尽会换成琥珀色）
+    input.focus()
+  }
+}
+
+document.getElementById('composer').addEventListener('submit', (event) => {
+  event.preventDefault()
+  const text = input.value.trim()
+  if (!text) return
+  input.value = ''
+  void ask(text)
+})
+
+input.addEventListener('keydown', (event) => {
+  // Enter 发送，Shift+Enter 换行
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault()
+    document.getElementById('composer').requestSubmit()
+  }
+})
+
+// ---------------------------------------------------------------- 球 / 对话窗
+//
+// 只在**有外壳**（Electron）时才起小球：浏览器那条路（Edge `--app`）给不了无边框置顶的小球，
+// 硬做只会做出一个奇怪的方窗口。所以这里靠 `window.weflowPanel` 在不在来判断，
+// 而且这正是 preload 唯一暴露的东西——页面拿不到凭据，也不该拿得到。
+
+const ball = document.getElementById('ball')
+const collapse = document.getElementById('collapse')
+const hasShell = typeof window.weflowPanel !== 'undefined'
+
+/**
+ * 右键"快速回复"的名单。来自 `/api/status`——页面本来每 30 秒就轮询那个端点，
+ * 所以这份名单**不必再开一个入口**（面板那条路上不加新端点、不加 IPC）。
+ */
+let quickReplies = []
+
+/**
+ * 系统关了动画没有。**这一条只有渲染进程能问**（`prefers-reduced-motion` 是媒体查询，
+ * 主进程那边没有等价 API），而窗口几何的补间在主进程、CSS 管不着——所以读出来的结果
+ * 要随 `setMode` 带过去。
+ *
+ * `typeof` 那半不是客套：`matchMedia` 在 jsdom 里**根本不存在**（测试就是拿 jsdom 跑这个
+ * 文件的），直接调会在加载时就抛。
+ */
+function prefersReducedMotion() {
+  return typeof window.matchMedia === 'function'
+    && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
+/** 气泡方位相关的类，每次切形态先全摘掉再按主进程说的挂上 */
+const LAYOUT_CLASSES = ['bubble-left', 'bubble-right', 'anchor-top']
+
+/**
+ * 按主进程说的形态切 class。**这里是唯一改形态的地方**。
+ *
+ * 载荷带方位：`side` 是气泡在球的哪一边（球就在窗口的另一边），`anchorY` 是球贴窗口的
+ * 上边还是下边（气泡跟着它竖着对齐），`bubbleHeight` 是气泡该有多高——**屏幕不够高时
+ * 气泡会变矮**，那是为了让球待在窗口的角上不动（见 `ball-position.cjs` 的 `bubbleLayout`）。
+ *
+ * 页面自己算不出这些：它不知道自己在屏幕上的位置，也不知道工作区多大。
+ */
+function applyMode(payload) {
+  const mode = payload && payload.mode === 'ball' ? 'ball' : 'chat'
+  const side = payload && payload.side === 'right' ? 'right' : 'left'
+  document.body.classList.remove('mode-ball', 'mode-chat', 'closing', ...LAYOUT_CLASSES)
+  document.body.classList.add(mode === 'chat' ? 'mode-chat' : 'mode-ball')
+  if (mode === 'chat') {
+    document.body.classList.add(side === 'right' ? 'bubble-right' : 'bubble-left')
+    if (payload && payload.anchorY === 'top') document.body.classList.add('anchor-top')
+    const height = Number(payload && payload.bubbleHeight)
+    document.body.style.setProperty('--bubble-height',
+      `${Number.isFinite(height) && height > 0 ? Math.round(height) : 560}px`)
+    input.focus()
+  }
+}
+
+/**
+ * 请主进程换形态。**页面自己不先换 class**：从前这条路是页面直接 `classList.replace`，
+ * 而托盘那条走的是 `panel:mode`，两条路行为不一样（一边球瞬间消失、一边等主进程）。
+ * 现在形态只有主进程一个来源，页面照着 `panel:mode` 做，展开与收起于是必然对称。
+ */
+function requestMode(mode) {
+  void window.weflowPanel.setMode(mode, { animate: !prefersReducedMotion() })
+}
+
+/**
+ * 点球 = 开关：站着就展开、展开了就收起。**球全程不消失**——它是"在说话的那个图标"，
+ * 让它先撤下去再冒出个窗口，就是用户嫌的那股突兀劲。
+ */
+function toggleMode() {
+  requestMode(document.body.classList.contains('mode-chat') ? 'ball' : 'chat')
+}
+
+if (hasShell) {
+  // `shell` 这个类决定球在不在场（见 panel.css）：浏览器降级那条路永远不该看见球
+  document.body.classList.add('shell', 'mode-ball')
+  ball.hidden = false
+  collapse.hidden = false
+
+  // 球：**点一下展开，按住拖动挪位置**。
+  //
+  // 为什么不用 `-webkit-app-region: drag`：Windows 上拖拽区会**吞掉鼠标事件**，
+  // 页面根本收不到 click——现象就是"点这个图标没反应"（实测的故障）。
+  // 所以拖拽自己实现：按下时告诉主进程记住窗口与指针位置，移动时按差值挪窗口；
+  // 松手时如果**指针几乎没动**，那就是一次点击。
+  // 阈值 4 像素：手抖不会把点击变成拖动，而想拖的人自然会移过 4 像素。
+  /** 被捏一下的表情。**只有一个入口**（同 `setBallState` 的理由：散着写迟早有一条分支
+   *  忘了摘，球就一直是那张笑脸）。
+   *
+   *  **按住是笑脸，一松手立刻变回来。** 第一版松手后还留 900ms，想的是"一次点击只闪
+   *  十几毫秒，不留就看不见"——用户试过之后说那个延迟很别扭：手指松开了表情还挂着，
+   *  像是卡在那儿。所以不留了。
+   */
+  function setBallFace(happy) {
+    document.body.classList.toggle('ball-happy', happy)
+  }
+
+  const DRAG_THRESHOLD_PX = 4
+  ball.addEventListener('pointerdown', (event) => {
+    if (event.button !== 0) return
+    setBallFace(true)
+    const startX = event.screenX
+    const startY = event.screenY
+    let dragging = false
+
+    const onMove = (moveEvent) => {
+      if (!dragging && Math.hypot(moveEvent.screenX - startX, moveEvent.screenY - startY) > DRAG_THRESHOLD_PX) {
+        dragging = true
+      }
+      if (dragging) void window.weflowPanel.dragMove(moveEvent.screenX, moveEvent.screenY)
+    }
+    const onUp = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onCancel)
+      void window.weflowPanel.dragEnd()
+      setBallFace(false)
+      if (dragging) return                 // 拖过了就不算点击
+      toggleMode()
+    }
+    // 指针被系统抢走（触摸、原生菜单弹出）时不走 onUp，必须自己把脸收回来，否则球一直笑着
+    const onCancel = () => setBallFace(false)
+    void window.weflowPanel.dragStart(startX, startY)
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onCancel)
+  })
+  // 右键：快速回复。**只在有外壳时接管**——浏览器降级那条路的原生菜单里有"复制"，
+  // 那是用户要用的，不该被我们抢掉。
+  //
+  // 有外壳时用**主进程弹的原生菜单**：它画在窗口外面，所以球形态那 76x76 的窗口
+  // **不用先展开**（页内菜单会被窗口裁掉）。上一版就是"先展开再弹"，用户看到的是
+  // "点右键把第二大脑窗口弹出来了"——那不是快速功能该有的样子。
+  document.addEventListener('contextmenu', (event) => {
+    event.preventDefault()
+    void (async () => {
+      const picked = await window.weflowPanel.openQuickMenu(quickReplies)
+      if (!picked || typeof picked !== 'object') return
+      // 选中任何一项都要展开：球那个 76x76 里看不到任何回答，而这几项全都要出文字。
+      // 但**右键本身不动窗口**（那是用户嫌的那一下）——展开只发生在真的选了东西之后。
+      if (document.body.classList.contains('mode-ball')) requestMode('chat')
+      if (picked.kind === 'contact' && typeof picked.name === 'string' && picked.name.trim()) {
+        const name = picked.name.trim()
+        void ask(draftRequest(name), `快速回复：${name}`)
+        return
+      }
+      if (picked.kind === 'action' && typeof picked.prompt === 'string' && picked.prompt.trim()) {
+        // 话术**由菜单项带过来**，页面不自己按 id 查表——两份映射会漂移，而漂移的后果是
+        // "菜单写着甲、点下去做了乙"，不报错。
+        void ask(picked.prompt, String(picked.label || '快捷功能'))
+      }
+    })()
+  })
+  document.addEventListener('click', () => closeQuickMenu())
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') closeQuickMenu()
+  })
+
+  collapse.addEventListener('click', () => { requestMode('ball') })
+
+  // 形态由主进程说了算（球、收起、托盘菜单、快捷键都是这条路），收起分两步：
+  //   `fadeMs > 0` → 先把气泡淡掉（窗口这会儿还是大的，淡出真看得见），**不换形态**；
+  //   `done` → 主进程已经把窗口缩回球那么大，这时才把气泡摘掉。
+  // 顺序不能反：提前换，76x76 的窗口里会露出一条气泡的边；不换，气泡会一直在。
+  window.weflowPanel.onMode((payload) => {
+    if (payload && payload.mode === 'ball' && !payload.done) {
+      if (payload.fadeMs > 0 && document.body.classList.contains('mode-chat')) {
+        document.body.classList.add('closing')
+        return
+      }
+      applyMode(payload)
+      return
+    }
+    applyMode(payload)
+  })
+} else {
+  // 浏览器降级：把话说清，别让用户以为悬浮球坏了
+  const note = document.createElement('div')
+  note.className = 'warn'
+  note.textContent = '这是浏览器窗口（没有 Electron）：给不了悬浮球、托盘和全局快捷键。'
+    + '想要真·悬浮球，在电脑上跑 npm i -g electron 之后再执行 weflow-cli panel。'
+  foot.appendChild(note)
+}
+
+renderEmptyState()
+void refreshStatus()
+// 每 30 秒刷一次状态：守护进程可能被停掉，界面不该一直显示旧数字
+setInterval(refreshStatus, 30000)
+// 球形态下不抢焦点（抢了会把用户正在打字的窗口顶掉）
+if (!hasShell || !document.body.classList.contains('mode-ball')) input.focus()