mirror of
https://github.com/Caho1/open-claude-ui.git
synced 2026-11-07 10:26:02 -10:00
jiahao
f91b3f2601
Deep-dive into the side-browser volume's 5th part, driven by a user screenshot showing
a blue 2px ring + blue pill over the chat pane while the Preview pane stays untouched.
New sections 5.8 - 5.11 (evidence index renumbered to 5.12):
- 5.8 Three coexisting drop overlays in 4.16336.0: global screen-level DropZoneProvider
(shared-9 xh), dframe badge/label (c4c113f6f + shared-styles - the screenshot), and
ring/dashed/three-icon area overlay (cc63499d2 / cc17a11d9). Full computed-style spec
for badge + label, pixel verification (2 CSS px ring, 143x30 CSS px pill, RGB 31/101/216
vs computed #2a78d6), data-hint / RTL / reduced-motion variants, and the fact that the
same badge class is reused by split-pane session dragging (shared-23).
- 5.9 Two independent drag state machines: four-state DropZoneProvider with mixed
capture/bubble listeners, 500ms DROPPED hold and enableScreenDrop; and useDragZone's
Set<Element> enter/leave counter with dragend/drop/pointerdown capture cleanup.
Documents the fileHint branch, __gb__4088364908 hint key (semantics marked inferred)
and why only the chat/composer column gets the blue ring.
- 5.10 Post-drop pipeline: dataTransfer.items -> getAsFile / webkitGetAsEntry folder split,
FileSystemHandle wait, limit constants, 13-item i18n error matrix and the 967 B
pending upload queue (push/take/restore/drain/staging probes).
- 5.11 Attachment entrance/exit: startViewTransition({types:['cds-attachments']})
capability gates and fallbacks, @starting-style, match-element + view-transition-group
contain, cds-attachment-out, and cds-chip-in stagger (50/80/110/140ms measured via
sibling-index()). Full motion table for all drop keyframes.
Evidence: shipped-artifact byte offsets, controlled-replay (client CSS injected into
headless Chrome 157, computed styles + animation timings + pixel comparison), and the
user screenshot. 9229 inspector was not reachable this round and SIGUSR1 did not re-arm
it, so no live app state was touched; REA static graph recording hit the session
retention cap, so byte offsets are used in place of a new Evidence ID.
Volume README index, docs/README.md focus line and the merged .full.md regenerated.
No code/token changes: client-only --cds-* / --df-* variables are kept in var(...) form
so check:tokens stays clean.
Gates: typecheck / check:tokens / build all 0; all entry-point links verified.
9.8 KiB
9.8 KiB
Claude Desktop 4.16336.0 · 侧边浏览器全量技术文档库
版本：
@ant/desktop 4.16336.0（macOS/Applications/Claude.app，Electron44.9.3/ Chromium152.0.7977.167/ Node24.22.0） 逆向框架：全流程依托 REA (Reverse Engineer Anything) 完成 ASAR 解包、AST 静态分析、受控浏览器重放与运行时目标登记；辅以 9229 主进程 Node inspector 的只读活体观测。 载体指纹：app.asarSHA-256cdfee9476e3d17df5…；ion-dist.asar6adff0069a86b0d10…版本沿革：v1.x→2.37337.1（docs/v2/）→3.6556.2→4.29.0→4.4212.0（docs/v4.29.0-4.4212.0/，ASARce90267c…）→4.16336.0（本卷，当前本机实际安装版本）。4.4212.0是上一卷文档的增量复核终点，不是当前版本；本卷按Info.plist/app.asar/package.json/ 运行进程参数 / 活体app.getVersion() === "4.16336.0"命名。 定位：按功能点分篇，供前端工程师像素级复刻 Claude 侧边浏览器（Browser / Preview pane）的架构、样式、交互物理、组件名反射与上下文注入链路。
🧭 分卷大纲与导航索引
🏛️ 第一篇：总体架构与设计令牌体系
- 1.1 侧边浏览器的两层架构
- 1.2 面板容器与单描边纪律
- 1.3 色彩体系：Clay / Orange 双调色板
- 1.4 几何、排版与密度
- 1.5 动效令牌与曲线全集
- 1.6 明暗双模与暗色令牌
- 1.7 证据索引（本篇）
🧭 第二篇：导航、地址栏与标签页
- 2.1 Navigation 与 PageTools 工具条
- 2.2 地址栏组件
- 2.3 标签页 strip 与乐观重排
- 2.4 视口预设与缩放
- 2.5 设置菜单四组
- 2.6 快捷键矩阵
- 2.7 证据索引（本篇）
🚀 第三篇：预览面板与开发服务器
- 3.1 预览状态机与文案矩阵
- 3.2
.claude/launch.json配置解析器 - 3.3 启动 / 复用 / 附着状态机
- 3.4 Overload 定量阈值
- 3.5 预览 token、HTML 与文件预览
- 3.6 Servers & settings 面板
- 3.7 证据索引（本篇）
🔐 第四篇：站点权限、安全与浏览数据
- 4.1 preload 来源校验与 CDP 方法白名单
- 4.2 站点风险决策引擎
- 4.3 组织策略求值链
- 4.4 本地网络、证书与 URL 脱敏
- 4.5 Cookie 导入 native 实现
- 4.6 浏览数据持久化与清理
- 4.7 Artifact tool manifest 与逐工具权限
- 4.8 启动参数黑名单、fuse 与 DevTools 开门
- 4.9 证据索引（本篇）
🎯 第五篇：元素选择、组件名与上下文注入
- 5.1 选择模式状态机与 IPC 事件
- 5.2 悬停高亮层（
aLi） - 5.3 点击后的上下文采集
- 5.4 React 组件名反射（
yLi） - 5.5 XML 序列化与提示注入防护
- 5.6 注入 Agent 输入框的两条链路
- 5.7 Composer 胶囊与详情卡
- 5.8 文件拖拽上传：三套 drop overlay 与视觉规格
- 5.9 拖拽状态机与事件契约
- 5.10 放下之后：归一化、校验与上传队列
- 5.11 附件卡片入场 / 退场动效（View Transitions）
- 5.12 证据索引（本篇）
🖊️ 第六篇：标注、截图与自动化光标
⚡ 第七篇：动效物理学与逐帧验证
- 7.1 曲线全集与四套弹簧预设
- 7.2 元素选择的三层过渡
- 7.3 节点复用 morph 与 ghost 机制
- 7.4 活体逐帧实测（9229）
- 7.5 像素级验证
- 7.6 其它动效
- 7.7 复刻决策树
- 7.8 证据索引（本篇）
🛠️ 第八篇：系统级架构、运行时与工程复刻
- 8.1 preload bridge 契约全表
- 8.2 远程浏览器与窗口几何
- 8.3 运行时 flag 双系统
- 8.4 活体运行时身份与观测方法
- 8.5 参考实现
- 8.6 复现命令与 Evidence 索引
- 8.7 质量门禁与自检清单
- 8.8 覆盖度矩阵与剩余边界
📖 合并阅读版
- Claude Side Browser (4.16336.0).full.md —— 8 篇合并的离线全文档。
🔗 参考实现
code-examples/ElementInspectHighlight.ts（headless，令牌化，支持暗色；含readReactComponentName()浏览器侧 Fiber 反射等价实现，已从src/index.ts导出）。
与旧版文档的关系：本卷不改写
docs/v1/docs/v2/docs/v4.29.0-4.4212.0的历史结论；4.16336.0 的 bundle 文件名、chunk 名与调色板均已变化，跨版本比较必须重新取证。 本卷按功能点分篇，不复述取证时间线；所有结论标注shipped-artifact/controlled-replay/live-readonly证据类型，并附 Evidence ID 或字节偏移。