@@ -126,35 +178,35 @@ export default function App() {
kind="evm"
icon="⛽"
label="EVM Trace Gas"
- value={fmtGas(report.total_evm_gas)}
+ value={fmtGas(isDiff(report) ? report.target.total_evm_gas : report.total_evm_gas)}
sub="gas units"
/>
@@ -173,6 +225,34 @@ export default function App() {
)}
+ {view === 'flame' && flameRoot && (
+
+
+
🔆 Visual Trace
+
+
setFlameSearch(e.target.value)}
+ style={{
+ padding: '4px 10px',
+ background: 'var(--color-bg-raised)',
+ border: '1px solid var(--color-border)',
+ borderRadius: 6,
+ color: 'var(--color-text-primary)',
+ fontSize: 11,
+ fontFamily: 'var(--font-mono)',
+ outline: 'none',
+ width: 180,
+ }}
+ />
+
+
+
+ )}
+
{view === 'hostio' && (
@@ -192,10 +272,10 @@ export default function App() {
🧩 Unified Execution Trace
- {report.steps.length.toLocaleString()} total steps
+ {(isDiff(report) ? report.target.steps : report.steps).length.toLocaleString()} total steps
-
+
)}
diff --git a/studio/src/components/CategoryBreakdown.tsx b/studio/src/components/CategoryBreakdown.tsx
new file mode 100644
index 0000000..b3a8002
--- /dev/null
+++ b/studio/src/components/CategoryBreakdown.tsx
@@ -0,0 +1,55 @@
+import { CATEGORY_META, fmtGas } from '../types/trace';
+import type { StitchedReport, GasCategory } from '../types/trace';
+
+interface Props {
+ report: StitchedReport;
+}
+
+export function CategoryBreakdown({ report }: Props) {
+ const categories = Object.entries(report.category_costs) as [GasCategory, number][];
+ // Filter out zero costs and sort by value
+ const sorted = categories
+ .filter(([_, gas]) => gas > 0)
+ .sort((a, b) => b[1] - a[1]);
+
+ const total = report.total_unified_cost || 1;
+
+ return (
+
+
+ {sorted.map(([cat, gas]) => {
+ const pct = (gas / total) * 100;
+ const meta = CATEGORY_META[cat];
+ return (
+
+ );
+ })}
+
+
+
+ {sorted.map(([cat, gas]) => {
+ const pct = (gas / total) * 100;
+ const meta = CATEGORY_META[cat];
+ return (
+
+
+
{meta.icon}
+
{meta.label}
+
+
{fmtGas(Math.round(gas))} gas
+
{pct.toFixed(1)}%
+
+ );
+ })}
+
+
+ );
+}
diff --git a/studio/src/components/DiffOverview.tsx b/studio/src/components/DiffOverview.tsx
new file mode 100644
index 0000000..bd1aba3
--- /dev/null
+++ b/studio/src/components/DiffOverview.tsx
@@ -0,0 +1,79 @@
+import { fmtGas, fmtEquiv } from '../types/trace';
+import type { DiffReport } from '../types/trace';
+import { MetricCard } from './MetricCard';
+import { CategoryBreakdown } from './CategoryBreakdown';
+
+interface Props {
+ report: DiffReport;
+}
+
+export function DiffOverview({ report }: Props) {
+ const { base, target, metrics } = report;
+
+ const DeltaLabel = ({ val, pct }: { val: number; pct: number }) => {
+ const isIncrease = val > 0;
+ const color = isIncrease ? '#ff4d4d' : '#4dff88';
+ const sign = isIncrease ? '+' : '';
+ return (
+
+ {sign}{fmtGas(Math.round(val))} ({sign}{pct.toFixed(1)}%)
+
+ );
+ };
+
+ return (
+
+ {/* ── Summary Header ─────────────────────────────────────────────────── */}
+
+
+
📊 Comparison Summary
+
+
+
+
+ Baseline: {fmtGas(metrics.base_total_gas)}
+
+
+ }
+ />
+
+ Baseline: {fmtEquiv(metrics.base_unified_cost)}
+
+
+ }
+ />
+
+
+
+ {/* ── Side-by-Side Breakdown ────────────────────────────────────────── */}
+
+
+
+
📐 Baseline ( {base.tx_hash.slice(0, 8)}… )
+
+
+
+
+
+
+
🎯 Target ( {target.tx_hash.slice(0, 8)}… )
+
+
+
+
+
+
+ );
+}
diff --git a/studio/src/components/DragDropZone.tsx b/studio/src/components/DragDropZone.tsx
index 6e7a2c9..8216775 100644
--- a/studio/src/components/DragDropZone.tsx
+++ b/studio/src/components/DragDropZone.tsx
@@ -1,8 +1,8 @@
import React, { useState, useCallback } from 'react';
-import type { StitchedReport } from '../types/trace';
+import type { StudioReport } from '../types/trace';
interface Props {
- onLoad: (report: StitchedReport) => void;
+ onLoad: (report: StudioReport) => void;
}
export function DragDropZone({ onLoad }: Props) {
@@ -18,9 +18,12 @@ export function DragDropZone({ onLoad }: Props) {
const reader = new FileReader();
reader.onload = (e) => {
try {
- const data = JSON.parse(e.target?.result as string) as StitchedReport;
- if (!data.tx_hash || !Array.isArray(data.steps)) {
- setError('File does not appear to be an Atupa trace report.');
+ const data = JSON.parse(e.target?.result as string) as StudioReport;
+ const isSingle = (data as any).tx_hash && Array.isArray((data as any).steps);
+ const isDiffReport = (data as any).type === 'diff' && (data as any).base && (data as any).target;
+
+ if (!isSingle && !isDiffReport) {
+ setError('File does not appear to be an Atupa trace report or comparison.');
return;
}
setError(null);
diff --git a/studio/src/components/FlameGraph.tsx b/studio/src/components/FlameGraph.tsx
new file mode 100644
index 0000000..f411840
--- /dev/null
+++ b/studio/src/components/FlameGraph.tsx
@@ -0,0 +1,459 @@
+// ─── Atupa Studio — Interactive Flamegraph Component ─────────────────────────
+//
+// Renders a zoomable, searchable SVG flamegraph that visualises the unified
+// EVM + Stylus call tree. No external render deps — pure React + SVG.
+
+import React, {
+ useState,
+ useMemo,
+ useCallback,
+ useRef,
+ useEffect,
+} from 'react';
+import type { FlameNode } from '../types/reportToTree';
+
+// ─── Constants & Tokens ───────────────────────────────────────────────────────
+
+const BAR_H = 24; // px height per depth row
+const TEXT_PAD = 6; // horizontal padding inside a bar
+const MIN_PX = 2; // skip bars narrower than this (avoids SVG clutter)
+const APPROX_CHAR_W = 6.5; // JetBrains Mono ≈ 6.5px per char @ 11px
+
+// Colors map to the existing Atupa design-system CSS variables
+const COLORS = {
+ evmFill: '#1e2a45',
+ evmStroke: '#2e4a7a',
+ evmText: '#93c5fd',
+ stylusFill: '#2a1922',
+ stylusStroke: '#7f1d2e',
+ stylusText: '#ff8fa3',
+ boundaryFill: '#1e1833',
+ boundaryStroke:'#6d28d9',
+ boundaryText: '#a78bfa',
+ highlightFill: '#7f1d2e',
+ rootFill: '#0d0f1a',
+ rootStroke: '#1e2435',
+ rootText: '#64748b',
+ tooltipBg: '#181c2a',
+ tooltipBorder: '#2e3a5a',
+ tooltipText: '#e2e8f0',
+};
+
+// ─── Tooltip ─────────────────────────────────────────────────────────────────
+
+interface TooltipState {
+ x: number;
+ y: number;
+ node: FlameNode;
+}
+
+function Tooltip({ tip }: { tip: TooltipState }) {
+ const selfPct =
+ tip.node.value > 0
+ ? ((tip.node.selfCost / tip.node.value) * 100).toFixed(1)
+ : '0.0';
+ const vmLabel = tip.node.vm === 'Evm' ? 'EVM' : 'WASM/Stylus';
+
+ return (
+
+
+
+ {tip.node.name}
+
+
+ VM: {vmLabel}
+
+
+ Total: {tip.node.value.toLocaleString('en-US', { maximumFractionDigits: 2 })} gas
+
+
+ Self: {tip.node.selfCost.toLocaleString('en-US', { maximumFractionDigits: 2 })} gas ({selfPct}%)
+
+
+ Depth: {tip.node.depth}
+ {tip.node.is_vm_boundary && (
+ ⇌ Boundary
+ )}
+
+
+ );
+}
+
+// ─── Layout ──────────────────────────────────────────────────────────────────
+
+interface LayoutNode {
+ node: FlameNode;
+ x: number; // 0..1 fraction of total width
+ w: number; // 0..1 fraction of total width
+ row: number; // depth row (0 = top)
+}
+
+/**
+ * Recursively flattens the tree into a list of {node, x, w, row} entries.
+ * `x0` and `x1` are the fractional span [0..1] of the parent's domain.
+ */
+function layoutTree(
+ node: FlameNode,
+ x0: number,
+ x1: number,
+ row: number,
+ result: LayoutNode[],
+) {
+ result.push({ node, x: x0, w: x1 - x0, row });
+
+ if (node.children.length === 0) return;
+
+ const totalChildValue = node.children.reduce((s, c) => s + c.value, 0);
+ if (totalChildValue === 0) return;
+
+ let cx = x0;
+ for (const child of node.children) {
+ const cw = ((x1 - x0) * child.value) / totalChildValue;
+ layoutTree(child, cx, cx + cw, row + 1, result);
+ cx += cw;
+ }
+}
+
+// ─── Bar ─────────────────────────────────────────────────────────────────────
+
+interface BarProps {
+ lnode: LayoutNode;
+ svgWidth: number;
+ zoomX: number; // current zoom origin (fraction)
+ zoomW: number; // current zoom width (fraction)
+ highlight: string;
+ onHover: (tip: TooltipState | null, evt: React.MouseEvent) => void;
+ onClick: (n: FlameNode) => void;
+}
+
+const Bar = React.memo(function Bar({
+ lnode, svgWidth, zoomX, zoomW, highlight, onHover, onClick,
+}: BarProps) {
+ const { node, x, w, row } = lnode;
+
+ // Map fraction → pixel within the visible zoom window
+ const visX = ((x - zoomX) / zoomW) * svgWidth;
+ const visW = (w / zoomW) * svgWidth;
+
+ if (visW < MIN_PX) return null;
+
+ const py = row * (BAR_H + 2);
+
+ // Color logic
+ let fill: string, stroke: string, textColor: string;
+ if (row === 0) {
+ fill = COLORS.rootFill; stroke = COLORS.rootStroke; textColor = COLORS.rootText;
+ } else if (node.is_vm_boundary) {
+ fill = COLORS.boundaryFill; stroke = COLORS.boundaryStroke; textColor = COLORS.boundaryText;
+ } else if (node.vm === 'Stylus') {
+ fill = COLORS.stylusFill; stroke = COLORS.stylusStroke; textColor = COLORS.stylusText;
+ } else {
+ fill = COLORS.evmFill; stroke = COLORS.evmStroke; textColor = COLORS.evmText;
+ }
+
+ const isHighlighted =
+ highlight.length >= 2 &&
+ node.name.toLowerCase().includes(highlight.toLowerCase());
+
+ if (isHighlighted) {
+ fill = COLORS.highlightFill;
+ stroke = '#ff2a4a';
+ }
+
+ // Label — truncate to fit
+ const maxChars = Math.max(0, Math.floor((visW - TEXT_PAD * 2) / APPROX_CHAR_W));
+ let label = node.name;
+ if (label.length > maxChars) {
+ label = maxChars > 3 ? label.slice(0, maxChars - 1) + '…' : '';
+ }
+
+ return (
+
row > 0 && onClick(node)}
+ onMouseMove={(e) => onHover({ x: e.nativeEvent.offsetX, y: py, node }, e)}
+ onMouseLeave={() => onHover(null, {} as React.MouseEvent)}
+ >
+
+ {label && (
+
+ {label}
+
+ )}
+
+ );
+});
+
+// ─── Breadcrumb ───────────────────────────────────────────────────────────────
+
+function Breadcrumb({
+ trail,
+ onJump,
+}: {
+ trail: FlameNode[];
+ onJump: (idx: number) => void;
+}) {
+ return (
+
+ {trail.map((n, i) => (
+
+ {i > 0 && ›}
+
+
+ ))}
+
+ );
+}
+
+// ─── FlameGraph ───────────────────────────────────────────────────────────────
+
+interface Props {
+ root: FlameNode;
+ search?: string;
+}
+
+export function FlameGraph({ root, search = '' }: Props) {
+ const svgRef = useRef
(null);
+ const [svgWidth, setSvgWidth] = useState(800);
+ const [tooltip, setTooltip] = useState(null);
+
+ // Zoom state: the zoomed-in node trail (first = virtual root)
+ const [zoomTrail, setZoomTrail] = useState([root]);
+ const zoomedNode = zoomTrail[zoomTrail.length - 1];
+
+ // Recalculate when root changes (new report loaded)
+ useEffect(() => {
+ setZoomTrail([root]);
+ }, [root]);
+
+ // Observe container width
+ useEffect(() => {
+ if (!svgRef.current) return;
+ const ro = new ResizeObserver((entries) => {
+ const width = entries[0]?.contentRect.width;
+ if (width) setSvgWidth(width);
+ });
+ ro.observe(svgRef.current);
+ return () => ro.disconnect();
+ }, []);
+
+ // Compute full layout (all nodes, fractions)
+ const allNodes = useMemo(() => {
+ const result: LayoutNode[] = [];
+ layoutTree(root, 0, 1, 0, result);
+ return result;
+ }, [root]);
+
+ // Determine visible zoom window from the currently zoomed node
+ const { zoomX, zoomW } = useMemo(() => {
+ const found = allNodes.find((l) => l.node.id === zoomedNode.id);
+ if (!found) return { zoomX: 0, zoomW: 1 };
+ return { zoomX: found.x, zoomW: found.w };
+ }, [allNodes, zoomedNode]);
+
+ // Filter to only nodes visible in current zoom (partially or fully)
+ const visibleNodes = useMemo(
+ () =>
+ allNodes.filter((l) => {
+ if (l.w === 0) return false;
+ const visW = (l.w / zoomW) * svgWidth;
+ return visW >= MIN_PX;
+ }),
+ [allNodes, zoomW, svgWidth],
+ );
+
+ // SVG height
+ const maxRow = useMemo(
+ () => Math.max(...visibleNodes.map((l) => l.row), 0),
+ [visibleNodes],
+ );
+ const svgHeight = (maxRow + 1) * (BAR_H + 2) + 8;
+
+ // Handlers
+ const handleClick = useCallback(
+ (node: FlameNode) => {
+ setZoomTrail((t) => [...t, node]);
+ setTooltip(null);
+ },
+ [],
+ );
+
+ const handleBreadcrumb = useCallback((idx: number) => {
+ setZoomTrail((t) => t.slice(0, idx + 1));
+ setTooltip(null);
+ }, []);
+
+ const handleHover = useCallback(
+ (tip: TooltipState | null, _evt: React.MouseEvent) => {
+ setTooltip(tip);
+ },
+ [],
+ );
+
+ return (
+
+
+
+ {/* Legend */}
+
+ {[
+ { color: COLORS.evmStroke, label: 'EVM opcode' },
+ { color: COLORS.stylusStroke, label: 'Stylus WASM' },
+ { color: '#6d28d9', label: 'VM Boundary' },
+ { color: '#ff2a4a', label: 'Search match' },
+ ].map(({ color, label }) => (
+
+
+ {label}
+
+ ))}
+
+ {allNodes.length} nodes · click to zoom
+
+
+
+
+
+
+
+ {/* Reset zoom hint */}
+ {zoomTrail.length > 1 && (
+
+
+
+ )}
+
#{step.index}
{indent}
{step.vm === 'Evm' ? 'EVM' : 'WASM'}
-
{step.label}
+
{displayLabel}
{costStr &&
{costStr}}
{step.is_vm_boundary && (
⇌
@@ -46,7 +50,9 @@ export function TraceInspector({ report }: Props) {
if (filter === 'evm' && s.vm !== 'Evm') return false;
if (filter === 'stylus' && s.vm !== 'Stylus') return false;
if (filter === 'boundary' && !s.is_vm_boundary) return false;
- if (search && !s.label.toLowerCase().includes(search.toLowerCase())) return false;
+
+ const label = getDisplayLabel(s, report).toLowerCase();
+ if (search && !label.includes(search.toLowerCase())) return false;
return true;
});
}, [report.steps, filter, search]);
@@ -112,7 +118,7 @@ export function TraceInspector({ report }: Props) {
{visible.length === 0
?
No steps match your filter.
- : visible.map((s) =>
)
+ : visible.map((s) =>
)
}
diff --git a/studio/src/styles/design-system.css b/studio/src/styles/design-system.css
index 4ee6db3..abc9942 100644
--- a/studio/src/styles/design-system.css
+++ b/studio/src/styles/design-system.css
@@ -582,3 +582,93 @@ body {
}
.app-sidebar { display: none; }
}
+/* ── Category Breakdown ─────────────────────────────────────────────────────── */
+.category-breakdown {
+ display: flex;
+ flex-direction: column;
+ gap: var(--sp-6);
+ padding: var(--sp-2) 0;
+}
+
+.category-chart {
+ display: flex;
+ height: 32px;
+ background: var(--color-bg-void);
+ border-radius: var(--radius-md);
+ overflow: hidden;
+ border: 1px solid var(--color-border);
+ box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.category-slice {
+ height: 100%;
+ transition: width var(--t-slow), opacity var(--t-fast);
+ cursor: help;
+}
+
+.category-slice:hover {
+ opacity: 0.85;
+ filter: brightness(1.2);
+}
+
+.category-legend {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+ gap: var(--sp-3) var(--sp-6);
+}
+
+.legend-item {
+ display: flex;
+ align-items: center;
+ gap: var(--sp-2);
+ font-family: var(--font-mono);
+ font-size: 12px;
+ padding: var(--sp-1) var(--sp-2);
+ border-radius: var(--radius-sm);
+ transition: background var(--t-fast);
+}
+
+.legend-item:hover {
+ background: rgba(255,255,255,0.03);
+}
+
+.legend-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ flex-shrink: 0;
+}
+
+.legend-icon {
+ font-size: 14px;
+ margin-right: var(--sp-1);
+}
+
+.legend-label {
+ color: var(--color-text-primary);
+ white-space: nowrap;
+}
+
+.legend-spacer {
+ flex: 1;
+ border-bottom: 1px dotted var(--color-border);
+ margin: 0 var(--sp-2);
+ opacity: 0.5;
+}
+
+.legend-value {
+ color: var(--color-text-secondary);
+ text-align: right;
+}
+
+.legend-pct {
+ color: var(--color-text-muted);
+ min-width: 45px;
+ text-align: right;
+}
+
+.trace-step-label.resolved {
+ color: var(--color-crimson);
+ font-weight: 600;
+ text-shadow: 0 0 8px rgba(255, 42, 74, 0.2);
+}
diff --git a/studio/src/types/reportToTree.ts b/studio/src/types/reportToTree.ts
new file mode 100644
index 0000000..994d2ea
--- /dev/null
+++ b/studio/src/types/reportToTree.ts
@@ -0,0 +1,102 @@
+// ─── Atupa Studio — Report to Flamegraph Tree ────────────────────────────────
+//
+// Converts a flat `UnifiedStep[]` (with `depth` integers) into a tree of
+// `FlameNode` objects suitable for hierarchical layout and d3-hierarchy.
+
+import type { VmKind, StitchedReport } from './trace';
+
+// ─── Tree Node ────────────────────────────────────────────────────────────────
+
+export interface FlameNode {
+ /** Unique identifier for stable React keys */
+ id: string;
+ name: string;
+ vm: VmKind;
+ /** Cumulative cost in gas-equiv for this node and all its children */
+ value: number;
+ /** Self cost only (no children) */
+ selfCost: number;
+ /** Step index in the original trace — useful for cross-linking */
+ stepIndex: number;
+ depth: number;
+ is_vm_boundary: boolean;
+ children: FlameNode[];
+}
+
+// ─── Conversion ───────────────────────────────────────────────────────────────
+
+/**
+ * Builds a single virtual root node whose children represent the call tree.
+ *
+ * Strategy:
+ * - Maintain a stack of "open" ancestors by depth.
+ * - When a step's depth is <= top of stack, pop until we find the correct parent.
+ * - Each step becomes a leaf under its parent; costs are aggregated up during
+ * a separate post-order pass.
+ */
+export function reportToTree(report: StitchedReport): FlameNode {
+ const root: FlameNode = {
+ id: 'root',
+ name: report.tx_hash ? `tx ${report.tx_hash.slice(0, 8)}…` : 'Transaction',
+ vm: 'Evm',
+ value: 0,
+ selfCost: 0,
+ stepIndex: -1,
+ depth: 0,
+ is_vm_boundary: false,
+ children: [],
+ };
+
+ if (report.steps.length === 0) return root;
+
+ // Stack tracks the ancestral chain by [depth, node].
+ // depth-0 slot is the virtual root.
+ const stack: Array<{ depth: number; node: FlameNode }> = [
+ { depth: 0, node: root },
+ ];
+
+ for (const step of report.steps) {
+ const stepDepth = Math.max(1, step.depth); // never let depth be 0
+
+ // Pop ancestors that are shallower-or-equal to current step
+ while (stack.length > 1 && stack[stack.length - 1].depth >= stepDepth) {
+ stack.pop();
+ }
+
+ const parent = stack[stack.length - 1].node;
+ const selfCost = step.vm === 'Evm' ? step.gas_cost : step.cost_equiv;
+
+ const node: FlameNode = {
+ id: `step-${step.index}`,
+ name: step.label,
+ vm: step.vm,
+ value: selfCost, // will be aggregated post-order
+ selfCost,
+ stepIndex: step.index,
+ depth: stepDepth,
+ is_vm_boundary: step.is_vm_boundary,
+ children: [],
+ };
+
+ parent.children.push(node);
+ stack.push({ depth: stepDepth, node });
+ }
+
+ // Post-order aggregation: parent.value = Σ children.value + selfCost
+ aggregateCosts(root);
+
+ return root;
+}
+
+function aggregateCosts(node: FlameNode): number {
+ if (node.children.length === 0) {
+ node.value = node.selfCost;
+ return node.value;
+ }
+ let childTotal = 0;
+ for (const child of node.children) {
+ childTotal += aggregateCosts(child);
+ }
+ node.value = node.selfCost + childTotal;
+ return node.value;
+}
diff --git a/studio/src/types/trace.ts b/studio/src/types/trace.ts
index a196c69..36d184c 100644
--- a/studio/src/types/trace.ts
+++ b/studio/src/types/trace.ts
@@ -3,6 +3,17 @@
export type VmKind = 'Evm' | 'Stylus';
+export type GasCategory =
+ | 'StorageWrite'
+ | 'StorageRead'
+ | 'Memory'
+ | 'Crypto'
+ | 'Call'
+ | 'Execution'
+ | 'Precompile'
+ | 'Root'
+ | 'Other';
+
export interface UnifiedStep {
index: number;
vm: VmKind;
@@ -11,6 +22,8 @@ export interface UnifiedStep {
cost_equiv: number;
depth: number;
is_vm_boundary: boolean;
+ category: GasCategory;
+ target_address?: string;
}
export interface StitchedReport {
@@ -21,8 +34,57 @@ export interface StitchedReport {
total_stylus_gas_equiv: number;
total_unified_cost: number;
vm_boundary_count: number;
+ category_costs: Record
;
+ resolved_names: Record;
+}
+
+export interface DiffReport {
+ type: 'diff';
+ base: StitchedReport;
+ target: StitchedReport;
+ metrics: {
+ base_total_gas: number;
+ target_total_gas: number;
+ gas_delta: number;
+ gas_pct: number;
+ base_unified_cost: number;
+ target_unified_cost: number;
+ unified_delta: number;
+ unified_pct: number;
+ };
}
+export type StudioReport = StitchedReport | DiffReport;
+
+export function isDiff(report: StudioReport): report is DiffReport {
+ return (report as any).type === 'diff';
+}
+
+export function getDisplayLabel(step: UnifiedStep, report: StitchedReport): string {
+ if (step.target_address && report.resolved_names[step.target_address]) {
+ return `${step.label} → ${report.resolved_names[step.target_address]}`;
+ }
+ return step.label;
+}
+
+export interface CategoryMeta {
+ label: string;
+ color: string;
+ icon: string;
+}
+
+export const CATEGORY_META: Record = {
+ StorageWrite: { label: 'Storage Write', color: '#ff2a4a', icon: '💾' },
+ StorageRead: { label: 'Storage Read', color: '#ff8c40', icon: '📖' },
+ Memory: { label: 'Memory Ops', color: '#a78bfa', icon: '🧠' },
+ Crypto: { label: 'Crypto/Hashing',color: '#60d9ff', icon: '🔐' },
+ Call: { label: 'External Calls',color: '#2fe4c4', icon: '📡' },
+ Execution: { label: 'Core Execution',color: '#ffb340', icon: '⚙️' },
+ Precompile: { label: 'Precompiles', color: '#9a9db5', icon: '⚡' },
+ Root: { label: 'Root Frame', color: '#f0f0f8', icon: '🏁' },
+ Other: { label: 'Other', color: '#555870', icon: '❓' },
+};
+
// ─── Derived helpers ──────────────────────────────────────────────────────────
export interface AggregatedHostIO {