From 79632bcedea6542b5b96379f731f840b872ad412 Mon Sep 17 00:00:00 2001
From: intelliDean <o.michaeldean@gmail.com>
Date: Sat, 29 Aug 2026 23:54:39 +0100
Subject: [PATCH] docs(studio): replace boilerplate README with Atupa Studio
 documentation

---
 .gitignore       |   3 +-
 studio/README.md | 102 +++++++++++++++++++----------------------------
 2 files changed, 44 insertions(+), 61 deletions(-)

diff --git a/.gitignore b/.gitignore
index fe8def4..8389183 100644
--- a/.gitignore
+++ b/.gitignore
@@ -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
diff --git a/studio/README.md b/studio/README.md
index 7dbf7eb..22808cb 100644
--- a/studio/README.md
+++ b/studio/README.md
@@ -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.*