From 85da85a45f1f9759a75a993d4d5e5a368e09ea38 Mon Sep 17 00:00:00 2001
From: "g. nicholas d'andrea" <gnidan@users.noreply.github.com>
Date: Thu, 16 Jul 2026 01:41:10 -0400
Subject: [PATCH] web: use the SimpleFunctions example in the trace playground
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The explore trace playground's function-call demo compiled a minimal
two-line `Adder`. Swap it for `SimpleFunctions` — the same
`basic/functions.bug` the BUG playground dropdown uses — which calls
`add` directly and then a nested `addThree` that calls `add` twice, so
the call stack nests two frames deep. The source is referenced from the
canonical `@ethdebug/bugc/examples` export (test annotations stripped)
rather than copied, and the section prose is updated to match.
---
 .../core-schemas/programs/tracing-examples.ts | 32 +++++++------------
 .../web/docs/explore/trace-playground.mdx     | 16 ++++++----
 2 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/packages/web/docs/core-schemas/programs/tracing-examples.ts b/packages/web/docs/core-schemas/programs/tracing-examples.ts
index 24fecdfecf..fe06ba6d8a 100644
--- a/packages/web/docs/core-schemas/programs/tracing-examples.ts
+++ b/packages/web/docs/core-schemas/programs/tracing-examples.ts
@@ -1,3 +1,15 @@
+import { exampleSources, stripTestAnnotations } from "@ethdebug/bugc/examples";
+
+/**
+ * SimpleFunctions, referenced from the canonical bugc examples — the same
+ * `basic/functions.bug` the BUG playground dropdown sources — with bugc's
+ * inline test annotations stripped for display. Kept DRY rather than
+ * copying the `.bug` source here.
+ */
+export const simpleFunctions = stripTestAnnotations(
+  exampleSources["basic/functions.bug"],
+);
+
 export const counterIncrement = `name Counter;
 
 storage {
@@ -52,26 +64,6 @@ code {
   b = b + 1;
 }`;
 
-export const functionCallAndReturn = `name Adder;
-
-define {
-  function add(a: uint256, b: uint256) -> uint256 {
-    return a + b;
-  };
-}
-
-storage {
-  [0] result: uint256;
-}
-
-create {
-  result = 0;
-}
-
-code {
-  result = add(3, 4);
-}`;
-
 export const mutualRecursion = `name EvenOdd;
 
 define {
diff --git a/packages/web/docs/explore/trace-playground.mdx b/packages/web/docs/explore/trace-playground.mdx
index 4d964c3686..67f44008d7 100644
--- a/packages/web/docs/explore/trace-playground.mdx
+++ b/packages/web/docs/explore/trace-playground.mdx
@@ -7,7 +7,7 @@ sidebar_label: "Step through an execution trace"
 import { TracePlayground, TraceExample } from "@theme/ProgramExample";
 import {
   counterIncrement,
-  functionCallAndReturn,
+  simpleFunctions,
   tailRecursiveFactorial,
   inlineDemo,
 } from "../core-schemas/programs/tracing-examples";
@@ -39,14 +39,16 @@ the context attached to each instruction.
 
 ## A function call
 
-Real programs call functions, and the debugger follows them. Watch the
-call stack push a frame on the JUMP into `add` (an **invoke** context)
-and pop it on the JUMP back (a **return** context).
+Real programs call functions, and the debugger follows them.
+`SimpleFunctions` calls an `add` helper directly, then calls `addThree` —
+which itself calls `add` twice — so the call stack nests two frames deep.
+Each JUMP into a function pushes a frame (an **invoke** context); each
+JUMP back pops it (a **return** context).
 
 <TraceExample
-  title="Function call and return"
-  description="Calls an internal add function and stores the result"
-  source={functionCallAndReturn}
+  title="Nested function calls"
+  description="Calls add directly, then addThree — which calls add twice — storing 60"
+  source={simpleFunctions}
 />
 
 For the exact shape of invoke, return, and revert contexts, see the