Show always-visible call stack and fix duplicate frame bug

- Call stack bar now always visible with "(top level)" empty
  state so users know the feature exists
- Fix duplicate call stack frames: compiler emits invoke
  context on both the caller JUMP and callee entry JUMPDEST,
  so skip push if top frame already matches the same call
- Applied fix to both TraceDrawer and programs-react utility

Author: gnidan

packages/programs-react/src/utils/mockTrace.ts

@@ -263,11 +263,21 @@ export function buildCallStack(
     }
 
     if (callInfo.kind === "invoke") {
-      stack.push({
-        identifier: callInfo.identifier,
-        stepIndex: i,
-        callType: callInfo.callType,
-      });
+      // The compiler emits invoke on both the caller JUMP and
+      // callee entry JUMPDEST. Skip if the top frame already
+      // matches this call.
+      const top = stack[stack.length - 1];
+      if (
+        !top ||
+        top.identifier !== callInfo.identifier ||
+        top.callType !== callInfo.callType
+      ) {
+        stack.push({
+          identifier: callInfo.identifier,
+          stepIndex: i,
+          callType: callInfo.callType,
+        });
+      }
     } else if (callInfo.kind === "return" || callInfo.kind === "revert") {
       // Pop the matching frame
       if (stack.length > 0) {

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

@@ -140,6 +140,20 @@
   flex-shrink: 0;
 }
 
+.call-stack-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ifm-color-content-secondary);
+  margin-right: 4px;
+}
+
+.call-stack-toplevel {
+  color: var(--ifm-color-content-secondary);
+  font-style: italic;
+}
+
 .call-stack-sep {
   color: var(--ifm-color-content-secondary);
   padding: 0 2px;

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

@@ -116,11 +116,21 @@ function TraceDrawerContent(): JSX.Element {
       if (!info) continue;
 
       if (info.kind === "invoke") {
-        frames.push({
-          identifier: info.identifier,
-          stepIndex: i,
-          callType: info.callType,
-        });
+        // The compiler emits invoke on both the caller
+        // JUMP and callee entry JUMPDEST. Skip if the
+        // top frame already matches this call.
+        const top = frames[frames.length - 1];
+        if (
+          !top ||
+          top.identifier !== info.identifier ||
+          top.callType !== info.callType
+        ) {
+          frames.push({
+            identifier: info.identifier,
+            stepIndex: i,
+            callType: info.callType,
+          });
+        }
       } else if (info.kind === "return" || info.kind === "revert") {
         if (frames.length > 0) {
           frames.pop();
@@ -344,9 +354,12 @@ function TraceDrawerContent(): JSX.Element {
                 </button>
               </div>
 
-              {callStack.length > 0 && (
-                <div className="call-stack-bar">
-                  {callStack.map((frame, i) => (
+              <div className="call-stack-bar">
+                <span className="call-stack-label">Call Stack:</span>
+                {callStack.length === 0 ? (
+                  <span className="call-stack-toplevel">(top level)</span>
+                ) : (
+                  callStack.map((frame, i) => (
                     <React.Fragment key={frame.stepIndex}>
                       {i > 0 && (
                         <span className="call-stack-sep">&#x203A;</span>
@@ -359,9 +372,9 @@ function TraceDrawerContent(): JSX.Element {
                         {frame.identifier || "(anonymous)"}
                       </button>
                     </React.Fragment>
-                  ))}
-                </div>
-              )}
+                  ))
+                )}
+              </div>
 
               {currentCallInfo && (
                 <div