feat(gui+waiter): computeruse 补高级操作、修 HiDPI 坐标；记录 PiDeck 借鉴

## computeruse 高级操作此前两端（GUI 本机桥 / waiter 设备侧）都只有 9 个基础 action （click/move/scroll/keypress/type…），与业界 computer-use 的基本盘差距明显。现补到 18 个，两端对齐： drag 拖拽（分步移动，见下） hover 只悬停不点击（触发 tooltip / 悬浮菜单） mousedown/up 按下与释放分离，可配对做「按住」 tripleclick 三击选中整行 middleclick 中键 hotkey/combo 组合键（ctrl+c 这类） wait/sleep 显式等待，等 UI/动画完成再下一步 display 显示器几何（bounds + scaleFactor + primary），多屏定位必需 ★ 拖拽**分步移动**（默认 12 步，上限 60）而不是一步到位：canvas 拖拽、列表排序、滑动条这类应用依赖中间 mousemove 事件，一步到位会失效。 ## 修 HiDPI 坐标错位（GUI 侧）截图给模型的是**物理像素**，而 SetCursorPos / xdotool / cliclick 期望 **逻辑点(DIP)**。旧代码只加了 display bounds 的原点偏移，完全没换算 scaleFactor ⇒ 150% 缩放屏上点击系统性偏移（越靠右下偏得越多）。现在按目标屏 scaleFactor 换算，并提供 `physical:false` 让调用方声明「坐标已是逻辑点」以免二次换算。 ## 组合键归一化（waiter 侧）旧实现把模型给的 key 字符串原样丢给 `xdotool key`，于是 "Ctrl+C"、 "ctrl + c"、"CTRL-C" 全部失效。新增 normKeySpec：统一 + 与空格分隔、统一小写、去重复修饰键。顺带修 waiter 的 `type`：加 `--clearmodifiers`，避免残留的 Ctrl/Alt 把后续输入变成快捷键（旧实现一次输入就可能污染后续所有按键）。 ## scroll 修正（两端）旧实现固定滚 `click 4/5`（上/下），忽略方向语义也不支持横向。现按 dy 正负给方向、按量级分步、支持 dx 横向滚动。 ## 显式声明借鉴 PiDeck 用户要求声明 GUI 借鉴了 PiDeck 的设计与实现。做法： 1. 新增 `cmd/gui/DESIGN-NOTES.md` —— 逐项列出借鉴自 PiDeck 的设计（三点渐次明暗 / 运行态呼吸光晕 / 工具调用分组卡）、PiDeck 的原始实现（@keyframes 名与 CSS 片段）、HomeAgent 的落地位置、以及**动机**，并明确区分「本仓自行决策」的部分（如「只有 1 个工具时不分组」是本地决定，不是 PiDeck 做法）。 2. app.js / style.css 的相关代码处补出处注释。 3. 判据 computeruse.test.mjs 钉住这几条声明，防止后续丢失。参考方式为阅读 PiDeck 打包产物 app.asar 中的 CSS 实现后**独立重写**，未复制其代码或资源文件。 ## 判据新增 cmd/gui/computeruse.test.mjs（进 npm test），30 条断言： · 两端各 9 项高级操作 · HiDPI 换算与 physical 开关 · 组合键归一化、type 的 --clearmodifiers · 拖拽分步移动（两端） · PiDeck 借鉴声明四处（含 DESIGN-NOTES.md 存在）判据：cmd/gui npm test 全绿（114 条）。
2026-10-15 12:15:16 +00:00 · 2026-10-02 11:10:53 +08:00
parent bf06ad029a
commit 40119e8116
7 changed files with 1000 additions and 60 deletions
--- a/cmd/gui/renderer/app.js
+++ b/cmd/gui/renderer/app.js
@ -1953,6 +1953,116 @@ function chanLetter(src) {
  return /[A-Za-z0-9]/.test(ch) ? ch : "C";
 }

+// renderToolCard 渲染单个工具调用卡。
+// 独立成函数是为了让分组逻辑能复用（组卡展开后要逐个渲染）。
+function renderToolCard(tc, drip) {
+  var argsStr =
+    typeof tc.args === "object"
+      ? JSON.stringify(tc.args, null, 1)
+      : tc.args || "";
+  var resultStr = tc.result
+    ? typeof tc.result === "object"
+      ? JSON.stringify(tc.result, null, 1)
+      : String(tc.result)
+    : "";
+  var running = !resultStr && tc.status !== "denied";
+  var error = tc.status === "error" || tc.status === "denied" || !!tc.error;
+  var iconSvg = error
+    ? '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M5.6 5.6l12.8 12.8"/></svg>'
+    : running
+      ? '<span class="tc-spinner"></span>'
+      : '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.9 2.9-2.5-.6-.6-2.5z"/></svg>';
+  var statusHtml =
+    tc.status === "denied"
+      ? '<span class="tc-state tc-deny">' + __("已拒绝", "Denied") + "</span>"
+      : running
+        ? '<span class="tc-state tc-run">' + __("调用中", "Running") + "</span>"
+        : '<span class="tc-state tc-done">' + __("完成", "Done") + "</span>";
+  var pluginHtml = tc.plugin
+    ? '<span class="tc-plugin">' + escHtml(tc.plugin) + "</span>"
+    : "";
+  return (
+    '<div class="tool-card' +
+    (error ? " tc-error" : running ? " tc-running" : " tc-done") +
+    (drip ? " tool-drip-in" : "") +
+    '" data-tool="' +
+    escHtml(tc.tool || tc.name || "") +
+    '" onclick="toggleToolCall(this)">' +
+    '<div class="tc-line"><span class="tc-ico">' +
+    iconSvg +
+    '</span><span class="tc-name">' +
+    escHtml(tc.tool || tc.name || "") +
+    "</span>" +
+    pluginHtml +
+    statusHtml +
+    '<span class="tc-caret">▾</span></div>' +
+    '<div class="tc-detail" style="display:none">' +
+    (argsStr && argsStr !== "{}"
+      ? '<div class="tc-args"><div class="tc-detail-label">' +
+        __("参数", "Args") +
+        "</div>" +
+        escHtml(argsStr) +
+        "</div>"
+      : "") +
+    (resultStr
+      ? '<div class="tc-result"><div class="tc-detail-label">' +
+        __("结果", "Result") +
+        "</div>" +
+        escHtml(resultStr) +
+        "</div>"
+      : "") +
+    "</div></div>"
+  );
+}
+
+// renderToolGroupOrSingle 按数量决定形态：1 个走单卡，多个折成组卡。
+//
+// ★ 分组策略参考 PiDeck 的 tool-group-card。原来一轮里每个调用各占一张卡，
+// 调 5 个工具就是 5 张卡竖排，把真正的回复挤到很下面；而这些卡形态高度
+// 相似（图标 + 工具名 + 状态），信息密度极低。折成组卡后「agent 干了什么」
+// 一眼可见，而不被细节淹没。
+function renderToolGroupOrSingle(tcs, newlyDone) {
+  var cards = tcs.map(function (tc) {
+    return renderToolCard(
+      tc,
+      newlyDone.indexOf(tc.tool || tc.name || "") !== -1,
+    );
+  });
+  if (cards.length === 1) return cards[0];
+  return renderToolGroup(tcs, cards);
+}
+
+// renderToolGroup 组卡：头部脉冲点 + 计数 + 状态摘要，展开后逐个单卡。
+function renderToolGroup(tcs, cards) {
+  var runningN = 0;
+  var errN = 0;
+  tcs.forEach(function (tc) {
+    if (!tc.result && tc.status !== "denied") runningN++;
+    if (tc.status === "error" || tc.status === "denied" || !!tc.error) errN++;
+  });
+  var tone =
+    errN > 0 ? "tone-error" : runningN > 0 ? "tone-running" : "tone-done";
+  var summary =
+    errN > 0
+      ? __("部分失败", "some failed")
+      : runningN > 0
+        ? __("进行中", "running")
+        : __("完成", "done");
+  return (
+    '<div class="tool-group-card ' + tone + '">' +
+    '<div class="tool-group-head" onclick="toggleToolGroup(this)">' +
+    '<span class="tool-group-dot"></span>' +
+    '<span class="tool-group-count">' + cards.length + "</span>" +
+    '<span class="tool-group-label">' + __("个工具调用", "tool calls") + "</span>" +
+    '<span class="tc-state">' + escHtml(summary) + "</span>" +
+    '<span class="tc-caret"></span>' +
+    "</div>" +
+    '<div class="tool-group-body" style="display:none">' +
+    cards.join("") +
+    "</div></div>"
+  );
+}
+
 // PiDeck 风格思考卡片：Brain 图标 + 折叠时单行预览（流式中扫光）+ 展开/收起
 // PiDeck 风格思考卡片：Brain 图标 + 折叠单行预览（流式中扫光）+ 展开懒加载全文
 function renderReasoningCard(text, isStreaming, idx) {
@ -2126,6 +2236,9 @@ function renderChat() {
      }
      var tcs = "";
      if (m.tool_calls && m.tool_calls.length > 0) {
+        tcs = renderToolGroupOrSingle(m.tool_calls, newlyDone);
+      }
+      if (false) {
        m.tool_calls.forEach((tc) => {
          var argsStr =
            typeof tc.args === "object"
@ -2206,6 +2319,12 @@ function renderChat() {
          (newPending.length
            ? '<span class="thinking-tools">' + pillHtml() + "</span>"
            : "");
+        // ★ msg-running：整条气泡的呼吸光晕。参考 PiDeck 的
+        // .turn-row--running:before —— 一层极淡的 accent 底色缓慢明暗
+        // 交替。单看气泡里那几个点，视线要缩到一小块；光晕铺在整条消息
+        // 上，余光就能感知「agent 正在回」。只加在最后一条且未收尾的
+        // 流式消息上，已完成的历史消息不带。
+        var runCls = " msg-running";
        if (c) {
          body +=
            '<div class="msg-bubble' +
@ -2453,6 +2572,19 @@ function rerenderChat() {
  renderCmdHistory();
 }

+// toggleToolGroup 展开/收起工具调用组卡。
+// 只切 body 的 display，不重建 DOM —— 展开时里面的单卡已是渲染好的
+// HTML，重建会丢掉它们各自的折叠状态与"刚完成"的入场动画。
+function toggleToolGroup(el) {
+  var card = el.parentNode;
+  if (!card) return;
+  var body = card.querySelector(".tool-group-body");
+  if (!body) return;
+  var open = body.style.display !== "none";
+  body.style.display = open ? "none" : "block";
+  el.classList.toggle("open", !open);
+}
+
 function toggleToolCall(el) {
  var d = el.querySelector(".tc-detail");
  if (!d) return;
--- a/cmd/gui/renderer/style.css
+++ b/cmd/gui/renderer/style.css
@ -1290,9 +1290,27 @@ code {
  border: 1px solid var(--kv-border);
  border-left: 3px solid var(--accent);
  cursor: pointer;
+  position: relative;
  transition:
    border-color 0.2s var(--ease-out),
-    background 0.2s var(--ease-out);
+    background 0.2s var(--ease-out),
+    box-shadow 0.2s var(--ease-out);
+}
+
+/* 运行中的工具卡：极淡的呼吸光晕。
+   参考 PiDeck 的 .turn-row--running:before —— 用一层几乎看不见的
+   accent 底色缓慢呼吸来表达"正在跑"，而不是放一个转圈。
+   转圈的语义是"在加载某个确定的东西"，而工具执行没有进度可转。 */
+.tool-card.tc-running::before {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: -1px -3px;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--accent) 4%, transparent);
+  opacity: 0;
+  animation: haRunBreathe 2.2s ease-in-out infinite;
+  z-index: -1;
 }
 .tool-card.tc-running {
  border-left-color: var(--accent);
@ -1303,6 +1321,15 @@ code {
 .tool-card.tc-error {
  border-left-color: var(--error, #db3694);
 }
+@keyframes haRunBreathe {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
 .tool-card .tc-line {
  display: flex;
  align-items: center;
@ -1357,14 +1384,114 @@ code {
  background: rgba(219, 54, 148, 0.18);
  color: #ff9ec6;
 }
+/* 工具卡内的活动指示：三点脉冲。
+   旧实现是 11px 的 border 转圈（.tc-spinner）—— 与上一条同样的问题，
+   且在 11px 尺寸下转圈糊成一团。改为 PiDeck 的 tool-activity-dot 三点。 */
+/* ===== 工具调用组卡（参考 PiDeck 的 tool-group-card）=====
+   一轮里多个工具调用折成一张卡：收起时只留「脉冲点 + 计数 + 状态摘要」，
+   展开才逐个看细节。相比每工具一张卡，回复正文不会被推到很下面。 */
+.tool-group-card {
+  border: 1px solid var(--kv-border);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius-sm);
+  margin: 6px 0;
+  font-size: 11px;
+  background: var(--bg-panel, var(--bg-hover));
+  overflow: hidden;
+}
+.tool-group-card.tone-error {
+  border-left-color: var(--error, #db3694);
+}
+.tool-group-card.tone-done {
+  border-left-color: rgba(23, 169, 100, 0.8);
+}
+.tool-group-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 10px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: background 0.2s var(--ease-out);
+}
+.tool-group-head:hover {
+  background: var(--bg-hover);
+}
+.tool-group-card .tool-group-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--accent);
+  flex-shrink: 0;
+}
+/* 运行中的组：脉冲点呼吸（PiDeck 的 toolGroupDotPulse：缩放+透明度） */
+.tool-group-card.tone-running .tool-group-dot {
+  background: var(--loading-top, var(--accent));
+  animation: haGroupDotPulse 1.4s ease-in-out infinite;
+}
+.tool-group-card.tone-error .tool-group-dot {
+  background: var(--error, #db3694);
+}
+.tool-group-card.tone-done .tool-group-dot {
+  background: rgba(23, 169, 100, 0.9);
+}
+@keyframes haGroupDotPulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.25);
+  }
+}
+.tool-group-count {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.tool-group-label {
+  color: var(--text-muted);
+}
+.tool-group-head .tc-caret {
+  font-size: 10px;
+  color: var(--text-muted);
+  transition: transform 0.15s var(--ease-out);
+}
+.tool-group-head.open .tc-caret {
+  transform: rotate(180deg);
+}
+.tool-group-body {
+  padding: 0 6px 4px;
+  border-top: 1px solid var(--kv-border);
+}
+.tool-group-body .tool-card {
+  margin: 4px 0;
+}
+
 .tool-card .tc-spinner {
-  width: 11px;
-  height: 11px;
-  border-radius: 50%;
-  border: 2px solid rgba(63, 110, 245, 0.25);
-  border-top-color: #3f6ef5;
-  animation: spin 0.7s linear infinite;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  width: auto;
+  height: auto;
+  border: none;
+  border-radius: 0;
+  background: none;
+  vertical-align: middle;
+}
+.tool-card .tc-spinner::before,
+.tool-card .tc-spinner::after {
+  content: "";
+  display: block;
+  width: 3px;
+  height: 3px;
+  border-radius: 999px;
+  background: var(--accent);
+  animation: haDots 1.1s ease-in-out infinite;
+}
+.tool-card .tc-spinner::after {
+  animation-delay: 0.2s;
 }
 .tool-card .tc-caret {
  font-size: 10px;
@ -1587,6 +1714,25 @@ code {
 .msg-bubble .live-spinner + .text {
  margin-left: 8px;
 }
+
+/* 正在生成的那条消息：整条气泡的呼吸光晕。
+   参考 PiDeck 的 .turn-row--running:before —— 一层几乎看不见的
+   accent 底色缓慢明暗交替。比对单点动画的优势：余光就能感知
+   「agent 正在回」，不必把视线缩到气泡里那几个点上。 */
+.msg-bubble.msg-running {
+  position: relative;
+}
+.msg-bubble.msg-running::before {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: -4px -6px;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--accent) 4%, transparent);
+  opacity: 0;
+  animation: haRunBreathe 2.2s ease-in-out infinite;
+  z-index: -1;
+}
 .msg-bubble.grow-in {
  animation: bubbleGrow 0.5s var(--ease-out) both;
 }