dialog-tree

Dialog Tree

Why

A "question → clarification → clarification" conversation is a depth-first search: the user dives into one branch while the unexplored sibling branches silently pile up in their head. When the tree gets deep, backtracking becomes painful. This skill offloads that bookkeeping into files: an HTML page in the project repo that shows every branch of the discussion as a tree, lets the user mark branches resolved, and delete dead ones.

The tree is built by the assistant, not by the app: the viewer only renders the data file. "Update the tree" means appending nodes to it. The tree doubles as a session conspectus — after context loss (compaction, new session) reading the data file restores the map of what was discussed, how it branched, and what is still open.

Data / view split, file naming

Two files side by side in the project, named after the treeId — a generic name like dialog-tree.html collides as soon as one machine, one static server, or several sessions host more than one tree:

• <treeId>-tree.html — the view, a generic dependency-free renderer. Never edited per-project; upgrading the skill = replacing this file wholesale (any file name keeps working).
• <treeId>-tree-data.js — the data: META, NODES, optional STRINGS (UI localization). The only file the assistant edits. Loaded via a script tag, which works both over http://localhost and from disk (file:// blocks fetch of JSON, but not script tags — that's why the data is a .js file, not .json).

The view derives the data file name from its own: <name>.html → <name>-data.js. So the two names must stay paired — when renaming, rename both, and never rename after the tree is in use without telling the user (bookmarked URLs break; localStorage marks are keyed by origin + treeId, so a file rename itself does not lose marks).

Set up a tree in a project

1. Copy assets/dialog-tree.html and assets/dialog-tree-data-template.js (next to this SKILL.md) into the project repo as <treeId>-tree.html and <treeId>-tree-data.js (e.g. my-api-tree.html + my-api-tree-data.js). If there is no repo, ask the user where to put them.
2. In META (data file) set:
   • treeId — a unique project identifier (kebab-case, e.g. the repo name). It keys the localStorage of the user's marks: two trees sharing a treeId, opened from disk, will corrupt each other's marks.
   • builtUpTo — a human-readable marker of how far into the conversation the tree is built (date + a short quote of the last message that was decomposed).
3. Decompose the conversation so far into NODES (rules below).
4. Show the tree. JS does not execute in chat file viewers, nor in the Claude Code Browser pane for file:// paths outside the project folder — the page looks empty there:
   • Browser pane (preferred in Claude Code): start a static server over the directory via preview_start {name:"<name>"}, open http://localhost:<port>/<treeId>-tree.html, and give the user that URL — the user never opens files by hand. Start the server at the beginning of every session that works with the tree. Config in .claude/launch.json of the working directory (create it if missing; pick the port once and never change it — the user's marks are bound to the localhost:<port> origin):