Skip to content

Commit a914d4b

Browse files
apstenku123apstenku123
committed
feat(vbgui-fb): React Flow canvas + 25 brick + 6 adapter custom nodes
Stage F-B of the Visual Builder GUI epic (cppmega-mlx-o0k). New vbgui/ workspace scaffolds the frontend per VisualBuilderPlan.md §3.1 and §4.1-4.2. Stack: Vite + React 18 + @xyflow/react v12 + TypeScript + ELK.js for auto-layout + vitest/jsdom for tests. Components: - BrickNode — generic brick renderer parametrised by kind. Reads category color from CATEGORY_COLORS, renders resolved shape badge, memory bar, side-channel warning when missing. - AdapterNode — dashed border + ghost preview support. - Palette — left-rail draggable source, brick tiles grouped by category, adapter tiles below. Emits application/x-cppmega-brick and application/x-cppmega-adapter mime types on dragstart. - FlowCanvas — React Flow root with onConnect / onDropBrick callbacks, edge styling by severity (green/amber/red) + dashed grey for adapter. - App — wires Palette into FlowCanvas, drag-drop adds a node and edge creation populates with severity=info. Library modules: - lib/types.ts — handwritten TS mirror of cppmega_v4.jsonrpc.schema Pydantic models (SCHEMA_VERSION 1.0.0). - lib/bricks.ts — 25 BRICKS (matches BLOCK_BUILDERS post-GalCov-B) + 6 ADAPTERS + 8 category colors. brickFor/adapterFor lookups. - lib/rpc.ts — JSON-RPC 2.0 client over fetch POST /rpc with abort controller for timeout, RpcError envelope. - lib/elk.ts — layoutFlow helper (synchronous; F-C moves to worker). Tests (29 across 6 files, vitest + jsdom + Testing Library): - bricks: 22-minimum-25-actual count, unique kinds, 6-adapter lock, color coverage, fall-through lookups. - rpc: envelope shape, id increment, error envelope, HTTP failure, abort/timeout. - BrickNode/AdapterNode: label render, shape badge, memory bar, side-channel warning, unknown-kind fallback. - Palette: every brick + adapter renders draggable; dragstart mimes. - FlowCanvas: empty mount, drop event delivery, brick mime parsing. - elk: chained nodes laid out left-to-right; empty graph identity. Build: vite build emits 537kB JS / 16kB CSS (gzip 167kB / 2.6kB). jsdom shims for ResizeObserver + DOMMatrixReadOnly added in tests/setup.ts so React Flow runs under vitest. Closes cppmega-mlx-o0k.2.
1 parent 7422406 commit a914d4b

23 files changed

Lines changed: 5178 additions & 0 deletions

‎vbgui/README.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# cppmega Visual Builder (vbgui)
2+
3+
React 18 + @xyflow/react v12 + TypeScript shell for the Visual Builder
4+
GUI. Talks to `cppmega_v4.jsonrpc` over POST `/rpc` and WS `/ws`.
5+
6+
See `VisualBuilderPlan.md` (repo root) for the full design.
7+
8+
## Quickstart
9+
10+
```bash
11+
# install (NODE_ENV must allow devDeps)
12+
NODE_ENV=development npm install
13+
14+
# typecheck + test
15+
npm run typecheck
16+
npm test
17+
18+
# dev server
19+
npm run dev
20+
# → http://localhost:5173
21+
22+
# production build (static bundle)
23+
npm run build
24+
```
25+
26+
## Layout
27+
28+
- `src/lib/` — JSON-RPC client, types mirror of Pydantic schema, brick
29+
+ adapter metadata, ELK layout helper.
30+
- `src/components/` — `BrickNode`, `AdapterNode`, `Palette`, `FlowCanvas`.
31+
- `src/App.tsx` — wires the palette to the canvas; drag a brick from
32+
the left panel onto the canvas to add a node, drag handle-to-handle
33+
to connect.
34+
- `tests/` — vitest + jsdom + Testing Library.
35+
36+
## Stages shipped
37+
38+
- F-B (this commit): canvas, 25 brick nodes (color-coded by category),
39+
6 adapter nodes (dashed), palette with drag-source, edge severity
40+
styling, ELK auto-layout helper, JSON-RPC client.
41+
42+
## Pending
43+
44+
- F-C: 5-tab sidebar (Loss / Optim / Rewriters / Sharding / Gotchas),
45+
top bar, bottom strip.
46+
- F-D: anywidget shim + cppmega-builder-widget PyPI package.
47+
- F-E: JupyterLite/Pyodide static bundle + GitHub Pages deploy.
48+
- F-G: Universal Tokenizer Playground.
49+
- F-H: Training Data Inspector.

‎vbgui/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>cppmega Visual Builder</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)