highlight runtime errors

components/Editor/ExtraColumn.tsx

@@ -27,6 +27,7 @@ const ExtraColumn = ({
   const {
     casmInstructions,
     activeCasmInstructionIndex,
+    errorCasmInstructionIndex,
     sierraStatements,
     casmToSierraMap,
     currentSierraVariables,
@@ -50,13 +51,15 @@ const ExtraColumn = ({
             instructions={casmInstructions}
             codeType={codeType}
             activeIndexes={[activeCasmInstructionIndex]}
+            errorIndexes={[errorCasmInstructionIndex]}
             variables={{}}
           />
         ) : codeType === CodeType.Sierra ? (
           <InstructionsTable
             instructions={sierraStatements}
             codeType={codeType}
             activeIndexes={casmToSierraMap[activeCasmInstructionIndex] ?? []}
+            errorIndexes={casmToSierraMap[errorCasmInstructionIndex] ?? []}
             variables={currentSierraVariables || {}}
           />
         ) : (

components/Editor/InstructionsTable.tsx

@@ -13,11 +13,13 @@ const sierraVariableRe = /\[(\d+)\]/
 export const InstructionsTable = ({
   instructions,
   activeIndexes,
+  errorIndexes,
   variables,
   codeType,
 }: {
   instructions: IInstruction[]
   activeIndexes: number[]
+  errorIndexes: number[]
   variables: SierraVariables
   codeType: CodeType
 }) => {
@@ -126,15 +128,18 @@ export const InstructionsTable = ({
         <tbody>
           {instructions.map((instruction, index) => {
             const isActive = activeIndexes.includes(index)
+            const isError = errorIndexes.includes(index)
             return (
               <tr
                 ref={(el) => (rowRefs.current[index] = el)}
                 key={index}
                 className={cn(
                   'border-b border-gray-200 dark:border-black-500',
-                  isActive
-                    ? 'text-gray-900 dark:text-gray-200'
-                    : 'text-gray-400 dark:text-gray-600',
+                  {
+                    'text-gray-900 dark:text-gray-200': isActive,
+                    'text-gray-400 dark:text-gray-600': !isActive,
+                    'bg-red-100 dark:bg-red-500/10': isError,
+                  },
                 )}
               >
                 <td className={`pl-6 pr-1 px-2 whitespace-nowrap w-[1%]`}>

components/Editor/index.tsx

@@ -64,6 +64,7 @@ const Editor = ({ readOnly = false }: Props) => {
     serializedOutput,
     casmInstructions,
     activeCasmInstructionIndex,
+    errorCasmInstructionIndex,
     sierraStatements,
     casmToSierraMap,
     currentSierraVariables,
@@ -356,6 +357,7 @@ const Editor = ({ readOnly = false }: Props) => {
                   instructions={casmInstructions}
                   codeType={codeType}
                   activeIndexes={[activeCasmInstructionIndex]}
+                  errorIndexes={[errorCasmInstructionIndex]}
                   variables={{}}
                 />
               ) : codeType === CodeType.Sierra ? (
@@ -365,6 +367,9 @@ const Editor = ({ readOnly = false }: Props) => {
                   activeIndexes={
                     casmToSierraMap[activeCasmInstructionIndex] ?? []
                   }
+                  errorIndexes={
+                    casmToSierraMap[errorCasmInstructionIndex] ?? []
+                  }
                   variables={currentSierraVariables || {}}
                 />
               ) : (

components/KBar/Button.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react'
 
+import { RiCommandLine } from '@remixicon/react'
 import { useKBar } from 'kbar'
 
 import { isMac } from 'util/browser'
 
 import { Button } from 'components/ui'
-import { RiCommandLine } from '@remixicon/react'
 
 const KBarButton = () => {
   const { query } = useKBar()

components/Tracer/index.tsx

@@ -3,7 +3,11 @@ import { useContext, useEffect, useState, useRef, useReducer } from 'react'
 import cn from 'classnames'
 import { Priority, useRegisterActions } from 'kbar'
 
-import { CairoVMApiContext, BreakPoints } from 'context/cairoVMApiContext'
+import {
+  CairoVMApiContext,
+  BreakPoints,
+  ProgramExecutionState,
+} from 'context/cairoVMApiContext'
 
 import Console from '../Editor/Console'
 
@@ -58,6 +62,7 @@ interface TracerProps {
 
 export const Tracer = ({ mainHeight }: TracerProps) => {
   const {
+    executionState,
     tracerData,
     breakPoints,
     onExecutionStepChange,
@@ -69,6 +74,7 @@ export const Tracer = ({ mainHeight }: TracerProps) => {
 
   const trace = tracerData?.trace
   const currentTraceEntry = tracerData?.trace[executionTraceStepNumber]
+  const errorTraceEntry = tracerData?.trace.at(-1)
   const currentCallstackEntry = tracerData?.callstack[executionTraceStepNumber]
 
   const [selectedConsoleTab, setSelectedConsoleTab] = useState<IConsoleTab>(
@@ -196,6 +202,11 @@ export const Tracer = ({ mainHeight }: TracerProps) => {
                 currentFocus={currentFocus.idx}
                 breakpoints={breakPoints}
                 toogleBreakPoint={toogleBreakPoint}
+                errorTraceEntry={
+                  executionState === ProgramExecutionState.Error
+                    ? errorTraceEntry
+                    : null
+                }
               />
             </div>
           </>
@@ -361,15 +372,18 @@ function InstructionsTable({
   currentFocus,
   breakpoints,
   toogleBreakPoint,
+  errorTraceEntry,
 }: {
   memory: TracerData['memory']
   pcInstMap: TracerData['pcInstMap']
   currentTraceEntry: TraceEntry
   currentFocus: number
   breakpoints: BreakPoints
   toogleBreakPoint: (addr: string) => void
+  errorTraceEntry?: TraceEntry | null
 }) {
   const { pc, ap, fp } = currentTraceEntry
+  const errorPc = errorTraceEntry?.pc || 0
 
   const [hoveredAddr, setHoveredAddr] = useState<string>('')
 
@@ -397,18 +411,22 @@ function InstructionsTable({
       <tbody>
         {Object.keys(memory).map((addr) => {
           const isCurrent = pc.toString() == addr
+          const isError = errorPc.toString() == addr
           const addrNum = Number(addr)
           const isFocus = currentFocus == addrNum
           const hasBreakpoint = breakpoints[addr]
           return (
             <tr
               key={addr}
               id={isFocus ? 'focus_row' : undefined}
-              className={`relative border-b border-gray-200 dark:border-black-500 ${
-                isCurrent
-                  ? 'text-gray-900 dark:text-gray-200'
-                  : 'text-gray-400 dark:text-gray-600'
-              }`}
+              className={cn(
+                'relative border-b border-gray-200 dark:border-black-500',
+                {
+                  'text-gray-900 dark:text-gray-200': isCurrent,
+                  'text-gray-400 dark:text-gray-600': !isCurrent,
+                  'bg-red-100 dark:bg-red-500/10': isError,
+                },
+              )}
               onMouseEnter={() => setHoveredAddr(addr)}
               onMouseLeave={() => setHoveredAddr('')}
             >

context/cairoVMApiContext.tsx

@@ -38,6 +38,7 @@ type ContextProps = {
   tracerData?: TracerData
   executionTraceStepNumber: number
   activeCasmInstructionIndex: number
+  errorCasmInstructionIndex: number
   sierraStatements: IInstruction[]
   casmToSierraMap: CasmToSierraMap
   currentTraceEntry?: TraceEntry
@@ -63,6 +64,7 @@ export const CairoVMApiContext = createContext<ContextProps>({
   executionPanicMessage: '',
   executionTraceStepNumber: 0,
   activeCasmInstructionIndex: 0,
+  errorCasmInstructionIndex: 0,
   sierraStatements: [],
   casmToSierraMap: {},
   breakPoints: {},
@@ -105,6 +107,12 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
     tracerData?.entryToSierraVarsMap[executionTraceStepNumber]
   const activeCasmInstructionIndex =
     tracerData?.pcToInstIndexesMap[(currentTraceEntry?.pc ?? 0).toString()] ?? 0
+  const errorTraceEntry =
+    executionState === ProgramExecutionState.Error
+      ? tracerData?.trace.at(-1)
+      : null
+  const errorCasmInstructionIndex =
+    tracerData?.pcToInstIndexesMap[(errorTraceEntry?.pc ?? 0).toString()] ?? -1
 
   function onExecutionStepChange(stepNumber: number) {
     setExecutionTraceStepNumber(stepNumber)
@@ -169,7 +177,11 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
             : ProgramExecutionState.Error,
         )
 
-        setExecutionTraceStepNumber(0)
+        setExecutionTraceStepNumber(
+          data.is_execution_successful === true
+            ? 0
+            : data.tracer_data.trace.length - 1,
+        )
         setCasmCode(data.casm_program_code)
         setSierraCode(data.sierra_program_code)
         setCairoLangCompilerVersion(data.cairo_lang_compiler_version)
@@ -225,6 +237,7 @@ export const CairoVMApiProvider: React.FC<PropsWithChildren> = ({
         currentTraceEntry,
         currentSierraVariables,
         activeCasmInstructionIndex,
+        errorCasmInstructionIndex,
         sierraStatements,
         casmToSierraMap,
         breakPoints,