Best Practices for Checkpoint Session Rollback

Preparations

Before using CodeArts Agent, create a project to store various files in the project.

1. Log in to CodeArts Agent by referring to Quick Start.
2. Create a project for storing files.
   1. On the top menu bar of the IDE, choose File > New > Create Project to go to the page for creating a project.
   2. Select a path for storing the project, enter the project name (for example, coffee-order-demo), and click OK.

      The project name must start with a letter, and can contain a maximum of 64 characters. Letters, digits, hyphens (-), and underscores (_) are allowed.

      Figure 1 Creating a project

      

      After the project is created, you can view the created COFFEE-ORDER-DEMO project under EXPLORER.

3. (Optional) Select the agent running mode and authorize automatic operations.
   1. Click in the upper right corner of CodeArts Agent IDE to go to the Settings page.
   2. Choose Chats > Agents > Terminal Command Running Mode, select the running policy for the agent to execute terminal commands. This section uses the default running policy (Running in Sandbox).
   3. Choose Chats > Auto-approve, and click to enable the required items.

      After authorization, tasks for generating complex project-level code are executed automatically. Without authorization, some operations will need your manual confirmation when you code with CodeArts Agent.

      

      Enabling auto approval can lead to operational risks. Assess these risks carefully first and only enable this feature in a secure and trustworthy environment.

      Table 1 Parameters for auto approval

      Parameter	Description	Example
      Edit	Allows the agent to call tools like edit, write, and deleteFile to edit files on your computer.	Enabled
      Browser Access	Allows the agent to access websites in the browser.	Enabled
      Web Crawler	Allows the agent to access and capture specified web page content.	Enabled

   4. Exit the current page to complete the authorization.

Generating a Basic Coffee Ordering System

The initial phase of the ordering system is built in a lightweight manner, focusing on the core ordering service process. Non-essential marketing and value-added functions are not expanded to ensure that the core link is simple, available, and reliable.

1. In the input box of the chat window, enter the following prompts to create a coffee ordering system:

   Use HTML, CSS, and JavaScript to create a basic coffee ordering system.
   Function requirements:
   - Menu display: A static list containing at least three types of coffee (such as Americano, Latte, and Cappuccino) is displayed. Each type of coffee is marked with its name, price, and a general icon.
   - Add to cart: There is an "Add to cart" button next to each coffee.
   - Order preview: There is an area on the page that displays the items, quantities, and calculated total price in the current shopping cart in real time.
   - Style: The UI should be simple, clean, and warm in color.

   After the execution is complete, a file named index.html is generated in the COFFEE-ORDER-DEMO directory under EXPLORER.

2. Right-click index.html and choose Preview in Browser from the shortcut menu to view the website.

   The graph shown here is for reference only. The actual output may vary.

   Figure 2 Coffee ordering system
   

Adding the Personalized Recommendation Function

The team proposed an idea: to add a "Daily Special" recommendation function for phased marketing activities to attract customers to place orders. This type of function is not a core function of the system. After the activity period ends, the function will be taken offline and the original GUI logic will be restored.

1. In the input box of the chat window, enter the following prompts to optimize the coffee ordering system:

   Add a "Daily Special" recommendation function to the coffee ordering system.
   Function requirements:
   - Add a "Today's Special" area to the top of the menu.
   - This area dynamically displays a type of coffee as a special offer, along with a simple recommendation reason.
   - For example, "Today's Special: Iced Lemon Tea (20% off)" with a separate "Order Now" button.

   After the execution is complete, the index.html file in the COFFEE-ORDER-DEMO directory under EXPLORER will be updated accordingly.

2. Right-click index.html and choose Preview in Browser from the shortcut menu to view the website.

   The graph shown here is for reference only. The actual output may vary.

   Figure 3 Adding daily special recommendations
   

Rolling Back to the Basic Version

After team discussion and evaluation, it was found that the "Daily Special" recommendation module causes strong visual interference, has redundant functions, and incurs high maintenance costs. It is more harmful than beneficial to the website at this stage. Therefore, this function is not implemented for the time being, and the simple and basic core ordering version is used.

1. On the chat panel, roll back a chat.

   Hover over the chat to be rolled back and click . A confirmation dialog box is displayed, showing the name of the file to be restored.

   Figure 4 Clicking the rollback icon
   
   Figure 5 Confirmation dialog box
   

2. Click OK to roll back the chat.

   Files will be rolled back to their historical states, and the messages at and after this timestamp in the current chat will disappear. The coffee ordering system is rolled back to the basic version synchronously.

Summary

Through the preceding practices, you can clearly see the core value of checkpoints:

• Version security assurance: A restorable baseline version is provided for the basic system generated by CodeArts Agent.
• Quick cancellation of invalid iterations: If an added function does not meet expectations, you can roll back the code with just one click, without the need to manually delete the code.
• Reduced trial-and-error costs: Free function expansion is allowed without compromising the initial stable system.
• Improved O&M efficiency: You can quickly restore a project to the version that best meets your requirements without regenerating a project.