web: render local variables as decoded, single values

Resolve each local to the pointer region holding its current value
rather than every region it has occupied, narrow the trace drawer's
local rendering to that region, and decode the resolved bytes to a
typed value (replacing the raw formatAsDecimal fallback).

Author: gnidan

packages/programs-react/src/components/TraceContext.tsx

@@ -12,7 +12,7 @@ import React, {
   useRef,
 } from "react";
 import type { Pointer, Program } from "@ethdebug/format";
-import { dereference, Data } from "@ethdebug/pointers";
+import { dereference, decodeValue, Data } from "@ethdebug/pointers";
 import {
   type TraceStep,
   type CallInfo,
@@ -229,15 +229,33 @@ async function resolveVariableValue(
   pointer: Pointer,
   step: TraceStep,
   templates: Pointer.Templates,
+  identifier?: string,
+  type?: unknown,
 ): Promise<string> {
   const state = traceStepToMachineState(step);
   const cursor = await dereference(pointer, {
     state,
     templates,
   });
   const view = await cursor.view(state);
+  const decode = (data: Data): string =>
+    decodeValue(data, type as Parameters<typeof decodeValue>[1]);
+
+  // Prefer the value region named after the variable. A memory-homed local's
+  // pointer is a group that also carries frame-scaffolding regions, so
+  // joining every region would surface the frame pointer alongside the value.
+  // `regions.lookup` gives the last concrete region generated with a given
+  // name — for a scalar that is exactly the value region. Decode it into a
+  // readable value (uint -> decimal, address -> checksummed, …) by type.
+  if (identifier) {
+    const region = view.regions.lookup[identifier];
+    if (region) {
+      return decode(await view.read(region));
+    }
+  }
 
-  // Collect values from all regions
+  // Fallback: no identifier-named region — read every region (previous
+  // behavior), covering pointers whose value region isn't identifier-named.
   const values: Data[] = [];
   for (const region of view.regions) {
     const data = await view.read(region);
@@ -248,12 +266,12 @@ async function resolveVariableValue(
     return "0x";
   }
 
-  // Single region: return its hex value
+  // Single region: decode its value
   if (values.length === 1) {
-    return values[0].toHex();
+    return decode(values[0]);
   }
 
-  // Multiple regions: concatenate hex values
+  // Multiple regions (composite) — not a scalar; concatenate raw hex.
   return values.map((d) => d.toHex()).join(", ");
 }
 
@@ -330,6 +348,8 @@ export function TraceProvider({
           v.pointer as Pointer,
           currentStep,
           templates,
+          v.identifier,
+          v.type,
         );
         if (!cancelled) {
           resolved[index] = {
@@ -427,6 +447,7 @@ export function TraceProvider({
             ptr as Pointer,
             step,
             templates,
+            names?.[i],
           );
           args[i] = { ...args[i], value };
         } catch (err) {

packages/web/src/theme/ProgramExample/TraceDrawer.tsx

@@ -24,7 +24,12 @@ import {
   extractSourceRange,
 } from "@ethdebug/bugc-react";
 import { Executor, createTraceCollector, type TraceStep } from "@ethdebug/evm";
-import { dereference, Data, type Machine } from "@ethdebug/pointers";
+import {
+  dereference,
+  decodeValue,
+  Data,
+  type Machine,
+} from "@ethdebug/pointers";
 import {
   buildCallStack,
   extractCallInfoFromInstruction,
@@ -329,7 +334,7 @@ function TraceDrawerContent(): JSX.Element {
 
       const resolvePromises = ptrs.map(async (ptr, i) => {
         try {
-          const value = await resolvePointer(ptr, state);
+          const value = await resolvePointer(ptr, state, names?.[i]);
           args[i] = { ...args[i], value };
         } catch (err) {
           args[i] = {
@@ -380,7 +385,10 @@ function TraceDrawerContent(): JSX.Element {
       currentVariables.map(async (v) => {
         if (!v.pointer) return;
         try {
-          next.set(v.identifier, await resolvePointer(v.pointer, state));
+          next.set(
+            v.identifier,
+            await resolvePointer(v.pointer, state, v.identifier, v.rawType),
+          );
         } catch {
           // leave unresolved
         }
@@ -1073,7 +1081,10 @@ function formatBigInt(value: bigint): string {
 // Variable type extracted from debug context
 interface Variable {
   identifier: string;
+  /** Formatted type string, for display. */
   type?: string;
+  /** Raw ethdebug type specifier, for value decoding. */
+  rawType?: unknown;
   pointer?: unknown;
 }
 
@@ -1094,7 +1105,7 @@ function VariablesDisplay({
           <div key={i} className="variable-item">
             <span className="variable-name">{variable.identifier}</span>
             {value !== undefined && (
-              <code className="variable-value">{formatAsDecimal(value)}</code>
+              <code className="variable-value">{value}</code>
             )}
             {variable.type && (
               <span className="variable-type">{variable.type}</span>
@@ -1203,6 +1214,7 @@ function extractVariables(context: unknown): Variable[] {
         variables.push({
           identifier: String(variable.identifier),
           type: variable.type ? formatType(variable.type) : undefined,
+          rawType: variable.type,
           pointer: variable.pointer,
         });
       }
@@ -1390,25 +1402,44 @@ function traceStepToState(
 }
 
 /**
- * Resolve a single pointer against a machine state.
+ * Resolve a single pointer against a machine state, decoding the value
+ * region into a readable string when the variable's type is known.
  */
 async function resolvePointer(
   pointer: unknown,
   state: Machine.State,
+  identifier?: string,
+  type?: unknown,
 ): Promise<string> {
   const cursor = await dereference(
     pointer as Parameters<typeof dereference>[0],
     { state, templates: {} },
   );
   const view = await cursor.view(state);
+  const decode = (data: Data): string =>
+    decodeValue(data, type as Parameters<typeof decodeValue>[1]);
+
+  // Prefer the value region named after the variable. A memory-homed local's
+  // pointer is a group that also carries frame-scaffolding regions, so
+  // joining every region would surface the frame pointer alongside the value.
+  if (identifier) {
+    const region = view.regions.lookup[identifier];
+    if (region) {
+      return decode(await view.read(region));
+    }
+  }
 
+  // Fallback: no identifier-named region — read every region (covers
+  // pointers whose value region isn't identifier-named, e.g. anonymous
+  // single-region storage locals).
   const values: Data[] = [];
   for (const region of view.regions) {
     values.push(await view.read(region));
   }
 
   if (values.length === 0) return "0x";
-  if (values.length === 1) return values[0].toHex();
+  if (values.length === 1) return decode(values[0]);
+  // Composite (multiple regions) — not a scalar; show raw hex words.
   return values.map((d) => d.toHex()).join(", ");
 }