Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ profile_*.svg
*.out
*.log

.ideanode_modules/
.idea
node_modules/

# Atupa trace reports (local test artefacts — any *.json at workspace root)
report.json
Expand Down
102 changes: 42 additions & 60 deletions studio/README.md
Original file line number Diff line number Diff line change
@@ -1,73 +1,55 @@
# React + TypeScript + Vite
# 🏮 Atupa Studio

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
**Atupa Studio** is the local-first visual execution profiler and interactive analysis dashboard for [Atupa](https://github.com/One-Block-Org/Atupa).

Currently, two official plugins are available:
It provides execution flamegraphs, category cost breakdowns, paginated trace inspection, and side-by-side differential analysis across **EVM**, **Arbitrum Stylus (WASM)**, **Solana (SVM)**, **Starknet (Cairo)**, and **Stellar (Soroban)**.

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
---

## React Compiler
## ⚡ Key Features

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
- **🔆 Interactive Flamegraph**: Pure React + SVG zoomable call tree with real-time opcode/function search and hover cost tooltips.
- **🌐 Chain-Adaptive Metrics**: Automatically detects the active runtime and adjusts badges, labels, and units (Gas, Ink, Compute Units (CU), Cairo Steps, or Soroban Resource Units).
- **🧩 Trace Inspector**: Paginated opcode, instruction, and HostIO explorer with search, address label resolution, and cross-VM / CPI boundary indicators.
- **⚖️ Differential Execution (Diff Mode)**: Side-by-side transaction comparison with category delta bars and percentage regression analysis.
- **🔥 Stylus HostIO Hot Paths**: Aggregated breakdown of Stylus WASM HostIO calls ranked by ink and gas-equivalent consumption.
- **🔒 100% Local & Private**: Runs entirely in your browser with zero telemetry or external network calls.

## Expanding the ESLint configuration
---

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
## 🏗️ Architecture & Integration

```js
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
Atupa Studio is built with **React 19**, **TypeScript**, and **Vite**.

// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
During `npm run build`, Vite compiles the production SPA directly into `../bin/atupa/dist/`. The Rust CLI (`atupa`) embeds this directory at compile time using `rust-embed`, allowing users to launch the entire UI with a single command without needing Node.js installed:

// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```bash
# Launched automatically from the Rust CLI
atupa studio --file report.json
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
---

## 🛠️ Local Development

### 1. Install Dependencies
```bash
npm install
```

### 2. Start Vite Dev Server
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser. You can click any of the 7 preloaded multi-VM presets on the landing page to load instant demo data.

### 3. Lint & Type Check
```bash
npm run lint
```

### 4. Build for Production
```bash
npm run build
```
*Outputs bundled HTML/CSS/JS assets to `../bin/atupa/dist/` for embedded distribution.*
Loading