fix(windows): stabilize capsule visuals and audio meter

[sora520]

User description

摘要

修复 Windows 11 上录音胶囊的几个 UI 问题：

1. 胶囊窗口周围偶发出现浅灰色矩形底，像是透明窗口没有完全裁掉。
2. 录音中间的蓝色音量条反馈不明显，普通说话时看起来像没有在录音。
3. “正在思考 / 已插入”等状态下右侧对号会被状态文字挤到胶囊边缘。

修复 / 新增 / 改进

• Windows 胶囊禁用 backdrop-filter 和 filter: drop-shadow(...)，避免 WebView2 透明窗口合成时露出矩形背景。
• Windows 改用普通 box-shadow 保留胶囊浮起感，不再依赖 filter。
• 录音音量条改为更明显的 RMS 映射：
  • 无声 / 低于噪声门限时保持静止。
  • 有声音时随真实麦克风电平变化。
  • 普通说话时幅度更明显，大声时接近满高。
• Windows 胶囊 textWidth 从 118 收窄到 104，给左右圆形按钮留出稳定空间。
• 中间内容容器增加 minWidth: 0，减少状态文字挤压两侧按钮的情况。
• 更新 capsuleLayout.test.ts 中 Windows 文本槽宽度期望。

Before / After

修复前

修复后

兼容

• 仅调整 Windows 胶囊 UI 表现，不改录音、ASR、插入、热键或后端状态机逻辑。
• macOS / Linux 仍保留原来的 backdrop-filter 玻璃效果。
• Windows 胶囊尺寸不变，只收窄内部文本槽，避免按钮被状态文字挤压。

测试计划

• 命令：npm run build
• 结果：TypeScript + Vite build 通过。
• 命令：npx tsx src/lib/capsuleLayout.test.ts
• 结果：通过。
• 手动测试：Windows 11 真机运行 npm run tauri dev，验证录音胶囊外侧不再出现浅灰矩形底。
• 手动测试：Windows 11 真机验证录音音量条随真实声音强弱变化。
• 手动测试：Windows 11 真机验证“正在思考 / 已插入”状态下右侧对号位置稳定，没有挤到胶囊边框。
• 未测试：macOS / Linux 真机 UI。

---

PR Type

Bug fix, Enhancement

---

Description

• Windows: disable backdrop-filter and filter drop-shadow, use box-shadow to eliminate gray rectangle artifact

• Capsule: add silence gate, response ceiling, eased mapping, and increased bar height for more visible audio meter

• Layout: reduce textWidth (118→104) and add minWidth:0 to prevent status text squeezing side buttons

• Cancel button: conditionally remove backdrop-filter on Windows to avoid compositing artifact

• Tests: update expected Windows textWidth to 104

---

Diagram Walkthrough

flowchart LR
  A["AudioBars (Capsule)"] -- "silence gate, easing, power curve" --> B["More responsive visual bars"]
  C["Pill (Capsule)"] -- "remove backdrop & drop-shadow" --> D["Windows: clean glass effect"]
  C -- "add minWidth:0, shrink textWidth" --> E["Prevent button squeezing"]
  F["CircleButton"] -- "conditional backdrop" --> D
  G["capsuleLayout.ts"] -- "textWidth 118→104" --> E
  H["capsuleLayout.test.ts"] -- "updated assertion" --> E

Loading

File Walkthrough

	Relevant files
Bug fix	Capsule.tsx Enhance audio meter dynamics and fix Windows compositing artifacts openless-all/app/src/components/Capsule.tsx AudioBars: add silence gate (0.012), response ceiling (0.34), smoothstep easing, power curve (0.42), base=2, max=24, and transition to use visualVoice for more visible meter CircleButton: detect OS and disable backdropFilter on Windows for the cancel button; add 'visibility' property Pill: replace filter drop-shadow with a box-shadow on Windows (including ambient adjustment), remove filter attribute, add minWidth:0 to center flex container to prevent layout squeeze +19/-13  capsuleLayout.ts Narrow Windows capsule text slot width                                      openless-all/app/src/lib/capsuleLayout.ts Reduce Windows capsule text width from 118 to 104 to give side buttons stable space and avoid text overflow +1/-1
Tests	capsuleLayout.test.ts Update test expectation for Windows textWidth                        openless-all/app/src/lib/capsuleLayout.test.ts Update Windows textWidth assertion from 118 to 104 to match new layout metrics Update assertion message to reflect the purpose: "windows capsule keeps side controls clear" +1/-1

---

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit 23d7f44)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ No major issues detected

[H-Chris233]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

Possible UX regression
The disabled CircleButton now always uses the default cursor instead of 'not-allowed'. The ternary enabled ? 'default' : 'default' always evaluates to 'default', removing the visual cue that the button cannot be interacted with. Users may expect a not-allowed cursor on disabled buttons and be confused when the action is unavailable.

Possible audio meter flicker
The hard noise gate at level 0.018 combined with the steep power curve (exponent 0.38) causes the audio bars to jump abruptly from zero to a visible height when input crosses the threshold. If the mic level fluctuates around 0.018, the bars will turn on and off repeatedly, producing distracting visual flicker.

我们决定合并你的pr，但是在此之前，请根据最新review意见继续跟进

[chatgpt-codex-connector]

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

[github-actions]

Persistent review updated to latest commit 23d7f44