From a1fdc45fcb9e43a7b06722fc4f622d8905dbc2e6 Mon Sep 17 00:00:00 2001
From: jaipaljadeja <jadejajaipal5@gmail.com>
Date: Sat, 20 Apr 2024 03:39:36 +0530
Subject: [PATCH 1/5] feat: single step debugging mode for sierra statements

---
 components/Editor/index.tsx           |   9 +-
 components/Tracer/ExecutionStatus.tsx |  48 +++++-
 components/Tracer/index.tsx           | 226 +++++++++++++++-----------
 context/cairoVMApiContext.tsx         |  96 ++++++++++-
 4 files changed, 274 insertions(+), 105 deletions(-)

diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
index 6c806a8..f5f67e0 100644
--- a/components/Editor/index.tsx
+++ b/components/Editor/index.tsx
@@ -18,6 +18,7 @@ import { useTheme } from 'next-themes'
 import {
   CairoVMApiContext,
   ProgramCompilationState,
+  ProgramDebugMode,
   ProgramExecutionState,
 } from 'context/cairoVMApiContext'
 import { Setting, SettingsContext } from 'context/settingsContext'
@@ -63,6 +64,8 @@ const Editor = ({ readOnly = false }: Props) => {
     currentSierraVariables,
     sierraStatementsToCairoInfo,
     logs: apiLogs,
+    sierraSubStepNumber,
+    debugMode,
   } = useContext(CairoVMApiContext)
 
   const { addToConsoleLog, isThreeColumnLayout } = useContext(AppUiContext)
@@ -406,7 +409,11 @@ const Editor = ({ readOnly = false }: Props) => {
                   instructions={sierraStatements}
                   codeType={codeType}
                   activeIndexes={
-                    casmToSierraProgramMap[activeCasmInstructionIndex] ?? []
+                    debugMode === ProgramDebugMode.Sierra
+                      ? sierraSubStepNumber !== undefined
+                        ? [sierraSubStepNumber]
+                        : []
+                      : casmToSierraProgramMap[activeCasmInstructionIndex] ?? []
                   }
                   errorIndexes={
                     casmToSierraProgramMap[errorCasmInstructionIndex] ?? []
diff --git a/components/Tracer/ExecutionStatus.tsx b/components/Tracer/ExecutionStatus.tsx
index 7d9f98f..c473777 100644
--- a/components/Tracer/ExecutionStatus.tsx
+++ b/components/Tracer/ExecutionStatus.tsx
@@ -1,14 +1,31 @@
+import { useContext, useId, useMemo } from 'react'
+
 import {
   RiArrowGoForwardLine,
   RiArrowGoBackLine,
   RiPlayCircleLine,
 } from '@remixicon/react'
 import { Priority, useRegisterActions } from 'kbar'
+import Select from 'react-select'
+
+import { CairoVMApiContext, ProgramDebugMode } from 'context/cairoVMApiContext'
 
 import { Button } from 'components/ui'
 
 import { TraceEntry } from '.'
 
+type DebugModeOption = {
+  value: ProgramDebugMode
+  label: ProgramDebugMode
+}
+
+const debugModeOptions: DebugModeOption[] = (
+  Object.keys(ProgramDebugMode) as Array<keyof typeof ProgramDebugMode>
+).map((mode) => ({
+  value: ProgramDebugMode[mode],
+  label: ProgramDebugMode[mode],
+}))
+
 const ExecutionStatus = ({
   onStepIn,
   onStepOut,
@@ -22,6 +39,16 @@ const ExecutionStatus = ({
   trace: TraceEntry[] | undefined
   executionTraceStepNumber: number
 }) => {
+  const { debugMode, setDebugMode } = useContext(CairoVMApiContext)
+
+  const debugModeValue: DebugModeOption = useMemo(
+    () => ({
+      value: debugMode,
+      label: debugMode,
+    }),
+    [debugMode],
+  )
+
   const actions = [
     {
       id: 'stepnext',
@@ -61,14 +88,27 @@ const ExecutionStatus = ({
     },
   ]
 
+  const onChangeDebugMode = (option: DebugModeOption | null) => {
+    if (option) {
+      setDebugMode(option.value)
+    }
+  }
+
   useRegisterActions(actions, [onStepIn, onStepOut, onContinueExecution])
 
   return (
     <div className="flex flex-grow justify-between items-center text-sm">
-      <div>
-        <span className="text-gray-600 dark:text-gray-400 text-sm">
-          Execution Trace
-        </span>
+      <div className="flex items-center">
+        <Select
+          onChange={onChangeDebugMode}
+          options={debugModeOptions}
+          value={debugModeValue}
+          isSearchable={false}
+          classNamePrefix="select"
+          className="[&_.select\_\_menu]:w-56 [&_.select\_\_menu]:z-20"
+          menuPlacement="auto"
+          instanceId={useId()}
+        />
       </div>
 
       <div className="flex flex-row items-center gap-4">
diff --git a/components/Tracer/index.tsx b/components/Tracer/index.tsx
index 491cab5..b9618c4 100644
--- a/components/Tracer/index.tsx
+++ b/components/Tracer/index.tsx
@@ -11,12 +11,16 @@ import { Priority, useRegisterActions } from 'kbar'
 import ReactTooltip from 'react-tooltip'
 import { TableVirtuoso, TableVirtuosoHandle } from 'react-virtuoso'
 
+import { CodeType } from 'context/appUiContext'
 import {
   BreakPoints,
   CairoVMApiContext,
+  ProgramDebugMode,
   ProgramExecutionState,
 } from 'context/cairoVMApiContext'
 
+import { InstructionsTable as SierraInstructionTable } from 'components/Editor/InstructionsTable'
+
 import { cn } from '../../util/styles'
 import Console from '../Editor/Console'
 
@@ -76,6 +80,13 @@ export const Tracer = () => {
     executionTraceStepNumber,
     addBreakPoint,
     removeBreakPoint,
+    debugMode,
+    sierraStatements,
+    casmToSierraProgramMap,
+    activeCasmInstructionIndex,
+    errorCasmInstructionIndex,
+    currentSierraVariables,
+    sierraSubStepNumber,
   } = useContext(CairoVMApiContext)
 
   const trace = tracerData?.trace
@@ -107,18 +118,8 @@ export const Tracer = () => {
   }
 
   useEffect(() => {
-    const element = tableRef.current?.querySelector(
-      '#focus_row',
-    ) as HTMLElement | null
-    if (tableRef.current && element?.offsetTop) {
-      tableRef.current.scrollTo({
-        top: element.offsetTop - 58,
-        behavior: 'smooth',
-      })
-    }
-  }, [currentTraceEntry, currentFocus])
-
-  const tableRef = useRef<HTMLDivElement>(null)
+    setCurrentFocus(tracerData?.trace[executionTraceStepNumber].pc || 0)
+  }, [debugMode, executionTraceStepNumber, tracerData?.trace])
 
   function stepIn() {
     if (
@@ -128,16 +129,14 @@ export const Tracer = () => {
     ) {
       return
     }
-    onExecutionStepChange(executionTraceStepNumber + 1)
-    setCurrentFocus(tracerData?.trace[executionTraceStepNumber + 1].pc || 0)
+    onExecutionStepChange('increase')
   }
 
   function stepOut() {
     if (!trace || trace.length === 0 || executionTraceStepNumber === 0) {
       return
     }
-    onExecutionStepChange(executionTraceStepNumber - 1)
-    setCurrentFocus(tracerData?.trace[executionTraceStepNumber - 1].pc || 0)
+    onExecutionStepChange('decrease')
   }
 
   function continueExecution() {
@@ -197,27 +196,45 @@ export const Tracer = () => {
         />
       </div>
 
-      {tracerData && currentTraceEntry && trace && breakPoints && (
-        <div
-          ref={tableRef}
-          className={
-            'h-full w-full bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500'
-          }
-        >
-          <InstructionsTable
-            memory={tracerData.memory}
-            pcInstMap={tracerData.pcInstMap}
-            currentTraceEntry={currentTraceEntry}
-            currentFocus={currentFocus.idx}
-            breakpoints={breakPoints}
-            toogleBreakPoint={toogleBreakPoint}
-            errorTraceEntry={
-              executionState === ProgramExecutionState.Error
-                ? errorTraceEntry
-                : null
+      {debugMode === ProgramDebugMode.Execution ? (
+        tracerData &&
+        currentTraceEntry &&
+        trace &&
+        breakPoints && (
+          <div
+            className={
+              'h-full w-full bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500'
             }
-          />
-        </div>
+          >
+            <InstructionsTable
+              memory={tracerData.memory}
+              pcInstMap={tracerData.pcInstMap}
+              currentTraceEntry={currentTraceEntry}
+              currentFocus={currentFocus.idx}
+              breakpoints={breakPoints}
+              toogleBreakPoint={toogleBreakPoint}
+              errorTraceEntry={
+                executionState === ProgramExecutionState.Error
+                  ? errorTraceEntry
+                  : null
+              }
+            />
+          </div>
+        )
+      ) : (
+        <SierraInstructionTable
+          instructions={sierraStatements}
+          codeType={CodeType.Sierra}
+          activeIndexes={
+            debugMode === ProgramDebugMode.Sierra
+              ? sierraSubStepNumber !== undefined
+                ? [sierraSubStepNumber]
+                : []
+              : casmToSierraProgramMap[activeCasmInstructionIndex] ?? []
+          }
+          errorIndexes={casmToSierraProgramMap[errorCasmInstructionIndex] ?? []}
+          variables={currentSierraVariables || {}}
+        />
       )}
 
       <div className="border-gray-200 border-t dark:border-black-500 flex-none overflow-hidden mb-[10px] h-[22vh]">
@@ -258,6 +275,7 @@ export const Tracer = () => {
 
           {selectedConsoleTab === IConsoleTab.DebugInfo && (
             <DebugInfoTab
+              debugMode={debugMode}
               trace={trace}
               currentTraceEntry={currentTraceEntry}
               executionTraceStepNumber={executionTraceStepNumber}
@@ -277,12 +295,14 @@ function DebugInfoTab({
   currentCallstackEntry,
   executionTraceStepNumber,
   handleRegisterPointerClick,
+  debugMode,
 }: {
   trace: TraceEntry[] | undefined
   currentTraceEntry: TraceEntry | undefined
   currentCallstackEntry?: CallstackEntry[]
   executionTraceStepNumber: number
   handleRegisterPointerClick: (num: number) => void
+  debugMode: ProgramDebugMode
 }) {
   return (
     <div className="px-4 pb-4">
@@ -292,50 +312,58 @@ function DebugInfoTab({
         </p>
       ) : (
         <dl className="text-2xs">
-          <div className="flex flex-col lg:flex-row justify-between">
-            <div>
-              <dt className="mb-1 text-gray-500 dark:text-gray-400 font-medium uppercase">
-                Registers
-              </dt>
-              <dd className="font-mono mb-2 flex gap-1">
-                <button
-                  onClick={() => {
-                    handleRegisterPointerClick(currentTraceEntry?.pc as number)
-                  }}
-                  className="font-mono inline-block border px-2 py-1 mb-1 cursor-pointer rounded-sm break-all text-tiny border-gray-300 dark:border-gray-700 text-gray-500 hover:text-fuchsia-700 hover:border-fuchsia-700"
-                >
-                  PC: {currentTraceEntry?.pc}
-                </button>
-                <button
-                  onClick={() => {
-                    handleRegisterPointerClick(currentTraceEntry?.fp as number)
-                  }}
-                  className="font-mono inline-block border px-2 py-1 mb-1 rounded-sm break-all cursor-pointer text-tiny border-gray-300 dark:border-gray-700 text-gray-500 hover:text-green-700 hover:border-green-700"
-                >
-                  FP: {currentTraceEntry?.fp}
-                </button>
-                <button
-                  onClick={() => {
-                    handleRegisterPointerClick(currentTraceEntry?.ap as number)
-                  }}
-                  className="font-mono inline-block border px-2 py-1 mb-1 rounded-sm break-all cursor-pointer text-tiny border-gray-300 dark:border-gray-700 text-gray-500 hover:text-orange-700 hover:border-orange-700"
-                >
-                  AP: {currentTraceEntry?.ap}
-                </button>
-              </dd>
+          {debugMode === ProgramDebugMode.Execution && (
+            <div className="flex flex-col lg:flex-row justify-between">
+              <div>
+                <dt className="mb-1 text-gray-500 dark:text-gray-400 font-medium uppercase">
+                  Registers
+                </dt>
+                <dd className="font-mono mb-2 flex gap-1">
+                  <button
+                    onClick={() => {
+                      handleRegisterPointerClick(
+                        currentTraceEntry?.pc as number,
+                      )
+                    }}
+                    className="font-mono inline-block border px-2 py-1 mb-1 cursor-pointer rounded-sm break-all text-tiny border-gray-300 dark:border-gray-700 text-gray-500 hover:text-fuchsia-700 hover:border-fuchsia-700"
+                  >
+                    PC: {currentTraceEntry?.pc}
+                  </button>
+                  <button
+                    onClick={() => {
+                      handleRegisterPointerClick(
+                        currentTraceEntry?.fp as number,
+                      )
+                    }}
+                    className="font-mono inline-block border px-2 py-1 mb-1 rounded-sm break-all cursor-pointer text-tiny border-gray-300 dark:border-gray-700 text-gray-500 hover:text-green-700 hover:border-green-700"
+                  >
+                    FP: {currentTraceEntry?.fp}
+                  </button>
+                  <button
+                    onClick={() => {
+                      handleRegisterPointerClick(
+                        currentTraceEntry?.ap as number,
+                      )
+                    }}
+                    className="font-mono inline-block border px-2 py-1 mb-1 rounded-sm break-all cursor-pointer text-tiny border-gray-300 dark:border-gray-700 text-gray-500 hover:text-orange-700 hover:border-orange-700"
+                  >
+                    AP: {currentTraceEntry?.ap}
+                  </button>
+                </dd>
+              </div>
+              <div>
+                <dt className="mb-1 text-gray-500 dark:text-gray-400 font-medium uppercase">
+                  Execution steps
+                </dt>
+                <dd className="font-mono mb-2">
+                  <div className="font-mono inline-block border px-2 py-1 mb-1 rounded-sm break-all text-tiny border-gray-300 dark:border-gray-700 text-gray-500">
+                    Current: {executionTraceStepNumber + 1}, Total:{' '}
+                    {trace?.length}
+                  </div>
+                </dd>
+              </div>
             </div>
-            <div>
-              <dt className="mb-1 text-gray-500 dark:text-gray-400 font-medium uppercase">
-                Execution steps
-              </dt>
-              <dd className="font-mono mb-2">
-                <div className="font-mono inline-block border px-2 py-1 mb-1 rounded-sm break-all text-tiny border-gray-300 dark:border-gray-700 text-gray-500">
-                  Current: {executionTraceStepNumber + 1}, Total:{' '}
-                  {trace?.length}
-                </div>
-              </dd>
-            </div>
-          </div>
+          )}
           <div>
             <dt className="mb-1 text-gray-500 dark:text-gray-400 font-medium uppercase">
               Callstack
@@ -344,13 +372,17 @@ function DebugInfoTab({
               <table className="w-full font-mono text-tiny border border-gray-300 dark:border-black-500">
                 <thead>
                   <tr className="text-left sticky z-[1] top-0 bg-gray-50 dark:bg-black-600 text-gray-400 dark:text-gray-600 border-b border-gray-300 dark:border-black-500">
-                    <th className="py-1 px-2 font-thin min-w-16">FP</th>
-                    <th className="py-1 px-2 font-thin  whitespace-nowrap w-16">
-                      CALL PC
-                    </th>
-                    <th className="py-1 px-2 font-thin whitespace-nowrap w-16">
-                      RET PC
-                    </th>
+                    {debugMode === ProgramDebugMode.Execution && (
+                      <>
+                        <th className="py-1 px-2 font-thin min-w-16">FP</th>
+                        <th className="py-1 px-2 font-thin  whitespace-nowrap w-16">
+                          CALL PC
+                        </th>
+                        <th className="py-1 px-2 font-thin whitespace-nowrap w-16">
+                          RET PC
+                        </th>
+                      </>
+                    )}
                     <th className="py-1 px-2 font-thin text-left min-w-64">
                       FN NAME
                     </th>
@@ -365,15 +397,19 @@ function DebugInfoTab({
                       key={index}
                       className="relative border-b border-gray-300 dark:border-black-500 text-gray-400 dark:text-gray-600"
                     >
-                      <td className="py-1 px-2 min-w-16">
-                        {callstackEntry.fp}
-                      </td>
-                      <td className="py-1 px-2 w-16">
-                        {callstackEntry.call_pc}
-                      </td>
-                      <td className="py-1 px-2 w-16">
-                        {callstackEntry.ret_pc}
-                      </td>
+                      {debugMode === ProgramDebugMode.Execution && (
+                        <>
+                          <td className="py-1 px-2 min-w-16">
+                            {callstackEntry.fp}
+                          </td>
+                          <td className="py-1 px-2 w-16">
+                            {callstackEntry.call_pc}
+                          </td>
+                          <td className="py-1 px-2 w-16">
+                            {callstackEntry.ret_pc}
+                          </td>
+                        </>
+                      )}
                       <td className="py-1 px-2 text-left w-64 break-all">
                         {callstackEntry.fn_name}
                       </td>
diff --git a/context/cairoVMApiContext.tsx b/context/cairoVMApiContext.tsx
index 9dcb7e6..3a4958b 100644
--- a/context/cairoVMApiContext.tsx
+++ b/context/cairoVMApiContext.tsx
@@ -1,4 +1,10 @@
-import React, { PropsWithChildren, createContext, useState } from 'react'
+import React, {
+  PropsWithChildren,
+  createContext,
+  useState,
+  useEffect,
+  useRef,
+} from 'react'
 
 import { IInstruction, ILogEntry } from 'types'
 
@@ -20,6 +26,11 @@ export enum ProgramExecutionState {
   Error,
 }
 
+export enum ProgramDebugMode {
+  Execution = 'Debug VM Execution Trace',
+  Sierra = 'Debug Sierra',
+}
+
 interface Position {
   line: number
   col: number
@@ -41,6 +52,7 @@ export type BreakPoints = { [key: string]: boolean }
 const noOp = () => undefined
 
 type ContextProps = {
+  debugMode: ProgramDebugMode
   sierraCode: string
   casmCode: string
   compilationState: ProgramCompilationState
@@ -52,6 +64,7 @@ type ContextProps = {
   logs: ILogEntry[]
   tracerData?: TracerData
   executionTraceStepNumber: number
+  sierraSubStepNumber: number | undefined
   activeCasmInstructionIndex: number
   errorCasmInstructionIndex: number
   sierraStatements: IInstruction[]
@@ -63,14 +76,16 @@ type ContextProps = {
   breakPoints?: BreakPoints
   sierraStatementsToCairoInfo?: SierraStatementsToCairoInfo
 
+  setDebugMode: (debugMode: ProgramDebugMode) => void
   compileCairoCode: (cairoCode: string, programArguments: string) => void
-  onExecutionStepChange: (step: number) => void
+  onExecutionStepChange: (action: 'increase' | 'decrease') => void
   onContinueExecution: () => void
   addBreakPoint: (addr: string) => void
   removeBreakPoint: (addr: string) => void
 }
 
 export const CairoVMApiContext = createContext<ContextProps>({
+  debugMode: ProgramDebugMode.Execution,
   sierraCode: '',
   casmCode: '',
   casmInstructions: [],
@@ -81,6 +96,7 @@ export const CairoVMApiContext = createContext<ContextProps>({
   executionState: ProgramExecutionState.Idle,
   executionPanicMessage: '',
   executionTraceStepNumber: 0,
+  sierraSubStepNumber: undefined,
   activeCasmInstructionIndex: 0,
   errorCasmInstructionIndex: 0,
   sierraStatements: [],
@@ -94,11 +110,15 @@ export const CairoVMApiContext = createContext<ContextProps>({
   onContinueExecution: noOp,
   addBreakPoint: noOp,
   removeBreakPoint: noOp,
+  setDebugMode: noOp,
 })
 
 export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
   children,
 }) => {
+  const [debugMode, setDebugMode] = useState<ProgramDebugMode>(
+    ProgramDebugMode.Execution,
+  )
   const [sierraCode, setSierraCode] = useState<string>('')
   const [casmCode, setCasmCode] = useState<string>('')
   const [casmInstructions, setCasmInstructions] = useState<IInstruction[]>([])
@@ -119,6 +139,9 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
   const [breakPoints, setBreakPoints] = useState<BreakPoints>({})
   const [executionTraceStepNumber, setExecutionTraceStepNumber] =
     useState<number>(0)
+  const [sierraSubStepNumber, setSierraSubStepNumber] = useState<
+    number | undefined
+  >(undefined)
   const [sierraStatements, setSierraStatements] = useState<IInstruction[]>([])
   const [sierraStatementsToCairoInfo, setSierraStatementsToCairoInfo] =
     useState<SierraStatementsToCairoInfo>({})
@@ -139,8 +162,68 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
   const errorCasmInstructionIndex =
     tracerData?.pcToInstIndexesMap[(errorTraceEntry?.pc ?? 0).toString()] ?? -1
 
-  function onExecutionStepChange(stepNumber: number) {
-    setExecutionTraceStepNumber(stepNumber)
+  const sierraActiveIndexes = casmToSierraProgramMap[activeCasmInstructionIndex]
+  const prevAction = useRef<'increase' | 'decrease'>()
+
+  useEffect(() => {
+    if (
+      debugMode === ProgramDebugMode.Sierra &&
+      sierraActiveIndexes &&
+      sierraActiveIndexes.length > 0
+    ) {
+      if (prevAction.current === 'increase') {
+        setSierraSubStepNumber(sierraActiveIndexes[0])
+      } else {
+        setSierraSubStepNumber(
+          sierraActiveIndexes[sierraActiveIndexes.length - 1],
+        )
+      }
+    }
+  }, [debugMode, sierraActiveIndexes])
+
+  const onExecutionStepChange = (action: 'increase' | 'decrease') => {
+    // check if sierraActiveIndexes exist and is Sierra debug mode.
+    if (sierraActiveIndexes && debugMode === ProgramDebugMode.Sierra) {
+      // Check if there are active sub-steps for the current execution step
+      if (sierraSubStepNumber !== undefined) {
+        // Determine the index of the current sub-step in sierraActiveIndexes array
+        const currentSubStepIndex =
+          sierraActiveIndexes.indexOf(sierraSubStepNumber)
+
+        if (action === 'increase') {
+          // Move to the next sub-step
+          if (currentSubStepIndex < sierraActiveIndexes.length - 1) {
+            setSierraSubStepNumber(sierraActiveIndexes[currentSubStepIndex + 1])
+          } else {
+            // No more sub-steps, move to the next trace step
+            setExecutionTraceStepNumber((prev) => prev + 1)
+            // Reset sub-step since we're changing steps
+            setSierraSubStepNumber(undefined)
+          }
+        } else if (action === 'decrease') {
+          // Move to the previous sub-step
+          if (currentSubStepIndex > 0) {
+            setSierraSubStepNumber(sierraActiveIndexes[currentSubStepIndex - 1])
+          } else {
+            // No more sub-steps, move to the previous trace step
+            setExecutionTraceStepNumber((prev) => prev - 1)
+            // Reset sub-step since we're changing steps
+            setSierraSubStepNumber(undefined)
+          }
+        }
+      }
+    } else {
+      // If no sierraActiveIndexes, just change the execution trace step number
+      setExecutionTraceStepNumber((prev) =>
+        action === 'increase' ? prev + 1 : prev - 1,
+      )
+      // once executionTraceStepNumber is updated, sierraActiveIndexes updates
+      // so to know whether to initialize sub step with first or last element of sierraActiveIndexes
+      // we save the action in ref which we will use in useEffect hook with dependency of sierraActiveIndexes
+      prevAction.current = action
+      // Reset sub-step since we're changing steps
+      setSierraSubStepNumber(undefined)
+    }
   }
 
   function onContinueExecution() {
@@ -196,6 +279,7 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
             ? ProgramCompilationState.CompilationSuccess
             : ProgramCompilationState.CompilationErr,
         )
+        setSierraSubStepNumber(undefined)
         setLogs(data.logs)
         setExecutionState(
           data.is_execution_successful === true
@@ -253,6 +337,7 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
   return (
     <CairoVMApiContext.Provider
       value={{
+        debugMode,
         sierraCode,
         casmCode,
         compilationState,
@@ -264,6 +349,7 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
         tracerData,
         casmInstructions,
         executionTraceStepNumber,
+        sierraSubStepNumber,
         currentTraceEntry,
         currentSierraVariables,
         activeCasmInstructionIndex,
@@ -273,7 +359,7 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
         casmToSierraStatementsMap,
         breakPoints,
         sierraStatementsToCairoInfo,
-
+        setDebugMode,
         compileCairoCode,
         onExecutionStepChange,
         onContinueExecution,

From 7c891adc6fc3889d0e3d96826044bb1e2c46993e Mon Sep 17 00:00:00 2001
From: jaipaljadeja <jadejajaipal5@gmail.com>
Date: Wed, 24 Apr 2024 14:26:48 +0530
Subject: [PATCH 2/5] Stepping Logic Fix, Cairo Code Highlighting for Each
 Sierra Statement

---
 components/Editor/index.tsx   | 126 +++++++++++++++++++++-------------
 components/Tracer/index.tsx   |  22 +++---
 context/cairoVMApiContext.tsx | 102 ++++++++++++++++-----------
 3 files changed, 155 insertions(+), 95 deletions(-)

diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
index f5f67e0..3d08dd9 100644
--- a/components/Editor/index.tsx
+++ b/components/Editor/index.tsx
@@ -45,6 +45,19 @@ type Props = {
   readOnly?: boolean
 }
 
+interface DecorationOptions {
+  inlineClassName: string
+}
+interface Decoration {
+  range: {
+    startLineNumber: number
+    startColumn: number
+    endLineNumber: number
+    endColumn: number
+  }
+  options: DecorationOptions
+}
+
 const Editor = ({ readOnly = false }: Props) => {
   const { settingsLoaded, getSetting } = useContext(SettingsContext)
   const router = useRouter()
@@ -64,7 +77,7 @@ const Editor = ({ readOnly = false }: Props) => {
     currentSierraVariables,
     sierraStatementsToCairoInfo,
     logs: apiLogs,
-    sierraSubStepNumber,
+    sierraSubStepIndex,
     debugMode,
   } = useContext(CairoVMApiContext)
 
@@ -77,7 +90,8 @@ const Editor = ({ readOnly = false }: Props) => {
   const [exampleOption, setExampleOption] = useState<number>(0)
   const [codeType, setCodeType] = useState<string | undefined>()
   const [programArguments, setProgramArguments] = useState<string>('')
-
+  const [editorDecorations, setEditorDecorations] =
+    useState<editor.IEditorDecorationsCollection | null>(null)
   const editorRef = useRef<editor.IStandaloneCodeEditor>()
   const monaco = useMonaco()
 
@@ -104,34 +118,48 @@ const Editor = ({ readOnly = false }: Props) => {
     }
   }
 
-  const [decorations, setDecorations] = useState([])
-
-  interface DecorationOptions {
-    inlineClassName: string
-  }
-  interface Decoration {
-    range: {
-      startLineNumber: number
-      startColumn: number
-      endLineNumber: number
-      endColumn: number
+  function highLightEditor(decorations: Decoration[]) {
+    const editor = editorRef.current
+    if (editor) {
+      // we clear previous decorations
+      editorDecorations?.clear()
+      // add editor decorations
+      const editor_decorations = editor.createDecorationsCollection(decorations)
+      // update new decorations
+      setEditorDecorations(editor_decorations)
     }
-    options: DecorationOptions
   }
 
   useEffect(() => {
     setTimeout(() => {
-      const multiplieDecorations: Decoration[] = []
+      const multipleDecorations: Decoration[] = []
       let isHighlightOnScreen = false
-      casmToSierraProgramMap[activeCasmInstructionIndex]?.map((item, i) => {
-        const index = casmToSierraStatementsMap[activeCasmInstructionIndex][i]
+      const isSierraDebugMode = debugMode === ProgramDebugMode.Sierra
+
+      casmToSierraProgramMap[activeCasmInstructionIndex]?.forEach((item, i) => {
+        const index = isSierraDebugMode
+          ? sierraSubStepIndex !== undefined
+            ? casmToSierraStatementsMap[activeCasmInstructionIndex][
+                sierraSubStepIndex
+              ]
+            : undefined
+          : casmToSierraStatementsMap[activeCasmInstructionIndex][i]
+
+        // if in sierra debugmode we dont need to add decorations for
+        // all sierra statements in current activeCasmInstructionIndex
+        // we need to add decorations just for the current substep sierra statement
+        if (isSierraDebugMode && i > 0) {
+          return
+        }
 
-        if (sierraStatementsToCairoInfo) {
-          sierraStatementsToCairoInfo[index]?.cairo_locations.map(
+        if (sierraStatementsToCairoInfo && index !== undefined) {
+          sierraStatementsToCairoInfo[index]?.cairo_locations.forEach(
             (cairoLocElem) => {
-              if (
-                isRangeVisible(cairoLocElem.start.line, cairoLocElem.end.line)
-              ) {
+              const isInsideVisibleRange = isRangeVisible(
+                cairoLocElem.start.line,
+                cairoLocElem.end.line,
+              )
+              if (isInsideVisibleRange) {
                 isHighlightOnScreen = true
               }
               const startLine: number = cairoLocElem.start.line + 1
@@ -139,7 +167,7 @@ const Editor = ({ readOnly = false }: Props) => {
               const startCol: number = cairoLocElem.start.col + 1
               const endCol: number = cairoLocElem.end.col + 1
               if (monaco) {
-                multiplieDecorations.push({
+                multipleDecorations.push({
                   range: new monaco.Range(startLine, startCol, endLine, endCol),
                   options: { inlineClassName: 'bg-yellow-300 bg-opacity-40' },
                 })
@@ -147,35 +175,31 @@ const Editor = ({ readOnly = false }: Props) => {
             },
           )
 
-          if (!isHighlightOnScreen && multiplieDecorations[0] && monaco) {
+          if (!isHighlightOnScreen && multipleDecorations[0] && monaco) {
             editorRef.current?.revealRangeInCenter(
               new monaco.Range(
-                multiplieDecorations[0].range.startLineNumber,
-                multiplieDecorations[0].range.startColumn,
-                multiplieDecorations[0].range.endLineNumber,
-                multiplieDecorations[0].range.endColumn,
+                multipleDecorations[0].range.startLineNumber,
+                multipleDecorations[0].range.startColumn,
+                multipleDecorations[0].range.endLineNumber,
+                multipleDecorations[0].range.endColumn,
               ),
             )
           }
         }
-      }) || []
-      const editor = editorRef.current as any
-      if (editor) {
-        if (cairoCode === compiledCairoCode) {
-          const newDecorationsIds = editor.deltaDecorations(
-            decorations,
-            multiplieDecorations,
-          )
-          setDecorations(newDecorationsIds)
-        } else {
-          const newDecorationsIds = editor.deltaDecorations(decorations, [])
-          setDecorations(newDecorationsIds)
-        }
-      }
+      })
+
+      highLightEditor(multipleDecorations)
     })
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeCasmInstructionIndex, codeType, cairoCode, compiledCairoCode])
+  }, [
+    activeCasmInstructionIndex,
+    codeType,
+    cairoCode,
+    compiledCairoCode,
+    debugMode,
+    sierraSubStepIndex,
+  ])
   const [showArgumentsHelper, setShowArgumentsHelper] = useState(false)
 
   const { isFullScreen } = useContext(AppUiContext)
@@ -409,11 +433,17 @@ const Editor = ({ readOnly = false }: Props) => {
                   instructions={sierraStatements}
                   codeType={codeType}
                   activeIndexes={
-                    debugMode === ProgramDebugMode.Sierra
-                      ? sierraSubStepNumber !== undefined
-                        ? [sierraSubStepNumber]
-                        : []
-                      : casmToSierraProgramMap[activeCasmInstructionIndex] ?? []
+                    casmToSierraProgramMap[activeCasmInstructionIndex]
+                      ? debugMode === ProgramDebugMode.Sierra
+                        ? sierraSubStepIndex !== undefined
+                          ? [
+                              casmToSierraProgramMap[
+                                activeCasmInstructionIndex
+                              ][sierraSubStepIndex],
+                            ]
+                          : []
+                        : casmToSierraProgramMap[activeCasmInstructionIndex]
+                      : []
                   }
                   errorIndexes={
                     casmToSierraProgramMap[errorCasmInstructionIndex] ?? []
diff --git a/components/Tracer/index.tsx b/components/Tracer/index.tsx
index b9618c4..c0cf37e 100644
--- a/components/Tracer/index.tsx
+++ b/components/Tracer/index.tsx
@@ -86,7 +86,7 @@ export const Tracer = () => {
     activeCasmInstructionIndex,
     errorCasmInstructionIndex,
     currentSierraVariables,
-    sierraSubStepNumber,
+    sierraSubStepIndex,
   } = useContext(CairoVMApiContext)
 
   const trace = tracerData?.trace
@@ -118,8 +118,8 @@ export const Tracer = () => {
   }
 
   useEffect(() => {
-    setCurrentFocus(tracerData?.trace[executionTraceStepNumber].pc || 0)
-  }, [debugMode, executionTraceStepNumber, tracerData?.trace])
+    setCurrentFocus(tracerData?.trace[executionTraceStepNumber]?.pc || 0)
+  }, [executionTraceStepNumber, tracerData?.trace])
 
   function stepIn() {
     if (
@@ -226,11 +226,17 @@ export const Tracer = () => {
           instructions={sierraStatements}
           codeType={CodeType.Sierra}
           activeIndexes={
-            debugMode === ProgramDebugMode.Sierra
-              ? sierraSubStepNumber !== undefined
-                ? [sierraSubStepNumber]
-                : []
-              : casmToSierraProgramMap[activeCasmInstructionIndex] ?? []
+            casmToSierraProgramMap[activeCasmInstructionIndex]
+              ? debugMode === ProgramDebugMode.Sierra
+                ? sierraSubStepIndex !== undefined
+                  ? [
+                      casmToSierraProgramMap[activeCasmInstructionIndex][
+                        sierraSubStepIndex
+                      ],
+                    ]
+                  : []
+                : casmToSierraProgramMap[activeCasmInstructionIndex]
+              : []
           }
           errorIndexes={casmToSierraProgramMap[errorCasmInstructionIndex] ?? []}
           variables={currentSierraVariables || {}}
diff --git a/context/cairoVMApiContext.tsx b/context/cairoVMApiContext.tsx
index 3a4958b..8a84eb9 100644
--- a/context/cairoVMApiContext.tsx
+++ b/context/cairoVMApiContext.tsx
@@ -64,7 +64,7 @@ type ContextProps = {
   logs: ILogEntry[]
   tracerData?: TracerData
   executionTraceStepNumber: number
-  sierraSubStepNumber: number | undefined
+  sierraSubStepIndex: number | undefined
   activeCasmInstructionIndex: number
   errorCasmInstructionIndex: number
   sierraStatements: IInstruction[]
@@ -96,7 +96,7 @@ export const CairoVMApiContext = createContext<ContextProps>({
   executionState: ProgramExecutionState.Idle,
   executionPanicMessage: '',
   executionTraceStepNumber: 0,
-  sierraSubStepNumber: undefined,
+  sierraSubStepIndex: undefined,
   activeCasmInstructionIndex: 0,
   errorCasmInstructionIndex: 0,
   sierraStatements: [],
@@ -139,7 +139,7 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
   const [breakPoints, setBreakPoints] = useState<BreakPoints>({})
   const [executionTraceStepNumber, setExecutionTraceStepNumber] =
     useState<number>(0)
-  const [sierraSubStepNumber, setSierraSubStepNumber] = useState<
+  const [sierraSubStepIndex, setSierraSubStepIndex] = useState<
     number | undefined
   >(undefined)
   const [sierraStatements, setSierraStatements] = useState<IInstruction[]>([])
@@ -164,65 +164,91 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
 
   const sierraActiveIndexes = casmToSierraProgramMap[activeCasmInstructionIndex]
   const prevAction = useRef<'increase' | 'decrease'>()
+  const traceLength = tracerData?.trace?.length
 
   useEffect(() => {
-    if (
-      debugMode === ProgramDebugMode.Sierra &&
-      sierraActiveIndexes &&
-      sierraActiveIndexes.length > 0
-    ) {
-      if (prevAction.current === 'increase') {
-        setSierraSubStepNumber(sierraActiveIndexes[0])
-      } else {
-        setSierraSubStepNumber(
-          sierraActiveIndexes[sierraActiveIndexes.length - 1],
-        )
+    // only if program is in sierra debug mode
+    if (debugMode === ProgramDebugMode.Sierra) {
+      if (sierraActiveIndexes && sierraActiveIndexes.length > 0) {
+        // if sierraActiveIndexes exist then we initialise it with last index or 0 index
+        // based on the button action (increase / decrease)
+        if (prevAction.current === 'increase') {
+          setSierraSubStepIndex(0)
+        } else {
+          setSierraSubStepIndex(sierraActiveIndexes.length - 1)
+        }
+      }
+      // when no sierraActiveIndexes exist
+      else if (prevAction.current !== undefined) {
+        // !!!Important Note!!!:
+        // due to the dependency of executionTraceStepNumber
+        // this will be called recursively until
+        // we find a step with some sierraActiveIndexes or trace step is at the end or the start
+        // This helps in skipping all trace steps without sierra statements
+
+        // if action was of increase then we increase step number
+        // with checks if its less than tracelength
+        if (
+          prevAction.current === 'increase' &&
+          traceLength &&
+          executionTraceStepNumber + 1 < traceLength
+        ) {
+          setExecutionTraceStepNumber((prev) => prev + 1)
+        }
+        // if action was of decrease then we decrease step number
+        // with checks if its more than 0
+        else if (
+          prevAction.current === 'decrease' &&
+          executionTraceStepNumber > 0
+        ) {
+          setExecutionTraceStepNumber((prev) => prev - 1)
+        }
       }
     }
-  }, [debugMode, sierraActiveIndexes])
+  }, [debugMode, sierraActiveIndexes, executionTraceStepNumber, traceLength])
 
   const onExecutionStepChange = (action: 'increase' | 'decrease') => {
-    // check if sierraActiveIndexes exist and is Sierra debug mode.
-    if (sierraActiveIndexes && debugMode === ProgramDebugMode.Sierra) {
-      // Check if there are active sub-steps for the current execution step
-      if (sierraSubStepNumber !== undefined) {
-        // Determine the index of the current sub-step in sierraActiveIndexes array
-        const currentSubStepIndex =
-          sierraActiveIndexes.indexOf(sierraSubStepNumber)
+    // once executionTraceStepNumber is updated, sierraActiveIndexes updates
+    // so to know whether to initialize sub step with first or last element of sierraActiveIndexes
+    // we save the action in ref which we use in useEffect hook above
+    prevAction.current = action
 
+    // check if it's Sierra debug mode.
+    if (debugMode === ProgramDebugMode.Sierra) {
+      // Check if there are active sub-steps for the current execution step
+      if (sierraSubStepIndex !== undefined) {
         if (action === 'increase') {
           // Move to the next sub-step
-          if (currentSubStepIndex < sierraActiveIndexes.length - 1) {
-            setSierraSubStepNumber(sierraActiveIndexes[currentSubStepIndex + 1])
+          if (sierraSubStepIndex < sierraActiveIndexes.length - 1) {
+            setSierraSubStepIndex(sierraSubStepIndex + 1)
           } else {
             // No more sub-steps, move to the next trace step
             setExecutionTraceStepNumber((prev) => prev + 1)
             // Reset sub-step since we're changing steps
-            setSierraSubStepNumber(undefined)
+            setSierraSubStepIndex(undefined)
           }
         } else if (action === 'decrease') {
           // Move to the previous sub-step
-          if (currentSubStepIndex > 0) {
-            setSierraSubStepNumber(sierraActiveIndexes[currentSubStepIndex - 1])
+          if (sierraSubStepIndex > 0) {
+            setSierraSubStepIndex(sierraSubStepIndex - 1)
           } else {
             // No more sub-steps, move to the previous trace step
             setExecutionTraceStepNumber((prev) => prev - 1)
             // Reset sub-step since we're changing steps
-            setSierraSubStepNumber(undefined)
+            setSierraSubStepIndex(undefined)
           }
         }
+      } else {
+        // if no substep then we simply increase executionTraceStepNumber
+        setExecutionTraceStepNumber((prev) =>
+          action === 'increase' ? prev + 1 : prev - 1,
+        )
       }
     } else {
-      // If no sierraActiveIndexes, just change the execution trace step number
+      // default behaviour for vm execution trace
       setExecutionTraceStepNumber((prev) =>
         action === 'increase' ? prev + 1 : prev - 1,
       )
-      // once executionTraceStepNumber is updated, sierraActiveIndexes updates
-      // so to know whether to initialize sub step with first or last element of sierraActiveIndexes
-      // we save the action in ref which we will use in useEffect hook with dependency of sierraActiveIndexes
-      prevAction.current = action
-      // Reset sub-step since we're changing steps
-      setSierraSubStepNumber(undefined)
     }
   }
 
@@ -239,7 +265,6 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
     ) {
       nextStep += 1
     }
-
     // move to the next breakpoint or to the end of the program
     setExecutionTraceStepNumber(
       nextStep < tracerData.trace.length
@@ -279,14 +304,13 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
             ? ProgramCompilationState.CompilationSuccess
             : ProgramCompilationState.CompilationErr,
         )
-        setSierraSubStepNumber(undefined)
+        setSierraSubStepIndex(undefined)
         setLogs(data.logs)
         setExecutionState(
           data.is_execution_successful === true
             ? ProgramExecutionState.Success
             : ProgramExecutionState.Error,
         )
-
         setExecutionTraceStepNumber(
           data.is_execution_successful === true
             ? 0
@@ -349,7 +373,7 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
         tracerData,
         casmInstructions,
         executionTraceStepNumber,
-        sierraSubStepNumber,
+        sierraSubStepIndex,
         currentTraceEntry,
         currentSierraVariables,
         activeCasmInstructionIndex,

From 1d147baa31eb7204b71eedead20f47e5523aab20 Mon Sep 17 00:00:00 2001
From: jaipaljadeja <jadejajaipal5@gmail.com>
Date: Wed, 24 Apr 2024 14:38:57 +0530
Subject: [PATCH 3/5] Extra Column - Sierra Debug Changes

---
 components/Editor/ExtraColumn.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/components/Editor/ExtraColumn.tsx b/components/Editor/ExtraColumn.tsx
index 013ae76..066a5ab 100644
--- a/components/Editor/ExtraColumn.tsx
+++ b/components/Editor/ExtraColumn.tsx
@@ -4,7 +4,10 @@ import { Editor as MonacoEditor, Monaco } from '@monaco-editor/react'
 import { editor } from 'monaco-editor'
 
 import { CodeType } from '../../context/appUiContext'
-import { CairoVMApiContext } from '../../context/cairoVMApiContext'
+import {
+  CairoVMApiContext,
+  ProgramDebugMode,
+} from '../../context/cairoVMApiContext'
 import { cn } from '../../util/styles'
 
 import Header from './Header'
@@ -35,6 +38,8 @@ const ExtraColumn = ({
     sierraStatements,
     casmToSierraProgramMap,
     currentSierraVariables,
+    debugMode,
+    sierraSubStepIndex,
   } = useContext(CairoVMApiContext)
 
   return (
@@ -60,7 +65,17 @@ const ExtraColumn = ({
             instructions={sierraStatements}
             codeType={codeType}
             activeIndexes={
-              casmToSierraProgramMap[activeCasmInstructionIndex] ?? []
+              casmToSierraProgramMap[activeCasmInstructionIndex]
+                ? debugMode === ProgramDebugMode.Sierra
+                  ? sierraSubStepIndex !== undefined
+                    ? [
+                        casmToSierraProgramMap[activeCasmInstructionIndex][
+                          sierraSubStepIndex
+                        ],
+                      ]
+                    : []
+                  : casmToSierraProgramMap[activeCasmInstructionIndex]
+                : []
             }
             errorIndexes={
               casmToSierraProgramMap[errorCasmInstructionIndex] ?? []

From 23e7c8122bdbcbe107c3e149e5612f16fd0357f5 Mon Sep 17 00:00:00 2001
From: jaipaljadeja <jadejajaipal5@gmail.com>
Date: Wed, 24 Apr 2024 19:26:52 +0530
Subject: [PATCH 4/5] Refactoring: activeSierraIndexes

---
 components/Editor/ExtraColumn.tsx | 17 ++-------------
 components/Editor/index.tsx       | 15 ++-----------
 components/Tracer/index.tsx       | 17 ++-------------
 context/cairoVMApiContext.tsx     | 35 ++++++++++++++++++++++++++-----
 4 files changed, 36 insertions(+), 48 deletions(-)

diff --git a/components/Editor/ExtraColumn.tsx b/components/Editor/ExtraColumn.tsx
index 066a5ab..48ac289 100644
--- a/components/Editor/ExtraColumn.tsx
+++ b/components/Editor/ExtraColumn.tsx
@@ -38,8 +38,7 @@ const ExtraColumn = ({
     sierraStatements,
     casmToSierraProgramMap,
     currentSierraVariables,
-    debugMode,
-    sierraSubStepIndex,
+    activeSierraIndexes,
   } = useContext(CairoVMApiContext)
 
   return (
@@ -64,19 +63,7 @@ const ExtraColumn = ({
           <InstructionsTable
             instructions={sierraStatements}
             codeType={codeType}
-            activeIndexes={
-              casmToSierraProgramMap[activeCasmInstructionIndex]
-                ? debugMode === ProgramDebugMode.Sierra
-                  ? sierraSubStepIndex !== undefined
-                    ? [
-                        casmToSierraProgramMap[activeCasmInstructionIndex][
-                          sierraSubStepIndex
-                        ],
-                      ]
-                    : []
-                  : casmToSierraProgramMap[activeCasmInstructionIndex]
-                : []
-            }
+            activeIndexes={activeSierraIndexes}
             errorIndexes={
               casmToSierraProgramMap[errorCasmInstructionIndex] ?? []
             }
diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
index 3d08dd9..083914e 100644
--- a/components/Editor/index.tsx
+++ b/components/Editor/index.tsx
@@ -79,6 +79,7 @@ const Editor = ({ readOnly = false }: Props) => {
     logs: apiLogs,
     sierraSubStepIndex,
     debugMode,
+    activeSierraIndexes,
   } = useContext(CairoVMApiContext)
 
   const { addToConsoleLog, isThreeColumnLayout } = useContext(AppUiContext)
@@ -432,19 +433,7 @@ const Editor = ({ readOnly = false }: Props) => {
                 <InstructionsTable
                   instructions={sierraStatements}
                   codeType={codeType}
-                  activeIndexes={
-                    casmToSierraProgramMap[activeCasmInstructionIndex]
-                      ? debugMode === ProgramDebugMode.Sierra
-                        ? sierraSubStepIndex !== undefined
-                          ? [
-                              casmToSierraProgramMap[
-                                activeCasmInstructionIndex
-                              ][sierraSubStepIndex],
-                            ]
-                          : []
-                        : casmToSierraProgramMap[activeCasmInstructionIndex]
-                      : []
-                  }
+                  activeIndexes={activeSierraIndexes}
                   errorIndexes={
                     casmToSierraProgramMap[errorCasmInstructionIndex] ?? []
                   }
diff --git a/components/Tracer/index.tsx b/components/Tracer/index.tsx
index 7f596f8..faeb2ef 100644
--- a/components/Tracer/index.tsx
+++ b/components/Tracer/index.tsx
@@ -83,10 +83,9 @@ export const Tracer = () => {
     debugMode,
     sierraStatements,
     casmToSierraProgramMap,
-    activeCasmInstructionIndex,
     errorCasmInstructionIndex,
     currentSierraVariables,
-    sierraSubStepIndex,
+    activeSierraIndexes,
   } = useContext(CairoVMApiContext)
 
   const trace = tracerData?.trace
@@ -225,19 +224,7 @@ export const Tracer = () => {
         <SierraInstructionTable
           instructions={sierraStatements}
           codeType={CodeType.Sierra}
-          activeIndexes={
-            casmToSierraProgramMap[activeCasmInstructionIndex]
-              ? debugMode === ProgramDebugMode.Sierra
-                ? sierraSubStepIndex !== undefined
-                  ? [
-                      casmToSierraProgramMap[activeCasmInstructionIndex][
-                        sierraSubStepIndex
-                      ],
-                    ]
-                  : []
-                : casmToSierraProgramMap[activeCasmInstructionIndex]
-              : []
-          }
+          activeIndexes={activeSierraIndexes}
           errorIndexes={casmToSierraProgramMap[errorCasmInstructionIndex] ?? []}
           variables={currentSierraVariables || {}}
         />
diff --git a/context/cairoVMApiContext.tsx b/context/cairoVMApiContext.tsx
index 8a84eb9..a1dcd80 100644
--- a/context/cairoVMApiContext.tsx
+++ b/context/cairoVMApiContext.tsx
@@ -66,6 +66,7 @@ type ContextProps = {
   executionTraceStepNumber: number
   sierraSubStepIndex: number | undefined
   activeCasmInstructionIndex: number
+  activeSierraIndexes: number[]
   errorCasmInstructionIndex: number
   sierraStatements: IInstruction[]
   casmToSierraStatementsMap: CasmToSierraMap
@@ -98,6 +99,7 @@ export const CairoVMApiContext = createContext<ContextProps>({
   executionTraceStepNumber: 0,
   sierraSubStepIndex: undefined,
   activeCasmInstructionIndex: 0,
+  activeSierraIndexes: [],
   errorCasmInstructionIndex: 0,
   sierraStatements: [],
   casmToSierraProgramMap: {},
@@ -162,20 +164,42 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
   const errorCasmInstructionIndex =
     tracerData?.pcToInstIndexesMap[(errorTraceEntry?.pc ?? 0).toString()] ?? -1
 
-  const sierraActiveIndexes = casmToSierraProgramMap[activeCasmInstructionIndex]
+  // array of sierra indexes for the current activeCasmInstructionIndex
+  const currentSierraIndexes =
+    casmToSierraProgramMap[activeCasmInstructionIndex]
+
+  // array of active sierra indexes (based on debug mode - sierra or vm execution trace)
+  let activeSierraIndexes: number[] = []
+
+  // If Sierra indexes for the current step exist
+  if (currentSierraIndexes) {
+    // if its sierra debug mode
+    if (debugMode === ProgramDebugMode.Sierra) {
+      // If sierra sub step index exists
+      // then we assign activeSierraIndexes with the corresponding sierraIndex
+      if (sierraSubStepIndex !== undefined) {
+        activeSierraIndexes = [currentSierraIndexes[sierraSubStepIndex]]
+      }
+      // Otherwise, leave activeSierraIndexes as an empty array
+    } else if (debugMode === ProgramDebugMode.Execution) {
+      // In execution trace mode, use all Sierra indexes
+      activeSierraIndexes = currentSierraIndexes
+    }
+  } // If no Sierra indexes for the current step exist, activeSierraIndexes remains an empty array
+
   const prevAction = useRef<'increase' | 'decrease'>()
   const traceLength = tracerData?.trace?.length
 
   useEffect(() => {
     // only if program is in sierra debug mode
     if (debugMode === ProgramDebugMode.Sierra) {
-      if (sierraActiveIndexes && sierraActiveIndexes.length > 0) {
+      if (currentSierraIndexes && currentSierraIndexes.length > 0) {
         // if sierraActiveIndexes exist then we initialise it with last index or 0 index
         // based on the button action (increase / decrease)
         if (prevAction.current === 'increase') {
           setSierraSubStepIndex(0)
         } else {
-          setSierraSubStepIndex(sierraActiveIndexes.length - 1)
+          setSierraSubStepIndex(currentSierraIndexes.length - 1)
         }
       }
       // when no sierraActiveIndexes exist
@@ -205,7 +229,7 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
         }
       }
     }
-  }, [debugMode, sierraActiveIndexes, executionTraceStepNumber, traceLength])
+  }, [debugMode, currentSierraIndexes, executionTraceStepNumber, traceLength])
 
   const onExecutionStepChange = (action: 'increase' | 'decrease') => {
     // once executionTraceStepNumber is updated, sierraActiveIndexes updates
@@ -219,7 +243,7 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
       if (sierraSubStepIndex !== undefined) {
         if (action === 'increase') {
           // Move to the next sub-step
-          if (sierraSubStepIndex < sierraActiveIndexes.length - 1) {
+          if (sierraSubStepIndex < currentSierraIndexes.length - 1) {
             setSierraSubStepIndex(sierraSubStepIndex + 1)
           } else {
             // No more sub-steps, move to the next trace step
@@ -377,6 +401,7 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
         currentTraceEntry,
         currentSierraVariables,
         activeCasmInstructionIndex,
+        activeSierraIndexes,
         errorCasmInstructionIndex,
         sierraStatements,
         casmToSierraProgramMap,

From 17ea122c8c73c308c99259929a697f0c941ad066 Mon Sep 17 00:00:00 2001
From: jaipaljadeja <jadejajaipal5@gmail.com>
Date: Wed, 24 Apr 2024 19:49:22 +0530
Subject: [PATCH 5/5] Lint Fix

---
 components/Editor/ExtraColumn.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/components/Editor/ExtraColumn.tsx b/components/Editor/ExtraColumn.tsx
index 48ac289..3c2dfb9 100644
--- a/components/Editor/ExtraColumn.tsx
+++ b/components/Editor/ExtraColumn.tsx
@@ -4,10 +4,7 @@ import { Editor as MonacoEditor, Monaco } from '@monaco-editor/react'
 import { editor } from 'monaco-editor'
 
 import { CodeType } from '../../context/appUiContext'
-import {
-  CairoVMApiContext,
-  ProgramDebugMode,
-} from '../../context/cairoVMApiContext'
+import { CairoVMApiContext } from '../../context/cairoVMApiContext'
 import { cn } from '../../util/styles'
 
 import Header from './Header'