Diff Viewer new 差异查看器 web
A line-aware comparison surface that makes additions, deletions, and changes safe to review
让新增、删除和修改行可以安全审阅的逐行对比界面
12 const session = getSession(req);13- return localStorage.getItem("session");13+ return cookieStore.get("session");14+ // server-only session lookup15 }标本可交互，可以直接操作。
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Diff header差异头部
aria-labelThe file identity and summary of changed lines.
文件身份和改动行摘要。
Prompt fragmentPrompt 片段a compact header naming the file and showing additions, deletions, and review state
紧凑的头部，显示文件名、新增数、删除数和审阅状态
-
2 Diff rows差异行
<ins> / <del>Line-aware rows that preserve context around each change.
保留每处改动上下文的逐行内容。
Prompt fragmentPrompt 片段a preformatted two-tone diff with line numbers, context rows, and non-color change markers
使用行号、上下文行和非颜色差异标记的等宽差异视图
-
3 Diff actions差异操作
buttonControls for copying, applying, or reverting a patch.
复制、应用或撤销补丁的控件。
Prompt fragmentPrompt 片段Copy patch plus Apply and Revert actions with a pending state and recovery message
提供复制补丁以及带处理中和恢复反馈的应用、撤销操作
-
4 Diff status差异状态
role=statusThe result after an action completes.
操作完成后的结果。
Prompt fragmentPrompt 片段a polite status such as Ready to review, Applied, or Could not apply
显示准备审阅、已应用或无法应用等礼貌状态
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Build a Diff Viewer for an AI-generated file change. Show the file path, change count, line numbers, and additions/deletions in a real preformatted surface with horizontal overflow. Keep green and red as reinforcement rather than the only signal, provide Copy and Apply or Revert actions, and announce the result without copying line numbers or diff markers as source code.
为 AI 生成的文件改动构建差异查看器。展示文件路径、改动数量、行号，以及放在真实等宽区域中的新增/删除行；长行在查看器内横向滚动。绿色和红色只做辅助信号，提供复制、应用或撤销操作，并播报结果；复制时不要把行号或差异标记当成源代码。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my diff viewer. Check that additions and deletions are distinguishable without color; line numbers remain aligned; long code scrolls inside the viewer; Copy returns a useful patch or selected source by intent; Apply cannot run twice; rejected changes leave the original intact; keyboard focus is visible; and the file name and result are announced. The symptom:
调试我的差异查看器。检查新增和删除不依赖颜色也能区分；行号保持对齐；长代码在查看器内部滚动；复制按意图返回补丁或选中的源代码；应用操作不能执行两次；拒绝改动后原文件保持不变；键盘焦点可见；文件名和结果会播报。症状：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| HTML | <ins> / <del> + <pre> | keep additions and deletions meaningful to assistive tech |
| ARIA | aria-label + role=status | name the file and announce apply results |
| CSS | tab-size + overflow | contain long lines without collapsing indentation |
| UX | apply / revert | make the next action explicit and reversible when possible |