Code Trace Tree

---

Trace code in a tree structure with AI support. Build and display code workflows as nested trace points (lines, files, and directories) so you can follow the flow and jump back to source anytime. Double-click any trace point to navigate to its source, with support for multiple trace levels.

Use it manually or pair it with the Agent Skill so coding agents such as Claude Code, Cursor, or Gemini CLI can search, add, move, and rebind traces, and notify the IDE to refresh.
This extension does not include an AI agent; install your preferred agent separately, then install the code-trace-tree skill. Once installed, the agent can auto-load it when relevant.

Preview

How to use

1. Open the Code Trace Tree activity bar view.
2. Use the Profile webview above the tree to switch trees, add a profile, or delete one.
3. In the editor, right-click a line in a workspace file and choose:
   • Create a Root Code Trace Point — start a new line-level trace tree (selects the new node; does not jump)
   • Create Code Trace Points (Under selected) — add a child under the selected node(s) in the tree (parent expands; new node is selected)
   • Update Selected Trace Points — move the selected tree node(s) to the current line
   • Go to the Trace Point in the tree panel (Only matching) — selects and reveals matching node(s) for the current line; does nothing when none match
4. In the Explorer, right-click a file or directory inside the workspace and choose:
   • Create a Root File/Directory Trace Point — add a file or directory node at the root
   • Create File/Directory Trace Point (Under selected) — add that file/directory under the selected tree node(s) (parent expands automatically)
5. Single-click a node to select it; double-click to jump to that location (line, file, or Explorer for folders). Double-click restores the prior expand/collapse state if the host toggled it (brief flicker possible).
6. Right-click a node and choose Go to Trace Point (first item) to jump to that location (same as double-click).
7. Right-click a node and choose Copy Label to copy its display text, e.g. test233 (TestControllerWebFlux.java:54).
8. Right-click a line trace point and choose Show Line Content to view its saved trimmed line text.
9. Use the view title-bar actions to expand/collapse, Recheck Trace Availability, Remove Invalid Trace Points, reorder, highlight, prompt for name on create, or edit descriptions. Agent Skill installs or updates the bundled skill for coding agents. Import/Export live under Advanced Settings. Drag a node onto another to reparent it (the target expands automatically).

TIPS: Prefer creating line trace points on text that is unique in that file (or uncommon), not generic lines like } or return;. Empty lines are not allowed. The extension stores occurrence counts to re-find the line after it moves; unique content rebinds more reliably.

Agent Skill

This extension does not ship an AI agent. Install your preferred coding agent, then install the code-trace-tree skill. Once installed, the agent can auto-load it when your request is relevant, and the IDE syncs the agent's trace-point changes as they are written. The skill is general — any agent that can load skill folders can use it.

Same agents as npx skills (global install). Examples:

• Claude Code
• Cursor
• GitHub Copilot (agent skills)
• Codex
• Gemini CLI

The skill lets the agent:

• Resolve the bound global storage XML for the project
• Search, add, move, and delete trace points
• Rebind line locations after source edits on disk
• Ask the IDE to reload / refresh extension data
• Select or navigate to nodes in the Code Trace Tree view

Agent Skill Installation

Python 3 required: skill scripts need Python 3 on your PATH (python3 or python). Choose agents and Install / Update stay disabled until Python 3 is found. Install Python 3, add it to PATH, then restart the IDE.

Open the Code Trace Tree view and click Agent Skill on the toolbar (cloud download icon):

• The status page shows the bundled skill version, whether Python 3 is on PATH, and which agents already have the skill.
• Choose agents to install — pick agents that do not have it yet.
• Install / Update — copy the bundled code-trace-tree skill into each listed agent's global skills folder (for example ~/.cursor/skills/code-trace-tree).
• Remove from installed agents — delete those copies.

On first project open, if a detected agent is missing the skill or is behind the bundled version, the extension shows a notification (once per skill version; Dismiss or opening the status page is remembered in global settings.xml).

ZIP and npx skills (including a project-local copy) remain on code-trace-tree-skill if you need them.

How to use the skill

Once the skill is installed, use it in your agent chat:

Help me generate some simple trace points related to the current topic.

Add simple trace points along the call path of method `test`.

Storage

Trace data is stored in a shared global folder:

• Windows: %LOCALAPPDATA%\code-trace-tree
• macOS: ~/Library/Application Support/code-trace-tree
• Linux: $XDG_CONFIG_HOME/code-trace-tree or ~/.config/code-trace-tree

Development

• Open the project root in VS Code / Cursor
• Install deps: cd main && yarn install
• Press F5 to launch an Extension Development Host
• Shared agent skill: https://github.com/saidake/code-trace-tree-skill (copy in skills/code-trace-tree/ for zip packaging)

License

This project is licensed under the MIT License.