时光旅行
像看录像一样回放整个 AI 编程过程，看到代码随对话变化的每一刻。
什么是时光旅行？
想象你和 AI 结对编程了一整天，写了几百行代码。现在你想知道某个函数是什么时候加上去的，或者想看看 AI 是怎么一步步重构你的代码的。
时光旅行 就是 Mantra 提供的"回放"能力：
- 点击任意一条对话消息
- 立刻看到那个时间点的代码状态
- 就像视频播放器的进度条，随意拖动到任何时刻
简单理解
如果说 Git 是代码的"存档点"，那时光旅行就是让你在这些存档点之间自由穿梭的"时光机"。
为什么需要时光旅行？
当你使用 AI 编程助手（如 Claude Code, Gemini CLI, Cursor）时，可能会遇到这些问题：
| 问题 | 时光旅行如何帮助 |
|---|---|
| 想知道某个功能是什么时候实现的 | 沿着对话记录点击，找到对应的时间点 |
| 代码改坏了，想回顾之前的版本 | 点击之前的消息，查看当时的代码 |
| 想理解 AI 是怎么一步步改的 | 逐条点击消息，观察代码的演变过程 |
| 和同事分享编程思路 | 从头回放整个编程过程 |
界面布局
Mantra 采用左右分栏的布局，让你同时看到对话和代码：
对话面板（左侧）
左侧面板显示完整的 AI 对话记录：
- 消息列表：你和 AI 的所有对话，按时间顺序排列
- 时间标记：每条消息都有精确的时间戳
- 消息类型：可以区分用户消息、AI 回复、代码执行等
- 当前位置：高亮显示你正在查看的消息
小技巧
对话记录可能很长，使用 消息过滤 功能可以只显示你关心的内容。
代码快照面板（右侧）
右侧面板显示选中时间点的代码状态：
- 文件树：展示项目的目录结构，支持 Git 子模块 (Submodules) 的深度嵌套显示。
- 代码内容：显示选中文件的完整代码。
- Diff 视图：支持点击工具栏的 “Diff” 按钮或使用快捷键
D切换到差异对比模式，清晰查看该时间点相对于前一个版本的具体修改。 - 高亮显示：用不同颜色标记代码的变化。
- 多文件切换：可以浏览项目中的任意文件。
注意
代码快照显示的是对话发生时的代码状态，而非你电脑上的当前文件内容。
核心组件：TimberLine 时间轴
Mantra 引入了 TimberLine —— 一个位于界面底部的精细时间轴控制器，让你像操作专业剪辑软件一样控制时间。
关键节点标记 (Tick Marks)
时间轴上不仅有进度条，还通过不同颜色的刻度点（Tick Marks）标记了关键事件，让你一眼识别重要时刻：
- 🔵 蓝色圆点：用户发送的消息（你的提问或指令）
- 🟩 绿色方块：Git 提交（Commit）节点，代表代码的一个稳定版本
- ⚪ 透明/灰色点：AI 的回复或工具执行
精准导航
- 拖拽滑块：按住滑块左右拖动，快速浏览整个会话。
- 悬停预览：鼠标悬停在时间轴任意位置，会显示该位置的精确时间戳。
- 点击跳转：点击轨道上的任意位置，立即跳转到该时刻。
键盘控制
为了实现像素级的时间控制，TimberLine 支持键盘快捷键（需先聚焦时间轴）：
| 按键 | 功能 |
|---|---|
← / → | 微调位置（步进 1%） |
Home | 跳转到会话开始 |
End | 跳转到会话结束 |
模式说明
时间轴仅在 回放模式 下显示。如果你切换到 精简模式，时间轴会自动隐藏，以提供更专注的文本编辑体验。
基本操作
点击消息查看代码变化
这是时光旅行最核心的操作：
- 在左侧对话面板中找到你想查看的消息
- 点击这条消息
- 右侧代码面板会立即更新为该时间点的代码状态
体验"顿悟时刻"
第一次尝试时，找两条相隔较远的消息来回点击。看到代码瞬间切换的效果时，你会真正理解时光旅行的魔力！
Git 集成
代码快照与 Git 历史的关系
你可能会问：Mantra 是怎么知道每个时间点的代码状态的？
答案是 Git。Mantra 会分析你项目的 Git 提交历史，结合对话的时间戳，自动匹配最接近的代码版本。
工作原理
- Mantra 读取对话记录中的时间戳
- 查找这个时间点之前最近的 Git 提交
- 从 Git 历史中提取该提交的代码快照
- 在界面上展示这个版本的代码
Git 仓库要求
时光旅行需要你的项目满足以下条件：
- 必须是 Git 仓库：项目根目录需要有
.git文件夹 - 有提交历史：至少需要一些 Git 提交记录
- 提交频率影响精度：提交越频繁，时光旅行越精确
最佳实践
在使用 AI 编程助手时，养成频繁小提交的习惯。这样 Mantra 能更精确地还原每个时间点的代码状态。
进阶技巧
结合消息过滤使用
当对话记录很长时，时光旅行配合 消息过滤 效果更好：
- 先用消息过滤筛选出关键消息（比如只看代码相关的）
- 在过滤后的结果中使用时光旅行
- 这样可以跳过无关的闲聊，直接看代码的演变过程
文件树浏览技巧
充分利用文件树可以获得更全面的代码视角：
- 折叠无关目录：只展开你关心的代码目录
- 对比多个文件：在同一时间点切换查看不同文件
- 追踪文件创建：观察新文件是在哪个时间点出现的
- 追踪文件删除：发现文件在某个时间点后消失
常见问题
代码快照不显示？
可能的原因：
项目没有 Git 仓库
- 解决方法：在项目根目录运行
git init初始化仓库
- 解决方法：在项目根目录运行
没有任何 Git 提交
- 解决方法：至少创建一个提交
git add . && git commit -m "Initial commit"
- 解决方法：至少创建一个提交
时光旅行与 IDE 中的代码不同步？
这是正常现象。
Mantra 显示的是 Git 历史中的代码版本，而 IDE 显示的是你本地文件的当前状态。
两者的区别：
- Mantra 时光旅行：Git 已提交的历史版本
- IDE/编辑器：本地文件的实时内容（可能包含未提交的修改）
如果你想在 Mantra 中看到最新代码，需要先 git commit 提交你的修改。
下一步
掌握了时光旅行后，探索更多功能：