ui: named arguments, click-to-source, and call stack params

Show named argument parameters throughout the UI:

- BytecodeView labels show "invoke add(a, b)" instead of
  "invoke add" when argument names are available in the
  invoke context's pointer group entries
- Call stack breadcrumbs show "add(a, b)" instead of "add()"
  in both programs-react CallStackDisplay and web TraceDrawer
- CallInfoPanel banner shows "Calling add(a, b)"

Add click-to-source for context badges:

- BytecodeView accepts onDeclarationClick callback
- Clicking an invoke/return/revert badge with a declaration
  field fires the callback with sourceId, offset, and length
- Falls back to pinning the tooltip if no declaration

Extract declaration and argument names from contexts:

- summarizeContext now returns argumentNames and declaration
- New formatCallSignature utility for consistent formatting
- New DeclarationRange type for click-to-source data
- CallFrame and CallInfo types carry argumentNames

Author: gnidan

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

@@ -10,6 +10,7 @@ import {
   classifyContext,
   summarizeContext,
   type ContextKind,
+  type DeclarationRange,
 } from "#utils/debugUtils";
 import { useEthdebugTooltip } from "#hooks/useEthdebugTooltip";
 import { EthdebugTooltip } from "./EthdebugTooltip.js";
@@ -35,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,
@@ -106,6 +111,21 @@ function InstructionsView({
     }
   };
 
+  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));
+    }
+  };
+
   return (
     <div className="bytecode-disassembly-interactive">
       {instructions.map((instruction, idx) => {
@@ -138,7 +158,7 @@ function InstructionsView({
                 className={`context-badge context-badge-${kind}`}
                 onMouseEnter={(e) => handleDebugIconMouseEnter(e, instruction)}
                 onMouseLeave={hideTooltip}
-                onClick={(e) => handleDebugIconClick(e, instruction)}
+                onClick={(e) => handleBadgeClick(e, instruction)}
                 title={summarizeContext(instruction.debug?.context).label}
               >
                 {contextBadgeLabel(kind)}
@@ -202,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"))
@@ -236,6 +257,7 @@ export function BytecodeView({
                 <InstructionsView
                   instructions={bytecode.createInstructions}
                   onOpcodeHover={onOpcodeHover}
+                  onDeclarationClick={onDeclarationClick}
                 />
               )}
             </div>
@@ -263,6 +285,7 @@ export function BytecodeView({
           <InstructionsView
             instructions={bytecode.runtimeInstructions}
             onOpcodeHover={onOpcodeHover}
+            onDeclarationClick={onDeclarationClick}
           />
         </div>
       </div>

packages/bugc-react/src/index.ts

@@ -52,8 +52,10 @@ export {
   hasSourceRange,
   classifyContext,
   summarizeContext,
+  formatCallSignature,
   type ContextKind,
   type ContextSummary,
+  type DeclarationRange,
   // IR debug utilities
   extractInstructionDebug,
   extractTerminatorDebug,

packages/bugc-react/src/utils/debugUtils.ts

@@ -135,14 +135,25 @@ export function classifyContext(context: unknown): ContextKind {
   return "other";
 }
 
+/**
+ * A declaration source range for click-to-source.
+ */
+export interface DeclarationRange {
+  sourceId: string;
+  offset: number;
+  length: number;
+}
+
 /**
  * Summary of a function call context for display.
  */
 export interface ContextSummary {
   kind: ContextKind;
   label: string;
   functionName?: string;
+  argumentNames?: string[];
   details?: string;
+  declaration?: DeclarationRange;
 }
 
 /**
@@ -165,11 +176,16 @@ export function summarizeContext(context: unknown): ContextSummary {
           : invoke?.create
             ? "create"
             : "";
+      const argNames = extractArgumentNames(invoke);
+      const declaration = extractDeclaration(invoke);
+      const paramList = argNames.length > 0 ? `(${argNames.join(", ")})` : "()";
       return {
         kind,
-        label: `invoke ${name}`,
+        label: `invoke ${name}${paramList}`,
         functionName: name,
+        argumentNames: argNames.length > 0 ? argNames : undefined,
         details: callType ? `${callType} call` : undefined,
+        declaration,
       };
     }
 
@@ -178,10 +194,12 @@ export function summarizeContext(context: unknown): ContextSummary {
         | Record<string, unknown>
         | undefined;
       const name = (ret?.identifier as string) ?? "unknown";
+      const declaration = extractDeclaration(ret);
       return {
         kind,
-        label: `return ${name}`,
+        label: `return ${name}()`,
         functionName: name,
+        declaration,
       };
     }
 
@@ -191,11 +209,13 @@ export function summarizeContext(context: unknown): ContextSummary {
         | undefined;
       const name = (rev?.identifier as string) ?? "unknown";
       const panic = rev?.panic as number | undefined;
+      const declaration = extractDeclaration(rev);
       return {
         kind,
-        label: `revert ${name}`,
+        label: `revert ${name}()`,
         functionName: name,
         details: panic !== undefined ? `panic(${panic})` : undefined,
+        declaration,
       };
     }
 
@@ -213,6 +233,88 @@ export function summarizeContext(context: unknown): ContextSummary {
   }
 }
 
+/**
+ * Format a function call signature with param names.
+ *
+ * Returns "name(a, b)" if names are available,
+ * "name()" otherwise.
+ */
+export function formatCallSignature(
+  identifier: string | undefined,
+  argNames?: string[],
+): string {
+  const name = identifier || "(anonymous)";
+  if (argNames && argNames.length > 0) {
+    return `${name}(${argNames.join(", ")})`;
+  }
+  return `${name}()`;
+}
+
+/**
+ * Extract argument names from an invoke context's
+ * arguments pointer group.
+ */
+function extractArgumentNames(
+  invoke: Record<string, unknown> | undefined,
+): string[] {
+  if (!invoke) return [];
+
+  const args = invoke.arguments as Record<string, unknown> | undefined;
+  if (!args) return [];
+
+  const pointer = args.pointer as Record<string, unknown> | undefined;
+  if (!pointer) return [];
+
+  const group = pointer.group as Array<Record<string, unknown>> | undefined;
+  if (!Array.isArray(group)) return [];
+
+  const names: string[] = [];
+  let hasAnyName = false;
+  for (const entry of group) {
+    const name = entry.name as string | undefined;
+    if (name) {
+      names.push(name);
+      hasAnyName = true;
+    } else {
+      names.push("_");
+    }
+  }
+
+  return hasAnyName ? names : [];
+}
+
+/**
+ * Extract a declaration source range from a function
+ * identity object (invoke.invoke, return.return, etc.).
+ */
+function extractDeclaration(
+  identity: Record<string, unknown> | undefined,
+): DeclarationRange | undefined {
+  if (!identity) return undefined;
+
+  const decl = identity.declaration as Record<string, unknown> | undefined;
+  if (!decl) return undefined;
+
+  const source = decl.source as Record<string, unknown> | undefined;
+  const range = decl.range as Record<string, number> | undefined;
+
+  if (
+    !source ||
+    !range ||
+    typeof source.id !== "string" ||
+    typeof range.offset !== "number" ||
+    typeof range.length !== "number"
+  ) {
+    return undefined;
+  }
+
+  return {
+    sourceId: source.id,
+    offset: range.offset,
+    length: range.length,
+  };
+}
+
 /**
  * Find a field by name, searching inside gather arrays.
  */

packages/bugc-react/src/utils/index.ts

@@ -8,8 +8,10 @@ export {
   hasSourceRange,
   classifyContext,
   summarizeContext,
+  formatCallSignature,
   type ContextKind,
   type ContextSummary,
+  type DeclarationRange,
 } from "./debugUtils.js";
 
 export {

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

@@ -25,6 +25,9 @@ export interface CallInfoPanelProps {
 
 function formatBanner(info: ResolvedCallInfo): string {
   const name = info.identifier || "(anonymous)";
+  const params = info.argumentNames
+    ? `(${info.argumentNames.join(", ")})`
+    : "()";
 
   if (info.kind === "invoke") {
     const prefix =
@@ -33,7 +36,7 @@ function formatBanner(info: ResolvedCallInfo): string {
         : info.callType === "create"
           ? "Creating"
           : "Calling";
-    return `${prefix} ${name}()`;
+    return `${prefix} ${name}${params}`;
   }
 
   if (info.kind === "return") {

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

@@ -52,7 +52,9 @@ export function CallStackDisplay({
               <span className="call-stack-name">
                 {frame.identifier || "(anonymous)"}
               </span>
-              <span className="call-stack-parens">()</span>
+              <span className="call-stack-parens">
+                ({frame.argumentNames ? frame.argumentNames.join(", ") : ""})
+              </span>
             </button>
           </React.Fragment>
         ))}

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

@@ -63,6 +63,8 @@ export interface ResolvedCallInfo {
   identifier?: string;
   /** Call variant for invoke contexts */
   callType?: "internal" | "external" | "create";
+  /** Named arguments (from invoke context) */
+  argumentNames?: string[];
   /** Panic code for revert contexts */
   panic?: number;
   /** Resolved pointer refs */
@@ -309,6 +311,7 @@ export function TraceProvider({
       kind: extractedCallInfo.kind,
       identifier: extractedCallInfo.identifier,
       callType: extractedCallInfo.callType,
+      argumentNames: extractedCallInfo.argumentNames,
       panic: extractedCallInfo.panic,
       pointerRefs: extractedCallInfo.pointerRefs.map((ref) => ({
         label: ref.label,