From 29ca5a0b0b51615b9232b0736da9d925eaea4f14 Mon Sep 17 00:00:00 2001
From: CATISNOTSODIUM <coffee_cat@DESKTOP-4LOUDBB.localdomain>
Date: Sat, 26 Jul 2025 20:44:41 +0800
Subject: [PATCH 1/2] fix(tracer): rendering issue with literal AST

---
 .../sideContent/content/SideContentSubstVisualizer.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/commons/sideContent/content/SideContentSubstVisualizer.tsx b/src/commons/sideContent/content/SideContentSubstVisualizer.tsx
index a6c4cad72d..99f8ddd5d8 100644
--- a/src/commons/sideContent/content/SideContentSubstVisualizer.tsx
+++ b/src/commons/sideContent/content/SideContentSubstVisualizer.tsx
@@ -94,7 +94,6 @@ type SubstVisualizerPropsAST = {
 };
 
 const SideContentSubstVisualizer: React.FC<SubstVisualizerPropsAST> = props => {
-  console.log(props);
   const [stepValue, setStepValue] = useState(1);
   const lastStepValue = props.content.length;
   const hasRunCode = lastStepValue !== 0;
@@ -245,10 +244,15 @@ function composeStyleWrapper(
  */
 function renderNode(currentNode: StepperBaseNode, renderContext: RenderContext): React.ReactNode {
   const styleWrapper = renderContext.styleWrapper;
-
   const renderers = {
     Literal(node: StepperLiteral) {
-      return <span className="stepper-literal">{node.raw ? node.raw : node.value}</span>;
+      const stringifyLiteralValue = (value: any) =>
+          typeof value === 'string'
+              ? '"' + value + '"'
+              : value !== null
+                ? value.toString()
+                : 'null';
+      return <span className="stepper-literal">{node.raw ? node.raw : stringifyLiteralValue(node.value)}</span>;
     },
     Identifier(node: StepperIdentifier) {
       return <span>{node.name}</span>;

From 205937294649f99fa5c9a2254793a5b74dbaa424 Mon Sep 17 00:00:00 2001
From: CATISNOTSODIUM <coffee_cat@DESKTOP-4LOUDBB.localdomain>
Date: Sat, 26 Jul 2025 21:04:32 +0800
Subject: [PATCH 2/2] chore: run linter

# Conflicts:
#	src/commons/sideContent/content/SideContentSubstVisualizer.tsx
---
 .../content/SideContentSubstVisualizer.tsx           | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/commons/sideContent/content/SideContentSubstVisualizer.tsx b/src/commons/sideContent/content/SideContentSubstVisualizer.tsx
index 99f8ddd5d8..4cb0a9baf1 100644
--- a/src/commons/sideContent/content/SideContentSubstVisualizer.tsx
+++ b/src/commons/sideContent/content/SideContentSubstVisualizer.tsx
@@ -247,12 +247,12 @@ function renderNode(currentNode: StepperBaseNode, renderContext: RenderContext):
   const renderers = {
     Literal(node: StepperLiteral) {
       const stringifyLiteralValue = (value: any) =>
-          typeof value === 'string'
-              ? '"' + value + '"'
-              : value !== null
-                ? value.toString()
-                : 'null';
-      return <span className="stepper-literal">{node.raw ? node.raw : stringifyLiteralValue(node.value)}</span>;
+        typeof value === 'string' ? '"' + value + '"' : value !== null ? value.toString() : 'null';
+      return (
+        <span className="stepper-literal">
+          {node.raw ? node.raw : stringifyLiteralValue(node.value)}
+        </span>
+      );
     },
     Identifier(node: StepperIdentifier) {
       return <span>{node.name}</span>;