Integrate CallStackDisplay and CallInfoPanel into TraceViewer

The components were exported from programs-react but never
rendered in the web package's TraceViewer. Add them to the
layout: call stack breadcrumb in the header, call info
panel at the top of the right sidebar.

Author: gnidan

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

@@ -0,0 +1,85 @@
+.call-info-panel {
+  font-size: 0.9em;
+}
+
+.call-info-banner {
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-weight: 500;
+  margin-bottom: 6px;
+}
+
+.call-info-banner-invoke {
+  background: var(--programs-invoke-bg, #e8f4fd);
+  color: var(--programs-invoke-text, #0969da);
+  border-left: 3px solid var(--programs-invoke-accent, #0969da);
+}
+
+.call-info-banner-return {
+  background: var(--programs-return-bg, #dafbe1);
+  color: var(--programs-return-text, #1a7f37);
+  border-left: 3px solid var(--programs-return-accent, #1a7f37);
+}
+
+.call-info-banner-revert {
+  background: var(--programs-revert-bg, #ffebe9);
+  color: var(--programs-revert-text, #cf222e);
+  border-left: 3px solid var(--programs-revert-accent, #cf222e);
+}
+
+.call-info-refs {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px 0;
+}
+
+.call-info-ref {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  padding: 2px 0;
+}
+
+.call-info-ref-label {
+  font-weight: 500;
+  color: var(--programs-text-muted, #888);
+  min-width: 80px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.call-info-ref-resolved {
+  font-family: monospace;
+  font-size: 0.9em;
+  word-break: break-all;
+}
+
+.call-info-ref-error {
+  color: var(--programs-error, #cf222e);
+  font-style: italic;
+}
+
+.call-info-ref-pending {
+  color: var(--programs-text-muted, #888);
+  font-style: italic;
+}
+
+.call-info-ref-pointer {
+  margin-top: 2px;
+}
+
+.call-info-ref-pointer summary {
+  cursor: pointer;
+  color: var(--programs-text-muted, #888);
+  font-size: 0.85em;
+}
+
+.call-info-ref-pointer-json {
+  font-size: 0.8em;
+  padding: 4px 8px;
+  background: var(--programs-bg-code, #f6f8fa);
+  border-radius: 3px;
+  overflow-x: auto;
+  max-height: 200px;
+}

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

@@ -0,0 +1,46 @@
+.call-stack {
+  font-size: 0.85em;
+  padding: 4px 8px;
+}
+
+.call-stack-empty {
+  color: var(--programs-text-muted, #888);
+}
+
+.call-stack-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px;
+}
+
+.call-stack-separator {
+  color: var(--programs-text-muted, #888);
+  user-select: none;
+}
+
+.call-stack-frame {
+  display: inline-flex;
+  align-items: center;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  padding: 1px 4px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  color: var(--programs-link, #0366d6);
+}
+
+.call-stack-frame:hover {
+  background: var(--programs-bg-hover, rgba(0, 0, 0, 0.05));
+  border-color: var(--programs-border, #ddd);
+}
+
+.call-stack-name {
+  font-weight: 500;
+}
+
+.call-stack-parens {
+  color: var(--programs-text-muted, #888);
+}

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

@@ -12,6 +12,8 @@ import {
   TraceProgress,
   VariableInspector,
   StackInspector,
+  CallStackDisplay,
+  CallInfoPanel,
   useTraceContext,
   type TraceStep,
 } from "@ethdebug/programs-react";
@@ -20,6 +22,8 @@ import {
 import "./TraceViewer.css";
 import "./TraceControls.css";
 import "./VariableInspector.css";
+import "./CallStackDisplay.css";
+import "./CallInfoPanel.css";
 
 export interface TraceViewerProps {
   /** The execution trace */
@@ -97,6 +101,7 @@ function TraceViewerContent({
       <div className="trace-viewer-header">
         <TraceControls showStepCount={true} showOpcode={true} />
         <TraceProgress />
+        <CallStackDisplay />
       </div>
 
       <div className="trace-viewer-body">
@@ -118,6 +123,8 @@ function TraceViewerContent({
         </div>
 
         <div className="trace-viewer-right">
+          <CallInfoPanel />
+
           {showVariables && (
             <div className="trace-viewer-panel variables-panel">
               <h4 className="panel-title">Variables</h4>

packages/web/src/theme/ProgramExample/index.ts

@@ -17,13 +17,19 @@ export {
   TraceProgress,
   VariableInspector,
   StackInspector,
+  CallStackDisplay,
+  CallInfoPanel,
   type TraceState,
   type TraceProviderProps,
   type ResolvedVariable,
+  type ResolvedCallInfo,
+  type ResolvedPointerRef,
   type TraceControlsProps,
   type TraceProgressProps,
   type VariableInspectorProps,
   type StackInspectorProps,
+  type CallStackDisplayProps,
+  type CallInfoPanelProps,
 } from "@ethdebug/programs-react";
 
 // Also re-export utilities for convenience
@@ -33,12 +39,16 @@ export {
   createMockTrace,
   findInstructionAtPc,
   extractVariablesFromInstruction,
+  extractCallInfoFromInstruction,
   buildPcToInstructionMap,
+  buildCallStack,
   type DynamicInstruction,
   type DynamicContext,
   type ContextThunk,
   type TraceStep,
   type MockTraceSpec,
+  type CallInfo,
+  type CallFrame,
 } from "@ethdebug/programs-react";
 
 // Local Docusaurus-specific components