feat(web-terminal): mobile UX pass — input bar, font sizing, card terminal deep-link - #884
feat(web-terminal): mobile UX pass — input bar, font sizing, card terminal deep-link#884maxliux5 wants to merge 7 commits into
Conversation
Ports woof's mobile terminal UX to botmux's live terminal page
(worker.ts getTerminalHtml):
- persistent bottom input bar with buffer/live modes, grapheme-aware
edit-sequence mirror for Chinese IME, shortcut keys (Ctrl+C/Esc/Tab/
Ctrl+D), arrows/backspace/enter/send — wired to the existing
ws {type:'input'} channel
- viewport-aware font sizing (16px on <=600px touch viewports, 14px
elsewhere) re-applied on resize alongside fit
- Feishu webview lk-config meta (hide bottom nav bar) and
telephone=no format-detection
Co-Authored-By: Claude <noreply@anthropic.com>
The mobile input bar JS lives inside a TS template literal, so single backslashes (\n, \r, \t, \x1b, …) were interpreted by the template and emitted as raw control characters / newlines in the rendered HTML — a 'Invalid or unexpected token' SyntaxError that killed the whole <script> block (isTouch/hasToken undefined, bar hidden). Verified at 390x844 in headless Chromium: page loads with no errors, body gets 'touch has-token', the bar renders at the bottom, mode toggle (buffer/live) and input work. Co-Authored-By: Claude <noreply@anthropic.com>
Step 3 of the mobile UX pass: the v3 progress card now surfaces a
「终端(手机可看)」button that opens the live terminal page directly,
skipping the SPA round-trip that was unusable on a phone.
- projection: V3ProgressView gains optional terminal{sessionId,webPort},
populated from the latest nodeSessionReady event (outer nodes only)
- dashboard-url: buildV3TerminalUrl() — /s/<id> proxy on the central
HTTPS platform, direct worker webPort on LAN
- card: renders the terminal button ahead of Web 详情 when a live
session exists; no dead link when there is no reachable URL
Co-Authored-By: Claude <noreply@anthropic.com>
…ith reference - Hide the right-edge floating shortcut toolbar on touch devices — the bottom input bar replaces it (user request: 右边悬浮不需要) - Align the bottom bar with the reference app: pill-shaped keys row (Paste / Ctrl+C / Esc / Tab / Enter / Shift+Tab) + rounded input row with 'Type a command...' placeholder, mode toggle, arrows, backspace, send - Add Paste (clipboard read), Enter (\r), Shift+Tab (\x1b[Z) handlers; drop Ctrl+D and the standalone Enter key (Enter is in the keys row now) - Add a 10s WS open timeout so a hung connect retries instead of leaving the user on 'connecting' forever Co-Authored-By: Claude <noreply@anthropic.com>
The live-mode hint (实时输入 · 点击显示键盘) was absolutely positioned against the whole input row, so it rendered over the mode toggle and outside the textarea. Wrap the textarea + hint in a relative-positioned container so inset:0 covers only the input field. Co-Authored-By: Claude <noreply@anthropic.com>
In live mode the textarea text is transparent (keystrokes go straight to the terminal), but the ::placeholder stayed visible and overlapped the 实时输入 hint. Make the placeholder transparent in live mode too. Co-Authored-By: Claude <noreply@anthropic.com>
User feedback: 16-19px pill / 50% circle radius is too round. Use 8-10px subtle rounding matching the reference app. Co-Authored-By: Claude <noreply@anthropic.com>
|
感谢这个 PR,手机端终端体验的改造方向很好 —— 对标 woof 补齐移动输入条、只读会话不显示输入条、模板字面量转义的修复都做得很到位。经过一轮代码审查 + 真机运行态验证(390×844 触屏视口、实际 WS),发现几个需要在合并前处理的问题,按严重程度列一下: 🔴 P0(阻塞):v3 卡片「终端(手机可看)」按钮在两条部署路径下都打不开
因此仅"把 ephemeral session 注册进 activeSessions"只能修远程 404,LAN 侧还需要一个安全的只读 capability(派生 viewToken),或统一走已认证的前门。建议为 v3 ephemeral 终端设计一个完整的「可路由 + 只读鉴权 + 存活期」契约,并用真实 HTTP 200/403/404 集成测试验证,而不是只断言 URL 字符串。 🔴 P1(阻塞):节点结束后卡片仍保留陈旧死链
🟠 P2(建议修):移动输入条遮住 xterm 底部活动区输入条是 🟡 P3(低优先级):WS 断开时发送会静默吞掉输入
其它
影响面:P0/P1 局限在 v3 workflow 卡片 + ephemeral session;P2/P3 位于共用的 方向没问题,主要是完成度和 v3 终端契约这块。以上问题处理后我们会再看一轮。辛苦了,期待更新 🙏 |

背景
手机上 botmux 终端页体验差:只有浮动快捷键按钮,没有能打长文本的输入框;字号写死 14px 不随视口调整;v3 进度卡片只能跳 SPA(手机上不可用)。参考 woof 的手机终端体验做三步改造。
改动
第一步:手机输入条(worker.ts `getTerminalHtml`)
第二步:字号自适应 + 飞书 webview
第三步:v3 卡片终端直达
验证
截图
390×844 实测:底部输入条(Ctrl+C/Esc/Tab/Ctrl+D + 缓冲/输入/↑/⌫/↓/↵/发送),与 woof 手机端一致。
🤖 Generated with Claude Code