Draft function call context schemas

packages/bugc-react/src/components/BytecodeView.css

@@ -113,3 +113,82 @@
 .opcode-line .immediates {
   color: var(--bugc-syntax-number);
 }
+
+/* Context badges for invoke/return/revert */
+.context-badge {
+  cursor: pointer;
+  padding: 0.0625rem 0.25rem;
+  border-radius: 3px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  user-select: none;
+  display: inline-block;
+  min-width: 1.2rem;
+  text-align: center;
+  transition: all 0.15s ease;
+}
+
+.context-badge-invoke {
+  color: var(--bugc-accent-blue);
+  background-color: var(--bugc-accent-blue-bg);
+}
+
+.context-badge-invoke:hover {
+  background-color: var(--bugc-accent-blue);
+  color: var(--bugc-bg-primary);
+}
+
+.context-badge-return {
+  color: var(--bugc-accent-green);
+  background-color: var(--bugc-accent-green-bg);
+}
+
+.context-badge-return:hover {
+  background-color: var(--bugc-accent-green);
+  color: var(--bugc-bg-primary);
+}
+
+.context-badge-revert {
+  color: var(--bugc-accent-red);
+  background-color: rgba(207, 34, 46, 0.1);
+}
+
+.context-badge-revert:hover {
+  background-color: var(--bugc-accent-red);
+  color: var(--bugc-bg-primary);
+}
+
+/* Inline context labels */
+.context-label {
+  font-size: 0.75rem;
+  font-style: italic;
+  margin-left: 0.5rem;
+}
+
+.context-label-invoke {
+  color: var(--bugc-accent-blue);
+}
+
+.context-label-return {
+  color: var(--bugc-accent-green);
+}
+
+.context-label-revert {
+  color: var(--bugc-accent-red);
+}
+
+/* Highlight rows with call contexts */
+.opcode-line.context-invoke {
+  border-left: 2px solid var(--bugc-accent-blue);
+  padding-left: calc(0.5rem - 2px);
+}
+
+.opcode-line.context-return {
+  border-left: 2px solid var(--bugc-accent-green);
+  padding-left: calc(0.5rem - 2px);
+}
+
+.opcode-line.context-revert {
+  border-left: 2px solid var(--bugc-accent-red);
+  padding-left: calc(0.5rem - 2px);
+}

packages/bugc-react/src/components/BytecodeView.tsx

@@ -5,10 +5,29 @@
 import React from "react";
 import type { Evm } from "@ethdebug/bugc";
 import type { BytecodeOutput, SourceRange } from "#types";
-import { extractSourceRange } from "#utils/debugUtils";
+import {
+  extractSourceRange,
+  classifyContext,
+  summarizeContext,
+  type ContextKind,
+  type DeclarationRange,
+} from "#utils/debugUtils";
 import { useEthdebugTooltip } from "#hooks/useEthdebugTooltip";
 import { EthdebugTooltip } from "./EthdebugTooltip.js";
 
+function contextBadgeLabel(kind: ContextKind): string {
+  switch (kind) {
+    case "invoke":
+      return "\u279c"; // arrow right
+    case "return":
+      return "\u21b5"; // return arrow
+    case "revert":
+      return "\u2717"; // x mark
+    default:
+      return "\u2139"; // info
+  }
+}
+
 /**
  * Props for BytecodeView component.
  */
@@ -17,16 +36,20 @@ export interface BytecodeViewProps {
   bytecode: BytecodeOutput;
   /** Callback when hovering over an opcode with source ranges */
   onOpcodeHover?: (ranges: SourceRange[]) => void;
+  /** Callback when clicking a context badge with a declaration */
+  onDeclarationClick?: (decl: DeclarationRange) => void;
 }
 
 interface InstructionsViewProps {
   instructions: Evm.Instruction[];
   onOpcodeHover?: (ranges: SourceRange[]) => void;
+  onDeclarationClick?: (decl: DeclarationRange) => void;
 }
 
 function InstructionsView({
   instructions,
   onOpcodeHover,
+  onDeclarationClick,
 }: InstructionsViewProps): JSX.Element {
   const {
     tooltip,
@@ -47,12 +70,35 @@ function InstructionsView({
     onOpcodeHover?.([]);
   };
 
+  const formatTooltipContent = (instruction: Evm.Instruction): string => {
+    const ctx = instruction.debug?.context;
+    if (!ctx) return "";
+
+    const summary = summarizeContext(ctx);
+    const lines: string[] = [];
+
+    if (
+      summary.kind === "invoke" ||
+      summary.kind === "return" ||
+      summary.kind === "revert"
+    ) {
+      lines.push(summary.label);
+      if (summary.details) {
+        lines.push(`  (${summary.details})`);
+      }
+      lines.push("");
+    }
+
+    lines.push(JSON.stringify(ctx, null, 2));
+    return lines.join("\n");
+  };
+
   const handleDebugIconMouseEnter = (
     e: React.MouseEvent<HTMLSpanElement>,
     instruction: Evm.Instruction,
   ) => {
     if (instruction.debug?.context) {
-      showTooltip(e, JSON.stringify(instruction.debug.context, null, 2));
+      showTooltip(e, formatTooltipContent(instruction));
     }
   };
 
@@ -61,7 +107,22 @@ function InstructionsView({
     instruction: Evm.Instruction,
   ) => {
     if (instruction.debug?.context) {
-      pinTooltip(e, JSON.stringify(instruction.debug.context, null, 2));
+      pinTooltip(e, formatTooltipContent(instruction));
+    }
+  };
+
+  const handleBadgeClick = (
+    e: React.MouseEvent<HTMLSpanElement>,
+    instruction: Evm.Instruction,
+  ) => {
+    const ctx = instruction.debug?.context;
+    if (!ctx) return;
+
+    const summary = summarizeContext(ctx);
+    if (summary.declaration && onDeclarationClick) {
+      onDeclarationClick(summary.declaration);
+    } else {
+      pinTooltip(e, formatTooltipContent(instruction));
     }
   };
 
@@ -73,22 +134,43 @@ function InstructionsView({
 
         const sourceRanges = extractSourceRange(instruction.debug?.context);
         const hasDebugInfo = !!instruction.debug?.context;
+        const kind: ContextKind = hasDebugInfo
+          ? classifyContext(instruction.debug?.context)
+          : "other";
+        const isCallContext =
+          kind === "invoke" || kind === "return" || kind === "revert";
 
         return (
           <div
             key={idx}
-            className={`opcode-line ${hasDebugInfo ? "has-debug-info" : ""}`}
+            className={[
+              "opcode-line",
+              hasDebugInfo ? "has-debug-info" : "",
+              isCallContext ? `context-${kind}` : "",
+            ]
+              .filter(Boolean)
+              .join(" ")}
             onMouseEnter={() => handleOpcodeMouseEnter(sourceRanges)}
             onMouseLeave={handleOpcodeMouseLeave}
           >
-            {hasDebugInfo ? (
+            {isCallContext ? (
+              <span
+                className={`context-badge context-badge-${kind}`}
+                onMouseEnter={(e) => handleDebugIconMouseEnter(e, instruction)}
+                onMouseLeave={hideTooltip}
+                onClick={(e) => handleBadgeClick(e, instruction)}
+                title={summarizeContext(instruction.debug?.context).label}
+              >
+                {contextBadgeLabel(kind)}
+              </span>
+            ) : hasDebugInfo ? (
               <span
                 className="debug-info-icon"
                 onMouseEnter={(e) => handleDebugIconMouseEnter(e, instruction)}
                 onMouseLeave={hideTooltip}
                 onClick={(e) => handleDebugIconClick(e, instruction)}
               >
-                ℹ
+                {"\u2139"}
               </span>
             ) : (
               <span className="debug-info-spacer"></span>
@@ -103,6 +185,11 @@ function InstructionsView({
                   .join("")}
               </span>
             )}
+            {isCallContext && (
+              <span className={`context-label context-label-${kind}`}>
+                {summarizeContext(instruction.debug?.context).label}
+              </span>
+            )}
           </div>
         );
       })}
@@ -135,6 +222,7 @@ function InstructionsView({
 export function BytecodeView({
   bytecode,
   onOpcodeHover,
+  onDeclarationClick,
 }: BytecodeViewProps): JSX.Element {
   const runtimeHex = Array.from(bytecode.runtime)
     .map((b) => b.toString(16).padStart(2, "0"))
@@ -169,6 +257,7 @@ export function BytecodeView({
                 <InstructionsView
                   instructions={bytecode.createInstructions}
                   onOpcodeHover={onOpcodeHover}
+                  onDeclarationClick={onDeclarationClick}
                 />
               )}
             </div>
@@ -196,6 +285,7 @@ export function BytecodeView({
           <InstructionsView
             instructions={bytecode.runtimeInstructions}
             onOpcodeHover={onOpcodeHover}
+            onDeclarationClick={onDeclarationClick}
           />
         </div>
       </div>

packages/bugc-react/src/index.ts

@@ -50,6 +50,12 @@ export {
   extractSourceRange,
   formatDebugContext,
   hasSourceRange,
+  classifyContext,
+  summarizeContext,
+  formatCallSignature,
+  type ContextKind,
+  type ContextSummary,
+  type DeclarationRange,
   // IR debug utilities
   extractInstructionDebug,
   extractTerminatorDebug,