派生取舍(实现者定,画板照此画):预填永不自动发送(来自按钮或链接都一样);「已定位」态不新造(Timeline 侧 = 既有展开态 + 滚入视野, 会话区侧 = 既有折叠行打开 + 卡片展开态);两条新链接的语汇照抄 Ask why ↗;toolCallId 对不上时链接不出现、不画「找不到」态; Notes 入口推荐放 meta 行末尾、与「原文」同一语汇(零新视觉语汇),备选右上 ghost 按钮,二选一并在画板上标注理由。

提示词正文(从这里开始复制)

在项目里新建一份画板集 Agent X-Ray Crosslink,画两块桌面画板 2q、2r; 在 Agent X-Ray Mobile - Runtime 里追加 4v、4w,在 Agent X-Ray Mobile - Notes Skills About 里追加 4x; 再给既有的 1b(桌面 · 事件详情展开)与 4f(移动 · 事件详情)各加一段注释。

先读一遍现有画板再动手:1a(工作台主屏)、1b(事件详情展开:注意右上角那枚 Ask why ↗)、 2m(会话区 · 折叠行展开 + 卡片展开体)、2c(Notes 文章页)、4d(移动 · 卡片展开)、4f(移动 · 事件详情,Ask why 是同排胶囊)、4m(移动 · 章节阅读)。 新画板画的全是既有屏幕上多一个点击态,不新造任何视觉语言;凡是既有画板定了的(卡片解剖、详情卡、输入栏、meta 行),原样沿用。

0. 这三件事是什么

Agent X-Ray 是一个已投产的站:访客与 AI agent 对话,右侧像 DevTools 一样实时看 agent loop 的内核轨迹(Timeline)。 会话区里每次工具调用是一张卡(1a / 2m),右栏 Timeline 里每个事件是一行(1a / 1b)。

现在要把三处「点一下能去哪」补上,它们共用一个原语:把一句预设文本放进输入框,访客自己按发送。

1. Ask why 做实:1b 右上角那枚 Ask why ↗ 一直画着,但没画「点了会怎样」。答案:输入框里出现一句追问 (例:「在 Turn 2 里你调用了 web_search,入参是 {"query":"encore bun runtime"}。为什么要这么做?」),发送按钮回常态,光标在输入框里。 不弹层、不出现新面板——答案是接下来那一轮普通对话。
2. 卡片 ↔ Timeline 互相定位:会话区卡片的展开体(2m)底部多一条链接「在 Timeline 里查看 ↗」,点了右栏对应的 tool_call 行展开并滚到可见位置; 反过来,1b 详情卡右上角在 Ask why ↗ 旁多一条「查看卡片 ↗」(只在 tool_call 行出现),点了会话区对应的卡展开并滚到可见位置。
3. Notes 章节 → Runtime:2c 章节页多一个入口「在 Runtime 里聊这一章 ↗」;点了跳到工作台,输入框里已经写好一句 (例:「我在读本站教程《pi SDK 内核 · 第 3 章 扩展事件》。请用 notes_get_chapter 读这一章,先用三句话概括核心观点,然后等我提问。」),同样不自动发送。

1. 设计时只能用这些数据(别画出拿不到的信息)

• Timeline 行:所在 Turn 的标签(Turn 1 / Turn 2)、事件名(tool_call / before_agent_start / context …)、模式色、耗时、 工具行的工具名与入参摘要(单行、≤ 400 字、已脱敏)、扩展返回摘要。没有:行号 / 序号、模型名、provider 名。
• 会话区卡片:工具名、入参摘要、结果摘要、耗时、成功 / 出错;每张卡有一个内部 id 与 Timeline 的行对得上(访客看不到这个 id)。
• 章节页:系列名、章节标题、章序、字数、更新时间、可选的原文链接。
• 不存在:Ask why 的答案弹层、「定位失败」提示、章节级的「示例提问」、任何自动发送。

2. 三条硬约束

1. 不新造视觉语言:颜色 / 圆角 / 字号 / 间距 / 字体全部取自 token 表;两条新链接照抄 Ask why ↗ 的画法(mono 11、品牌色、hover 底 #eeeeee、圆角 5、↗)。
2. 画板上没有的功能不画:没有答案弹层、没有「已定位」的新高亮色(用既有的展开态 rgba(37,99,235,.06) 底)、没有失败提示。
3. 动效只能从现有三个里选或不用:omPulseBg / omWaveSweep / omSpin。定位时的滚动不画动效。

3. 现有 design token(照抄,勿改)

• 画布:#ffffff 底 / #f5f5f5 面板 / #eeeeee hover / #e8e8e8 选中 / 1px #e0e0e0 边框
• 文字:#1a1a1a 正文 / #6b7280 次级 / #9ca3af 弱化;品牌色 #2563eb(hover #1d4ed8)
• 语义:成功 #16a34a + rgba(34,197,94,.04/.25) 淡染;错误 #ef4444 + rgba(248,113,113,.05/.3) 淡染
• 事件模式:notify=#9ca3af · veto=#ef4444 · chain=#2563eb · takeover=#f9c22e
• Timeline 行:高 26;展开态底 rgba(37,99,235,.06)、名字品牌色 600;详情块 #f5f5f5 底 r6、左缩进 20、 INPUT / EXTENSION RETURNED / DIFF 小标题 mono 10/600 #9ca3af 0.06em,正文 mono 11/1.6;Ask why ↗ absolute 右上、mono 11 品牌色、hover 露底
• 会话区卡片(1a / 2m):卡 = 工具名 mono 12/600(成功绿 / 出错红)+ 入参摘要 mono 11 #6b7280 单行省略 + 耗时 + 12px 箭头; 展开体紧贴卡下 4px、r6 + rgba(0,0,0,.03) 底 + 同色 1px 描边,INPUT / RESULT mono 10/600 #9ca3af 0.08em,正文 mono 11/1.6 每段 ≤ 6 行
• 折叠行(2l):13px/1.7 #6b7280、行首 12px 箭头、行尾 6px 红点
• 输入栏(1a):输入框 + 发送按钮;生成期间发送按钮转圈禁用(omSpin),常态可点
• Notes 文章页(2c):面包屑 12px #9ca3af;h1 22/650;meta 行 mono 11 #9ca3af「约 N 分钟 · 更新于 … · 原文」(「原文」是品牌色文本链接)
• 移动端(4x 系列):外壳 iOS 26 语汇(功能条 / Tab Bar / Sheet 两档 medium ≈ 50% · large / 胶囊按钮 rgba(120,120,128,.12) 底 + 品牌色字、44 命中), 内核照搬桌面 token;4f 的 Ask why 是 INPUT 同排右侧的胶囊
• 圆角:4 微徽标 / 5 小按钮 / 6–7 卡片 / 8 弹层 / 12 用户气泡;等宽字体 JetBrains Mono

画板 2q —— 桌面 · 追问预填 + 双向定位(同一屏画三件事)

以 1a 为底(左栏会话列表 / 中栏会话区 / 右栏 Timeline,顶栏与统计条照抄),画一轮已完成之后(2l 的折叠行已展开成 2m 的样子)访客做了两个动作后的状态:

1. 右栏:某个 tool_call · web_search 行处于展开态(既有展开态画法),详情块右上角有两条链接并排:查看卡片 ↗ Ask why ↗(间距 6,右对齐,Ask why 在最右)。 这一行要在右栏可视区域的中部(说明「定位」把它滚到了视野里),它上面还有几行、下面还有几行。 非工具行(例如 before_agent_start)展开时只有 Ask why ↗ 一条 —— 请在同一画板上再展开一个非工具行或用注释说明。
2. 中栏:对应的 web_search 卡处于展开态(2m 画法),展开体 RESULT 段之下多一行:在 Timeline 里查看 ↗(mono 11 品牌色,左对齐,与上方 RESULT 段间距 10)。
3. 输入栏:输入框里已经有一句追问(用上面第 0 节的例句,单行溢出就换行,输入框自然增高到两行),光标在句尾,发送按钮常态可点(不转圈)。
4. 画板注释写清:两条新链接的语汇来源(照抄 Ask why)、定位 = 既有展开态 + 滚入视野、toolCallId 对不上时链接不出现、预填不自动发送、追问文案的两种形状(工具行 / 非工具行)。

画板 2r —— 桌面 · Notes 章节页的「在 Runtime 里聊这一章」入口

以 2c 为底,只加一个入口。二选一并标注理由:

• A(推荐):meta 行末尾追加 · 在 Runtime 里聊这一章 ↗,与「原文」同一语汇(品牌色文本链接);
• B:h1 右侧一枚 ghost 按钮 在 Runtime 里聊这一章 ↗(32 高 r7,同 2g 的 GitHub ↗)。

画板注释写清:入口跳转到 /,输入框带模板文本(第 0 节例句),不自动发送;Runtime tab 被隐藏时入口不出现(不画那个态,注释说明即可)。

画板 1b —— 只加注释

在 1b 下方加一块「裁定」注释面板:Ask why 点击 = 把一句追问放进输入框(两种形状,例句),不弹层、不自动发送; tool_call 行的详情卡右上多一条 查看卡片 ↗(画法见 2q)。1b 的图形一个像素不动。

画板 4v —— 移动 · 追问预填

以 4b(对话进行中)/ 4c(一轮完成)为底,画点了 4f 胶囊之后:运行时 Sheet 已收起,输入框里是那句追问、已聚焦、键盘弹起(键盘避让照既有画法),发送按钮常态。 注释:胶囊点击 = 关 Sheet + 预填 + 聚焦。

画板 4w —— 移动 · 卡片定位到 Timeline

以 4d(折叠行展开 + 卡片展开)为底:卡片展开体底部多一行 在 Timeline 里查看 ↗(mono 11 品牌色,44 命中区靠上下 padding 补,不改行高); 点击后的状态画在同一画板右侧:运行时 Sheet 升到 large、面板切到 Timeline、对应 tool_call 行展开(4f 画法),详情块里 INPUT 同排右侧有两枚胶囊 查看卡片 Ask why (两枚并排放不下就只保留 Ask why 胶囊、把 查看卡片 做成详情块底部一行链接 —— 你定并标注)。

画板 4x —— 移动 · 章节页入口

以 4m 为底,入口跟着 2r 选定的方案走(A 则 meta 行末尾文本链接换行显示;B 则标题下一枚胶囊)。功能条(返回 / 章序 / 目录)不动。 注释:与 2r 同一取舍。

画板 4f —— 只加注释

胶囊点击 = 关 Sheet + 预填 + 聚焦;tool_call 行多一枚 查看卡片(或底部链接,与 4w 一致)。图形不动。

交付

• 新画板集 Agent X-Ray Crosslink:2q / 2r(编号严格如此,只增不改,3x 号段作废不复用);桌面画板计数 23 → 25。
• Mobile - Runtime 追加 4v / 4w,Mobile - Notes Skills About 追加 4x;移动端计数 21 → 24。
• 1b / 4f 各一段注释,图形不动。
• 每块新画板留一段注释写清:链接语汇来源、定位态的定义、对不上时的处理、预填不自动发送、2r / 4x 入口方案的取舍理由。

提示词正文(到这里结束)