@hugobatist/smartcode 0.1.0

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.
Files changed (60) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +292 -0
  3. package/dist/cli.js +4324 -0
  4. package/dist/cli.js.map +1 -0
  5. package/dist/index.d.ts +374 -0
  6. package/dist/index.js +1167 -0
  7. package/dist/index.js.map +1 -0
  8. package/dist/static/annotations-panel.js +133 -0
  9. package/dist/static/annotations-svg.js +108 -0
  10. package/dist/static/annotations.css +367 -0
  11. package/dist/static/annotations.js +367 -0
  12. package/dist/static/app-init.js +497 -0
  13. package/dist/static/breakpoints.css +69 -0
  14. package/dist/static/breakpoints.js +197 -0
  15. package/dist/static/clipboard.js +94 -0
  16. package/dist/static/collapse-ui.js +325 -0
  17. package/dist/static/command-history.js +89 -0
  18. package/dist/static/context-menu.js +334 -0
  19. package/dist/static/custom-renderer.js +201 -0
  20. package/dist/static/dagre-layout.js +291 -0
  21. package/dist/static/diagram-dom.js +241 -0
  22. package/dist/static/diagram-editor.js +368 -0
  23. package/dist/static/editor-panel.js +107 -0
  24. package/dist/static/editor-popovers.js +187 -0
  25. package/dist/static/event-bus.js +57 -0
  26. package/dist/static/export.js +181 -0
  27. package/dist/static/file-tree.js +470 -0
  28. package/dist/static/ghost-paths.js +397 -0
  29. package/dist/static/heatmap.css +116 -0
  30. package/dist/static/heatmap.js +308 -0
  31. package/dist/static/icons.js +66 -0
  32. package/dist/static/inline-edit.js +294 -0
  33. package/dist/static/interaction-state.js +155 -0
  34. package/dist/static/interaction-tracker.js +93 -0
  35. package/dist/static/live.html +239 -0
  36. package/dist/static/main-layout.css +220 -0
  37. package/dist/static/main.css +334 -0
  38. package/dist/static/mcp-sessions.js +202 -0
  39. package/dist/static/modal.css +109 -0
  40. package/dist/static/modal.js +171 -0
  41. package/dist/static/node-drag.js +293 -0
  42. package/dist/static/pan-zoom.js +199 -0
  43. package/dist/static/renderer.js +280 -0
  44. package/dist/static/search.css +103 -0
  45. package/dist/static/search.js +304 -0
  46. package/dist/static/selection.js +353 -0
  47. package/dist/static/session-player.css +137 -0
  48. package/dist/static/session-player.js +411 -0
  49. package/dist/static/sidebar.css +248 -0
  50. package/dist/static/svg-renderer.js +313 -0
  51. package/dist/static/svg-shapes.js +218 -0
  52. package/dist/static/tokens.css +76 -0
  53. package/dist/static/vendor/dagre-bundle.js +43 -0
  54. package/dist/static/vendor/dagre.min.js +3 -0
  55. package/dist/static/vendor/graphlib.min.js +2 -0
  56. package/dist/static/viewport-transform.js +107 -0
  57. package/dist/static/workspace-switcher.js +202 -0
  58. package/dist/static/ws-client.js +71 -0
  59. package/dist/static/ws-handler.js +125 -0
  60. package/package.json +74 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 SmartB Diagrams Contributors
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,292 @@
1
+ # SmartCode
2
+
3
+ **See what your AI is thinking.** A visual debugger for AI reasoning — watch your AI agent think in real-time, set breakpoints, flag mistakes, and replay sessions.
4
+
5
+ [![npm version](https://img.shields.io/npm/v/smartcode.svg)](https://www.npmjs.com/package/smartcode)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
7
+ [![Node.js](https://img.shields.io/badge/node-%3E%3D18.17-brightgreen.svg)](https://nodejs.org/)
8
+
9
+ ---
10
+
11
+ ## Why SmartCode?
12
+
13
+ AI coding tools are **black boxes**. You give Cursor, Claude Code, or Copilot a task and wait. If it goes down a wrong path, you only find out when it's done — after wasted time and tokens.
14
+
15
+ SmartCode makes AI reasoning **visible and controllable**:
16
+
17
+ - **See** the AI's reasoning as a live flowchart that updates in real-time
18
+ - **Intervene** by flagging nodes mid-execution — the AI reads your feedback and course-corrects
19
+ - **Debug** with breakpoints that pause AI execution at specific reasoning steps
20
+ - **Understand** what the AI considered and rejected via ghost paths
21
+ - **Analyze** patterns with session replay and heatmaps
22
+
23
+ It's the **Datadog for AI reasoning** — not another AI tool, but a plugin that makes your existing tools transparent.
24
+
25
+ ## Quick Start
26
+
27
+ ```bash
28
+ npm install -g smartcode
29
+ smartcode init
30
+ smartcode serve
31
+ ```
32
+
33
+ Your browser opens with a live diagram viewer. Edit any `.mmd` file and see changes instantly.
34
+
35
+ ## Key Features
36
+
37
+ ### Real-Time AI Observability
38
+
39
+ AI agents write Mermaid diagrams via MCP tools. A file watcher detects changes and pushes updates to your browser via WebSocket — all within 100ms.
40
+
41
+ ### Interactive Canvas
42
+
43
+ Custom SVG renderer with dagre layout engine. Select, drag, edit, delete, and connect nodes directly on the canvas. Full undo/redo support (Ctrl+Z / Ctrl+Shift+Z).
44
+
45
+ ### AI Breakpoints
46
+
47
+ Set breakpoints on diagram nodes. When the AI reaches that node, it **pauses** and waits for you to review. Click "Continue" when ready — just like a code debugger, but for AI reasoning.
48
+
49
+ ### Ghost Paths
50
+
51
+ See the reasoning branches the AI considered but **rejected**. Rendered as dashed translucent edges, ghost paths reveal the "deleted scenes" of AI thinking — information normally invisible.
52
+
53
+ ### Developer Flags
54
+
55
+ Click any node to flag it with a message. The AI reads your flag via MCP, gets structured correction context, and adjusts its approach. Bidirectional human-AI communication embedded in the diagram.
56
+
57
+ ### Session Recording & Replay
58
+
59
+ Every AI reasoning session is recorded as JSONL. Replay sessions with a timeline scrubber at 1x/2x/4x speed. Diff highlighting shows what changed between frames.
60
+
61
+ ### Risk Heatmap
62
+
63
+ Color-code nodes by visit frequency (cold blue to hot red). Identify which reasoning steps the AI revisits most — potential confusion points or bottlenecks.
64
+
65
+ ### Node Status Tracking
66
+
67
+ Color-coded progress: green (ok), yellow (in-progress), red (problem), gray (discarded). See at a glance where the AI succeeded and where it struggled.
68
+
69
+ ## CLI Reference
70
+
71
+ ### `smartcode init`
72
+
73
+ Initialize a SmartCode project.
74
+
75
+ ```bash
76
+ smartcode init [--dir <path>] [--force]
77
+ ```
78
+
79
+ | Option | Default | Description |
80
+ |--------|---------|-------------|
81
+ | `--dir <path>` | `.` | Project directory |
82
+ | `--force` | `false` | Overwrite existing config |
83
+
84
+ ### `smartcode serve`
85
+
86
+ Start the diagram viewer server.
87
+
88
+ ```bash
89
+ smartcode serve [--port <number>] [--dir <path>] [--no-open]
90
+ ```
91
+
92
+ | Option | Default | Description |
93
+ |--------|---------|-------------|
94
+ | `--port <number>` | `3333` | Server port |
95
+ | `--dir <path>` | `.` | Project directory |
96
+ | `--no-open` | `false` | Don't open browser automatically |
97
+
98
+ ### `smartcode status`
99
+
100
+ Check server health.
101
+
102
+ ```bash
103
+ smartcode status [--port <number>]
104
+ ```
105
+
106
+ Shows uptime, diagram count, connected clients, and active flags.
107
+
108
+ ### `smartcode mcp`
109
+
110
+ Start the MCP server for AI tool integration.
111
+
112
+ ```bash
113
+ smartcode mcp [--dir <path>] [--serve] [--port <number>]
114
+ ```
115
+
116
+ | Option | Default | Description |
117
+ |--------|---------|-------------|
118
+ | `--dir <path>` | `.` | Project directory |
119
+ | `--serve` | `false` | Co-host HTTP+WS server for browser viewing |
120
+ | `--port <number>` | `3333` | HTTP server port (requires `--serve`) |
121
+
122
+ ## MCP Integration
123
+
124
+ ### Setup with Claude Code
125
+
126
+ One command:
127
+
128
+ ```bash
129
+ claude mcp add --transport stdio smartcode -- npx -y smartcode mcp --dir .
130
+ ```
131
+
132
+ Or add a `.mcp.json` to your project root:
133
+
134
+ ```json
135
+ {
136
+ "mcpServers": {
137
+ "smartcode": {
138
+ "command": "npx",
139
+ "args": ["-y", "smartcode", "mcp", "--dir", "."]
140
+ }
141
+ }
142
+ }
143
+ ```
144
+
145
+ ### Setup with Claude Desktop
146
+
147
+ Add to `~/Library/Application Support/Claude/claude_desktop_config.json`:
148
+
149
+ ```json
150
+ {
151
+ "mcpServers": {
152
+ "smartcode": {
153
+ "command": "npx",
154
+ "args": ["-y", "smartcode", "mcp", "--dir", "/path/to/project"]
155
+ }
156
+ }
157
+ }
158
+ ```
159
+
160
+ ### With Browser Viewer
161
+
162
+ Run MCP and browser viewer in a single process:
163
+
164
+ ```bash
165
+ smartcode mcp --dir . --serve --port 3333
166
+ ```
167
+
168
+ AI tool calls and browser updates share the same `DiagramService` — zero-latency sync.
169
+
170
+ ## MCP Tools
171
+
172
+ SmartCode exposes 11 tools via the Model Context Protocol:
173
+
174
+ | Tool | Description |
175
+ |------|-------------|
176
+ | `update_diagram` | Create or update a `.mmd` file |
177
+ | `read_flags` | Read developer feedback annotations |
178
+ | `get_diagram_context` | Get full diagram state (content, flags, statuses, validation) |
179
+ | `update_node_status` | Set node status: `ok` / `problem` / `in-progress` / `discarded` |
180
+ | `get_correction_context` | Get structured correction prompt for a flagged node |
181
+ | `check_breakpoints` | Check if AI should pause at the current node |
182
+ | `record_ghost_path` | Record a discarded reasoning branch |
183
+ | `start_session` | Begin a recording session |
184
+ | `record_step` | Record a node visit in the active session |
185
+ | `end_session` | End session and get summary statistics |
186
+ | `set_risk_level` | Set risk annotation (high/medium/low) on a node |
187
+
188
+ ## Keyboard Shortcuts
189
+
190
+ | Shortcut | Action |
191
+ |----------|--------|
192
+ | `Ctrl+Z` | Undo |
193
+ | `Ctrl+Shift+Z` | Redo |
194
+ | `Ctrl+C` / `Ctrl+V` | Copy / Paste |
195
+ | `Ctrl+D` | Duplicate |
196
+ | `Ctrl+F` | Search nodes |
197
+ | `Delete` | Delete selected |
198
+ | `Escape` | Deselect |
199
+ | Mouse wheel | Zoom |
200
+ | Click + drag | Pan |
201
+
202
+ ## AI Diagram Conventions
203
+
204
+ ### Diagram Direction
205
+
206
+ - `flowchart TD` for sequential reasoning (top to bottom)
207
+ - `flowchart LR` for parallel or branching logic (left to right)
208
+
209
+ ### Node Naming
210
+
211
+ - IDs: lowercase-hyphenated (`analyze-requirements`)
212
+ - Labels: short action phrases (`["Analyze Requirements"]`)
213
+
214
+ ### Status Annotations
215
+
216
+ ```
217
+ %% @status analyze-requirements ok -- completed (green)
218
+ %% @status design-schema in-progress -- working (yellow)
219
+ %% @status implement-api problem -- issue found (red)
220
+ %% @status abandoned-approach discarded -- abandoned (gray)
221
+ ```
222
+
223
+ ### Developer Flags
224
+
225
+ ```
226
+ %% @flag design-schema "Consider normalized schema instead"
227
+ ```
228
+
229
+ ### Example CLAUDE.md Integration
230
+
231
+ Add to your project's `CLAUDE.md`:
232
+
233
+ ```markdown
234
+ ## SmartCode
235
+
236
+ - Use `update_diagram` to create/update .mmd reasoning diagrams
237
+ - Use `flowchart TD` for sequential steps, node IDs lowercase-hyphenated
238
+ - Set nodes to `in-progress` when starting, `ok` when done, `problem` on issues
239
+ - Check `read_flags` before starting — respond to developer feedback
240
+ - Use `get_correction_context` when flags exist for structured guidance
241
+ ```
242
+
243
+ ## Architecture
244
+
245
+ ```
246
+ Developer's Machine (single process)
247
+ +-----------------------------------------------+
248
+ | smartcode serve / smartcode mcp --serve |
249
+ | |
250
+ | +------------------+ +-------------------+ |
251
+ | | MCP Server | | HTTP Server | |
252
+ | | (stdio transport)| | (port 3333) | |
253
+ | +--------+---------+ +--------+----------+ |
254
+ | | | |
255
+ | v v |
256
+ | +------------------------------------------+ |
257
+ | | DiagramService (shared) | |
258
+ | | parse | validate | annotate | serialize | |
259
+ | +------------------------------------------+ |
260
+ | | | |
261
+ | v v |
262
+ | +----------------+ +------------------+ |
263
+ | | File Watcher |--->| WebSocket Server | |
264
+ | | (.mmd files) | | (broadcast) | |
265
+ | +----------------+ +------------------+ |
266
+ +-----------------------------------------------+
267
+ | |
268
+ v v
269
+ .mmd files on disk Browser / VS Code
270
+ (source of truth) (live viewer)
271
+ ```
272
+
273
+ ## Requirements
274
+
275
+ - Node.js >= 18.17
276
+ - npm or npx
277
+
278
+ ## Contributing
279
+
280
+ Contributions are welcome! Please open an issue first to discuss what you'd like to change.
281
+
282
+ ```bash
283
+ git clone https://github.com/Hugobatist/smartcode.git
284
+ cd smartcode
285
+ npm install
286
+ npm run build
287
+ npm test
288
+ ```
289
+
290
+ ## License
291
+
292
+ [MIT](LICENSE)