system-diff 0.1.0__tar.gz → 0.3.0__tar.gz
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- system_diff-0.3.0/.claude-plugin/marketplace.json +16 -0
- system_diff-0.3.0/PKG-INFO +205 -0
- system_diff-0.3.0/README.md +173 -0
- system_diff-0.3.0/docs/diagrams/system.json +1055 -0
- system_diff-0.3.0/docs/diagrams/system.svg +160 -0
- system_diff-0.3.0/mods/system-diff/.claude-plugin/plugin.json +11 -0
- system_diff-0.3.0/mods/system-diff/hooks/hooks.json +1 -0
- system_diff-0.3.0/mods/system-diff/hooks/page.tsx +219 -0
- system_diff-0.3.0/mods/system-diff/hooks/pane.test.tsx +183 -0
- system_diff-0.3.0/mods/system-diff/hooks/register.tsx +299 -0
- system_diff-0.3.0/mods/system-diff/types/index.d.ts +39 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/pyproject.toml +3 -2
- {system_diff-0.1.0 → system_diff-0.3.0}/src/system_diff/__init__.py +1 -1
- system_diff-0.3.0/src/system_diff/activity.py +259 -0
- system_diff-0.3.0/src/system_diff/agent.py +436 -0
- system_diff-0.3.0/src/system_diff/architecture.py +324 -0
- system_diff-0.3.0/src/system_diff/canvas.py +521 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/src/system_diff/cli.py +91 -5
- system_diff-0.3.0/src/system_diff/companion.py +164 -0
- system_diff-0.3.0/src/system_diff/compare.py +183 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/src/system_diff/config.py +29 -8
- system_diff-0.3.0/src/system_diff/design.py +486 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/src/system_diff/diff.py +16 -1
- system_diff-0.3.0/src/system_diff/extract.py +1048 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/src/system_diff/graph.py +128 -2
- system_diff-0.3.0/src/system_diff/inside.py +209 -0
- system_diff-0.3.0/src/system_diff/learn.py +439 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/src/system_diff/mcp_server.py +56 -22
- {system_diff-0.1.0 → system_diff-0.3.0}/src/system_diff/narrate.py +14 -7
- system_diff-0.3.0/src/system_diff/pane.py +383 -0
- system_diff-0.3.0/src/system_diff/panel.py +244 -0
- system_diff-0.3.0/src/system_diff/profile.py +41 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/src/system_diff/sources.py +8 -0
- system_diff-0.3.0/src/system_diff/statusline.py +94 -0
- system_diff-0.3.0/src/system_diff/textmap.py +313 -0
- system_diff-0.3.0/src/system_diff/topics.py +261 -0
- system_diff-0.3.0/src/system_diff/tui.py +388 -0
- system_diff-0.3.0/src/system_diff/watch.py +341 -0
- system_diff-0.3.0/system-diff.toml +239 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/tests/conftest.py +8 -0
- system_diff-0.3.0/tests/test_capture.py +214 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/tests/test_checkpoint_watch_mcp.py +9 -8
- system_diff-0.3.0/tests/test_design_and_pane.py +227 -0
- system_diff-0.3.0/tests/test_terminal_and_learning.py +494 -0
- system_diff-0.1.0/PKG-INFO +0 -131
- system_diff-0.1.0/README.md +0 -102
- system_diff-0.1.0/docs/diagrams/system.json +0 -236
- system_diff-0.1.0/docs/diagrams/system.svg +0 -97
- system_diff-0.1.0/src/system_diff/agent.py +0 -197
- system_diff-0.1.0/src/system_diff/compare.py +0 -105
- system_diff-0.1.0/src/system_diff/extract.py +0 -279
- system_diff-0.1.0/src/system_diff/watch.py +0 -177
- system_diff-0.1.0/system-diff.toml +0 -105
- {system_diff-0.1.0 → system_diff-0.3.0}/.gitattributes +0 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/.github/workflows/ci.yml +0 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/.github/workflows/release.yml +0 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/.github/workflows/system-diff.yml +0 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/.gitignore +0 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/LICENSE +0 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/src/system_diff/__main__.py +0 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/src/system_diff/pictures.py +0 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/src/system_diff/png.py +0 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/src/system_diff/readme.py +0 -0
- {system_diff-0.1.0 → system_diff-0.3.0}/tests/test_system_diff.py +0 -0
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "system-diff",
|
|
3
|
+
"owner": {
|
|
4
|
+
"name": "simplifiedmachine"
|
|
5
|
+
},
|
|
6
|
+
"metadata": {
|
|
7
|
+
"description": "system-diff for Claude Code: see what Claude is doing to your system as it works, and learn it as you go."
|
|
8
|
+
},
|
|
9
|
+
"plugins": [
|
|
10
|
+
{
|
|
11
|
+
"name": "system-diff",
|
|
12
|
+
"source": "./mods/system-diff",
|
|
13
|
+
"description": "A System diff pane beside the chat: what Claude is doing to your system as it works, what needs your attention, a diagram to walk with the arrow keys, and topics to learn."
|
|
14
|
+
}
|
|
15
|
+
]
|
|
16
|
+
}
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
Metadata-Version: 2.5
|
|
2
|
+
Name: system-diff
|
|
3
|
+
Version: 0.3.0
|
|
4
|
+
Summary: Draws your system from its code (parts, entry points, data, outside systems) and what each change adds, changes or removes. No dependencies; SVG pictures for PRs and READMEs.
|
|
5
|
+
Project-URL: Homepage, https://github.com/simplifiedmachine/system-diff
|
|
6
|
+
Project-URL: Documentation, https://github.com/simplifiedmachine/system-diff/wiki
|
|
7
|
+
Project-URL: Issues, https://github.com/simplifiedmachine/system-diff/issues
|
|
8
|
+
Author: simplifiedmachine
|
|
9
|
+
License-Expression: MIT
|
|
10
|
+
License-File: LICENSE
|
|
11
|
+
Keywords: architecture,code-review,code-visualization,developer-tools,diagrams,pull-requests,system-design
|
|
12
|
+
Classifier: Development Status :: 3 - Alpha
|
|
13
|
+
Classifier: Environment :: Console
|
|
14
|
+
Classifier: Intended Audience :: Developers
|
|
15
|
+
Classifier: Operating System :: OS Independent
|
|
16
|
+
Classifier: Programming Language :: Python :: 3
|
|
17
|
+
Classifier: Programming Language :: Python :: 3 :: Only
|
|
18
|
+
Classifier: Topic :: Software Development :: Documentation
|
|
19
|
+
Classifier: Topic :: Software Development :: Quality Assurance
|
|
20
|
+
Requires-Python: >=3.11
|
|
21
|
+
Provides-Extra: dev
|
|
22
|
+
Requires-Dist: mcp>=1.10; extra == 'dev'
|
|
23
|
+
Requires-Dist: pytest>=8; extra == 'dev'
|
|
24
|
+
Requires-Dist: textual>=1.0; extra == 'dev'
|
|
25
|
+
Provides-Extra: mcp
|
|
26
|
+
Requires-Dist: mcp>=1.10; extra == 'mcp'
|
|
27
|
+
Provides-Extra: png
|
|
28
|
+
Requires-Dist: playwright>=1.40; extra == 'png'
|
|
29
|
+
Provides-Extra: tui
|
|
30
|
+
Requires-Dist: textual>=1.0; extra == 'tui'
|
|
31
|
+
Description-Content-Type: text/markdown
|
|
32
|
+
|
|
33
|
+
# system-diff
|
|
34
|
+
|
|
35
|
+
**See what Claude Code is doing to your system while it works, and learn your system as it goes.**
|
|
36
|
+
|
|
37
|
+
Claude Code edits files; system-diff tells you what those edits do to the *system*: which part Claude is working on
|
|
38
|
+
and what that part is, the endpoints, connections, stored data and outside systems it adds, changes or removes, why
|
|
39
|
+
each of those matters, and when one needs you to look before Claude goes on. Right in Claude Code, beside the chat.
|
|
40
|
+
So you follow what is happening, learn the parts and the technology behind them, and steer Claude well when it asks.
|
|
41
|
+
|
|
42
|
+
<!-- system-map:begin -->
|
|
43
|
+

|
|
44
|
+
|
|
45
|
+
<details><summary>How this map is made</summary>
|
|
46
|
+
|
|
47
|
+
Regenerated by `system-diff` from the code: the parts and their columns from `system-diff.toml`, the connections from imports, API calls and the settings each part reads, the outside systems from the settings a deploy configuration sets, and the tables from the migrations. Parts used everywhere are drawn without the arrows into them, and each part keeps only its strongest connections; `system-diff map` writes all of them to `system.json`.
|
|
48
|
+
|
|
49
|
+
Read by the code but set by no deploy configuration, so not drawn: Headless Chromium (Docker or Playwright) (png).
|
|
50
|
+
|
|
51
|
+
</details>
|
|
52
|
+
<!-- system-map:end -->
|
|
53
|
+
|
|
54
|
+
## In Claude Code
|
|
55
|
+
|
|
56
|
+
```sh
|
|
57
|
+
pipx install "system-diff[mcp,tui]"
|
|
58
|
+
system-diff setup claude --no-status-line # the hooks, a skill and the MCP server (--scope project, --undo)
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Then, in Claude Code, the System diff pane:
|
|
62
|
+
|
|
63
|
+
```
|
|
64
|
+
/plugin marketplace add simplifiedmachine/system-diff
|
|
65
|
+
/plugin install system-diff
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
Python 3.11 or newer. Claude Code opens the pane by itself when the terminal is wide enough; `/system-diff` opens
|
|
69
|
+
it again after you close it. (Should another marketplace you added also have a plugin called system-diff,
|
|
70
|
+
`/plugin install system-diff@system-diff` names this one.) From a clone, `claude --plugin-dir mods/system-diff`
|
|
71
|
+
loads it for one launch. Upgrading from an earlier version: run `system-diff setup claude` again; it updates the
|
|
72
|
+
hooks it added before, and frees `/system-diff` for the pane.
|
|
73
|
+
|
|
74
|
+
### The System diff pane
|
|
75
|
+
|
|
76
|
+
A tab beside Claude Code's own file diff: your system drawn the way a system designer draws it, live, with what
|
|
77
|
+
Claude is changing in it. It opens as wide as Claude Code docks a pane (45% of the terminal); drag its edge to narrow
|
|
78
|
+
it.
|
|
79
|
+
|
|
80
|
+
- **Now** follows Claude, in the order your attention needs it:
|
|
81
|
+
- **What Claude is doing** ("● Claude is working ✎ Editing API") and what you asked.
|
|
82
|
+
- **▲ Needs your attention**, only when something does. That means: an endpoint removed that a page still calls, a
|
|
83
|
+
new way to change state, a dependency cycle, a dependency pointing up the layers, a new outside system inside a
|
|
84
|
+
request, a table dropped, or a setting no deploy sets. Each comes with what it trades off and the question to ask
|
|
85
|
+
Claude before it goes on.
|
|
86
|
+
- **The system diagram**:
|
|
87
|
+
- What it draws: who uses the system (people, programs, AI agents), where they come in, the containers that do
|
|
88
|
+
the work with their components inside, and the data and outside systems it relies on. Flows join them, named
|
|
89
|
+
for what they carry (HTTPS, MCP, SQL, a terminal).
|
|
90
|
+
- Colours: Claude's component is lit in blue; what this turn added is green, changed yellow, removed red.
|
|
91
|
+
- **Pick:** click the diagram, then ← ↑ ↓ → picks a box. Its flows in and out light up with the boxes at their
|
|
92
|
+
other ends, and a line says what it uses and what uses it.
|
|
93
|
+
- **Zoom:** Enter (or a second click) zooms in on a container's components, with the lines between them. `b` goes
|
|
94
|
+
back, `f` follows Claude again.
|
|
95
|
+
- **Scroll:** `[` `]` or shift ← → scroll a wide diagram across; shift ↑ ↓, Page Up/Down or the wheel scroll a
|
|
96
|
+
tall one.
|
|
97
|
+
- **This turn**: each change to the design, and what it trades off.
|
|
98
|
+
- **Learn**: how the part Claude works on is designed.
|
|
99
|
+
- The principle its place calls for: an edge of the system, an adapter, a shared foundation, a coordinator.
|
|
100
|
+
- Where it sits, and what to watch, such as cycles and layering.
|
|
101
|
+
- The basics of a technology only where it is new: new to the system this turn, or one you marked new to you.
|
|
102
|
+
- **What just happened**: the system diff, step by step. Each change an edit made is said in plain words, with why
|
|
103
|
+
it matters and the file it came from. Edits that changed no structure are told once.
|
|
104
|
+
- **Map**: the system diagram since your checkpoint, every box to pick and zoom into.
|
|
105
|
+
- **Changes**: every change since your checkpoint, and this turn, read for design. Once you have understood it, tell
|
|
106
|
+
Claude "mark it as seen" (or run `system-diff checkpoint`): from then on you see only what is new to you.
|
|
107
|
+
- **Topics**: the stack, technology by technology. Pick one and the parts that use it light up in the diagram; space
|
|
108
|
+
marks it new to you, so Learn explains its basics.
|
|
109
|
+
|
|
110
|
+
One meaning per colour, so your eye goes where it should:
|
|
111
|
+
|
|
112
|
+
- **Blue:** where Claude is and what you picked.
|
|
113
|
+
- **Yellow:** what changed and what needs you.
|
|
114
|
+
- **Green:** what is new, done or to learn.
|
|
115
|
+
- **White:** what to read.
|
|
116
|
+
- **Gray:** the background (why, when, labels).
|
|
117
|
+
- **Red:** only what was taken away.
|
|
118
|
+
|
|
119
|
+
`n` `m` `c` `t` switch views.
|
|
120
|
+
|
|
121
|
+
### In the conversation
|
|
122
|
+
|
|
123
|
+
- **After an edit that changes the system's structure**, one line under it: "System diff: API now answers GET
|
|
124
|
+
/health · a new way in: it needs the same checks as the others". Edits that change no structure stay quiet.
|
|
125
|
+
- **At the end of each turn**, one line on what the turn did to the system, or which parts it edited when the
|
|
126
|
+
structure stayed the same; nothing for a turn that only talked.
|
|
127
|
+
- **Ask Claude** "what is the API part?" or "what does this change do?": the MCP server gives it `explain` (the facts
|
|
128
|
+
to teach from, and a diagram to show you), `system_diff` (the exact list of changes; `base: turn` for this turn
|
|
129
|
+
only), `system_map`, `draw` (pictures of a process or a sequence of calls) and `checkpoint` (mark what you have
|
|
130
|
+
seen, so the next diff shows only what is new to you).
|
|
131
|
+
|
|
132
|
+
The pane and the hooks send nothing anywhere: the working tree is read as a snapshot (untracked files included)
|
|
133
|
+
without touching your index, HEAD or branches; the checkpoint and the start of each turn live under
|
|
134
|
+
`refs/worktree/system-diff/` (each worktree its own, for Claude sessions in parallel), and what the hooks note under
|
|
135
|
+
`.git/system-diff/`, never pushed. Only the optional lessons you ask an LLM for (`e` in the terminal view, `diff
|
|
136
|
+
--narrate`) go to your own LLM, and they carry the structure, never the code.
|
|
137
|
+
|
|
138
|
+
## Configuration
|
|
139
|
+
|
|
140
|
+
With no config, system-diff makes a first picture from the code:
|
|
141
|
+
|
|
142
|
+
- **Parts:** every folder of code is a part named by its path; tests and build tooling are left out.
|
|
143
|
+
- **Front end:** a front end goes under What people use, and the paths it calls are matched to the endpoints that
|
|
144
|
+
answer them.
|
|
145
|
+
- **Data and outside systems:** databases and outside services are found from the compose file and the client
|
|
146
|
+
libraries the code imports; tables from the migrations and the models.
|
|
147
|
+
- **Who uses it:** a front end's people, an API's callers, an MCP server's AI agents, a command line's developer.
|
|
148
|
+
|
|
149
|
+
A `system-diff.toml` at the repository root names the parts and says what is what:
|
|
150
|
+
|
|
151
|
+
```toml
|
|
152
|
+
tests = ["tests/**"]
|
|
153
|
+
|
|
154
|
+
[code]
|
|
155
|
+
roots = ["app/", "web/src/"]
|
|
156
|
+
|
|
157
|
+
[[actors]] # who uses the system, drawn first
|
|
158
|
+
id = "customers"
|
|
159
|
+
label = "Customers"
|
|
160
|
+
uses = ["web:browser"] # part: what the flow carries
|
|
161
|
+
|
|
162
|
+
[[components]]
|
|
163
|
+
id = "api"
|
|
164
|
+
label = "API"
|
|
165
|
+
kind = "interface" # ui | interface | logic | data: the column it is drawn in
|
|
166
|
+
group = "Backend" # the container it is drawn in, with the others of its group
|
|
167
|
+
about = "orders and payments"
|
|
168
|
+
paths = ["app/api/**"]
|
|
169
|
+
|
|
170
|
+
[[externals]]
|
|
171
|
+
id = "postgres"
|
|
172
|
+
label = "PostgreSQL"
|
|
173
|
+
shape = "db"
|
|
174
|
+
env = ["DATABASE_URL"] # the settings that reach it
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
Every key, and how the code is read: [the wiki](https://github.com/simplifiedmachine/system-diff/wiki).
|
|
178
|
+
|
|
179
|
+
## Add-ons
|
|
180
|
+
|
|
181
|
+
The same engine, outside the pane. Deterministic: the same code gives the same picture, byte for byte, and a part
|
|
182
|
+
that did not change keeps its place.
|
|
183
|
+
|
|
184
|
+
- **Pull requests:** every pull request gets its system diff as a comment, and CI fails when the README's map is out
|
|
185
|
+
of date (`.github/workflows/system-diff.yml`, which you can copy). This repository runs it on itself.
|
|
186
|
+
- **Command line:**
|
|
187
|
+
```sh
|
|
188
|
+
system-diff map --dir . --out docs/diagrams # the system as it is now: system.json, system.svg
|
|
189
|
+
system-diff diff --base origin/main --out out # what this branch does to it: headline, plan, diff.svg
|
|
190
|
+
system-diff diff --base HEAD --head . --out out # what your uncommitted work does to it
|
|
191
|
+
system-diff readme --json docs/diagrams/system.json # keep the map in README.md current
|
|
192
|
+
system-diff show API # one part zoomed in, and what it is, in any terminal
|
|
193
|
+
system-diff draw SPEC.json # hand-made pictures in the same look
|
|
194
|
+
```
|
|
195
|
+
`diff --narrate` adds a plain-words summary from your own LLM; `[png]` adds PNG output.
|
|
196
|
+
- **Terminal view** (`system-diff tui`): the pane's views as a full-screen terminal app, for a terminal beside any
|
|
197
|
+
agent. It opens by itself next to Claude Code in tmux, zellij, WezTerm, kitty and Windows Terminal; in VS Code,
|
|
198
|
+
setup adds a task that opens it with the folder.
|
|
199
|
+
- **Status line** (`system-diff setup claude` without `--no-status-line`): the pane's first lines under Claude Code's
|
|
200
|
+
prompt, for when the pane is not open.
|
|
201
|
+
- **Browser page** (`system-diff watch`): the same with the SVG pictures, at http://127.0.0.1:8765/.
|
|
202
|
+
|
|
203
|
+
## License
|
|
204
|
+
|
|
205
|
+
MIT
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
# system-diff
|
|
2
|
+
|
|
3
|
+
**See what Claude Code is doing to your system while it works, and learn your system as it goes.**
|
|
4
|
+
|
|
5
|
+
Claude Code edits files; system-diff tells you what those edits do to the *system*: which part Claude is working on
|
|
6
|
+
and what that part is, the endpoints, connections, stored data and outside systems it adds, changes or removes, why
|
|
7
|
+
each of those matters, and when one needs you to look before Claude goes on. Right in Claude Code, beside the chat.
|
|
8
|
+
So you follow what is happening, learn the parts and the technology behind them, and steer Claude well when it asks.
|
|
9
|
+
|
|
10
|
+
<!-- system-map:begin -->
|
|
11
|
+

|
|
12
|
+
|
|
13
|
+
<details><summary>How this map is made</summary>
|
|
14
|
+
|
|
15
|
+
Regenerated by `system-diff` from the code: the parts and their columns from `system-diff.toml`, the connections from imports, API calls and the settings each part reads, the outside systems from the settings a deploy configuration sets, and the tables from the migrations. Parts used everywhere are drawn without the arrows into them, and each part keeps only its strongest connections; `system-diff map` writes all of them to `system.json`.
|
|
16
|
+
|
|
17
|
+
Read by the code but set by no deploy configuration, so not drawn: Headless Chromium (Docker or Playwright) (png).
|
|
18
|
+
|
|
19
|
+
</details>
|
|
20
|
+
<!-- system-map:end -->
|
|
21
|
+
|
|
22
|
+
## In Claude Code
|
|
23
|
+
|
|
24
|
+
```sh
|
|
25
|
+
pipx install "system-diff[mcp,tui]"
|
|
26
|
+
system-diff setup claude --no-status-line # the hooks, a skill and the MCP server (--scope project, --undo)
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Then, in Claude Code, the System diff pane:
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
/plugin marketplace add simplifiedmachine/system-diff
|
|
33
|
+
/plugin install system-diff
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Python 3.11 or newer. Claude Code opens the pane by itself when the terminal is wide enough; `/system-diff` opens
|
|
37
|
+
it again after you close it. (Should another marketplace you added also have a plugin called system-diff,
|
|
38
|
+
`/plugin install system-diff@system-diff` names this one.) From a clone, `claude --plugin-dir mods/system-diff`
|
|
39
|
+
loads it for one launch. Upgrading from an earlier version: run `system-diff setup claude` again; it updates the
|
|
40
|
+
hooks it added before, and frees `/system-diff` for the pane.
|
|
41
|
+
|
|
42
|
+
### The System diff pane
|
|
43
|
+
|
|
44
|
+
A tab beside Claude Code's own file diff: your system drawn the way a system designer draws it, live, with what
|
|
45
|
+
Claude is changing in it. It opens as wide as Claude Code docks a pane (45% of the terminal); drag its edge to narrow
|
|
46
|
+
it.
|
|
47
|
+
|
|
48
|
+
- **Now** follows Claude, in the order your attention needs it:
|
|
49
|
+
- **What Claude is doing** ("● Claude is working ✎ Editing API") and what you asked.
|
|
50
|
+
- **▲ Needs your attention**, only when something does. That means: an endpoint removed that a page still calls, a
|
|
51
|
+
new way to change state, a dependency cycle, a dependency pointing up the layers, a new outside system inside a
|
|
52
|
+
request, a table dropped, or a setting no deploy sets. Each comes with what it trades off and the question to ask
|
|
53
|
+
Claude before it goes on.
|
|
54
|
+
- **The system diagram**:
|
|
55
|
+
- What it draws: who uses the system (people, programs, AI agents), where they come in, the containers that do
|
|
56
|
+
the work with their components inside, and the data and outside systems it relies on. Flows join them, named
|
|
57
|
+
for what they carry (HTTPS, MCP, SQL, a terminal).
|
|
58
|
+
- Colours: Claude's component is lit in blue; what this turn added is green, changed yellow, removed red.
|
|
59
|
+
- **Pick:** click the diagram, then ← ↑ ↓ → picks a box. Its flows in and out light up with the boxes at their
|
|
60
|
+
other ends, and a line says what it uses and what uses it.
|
|
61
|
+
- **Zoom:** Enter (or a second click) zooms in on a container's components, with the lines between them. `b` goes
|
|
62
|
+
back, `f` follows Claude again.
|
|
63
|
+
- **Scroll:** `[` `]` or shift ← → scroll a wide diagram across; shift ↑ ↓, Page Up/Down or the wheel scroll a
|
|
64
|
+
tall one.
|
|
65
|
+
- **This turn**: each change to the design, and what it trades off.
|
|
66
|
+
- **Learn**: how the part Claude works on is designed.
|
|
67
|
+
- The principle its place calls for: an edge of the system, an adapter, a shared foundation, a coordinator.
|
|
68
|
+
- Where it sits, and what to watch, such as cycles and layering.
|
|
69
|
+
- The basics of a technology only where it is new: new to the system this turn, or one you marked new to you.
|
|
70
|
+
- **What just happened**: the system diff, step by step. Each change an edit made is said in plain words, with why
|
|
71
|
+
it matters and the file it came from. Edits that changed no structure are told once.
|
|
72
|
+
- **Map**: the system diagram since your checkpoint, every box to pick and zoom into.
|
|
73
|
+
- **Changes**: every change since your checkpoint, and this turn, read for design. Once you have understood it, tell
|
|
74
|
+
Claude "mark it as seen" (or run `system-diff checkpoint`): from then on you see only what is new to you.
|
|
75
|
+
- **Topics**: the stack, technology by technology. Pick one and the parts that use it light up in the diagram; space
|
|
76
|
+
marks it new to you, so Learn explains its basics.
|
|
77
|
+
|
|
78
|
+
One meaning per colour, so your eye goes where it should:
|
|
79
|
+
|
|
80
|
+
- **Blue:** where Claude is and what you picked.
|
|
81
|
+
- **Yellow:** what changed and what needs you.
|
|
82
|
+
- **Green:** what is new, done or to learn.
|
|
83
|
+
- **White:** what to read.
|
|
84
|
+
- **Gray:** the background (why, when, labels).
|
|
85
|
+
- **Red:** only what was taken away.
|
|
86
|
+
|
|
87
|
+
`n` `m` `c` `t` switch views.
|
|
88
|
+
|
|
89
|
+
### In the conversation
|
|
90
|
+
|
|
91
|
+
- **After an edit that changes the system's structure**, one line under it: "System diff: API now answers GET
|
|
92
|
+
/health · a new way in: it needs the same checks as the others". Edits that change no structure stay quiet.
|
|
93
|
+
- **At the end of each turn**, one line on what the turn did to the system, or which parts it edited when the
|
|
94
|
+
structure stayed the same; nothing for a turn that only talked.
|
|
95
|
+
- **Ask Claude** "what is the API part?" or "what does this change do?": the MCP server gives it `explain` (the facts
|
|
96
|
+
to teach from, and a diagram to show you), `system_diff` (the exact list of changes; `base: turn` for this turn
|
|
97
|
+
only), `system_map`, `draw` (pictures of a process or a sequence of calls) and `checkpoint` (mark what you have
|
|
98
|
+
seen, so the next diff shows only what is new to you).
|
|
99
|
+
|
|
100
|
+
The pane and the hooks send nothing anywhere: the working tree is read as a snapshot (untracked files included)
|
|
101
|
+
without touching your index, HEAD or branches; the checkpoint and the start of each turn live under
|
|
102
|
+
`refs/worktree/system-diff/` (each worktree its own, for Claude sessions in parallel), and what the hooks note under
|
|
103
|
+
`.git/system-diff/`, never pushed. Only the optional lessons you ask an LLM for (`e` in the terminal view, `diff
|
|
104
|
+
--narrate`) go to your own LLM, and they carry the structure, never the code.
|
|
105
|
+
|
|
106
|
+
## Configuration
|
|
107
|
+
|
|
108
|
+
With no config, system-diff makes a first picture from the code:
|
|
109
|
+
|
|
110
|
+
- **Parts:** every folder of code is a part named by its path; tests and build tooling are left out.
|
|
111
|
+
- **Front end:** a front end goes under What people use, and the paths it calls are matched to the endpoints that
|
|
112
|
+
answer them.
|
|
113
|
+
- **Data and outside systems:** databases and outside services are found from the compose file and the client
|
|
114
|
+
libraries the code imports; tables from the migrations and the models.
|
|
115
|
+
- **Who uses it:** a front end's people, an API's callers, an MCP server's AI agents, a command line's developer.
|
|
116
|
+
|
|
117
|
+
A `system-diff.toml` at the repository root names the parts and says what is what:
|
|
118
|
+
|
|
119
|
+
```toml
|
|
120
|
+
tests = ["tests/**"]
|
|
121
|
+
|
|
122
|
+
[code]
|
|
123
|
+
roots = ["app/", "web/src/"]
|
|
124
|
+
|
|
125
|
+
[[actors]] # who uses the system, drawn first
|
|
126
|
+
id = "customers"
|
|
127
|
+
label = "Customers"
|
|
128
|
+
uses = ["web:browser"] # part: what the flow carries
|
|
129
|
+
|
|
130
|
+
[[components]]
|
|
131
|
+
id = "api"
|
|
132
|
+
label = "API"
|
|
133
|
+
kind = "interface" # ui | interface | logic | data: the column it is drawn in
|
|
134
|
+
group = "Backend" # the container it is drawn in, with the others of its group
|
|
135
|
+
about = "orders and payments"
|
|
136
|
+
paths = ["app/api/**"]
|
|
137
|
+
|
|
138
|
+
[[externals]]
|
|
139
|
+
id = "postgres"
|
|
140
|
+
label = "PostgreSQL"
|
|
141
|
+
shape = "db"
|
|
142
|
+
env = ["DATABASE_URL"] # the settings that reach it
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
Every key, and how the code is read: [the wiki](https://github.com/simplifiedmachine/system-diff/wiki).
|
|
146
|
+
|
|
147
|
+
## Add-ons
|
|
148
|
+
|
|
149
|
+
The same engine, outside the pane. Deterministic: the same code gives the same picture, byte for byte, and a part
|
|
150
|
+
that did not change keeps its place.
|
|
151
|
+
|
|
152
|
+
- **Pull requests:** every pull request gets its system diff as a comment, and CI fails when the README's map is out
|
|
153
|
+
of date (`.github/workflows/system-diff.yml`, which you can copy). This repository runs it on itself.
|
|
154
|
+
- **Command line:**
|
|
155
|
+
```sh
|
|
156
|
+
system-diff map --dir . --out docs/diagrams # the system as it is now: system.json, system.svg
|
|
157
|
+
system-diff diff --base origin/main --out out # what this branch does to it: headline, plan, diff.svg
|
|
158
|
+
system-diff diff --base HEAD --head . --out out # what your uncommitted work does to it
|
|
159
|
+
system-diff readme --json docs/diagrams/system.json # keep the map in README.md current
|
|
160
|
+
system-diff show API # one part zoomed in, and what it is, in any terminal
|
|
161
|
+
system-diff draw SPEC.json # hand-made pictures in the same look
|
|
162
|
+
```
|
|
163
|
+
`diff --narrate` adds a plain-words summary from your own LLM; `[png]` adds PNG output.
|
|
164
|
+
- **Terminal view** (`system-diff tui`): the pane's views as a full-screen terminal app, for a terminal beside any
|
|
165
|
+
agent. It opens by itself next to Claude Code in tmux, zellij, WezTerm, kitty and Windows Terminal; in VS Code,
|
|
166
|
+
setup adds a task that opens it with the folder.
|
|
167
|
+
- **Status line** (`system-diff setup claude` without `--no-status-line`): the pane's first lines under Claude Code's
|
|
168
|
+
prompt, for when the pane is not open.
|
|
169
|
+
- **Browser page** (`system-diff watch`): the same with the SVG pictures, at http://127.0.0.1:8765/.
|
|
170
|
+
|
|
171
|
+
## License
|
|
172
|
+
|
|
173
|
+
MIT
|