ruvector/examples/decompiler-dashboard/README.md

ruDevolution Dashboard — Visual Decompiler Explorer

🔍 Browse Decompiled Code • 📦 Decompile Any npm Package • 📊 RVF Container Viewer • ⬇️ Download Results

---

🚀 Quick Start

cd examples/decompiler-dashboard
npm install
npm run dev
# Open http://localhost:5173

Production build:

npm run build    # → dist/ (434KB, 133KB gzipped)
npm run preview  # Preview production build

---

📖 What It Does

The ruDevolution Dashboard is a fully client-side web app for exploring decompiled JavaScript source code. No server needed — everything runs in the browser.

Three Pages

🔍 Explorer — Browse Claude Code Versions

Browse decompiled Claude Code across all major releases (v0.2 → v2.1):

• Version tree — select any version from the sidebar
• Module list — see all extracted modules with metrics (lines, classes, functions)
• Source viewer — syntax-highlighted decompiled code with line numbers
• Side-by-side diff — compare the same module across two versions
• Global search — search across all versions and modules

Pre-loaded with data from docs/research/claude-code-rvsource/versions/:

• v0.2.x (300 vectors, 6.9MB bundle)
• v1.0.x (482 vectors, 8.9MB bundle)
• v2.0.x (785 vectors, 10.5MB bundle)
• v2.1.x (2,068 vectors, 12.6MB bundle)

📦 Decompiler — Decompile Any npm Package

Paste any npm package name and decompile it in your browser:

1. Type a package name (e.g., express, lodash, @anthropic-ai/claude-code)
2. Select a version from the dropdown (fetched from npm registry)
3. Click Decompile — the app fetches, beautifies, and splits into modules
4. Browse the results with syntax highlighting
5. Download: original, beautified, module split (zip), or metrics JSON

How it works (fully client-side):

• Package info from registry.npmjs.org (CORS-enabled)
• File listing from data.jsdelivr.com
• File contents from unpkg.com
• Beautification via js-beautify (in-browser)
• Module splitting via ported module-splitter.ts

📊 RVF Viewer — Inspect RVF Containers

View RVF (RuVector Format) binary containers:

• Pre-loaded manifests from the Claude Code RVF corpus
• Drag-and-drop any .rvf file to inspect it
• Segment visualization — color-coded bar chart showing segment types and sizes
• Segment table — detailed breakdown (type, offset, payload length)
• Manifest details — dimensions, vector count, metric, file ID

---

🏗️ Architecture

src/
├── main.tsx                    # React entry point
├── App.tsx                     # Router, data loader, toast system
├── index.css                   # Tailwind + dark theme + glow utilities
│
├── pages/
│   ├── Explorer.tsx            # Version browser with diff comparison
│   ├── Decompiler.tsx          # npm package decompiler
│   └── RvfViewer.tsx           # RVF container inspector
│
├── components/
│   ├── CodeViewer.tsx          # highlight.js syntax highlighting
│   ├── DiffViewer.tsx          # Side-by-side diff (uses `diff` lib)
│   ├── ModuleTree.tsx          # File tree with badges
│   ├── MetricsCard.tsx         # Stats cards (functions, classes, size)
│   ├── SearchBar.tsx           # Full-text search across versions
│   ├── VersionSelector.tsx     # Dropdown version picker
│   └── DownloadMenu.tsx        # Download options (zip, json, js)
│
├── lib/
│   ├── decompiler.ts           # Orchestrates fetch → beautify → split
│   ├── npm-fetch.ts            # npm registry + unpkg + jsdelivr
│   ├── module-splitter.ts      # Browser port of scripts/lib/module-splitter.mjs
│   ├── beautifier.ts           # js-beautify wrapper
│   └── rvf-parser.ts           # Parse RVF manifests + binary headers
│
├── types/
│   └── index.ts                # TypeScript interfaces
│
public/
└── data/                       # Pre-built version data
    ├── v0.2.x/                 # metrics.json, source/*.js, README.md
    ├── v1.0.x/
    ├── v2.0.x/
    └── v2.1.x/

---

🎨 Design

• Dark theme — #0a0a0f background with cyan (#06b6d4) and purple (#a855f7) accents
• Monospace code — JetBrains Mono / system monospace
• Responsive — works on desktop and tablet
• Matches pi.ruv.io aesthetic — glow effects, clean typography

---

🔗 Integration with ruDevolution

This dashboard is the visual frontend for the ruvector-decompiler Rust crate:

Dashboard Feature	Powered By
Module splitting	scripts/lib/module-splitter.mjs (ported to TS)
Version data	docs/research/claude-code-rvsource/versions/
RVF parsing	crates/rvf/ manifest format
Decompilation	crates/ruvector-decompiler/ (Rust, for CLI/API)
Neural inference	model/deobfuscator.onnx (future: ONNX.js in browser)

Connecting to the Rust Decompiler

For deeper analysis (MinCut partitioning, witness chains, neural inference), use the Rust CLI:

# Decompile with full pipeline (MinCut + AI + witness chains)
cargo run --release -p ruvector-decompiler --example run_on_cli -- bundle.min.js

# Then view results in the dashboard
cp -r output/ examples/decompiler-dashboard/public/data/custom/
npm run dev

Future: WASM Integration

The dashboard will eventually run ruvector-decompiler compiled to WASM for full in-browser decompilation with MinCut partitioning and witness chains — no server needed.

---

📚 Related

Resource	Description
crates/ruvector-decompiler/	Rust decompiler crate (MinCut + AI + witness)
crates/ruvector-decompiler/README.md	ruDevolution full documentation
docs/research/claude-code-rvsource/	21 research documents
scripts/claude-code-decompile.sh	CLI decompiler script
scripts/claude-code-rvf-corpus.sh	RVF corpus builder
ADR-135	Decompiler architecture
ADR-136	GPU training pipeline