feat(webagent): 行号块整块滚动 / mobile 统计精简 / 图片上传

[lloydzhou]

概要

webagent 三项体验改进，仅动 webagent/ crate，agent 侧（bash/go/rust/c）零改动。

1. 行号块整块横向滚动

问题：Edit diff / Write·Read 行号块里每行 .txt 自带 overflow-x: auto，超宽时逐行各自滚动（行与行错位），行号还会被滚走。

方案：

• .diff / .codelines 容器承担 overflow-x: auto；行 .dl 改 width: max-content; min-width: 100%，删 .txt 的行内滚动
• 行号列 position: sticky 钉在左缘：diff 双行号列 .ln.a { left: 0 }、.ln.b { left: calc(3.5ch + 10px) }（第二列偏移 = 第一列 track 宽 + padding，与 grid 列定义保持同步）
• add/del 行号背景改为 linear-gradient(行tint色), var(--code-block) 双层背景，滚动时遮住穿透的内容且行色一致；light 主题同步

2. mobile 统计行精简

问题：≤640px 视口下统计行（model · 上下文 x/200K · 输入… · 输出… · 对话… · 压缩…）塞不下，被 overflow: hidden 截断看不全。

方案：

• hudSeg 输出段加 data-k（model/ctx/in/out/turn/cc）；ctx 与 turn 段渲染 hud-full / hud-short 双文案
• @media (max-width: 640px)：隐藏 model / in / out / cc 段；ctx 显示短文案 32.2K · 16%（+44px 进度条）；turn 显示 5轮·5req
• desktop（>640px）文案与现状完全一致，无回归

3. 图片上传（对齐 CLI [Image #N] 机制）

目标：手机浏览器贴图给 agent，与 CLI 剪贴板粘贴 [Image #N] 同一通路，agent 零改动（expand_image_placeholders 照常展开为 <attached-images> 绝对路径映射）。

服务端 POST /upload：

• 目录从 events.jsonl 路径派生（<session_dir>/images/），复用现有 EventsPath 状态，零新增参数，--session/--continue/动态 session_start 三种来源自动跟随
• 序号 create_new 原子占名 + 冲突自动递增，并发上传不撞名（起始号对齐 agent_image_next_name：现有 png 数 + 1）
• 返回 {"placeholder":"[Image #n]","path":...}；限制：>8MB→413、非 POST→405、session 未建立→409

前端三入口：📎 按钮（file picker）、输入框粘贴、拖拽。上传中回形针转圈 + hint 文案提示；成功在光标处插入 [Image #N] ；失败显示既有 errorrow。前端限制 image/png|jpeg|webp + 8MB 预检。

验证

套件	结果
新增 check_features.py（滚动/desktop 统计/mobile 统计/上传成功/409 失败路径）	23/23 ✓
旧 check_ui.py（mock WS 全 UI 断言）	24/24 ✓
旧 check_replay.py（真实 webagent + events 回放）	15/15 ✓
真实 /upload curl：落盘字节 cmp 一致、编号递增、413/405/409	✓

截图

• mobile 统计行：feat-mobile-stats.png（见 comment）
• desktop diff 滚动：feat-desktop-diff.png（见 comment）

[lloydzhou]

bug（视觉，需修）：hunk 行（@@ ... @@ 头）行身背景是 var(--hover)，但左侧两个 sticky 行号列被通用规则 .diff .ln { background: var(--code-block) }（246 行）覆盖成 code-block 色——hunk 行左缘约 7ch 宽会出现一条与行身不同的色带，滚动时更明显。需要补一条：\n\ncss\n.diff .dl.hunk .ln { background: var(--hover); }\n\n\nmeta 行（---/+++）无行号文字且行身无背景色，与 code-block 同色系，不受影响。

[lloydzhou]

nit（交互，后续增强）：两个可改进点——\n\n1. 多文件只取 files[0]，其余静默忽略。用户一次拖 3 张图只传 1 张且无提示，建议要么循环逐个上传，要么在 hint 里提示 '一次一张'。\n2. dragover/drop 只绑在输入框上，拖到页面其它区域浏览器会默认打开图片（离开页面）。建议 document 级再拦一层 dragover/drop preventDefault。

[lloydzhou]

Self-Review 结论：COMMENT（2 处已修复，其余为 nit/确认）

逐行过了一遍 diff（+242/-22，webagent/src/index.html + server.rs），共留 5 条 inline comment：

🔴 已修复（见 fix commit d3ac40b）

1. hunk 行 sticky 行号背景色不一致（index.html:259）——hunk 行身 var(--hover)，左侧两个 sticky 行号列被通用 .ln 规则覆盖成 code-block 色，行首出现约 7ch 的异色带。已补 .diff .dl.hunk .ln { background: var(--hover) }。
2. 上传 IO 失败连接静默断（server.rs:147）——handle_upload 抛 Err 时被外层 let _ = 吞掉，客户端 fetch 只能拿到 ERR_EMPTY_RESPONSE。create/write 失败路径已兜底 500 + 具体 error 信息，前端 errorrow 可展示。

🟡 nit / 后续增强（不阻塞）

3. .ln.b 的 calc(3.5ch + 10px) 与 grid 列宽 3.5ch 3.5ch 双处硬编码，改列宽需同步（建议后续抽 CSS 变量）。
4. 前端多文件只取 files[0] 静默忽略其余；dragover/drop 只绑输入框，拖到页面其它区域浏览器会默认打开图片——建议后续 document 级拦截。

✅ 确认无误

5. 起始序号 read_dir().count() 计全部条目（非仅 .png），混入 .DS_Store 会跳号但无正确性影响；create_new 原子占名 + 冲突递增的并发方案干净，无需全局锁。

其它检查项（无问题）

• 请求体前缀：/upload 是独立 HTTP 端点，不经过 LLM 请求构建路径，无 KV cache 影响
• agent 零改动：占位符展开仍走 expand_image_placeholders，bash/go/rust/c 四版本无 diff
• compact / 事件回放：merge_replay 不触碰；images/ 目录不在 events.jsonl 内，不影响回放截断
• 回归：fix commit 后重跑 check_features 23/23、check_ui 24/24 全绿