feat: 为聊天消息和工具调用块添加角色头像

[SpikeJulia]

概述

为 pi-web 添加按角色显示的头像支持：用户（蓝色 U）、助手（紫色 A）、工具（灰色 T）的默认头像出现在聊天消息旁以及工具调用块的头部。用户可通过「设置 → 头像」上传自定义头像，按项目保存在 <cwd>/.pi/avatars.json，并支持恢复默认。

改动内容

五张功能 ticket

• feat: add dark mode with toggle button and persistent theme preference #1 fac79a1 — 聊天区默认角色头像：通过 Avatar 组件在 MessageView 中渲染用户（蓝色 U）、助手（紫色 A）、工具（灰色 T）
• 移动端打字动画导致输入框跳动 #2 29a6c50 — 头像设置面板：AppShell 新增入口，提供只读预览模态框和 GET /api/avatars?cwd= 接口（含安全的默认加载逻辑）
• 无法使用 ChatGPT Plus 订阅作为模型供应商 #3 681cb78 — 自定义头像上传：浏览器端 resize 处理、PUT /api/avatars 接口（按项目隔离）、AvatarConfigProvider 上下文
• 工作目录选择繁琐，添加文件比较麻烦 #4 1aa1133 — 头像恢复控件：每个角色可单独重置为默认，draft/save 用户体验与上传一致
• feat: slash-command skill menu, browse folder picker, resizable explorer & compact fix #5 3e337a5 — 上传硬化：拒绝 SVG/不支持的 MIME、无法解码的图片、超过 2 MB 编码大小的 data URL；所有拒绝操作均保留 draft 和已保存状态

Bug 修复

• 修复 cdbaa9c — 修复头像上传时 OffscreenCanvas 缺少 toDataURL 的问题（浏览器上传会抛 s.toDataURL is not a function）

涉及文件

app/api/avatars/route.ts|test          # 头像配置的 GET/PUT 接口
components/AppShell.tsx                 # 设置入口
components/Avatar.tsx|test              # 通用头像渲染组件
components/AvatarConfigProvider.tsx     # 自定义头像的 React 上下文
components/AvatarsConfig.tsx|test       # 设置模态框
components/MessageView.tsx|avatars.test # 聊天中的头像渲染
lib/avatar-config.ts|server.ts|test     # 配置校验与持久化
lib/avatar-image.ts                     # 浏览器端 resize
lib/avatar-upload.ts|test               # 客户端上传流水线

验证结果

• npm run lint ✓
• npx tsc --noEmit ✓
• 头像相关单元测试：80/80 通过
• 完整测试：180/181（唯一失败是预先存在的 Windows 路径断言，与本次改动无关）
• npm run build --turbopack ✓

功能说明

操作	效果
上传头像	浏览器自动 resize → PUT 保存到 <cwd>/.pi/avatars.json → 聊天立即更新
恢复默认头像	移除自定义头像，恢复为默认字母头像
配置文件不存在	默认返回 {user:null, assistant:null, tool:null}，不会自动创建文件
SVG / 不支持的格式 / 超过 2 MB	拒绝并提示错误，draft 不受影响

备注

• 存储路径：<项目目录>/.pi/avatars.json（与 Pi 项目本地约定一致）
• 项目隔离：每个项目根目录拥有独立的 avatars.json，跨项目无数据泄露
• 构建注意：Windows 上需使用 next build --turbopack（webpack 模式会扫描用户目录中的符号链接导致权限错误）