cc-web/.planning/gilded-wasteland-theme/findings.md

调研发现

2026-07-17 初始事实

• 用户要求直接新建主题用于和现有 Warframe 对比，并授权自行切分图标。
• 参考图的核心是右侧暗黑骑士主视觉、黑铁底色、低饱和旧金描边、余烬点缀和尖角/切角装饰。
• 附件实际像素高度为 941px（参考、背景、图标板均为 1672×941）；人物位于背景右半区，左半区天然适合作为侧栏与聊天内容的低干扰背景。
• 图标板为 1672×941，按 6 列网格提供 16/24/32px 三档图标；应优先切出 32px 版本并在 CSS 中缩放，以保留清晰纹理。
• codebase-memory 项目 home-cc-web 索引状态为 ready（3429 节点、7841 边）。
• 工作区已有 17 项未提交改动，包含 public/app.js、public/style.css、public/index.html 和回归脚本；本任务必须保留这些改动。
• 当前 Trellis 指针属于无关任务 07-11-subagent-card-metadata；本次已创建独立任务 07-17-gilded-wasteland-theme。
• 主题入口集中在 public/app.js：normalizeTheme、applyTheme、buildThemePickerHtml 和 mountThemePicker；选择值写入 document.documentElement.dataset.theme 与 localStorage['cc-web-theme']。
• 当前 Warframe 主题 ID 为 gilded，注册项带 hidden: true；选择器过滤隐藏主题，public/index.html 还会在首屏前把已存 gilded 迁移到 washi。
• 现有回归函数 assertFrontendGildedThemeContract 明确断言 Warframe 隐藏和启动迁移，新增主题时需要改成“保留并展示 gilded + 独立 wasteland”的新契约。
• 计划审查第一次未通过，原因是主题 ID/迁移边界、附件精确路径和相关脏改动审计没有写清；计划已补齐并将重新审查。
• 第二次计划审查已通过；审查建议为资产 manifest 记录裁剪框，并在收口执行 git diff --check、主题专项回归和全量回归。
• 现有 Warframe 实现全部位于未提交改动中：app.js 新增 gilded 注册和四图欢迎区；index.html 新增启动迁移；style.css 新增约 1400 行 Warframe 样式；regression.js 新增资产哈希与主题契约断言。
• public/app.js 同时存在与本主题无关的子代理卡片改动；本任务只能修改 THEME_OPTIONS/主题逻辑附近，避免触碰后半文件。
• 相关文件审计基线 SHA-256：app.js=8b320e88…、index.html=126c353c…、style.css=89e5f4a0…、regression.js=3d2c2db…。本任务结束时以精确 diff 区块复核，而不是按整文件还原。
• 已有 Warframe 资产位于 public/assets/themes/ 根目录，包含 gilded-wasteland.png 和三张 warframe-*.jpg；新主题资产将隔离到 public/assets/themes/wasteland/ 子目录，避免同名覆盖。
• 主题系统是纯前端单源：THEME_OPTIONS 驱动设置候选，applyTheme() 同步 html[data-theme] 与 localStorage['cc-web-theme']，因此不需要新增后端接口。
• 新主题使用 body 全画布背景而不复用 gilded 的四图 welcome 舞台；桌面背景居中，移动端定位到 70% 50% 并加深遮罩。
• 图标板已得到 6 列×6 行卡片边界和 17 个常用 32px 图标 bbox；输出 64×64 透明 PNG，并使用 manifest 记录坐标与用途。
• 具体技术设计已写入 Trellis info.md，实现/检查上下文已用两份研究文档和前端规范完成配置。
• 背景已原样落到 public/assets/themes/wasteland/background.webp，SHA-256 为 ee52b136294a7a31181b67e209253fefe7ace8c2b76885e45621484fecb802cb。
• 17 枚图标均为 64×64 RGBA，具有透明区和非空金色像素；status.png 额外保留 714 个绿色有效像素。人工抽检 new-chat/status/send/settings 边缘干净、尖角完整。
• 环境没有 ImageMagick；资产代理使用已存在的 Pillow 10.2.0 完成裁剪、连通域去噪与 0.6px 羽化，未新增依赖。
• UI 已实现：gilded 恢复可见、wasteland 独立注册，首屏迁移移除，cache bust 更新为 20260717-wasteland-theme。
• style.css 新增 Wasteland 变量层、230 处共享暗色 selector 纳入和独立组件层；背景直接挂在 body，.app/.chat-main/.messages 透明，侧栏与消息使用分层半透明黑铁面板，因此主视觉不会被页面底色完全遮住。
• 六个高频控件已引用真实切图：new chat/search/attachment/send/stop/settings；设置 select 额外使用 dropdown 图标。
• 主线程 diff 审核发现 new chat 会同时显示切图与原生 +，已退回 UI 代理做最小 span 隔离修复。
• 实施期间现有未提交 Warframe welcome 从“四图舞台”变化为单图 .warframe-hero，说明相关并行任务仍在写共享文件；本任务不回退该变化，回归代理必须以当前 DOM 为准并避免恢复旧四图断言。
• new chat 原生 + 已包装成仅在 wasteland 隐藏的装饰 span，其他主题仍显示原符号，新主题只显示切图图标。
• 用户反馈文字偏暗后，Wasteland 主/次/弱文字分别提亮为 #fff7e6、#eadfc9、#c9bda6，链接为 #e2c58d，行内代码为 #f6ead2；在助手/用户/通用面板上的最低对比度仍为 9.49:1。
• 一次 rg 因模式以 --target 开头被当作选项而失败；后续同类命令必须用 rg -- 结束参数解析。
• 外部并行会话一度回写 gilded.hidden、启动迁移和旧 cache bust；主线程通过运行会话列表定位到另一个 定制暗金荒野主题 会话，并在其写入后精确恢复三处契约，没有覆盖其 Warframe 配色/文案/hero。
• assertFrontendGildedThemeContract 已按当前单图 .warframe-hero 实现收敛；新 assertFrontendWastelandThemeContract 覆盖 17 项 manifest/PNG、背景 hash、双主题可见、无迁移、共享暗色 selector、六个真实控件图标、响应式、reduced-motion、cache bust 和纯白主文字对比度。
• gilded-theme 与 wasteland-theme 两个专项回归均已通过；下一阶段由主线程执行全量回归和静态复核。
• 外部会话在 17:35:19 第三次回写 app.js/index.html：恢复 gilded hidden、gilded -> washi 和旧 cache bust；style.css 的 --text-primary: #fff 与完整 Wasteland 样式仍完好。
• 为避免继续互相覆盖，回归代理按约定停止；当前需要用户先停止另一个运行中的 定制暗金荒野主题 会话，之后再补回三处小改动并重新执行专项/全量回归。
• 用户明确否定当前视觉：边框、图标和整体质感均不像参考图；此前“阶段 4 完成”的结论失效，必须以截图对照为准返工。
• 失败根因不是缺少更多装饰，而是层级方向错了：当前给过多普通控件统一金边/切角/渐变，背景遮罩过重，64×64 彩色图标直接缩小后显得糊且杂。
• 当前环境无 Playwright/Chromium，但有 /usr/bin/firefox；可创建仅用于规划验收的本地 mock HTML，用 headless Firefox 生成 1672×941 截图，不需要安装依赖或重启 ccweb。
• 新准则：面板卡片化减少、边框 1px 暗铜、切角只用于三类核心框架、图标使用用户切图 alpha mask 统一旧金材质，人物右侧清晰完整。
• 已建立 .planning/gilded-wasteland-theme/visual-preview.html 作为可复用的桌面结构 mock；但 Firefox headless 两种 profile 均无法生成截图，第二次明确报 RenderCompositorSWGL failed mapping default framebuffer，且系统无 Xvfb。
• 不为截图安装浏览器/驱动；后续视觉判断使用用户参考图的几何比例、现有 CSS 静态审计、图标原图抽检和用户在实时页面的反馈闭环。
• 用户补充了当前页与设计稿的五张一对一局部对比图，确认具体错误：新会话误用十字星、附件误加方框、输入区外框断裂且缺少中心徽记、侧栏框线不连续、所有图标误用统一 32px 来源。
• 已改为直接从完整设计稿提取透明蚀刻框：frames/new-chat.png、search.png、project.png、active-session.png、composer.png、tool-call.png；其中 composer 保留设计稿底部中心徽记。
• 已从图标板重新按 16/24px 逻辑档提取 icons/ui/：search/dropdown/theme/ai/status/attachment/send/stop/settings/user/terminal，不再复用统一 64px 大图缩小。
• Wasteland 尾部新增高保真覆盖层：新会话恢复简单 +，附件无按钮框，右侧操作按钮保留独立切角框；侧栏宽 316px、顶栏 57px、输入框 806×74px；消息回到 8px 轻圆角薄线框，背景遮罩显著减轻。
• CSS cache bust 已更新为 20260717-wasteland-hifi；本地服务已验证 stylesheet、composer frame、attachment icon 均返回 HTTP 200。
• 用户刷新后指出输入框存在明显错位与虚边；实际根因是旧 .input-wrapper:focus-within 高优先级 3px 光圈仍生效，同时 composer 素材保留了设计稿外/内两层顶线。
• 已对 focus/drag/note 三种输入状态强制清除 border/outline/box-shadow，并把 composer 素材左右对称收紧 5px、上移保留主蚀刻线；中心徽记量测仍为资产几何中心 x=403/807，未做错误偏移。
• CSS cache bust 已推进为 20260717-wasteland-hifi-2，新 CSS 与 composer 资产均通过本地 HTTP 200 校验。
• 新会话 + 消失是选择器错配：DOM 使用 .new-chat-glyph，高保真覆盖却写成不存在的 .new-chat-native-icon，同时旧高优先级规则仍将真实 span 隐藏。
• 顶部下拉图标切图在小尺寸下近乎透明，改用框内 CSS 三角形更稳定；会话 … 偏移与菜单不显示分别来自普通 flex 挤压和 .session-item { overflow: hidden; } 裁切，现已固定右侧定位并仅在菜单打开时解除裁切。
• 消息头像重叠不是重复消息节点：createMsgElement() 内联渲染了 /codex.png，高保真 Wasteland 又给同一 .msg-avatar 设置了 ui/ai.png 背景；主题层必须显式隐藏内部 img/svg。
• 输入框错层来自非等比缩放：真实内容框高度 74px，但 ::after 固定显示 807×101 整框；主内容宽缩到约 650px 时只有横向被压缩，底部徽记仍按 101px 高度绘制。现已拆为固定框壳和独立徽记两层，分别响应宽高。
• 最新截图底部贯穿整宽的“虚线”不属于 composer 框，而是透明 .input-area 继续透出了背景素材底部的暖色横线；输入区需要独立黑铁遮罩，不能完全透明。
• 输入区原生铅笔/队列 SVG 与主题切图混用，材质必然不统一；现统一使用图标板的 chat/loading/send/stop，并复用从设计稿实际按钮裁出的 46px 蚀刻框。
• 框壳、人工底线、独立徽记的三层方案虽然规避非等比拉伸，但引入新的边线叠加和视觉中心误差；最终改为完整 807×101 资产单层等比缩放。源裁区中心徽记原本向右约 8px，已只平移下半部装饰层，中心主体 alpha 重心为 403.7、画布中心为 403.0。
• 右侧停止按钮的“色块”来自 Wasteland 专用棕色渐变叠加 24px stop 图标；现取消实心渐变并回退到透明黑铁底和 20px 细节图标。
• 用户最后圈出的独立边框来自 .note-mode-btn/.send-btn/.abort-btn::after 继续加载 composer-action.png，不是输入框主框；已彻底禁用该伪元素。图标几何居中仍不等于视觉居中，发送图标原 alpha 重心向右约 1.6px，因此资产生成器新增 composer 图标 alpha 重心校正。
• 24/30px 输出画布不等于有效图形尺寸：30px note 的实际可见区只有 22×20px。最终 note 使用 36px 画布得到 28×24 可见区，send 为 26×24，AI/用户分别达到 31×32 和 32×32，避免小图标在透明画布中显得缩了一圈。

待确认

• THEME_OPTIONS 完整注册内容及当前未提交差异归属。
• Warframe 主题样式的隔离方式与可共享的暗色完成选择器。
• 当前测试命令与可用的浏览器视觉验收入口。