diffity-tour

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Diffity Tour Skill

Diffity 代码游览技能

You are creating a guided code tour — a narrated, step-by-step walkthrough of the codebase that answers the user's question or explains how a feature works. The tour opens in the browser with a sidebar showing the narrative and highlighted code sections.
你将创建一个引导式代码游览——一段带讲解的、分步遍历代码库的内容,用于解答用户的问题或解释某个功能的工作原理。游览会在浏览器中打开,侧边栏显示讲解内容,同时高亮对应的代码片段。

Arguments

参数

  • question
    (required): The user's question, topic, concept, or a GitHub PR URL. Examples:
    • /diffity-tour how does authentication work?
    • /diffity-tour explain the request lifecycle
    • /diffity-tour how are comments stored and retrieved?
    • /diffity-tour closures
    • /diffity-tour React hooks
    • /diffity-tour walk me through this branch before I merge
    • /diffity-tour https://github.com/owner/repo/pull/123
When the argument is a GitHub PR URL (matching
github.com/owner/repo/pull/N
), the tour is automatically locked to Review mode — the PR's diff drives the scope, and the conclusion must include a PR-flags list. See the Review tours section below.
  • question
    (必填):用户的问题、主题、概念或GitHub PR链接。示例:
    • /diffity-tour 认证功能是如何工作的?
    • /diffity-tour 解释请求生命周期
    • /diffity-tour 评论是如何存储和检索的?
    • /diffity-tour closures
    • /diffity-tour React hooks
    • /diffity-tour 在我合并前带我浏览这个分支
    • /diffity-tour https://github.com/owner/repo/pull/123
当参数为GitHub PR链接(匹配
github.com/owner/repo/pull/N
格式)时,游览会自动锁定为评审模式——PR的差异内容决定游览范围,结论部分必须包含PR标记列表。请查看下方的「评审游览」章节。

CLI Reference

CLI 参考

diffity agent tour-start --topic "<text>" [--body "<text>"] --json
diffity agent tour-step --tour <id> --file <path> --line <n> [--end-line <n>] --body "<text>" [--annotation "<text>"] --json
diffity agent tour-done --tour <id> --json
diffity list --json
diffity agent tour-start --topic "<text>" [--body "<text>"] --json
diffity agent tour-step --tour <id> --file <path> --line <n> [--end-line <n>] --body "<text>" [--annotation "<text>"] --json
diffity agent tour-done --tour <id> --json
diffity list --json

Prerequisites

前置条件

  1. Check that
    diffity
    is available: run
    which diffity
    . If not found, install it with
    npm install -g diffity
    .
  2. If the argument is a GitHub PR URL:
    • Check
      gh
      is installed and authenticated: run
      gh auth status
      . If not authenticated, stop and ask the user to run
      gh auth login
      .
    • Verify the current repo matches the PR's repo: run
      gh repo view --json nameWithOwner -q .nameWithOwner
      and confirm it matches the
      owner/repo
      in the URL. If it doesn't, stop and tell the user they need to be inside the PR's repository clone — diffity can't tour a PR for a repo you don't have checked out.
    • Start diffity against the PR: run
      diffity --no-open <pr-url>
      using the Bash tool with
      run_in_background: true
      . The
      --no-open
      flag must come BEFORE the URL
      — commander's
      passThroughOptions()
      will slurp any flag that appears after the positional URL into the refs array, skipping PR handling and producing an "unknown ref" error. This command checks out the PR's branch locally and starts a diff-scoped session. Wait 2 seconds, then run
      diffity list --json
      to get the port. You do not also need a tree instance — the diff session supports
      agent tour-*
      commands.
  3. Otherwise, ensure a tree instance is running: run
    diffity list --json
    .
    • If no instance is running, start one: run
      diffity tree --no-open
      using the Bash tool with
      run_in_background: true
      , wait 2 seconds, then run
      diffity list --json
      to get the port.
  1. 检查
    diffity
    是否可用:运行
    which diffity
    。如果未找到,使用
    npm install -g diffity
    进行安装。
  2. 如果参数是GitHub PR链接
    • 检查
      gh
      是否已安装并完成认证:运行
      gh auth status
      。如果未认证,请停止操作并告知用户运行
      gh auth login
    • 验证当前仓库是否与PR所属仓库匹配:运行
      gh repo view --json nameWithOwner -q .nameWithOwner
      ,确认结果与链接中的
      owner/repo
      一致。如果不一致,请停止操作并告知用户需要进入该PR对应的仓库克隆目录——diffity无法为未检出的仓库PR创建游览。
    • 针对PR启动diffity:使用Bash工具运行
      diffity --no-open <pr-url>
      ,并设置
      run_in_background: true
      --no-open
      参数必须放在链接之前
      ——commander的
      passThroughOptions()
      会将链接之后的所有参数归入refs数组,导致PR处理逻辑失效并产生「未知引用」错误。该命令会在本地检出PR分支并启动差异范围的会话。等待2秒后,运行
      diffity list --json
      获取端口号。你不需要额外启动tree实例——差异会话支持
      agent tour-*
      命令。
  3. 其他情况:确保tree实例正在运行:运行
    diffity list --json
    • 如果没有实例运行,启动一个:使用Bash工具运行
      diffity tree --no-open
      ,设置
      run_in_background: true
      ,等待2秒后运行
      diffity list --json
      获取端口号。

Instructions

操作说明

Pick a mode first

先选择模式

Before doing anything else, decide which mode this tour belongs to. The rest of the skill branches on this choice — scope, research method, and output shape all differ by mode. Do this before any tool calls.
Shortcut: if the argument is a GitHub PR URL (matches
github.com/owner/repo/pull/N
), skip the decision — it is locked to Review mode.
ModeUse when the user asks...Scoped byTarget steps
Focuseda narrow "how does X work?" questionone code path3-6
Feature"how does this feature work?"a feature boundary6-10
System"how does the whole thing work?"architecture8-15
Conceptabout a programming conceptexamples in the code3-8
Reviewto audit a branch/PR/feature before merge
git diff <base>..HEAD
variable — cover every meaningful change
Trigger words that steer toward each mode:
  • Focused: "how does X validate", "walk me through the Y endpoint"
  • Feature: "how does authentication work", "explain the comment system"
  • System: "how does the app work", "give me the architecture overview"
  • Concept: concept names on their own (
    closures
    ,
    React hooks
    ,
    async/await
    ,
    generics
    )
  • Review: "before I merge", "review this branch", "walk me through the whole feature", "audit this PR", "I'm about to merge"
If multiple modes fit, prefer the more specific one (Review > Concept > Focused > Feature > System). If you genuinely can't tell which the user wants, ask before researching — don't guess and produce the wrong tour shape.
Mode changes which sections of this skill apply:
  • Concept mode → read the Concept tours section below; research differs (search for examples, not follow a flow) and so does step progression.
  • Review mode → read the Review tours section below; scoping is diff-driven, threads are walked one at a time, and the conclusion must include a PR-flags list.
  • Focused / Feature / System mode → the default Phase 1-3 instructions apply directly.
在进行任何操作前,先确定本次游览所属的模式。后续的操作流程、研究方法和输出形式都会因模式不同而有所差异。请在调用任何工具前完成模式选择。
快捷规则:如果参数是GitHub PR链接(匹配
github.com/owner/repo/pull/N
格式),无需选择模式——直接锁定为评审模式
模式适用场景范围界定依据目标步骤数
聚焦模式用户询问具体的「X是如何工作的?」类问题单一代码路径3-6步
功能模式用户询问「这个功能是如何工作的?」功能边界6-10步
系统模式用户询问「整个系统是如何工作的?」整体架构8-15步
概念模式用户询问编程概念相关内容代码库中的实例3-8步
评审模式用户需要在合并前审核分支/PR/功能
git diff <base>..HEAD
的差异内容
可变——覆盖所有有意义的变更
引导各模式的关键词:
  • 聚焦模式:「X是如何验证的」、「带我浏览Y端点」
  • 功能模式:「认证功能是如何工作的」、「解释评论系统」
  • 系统模式:「这个应用是如何工作的」、「给我一个架构概述」
  • 概念模式:单独的概念名称(如
    closures
    React hooks
    async/await
    generics
  • 评审模式:「在我合并前」、「评审这个分支」、「带我浏览整个功能」、「审核这个PR」、「我即将合并」
如果多个模式都适用,优先选择更具体的模式(评审模式 > 概念模式 > 聚焦模式 > 功能模式 > 系统模式)。如果无法确定用户需求,请先询问用户,不要猜测并生成不符合预期的游览内容。
模式决定了本技能中哪些章节适用:
  • 概念模式 → 阅读下方的「概念游览」章节;研究方式不同(搜索示例而非跟随流程),步骤推进逻辑也不同。
  • 评审模式 → 阅读下方的「评审游览」章节;范围由差异内容决定,按线程逐一浏览,结论必须包含PR标记列表。
  • 聚焦/功能/系统模式 → 直接遵循默认的第1-3阶段操作说明。

Phase 1: Scope and research

阶段1:范围界定与研究

Before creating any tour steps, you must deeply understand the answer to the user's question.
  1. Confirm the scope. The mode you picked sets a rough step count (see Pick a mode above). If the user's question is too broad to fit at that size (e.g. "explain everything" landing in System mode), mentally narrow to the most important aspect and state in the intro what you're covering and what you're leaving out.
  2. Identify the audience. Consider how the question was phrased:
    • "How does X work?" → assume someone new to this codebase — explain architectural decisions, not just code mechanics
    • "Why does X do Y?" → assume someone debugging or reviewing — focus on the reasoning and edge cases
    • "Walk me through X" → assume someone who wants the full picture — be thorough, include context
  3. Research the codebase. Read the relevant source files thoroughly. Follow the code path from entry point to completion.
    For review tours especially, also read
    git log --reverse <base>..HEAD
    and open any commit whose message describes a non-obvious fix, refactor, or defensive change. The author's own narrative is often the best source of why — far better than inferring intent from the code alone. Quote or paraphrase commit reasoning in step bodies where it illuminates a design decision (e.g. "commit
    abc1234
    introduced this check after a production incident where...").
    When touring a GitHub PR, use
    gh
    for metadata and diff:
    • gh pr view <url> --json title,body,baseRefName,headRefName,commits,files
      — PR title, body, base/head branches, commit list, and changed-file list. The PR body often contains the richest "why" (design context, screenshots, trade-offs the author considered) — quote or summarize it in the intro.
    • gh pr diff <url>
      — the unified diff that defines the tour's scope. Use this to confirm the full surface area, not just what you see in
      git diff
      .
    • Use the PR's
      baseRefName
      (from the JSON above) as the diff base — not
      master
      /
      main
      by default. Commands like
      git log --reverse <baseRefName>..<headRefName>
      walk the PR's commits in author order.
    • Source files are readable from the working tree because
      diffity <pr-url>
      has already checked out the PR branch locally.
  4. Identify the key locations that tell the story — the files and line ranges that someone needs to see to understand the answer.
  5. Note configuration dependencies. If the behavior changes based on environment variables, feature flags, config files, or runtime conditions, note these. They must be called out in the tour so the reader understands "this is what happens when X is configured, but if Y were set instead, the flow would differ here."
  6. Plan a logical sequence of steps that builds understanding progressively. Each step should lead naturally to the next.
Guidelines for choosing steps:
  • Start at the real entry point — where external input arrives (HTTP route, CLI command, scheduled job, webhook). Config, schemas, constants, and helper functions are not entry points; they are dependencies of the flow.
  • Introduce foundations just-in-time. When the flow first reads a schema, tour the schema. When it first calls a helper, tour the helper. When it first references a config value, tour the config. Do not front-load a prelude of foundation pieces before the flow starts.
  • At most one "orientation" step (e.g. a route table showing all endpoints) may precede the entry point. Everything else should be motivated by something the reader has just seen.
  • Follow the execution path in the order things actually happen.
  • Include only locations that are essential to understanding — skip boilerplate.
  • End at the final outcome (response sent, data persisted, UI rendered).
  • Each step should cover a single concept or code section.
  • Include concrete examples where possible (e.g. "when the user runs
    diffity main
    , this becomes...").
Top-down, not bottom-up. A tour mirrors how the code runs at runtime, not how it was built. Do not walk config → schema → helpers → routes → actions. Walk route → action → (schema appears here because a query reads it) → (config appears here because a handler references it) → (helper appears here because something calls it). Readers retain context better when each new piece is introduced at the moment it becomes relevant. The reader should feel they're sitting next to you as you trace a real request, not sitting through a lecture about architecture before the demo starts.
Handling cross-module flows: When the code path crosses into a library, utility module, or deeply nested abstraction, decide whether to follow it:
  • Follow it if the logic there is essential to understanding the answer (e.g. a custom middleware that transforms the request)
  • Summarize it if the module does something standard or well-known (e.g. "this calls the Express router, which matches the path and invokes our handler") — mention what it does in the step body without creating a separate step for it
  • Skip it if it's pure boilerplate or plumbing (e.g. re-exports, type-only files)
Patterns applied across many files. When a single change is replicated across N similar call sites (e.g. the same guard added to 8 handlers, the same middleware registered on every route), do not make N steps. Make one step on the most representative file with full context, then list the other call sites as goto links in the body ("the same guard is also added to X, Y, Z"). One concept, one step — the tour should teach the reader the pattern once, not N times. The exception: if one of the applications is subtly different from the others (e.g. called twice in a transfer flow, or with different args), spend a separate step on that one.
在创建任何游览步骤前,你必须深入理解用户问题的答案。
  1. 确认范围:你选择的模式设定了大致的步骤数(参考「选择模式」部分)。如果用户的问题过于宽泛,无法在该步骤数内覆盖(例如,「解释所有内容」对应系统模式),请在脑海中缩小范围至最重要的部分,并在介绍中说明你将涵盖的内容和排除的内容。
  2. 确定受众:根据用户的提问方式判断:
    • 「X是如何工作的?」→ 假设受众是代码库新手——解释架构决策,而不仅仅是代码机制
    • 「X为什么要做Y?」→ 假设受众是调试或评审人员——重点关注设计原因和边缘情况
    • 「带我浏览X」→ 假设受众想要完整的全貌——内容要全面,包含上下文
  3. 研究代码库:仔细阅读相关的源代码文件,从入口点到完成环节追踪代码路径。
    对于评审模式,还需要阅读
    git log --reverse <base>..HEAD
    ,并打开任何描述非明显修复、重构或防御性变更的提交记录。作者自己的说明通常是最能体现「为什么」的信息来源——远比仅从代码推断意图更准确。在步骤内容中引用或转述提交记录中的原因,以阐明设计决策(例如:「提交
    abc1234
    引入了这个检查,原因是之前发生了一次生产事故……」)。
    当游览GitHub PR时,使用
    gh
    获取元数据和差异内容
    • gh pr view <url> --json title,body,baseRefName,headRefName,commits,files
      ——获取PR标题、正文、基准/头部分支、提交列表和变更文件列表。PR正文通常包含最丰富的「为什么」信息(设计背景、截图、作者考虑过的权衡)——在介绍中引用或总结这些内容。
    • gh pr diff <url>
      ——定义游览范围的统一差异内容。用它来确认完整的变更范围,而不仅仅是
      git diff
      显示的内容。
    • 使用PR的
      baseRefName
      (来自上述JSON结果)作为差异基准——不要默认使用
      master
      /
      main
      git log --reverse <baseRefName>..<headRefName>
      这类命令会按作者顺序遍历PR的提交记录。
    • 由于
      diffity <pr-url>
      已经在本地检出了PR分支,因此可以从工作树中读取源代码文件。
  4. 确定关键位置:找出讲述故事所需的关键文件和行范围——用户需要查看这些内容才能理解答案。
  5. 记录配置依赖:如果行为会根据环境变量、功能标志、配置文件或运行时条件而变化,请记录这些信息。必须在游览中指出这些内容,以便读者理解「当X配置生效时会发生这种情况,但如果设置了Y,流程会在此处不同」。
  6. 规划逻辑顺序:设计逐步构建理解的步骤序列,每个步骤应自然过渡到下一个步骤。
选择步骤的准则
  • 从真实的入口点开始——外部输入进入的位置(HTTP路由、CLI命令、定时任务、Webhook)。配置、模式、常量和辅助函数不是入口点;它们是流程的依赖项。
  • 及时引入基础内容。当流程首次读取模式时,游览该模式;当首次调用辅助函数时,游览该辅助函数;当首次引用配置值时,游览该配置。不要在流程开始前先介绍一堆基础内容。
  • 最多允许一个「定位」步骤(例如,显示所有端点的路由表)在入口点之前。其他所有内容都应在读者刚看到相关内容时引入。
  • 按照实际执行顺序追踪流程。
  • 仅包含理解所需的关键位置——跳过样板代码。
  • 在最终结果处结束(发送响应、持久化数据、渲染UI)。
  • 每个步骤应涵盖单个概念或代码片段。
  • 尽可能包含具体示例(例如:「当用户运行
    diffity main
    时,这一行会调用
    normalizeRef('main')
    ,计算出
    git merge-base main HEAD
    」)。
自上而下,而非自下而上。游览应反映代码运行时的流程,而不是代码的构建顺序。不要按配置→模式→辅助函数→路由→动作的顺序游览。应按路由→动作→(此处出现模式,因为查询读取了它)→(此处出现配置,因为处理器引用了它)→(此处出现辅助函数,因为有代码调用了它)的顺序游览。当每个新内容在相关时刻被引入时,读者能更好地保留上下文。读者应感觉像是坐在你旁边追踪真实的请求,而不是在演示前听一场关于架构的讲座。
处理跨模块流程:当代码路径进入库、实用模块或深度嵌套的抽象层时,决定是否跟随:
  • 跟随:如果该模块的逻辑对理解答案至关重要(例如,自定义中间件转换请求)
  • 总结:如果该模块执行标准或众所周知的功能(例如:「这会调用Express路由器,匹配路径并调用我们的处理器」)——在步骤内容中说明它的作用,但不单独创建步骤
  • 跳过:如果它是纯样板代码或 plumbing(例如,重新导出、仅类型文件)
跨多个文件的模式:当单个变更在N个相似的调用点重复出现时(例如,在8个处理器中添加相同的守卫,在每个路由上注册相同的中间件),不要创建N个步骤。选择最具代表性的文件创建一个步骤,并在内容中列出其他调用点作为跳转链接(例如:「相同的守卫也添加到了X、Y、Z中」)。一个概念对应一个步骤——游览应只教读者一次模式,而不是N次。例外情况:如果其中一个应用与其他应用有细微差别(例如,在转账流程中被调用两次,或使用不同的参数),则为该应用单独创建一个步骤。

Phase 2: Create the tour

阶段2:创建游览

The tour UI has a dedicated explanation panel. The intro (from
tour-start --body
) is displayed as step 0 — the first thing the reader sees, filling the full panel. Each subsequent step shows its narrative in the same panel alongside the highlighted code. Since the panel has generous space, write rich, detailed explanations.
  1. Start the tour with a short topic title and introductory body:
    diffity agent tour-start --topic "<short title>" --body "<intro>" --json
    The
    --topic
    is displayed in the tour panel header — keep it to 3–6 words (e.g. "Authentication Flow", "How Routing Works", "Comment System Architecture"). Do NOT use the user's full question as the topic.
    Writing the intro body (step 0): This is the first thing the reader sees and it fills the entire explanation panel. Use this space for a thorough architectural overview that sets up everything the reader needs before diving into code. Include:
    • The key components/packages/modules involved and their responsibilities
    • How they connect — data flow, call chains, or dependency relationships
    • Key abstractions or patterns the reader should know about
    • A summary flow diagram using bold text (e.g. CLI args → git diff → parser → JSON API → React render)
    • Configuration context — if the feature's behavior depends on config, environment variables, or feature flags, mention them here so the reader knows what mode/state the tour assumes
    If you scoped down a broad question, state what you're covering: "This tour focuses on the OAuth login flow. Token refresh and session management are related but covered separately."
    Use rich markdown formatting — paragraphs, bold,
    code
    , tables, code blocks. This is not a table of contents of what the tour will cover; it's a standalone overview that orients the reader.
    Extract the tour ID from the JSON output.
  2. Add steps in order. For each step:
    diffity agent tour-step --tour <id> --file <path> --line <start> --end-line <end> --body "<narrative>" --annotation "<short label>" --json
    Writing step content:
    • --file
      : Path relative to repo root (e.g.
      src/server.ts
      )
    • --line
      /
      --end-line
      : The exact line range to highlight. Keep it focused on the relevant section.
    • --annotation
      : A short label (3-6 words) shown as the step title. Think of it as a chapter heading.
    • --body
      : The narrative shown in the explanation panel. This has generous space — use it to write thorough explanations using markdown:
    Verify targets before committing to a step. Before calling
    tour-step
    , verify that the
    --file
    path is readable from the repo root and that the function or block you're describing actually lives at the advertised
    --line
    /
    --end-line
    range — read the range, don't trust memory from earlier in the session. The same applies to every
    goto:
    link in the body: a broken goto link is worse than no link because the reader trusts it and gets dropped in the wrong place without any signal that the link is wrong. If you're not sure of the exact line, use plain backtick code instead of a goto link.
    Step body structure. Every step body should follow this arc, in order:
    1. Transition (1 sentence): connect to the previous step — see the examples below.
    2. Explanation (the bulk): what this code does and why it's structured this way — design decisions, trade-offs, concrete examples. Use sub-highlights (
      focus:X-Y
      ) if the range breaks into distinct sections.
    3. Takeaway (1-2 sentences): a gotcha, edge case, or "this is what you'd touch if..." pointer.
    A step body without a transition feels dropped-in; one without a takeaway feels unfinished. Aim for roughly 150-300 words per step body — longer only if the logic genuinely demands it. If your draft is over 400 words, the step is probably trying to cover two things; consider splitting it.
    Step transitions — connecting the narrative: Each step should feel like a natural continuation of the previous one. Start each step body with a transition sentence that connects it to what came before:
    • "Now that we've seen how the request is parsed, let's look at where it gets validated..."
    • "The handler we just saw delegates to this service, which is where the actual business logic lives..."
    • "At this point the data has been transformed and is ready to be persisted — here's how that happens..."
    Never start a step as if the reader arrived out of context. The tour is a story — each step is a chapter, not an isolated paragraph.
    Do:
    • Write in prose paragraphs, supplemented by structured content where it helps
    • Use
      code
      for function names, variables, refs, commands. When referencing a function, class, or code symbol that lives in a known file and line, make it a goto link so the reader can click to jump there. Syntax:
      [`symbolName`](goto:path/to/file.ts:startLine-endLine)
      or
      [`symbolName`](goto:path/to/file.ts:line)
      for a single line. These render as clickable inline code that navigates to the file and highlights the target lines. Example:
      [`handleDragEnd`](goto:src/KanbanContent.jsx:42-58)
      . Use plain backtick code for generic terms, CLI commands, or symbols you haven't located in the codebase.
    • Use bold for key concepts being introduced
    • Explain why the code exists and the design decisions behind it, not just what it does
    • Use concrete examples: "When you run
      diffity main
      , this line calls
      normalizeRef('main')
      which computes
      git merge-base main HEAD
      "
    • Use tables for mappings (input → output, ref → git command)
    • Use code blocks for data structures or command outputs
    • Connect each step to the bigger picture from the intro
    • Call out edge cases and gotchas — if there's a non-obvious behavior, a known limitation, or a "this looks wrong but it's intentional" moment, flag it. These are the things that trip people up when they work on this code later.
    • For large highlighted ranges, use sub-highlight links to focus on specific sub-sections within the step. Syntax:
      [label](focus:startLine-endLine)
      . These render as clickable chips that shift the highlight to the specified lines. Example:
      markdown
      First, the function validates its parameters:
      [Parameter validation](focus:15-22)
      
      Then the core transform processes each entry:
      [Core transform](focus:25-40)
      
      Finally, results are cached before returning:
      [Result caching](focus:42-48)
      Use sub-highlights when a step covers 30+ lines and the narrative naturally breaks into distinct sections. The line ranges must be within the step's
      --line
      /
      --end-line
      range.
    Mermaid diagrams: When a concept is easier to understand visually — architecture relationships, data flows, state machines, sequence diagrams — include a mermaid code block. Don't force diagrams into every step; use them where they genuinely clarify the explanation. Good candidates:
    • The intro (step 0) overview: a flow showing how components connect
    • Steps involving multi-component interactions or request flows
    • State machines or lifecycle transitions
    Choose the most appropriate diagram type:
    • graph TD/LR
      for architecture, module dependencies, data flow
    • sequenceDiagram
      for call chains, request/response flows
    • stateDiagram-v2
      for state machines, lifecycle transitions
    • classDiagram
      for type hierarchies, struct relationships
    • flowchart
      for algorithms, decision trees, control flow
    Keep diagrams concise (under ~12 nodes). They render inline in the tour panel.
    Don't:
    • Write a wall of bullet points — use prose paragraphs with formatting
    • Just describe the syntax — explain the design decisions
    • Repeat information visible in the highlighted code
    • Use headers in step bodies (the annotation serves as the title)
    • Force a diagram into every step — only add one when it genuinely helps
    • Start a step without connecting it to the previous one
  3. Add a conclusion step. The final step of the tour should wrap things up. Reuse the file/line range from the last meaningful step and write a body that:
    • Summarizes the full flow in 2-3 sentences — now that the reader has seen every piece, give them the zoomed-out mental model they can carry forward
    • Highlights the key design decisions — what are the 2-3 most important architectural choices in this code, and why were they made?
    • Points out extension points — if someone wanted to modify or extend this feature, where would they start? What files would they touch?
    • Notes related areas — mention 1-2 related features or flows that connect to this one, so the reader knows where to explore next
    Use the annotation
    "Putting It Together"
    for this step.
  4. Finish the tour:
    diffity agent tour-done --tour <id> --json
游览UI有专门的讲解面板。介绍内容(来自
tour-start --body
)会作为第0步显示——这是读者看到的第一个内容,会填满整个面板。后续每个步骤会在同一个面板中显示讲解内容和对应的高亮代码。由于面板空间充足,请编写详细丰富的解释。
  1. 启动游览,使用简短的主题标题和介绍内容:
    diffity agent tour-start --topic "<简短标题>" --body "<介绍内容>" --json
    --topic
    会显示在游览面板的标题中——请控制在3-6个单词(例如:「认证流程」、「路由工作原理」、「评论系统架构」)。不要将用户的完整问题作为主题。
    编写介绍内容(第0步): 这是读者看到的第一个内容,会填满整个讲解面板。利用这个空间提供全面的架构概述,为读者深入代码做好准备。内容应包括:
    • 涉及的关键组件/包/模块及其职责
    • 它们之间的连接方式——数据流、调用链或依赖关系
    • 读者需要了解的关键抽象或模式
    • 使用粗体文本的总结流程图(例如:CLI参数 → git diff → 解析器 → JSON API → React渲染
    • 配置上下文——如果功能行为依赖于配置、环境变量或功能标志,请在此处说明,以便读者了解游览假设的模式/状态
    如果你缩小了宽泛问题的范围,请说明你将涵盖的内容:「本游览聚焦于OAuth登录流程。令牌刷新和会话管理属于相关内容,但会单独讲解。」
    使用丰富的Markdown格式——段落、粗体、
    代码
    、表格、代码块。这不是游览内容的目录;而是一个独立的概述,用于帮助读者定位。
    从JSON输出中提取游览ID。
  2. 按顺序添加步骤。每个步骤的命令如下:
    diffity agent tour-step --tour <id> --file <路径> --line <起始行> --end-line <结束行> --body "<讲解内容>" --annotation "<简短标签>" --json
    编写步骤内容
    • --file
      :相对于仓库根目录的路径(例如:
      src/server.ts
    • --line
      /
      --end-line
      :需要高亮的精确行范围。请聚焦于相关部分。
    • --annotation
      :简短标签(3-6个单词),作为步骤标题。可将其视为章节标题。
    • --body
      :显示在讲解面板中的内容。空间充足——请使用Markdown编写详细的解释:
    在确定步骤前验证目标。在调用
    tour-step
    前,验证
    --file
    路径是否可从仓库根目录读取,以及你描述的函数或代码块是否确实位于指定的
    --line
    /
    --end-line
    范围——请读取该范围,不要依赖会话早期的记忆。内容中的每个
    goto:
    链接也需要验证:无效的跳转链接比没有链接更糟糕,因为读者会信任它,却被带到错误的位置且没有任何提示。如果你不确定确切的行号,请使用普通的反引号代码,不要使用跳转链接。
    步骤内容结构。每个步骤内容应遵循以下结构,按顺序排列:
    1. 过渡句(1句话):连接上一个步骤——参考下方示例。
    2. 解释(主体内容):这段代码的作用以及为什么这样设计——设计决策、权衡、具体示例。如果范围包含不同的部分,使用子高亮链接(
      focus:X-Y
      )。
    3. 要点总结(1-2句话):一个陷阱、边缘情况或「如果要修改……需要触碰的位置」提示。
    没有过渡句的步骤会显得突兀;没有要点总结的步骤会显得不完整。每个步骤内容的字数应控制在150-300字左右——只有当逻辑确实需要时才可以更长。如果你的草稿超过400字,说明该步骤可能试图涵盖两个内容;考虑拆分步骤。
    步骤过渡——连接叙事: 每个步骤应自然承接上一个步骤。每个步骤内容的开头应使用过渡句连接之前的内容:
    • 「我们已经了解了请求的解析方式,现在来看它的验证过程……」
    • 「我们刚刚看到的处理器委托给了这个服务,这里是实际业务逻辑的所在地……」
    • 「此时数据已经完成转换,准备持久化——下面是具体的实现方式……」
    永远不要让步骤看起来像是读者突然进入了一个无关的上下文。游览是一个故事——每个步骤是一个章节,而不是孤立的段落。
    建议做法
    • 使用散文段落,辅以结构化内容帮助理解
    • 使用
      代码
      格式表示函数名、变量、引用、命令。当引用的函数、类或代码符号位于已知的文件和行号时,将其设置为跳转链接,以便读者点击跳转。语法:
      [`符号名`](goto:path/to/file.ts:起始行-结束行)
      [`符号名`](goto:path/to/file.ts:行号)
      (单行)。这些会渲染为可点击的行内代码,导航到对应文件并高亮目标行。示例:
      [`handleDragEnd`](goto:src/KanbanContent.jsx:42-58)
      。对于通用术语、CLI命令或未在代码库中定位到的符号,使用普通的反引号代码。
    • 使用粗体突出显示新引入的关键概念
    • 解释代码存在的原因和设计决策,而不仅仅是代码的作用
    • 使用具体示例:「当你运行
      diffity main
      时,这一行会调用
      normalizeRef('main')
      ,计算出
      git merge-base main HEAD
    • 使用表格表示映射关系(输入→输出、引用→git命令)
    • 使用代码块表示数据结构或命令输出
    • 将每个步骤与介绍中的全局概述联系起来
    • 指出边缘情况和陷阱——如果存在非明显的行为、已知的限制或「看起来不对但却是故意设计」的情况,请标记出来。这些是后续开发者处理代码时容易出错的地方。
    • 对于较大的高亮范围,使用子高亮链接聚焦于步骤中的特定子部分。语法:
      [标签](focus:起始行-结束行)
      。这些会渲染为可点击的标签,将高亮范围切换到指定行。示例:
      markdown
      首先,函数会验证其参数:
      [参数验证](focus:15-22)
      
      然后核心转换逻辑处理每个条目:
      [核心转换](focus:25-40)
      
      最后,结果会被缓存后返回:
      [结果缓存](focus:42-48)
      当步骤覆盖30行以上且叙事自然分为不同部分时,使用子高亮链接。行范围必须在步骤的
      --line
      /
      --end-line
      范围内。
    Mermaid图表: 当某个概念通过视觉方式更容易理解时——架构关系、数据流、状态机、序列图——可以添加Mermaid代码块。不要强行在每个步骤中添加图表;仅在确实有助于解释时使用。适合的场景:
    • 介绍(第0步)概述:显示组件连接方式的流程图
    • 涉及多组件交互或请求流程的步骤
    • 状态机或生命周期转换
    选择最合适的图表类型:
    • graph TD/LR
      :用于架构、模块依赖、数据流
    • sequenceDiagram
      :用于调用链、请求/响应流程
    • stateDiagram-v2
      :用于状态机、生命周期转换
    • classDiagram
      :用于类型层次结构、结构体关系
    • flowchart
      :用于算法、决策树、控制流
    保持图表简洁(不超过约12个节点)。它们会在游览面板中内联渲染。
    避免做法
    • 写一堆无序列表——使用带格式的散文段落
    • 仅描述语法——解释设计决策
    • 重复高亮代码中可见的信息
    • 在步骤内容中使用标题(标签已作为标题)
    • 强行在每个步骤中添加图表——仅在确实有帮助时添加
    • 步骤开头不连接上一个步骤
  3. 添加结论步骤。游览的最后一步应总结内容。复用最后一个有意义步骤的文件/行范围,编写内容包含:
    • 总结完整流程(2-3句话)——现在读者已经看到了所有内容,给他们一个可以记住的全局思维模型
    • 突出关键设计决策——这段代码中最重要的2-3个架构选择是什么,为什么这样设计?
    • 指出扩展点——如果有人想要修改或扩展这个功能,应该从哪里开始?需要修改哪些文件?
    • 提及相关领域——列出1-2个与该功能相关的其他功能或流程,以便读者知道接下来可以探索哪些内容
    该步骤的标签使用
    "总结回顾"
  4. 完成游览
    diffity agent tour-done --tour <id> --json

Phase 3: Open in browser

阶段3:在浏览器中打开

  1. Get the running instance port from
    diffity list --json
    .
  2. Open the tour:
    open "http://localhost:<port>/tour/<tour-id>"
    (or the appropriate command for the user's OS).
  3. Tell the user the tour is ready:
    Your tour is ready — check your browser.
  1. diffity list --json
    获取运行实例的端口号。
  2. 打开游览:运行
    open "http://localhost:<port>/tour/<tour-id>"
    (或适用于用户操作系统的命令)。
  3. 告知用户游览已准备好:
    你的游览已准备就绪——请查看浏览器。

Concept tours

概念游览

When the user asks about a programming concept rather than a feature or flow (e.g. "closures", "generics", "error handling patterns"), the tour becomes a teaching tool.
How concept tours differ from feature tours:
  • Research phase: Instead of following an execution path, search the codebase for real instances of the concept. Use grep, glob, and file reads to find patterns. Look broadly — closures might appear as callbacks, factory functions, or event handlers.
  • Example selection: Pick 3-8 examples that cover different facets, progressing from simple to complex. Don't show 5 examples of the same usage.
  • Intro body: Write it for someone who may have never encountered this concept. Include: a jargon-free definition, why it exists (what problem it solves), a mental model or analogy, and what syntactic clues to look for.
  • Step bodies: Each step teaches one facet through a real example. Structure as: orient the reader in the code → point out the concept in action → explain why it's used here → key takeaway. Define jargon inline the first time it appears.
  • Progression: First example should make the reader think "oh, that's all it is?" Last example should be the most sophisticated usage.
  • Summary step: Recap 3-5 key rules, list 2-3 common mistakes, suggest related concepts to learn next.
  • Sparse codebases: If fewer than 3 real examples exist, create temporary teaching snippet files, use them as tour steps (clearly labeled as standalone examples), and delete them after the tour is created.
All other tour guidelines (transitions, goto links, sub-highlights, mermaid diagrams, conclusion) still apply.
当用户询问编程概念而非功能或流程时(例如:「closures」、「generics」、「错误处理模式」),游览将成为一个教学工具。
概念游览与功能游览的区别
  • 研究阶段:不跟随执行路径,而是在代码库中搜索该概念的真实实例。使用grep、glob和文件读取来查找模式。广泛搜索——closures可能出现在回调、工厂函数或事件处理器中。
  • 示例选择:选择3-8个涵盖不同方面的示例,从简单到复杂递进。不要展示5个相同用法的示例。
  • 介绍内容:为可能从未接触过该概念的读者编写。内容包括:无术语的定义、该概念存在的原因(解决了什么问题)、思维模型或类比,以及需要注意的语法线索。
  • 步骤内容:每个步骤通过真实示例讲解一个方面。结构为:让读者定位到代码中→指出概念的实际应用→解释此处使用该概念的原因→关键要点总结。首次出现术语时在文中定义。
  • 递进逻辑:第一个示例应让读者觉得「哦,原来这么简单?」。最后一个示例应是最复杂的用法。
  • 总结步骤:回顾3-5个关键规则,列出2-3个常见错误,建议接下来学习的相关概念。
  • 代码库示例不足:如果真实示例少于3个,创建临时的教学代码片段文件,将其作为游览步骤(明确标记为独立示例),并在游览创建完成后删除这些文件。
其他所有游览准则(过渡句、跳转链接、子高亮、Mermaid图表、结论)仍然适用。

Review tours

评审游览

When the user asks for a tour to review a branch, PR, or feature before merge, organize the tour as a request trace through the user-facing flows, not as an architecture walkthrough. This is the mode most likely to produce an audit the reader can act on.
How review tours differ from feature tours:
  • Scope from the diff: The reader wants to audit what's changing. Start by reading
    git diff <base>...HEAD
    (and relevant commits) to know the full surface area. Every meaningful change should be visited; skip only pure boilerplate.
  • Intro structure: State the feature in a paragraph, then include a moving-parts table (area → where → purpose), a high-level flow diagram, and a short configuration-context block (env vars, new constants, behavioral defaults). The intro is where the reader builds the map they'll navigate with.
  • One orientation step allowed: if there's a route table, webhook switch, or other directory-of-endpoints, it can be step 1 as a menu of threads the tour will follow. Everything after that must be flow-driven.
  • One thread at a time: pick the most common user journey first (usually "create → activate → ongoing management"), walk it end-to-end touching foundations just-in-time, then repeat for each remaining thread. Do not interleave threads.
  • Cross-cutting gating at the end: access checks, rate limits, feature flags, or shared guards applied across many actions should come after the main flows so the reader sees what's being gated before they see how it's gated.
  • Conclusion for reviewers: in addition to the usual mental model + extension points, include a "Things to flag in the PR conversation" list — non-obvious trade-offs, defensive code, race windows, stale defaults, non-transactional writes. This is often the most valuable part of a review tour.
All other tour guidelines (transitions, goto links, sub-highlights, mermaid diagrams, conclusion) still apply.
当用户要求在合并前审核分支、PR或功能的游览时,应将游览组织为面向用户流程的请求追踪,而非架构游览。这种模式最有可能生成读者可以采取行动的审核内容。
评审游览与功能游览的区别
  • 由差异内容界定范围:读者想要审核变更内容。首先读取
    git diff <base>...HEAD
    (及相关提交记录),了解完整的变更范围。所有有意义的变更都应被覆盖;仅跳过纯样板代码。
  • 介绍结构:用一段话说明功能,然后添加一个组件表(领域→位置→用途)、高层流程图和简短的配置上下文块(环境变量、新常量、行为默认值)。介绍部分是读者构建导航地图的地方。
  • 允许一个定位步骤:如果存在路由表、Webhook开关或其他端点目录,可以将其作为第1步,作为游览将遵循的线程菜单。之后的所有步骤必须以流程为驱动。
  • 按线程逐一处理:首先选择最常见的用户流程(通常是「创建→激活→持续管理」),从头到尾游览,及时引入基础内容,然后对每个剩余线程重复此过程。不要交错处理线程。
  • 最后处理跨领域的门控:访问检查、速率限制、功能标志或跨多个动作的共享守卫应在主流程之后处理,以便读者先看到被门控的内容,再看到门控的实现方式
  • 评审结论:除了常规的思维模型+扩展点外,还应包含**「PR对话中需要标记的内容」**列表——非明显的权衡、防御性代码、竞争窗口、过时的默认值、非事务性写入。这通常是评审游览中最有价值的部分。
其他所有游览准则(过渡句、跳转链接、子高亮、Mermaid图表、结论)仍然适用。

Quality Checklist

质量检查清单

Before finishing, verify:
  • Intro (step 0) gives a thorough architectural overview, not a table of contents
  • If the question was scoped down, the intro states what is and isn't covered
  • Configuration dependencies (env vars, feature flags, config) are called out where relevant
  • The first code step is a real entry point (route, CLI handler, event handler) — not a config file, schema, or helper
  • Foundation pieces (schema, config, constants, helpers) appear at the step where they're first referenced by the flow, not in a prelude
  • No more than one orientation step precedes the entry point
  • Steps follow the actual execution/data flow, not alphabetical file order
  • Each step starts with a transition that connects it to the previous step
  • Design decisions and "why" are explained, not just "what the code does"
  • Edge cases and gotchas are flagged where they exist
  • No two consecutive steps highlight the same lines in the same file
  • Cross-module jumps are either followed, summarized, or skipped — not left unexplained
  • A conclusion step ties everything together with a mental model, design decisions, and extension points
  • Every function, class, or symbol reference with a known file location uses a goto link
  • Every
    goto:
    link and every
    --file
    /
    --line
    value has been verified against the actual file — no guessed line numbers
  • Repeated patterns (same guard/middleware across N files) are covered in one step, not N steps
  • Step bodies follow transition → explanation → takeaway and sit in the 150-300 word range
  • For review tours: a "Things to flag in the PR conversation" list appears in the conclusion
完成前,请验证:
  • 介绍(第0步)提供了全面的架构概述,而非目录
  • 如果问题被缩小范围,介绍中说明了涵盖和未涵盖的内容
  • 配置依赖(环境变量、功能标志、配置)在相关位置被指出
  • 第一个代码步骤是真实的入口点(路由、CLI处理器、事件处理器)——不是配置文件、模式或辅助函数
  • 基础内容(模式、配置、常量、辅助函数)在流程首次引用它们的步骤中出现,而非在前置部分
  • 入口点之前最多只有一个定位步骤
  • 步骤遵循实际的执行/数据流顺序,而非按文件名字母顺序
  • 每个步骤开头都有连接上一个步骤的过渡句
  • 解释了设计决策和「为什么」,而不仅仅是「代码做了什么」
  • 存在的边缘情况和陷阱被标记出来
  • 没有连续两个步骤高亮同一文件中的相同行
  • 跨模块跳转要么被跟随、总结,要么被跳过——没有未解释的跳转
  • 有一个结论步骤将所有内容整合,包含思维模型、设计决策和扩展点
  • 每个有已知文件位置的函数、类或符号引用都使用了跳转链接
  • 每个
    goto:
    链接和每个
    --file
    /
    --line
    值都已针对实际文件验证过——没有猜测的行号
  • 重复模式(跨N个文件的相同守卫/中间件)在一个步骤中覆盖,而非N个步骤
  • 步骤内容遵循过渡→解释→要点总结的结构,字数在150-300字范围内
  • 对于评审模式:结论中包含「PR对话中需要标记的内容」列表