From a89a7fcc65d949af12ab8b984bee224595d27e42 Mon Sep 17 00:00:00 2001
From: s-kybound <abadkyriel@gmail.com>
Date: Tue, 20 Feb 2024 14:22:03 +0800
Subject: [PATCH 01/16] Switch Scheme languages fully to CSE Machine

---
 src/commons/application/ApplicationTypes.ts   |   10 +-
 .../__snapshots__/ApplicationTypes.ts.snap    |   10 +-
 .../__snapshots__/EnvVisualizer.tsx.snap      | 1012 +++++++++++++++--
 3 files changed, 920 insertions(+), 112 deletions(-)

diff --git a/src/commons/application/ApplicationTypes.ts b/src/commons/application/ApplicationTypes.ts
index 10a3ab8877..17189b1cba 100644
--- a/src/commons/application/ApplicationTypes.ts
+++ b/src/commons/application/ApplicationTypes.ts
@@ -186,11 +186,11 @@ export const htmlLanguage: SALanguage = {
 };
 
 const schemeSubLanguages: Array<Pick<SALanguage, 'chapter' | 'variant' | 'displayName'>> = [
-  { chapter: Chapter.SCHEME_1, variant: Variant.DEFAULT, displayName: 'Scheme \xa71' },
-  { chapter: Chapter.SCHEME_2, variant: Variant.DEFAULT, displayName: 'Scheme \xa72' },
-  { chapter: Chapter.SCHEME_3, variant: Variant.DEFAULT, displayName: 'Scheme \xa73' },
-  { chapter: Chapter.SCHEME_4, variant: Variant.DEFAULT, displayName: 'Scheme \xa74' },
-  { chapter: Chapter.FULL_SCHEME, variant: Variant.DEFAULT, displayName: 'Full Scheme' }
+  { chapter: Chapter.SCHEME_1, variant: Variant.EXPLICIT_CONTROL, displayName: 'Scheme \xa71' },
+  { chapter: Chapter.SCHEME_2, variant: Variant.EXPLICIT_CONTROL, displayName: 'Scheme \xa72' },
+  { chapter: Chapter.SCHEME_3, variant: Variant.EXPLICIT_CONTROL, displayName: 'Scheme \xa73' },
+  { chapter: Chapter.SCHEME_4, variant: Variant.EXPLICIT_CONTROL, displayName: 'Scheme \xa74' },
+  { chapter: Chapter.FULL_SCHEME, variant: Variant.EXPLICIT_CONTROL, displayName: 'Full Scheme' }
 ];
 
 export const schemeLanguages: SALanguage[] = schemeSubLanguages.map(sublang => {
diff --git a/src/commons/application/__tests__/__snapshots__/ApplicationTypes.ts.snap b/src/commons/application/__tests__/__snapshots__/ApplicationTypes.ts.snap
index b00c66abc1..b828230566 100644
--- a/src/commons/application/__tests__/__snapshots__/ApplicationTypes.ts.snap
+++ b/src/commons/application/__tests__/__snapshots__/ApplicationTypes.ts.snap
@@ -23,7 +23,7 @@ Array [
     "supports": Object {
       "repl": true,
     },
-    "variant": "default",
+    "variant": "explicit-control",
   },
   Object {
     "chapter": -10,
@@ -32,7 +32,7 @@ Array [
     "supports": Object {
       "repl": true,
     },
-    "variant": "default",
+    "variant": "explicit-control",
   },
   Object {
     "chapter": -11,
@@ -41,7 +41,7 @@ Array [
     "supports": Object {
       "repl": true,
     },
-    "variant": "default",
+    "variant": "explicit-control",
   },
   Object {
     "chapter": -12,
@@ -50,7 +50,7 @@ Array [
     "supports": Object {
       "repl": true,
     },
-    "variant": "default",
+    "variant": "explicit-control",
   },
   Object {
     "chapter": -13,
@@ -59,7 +59,7 @@ Array [
     "supports": Object {
       "repl": true,
     },
-    "variant": "default",
+    "variant": "explicit-control",
   },
 ]
 `;
diff --git a/src/features/envVisualizer/__tests__/__snapshots__/EnvVisualizer.tsx.snap b/src/features/envVisualizer/__tests__/__snapshots__/EnvVisualizer.tsx.snap
index 0d39929d31..aae0af12d9 100644
--- a/src/features/envVisualizer/__tests__/__snapshots__/EnvVisualizer.tsx.snap
+++ b/src/features/envVisualizer/__tests__/__snapshots__/EnvVisualizer.tsx.snap
@@ -7,6 +7,595 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
     onMouseLeave={[Function]}
     x={20}
     y={40}
+  >
+    <Tag
+      cornerRadius={5}
+      preventDefault={false}
+      stroke="#999999"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      height={35}
+      padding={10}
+      preventDefault={false}
+      text="env"
+      width={120}
+    />
+  </Label>
+  <Label
+    visible={false}
+    x={145}
+    y={45}
+  >
+    <Tag
+      fill="black"
+      opacity={0.7}
+      preventDefault={false}
+      stroke="black"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={5}
+      preventDefault={false}
+      text="Set current environment to this environment"
+    />
+  </Label>
+  <Group
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+  >
+    <Path
+      data="M 140 57.5 L 170 390 L 170 390 M 140 57.5 L 170 390 L 170 390 "
+      hitStrokeWidth={5}
+      preventDefault={false}
+      stroke="#999999"
+      strokeWidth={1}
+    />
+    <Arrow
+      fill="#999999"
+      pointerWidth={10}
+      points={
+        Array [
+          140,
+          57.5,
+          170,
+          390,
+        ]
+      }
+      preventDefault={false}
+      strokeEnabled={false}
+    />
+  </Group>
+</React.Fragment>
+`;
+
+exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 2`] = `
+<React.Fragment>
+  <Label
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    x={20}
+    y={75}
+  >
+    <Tag
+      cornerRadius={5}
+      preventDefault={false}
+      stroke="#999999"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      height={35}
+      padding={10}
+      preventDefault={false}
+      text="*"
+      width={120}
+    />
+  </Label>
+  <Label
+    visible={false}
+    x={145}
+    y={80}
+  >
+    <Tag
+      fill="black"
+      opacity={0.7}
+      preventDefault={false}
+      stroke="black"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={5}
+      preventDefault={false}
+      text="Perform * on top 2 stash values"
+    />
+  </Label>
+</React.Fragment>
+`;
+
+exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 3`] = `
+<React.Fragment>
+  <Label
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    x={20}
+    y={110}
+  >
+    <Tag
+      cornerRadius={5}
+      preventDefault={false}
+      stroke="#999999"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      height={35}
+      padding={10}
+      preventDefault={false}
+      text="env"
+      width={120}
+    />
+  </Label>
+  <Label
+    visible={false}
+    x={145}
+    y={115}
+  >
+    <Tag
+      fill="black"
+      opacity={0.7}
+      preventDefault={false}
+      stroke="black"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={5}
+      preventDefault={false}
+      text="Set current environment to this environment"
+    />
+  </Label>
+  <Group
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+  >
+    <Path
+      data="M 140 127.5 L 485.99609375 390 L 485.99609375 390 M 140 127.5 L 485.99609375 390 L 485.99609375 390 "
+      hitStrokeWidth={5}
+      preventDefault={false}
+      stroke="#999999"
+      strokeWidth={1}
+    />
+    <Arrow
+      fill="#999999"
+      pointerWidth={10}
+      points={
+        Array [
+          140,
+          127.5,
+          485.99609375,
+          390,
+        ]
+      }
+      preventDefault={false}
+      strokeEnabled={false}
+    />
+  </Group>
+</React.Fragment>
+`;
+
+exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 4`] = `
+<React.Fragment>
+  <Label
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    x={20}
+    y={145}
+  >
+    <Tag
+      cornerRadius={5}
+      preventDefault={false}
+      stroke="#999999"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      height={35}
+      padding={10}
+      preventDefault={false}
+      text="*"
+      width={120}
+    />
+  </Label>
+  <Label
+    visible={false}
+    x={145}
+    y={150}
+  >
+    <Tag
+      fill="black"
+      opacity={0.7}
+      preventDefault={false}
+      stroke="black"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={5}
+      preventDefault={false}
+      text="Perform * on top 2 stash values"
+    />
+  </Label>
+</React.Fragment>
+`;
+
+exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 5`] = `
+<React.Fragment>
+  <Label
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    x={20}
+    y={180}
+  >
+    <Tag
+      cornerRadius={5}
+      preventDefault={false}
+      stroke="#999999"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      height={35}
+      padding={10}
+      preventDefault={false}
+      text="env"
+      width={120}
+    />
+  </Label>
+  <Label
+    visible={false}
+    x={145}
+    y={185}
+  >
+    <Tag
+      fill="black"
+      opacity={0.7}
+      preventDefault={false}
+      stroke="black"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={5}
+      preventDefault={false}
+      text="Set current environment to this environment"
+    />
+  </Label>
+  <Group
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+  >
+    <Path
+      data="M 140 197.5 L 801.9921875 390 L 801.9921875 390 M 140 197.5 L 801.9921875 390 L 801.9921875 390 "
+      hitStrokeWidth={5}
+      preventDefault={false}
+      stroke="#999999"
+      strokeWidth={1}
+    />
+    <Arrow
+      fill="#999999"
+      pointerWidth={10}
+      points={
+        Array [
+          140,
+          197.5,
+          801.9921875,
+          390,
+        ]
+      }
+      preventDefault={false}
+      strokeEnabled={false}
+    />
+  </Group>
+</React.Fragment>
+`;
+
+exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 6`] = `
+<React.Fragment>
+  <Label
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    x={20}
+    y={215}
+  >
+    <Tag
+      cornerRadius={5}
+      preventDefault={false}
+      stroke="#999999"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      height={35}
+      padding={10}
+      preventDefault={false}
+      text="*"
+      width={120}
+    />
+  </Label>
+  <Label
+    visible={false}
+    x={145}
+    y={220}
+  >
+    <Tag
+      fill="black"
+      opacity={0.7}
+      preventDefault={false}
+      stroke="black"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={5}
+      preventDefault={false}
+      text="Perform * on top 2 stash values"
+    />
+  </Label>
+</React.Fragment>
+`;
+
+exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 7`] = `
+<React.Fragment>
+  <Label
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    x={20}
+    y={250}
+  >
+    <Tag
+      cornerRadius={5}
+      preventDefault={false}
+      stroke="#999999"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      height={35}
+      padding={10}
+      preventDefault={false}
+      text="env"
+      width={120}
+    />
+  </Label>
+  <Label
+    visible={false}
+    x={145}
+    y={255}
+  >
+    <Tag
+      fill="black"
+      opacity={0.7}
+      preventDefault={false}
+      stroke="black"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={5}
+      preventDefault={false}
+      text="Set current environment to this environment"
+    />
+  </Label>
+  <Group
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+  >
+    <Path
+      data="M 140 267.5 L 1117.98828125 390 L 1117.98828125 390 M 140 267.5 L 1117.98828125 390 L 1117.98828125 390 "
+      hitStrokeWidth={5}
+      preventDefault={false}
+      stroke="#999999"
+      strokeWidth={1}
+    />
+    <Arrow
+      fill="#999999"
+      pointerWidth={10}
+      points={
+        Array [
+          140,
+          267.5,
+          1117.98828125,
+          390,
+        ]
+      }
+      preventDefault={false}
+      strokeEnabled={false}
+    />
+  </Group>
+</React.Fragment>
+`;
+
+exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 8`] = `
+<React.Fragment>
+  <Label
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    x={20}
+    y={285}
+  >
+    <Tag
+      cornerRadius={5}
+      preventDefault={false}
+      stroke="#999999"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      height={35}
+      padding={10}
+      preventDefault={false}
+      text="*"
+      width={120}
+    />
+  </Label>
+  <Label
+    visible={false}
+    x={145}
+    y={290}
+  >
+    <Tag
+      fill="black"
+      opacity={0.7}
+      preventDefault={false}
+      stroke="black"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={5}
+      preventDefault={false}
+      text="Perform * on top 2 stash values"
+    />
+  </Label>
+</React.Fragment>
+`;
+
+exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 9`] = `
+<React.Fragment>
+  <Label
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    x={20}
+    y={320}
+  >
+    <Tag
+      cornerRadius={5}
+      preventDefault={false}
+      stroke="#999999"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      height={35}
+      padding={10}
+      preventDefault={false}
+      text="env"
+      width={120}
+    />
+  </Label>
+  <Label
+    visible={false}
+    x={145}
+    y={325}
+  >
+    <Tag
+      fill="black"
+      opacity={0.7}
+      preventDefault={false}
+      stroke="black"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={5}
+      preventDefault={false}
+      text="Set current environment to this environment"
+    />
+  </Label>
+  <Group
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+  >
+    <Path
+      data="M 140 337.5 L 1433.984375 390 L 1433.984375 390 M 140 337.5 L 1433.984375 390 L 1433.984375 390 "
+      hitStrokeWidth={5}
+      preventDefault={false}
+      stroke="#999999"
+      strokeWidth={1}
+    />
+    <Arrow
+      fill="#999999"
+      pointerWidth={10}
+      points={
+        Array [
+          140,
+          337.5,
+          1433.984375,
+          390,
+        ]
+      }
+      preventDefault={false}
+      strokeEnabled={false}
+    />
+  </Group>
+</React.Fragment>
+`;
+
+exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 10`] = `
+<React.Fragment>
+  <Label
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    x={20}
+    y={355}
   >
     <Tag
       cornerRadius={5}
@@ -19,16 +608,163 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
       fontSize={15}
       fontStyle="normal"
       fontVariant="normal"
-      height={35}
+      height={35}
+      padding={10}
+      preventDefault={false}
+      text="*"
+      width={120}
+    />
+  </Label>
+  <Label
+    visible={false}
+    x={145}
+    y={360}
+  >
+    <Tag
+      fill="black"
+      opacity={0.7}
+      preventDefault={false}
+      stroke="black"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={5}
+      preventDefault={false}
+      text="Perform * on top 2 stash values"
+    />
+  </Label>
+</React.Fragment>
+`;
+
+exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 11`] = `
+<React.Fragment>
+  <Label
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    x={140}
+    y={5}
+  >
+    <Tag
+      cornerRadius={5}
+      preventDefault={false}
+      stroke="#999999"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={10}
+      preventDefault={false}
+      text="10"
+    />
+  </Label>
+  <Label
+    visible={false}
+    x={145}
+    y={45}
+  >
+    <Tag
+      fill="black"
+      opacity={0.7}
+      preventDefault={false}
+      stroke="black"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={5}
+      preventDefault={false}
+      text="10"
+    />
+  </Label>
+</React.Fragment>
+`;
+
+exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 12`] = `
+<React.Fragment>
+  <Label
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    x={177.998046875}
+    y={5}
+  >
+    <Tag
+      cornerRadius={5}
+      preventDefault={false}
+      stroke="#999999"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={10}
+      preventDefault={false}
+      text="9"
+    />
+  </Label>
+  <Label
+    visible={false}
+    x={182.998046875}
+    y={45}
+  >
+    <Tag
+      fill="black"
+      opacity={0.7}
+      preventDefault={false}
+      stroke="black"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={5}
+      preventDefault={false}
+      text="9"
+    />
+  </Label>
+</React.Fragment>
+`;
+
+exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 13`] = `
+<React.Fragment>
+  <Label
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    x={206.9970703125}
+    y={5}
+  >
+    <Tag
+      cornerRadius={5}
+      preventDefault={false}
+      stroke="#999999"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
       padding={10}
       preventDefault={false}
-      text="*"
-      width={120}
+      text="8"
     />
   </Label>
   <Label
     visible={false}
-    x={145}
+    x={211.9970703125}
     y={45}
   >
     <Tag
@@ -45,18 +781,116 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
       fontVariant="normal"
       padding={5}
       preventDefault={false}
-      text="Perform * on top 2 stash values"
+      text="8"
     />
   </Label>
 </React.Fragment>
 `;
 
-exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 2`] = `
+exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 14`] = `
 <React.Fragment>
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={140}
+    x={235.99609375}
+    y={5}
+  >
+    <Tag
+      cornerRadius={5}
+      preventDefault={false}
+      stroke="#999999"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={10}
+      preventDefault={false}
+      text="7"
+    />
+  </Label>
+  <Label
+    visible={false}
+    x={240.99609375}
+    y={45}
+  >
+    <Tag
+      fill="black"
+      opacity={0.7}
+      preventDefault={false}
+      stroke="black"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={5}
+      preventDefault={false}
+      text="7"
+    />
+  </Label>
+</React.Fragment>
+`;
+
+exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 15`] = `
+<React.Fragment>
+  <Label
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    x={264.9951171875}
+    y={5}
+  >
+    <Tag
+      cornerRadius={5}
+      preventDefault={false}
+      stroke="#999999"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={10}
+      preventDefault={false}
+      text="6"
+    />
+  </Label>
+  <Label
+    visible={false}
+    x={269.9951171875}
+    y={45}
+  >
+    <Tag
+      fill="black"
+      opacity={0.7}
+      preventDefault={false}
+      stroke="black"
+    />
+    <Text
+      fill="#999999"
+      fontFamily="monospace, monospace"
+      fontSize={15}
+      fontStyle="normal"
+      fontVariant="normal"
+      padding={5}
+      preventDefault={false}
+      text="6"
+    />
+  </Label>
+</React.Fragment>
+`;
+
+exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 16`] = `
+<React.Fragment>
+  <Label
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    x={293.994140625}
     y={5}
   >
     <Tag
@@ -72,12 +906,12 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
       fontVariant="normal"
       padding={10}
       preventDefault={false}
-      text="10"
+      text="5"
     />
   </Label>
   <Label
     visible={false}
-    x={145}
+    x={298.994140625}
     y={45}
   >
     <Tag
@@ -94,18 +928,18 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
       fontVariant="normal"
       padding={5}
       preventDefault={false}
-      text="10"
+      text="5"
     />
   </Label>
 </React.Fragment>
 `;
 
-exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 3`] = `
+exports[`EnvVisualizer Control Stash correctly renders: Control is truncated properly 17`] = `
 <React.Fragment>
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={178.060546875}
+    x={322.9931640625}
     y={5}
   >
     <Tag
@@ -121,12 +955,12 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
       fontVariant="normal"
       padding={10}
       preventDefault={false}
-      text="362880"
+      text="24"
     />
   </Label>
   <Label
     visible={false}
-    x={183.060546875}
+    x={327.9931640625}
     y={45}
   >
     <Tag
@@ -143,7 +977,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
       fontVariant="normal"
       padding={5}
       preventDefault={false}
-      text="362880"
+      text="24"
     />
   </Label>
 </React.Fragment>
@@ -824,7 +1658,7 @@ exports[`EnvVisualizer Control Stash correctly renders: arrows from the environm
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#030fff"
     />
     <Text
       fill="#999999"
@@ -835,7 +1669,7 @@ exports[`EnvVisualizer Control Stash correctly renders: arrows from the environm
       height={35}
       padding={10}
       preventDefault={false}
-      text="arr asgn"
+      text="arr[x] = …"
       width={120}
     />
   </Label>
@@ -858,19 +1692,19 @@ exports[`EnvVisualizer Control Stash correctly renders: arrows from the environm
       fontVariant="normal"
       padding={5}
       preventDefault={false}
-      text="Assign new value to array at given index"
+      text="arr[x] = () => x;"
     />
   </Label>
 </React.Fragment>
 `;
 
-exports[`EnvVisualizer Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 14`] = `
+exports[`EnvVisualizer Control Stash correctly renders: global environments are treated correctly 1`] = `
 <React.Fragment>
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
     x={20}
-    y={495}
+    y={40}
   >
     <Tag
       cornerRadius={5}
@@ -886,14 +1720,14 @@ exports[`EnvVisualizer Control Stash correctly renders: arrows from the environm
       height={35}
       padding={10}
       preventDefault={false}
-      text="() => x"
+      text="math_sin(…"
       width={120}
     />
   </Label>
   <Label
     visible={false}
     x={145}
-    y={500}
+    y={45}
   >
     <Tag
       fill="black"
@@ -909,24 +1743,24 @@ exports[`EnvVisualizer Control Stash correctly renders: arrows from the environm
       fontVariant="normal"
       padding={5}
       preventDefault={false}
-      text="() => x"
+      text="math_sin(math_PI / 2);"
     />
   </Label>
 </React.Fragment>
 `;
 
-exports[`EnvVisualizer Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 15`] = `
+exports[`EnvVisualizer Control Stash correctly renders: global environments are treated correctly 2`] = `
 <React.Fragment>
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
     x={20}
-    y={530}
+    y={75}
   >
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#030fff"
+      stroke="#999999"
     />
     <Text
       fill="#999999"
@@ -937,14 +1771,14 @@ exports[`EnvVisualizer Control Stash correctly renders: arrows from the environm
       height={35}
       padding={10}
       preventDefault={false}
-      text="x"
+      text="env"
       width={120}
     />
   </Label>
   <Label
     visible={false}
     x={145}
-    y={535}
+    y={80}
   >
     <Tag
       fill="black"
@@ -960,19 +1794,45 @@ exports[`EnvVisualizer Control Stash correctly renders: arrows from the environm
       fontVariant="normal"
       padding={5}
       preventDefault={false}
-      text="x"
+      text="Set current environment to this environment"
     />
   </Label>
+  <Group
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+  >
+    <Path
+      data="M 140 92.5 L 30 60 L 30 60 "
+      hitStrokeWidth={5}
+      preventDefault={false}
+      stroke="#999999"
+      strokeWidth={1}
+    />
+    <Arrow
+      fill="#999999"
+      pointerWidth={10}
+      points={
+        Array [
+          140,
+          92.5,
+          30,
+          60,
+        ]
+      }
+      preventDefault={false}
+      strokeEnabled={false}
+    />
+  </Group>
 </React.Fragment>
 `;
 
-exports[`EnvVisualizer Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 16`] = `
+exports[`EnvVisualizer Control Stash correctly renders: global environments are treated correctly 3`] = `
 <React.Fragment>
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={140}
-    y={5}
+    x={20}
+    y={110}
   >
     <Tag
       cornerRadius={5}
@@ -985,15 +1845,17 @@ exports[`EnvVisualizer Control Stash correctly renders: arrows from the environm
       fontSize={15}
       fontStyle="normal"
       fontVariant="normal"
+      height={35}
       padding={10}
       preventDefault={false}
-      text="pair/array"
+      text="pop"
+      width={120}
     />
   </Label>
   <Label
     visible={false}
     x={145}
-    y={45}
+    y={115}
   >
     <Tag
       fill="black"
@@ -1009,50 +1871,24 @@ exports[`EnvVisualizer Control Stash correctly renders: arrows from the environm
       fontVariant="normal"
       padding={5}
       preventDefault={false}
-      text="pair/array"
+      text="Pop most recently pushed value from stash"
     />
   </Label>
-  <Group
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <Path
-      data="M 195.1513671875 40 L 316.12109375 555 L 316.12109375 555 M 195.1513671875 40 L 316.12109375 555 L 316.12109375 555 "
-      hitStrokeWidth={5}
-      preventDefault={false}
-      stroke="#999999"
-      strokeWidth={1}
-    />
-    <Arrow
-      fill="#999999"
-      pointerWidth={10}
-      points={
-        Array [
-          195.1513671875,
-          40,
-          316.12109375,
-          555,
-        ]
-      }
-      preventDefault={false}
-      strokeEnabled={false}
-    />
-  </Group>
 </React.Fragment>
 `;
 
-exports[`EnvVisualizer Control Stash correctly renders: global environments are treated correctly 1`] = `
+exports[`EnvVisualizer Control Stash correctly renders: global environments are treated correctly 4`] = `
 <React.Fragment>
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
     x={20}
-    y={40}
+    y={145}
   >
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#030fff"
     />
     <Text
       fill="#999999"
@@ -1063,14 +1899,14 @@ exports[`EnvVisualizer Control Stash correctly renders: global environments are
       height={35}
       padding={10}
       preventDefault={false}
-      text="math_sin(…"
+      text="asgn math…"
       width={120}
     />
   </Label>
   <Label
     visible={false}
     x={145}
-    y={45}
+    y={150}
   >
     <Tag
       fill="black"
@@ -1086,24 +1922,24 @@ exports[`EnvVisualizer Control Stash correctly renders: global environments are
       fontVariant="normal"
       padding={5}
       preventDefault={false}
-      text="math_sin(math_PI / 2);"
+      text="Assign value on top of stash to math_sin"
     />
   </Label>
 </React.Fragment>
 `;
 
-exports[`EnvVisualizer Control Stash correctly renders: global environments are treated correctly 2`] = `
+exports[`EnvVisualizer Control Stash correctly renders: global environments are treated correctly 5`] = `
 <React.Fragment>
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={20}
-    y={75}
+    x={140}
+    y={5}
   >
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#030fff"
+      stroke="#999999"
     />
     <Text
       fill="#999999"
@@ -1111,17 +1947,15 @@ exports[`EnvVisualizer Control Stash correctly renders: global environments are
       fontSize={15}
       fontStyle="normal"
       fontVariant="normal"
-      height={35}
       padding={10}
       preventDefault={false}
-      text="env"
-      width={120}
+      text="closure"
     />
   </Label>
   <Label
     visible={false}
     x={145}
-    y={80}
+    y={45}
   >
     <Tag
       fill="black"
@@ -1137,35 +1971,9 @@ exports[`EnvVisualizer Control Stash correctly renders: global environments are
       fontVariant="normal"
       padding={5}
       preventDefault={false}
-      text="Set current environment to this environment"
+      text="closure"
     />
   </Label>
-  <Group
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <Path
-      data="M 140 92.5 L 30 60 L 30 60 "
-      hitStrokeWidth={5}
-      preventDefault={false}
-      stroke="#999999"
-      strokeWidth={1}
-    />
-    <Arrow
-      fill="#999999"
-      pointerWidth={10}
-      points={
-        Array [
-          140,
-          92.5,
-          30,
-          60,
-        ]
-      }
-      preventDefault={false}
-      strokeEnabled={false}
-    />
-  </Group>
 </React.Fragment>
 `;
 

From 93f6df2cc4039eb1d56117c59a6ac3f47b55deb5 Mon Sep 17 00:00:00 2001
From: s-kybound <abadkyriel@gmail.com>
Date: Tue, 20 Feb 2024 23:41:39 +0800
Subject: [PATCH 02/16] Updated tests with windows machine

---
 .../__snapshots__/EnvVisualizer.tsx.snap      | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/features/envVisualizer/__tests__/__snapshots__/EnvVisualizer.tsx.snap b/src/features/envVisualizer/__tests__/__snapshots__/EnvVisualizer.tsx.snap
index aae0af12d9..d6ddb2ae77 100644
--- a/src/features/envVisualizer/__tests__/__snapshots__/EnvVisualizer.tsx.snap
+++ b/src/features/envVisualizer/__tests__/__snapshots__/EnvVisualizer.tsx.snap
@@ -181,7 +181,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
     onMouseLeave={[Function]}
   >
     <Path
-      data="M 140 127.5 L 485.99609375 390 L 485.99609375 390 M 140 127.5 L 485.99609375 390 L 485.99609375 390 "
+      data="M 140 127.5 L 486.0078125 390 L 486.0078125 390 M 140 127.5 L 486.0078125 390 L 486.0078125 390 "
       hitStrokeWidth={5}
       preventDefault={false}
       stroke="#999999"
@@ -194,7 +194,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
         Array [
           140,
           127.5,
-          485.99609375,
+          486.0078125,
           390,
         ]
       }
@@ -309,7 +309,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
     onMouseLeave={[Function]}
   >
     <Path
-      data="M 140 197.5 L 801.9921875 390 L 801.9921875 390 M 140 197.5 L 801.9921875 390 L 801.9921875 390 "
+      data="M 140 197.5 L 802.015625 390 L 802.015625 390 M 140 197.5 L 802.015625 390 L 802.015625 390 "
       hitStrokeWidth={5}
       preventDefault={false}
       stroke="#999999"
@@ -322,7 +322,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
         Array [
           140,
           197.5,
-          801.9921875,
+          802.015625,
           390,
         ]
       }
@@ -437,7 +437,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
     onMouseLeave={[Function]}
   >
     <Path
-      data="M 140 267.5 L 1117.98828125 390 L 1117.98828125 390 M 140 267.5 L 1117.98828125 390 L 1117.98828125 390 "
+      data="M 140 267.5 L 1118.0234375 390 L 1118.0234375 390 M 140 267.5 L 1118.0234375 390 L 1118.0234375 390 "
       hitStrokeWidth={5}
       preventDefault={false}
       stroke="#999999"
@@ -450,7 +450,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
         Array [
           140,
           267.5,
-          1117.98828125,
+          1118.0234375,
           390,
         ]
       }
@@ -565,7 +565,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
     onMouseLeave={[Function]}
   >
     <Path
-      data="M 140 337.5 L 1433.984375 390 L 1433.984375 390 M 140 337.5 L 1433.984375 390 L 1433.984375 390 "
+      data="M 140 337.5 L 1434.03125 390 L 1434.03125 390 M 140 337.5 L 1434.03125 390 L 1434.03125 390 "
       hitStrokeWidth={5}
       preventDefault={false}
       stroke="#999999"
@@ -578,7 +578,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
         Array [
           140,
           337.5,
-          1433.984375,
+          1434.03125,
           390,
         ]
       }
@@ -694,7 +694,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={177.998046875}
+    x={178.00390625}
     y={5}
   >
     <Tag
@@ -715,7 +715,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   </Label>
   <Label
     visible={false}
-    x={182.998046875}
+    x={183.00390625}
     y={45}
   >
     <Tag
@@ -743,7 +743,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={206.9970703125}
+    x={207.005859375}
     y={5}
   >
     <Tag
@@ -764,7 +764,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   </Label>
   <Label
     visible={false}
-    x={211.9970703125}
+    x={212.005859375}
     y={45}
   >
     <Tag
@@ -792,7 +792,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={235.99609375}
+    x={236.0078125}
     y={5}
   >
     <Tag
@@ -813,7 +813,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   </Label>
   <Label
     visible={false}
-    x={240.99609375}
+    x={241.0078125}
     y={45}
   >
     <Tag
@@ -841,7 +841,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={264.9951171875}
+    x={265.009765625}
     y={5}
   >
     <Tag
@@ -862,7 +862,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   </Label>
   <Label
     visible={false}
-    x={269.9951171875}
+    x={270.009765625}
     y={45}
   >
     <Tag
@@ -890,7 +890,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={293.994140625}
+    x={294.01171875}
     y={5}
   >
     <Tag
@@ -911,7 +911,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   </Label>
   <Label
     visible={false}
-    x={298.994140625}
+    x={299.01171875}
     y={45}
   >
     <Tag
@@ -939,7 +939,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={322.9931640625}
+    x={323.013671875}
     y={5}
   >
     <Tag
@@ -960,7 +960,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   </Label>
   <Label
     visible={false}
-    x={327.9931640625}
+    x={328.013671875}
     y={45}
   >
     <Tag

From 12ebcfe4324fbfcc5f3ec86e09d491bdfd126623 Mon Sep 17 00:00:00 2001
From: s-kybound <abadkyriel@gmail.com>
Date: Wed, 21 Feb 2024 01:45:20 +0800
Subject: [PATCH 03/16] Ran tests on different windows machine

---
 .../__snapshots__/EnvVisualizer.tsx.snap      | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/features/envVisualizer/__tests__/__snapshots__/EnvVisualizer.tsx.snap b/src/features/envVisualizer/__tests__/__snapshots__/EnvVisualizer.tsx.snap
index d6ddb2ae77..d8f09018ff 100644
--- a/src/features/envVisualizer/__tests__/__snapshots__/EnvVisualizer.tsx.snap
+++ b/src/features/envVisualizer/__tests__/__snapshots__/EnvVisualizer.tsx.snap
@@ -181,7 +181,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
     onMouseLeave={[Function]}
   >
     <Path
-      data="M 140 127.5 L 486.0078125 390 L 486.0078125 390 M 140 127.5 L 486.0078125 390 L 486.0078125 390 "
+      data="M 140 127.5 L 486.12109375 390 L 486.12109375 390 M 140 127.5 L 486.12109375 390 L 486.12109375 390 "
       hitStrokeWidth={5}
       preventDefault={false}
       stroke="#999999"
@@ -194,7 +194,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
         Array [
           140,
           127.5,
-          486.0078125,
+          486.12109375,
           390,
         ]
       }
@@ -309,7 +309,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
     onMouseLeave={[Function]}
   >
     <Path
-      data="M 140 197.5 L 802.015625 390 L 802.015625 390 M 140 197.5 L 802.015625 390 L 802.015625 390 "
+      data="M 140 197.5 L 802.2421875 390 L 802.2421875 390 M 140 197.5 L 802.2421875 390 L 802.2421875 390 "
       hitStrokeWidth={5}
       preventDefault={false}
       stroke="#999999"
@@ -322,7 +322,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
         Array [
           140,
           197.5,
-          802.015625,
+          802.2421875,
           390,
         ]
       }
@@ -437,7 +437,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
     onMouseLeave={[Function]}
   >
     <Path
-      data="M 140 267.5 L 1118.0234375 390 L 1118.0234375 390 M 140 267.5 L 1118.0234375 390 L 1118.0234375 390 "
+      data="M 140 267.5 L 1118.36328125 390 L 1118.36328125 390 M 140 267.5 L 1118.36328125 390 L 1118.36328125 390 "
       hitStrokeWidth={5}
       preventDefault={false}
       stroke="#999999"
@@ -450,7 +450,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
         Array [
           140,
           267.5,
-          1118.0234375,
+          1118.36328125,
           390,
         ]
       }
@@ -565,7 +565,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
     onMouseLeave={[Function]}
   >
     <Path
-      data="M 140 337.5 L 1434.03125 390 L 1434.03125 390 M 140 337.5 L 1434.03125 390 L 1434.03125 390 "
+      data="M 140 337.5 L 1434.484375 390 L 1434.484375 390 M 140 337.5 L 1434.484375 390 L 1434.484375 390 "
       hitStrokeWidth={5}
       preventDefault={false}
       stroke="#999999"
@@ -578,7 +578,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
         Array [
           140,
           337.5,
-          1434.03125,
+          1434.484375,
           390,
         ]
       }
@@ -694,7 +694,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={178.00390625}
+    x={178.060546875}
     y={5}
   >
     <Tag
@@ -715,7 +715,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   </Label>
   <Label
     visible={false}
-    x={183.00390625}
+    x={183.060546875}
     y={45}
   >
     <Tag
@@ -743,7 +743,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={207.005859375}
+    x={207.0908203125}
     y={5}
   >
     <Tag
@@ -764,7 +764,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   </Label>
   <Label
     visible={false}
-    x={212.005859375}
+    x={212.0908203125}
     y={45}
   >
     <Tag
@@ -792,7 +792,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={236.0078125}
+    x={236.12109375}
     y={5}
   >
     <Tag
@@ -813,7 +813,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   </Label>
   <Label
     visible={false}
-    x={241.0078125}
+    x={241.12109375}
     y={45}
   >
     <Tag
@@ -841,7 +841,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={265.009765625}
+    x={265.1513671875}
     y={5}
   >
     <Tag
@@ -862,7 +862,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   </Label>
   <Label
     visible={false}
-    x={270.009765625}
+    x={270.1513671875}
     y={45}
   >
     <Tag
@@ -890,7 +890,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={294.01171875}
+    x={294.181640625}
     y={5}
   >
     <Tag
@@ -911,7 +911,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   </Label>
   <Label
     visible={false}
-    x={299.01171875}
+    x={299.181640625}
     y={45}
   >
     <Tag
@@ -939,7 +939,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={323.013671875}
+    x={323.2119140625}
     y={5}
   >
     <Tag
@@ -960,7 +960,7 @@ exports[`EnvVisualizer Control Stash correctly renders: Control is truncated pro
   </Label>
   <Label
     visible={false}
-    x={328.013671875}
+    x={328.2119140625}
     y={45}
   >
     <Tag

From 81558796eee3f804ba3b92227620c9b65f779938 Mon Sep 17 00:00:00 2001
From: s-kybound <abadkyriel@gmail.com>
Date: Thu, 4 Apr 2024 14:04:14 +0800
Subject: [PATCH 04/16] resolve all issues with scheme CSE machine

---
 src/commons/application/ApplicationTypes.ts      | 16 +++++++++++++++-
 src/commons/mocks/ContextMocks.ts                |  4 +++-
 src/commons/sagas/PlaygroundSaga.ts              |  6 +++++-
 src/commons/sagas/WorkspaceSaga.ts               |  7 ++++++-
 src/features/cseMachine/CseMachineLayout.tsx     |  1 +
 .../cseMachine/components/ControlStack.tsx       |  3 ++-
 6 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/commons/application/ApplicationTypes.ts b/src/commons/application/ApplicationTypes.ts
index 2f23ef9c28..090f98904b 100644
--- a/src/commons/application/ApplicationTypes.ts
+++ b/src/commons/application/ApplicationTypes.ts
@@ -194,9 +194,23 @@ const schemeSubLanguages: Array<Pick<SALanguage, 'chapter' | 'variant' | 'displa
 ];
 
 export const schemeLanguages: SALanguage[] = schemeSubLanguages.map(sublang => {
-  return { ...sublang, mainLanguage: SupportedLanguage.SCHEME, supports: { repl: true } };
+  return {
+    ...sublang,
+    mainLanguage: SupportedLanguage.SCHEME,
+    supports: { repl: true, cseMachine: true }
+  };
 });
 
+export function isSchemeLanguage(chapter: Chapter): boolean {
+  return [
+    Chapter.SCHEME_1,
+    Chapter.SCHEME_2,
+    Chapter.SCHEME_3,
+    Chapter.SCHEME_4,
+    Chapter.FULL_SCHEME
+  ].includes(chapter);
+}
+
 const pySubLanguages: Array<Pick<SALanguage, 'chapter' | 'variant' | 'displayName'>> = [
   { chapter: Chapter.PYTHON_1, variant: Variant.DEFAULT, displayName: 'Python \xa71' }
   //{ chapter: Chapter.PYTHON_2, variant: Variant.DEFAULT, displayName: 'Python \xa72' },
diff --git a/src/commons/mocks/ContextMocks.ts b/src/commons/mocks/ContextMocks.ts
index df0d15605a..28f9a00e7f 100644
--- a/src/commons/mocks/ContextMocks.ts
+++ b/src/commons/mocks/ContextMocks.ts
@@ -37,7 +37,9 @@ export function mockRuntimeContext(): Context {
     control: null,
     stash: null,
     envStepsTotal: 0,
-    breakpointSteps: []
+    breakpointSteps: [],
+    objectCount: 0,
+    changepointSteps: []
   };
   return context;
 }
diff --git a/src/commons/sagas/PlaygroundSaga.ts b/src/commons/sagas/PlaygroundSaga.ts
index f8e1409145..bb813e1cd1 100644
--- a/src/commons/sagas/PlaygroundSaga.ts
+++ b/src/commons/sagas/PlaygroundSaga.ts
@@ -12,7 +12,7 @@ import {
   updateShortURL
 } from '../../features/playground/PlaygroundActions';
 import { GENERATE_LZ_STRING, SHORTEN_URL } from '../../features/playground/PlaygroundTypes';
-import { isSourceLanguage, OverallState } from '../application/ApplicationTypes';
+import { isSchemeLanguage, isSourceLanguage, OverallState } from '../application/ApplicationTypes';
 import { ExternalLibraryName } from '../application/types/ExternalTypes';
 import { retrieveFilesInWorkspaceAsRecord } from '../fileSystem/utils';
 import { visitSideContent } from '../sideContent/SideContentActions';
@@ -116,6 +116,10 @@ export default function* PlaygroundSaga(): SagaIterator {
           yield put(toggleUsingCse(true, workspaceLocation));
         }
       }
+
+      if (isSchemeLanguage(playgroundSourceChapter) && newId === SideContentType.cseMachine) {
+        yield put(toggleUsingCse(true, workspaceLocation));
+      }
     }
   );
 }
diff --git a/src/commons/sagas/WorkspaceSaga.ts b/src/commons/sagas/WorkspaceSaga.ts
index ba91932000..9e3732e605 100644
--- a/src/commons/sagas/WorkspaceSaga.ts
+++ b/src/commons/sagas/WorkspaceSaga.ts
@@ -31,6 +31,7 @@ import { DeviceSession } from '../../features/remoteExecution/RemoteExecutionTyp
 import { WORKSPACE_BASE_PATHS } from '../../pages/fileSystem/createInBrowserFileSystem';
 import {
   defaultEditorValue,
+  isSchemeLanguage,
   isSourceLanguage,
   OverallState,
   styliseSublanguage
@@ -1089,7 +1090,11 @@ export function* evalCode(
             .currentStep
       )
     : -1;
-  const cseActiveAndCorrectChapter = context.chapter >= 3 && cseIsActive;
+
+  // TODO: we need to make a function that generalises all languages that depend on using the CSE machine
+  const cseActiveAndCorrectChapter =
+    (isSchemeLanguage(context.chapter) || context.chapter >= 3) && cseIsActive;
+
   if (cseActiveAndCorrectChapter) {
     context.executionMethod = 'cse-machine';
   }
diff --git a/src/features/cseMachine/CseMachineLayout.tsx b/src/features/cseMachine/CseMachineLayout.tsx
index 3f6b5ef13d..ca2e97b6b3 100644
--- a/src/features/cseMachine/CseMachineLayout.tsx
+++ b/src/features/cseMachine/CseMachineLayout.tsx
@@ -185,6 +185,7 @@ export class Layout {
   /** remove program environment containing predefined functions */
   private static removeProgramEnv() {
     if (!Layout.globalEnvNode.children) return;
+    if (Layout.globalEnvNode.children.length === 0) return;
 
     const programEnvNode = Layout.globalEnvNode.children[0];
     const globalEnvNode = Layout.globalEnvNode;
diff --git a/src/features/cseMachine/components/ControlStack.tsx b/src/features/cseMachine/components/ControlStack.tsx
index 7d80991ada..fdfeba5155 100644
--- a/src/features/cseMachine/components/ControlStack.tsx
+++ b/src/features/cseMachine/components/ControlStack.tsx
@@ -1,6 +1,7 @@
 import * as es from 'estree';
 import { Control } from 'js-slang/dist/cse-machine/interpreter';
 import { ControlItem, Instr } from 'js-slang/dist/cse-machine/types';
+import { StatementSequence } from 'js-slang/dist/types';
 import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
 import { Group, Label, Tag, Text } from 'react-konva';
@@ -142,6 +143,6 @@ export const isInstr = (command: ControlItem): command is Instr => {
  * @param command A ControlItem
  * @returns true if the ControlItem is an esNode and false if it is an instruction.
  */
-export const isNode = (command: ControlItem): command is es.Node => {
+export const isNode = (command: ControlItem): command is es.Node | StatementSequence => {
   return (command as es.Node).type !== undefined;
 };

From d1ae389375e20c92a3574be95f4fa390dbb1f3df Mon Sep 17 00:00:00 2001
From: s-kybound <abadkyriel@gmail.com>
Date: Thu, 4 Apr 2024 14:25:07 +0800
Subject: [PATCH 05/16] update tests

---
 .../__snapshots__/ApplicationTypes.ts.snap    |    5 +
 .../__snapshots__/CseMachine.tsx.snap         | 5152 ++++++++++++++---
 2 files changed, 4204 insertions(+), 953 deletions(-)

diff --git a/src/commons/application/__tests__/__snapshots__/ApplicationTypes.ts.snap b/src/commons/application/__tests__/__snapshots__/ApplicationTypes.ts.snap
index ca5fc6211d..3f9a03a47a 100644
--- a/src/commons/application/__tests__/__snapshots__/ApplicationTypes.ts.snap
+++ b/src/commons/application/__tests__/__snapshots__/ApplicationTypes.ts.snap
@@ -21,6 +21,7 @@ Array [
     "displayName": "Scheme §1",
     "mainLanguage": "Scheme",
     "supports": Object {
+      "cseMachine": true,
       "repl": true,
     },
     "variant": "explicit-control",
@@ -30,6 +31,7 @@ Array [
     "displayName": "Scheme §2",
     "mainLanguage": "Scheme",
     "supports": Object {
+      "cseMachine": true,
       "repl": true,
     },
     "variant": "explicit-control",
@@ -39,6 +41,7 @@ Array [
     "displayName": "Scheme §3",
     "mainLanguage": "Scheme",
     "supports": Object {
+      "cseMachine": true,
       "repl": true,
     },
     "variant": "explicit-control",
@@ -48,6 +51,7 @@ Array [
     "displayName": "Scheme §4",
     "mainLanguage": "Scheme",
     "supports": Object {
+      "cseMachine": true,
       "repl": true,
     },
     "variant": "explicit-control",
@@ -57,6 +61,7 @@ Array [
     "displayName": "Full Scheme",
     "mainLanguage": "Scheme",
     "supports": Object {
+      "cseMachine": true,
       "repl": true,
     },
     "variant": "explicit-control",
diff --git a/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap b/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap
index 78ddeb8d1b..a4b8835938 100644
--- a/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap
+++ b/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap
@@ -181,7 +181,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     onMouseLeave={[Function]}
   >
     <Path
-      data="M 140 127.5 L 486.12109375 390 L 486.12109375 390 M 140 127.5 L 486.12109375 390 L 486.12109375 390 "
+      data="M 140 127.5 L 485.99609375 390 L 485.99609375 390 M 140 127.5 L 485.99609375 390 L 485.99609375 390 "
       hitStrokeWidth={5}
       preventDefault={false}
       stroke="#999999"
@@ -194,7 +194,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
         Array [
           140,
           127.5,
-          486.12109375,
+          485.99609375,
           390,
         ]
       }
@@ -309,7 +309,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     onMouseLeave={[Function]}
   >
     <Path
-      data="M 140 197.5 L 802.2421875 390 L 802.2421875 390 M 140 197.5 L 802.2421875 390 L 802.2421875 390 "
+      data="M 140 197.5 L 801.9921875 390 L 801.9921875 390 M 140 197.5 L 801.9921875 390 L 801.9921875 390 "
       hitStrokeWidth={5}
       preventDefault={false}
       stroke="#999999"
@@ -322,7 +322,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
         Array [
           140,
           197.5,
-          802.2421875,
+          801.9921875,
           390,
         ]
       }
@@ -437,7 +437,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     onMouseLeave={[Function]}
   >
     <Path
-      data="M 140 267.5 L 1118.36328125 390 L 1118.36328125 390 M 140 267.5 L 1118.36328125 390 L 1118.36328125 390 "
+      data="M 140 267.5 L 1117.98828125 390 L 1117.98828125 390 M 140 267.5 L 1117.98828125 390 L 1117.98828125 390 "
       hitStrokeWidth={5}
       preventDefault={false}
       stroke="#999999"
@@ -450,7 +450,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
         Array [
           140,
           267.5,
-          1118.36328125,
+          1117.98828125,
           390,
         ]
       }
@@ -565,7 +565,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     onMouseLeave={[Function]}
   >
     <Path
-      data="M 140 337.5 L 1434.484375 390 L 1434.484375 390 M 140 337.5 L 1434.484375 390 L 1434.484375 390 "
+      data="M 140 337.5 L 1433.984375 390 L 1433.984375 390 M 140 337.5 L 1433.984375 390 L 1433.984375 390 "
       hitStrokeWidth={5}
       preventDefault={false}
       stroke="#999999"
@@ -578,7 +578,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
         Array [
           140,
           337.5,
-          1434.484375,
+          1433.984375,
           390,
         ]
       }
@@ -694,7 +694,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={178.060546875}
+    x={177.998046875}
     y={5}
   >
     <Tag
@@ -715,7 +715,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
   </Label>
   <Label
     visible={false}
-    x={183.060546875}
+    x={182.998046875}
     y={45}
   >
     <Tag
@@ -743,7 +743,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={207.0908203125}
+    x={206.9970703125}
     y={5}
   >
     <Tag
@@ -764,7 +764,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
   </Label>
   <Label
     visible={false}
-    x={212.0908203125}
+    x={211.9970703125}
     y={45}
   >
     <Tag
@@ -792,7 +792,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={236.12109375}
+    x={235.99609375}
     y={5}
   >
     <Tag
@@ -813,7 +813,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
   </Label>
   <Label
     visible={false}
-    x={241.12109375}
+    x={240.99609375}
     y={45}
   >
     <Tag
@@ -841,7 +841,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={265.1513671875}
+    x={264.9951171875}
     y={5}
   >
     <Tag
@@ -862,7 +862,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
   </Label>
   <Label
     visible={false}
-    x={270.1513671875}
+    x={269.9951171875}
     y={45}
   >
     <Tag
@@ -890,7 +890,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={294.181640625}
+    x={293.994140625}
     y={5}
   >
     <Tag
@@ -911,7 +911,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
   </Label>
   <Label
     visible={false}
-    x={299.181640625}
+    x={298.994140625}
     y={45}
   >
     <Tag
@@ -939,7 +939,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={323.2119140625}
+    x={322.9931640625}
     y={5}
   >
     <Tag
@@ -960,7 +960,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
   </Label>
   <Label
     visible={false}
-    x={328.2119140625}
+    x={327.9931640625}
     y={45}
   >
     <Tag
@@ -1552,108 +1552,6 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     onMouseLeave={[Function]}
     x={20}
     y={390}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999999"
-    />
-    <Text
-      fill="#999999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="x = x + 1;"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={395}
-  >
-    <Tag
-      fill="black"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="black"
-    />
-    <Text
-      fill="#999999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="x = x + 1;"
-    />
-  </Label>
-</React.Fragment>
-`;
-
-exports[`CSE Machine Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 12`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={425}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999999"
-    />
-    <Text
-      fill="#999999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="pop"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={430}
-  >
-    <Tag
-      fill="black"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="black"
-    />
-    <Text
-      fill="#999999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="Pop most recently pushed value from stash"
-    />
-  </Label>
-</React.Fragment>
-`;
-
-exports[`CSE Machine Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 13`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={460}
   >
     <Tag
       cornerRadius={5}
@@ -1666,17 +1564,20 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
       fontSize={15}
       fontStyle="normal"
       fontVariant="normal"
-      height={35}
+      height={80}
       padding={10}
       preventDefault={false}
-      text="arr[x] = …"
+      text="[
+  arr[x] …
+  x = x +…
+]"
       width={120}
     />
   </Label>
   <Label
     visible={false}
     x={145}
-    y={465}
+    y={395}
   >
     <Tag
       fill="black"
@@ -1692,7 +1593,10 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
       fontVariant="normal"
       padding={5}
       preventDefault={false}
-      text="arr[x] = () => x;"
+      text="[
+  arr[x] = () => x;
+  x = x + 1;
+]"
     />
   </Label>
 </React.Fragment>
@@ -1837,7 +1741,7 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#030fff"
     />
     <Text
       fill="#999999"
@@ -1882,13 +1786,13 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
   <Label
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={20}
-    y={145}
+    x={140}
+    y={5}
   >
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#030fff"
+      stroke="#ff0000"
     />
     <Text
       fill="#999999"
@@ -1896,17 +1800,15 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
       fontSize={15}
       fontStyle="normal"
       fontVariant="normal"
-      height={35}
       padding={10}
       preventDefault={false}
-      text="asgn math…"
-      width={120}
+      text="closure"
     />
   </Label>
   <Label
     visible={false}
     x={145}
-    y={150}
+    y={45}
   >
     <Tag
       fill="black"
@@ -1922,58 +1824,35 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
       fontVariant="normal"
       padding={5}
       preventDefault={false}
-      text="Assign value on top of stash to math_sin"
+      text="closure"
     />
   </Label>
-</React.Fragment>
-`;
-
-exports[`CSE Machine Control Stash correctly renders: global environments are treated correctly 5`] = `
-<React.Fragment>
-  <Label
+  <Group
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
-    x={140}
-    y={5}
   >
-    <Tag
-      cornerRadius={5}
+    <Path
+      data="M 181.49658203125 40 L 186.4892578125 240 L 186.4892578125 240 "
+      hitStrokeWidth={5}
       preventDefault={false}
       stroke="#999999"
+      strokeWidth={1}
     />
-    <Text
-      fill="#999999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={10}
-      preventDefault={false}
-      text="closure"
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={45}
-  >
-    <Tag
-      fill="black"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="black"
-    />
-    <Text
+    <Arrow
       fill="#999999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
+      pointerWidth={10}
+      points={
+        Array [
+          181.49658203125,
+          40,
+          186.4892578125,
+          240,
+        ]
+      }
       preventDefault={false}
-      text="closure"
+      strokeEnabled={false}
     />
-  </Label>
+  </Group>
 </React.Fragment>
 `;
 
@@ -1982,6 +1861,9 @@ Object {
   "head": Object {
     ":::pre-declared names::": Symbol(),
   },
+  "heap": Heap {
+    "storage": null,
+  },
   "id": Any<String>,
   "name": "global",
   "tail": null,
@@ -1991,10 +1873,6 @@ Object {
 exports[`CSE Machine calculates correct layout for code sample 0 2`] = `
 Object {
   "head": Object {
-    "50": [Function],
-    "52": [Function],
-    "54": [Function],
-    "56": [Function],
     "fn": [Function],
     "x": Array [
       "long string",
@@ -2060,85 +1938,24 @@ Object {
       ],
     ],
   },
-  "id": Any<String>,
-  "name": "programEnvironment",
-  "tail": Object {
-    "head": Object {
-      "$accumulate": [Function],
-      "$append": [Function],
-      "$build_list": [Function],
-      "$enum_list": [Function],
-      "$filter": [Function],
-      "$length": [Function],
-      "$list_to_string": [Function],
-      "$map": [Function],
-      "$remove": [Function],
-      "$remove_all": [Function],
-      "$reverse": [Function],
-      "__access_export__": [Function],
-      "__access_named_export__": [Function],
-      "accumulate": [Function],
-      "append": [Function],
-      "build_list": [Function],
-      "build_stream": [Function],
-      "enum_list": [Function],
-      "enum_stream": [Function],
-      "equal": [Function],
-      "eval_stream": [Function],
-      "filter": [Function],
-      "for_each": [Function],
-      "integers_from": [Function],
-      "is_stream": [Function],
-      "length": [Function],
-      "list_ref": [Function],
-      "list_to_stream": [Function],
-      "list_to_string": [Function],
-      "map": [Function],
-      "member": [Function],
-      "remove": [Function],
-      "remove_all": [Function],
-      "reverse": [Function],
-      "stream_append": [Function],
-      "stream_filter": [Function],
-      "stream_for_each": [Function],
-      "stream_length": [Function],
-      "stream_map": [Function],
-      "stream_member": [Function],
-      "stream_ref": [Function],
-      "stream_remove": [Function],
-      "stream_remove_all": [Function],
-      "stream_reverse": [Function],
-      "stream_to_list": [Function],
-    },
-    "id": "1",
-    "name": "programEnvironment",
-    "tail": Object {
-      "head": Object {
-        ":::pre-declared names::": Symbol(),
-      },
-      "id": "-1",
-      "name": "global",
-      "tail": null,
-    },
-  },
-}
-`;
-
-exports[`CSE Machine calculates correct layout for code sample 0 3`] = `
-Array [
-  ":::pre-declared names::: ",
-  Symbol(),
-  "fn:= ",
-  [Function],
-  "x:= ",
-  Array [
-    "long string",
-    Array [
+  "heap": Heap {
+    "storage": Set {
       [Function],
       [Function],
-    ],
-    Array [
-      1,
+      [Function],
+      Array [
+        [Function],
+        [Function],
+      ],
+      Array [
+        2,
+        3,
+      ],
+      [Function],
+      Array [
+        [Function],
+        null,
+      ],
       Array [
         Array [
           2,
@@ -2149,18 +1966,6 @@ Array [
           null,
         ],
       ],
-    ],
-    [Function],
-    5,
-    6,
-  ],
-  "y:= ",
-  Array [
-    Array [
-      [Function],
-      [Function],
-    ],
-    Array [
       Array [
         1,
         Array [
@@ -2174,9 +1979,15 @@ Array [
           ],
         ],
       ],
+      [Function],
       Array [
-        [Function],
+        "long string",
+        Array [
+          [Function],
+          [Function],
+        ],
         Array [
+          1,
           Array [
             Array [
               2,
@@ -2187,114 +1998,125 @@ Array [
               null,
             ],
           ],
+        ],
+        [Function],
+        5,
+        6,
+      ],
+      Array [
+        [Function],
+        null,
+      ],
+      Array [
+        Array [
+          Array [
+            2,
+            3,
+          ],
           Array [
             [Function],
             null,
           ],
         ],
+        Array [
+          [Function],
+          null,
+        ],
       ],
-    ],
-  ],
-  "50:= ",
-  [Function],
-  "52:= ",
-  [Function],
-  "54:= ",
-  [Function],
-  "56:= ",
-  [Function],
-]
-`;
-
-exports[`CSE Machine calculates correct layout for code sample 1 1`] = `
-Object {
-  "head": Object {
-    ":::pre-declared names::": Symbol(),
-  },
-  "id": Any<String>,
-  "name": "global",
-  "tail": null,
-}
-`;
-
-exports[`CSE Machine calculates correct layout for code sample 1 2`] = `
-Object {
-  "head": Object {
-    "106": [Function],
-    "fn": [Function],
-    "l": Array [
-      1,
       Array [
+        [Function],
         Array [
           Array [
-            1,
             Array [
               2,
-              Array [
-                3,
-                Array [
-                  [Function],
-                  null,
-                ],
-              ],
+              3,
+            ],
+            Array [
+              [Function],
+              null,
             ],
           ],
+          Array [
+            [Function],
+            null,
+          ],
+        ],
+      ],
+      Array [
+        Array [
+          1,
           Array [
             Array [
-              Array [
-                1,
-                2,
-              ],
+              2,
               3,
             ],
+            Array [
+              [Function],
+              null,
+            ],
+          ],
+        ],
+        Array [
+          [Function],
+          Array [
             Array [
               Array [
-                1,
-                Array [
-                  1,
-                  2,
-                ],
-                [Function],
-                4,
-                5,
+                2,
+                3,
               ],
               Array [
-                4,
+                [Function],
                 null,
               ],
             ],
+            Array [
+              [Function],
+              null,
+            ],
           ],
         ],
+      ],
+      Array [
         Array [
           [Function],
+          [Function],
+        ],
+        Array [
           Array [
+            1,
+            Array [
+              Array [
+                2,
+                3,
+              ],
+              Array [
+                [Function],
+                null,
+              ],
+            ],
+          ],
+          Array [
+            [Function],
             Array [
-              1,
               Array [
                 Array [
-                  1,
                   2,
+                  3,
+                ],
+                Array [
+                  [Function],
+                  null,
                 ],
-                3,
               ],
-              4,
+              Array [
+                [Function],
+                null,
+              ],
             ],
-            null,
           ],
         ],
       ],
-    ],
-    "x": Array [
-      1,
-      Array [
-        Array [
-          1,
-          2,
-        ],
-        3,
-      ],
-      4,
-    ],
+    },
   },
   "id": Any<String>,
   "name": "programEnvironment",
@@ -2344,14 +2166,68 @@ Object {
       "stream_remove": [Function],
       "stream_remove_all": [Function],
       "stream_reverse": [Function],
+      "stream_tail": [Function],
       "stream_to_list": [Function],
     },
-    "id": "57",
-    "name": "programEnvironment",
+    "heap": Heap {
+      "storage": Set {
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      },
+    },
+    "id": "0",
+    "name": "prelude",
     "tail": Object {
       "head": Object {
         ":::pre-declared names::": Symbol(),
       },
+      "heap": Heap {
+        "storage": null,
+      },
       "id": "-1",
       "name": "global",
       "tail": null,
@@ -2360,7 +2236,7 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 1 3`] = `
+exports[`CSE Machine calculates correct layout for code sample 0 3`] = `
 Array [
   ":::pre-declared names::: ",
   Symbol(),
@@ -2368,313 +2244,476 @@ Array [
   [Function],
   "x:= ",
   Array [
-    1,
+    "long string",
+    Array [
+      [Function],
+      [Function],
+    ],
     Array [
+      1,
       Array [
-        1,
-        2,
+        Array [
+          2,
+          3,
+        ],
+        Array [
+          [Function],
+          null,
+        ],
       ],
-      3,
     ],
-    4,
+    [Function],
+    5,
+    6,
   ],
-  "l:= ",
+  "y:= ",
   Array [
-    1,
+    Array [
+      [Function],
+      [Function],
+    ],
     Array [
       Array [
+        1,
         Array [
-          1,
           Array [
             2,
-            Array [
-              3,
-              Array [
-                [Function],
-                null,
-              ],
-            ],
+            3,
+          ],
+          Array [
+            [Function],
+            null,
           ],
         ],
+      ],
+      Array [
+        [Function],
         Array [
           Array [
             Array [
-              1,
               2,
+              3,
             ],
-            3,
-          ],
-          Array [
             Array [
-              1,
-              Array [
-                1,
-                2,
-              ],
               [Function],
-              4,
-              5,
-            ],
-            Array [
-              4,
               null,
             ],
           ],
-        ],
-      ],
-      Array [
-        [Function],
-        Array [
           Array [
-            1,
-            Array [
-              Array [
-                1,
-                2,
-              ],
-              3,
-            ],
-            4,
+            [Function],
+            null,
           ],
-          null,
         ],
       ],
     ],
   ],
-  "106:= ",
-  [Function],
 ]
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 2 1`] = `
+exports[`CSE Machine calculates correct layout for code sample 1 1`] = `
 Object {
   "head": Object {
     ":::pre-declared names::": Symbol(),
   },
+  "heap": Heap {
+    "storage": null,
+  },
   "id": Any<String>,
   "name": "global",
   "tail": null,
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 2 2`] = `
+exports[`CSE Machine calculates correct layout for code sample 1 2`] = `
 Object {
   "head": Object {
-    "x1": Array [
+    "fn": [Function],
+    "l": Array [
       1,
       Array [
-        2,
         Array [
-          3,
           Array [
-            [Circular],
+            1,
+            Array [
+              2,
+              Array [
+                3,
+                Array [
+                  [Function],
+                  null,
+                ],
+              ],
+            ],
+          ],
+          Array [
+            Array [
+              Array [
+                1,
+                2,
+              ],
+              3,
+            ],
+            Array [
+              Array [
+                1,
+                Array [
+                  1,
+                  2,
+                ],
+                [Function],
+                4,
+                5,
+              ],
+              Array [
+                4,
+                null,
+              ],
+            ],
+          ],
+        ],
+        Array [
+          [Function],
+          Array [
+            Array [
+              1,
+              Array [
+                Array [
+                  1,
+                  2,
+                ],
+                3,
+              ],
+              4,
+            ],
             null,
           ],
         ],
       ],
     ],
-    "x2": Array [
-      3,
+    "x": Array [
+      1,
       Array [
         Array [
           1,
-          Array [
-            2,
-            [Circular],
-          ],
+          2,
         ],
-        null,
+        3,
       ],
+      4,
     ],
   },
-  "id": Any<String>,
-  "name": "programEnvironment",
-  "tail": Object {
-    "head": Object {
-      "$accumulate": [Function],
-      "$append": [Function],
-      "$build_list": [Function],
-      "$enum_list": [Function],
-      "$filter": [Function],
-      "$length": [Function],
-      "$list_to_string": [Function],
-      "$map": [Function],
-      "$remove": [Function],
-      "$remove_all": [Function],
-      "$reverse": [Function],
-      "__access_export__": [Function],
-      "__access_named_export__": [Function],
-      "accumulate": [Function],
-      "append": [Function],
-      "build_list": [Function],
-      "build_stream": [Function],
-      "enum_list": [Function],
-      "enum_stream": [Function],
-      "equal": [Function],
-      "eval_stream": [Function],
-      "filter": [Function],
-      "for_each": [Function],
-      "integers_from": [Function],
-      "is_stream": [Function],
-      "length": [Function],
-      "list_ref": [Function],
-      "list_to_stream": [Function],
-      "list_to_string": [Function],
-      "map": [Function],
-      "member": [Function],
-      "remove": [Function],
-      "remove_all": [Function],
-      "reverse": [Function],
-      "stream_append": [Function],
-      "stream_filter": [Function],
-      "stream_for_each": [Function],
-      "stream_length": [Function],
-      "stream_map": [Function],
-      "stream_member": [Function],
-      "stream_ref": [Function],
-      "stream_remove": [Function],
-      "stream_remove_all": [Function],
-      "stream_reverse": [Function],
-      "stream_to_list": [Function],
-    },
-    "id": "107",
-    "name": "programEnvironment",
-    "tail": Object {
-      "head": Object {
-        ":::pre-declared names::": Symbol(),
-      },
-      "id": "-1",
-      "name": "global",
-      "tail": null,
-    },
-  },
-}
-`;
-
-exports[`CSE Machine calculates correct layout for code sample 2 3`] = `
-Array [
-  ":::pre-declared names::: ",
-  Symbol(),
-  "x1:= ",
-  Array [
-    1,
-    Array [
-      2,
+  "heap": Heap {
+    "storage": Set {
+      [Function],
+      Array [
+        1,
+        2,
+      ],
       Array [
-        3,
         Array [
-          [Circular],
-          null,
+          1,
+          2,
         ],
+        3,
       ],
-    ],
-  ],
-  "x2:= ",
-  Array [
-    3,
-    Array [
       Array [
         1,
         Array [
-          2,
-          [Circular],
+          Array [
+            1,
+            2,
+          ],
+          3,
         ],
+        4,
+      ],
+      Array [
+        [Function],
+        null,
       ],
-      null,
-    ],
-  ],
-]
-`;
-
-exports[`CSE Machine calculates correct layout for code sample 3 1`] = `
-Object {
-  "head": Object {
-    ":::pre-declared names::": Symbol(),
-  },
-  "id": Any<String>,
-  "name": "global",
-  "tail": null,
-}
-`;
-
-exports[`CSE Machine calculates correct layout for code sample 3 2`] = `
-Object {
-  "head": Object {
-    "202": [Function],
-    "204": [Function],
-    "e": Array [
       Array [
         3,
         Array [
-          4,
+          [Function],
+          null,
+        ],
+      ],
+      Array [
+        2,
+        Array [
+          3,
           Array [
-            5,
+            [Function],
             null,
           ],
         ],
       ],
       Array [
-        2,
+        1,
         Array [
+          2,
           Array [
             3,
             Array [
-              4,
-              Array [
-                5,
-                null,
-              ],
+              [Function],
+              null,
             ],
           ],
-          null,
         ],
       ],
-    ],
-    "f": Array [
-      1,
-      2,
-    ],
-    "g": Array [
       Array [
+        1,
+        2,
+      ],
+      Array [
+        1,
+        Array [
+          1,
+          2,
+        ],
         [Function],
+        4,
+        5,
+      ],
+      Array [
+        4,
+        null,
+      ],
+      Array [
+        Array [
+          1,
+          Array [
+            1,
+            2,
+          ],
+          [Function],
+          4,
+          5,
+        ],
         Array [
           4,
+          null,
+        ],
+      ],
+      Array [
+        Array [
+          Array [
+            1,
+            2,
+          ],
+          3,
+        ],
+        Array [
           Array [
+            1,
+            Array [
+              1,
+              2,
+            ],
+            [Function],
+            4,
             5,
+          ],
+          Array [
+            4,
             null,
           ],
         ],
       ],
       Array [
-        2,
         Array [
+          1,
           Array [
-            [Function],
+            2,
             Array [
-              4,
+              3,
               Array [
-                5,
+                [Function],
                 null,
               ],
             ],
           ],
-          null,
+        ],
+        Array [
+          Array [
+            Array [
+              1,
+              2,
+            ],
+            3,
+          ],
+          Array [
+            Array [
+              1,
+              Array [
+                1,
+                2,
+              ],
+              [Function],
+              4,
+              5,
+            ],
+            Array [
+              4,
+              null,
+            ],
+          ],
         ],
       ],
-    ],
-    "y": Array [
+      [Function],
       Array [
-        1,
-        2,
+        Array [
+          1,
+          Array [
+            Array [
+              1,
+              2,
+            ],
+            3,
+          ],
+          4,
+        ],
+        null,
       ],
       Array [
         [Function],
         Array [
-          1,
-          2,
+          Array [
+            1,
+            Array [
+              Array [
+                1,
+                2,
+              ],
+              3,
+            ],
+            4,
+          ],
+          null,
         ],
       ],
-    ],
+      Array [
+        Array [
+          Array [
+            1,
+            Array [
+              2,
+              Array [
+                3,
+                Array [
+                  [Function],
+                  null,
+                ],
+              ],
+            ],
+          ],
+          Array [
+            Array [
+              Array [
+                1,
+                2,
+              ],
+              3,
+            ],
+            Array [
+              Array [
+                1,
+                Array [
+                  1,
+                  2,
+                ],
+                [Function],
+                4,
+                5,
+              ],
+              Array [
+                4,
+                null,
+              ],
+            ],
+          ],
+        ],
+        Array [
+          [Function],
+          Array [
+            Array [
+              1,
+              Array [
+                Array [
+                  1,
+                  2,
+                ],
+                3,
+              ],
+              4,
+            ],
+            null,
+          ],
+        ],
+      ],
+      Array [
+        1,
+        Array [
+          Array [
+            Array [
+              1,
+              Array [
+                2,
+                Array [
+                  3,
+                  Array [
+                    [Function],
+                    null,
+                  ],
+                ],
+              ],
+            ],
+            Array [
+              Array [
+                Array [
+                  1,
+                  2,
+                ],
+                3,
+              ],
+              Array [
+                Array [
+                  1,
+                  Array [
+                    1,
+                    2,
+                  ],
+                  [Function],
+                  4,
+                  5,
+                ],
+                Array [
+                  4,
+                  null,
+                ],
+              ],
+            ],
+          ],
+          Array [
+            [Function],
+            Array [
+              Array [
+                1,
+                Array [
+                  Array [
+                    1,
+                    2,
+                  ],
+                  3,
+                ],
+                4,
+              ],
+              null,
+            ],
+          ],
+        ],
+      ],
+    },
   },
   "id": Any<String>,
   "name": "programEnvironment",
@@ -2724,128 +2763,259 @@ Object {
       "stream_remove": [Function],
       "stream_remove_all": [Function],
       "stream_reverse": [Function],
+      "stream_tail": [Function],
       "stream_to_list": [Function],
     },
-    "id": "154",
-    "name": "programEnvironment",
-    "tail": Object {
-      "head": Object {
-        ":::pre-declared names::": Symbol(),
-      },
-      "id": "-1",
-      "name": "global",
-      "tail": null,
-    },
-  },
-}
-`;
-
-exports[`CSE Machine calculates correct layout for code sample 3 3`] = `
-Array [
-  ":::pre-declared names::: ",
-  Symbol(),
-  "e:= ",
-  Array [
-    Array [
-      3,
-      Array [
-        4,
-        Array [
-          5,
-          null,
-        ],
-      ],
-    ],
-    Array [
-      2,
-      Array [
-        Array [
-          3,
-          Array [
-            4,
-            Array [
-              5,
-              null,
-            ],
-          ],
-        ],
-        null,
+    "heap": Heap {
+      "storage": Set {
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      },
+    },
+    "id": "0",
+    "name": "prelude",
+    "tail": Object {
+      "head": Object {
+        ":::pre-declared names::": Symbol(),
+      },
+      "heap": Heap {
+        "storage": null,
+      },
+      "id": "-1",
+      "name": "global",
+      "tail": null,
+    },
+  },
+}
+`;
+
+exports[`CSE Machine calculates correct layout for code sample 1 3`] = `
+Array [
+  ":::pre-declared names::: ",
+  Symbol(),
+  "fn:= ",
+  [Function],
+  "x:= ",
+  Array [
+    1,
+    Array [
+      Array [
+        1,
+        2,
       ],
+      3,
     ],
+    4,
   ],
-  "f:= ",
+  "l:= ",
   Array [
     1,
-    2,
-  ],
-  "g:= ",
-  Array [
     Array [
-      [Function],
       Array [
-        4,
         Array [
-          5,
-          null,
+          1,
+          Array [
+            2,
+            Array [
+              3,
+              Array [
+                [Function],
+                null,
+              ],
+            ],
+          ],
         ],
-      ],
-    ],
-    Array [
-      2,
-      Array [
         Array [
-          [Function],
           Array [
-            4,
             Array [
+              1,
+              2,
+            ],
+            3,
+          ],
+          Array [
+            Array [
+              1,
+              Array [
+                1,
+                2,
+              ],
+              [Function],
+              4,
               5,
+            ],
+            Array [
+              4,
               null,
             ],
           ],
         ],
-        null,
       ],
-    ],
-  ],
-  "y:= ",
-  Array [
-    Array [
-      1,
-      2,
-    ],
-    Array [
-      [Function],
       Array [
-        1,
-        2,
+        [Function],
+        Array [
+          Array [
+            1,
+            Array [
+              Array [
+                1,
+                2,
+              ],
+              3,
+            ],
+            4,
+          ],
+          null,
+        ],
       ],
     ],
   ],
-  "202:= ",
-  [Function],
-  "204:= ",
-  [Function],
 ]
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 4 1`] = `
+exports[`CSE Machine calculates correct layout for code sample 2 1`] = `
 Object {
   "head": Object {
     ":::pre-declared names::": Symbol(),
   },
+  "heap": Heap {
+    "storage": null,
+  },
   "id": Any<String>,
   "name": "global",
   "tail": null,
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 4 2`] = `
+exports[`CSE Machine calculates correct layout for code sample 2 2`] = `
 Object {
   "head": Object {
-    "f": [Function],
-    "x": 0,
-    "y": 10,
-    "z": [Function],
+    "x1": Array [
+      1,
+      Array [
+        2,
+        Array [
+          3,
+          Array [
+            [Circular],
+            null,
+          ],
+        ],
+      ],
+    ],
+    "x2": Array [
+      3,
+      Array [
+        Array [
+          1,
+          Array [
+            2,
+            [Circular],
+          ],
+        ],
+        null,
+      ],
+    ],
+  },
+  "heap": Heap {
+    "storage": Set {
+      Array [
+        2,
+        Array [
+          3,
+          Array [
+            Array [
+              1,
+              [Circular],
+            ],
+            null,
+          ],
+        ],
+      ],
+      Array [
+        1,
+        Array [
+          2,
+          Array [
+            3,
+            Array [
+              [Circular],
+              null,
+            ],
+          ],
+        ],
+      ],
+      Array [
+        Array [
+          1,
+          Array [
+            2,
+            Array [
+              3,
+              [Circular],
+            ],
+          ],
+        ],
+        null,
+      ],
+      Array [
+        3,
+        Array [
+          Array [
+            1,
+            Array [
+              2,
+              [Circular],
+            ],
+          ],
+          null,
+        ],
+      ],
+    },
   },
   "id": Any<String>,
   "name": "programEnvironment",
@@ -2895,17 +3065,734 @@ Object {
       "stream_remove": [Function],
       "stream_remove_all": [Function],
       "stream_reverse": [Function],
+      "stream_tail": [Function],
       "stream_to_list": [Function],
     },
-    "id": "205",
-    "name": "programEnvironment",
-    "tail": Object {
-      "head": Object {
-        ":::pre-declared names::": Symbol(),
-      },
-      "id": "-1",
-      "name": "global",
-      "tail": null,
+    "heap": Heap {
+      "storage": Set {
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      },
+    },
+    "id": "0",
+    "name": "prelude",
+    "tail": Object {
+      "head": Object {
+        ":::pre-declared names::": Symbol(),
+      },
+      "heap": Heap {
+        "storage": null,
+      },
+      "id": "-1",
+      "name": "global",
+      "tail": null,
+    },
+  },
+}
+`;
+
+exports[`CSE Machine calculates correct layout for code sample 2 3`] = `
+Array [
+  ":::pre-declared names::: ",
+  Symbol(),
+  "x1:= ",
+  Array [
+    1,
+    Array [
+      2,
+      Array [
+        3,
+        Array [
+          [Circular],
+          null,
+        ],
+      ],
+    ],
+  ],
+  "x2:= ",
+  Array [
+    3,
+    Array [
+      Array [
+        1,
+        Array [
+          2,
+          [Circular],
+        ],
+      ],
+      null,
+    ],
+  ],
+]
+`;
+
+exports[`CSE Machine calculates correct layout for code sample 3 1`] = `
+Object {
+  "head": Object {
+    ":::pre-declared names::": Symbol(),
+  },
+  "heap": Heap {
+    "storage": null,
+  },
+  "id": Any<String>,
+  "name": "global",
+  "tail": null,
+}
+`;
+
+exports[`CSE Machine calculates correct layout for code sample 3 2`] = `
+Object {
+  "head": Object {
+    "e": Array [
+      Array [
+        3,
+        Array [
+          4,
+          Array [
+            5,
+            null,
+          ],
+        ],
+      ],
+      Array [
+        2,
+        Array [
+          Array [
+            3,
+            Array [
+              4,
+              Array [
+                5,
+                null,
+              ],
+            ],
+          ],
+          null,
+        ],
+      ],
+    ],
+    "f": Array [
+      1,
+      2,
+    ],
+    "g": Array [
+      Array [
+        [Function],
+        Array [
+          4,
+          Array [
+            5,
+            null,
+          ],
+        ],
+      ],
+      Array [
+        2,
+        Array [
+          Array [
+            [Function],
+            Array [
+              4,
+              Array [
+                5,
+                null,
+              ],
+            ],
+          ],
+          null,
+        ],
+      ],
+    ],
+    "y": Array [
+      Array [
+        1,
+        2,
+      ],
+      Array [
+        [Function],
+        Array [
+          1,
+          2,
+        ],
+      ],
+    ],
+  },
+  "heap": Heap {
+    "storage": Set {
+      Array [
+        5,
+        null,
+      ],
+      Array [
+        4,
+        Array [
+          5,
+          null,
+        ],
+      ],
+      Array [
+        3,
+        Array [
+          4,
+          Array [
+            5,
+            null,
+          ],
+        ],
+      ],
+      Array [
+        Array [
+          3,
+          Array [
+            4,
+            Array [
+              5,
+              null,
+            ],
+          ],
+        ],
+        null,
+      ],
+      Array [
+        2,
+        Array [
+          Array [
+            3,
+            Array [
+              4,
+              Array [
+                5,
+                null,
+              ],
+            ],
+          ],
+          null,
+        ],
+      ],
+      Array [
+        Array [
+          3,
+          Array [
+            4,
+            Array [
+              5,
+              null,
+            ],
+          ],
+        ],
+        Array [
+          2,
+          Array [
+            Array [
+              3,
+              Array [
+                4,
+                Array [
+                  5,
+                  null,
+                ],
+              ],
+            ],
+            null,
+          ],
+        ],
+      ],
+      Array [
+        1,
+        2,
+      ],
+      [Function],
+      Array [
+        5,
+        null,
+      ],
+      Array [
+        4,
+        Array [
+          5,
+          null,
+        ],
+      ],
+      Array [
+        [Function],
+        Array [
+          4,
+          Array [
+            5,
+            null,
+          ],
+        ],
+      ],
+      Array [
+        Array [
+          [Function],
+          Array [
+            4,
+            Array [
+              5,
+              null,
+            ],
+          ],
+        ],
+        null,
+      ],
+      Array [
+        2,
+        Array [
+          Array [
+            [Function],
+            Array [
+              4,
+              Array [
+                5,
+                null,
+              ],
+            ],
+          ],
+          null,
+        ],
+      ],
+      Array [
+        Array [
+          [Function],
+          Array [
+            4,
+            Array [
+              5,
+              null,
+            ],
+          ],
+        ],
+        Array [
+          2,
+          Array [
+            Array [
+              [Function],
+              Array [
+                4,
+                Array [
+                  5,
+                  null,
+                ],
+              ],
+            ],
+            null,
+          ],
+        ],
+      ],
+      [Function],
+      Array [
+        1,
+        2,
+      ],
+      Array [
+        [Function],
+        Array [
+          1,
+          2,
+        ],
+      ],
+      Array [
+        Array [
+          1,
+          2,
+        ],
+        Array [
+          [Function],
+          Array [
+            1,
+            2,
+          ],
+        ],
+      ],
+    },
+  },
+  "id": Any<String>,
+  "name": "programEnvironment",
+  "tail": Object {
+    "head": Object {
+      "$accumulate": [Function],
+      "$append": [Function],
+      "$build_list": [Function],
+      "$enum_list": [Function],
+      "$filter": [Function],
+      "$length": [Function],
+      "$list_to_string": [Function],
+      "$map": [Function],
+      "$remove": [Function],
+      "$remove_all": [Function],
+      "$reverse": [Function],
+      "__access_export__": [Function],
+      "__access_named_export__": [Function],
+      "accumulate": [Function],
+      "append": [Function],
+      "build_list": [Function],
+      "build_stream": [Function],
+      "enum_list": [Function],
+      "enum_stream": [Function],
+      "equal": [Function],
+      "eval_stream": [Function],
+      "filter": [Function],
+      "for_each": [Function],
+      "integers_from": [Function],
+      "is_stream": [Function],
+      "length": [Function],
+      "list_ref": [Function],
+      "list_to_stream": [Function],
+      "list_to_string": [Function],
+      "map": [Function],
+      "member": [Function],
+      "remove": [Function],
+      "remove_all": [Function],
+      "reverse": [Function],
+      "stream_append": [Function],
+      "stream_filter": [Function],
+      "stream_for_each": [Function],
+      "stream_length": [Function],
+      "stream_map": [Function],
+      "stream_member": [Function],
+      "stream_ref": [Function],
+      "stream_remove": [Function],
+      "stream_remove_all": [Function],
+      "stream_reverse": [Function],
+      "stream_tail": [Function],
+      "stream_to_list": [Function],
+    },
+    "heap": Heap {
+      "storage": Set {
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      },
+    },
+    "id": "0",
+    "name": "prelude",
+    "tail": Object {
+      "head": Object {
+        ":::pre-declared names::": Symbol(),
+      },
+      "heap": Heap {
+        "storage": null,
+      },
+      "id": "-1",
+      "name": "global",
+      "tail": null,
+    },
+  },
+}
+`;
+
+exports[`CSE Machine calculates correct layout for code sample 3 3`] = `
+Array [
+  ":::pre-declared names::: ",
+  Symbol(),
+  "e:= ",
+  Array [
+    Array [
+      3,
+      Array [
+        4,
+        Array [
+          5,
+          null,
+        ],
+      ],
+    ],
+    Array [
+      2,
+      Array [
+        Array [
+          3,
+          Array [
+            4,
+            Array [
+              5,
+              null,
+            ],
+          ],
+        ],
+        null,
+      ],
+    ],
+  ],
+  "f:= ",
+  Array [
+    1,
+    2,
+  ],
+  "g:= ",
+  Array [
+    Array [
+      [Function],
+      Array [
+        4,
+        Array [
+          5,
+          null,
+        ],
+      ],
+    ],
+    Array [
+      2,
+      Array [
+        Array [
+          [Function],
+          Array [
+            4,
+            Array [
+              5,
+              null,
+            ],
+          ],
+        ],
+        null,
+      ],
+    ],
+  ],
+  "y:= ",
+  Array [
+    Array [
+      1,
+      2,
+    ],
+    Array [
+      [Function],
+      Array [
+        1,
+        2,
+      ],
+    ],
+  ],
+]
+`;
+
+exports[`CSE Machine calculates correct layout for code sample 4 1`] = `
+Object {
+  "head": Object {
+    ":::pre-declared names::": Symbol(),
+  },
+  "heap": Heap {
+    "storage": null,
+  },
+  "id": Any<String>,
+  "name": "global",
+  "tail": null,
+}
+`;
+
+exports[`CSE Machine calculates correct layout for code sample 4 2`] = `
+Object {
+  "head": Object {
+    "f": [Function],
+    "x": 0,
+    "y": 10,
+    "z": [Function],
+  },
+  "heap": Heap {
+    "storage": Set {
+      [Function],
+    },
+  },
+  "id": Any<String>,
+  "name": "programEnvironment",
+  "tail": Object {
+    "head": Object {
+      "$accumulate": [Function],
+      "$append": [Function],
+      "$build_list": [Function],
+      "$enum_list": [Function],
+      "$filter": [Function],
+      "$length": [Function],
+      "$list_to_string": [Function],
+      "$map": [Function],
+      "$remove": [Function],
+      "$remove_all": [Function],
+      "$reverse": [Function],
+      "__access_export__": [Function],
+      "__access_named_export__": [Function],
+      "accumulate": [Function],
+      "append": [Function],
+      "build_list": [Function],
+      "build_stream": [Function],
+      "enum_list": [Function],
+      "enum_stream": [Function],
+      "equal": [Function],
+      "eval_stream": [Function],
+      "filter": [Function],
+      "for_each": [Function],
+      "integers_from": [Function],
+      "is_stream": [Function],
+      "length": [Function],
+      "list_ref": [Function],
+      "list_to_stream": [Function],
+      "list_to_string": [Function],
+      "map": [Function],
+      "member": [Function],
+      "remove": [Function],
+      "remove_all": [Function],
+      "reverse": [Function],
+      "stream_append": [Function],
+      "stream_filter": [Function],
+      "stream_for_each": [Function],
+      "stream_length": [Function],
+      "stream_map": [Function],
+      "stream_member": [Function],
+      "stream_ref": [Function],
+      "stream_remove": [Function],
+      "stream_remove_all": [Function],
+      "stream_reverse": [Function],
+      "stream_tail": [Function],
+      "stream_to_list": [Function],
+    },
+    "heap": Heap {
+      "storage": Set {
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      },
+    },
+    "id": "0",
+    "name": "prelude",
+    "tail": Object {
+      "head": Object {
+        ":::pre-declared names::": Symbol(),
+      },
+      "heap": Heap {
+        "storage": null,
+      },
+      "id": "-1",
+      "name": "global",
+      "tail": null,
     },
   },
 }
@@ -2952,9 +3839,13 @@ Object {
     "type": "CallExpression",
   },
   "head": Object {
-    "255": [Function],
     "x": 11,
   },
+  "heap": Heap {
+    "storage": Set {
+      [Function],
+    },
+  },
   "id": Any<String>,
   "name": "f",
   "tail": Object {
@@ -2964,7 +3855,12 @@ Object {
       "y": 10,
       "z": [Function],
     },
-    "id": "251",
+    "heap": Heap {
+      "storage": Set {
+        [Function],
+      },
+    },
+    "id": "47",
     "name": "programEnvironment",
     "tail": Object {
       "head": Object {
@@ -3012,14 +3908,68 @@ Object {
         "stream_remove": [Function],
         "stream_remove_all": [Function],
         "stream_reverse": [Function],
+        "stream_tail": [Function],
         "stream_to_list": [Function],
       },
-      "id": "205",
-      "name": "programEnvironment",
+      "heap": Heap {
+        "storage": Set {
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+        },
+      },
+      "id": "0",
+      "name": "prelude",
       "tail": Object {
         "head": Object {
           ":::pre-declared names::": Symbol(),
         },
+        "heap": Heap {
+          "storage": null,
+        },
         "id": "-1",
         "name": "global",
         "tail": null,
@@ -3043,8 +3993,6 @@ Array [
   [Function],
   "x: ",
   11,
-  "255:= ",
-  [Function],
 ]
 `;
 
@@ -3055,6 +4003,9 @@ Object {
     "accumulate": [Function],
     "pair": [Function],
   },
+  "heap": Heap {
+    "storage": null,
+  },
   "id": Any<String>,
   "name": "global",
   "tail": null,
@@ -3075,6 +4026,31 @@ Object {
       ],
     ],
   },
+  "heap": Heap {
+    "storage": Set {
+      Array [
+        [Function],
+        null,
+      ],
+      Array [
+        [Function],
+        Array [
+          [Function],
+          null,
+        ],
+      ],
+      Array [
+        1,
+        Array [
+          [Function],
+          Array [
+            [Function],
+            null,
+          ],
+        ],
+      ],
+    },
+  },
   "id": Any<String>,
   "name": "programEnvironment",
   "tail": Object {
@@ -3123,16 +4099,70 @@ Object {
       "stream_remove": [Function],
       "stream_remove_all": [Function],
       "stream_reverse": [Function],
+      "stream_tail": [Function],
       "stream_to_list": [Function],
     },
-    "id": "256",
-    "name": "programEnvironment",
+    "heap": Heap {
+      "storage": Set {
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      },
+    },
+    "id": "0",
+    "name": "prelude",
     "tail": Object {
       "head": Object {
         ":::pre-declared names::": Symbol(),
         "accumulate": [Function],
         "pair": [Function],
       },
+      "heap": Heap {
+        "storage": null,
+      },
       "id": "-1",
       "name": "global",
       "tail": null,
@@ -3168,6 +4198,9 @@ Object {
   "head": Object {
     ":::pre-declared names::": Symbol(),
   },
+  "heap": Heap {
+    "storage": null,
+  },
   "id": Any<String>,
   "name": "global",
   "tail": null,
@@ -3179,6 +4212,188 @@ Object {
   "head": Object {
     "x": Array [],
   },
+  "heap": Heap {
+    "storage": Set {
+      Array [],
+    },
+  },
+  "id": Any<String>,
+  "name": "programEnvironment",
+  "tail": Object {
+    "head": Object {
+      "$accumulate": [Function],
+      "$append": [Function],
+      "$build_list": [Function],
+      "$enum_list": [Function],
+      "$filter": [Function],
+      "$length": [Function],
+      "$list_to_string": [Function],
+      "$map": [Function],
+      "$remove": [Function],
+      "$remove_all": [Function],
+      "$reverse": [Function],
+      "__access_export__": [Function],
+      "__access_named_export__": [Function],
+      "accumulate": [Function],
+      "append": [Function],
+      "build_list": [Function],
+      "build_stream": [Function],
+      "enum_list": [Function],
+      "enum_stream": [Function],
+      "equal": [Function],
+      "eval_stream": [Function],
+      "filter": [Function],
+      "for_each": [Function],
+      "integers_from": [Function],
+      "is_stream": [Function],
+      "length": [Function],
+      "list_ref": [Function],
+      "list_to_stream": [Function],
+      "list_to_string": [Function],
+      "map": [Function],
+      "member": [Function],
+      "remove": [Function],
+      "remove_all": [Function],
+      "reverse": [Function],
+      "stream_append": [Function],
+      "stream_filter": [Function],
+      "stream_for_each": [Function],
+      "stream_length": [Function],
+      "stream_map": [Function],
+      "stream_member": [Function],
+      "stream_ref": [Function],
+      "stream_remove": [Function],
+      "stream_remove_all": [Function],
+      "stream_reverse": [Function],
+      "stream_tail": [Function],
+      "stream_to_list": [Function],
+    },
+    "heap": Heap {
+      "storage": Set {
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      },
+    },
+    "id": "0",
+    "name": "prelude",
+    "tail": Object {
+      "head": Object {
+        ":::pre-declared names::": Symbol(),
+      },
+      "heap": Heap {
+        "storage": null,
+      },
+      "id": "-1",
+      "name": "global",
+      "tail": null,
+    },
+  },
+}
+`;
+
+exports[`CSE Machine calculates correct layout for code sample 6 3`] = `
+Array [
+  ":::pre-declared names::: ",
+  Symbol(),
+  "x:= ",
+  Array [],
+]
+`;
+
+exports[`CSE Machine calculates correct layout for code sample 7 1`] = `
+Object {
+  "head": Object {
+    ":::pre-declared names::": Symbol(),
+  },
+  "heap": Heap {
+    "storage": null,
+  },
+  "id": Any<String>,
+  "name": "global",
+  "tail": null,
+}
+`;
+
+exports[`CSE Machine calculates correct layout for code sample 7 2`] = `
+Object {
+  "head": Object {
+    "eval_stream": [Function],
+    "x": 1,
+    "y": Array [
+      [Circular],
+      Array [
+        1,
+        [Circular],
+        [Circular],
+      ],
+    ],
+  },
+  "heap": Heap {
+    "storage": Set {
+      Array [],
+      Array [
+        1,
+        Array [
+          [Circular],
+          [Circular],
+        ],
+        [Circular],
+      ],
+      Array [
+        [Circular],
+        Array [
+          1,
+          [Circular],
+          [Circular],
+        ],
+      ],
+      [Function],
+    },
+  },
   "id": Any<String>,
   "name": "programEnvironment",
   "tail": Object {
@@ -3227,14 +4442,68 @@ Object {
       "stream_remove": [Function],
       "stream_remove_all": [Function],
       "stream_reverse": [Function],
+      "stream_tail": [Function],
       "stream_to_list": [Function],
     },
-    "id": "303",
-    "name": "programEnvironment",
+    "heap": Heap {
+      "storage": Set {
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      },
+    },
+    "id": "0",
+    "name": "prelude",
     "tail": Object {
       "head": Object {
         ":::pre-declared names::": Symbol(),
       },
+      "heap": Heap {
+        "storage": null,
+      },
       "id": "-1",
       "name": "global",
       "tail": null,
@@ -3243,44 +4512,60 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 6 3`] = `
-Array [
-  ":::pre-declared names::: ",
-  Symbol(),
-  "x:= ",
-  Array [],
-]
-`;
-
-exports[`CSE Machine calculates correct layout for code sample 7 1`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 3`] = `
 Object {
-  "head": Object {
-    "411": [Function],
-    ":::pre-declared names::": Symbol(),
-    "integers_from": [Function],
+  "callExpression": Object {
+    "arguments": Array [
+      Object {
+        "loc": undefined,
+        "type": "Literal",
+        "value": 1,
+      },
+    ],
+    "callee": Node {
+      "end": 418,
+      "loc": SourceLocation {
+        "end": Position {
+          "column": 29,
+          "line": 16,
+        },
+        "start": Position {
+          "column": 16,
+          "line": 16,
+        },
+      },
+      "name": "integers_from",
+      "start": 405,
+      "type": "Identifier",
+    },
+    "end": 421,
+    "loc": SourceLocation {
+      "end": Position {
+        "column": 32,
+        "line": 16,
+      },
+      "start": Position {
+        "column": 16,
+        "line": 16,
+      },
+    },
+    "start": 405,
+    "type": "CallExpression",
   },
-  "id": Any<String>,
-  "name": "global",
-  "tail": null,
-}
-`;
-
-exports[`CSE Machine calculates correct layout for code sample 7 2`] = `
-Object {
   "head": Object {
-    "eval_stream": [Function],
-    "x": 1,
-    "y": Array [
-      [Circular],
+    "n": 1,
+  },
+  "heap": Heap {
+    "storage": Set {
+      [Function],
       Array [
         1,
-        [Circular],
-        [Circular],
+        [Function],
       ],
-    ],
+    },
   },
   "id": Any<String>,
-  "name": "programEnvironment",
+  "name": "integers_from",
   "tail": Object {
     "head": Object {
       "$accumulate": [Function],
@@ -3294,7 +4579,6 @@ Object {
       "$remove": [Function],
       "$remove_all": [Function],
       "$reverse": [Function],
-      "411": [Function],
       "__access_export__": [Function],
       "__access_named_export__": [Function],
       "accumulate": [Function],
@@ -3328,15 +4612,67 @@ Object {
       "stream_remove": [Function],
       "stream_remove_all": [Function],
       "stream_reverse": [Function],
+      "stream_tail": [Function],
       "stream_to_list": [Function],
     },
-    "id": "350",
-    "name": "programEnvironment",
+    "heap": Heap {
+      "storage": Set {
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      },
+    },
+    "id": "0",
+    "name": "prelude",
     "tail": Object {
       "head": Object {
-        "411": [Function],
         ":::pre-declared names::": Symbol(),
-        "integers_from": [Function],
+      },
+      "heap": Heap {
+        "storage": null,
       },
       "id": "-1",
       "name": "global",
@@ -3346,53 +4682,60 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 3`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 4`] = `
 Object {
   "callExpression": Object {
     "arguments": Array [
       Object {
         "loc": undefined,
         "type": "Literal",
-        "value": 1,
+        "value": Array [
+          1,
+          [Function],
+        ],
       },
     ],
     "callee": Node {
-      "end": 418,
+      "end": 317,
       "loc": SourceLocation {
         "end": Position {
-          "column": 29,
-          "line": 16,
+          "column": 73,
+          "line": 12,
         },
         "start": Position {
-          "column": 16,
-          "line": 16,
+          "column": 62,
+          "line": 12,
         },
       },
-      "name": "integers_from",
-      "start": 405,
+      "name": "stream_tail",
+      "start": 306,
       "type": "Identifier",
     },
-    "end": 421,
+    "end": 320,
     "loc": SourceLocation {
       "end": Position {
-        "column": 32,
-        "line": 16,
+        "column": 76,
+        "line": 12,
       },
       "start": Position {
-        "column": 16,
-        "line": 16,
+        "column": 62,
+        "line": 12,
       },
     },
-    "start": 405,
+    "start": 306,
     "type": "CallExpression",
   },
   "head": Object {
-    "414": [Function],
-    "422": [Function],
-    "n": 1,
+    "xs": Array [
+      1,
+      [Function],
+    ],
+  },
+  "heap": Heap {
+    "storage": null,
   },
   "id": Any<String>,
-  "name": "integers_from",
+  "name": "stream_tail",
   "tail": Object {
     "head": Object {
       "$accumulate": [Function],
@@ -3406,7 +4749,6 @@ Object {
       "$remove": [Function],
       "$remove_all": [Function],
       "$reverse": [Function],
-      "411": [Function],
       "__access_export__": [Function],
       "__access_named_export__": [Function],
       "accumulate": [Function],
@@ -3440,15 +4782,67 @@ Object {
       "stream_remove": [Function],
       "stream_remove_all": [Function],
       "stream_reverse": [Function],
+      "stream_tail": [Function],
       "stream_to_list": [Function],
     },
-    "id": "350",
-    "name": "programEnvironment",
+    "heap": Heap {
+      "storage": Set {
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      },
+    },
+    "id": "0",
+    "name": "prelude",
     "tail": Object {
       "head": Object {
-        "411": [Function],
         ":::pre-declared names::": Symbol(),
-        "integers_from": [Function],
+      },
+      "heap": Heap {
+        "storage": null,
       },
       "id": "-1",
       "name": "global",
@@ -3458,7 +4852,7 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 4`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 5`] = `
 Object {
   "callExpression": Object {
     "arguments": Array [
@@ -3469,41 +4863,49 @@ Object {
       },
     ],
     "callee": Node {
-      "end": 13321,
+      "end": 13849,
       "loc": SourceLocation {
         "end": Position {
           "column": 23,
-          "line": 450,
+          "line": 470,
         },
         "start": Position {
           "column": 10,
-          "line": 450,
+          "line": 470,
         },
       },
       "name": "integers_from",
-      "start": 13308,
+      "start": 13836,
       "type": "Identifier",
     },
-    "end": 13328,
+    "end": 13856,
     "loc": SourceLocation {
       "end": Position {
         "column": 30,
-        "line": 450,
+        "line": 470,
       },
       "start": Position {
         "column": 10,
-        "line": 450,
+        "line": 470,
       },
     },
-    "start": 13308,
-    "type": "CallExpression",
-  },
-  "head": Object {
-    "426": [Function],
-    "n": 2,
+    "start": 13836,
+    "type": "CallExpression",
+  },
+  "head": Object {
+    "n": 2,
+  },
+  "heap": Heap {
+    "storage": Set {
+      [Function],
+      Array [
+        2,
+        [Function],
+      ],
+    },
   },
   "id": Any<String>,
-  "name": "n => ...",
+  "name": "integers_from",
   "tail": Object {
     "head": Object {
       "$accumulate": [Function],
@@ -3517,7 +4919,6 @@ Object {
       "$remove": [Function],
       "$remove_all": [Function],
       "$reverse": [Function],
-      "411": [Function],
       "__access_export__": [Function],
       "__access_named_export__": [Function],
       "accumulate": [Function],
@@ -3551,15 +4952,67 @@ Object {
       "stream_remove": [Function],
       "stream_remove_all": [Function],
       "stream_reverse": [Function],
+      "stream_tail": [Function],
       "stream_to_list": [Function],
     },
-    "id": "350",
-    "name": "programEnvironment",
+    "heap": Heap {
+      "storage": Set {
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+        [Function],
+      },
+    },
+    "id": "0",
+    "name": "prelude",
     "tail": Object {
       "head": Object {
-        "411": [Function],
         ":::pre-declared names::": Symbol(),
-        "integers_from": [Function],
+      },
+      "heap": Heap {
+        "storage": null,
       },
       "id": "-1",
       "name": "global",
@@ -3569,13 +5022,230 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 5`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 6`] = `
+Object {
+  "head": Object {
+    "i": 5,
+  },
+  "heap": Heap {
+    "storage": null,
+  },
+  "id": Any<String>,
+  "name": "blockEnvironment",
+  "tail": Object {
+    "head": Object {
+      "eval_stream": [Function],
+      "x": 1,
+      "y": Array [
+        [Circular],
+        Array [
+          1,
+          [Circular],
+          [Circular],
+        ],
+      ],
+    },
+    "heap": Heap {
+      "storage": Set {
+        Array [],
+        Array [
+          1,
+          Array [
+            [Circular],
+            [Circular],
+          ],
+          [Circular],
+        ],
+        Array [
+          [Circular],
+          Array [
+            1,
+            [Circular],
+            [Circular],
+          ],
+        ],
+        [Function],
+      },
+    },
+    "id": "47",
+    "name": "programEnvironment",
+    "tail": Object {
+      "head": Object {
+        "$accumulate": [Function],
+        "$append": [Function],
+        "$build_list": [Function],
+        "$enum_list": [Function],
+        "$filter": [Function],
+        "$length": [Function],
+        "$list_to_string": [Function],
+        "$map": [Function],
+        "$remove": [Function],
+        "$remove_all": [Function],
+        "$reverse": [Function],
+        "__access_export__": [Function],
+        "__access_named_export__": [Function],
+        "accumulate": [Function],
+        "append": [Function],
+        "build_list": [Function],
+        "build_stream": [Function],
+        "enum_list": [Function],
+        "enum_stream": [Function],
+        "equal": [Function],
+        "eval_stream": [Function],
+        "filter": [Function],
+        "for_each": [Function],
+        "integers_from": [Function],
+        "is_stream": [Function],
+        "length": [Function],
+        "list_ref": [Function],
+        "list_to_stream": [Function],
+        "list_to_string": [Function],
+        "map": [Function],
+        "member": [Function],
+        "remove": [Function],
+        "remove_all": [Function],
+        "reverse": [Function],
+        "stream_append": [Function],
+        "stream_filter": [Function],
+        "stream_for_each": [Function],
+        "stream_length": [Function],
+        "stream_map": [Function],
+        "stream_member": [Function],
+        "stream_ref": [Function],
+        "stream_remove": [Function],
+        "stream_remove_all": [Function],
+        "stream_reverse": [Function],
+        "stream_tail": [Function],
+        "stream_to_list": [Function],
+      },
+      "heap": Heap {
+        "storage": Set {
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+        },
+      },
+      "id": "0",
+      "name": "prelude",
+      "tail": Object {
+        "head": Object {
+          ":::pre-declared names::": Symbol(),
+        },
+        "heap": Heap {
+          "storage": null,
+        },
+        "id": "-1",
+        "name": "global",
+        "tail": null,
+      },
+    },
+  },
+}
+`;
+
+exports[`CSE Machine calculates correct layout for code sample 7 7`] = `
 Object {
+  "callExpression": Object {
+    "arguments": Array [
+      Object {
+        "loc": undefined,
+        "type": "Literal",
+        "value": Array [
+          1,
+          [Function],
+        ],
+      },
+      Object {
+        "loc": undefined,
+        "type": "Literal",
+        "value": 2,
+      },
+    ],
+    "callee": Node {
+      "end": 404,
+      "loc": SourceLocation {
+        "end": Position {
+          "column": 15,
+          "line": 16,
+        },
+        "start": Position {
+          "column": 4,
+          "line": 16,
+        },
+      },
+      "name": "eval_stream",
+      "start": 393,
+      "type": "Identifier",
+    },
+    "end": 425,
+    "loc": SourceLocation {
+      "end": Position {
+        "column": 36,
+        "line": 16,
+      },
+      "start": Position {
+        "column": 4,
+        "line": 16,
+      },
+    },
+    "start": 393,
+    "type": "CallExpression",
+  },
   "head": Object {
-    "i": 5,
+    "n": 2,
+    "s": Array [
+      1,
+      [Function],
+    ],
+  },
+  "heap": Heap {
+    "storage": null,
   },
   "id": Any<String>,
-  "name": "blockEnvironment",
+  "name": "eval_stream",
   "tail": Object {
     "head": Object {
       "eval_stream": [Function],
@@ -3589,7 +5259,29 @@ Object {
         ],
       ],
     },
-    "id": "396",
+    "heap": Heap {
+      "storage": Set {
+        Array [],
+        Array [
+          1,
+          Array [
+            [Circular],
+            [Circular],
+          ],
+          [Circular],
+        ],
+        Array [
+          [Circular],
+          Array [
+            1,
+            [Circular],
+            [Circular],
+          ],
+        ],
+        [Function],
+      },
+    },
+    "id": "47",
     "name": "programEnvironment",
     "tail": Object {
       "head": Object {
@@ -3604,7 +5296,6 @@ Object {
         "$remove": [Function],
         "$remove_all": [Function],
         "$reverse": [Function],
-        "411": [Function],
         "__access_export__": [Function],
         "__access_named_export__": [Function],
         "accumulate": [Function],
@@ -3638,15 +5329,67 @@ Object {
         "stream_remove": [Function],
         "stream_remove_all": [Function],
         "stream_reverse": [Function],
+        "stream_tail": [Function],
         "stream_to_list": [Function],
       },
-      "id": "350",
-      "name": "programEnvironment",
+      "heap": Heap {
+        "storage": Set {
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+        },
+      },
+      "id": "0",
+      "name": "prelude",
       "tail": Object {
         "head": Object {
-          "411": [Function],
           ":::pre-declared names::": Symbol(),
-          "integers_from": [Function],
+        },
+        "heap": Heap {
+          "storage": null,
         },
         "id": "-1",
         "name": "global",
@@ -3657,78 +5400,71 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 6`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 8`] = `
 Object {
-  "callExpression": Object {
-    "arguments": Array [
-      Object {
-        "loc": undefined,
-        "type": "Literal",
-        "value": Array [
-          1,
-          [Function],
-        ],
-      },
-      Object {
-        "loc": undefined,
-        "type": "Literal",
-        "value": 2,
+  "head": Object {
+    "the_tail": [Function],
+  },
+  "heap": Heap {
+    "storage": Set {
+      [Function],
+    },
+  },
+  "id": Any<String>,
+  "name": "blockEnvironment",
+  "tail": Object {
+    "callExpression": Object {
+      "arguments": Array [
+        Object {
+          "loc": undefined,
+          "type": "Literal",
+          "value": Array [
+            1,
+            [Function],
+          ],
+        },
+      ],
+      "callee": Node {
+        "end": 317,
+        "loc": SourceLocation {
+          "end": Position {
+            "column": 73,
+            "line": 12,
+          },
+          "start": Position {
+            "column": 62,
+            "line": 12,
+          },
+        },
+        "name": "stream_tail",
+        "start": 306,
+        "type": "Identifier",
       },
-    ],
-    "callee": Node {
-      "end": 404,
+      "end": 320,
       "loc": SourceLocation {
         "end": Position {
-          "column": 15,
-          "line": 16,
+          "column": 76,
+          "line": 12,
         },
         "start": Position {
-          "column": 4,
-          "line": 16,
+          "column": 62,
+          "line": 12,
         },
       },
-      "name": "eval_stream",
-      "start": 393,
-      "type": "Identifier",
-    },
-    "end": 425,
-    "loc": SourceLocation {
-      "end": Position {
-        "column": 36,
-        "line": 16,
-      },
-      "start": Position {
-        "column": 4,
-        "line": 16,
-      },
+      "start": 306,
+      "type": "CallExpression",
     },
-    "start": 393,
-    "type": "CallExpression",
-  },
-  "head": Object {
-    "n": 2,
-    "s": Array [
-      1,
-      [Function],
-    ],
-  },
-  "id": Any<String>,
-  "name": "eval_stream",
-  "tail": Object {
     "head": Object {
-      "eval_stream": [Function],
-      "x": 1,
-      "y": Array [
-        [Circular],
-        Array [
-          1,
-          [Circular],
-          [Circular],
-        ],
+      "xs": Array [
+        1,
+        [Function],
       ],
     },
-    "id": "396",
-    "name": "programEnvironment",
+    "heap": Heap {
+      "storage": null,
+    },
+    "id": "78",
+    "name": "stream_tail",
     "tail": Object {
       "head": Object {
         "$accumulate": [Function],
@@ -3742,7 +5478,6 @@ Object {
         "$remove": [Function],
         "$remove_all": [Function],
         "$reverse": [Function],
-        "411": [Function],
         "__access_export__": [Function],
         "__access_named_export__": [Function],
         "accumulate": [Function],
@@ -3776,15 +5511,67 @@ Object {
         "stream_remove": [Function],
         "stream_remove_all": [Function],
         "stream_reverse": [Function],
+        "stream_tail": [Function],
         "stream_to_list": [Function],
       },
-      "id": "350",
-      "name": "programEnvironment",
+      "heap": Heap {
+        "storage": Set {
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+          [Function],
+        },
+      },
+      "id": "0",
+      "name": "prelude",
       "tail": Object {
         "head": Object {
-          "411": [Function],
           ":::pre-declared names::": Symbol(),
-          "integers_from": [Function],
+        },
+        "heap": Heap {
+          "storage": null,
         },
         "id": "-1",
         "name": "global",
@@ -3795,18 +5582,24 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 7`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 9`] = `
 Object {
   "head": Object {
     "_copy_of_i": 1,
   },
+  "heap": Heap {
+    "storage": null,
+  },
   "id": Any<String>,
   "name": "blockEnvironment",
   "tail": Object {
     "head": Object {
       "i": 5,
     },
-    "id": "397",
+    "heap": Heap {
+      "storage": null,
+    },
+    "id": "49",
     "name": "blockEnvironment",
     "tail": Object {
       "head": Object {
@@ -3821,7 +5614,29 @@ Object {
           ],
         ],
       },
-      "id": "396",
+      "heap": Heap {
+        "storage": Set {
+          Array [],
+          Array [
+            1,
+            Array [
+              [Circular],
+              [Circular],
+            ],
+            [Circular],
+          ],
+          Array [
+            [Circular],
+            Array [
+              1,
+              [Circular],
+              [Circular],
+            ],
+          ],
+          [Function],
+        },
+      },
+      "id": "47",
       "name": "programEnvironment",
       "tail": Object {
         "head": Object {
@@ -3836,7 +5651,6 @@ Object {
           "$remove": [Function],
           "$remove_all": [Function],
           "$reverse": [Function],
-          "411": [Function],
           "__access_export__": [Function],
           "__access_named_export__": [Function],
           "accumulate": [Function],
@@ -3870,15 +5684,67 @@ Object {
           "stream_remove": [Function],
           "stream_remove_all": [Function],
           "stream_reverse": [Function],
+          "stream_tail": [Function],
           "stream_to_list": [Function],
         },
-        "id": "350",
-        "name": "programEnvironment",
+        "heap": Heap {
+          "storage": Set {
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+          },
+        },
+        "id": "0",
+        "name": "prelude",
         "tail": Object {
           "head": Object {
-            "411": [Function],
             ":::pre-declared names::": Symbol(),
-            "integers_from": [Function],
+          },
+          "heap": Heap {
+            "storage": null,
           },
           "id": "-1",
           "name": "global",
@@ -3890,18 +5756,24 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 8`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 10`] = `
 Object {
   "head": Object {
     "_copy_of_i": 2,
   },
+  "heap": Heap {
+    "storage": null,
+  },
   "id": Any<String>,
   "name": "blockEnvironment",
   "tail": Object {
     "head": Object {
       "i": 5,
     },
-    "id": "397",
+    "heap": Heap {
+      "storage": null,
+    },
+    "id": "49",
     "name": "blockEnvironment",
     "tail": Object {
       "head": Object {
@@ -3916,7 +5788,29 @@ Object {
           ],
         ],
       },
-      "id": "396",
+      "heap": Heap {
+        "storage": Set {
+          Array [],
+          Array [
+            1,
+            Array [
+              [Circular],
+              [Circular],
+            ],
+            [Circular],
+          ],
+          Array [
+            [Circular],
+            Array [
+              1,
+              [Circular],
+              [Circular],
+            ],
+          ],
+          [Function],
+        },
+      },
+      "id": "47",
       "name": "programEnvironment",
       "tail": Object {
         "head": Object {
@@ -3931,7 +5825,6 @@ Object {
           "$remove": [Function],
           "$remove_all": [Function],
           "$reverse": [Function],
-          "411": [Function],
           "__access_export__": [Function],
           "__access_named_export__": [Function],
           "accumulate": [Function],
@@ -3965,15 +5858,67 @@ Object {
           "stream_remove": [Function],
           "stream_remove_all": [Function],
           "stream_reverse": [Function],
+          "stream_tail": [Function],
           "stream_to_list": [Function],
         },
-        "id": "350",
-        "name": "programEnvironment",
+        "heap": Heap {
+          "storage": Set {
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+          },
+        },
+        "id": "0",
+        "name": "prelude",
         "tail": Object {
           "head": Object {
-            "411": [Function],
             ":::pre-declared names::": Symbol(),
-            "integers_from": [Function],
+          },
+          "heap": Heap {
+            "storage": null,
           },
           "id": "-1",
           "name": "global",
@@ -3985,18 +5930,24 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 9`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 11`] = `
 Object {
   "head": Object {
     "_copy_of_i": 3,
   },
+  "heap": Heap {
+    "storage": null,
+  },
   "id": Any<String>,
   "name": "blockEnvironment",
   "tail": Object {
     "head": Object {
       "i": 5,
     },
-    "id": "397",
+    "heap": Heap {
+      "storage": null,
+    },
+    "id": "49",
     "name": "blockEnvironment",
     "tail": Object {
       "head": Object {
@@ -4011,7 +5962,29 @@ Object {
           ],
         ],
       },
-      "id": "396",
+      "heap": Heap {
+        "storage": Set {
+          Array [],
+          Array [
+            1,
+            Array [
+              [Circular],
+              [Circular],
+            ],
+            [Circular],
+          ],
+          Array [
+            [Circular],
+            Array [
+              1,
+              [Circular],
+              [Circular],
+            ],
+          ],
+          [Function],
+        },
+      },
+      "id": "47",
       "name": "programEnvironment",
       "tail": Object {
         "head": Object {
@@ -4026,7 +5999,6 @@ Object {
           "$remove": [Function],
           "$remove_all": [Function],
           "$reverse": [Function],
-          "411": [Function],
           "__access_export__": [Function],
           "__access_named_export__": [Function],
           "accumulate": [Function],
@@ -4060,15 +6032,67 @@ Object {
           "stream_remove": [Function],
           "stream_remove_all": [Function],
           "stream_reverse": [Function],
+          "stream_tail": [Function],
           "stream_to_list": [Function],
         },
-        "id": "350",
-        "name": "programEnvironment",
+        "heap": Heap {
+          "storage": Set {
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+          },
+        },
+        "id": "0",
+        "name": "prelude",
         "tail": Object {
           "head": Object {
-            "411": [Function],
             ":::pre-declared names::": Symbol(),
-            "integers_from": [Function],
+          },
+          "heap": Heap {
+            "storage": null,
           },
           "id": "-1",
           "name": "global",
@@ -4080,18 +6104,24 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 10`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 12`] = `
 Object {
   "head": Object {
     "_copy_of_i": 4,
   },
+  "heap": Heap {
+    "storage": null,
+  },
   "id": Any<String>,
   "name": "blockEnvironment",
   "tail": Object {
     "head": Object {
       "i": 5,
     },
-    "id": "397",
+    "heap": Heap {
+      "storage": null,
+    },
+    "id": "49",
     "name": "blockEnvironment",
     "tail": Object {
       "head": Object {
@@ -4106,7 +6136,29 @@ Object {
           ],
         ],
       },
-      "id": "396",
+      "heap": Heap {
+        "storage": Set {
+          Array [],
+          Array [
+            1,
+            Array [
+              [Circular],
+              [Circular],
+            ],
+            [Circular],
+          ],
+          Array [
+            [Circular],
+            Array [
+              1,
+              [Circular],
+              [Circular],
+            ],
+          ],
+          [Function],
+        },
+      },
+      "id": "47",
       "name": "programEnvironment",
       "tail": Object {
         "head": Object {
@@ -4121,7 +6173,6 @@ Object {
           "$remove": [Function],
           "$remove_all": [Function],
           "$reverse": [Function],
-          "411": [Function],
           "__access_export__": [Function],
           "__access_named_export__": [Function],
           "accumulate": [Function],
@@ -4155,15 +6206,67 @@ Object {
           "stream_remove": [Function],
           "stream_remove_all": [Function],
           "stream_reverse": [Function],
+          "stream_tail": [Function],
           "stream_to_list": [Function],
         },
-        "id": "350",
-        "name": "programEnvironment",
+        "heap": Heap {
+          "storage": Set {
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+          },
+        },
+        "id": "0",
+        "name": "prelude",
         "tail": Object {
           "head": Object {
-            "411": [Function],
             ":::pre-declared names::": Symbol(),
-            "integers_from": [Function],
+          },
+          "heap": Heap {
+            "storage": null,
           },
           "id": "-1",
           "name": "global",
@@ -4175,11 +6278,16 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 11`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 13`] = `
 Object {
   "head": Object {
     "es": [Function],
   },
+  "heap": Heap {
+    "storage": Set {
+      [Function],
+    },
+  },
   "id": Any<String>,
   "name": "blockEnvironment",
   "tail": Object {
@@ -4236,7 +6344,10 @@ Object {
         [Function],
       ],
     },
-    "id": "415",
+    "heap": Heap {
+      "storage": null,
+    },
+    "id": "72",
     "name": "eval_stream",
     "tail": Object {
       "head": Object {
@@ -4251,7 +6362,29 @@ Object {
           ],
         ],
       },
-      "id": "396",
+      "heap": Heap {
+        "storage": Set {
+          Array [],
+          Array [
+            1,
+            Array [
+              [Circular],
+              [Circular],
+            ],
+            [Circular],
+          ],
+          Array [
+            [Circular],
+            Array [
+              1,
+              [Circular],
+              [Circular],
+            ],
+          ],
+          [Function],
+        },
+      },
+      "id": "47",
       "name": "programEnvironment",
       "tail": Object {
         "head": Object {
@@ -4266,7 +6399,6 @@ Object {
           "$remove": [Function],
           "$remove_all": [Function],
           "$reverse": [Function],
-          "411": [Function],
           "__access_export__": [Function],
           "__access_named_export__": [Function],
           "accumulate": [Function],
@@ -4300,15 +6432,67 @@ Object {
           "stream_remove": [Function],
           "stream_remove_all": [Function],
           "stream_reverse": [Function],
+          "stream_tail": [Function],
           "stream_to_list": [Function],
         },
-        "id": "350",
-        "name": "programEnvironment",
+        "heap": Heap {
+          "storage": Set {
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+          },
+        },
+        "id": "0",
+        "name": "prelude",
         "tail": Object {
           "head": Object {
-            "411": [Function],
             ":::pre-declared names::": Symbol(),
-            "integers_from": [Function],
+          },
+          "heap": Heap {
+            "storage": null,
           },
           "id": "-1",
           "name": "global",
@@ -4320,24 +6504,33 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 12`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 14`] = `
 Object {
   "head": Object {
     "i": 1,
   },
+  "heap": Heap {
+    "storage": null,
+  },
   "id": Any<String>,
   "name": "blockEnvironment",
   "tail": Object {
     "head": Object {
       "_copy_of_i": 1,
     },
-    "id": "398",
+    "heap": Heap {
+      "storage": null,
+    },
+    "id": "50",
     "name": "blockEnvironment",
     "tail": Object {
       "head": Object {
         "i": 5,
       },
-      "id": "397",
+      "heap": Heap {
+        "storage": null,
+      },
+      "id": "49",
       "name": "blockEnvironment",
       "tail": Object {
         "head": Object {
@@ -4352,7 +6545,29 @@ Object {
             ],
           ],
         },
-        "id": "396",
+        "heap": Heap {
+          "storage": Set {
+            Array [],
+            Array [
+              1,
+              Array [
+                [Circular],
+                [Circular],
+              ],
+              [Circular],
+            ],
+            Array [
+              [Circular],
+              Array [
+                1,
+                [Circular],
+                [Circular],
+              ],
+            ],
+            [Function],
+          },
+        },
+        "id": "47",
         "name": "programEnvironment",
         "tail": Object {
           "head": Object {
@@ -4367,7 +6582,6 @@ Object {
             "$remove": [Function],
             "$remove_all": [Function],
             "$reverse": [Function],
-            "411": [Function],
             "__access_export__": [Function],
             "__access_named_export__": [Function],
             "accumulate": [Function],
@@ -4401,15 +6615,67 @@ Object {
             "stream_remove": [Function],
             "stream_remove_all": [Function],
             "stream_reverse": [Function],
+            "stream_tail": [Function],
             "stream_to_list": [Function],
           },
-          "id": "350",
-          "name": "programEnvironment",
+          "heap": Heap {
+            "storage": Set {
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+            },
+          },
+          "id": "0",
+          "name": "prelude",
           "tail": Object {
             "head": Object {
-              "411": [Function],
               ":::pre-declared names::": Symbol(),
-              "integers_from": [Function],
+            },
+            "heap": Heap {
+              "storage": null,
             },
             "id": "-1",
             "name": "global",
@@ -4422,24 +6688,33 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 13`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 15`] = `
 Object {
   "head": Object {
     "i": 2,
   },
+  "heap": Heap {
+    "storage": null,
+  },
   "id": Any<String>,
   "name": "blockEnvironment",
   "tail": Object {
     "head": Object {
       "_copy_of_i": 2,
     },
-    "id": "401",
+    "heap": Heap {
+      "storage": null,
+    },
+    "id": "54",
     "name": "blockEnvironment",
     "tail": Object {
       "head": Object {
         "i": 5,
       },
-      "id": "397",
+      "heap": Heap {
+        "storage": null,
+      },
+      "id": "49",
       "name": "blockEnvironment",
       "tail": Object {
         "head": Object {
@@ -4454,7 +6729,29 @@ Object {
             ],
           ],
         },
-        "id": "396",
+        "heap": Heap {
+          "storage": Set {
+            Array [],
+            Array [
+              1,
+              Array [
+                [Circular],
+                [Circular],
+              ],
+              [Circular],
+            ],
+            Array [
+              [Circular],
+              Array [
+                1,
+                [Circular],
+                [Circular],
+              ],
+            ],
+            [Function],
+          },
+        },
+        "id": "47",
         "name": "programEnvironment",
         "tail": Object {
           "head": Object {
@@ -4469,7 +6766,6 @@ Object {
             "$remove": [Function],
             "$remove_all": [Function],
             "$reverse": [Function],
-            "411": [Function],
             "__access_export__": [Function],
             "__access_named_export__": [Function],
             "accumulate": [Function],
@@ -4503,15 +6799,67 @@ Object {
             "stream_remove": [Function],
             "stream_remove_all": [Function],
             "stream_reverse": [Function],
+            "stream_tail": [Function],
             "stream_to_list": [Function],
           },
-          "id": "350",
-          "name": "programEnvironment",
+          "heap": Heap {
+            "storage": Set {
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+            },
+          },
+          "id": "0",
+          "name": "prelude",
           "tail": Object {
             "head": Object {
-              "411": [Function],
               ":::pre-declared names::": Symbol(),
-              "integers_from": [Function],
+            },
+            "heap": Heap {
+              "storage": null,
             },
             "id": "-1",
             "name": "global",
@@ -4524,24 +6872,33 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 14`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 16`] = `
 Object {
   "head": Object {
     "i": 3,
   },
+  "heap": Heap {
+    "storage": null,
+  },
   "id": Any<String>,
   "name": "blockEnvironment",
   "tail": Object {
     "head": Object {
       "_copy_of_i": 3,
     },
-    "id": "404",
+    "heap": Heap {
+      "storage": null,
+    },
+    "id": "58",
     "name": "blockEnvironment",
     "tail": Object {
       "head": Object {
         "i": 5,
       },
-      "id": "397",
+      "heap": Heap {
+        "storage": null,
+      },
+      "id": "49",
       "name": "blockEnvironment",
       "tail": Object {
         "head": Object {
@@ -4554,9 +6911,31 @@ Object {
               [Circular],
               [Circular],
             ],
-          ],
+          ],
+        },
+        "heap": Heap {
+          "storage": Set {
+            Array [],
+            Array [
+              1,
+              Array [
+                [Circular],
+                [Circular],
+              ],
+              [Circular],
+            ],
+            Array [
+              [Circular],
+              Array [
+                1,
+                [Circular],
+                [Circular],
+              ],
+            ],
+            [Function],
+          },
         },
-        "id": "396",
+        "id": "47",
         "name": "programEnvironment",
         "tail": Object {
           "head": Object {
@@ -4571,7 +6950,6 @@ Object {
             "$remove": [Function],
             "$remove_all": [Function],
             "$reverse": [Function],
-            "411": [Function],
             "__access_export__": [Function],
             "__access_named_export__": [Function],
             "accumulate": [Function],
@@ -4605,15 +6983,67 @@ Object {
             "stream_remove": [Function],
             "stream_remove_all": [Function],
             "stream_reverse": [Function],
+            "stream_tail": [Function],
             "stream_to_list": [Function],
           },
-          "id": "350",
-          "name": "programEnvironment",
+          "heap": Heap {
+            "storage": Set {
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+            },
+          },
+          "id": "0",
+          "name": "prelude",
           "tail": Object {
             "head": Object {
-              "411": [Function],
               ":::pre-declared names::": Symbol(),
-              "integers_from": [Function],
+            },
+            "heap": Heap {
+              "storage": null,
             },
             "id": "-1",
             "name": "global",
@@ -4626,24 +7056,33 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 15`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 17`] = `
 Object {
   "head": Object {
     "i": 4,
   },
+  "heap": Heap {
+    "storage": null,
+  },
   "id": Any<String>,
   "name": "blockEnvironment",
   "tail": Object {
     "head": Object {
       "_copy_of_i": 4,
     },
-    "id": "407",
+    "heap": Heap {
+      "storage": null,
+    },
+    "id": "62",
     "name": "blockEnvironment",
     "tail": Object {
       "head": Object {
         "i": 5,
       },
-      "id": "397",
+      "heap": Heap {
+        "storage": null,
+      },
+      "id": "49",
       "name": "blockEnvironment",
       "tail": Object {
         "head": Object {
@@ -4658,7 +7097,29 @@ Object {
             ],
           ],
         },
-        "id": "396",
+        "heap": Heap {
+          "storage": Set {
+            Array [],
+            Array [
+              1,
+              Array [
+                [Circular],
+                [Circular],
+              ],
+              [Circular],
+            ],
+            Array [
+              [Circular],
+              Array [
+                1,
+                [Circular],
+                [Circular],
+              ],
+            ],
+            [Function],
+          },
+        },
+        "id": "47",
         "name": "programEnvironment",
         "tail": Object {
           "head": Object {
@@ -4673,7 +7134,6 @@ Object {
             "$remove": [Function],
             "$remove_all": [Function],
             "$reverse": [Function],
-            "411": [Function],
             "__access_export__": [Function],
             "__access_named_export__": [Function],
             "accumulate": [Function],
@@ -4707,15 +7167,67 @@ Object {
             "stream_remove": [Function],
             "stream_remove_all": [Function],
             "stream_reverse": [Function],
+            "stream_tail": [Function],
             "stream_to_list": [Function],
           },
-          "id": "350",
-          "name": "programEnvironment",
+          "heap": Heap {
+            "storage": Set {
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+            },
+          },
+          "id": "0",
+          "name": "prelude",
           "tail": Object {
             "head": Object {
-              "411": [Function],
               ":::pre-declared names::": Symbol(),
-              "integers_from": [Function],
+            },
+            "heap": Heap {
+              "storage": null,
             },
             "id": "-1",
             "name": "global",
@@ -4728,7 +7240,7 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 16`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 18`] = `
 Object {
   "callExpression": Object {
     "arguments": Array [
@@ -4783,13 +7295,23 @@ Object {
       [Function],
     ],
   },
+  "heap": Heap {
+    "storage": Set {
+      [Function],
+    },
+  },
   "id": Any<String>,
   "name": "es",
   "tail": Object {
     "head": Object {
       "es": [Function],
     },
-    "id": "416",
+    "heap": Heap {
+      "storage": Set {
+        [Function],
+      },
+    },
+    "id": "73",
     "name": "blockEnvironment",
     "tail": Object {
       "callExpression": Object {
@@ -4845,7 +7367,10 @@ Object {
           [Function],
         ],
       },
-      "id": "415",
+      "heap": Heap {
+        "storage": null,
+      },
+      "id": "72",
       "name": "eval_stream",
       "tail": Object {
         "head": Object {
@@ -4860,7 +7385,29 @@ Object {
             ],
           ],
         },
-        "id": "396",
+        "heap": Heap {
+          "storage": Set {
+            Array [],
+            Array [
+              1,
+              Array [
+                [Circular],
+                [Circular],
+              ],
+              [Circular],
+            ],
+            Array [
+              [Circular],
+              Array [
+                1,
+                [Circular],
+                [Circular],
+              ],
+            ],
+            [Function],
+          },
+        },
+        "id": "47",
         "name": "programEnvironment",
         "tail": Object {
           "head": Object {
@@ -4875,7 +7422,6 @@ Object {
             "$remove": [Function],
             "$remove_all": [Function],
             "$reverse": [Function],
-            "411": [Function],
             "__access_export__": [Function],
             "__access_named_export__": [Function],
             "accumulate": [Function],
@@ -4909,15 +7455,67 @@ Object {
             "stream_remove": [Function],
             "stream_remove_all": [Function],
             "stream_reverse": [Function],
+            "stream_tail": [Function],
             "stream_to_list": [Function],
           },
-          "id": "350",
-          "name": "programEnvironment",
+          "heap": Heap {
+            "storage": Set {
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+            },
+          },
+          "id": "0",
+          "name": "prelude",
           "tail": Object {
             "head": Object {
-              "411": [Function],
               ":::pre-declared names::": Symbol(),
-              "integers_from": [Function],
+            },
+            "heap": Heap {
+              "storage": null,
             },
             "id": "-1",
             "name": "global",
@@ -4930,7 +7528,7 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 17`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 19`] = `
 Object {
   "callExpression": Object {
     "arguments": Array [
@@ -4985,13 +7583,21 @@ Object {
       [Function],
     ],
   },
+  "heap": Heap {
+    "storage": null,
+  },
   "id": Any<String>,
   "name": "es",
   "tail": Object {
     "head": Object {
       "es": [Function],
     },
-    "id": "416",
+    "heap": Heap {
+      "storage": Set {
+        [Function],
+      },
+    },
+    "id": "73",
     "name": "blockEnvironment",
     "tail": Object {
       "callExpression": Object {
@@ -5047,7 +7653,10 @@ Object {
           [Function],
         ],
       },
-      "id": "415",
+      "heap": Heap {
+        "storage": null,
+      },
+      "id": "72",
       "name": "eval_stream",
       "tail": Object {
         "head": Object {
@@ -5062,7 +7671,29 @@ Object {
             ],
           ],
         },
-        "id": "396",
+        "heap": Heap {
+          "storage": Set {
+            Array [],
+            Array [
+              1,
+              Array [
+                [Circular],
+                [Circular],
+              ],
+              [Circular],
+            ],
+            Array [
+              [Circular],
+              Array [
+                1,
+                [Circular],
+                [Circular],
+              ],
+            ],
+            [Function],
+          },
+        },
+        "id": "47",
         "name": "programEnvironment",
         "tail": Object {
           "head": Object {
@@ -5077,7 +7708,6 @@ Object {
             "$remove": [Function],
             "$remove_all": [Function],
             "$reverse": [Function],
-            "411": [Function],
             "__access_export__": [Function],
             "__access_named_export__": [Function],
             "accumulate": [Function],
@@ -5111,15 +7741,67 @@ Object {
             "stream_remove": [Function],
             "stream_remove_all": [Function],
             "stream_reverse": [Function],
+            "stream_tail": [Function],
             "stream_to_list": [Function],
           },
-          "id": "350",
-          "name": "programEnvironment",
+          "heap": Heap {
+            "storage": Set {
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+              [Function],
+            },
+          },
+          "id": "0",
+          "name": "prelude",
           "tail": Object {
             "head": Object {
-              "411": [Function],
               ":::pre-declared names::": Symbol(),
-              "integers_from": [Function],
+            },
+            "heap": Heap {
+              "storage": null,
             },
             "id": "-1",
             "name": "global",
@@ -5132,32 +7814,48 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 18`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 20`] = `
 Object {
   "head": Object {
     "x": Array [
       Array [],
     ],
   },
+  "heap": Heap {
+    "storage": Set {
+      Array [
+        Array [],
+      ],
+    },
+  },
   "id": Any<String>,
   "name": "blockEnvironment",
   "tail": Object {
     "head": Object {
       "i": 1,
     },
-    "id": "399",
+    "heap": Heap {
+      "storage": null,
+    },
+    "id": "51",
     "name": "blockEnvironment",
     "tail": Object {
       "head": Object {
         "_copy_of_i": 1,
       },
-      "id": "398",
+      "heap": Heap {
+        "storage": null,
+      },
+      "id": "50",
       "name": "blockEnvironment",
       "tail": Object {
         "head": Object {
           "i": 5,
         },
-        "id": "397",
+        "heap": Heap {
+          "storage": null,
+        },
+        "id": "49",
         "name": "blockEnvironment",
         "tail": Object {
           "head": Object {
@@ -5172,7 +7870,29 @@ Object {
               ],
             ],
           },
-          "id": "396",
+          "heap": Heap {
+            "storage": Set {
+              Array [],
+              Array [
+                1,
+                Array [
+                  [Circular],
+                  [Circular],
+                ],
+                [Circular],
+              ],
+              Array [
+                [Circular],
+                Array [
+                  1,
+                  [Circular],
+                  [Circular],
+                ],
+              ],
+              [Function],
+            },
+          },
+          "id": "47",
           "name": "programEnvironment",
           "tail": Object {
             "head": Object {
@@ -5187,7 +7907,6 @@ Object {
               "$remove": [Function],
               "$remove_all": [Function],
               "$reverse": [Function],
-              "411": [Function],
               "__access_export__": [Function],
               "__access_named_export__": [Function],
               "accumulate": [Function],
@@ -5221,15 +7940,67 @@ Object {
               "stream_remove": [Function],
               "stream_remove_all": [Function],
               "stream_reverse": [Function],
+              "stream_tail": [Function],
               "stream_to_list": [Function],
             },
-            "id": "350",
-            "name": "programEnvironment",
+            "heap": Heap {
+              "storage": Set {
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+              },
+            },
+            "id": "0",
+            "name": "prelude",
             "tail": Object {
               "head": Object {
-                "411": [Function],
                 ":::pre-declared names::": Symbol(),
-                "integers_from": [Function],
+              },
+              "heap": Heap {
+                "storage": null,
               },
               "id": "-1",
               "name": "global",
@@ -5243,32 +8014,48 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 19`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 21`] = `
 Object {
   "head": Object {
     "x": Array [
       Array [],
     ],
   },
+  "heap": Heap {
+    "storage": Set {
+      Array [
+        Array [],
+      ],
+    },
+  },
   "id": Any<String>,
   "name": "blockEnvironment",
   "tail": Object {
     "head": Object {
       "i": 2,
     },
-    "id": "402",
+    "heap": Heap {
+      "storage": null,
+    },
+    "id": "55",
     "name": "blockEnvironment",
     "tail": Object {
       "head": Object {
         "_copy_of_i": 2,
       },
-      "id": "401",
+      "heap": Heap {
+        "storage": null,
+      },
+      "id": "54",
       "name": "blockEnvironment",
       "tail": Object {
         "head": Object {
           "i": 5,
         },
-        "id": "397",
+        "heap": Heap {
+          "storage": null,
+        },
+        "id": "49",
         "name": "blockEnvironment",
         "tail": Object {
           "head": Object {
@@ -5283,7 +8070,29 @@ Object {
               ],
             ],
           },
-          "id": "396",
+          "heap": Heap {
+            "storage": Set {
+              Array [],
+              Array [
+                1,
+                Array [
+                  [Circular],
+                  [Circular],
+                ],
+                [Circular],
+              ],
+              Array [
+                [Circular],
+                Array [
+                  1,
+                  [Circular],
+                  [Circular],
+                ],
+              ],
+              [Function],
+            },
+          },
+          "id": "47",
           "name": "programEnvironment",
           "tail": Object {
             "head": Object {
@@ -5298,7 +8107,6 @@ Object {
               "$remove": [Function],
               "$remove_all": [Function],
               "$reverse": [Function],
-              "411": [Function],
               "__access_export__": [Function],
               "__access_named_export__": [Function],
               "accumulate": [Function],
@@ -5332,15 +8140,67 @@ Object {
               "stream_remove": [Function],
               "stream_remove_all": [Function],
               "stream_reverse": [Function],
+              "stream_tail": [Function],
               "stream_to_list": [Function],
             },
-            "id": "350",
-            "name": "programEnvironment",
+            "heap": Heap {
+              "storage": Set {
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+              },
+            },
+            "id": "0",
+            "name": "prelude",
             "tail": Object {
               "head": Object {
-                "411": [Function],
                 ":::pre-declared names::": Symbol(),
-                "integers_from": [Function],
+              },
+              "heap": Heap {
+                "storage": null,
               },
               "id": "-1",
               "name": "global",
@@ -5354,32 +8214,48 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 20`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 22`] = `
 Object {
   "head": Object {
     "x": Array [
       Array [],
     ],
   },
+  "heap": Heap {
+    "storage": Set {
+      Array [
+        Array [],
+      ],
+    },
+  },
   "id": Any<String>,
   "name": "blockEnvironment",
   "tail": Object {
     "head": Object {
       "i": 3,
     },
-    "id": "405",
+    "heap": Heap {
+      "storage": null,
+    },
+    "id": "59",
     "name": "blockEnvironment",
     "tail": Object {
       "head": Object {
         "_copy_of_i": 3,
       },
-      "id": "404",
+      "heap": Heap {
+        "storage": null,
+      },
+      "id": "58",
       "name": "blockEnvironment",
       "tail": Object {
         "head": Object {
           "i": 5,
         },
-        "id": "397",
+        "heap": Heap {
+          "storage": null,
+        },
+        "id": "49",
         "name": "blockEnvironment",
         "tail": Object {
           "head": Object {
@@ -5394,7 +8270,29 @@ Object {
               ],
             ],
           },
-          "id": "396",
+          "heap": Heap {
+            "storage": Set {
+              Array [],
+              Array [
+                1,
+                Array [
+                  [Circular],
+                  [Circular],
+                ],
+                [Circular],
+              ],
+              Array [
+                [Circular],
+                Array [
+                  1,
+                  [Circular],
+                  [Circular],
+                ],
+              ],
+              [Function],
+            },
+          },
+          "id": "47",
           "name": "programEnvironment",
           "tail": Object {
             "head": Object {
@@ -5409,7 +8307,6 @@ Object {
               "$remove": [Function],
               "$remove_all": [Function],
               "$reverse": [Function],
-              "411": [Function],
               "__access_export__": [Function],
               "__access_named_export__": [Function],
               "accumulate": [Function],
@@ -5443,15 +8340,67 @@ Object {
               "stream_remove": [Function],
               "stream_remove_all": [Function],
               "stream_reverse": [Function],
+              "stream_tail": [Function],
               "stream_to_list": [Function],
             },
-            "id": "350",
-            "name": "programEnvironment",
+            "heap": Heap {
+              "storage": Set {
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+              },
+            },
+            "id": "0",
+            "name": "prelude",
             "tail": Object {
               "head": Object {
-                "411": [Function],
                 ":::pre-declared names::": Symbol(),
-                "integers_from": [Function],
+              },
+              "heap": Heap {
+                "storage": null,
               },
               "id": "-1",
               "name": "global",
@@ -5465,32 +8414,48 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 21`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 23`] = `
 Object {
   "head": Object {
     "x": Array [
       Array [],
     ],
   },
+  "heap": Heap {
+    "storage": Set {
+      Array [
+        Array [],
+      ],
+    },
+  },
   "id": Any<String>,
   "name": "blockEnvironment",
   "tail": Object {
     "head": Object {
       "i": 4,
     },
-    "id": "408",
+    "heap": Heap {
+      "storage": null,
+    },
+    "id": "63",
     "name": "blockEnvironment",
     "tail": Object {
       "head": Object {
         "_copy_of_i": 4,
       },
-      "id": "407",
+      "heap": Heap {
+        "storage": null,
+      },
+      "id": "62",
       "name": "blockEnvironment",
       "tail": Object {
         "head": Object {
           "i": 5,
         },
-        "id": "397",
+        "heap": Heap {
+          "storage": null,
+        },
+        "id": "49",
         "name": "blockEnvironment",
         "tail": Object {
           "head": Object {
@@ -5505,7 +8470,29 @@ Object {
               ],
             ],
           },
-          "id": "396",
+          "heap": Heap {
+            "storage": Set {
+              Array [],
+              Array [
+                1,
+                Array [
+                  [Circular],
+                  [Circular],
+                ],
+                [Circular],
+              ],
+              Array [
+                [Circular],
+                Array [
+                  1,
+                  [Circular],
+                  [Circular],
+                ],
+              ],
+              [Function],
+            },
+          },
+          "id": "47",
           "name": "programEnvironment",
           "tail": Object {
             "head": Object {
@@ -5520,7 +8507,6 @@ Object {
               "$remove": [Function],
               "$remove_all": [Function],
               "$reverse": [Function],
-              "411": [Function],
               "__access_export__": [Function],
               "__access_named_export__": [Function],
               "accumulate": [Function],
@@ -5554,15 +8540,67 @@ Object {
               "stream_remove": [Function],
               "stream_remove_all": [Function],
               "stream_reverse": [Function],
+              "stream_tail": [Function],
               "stream_to_list": [Function],
             },
-            "id": "350",
-            "name": "programEnvironment",
+            "heap": Heap {
+              "storage": Set {
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+              },
+            },
+            "id": "0",
+            "name": "prelude",
             "tail": Object {
               "head": Object {
-                "411": [Function],
                 ":::pre-declared names::": Symbol(),
-                "integers_from": [Function],
+              },
+              "heap": Heap {
+                "storage": null,
               },
               "id": "-1",
               "name": "global",
@@ -5576,7 +8614,7 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 22`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 24`] = `
 Object {
   "head": Object {
     "z": Array [
@@ -5590,6 +8628,27 @@ Object {
       ],
     ],
   },
+  "heap": Heap {
+    "storage": Set {
+      Array [
+        Array [
+          [Circular],
+          Array [
+            1,
+            [Circular],
+            [Circular],
+          ],
+        ],
+      ],
+      Array [
+        1,
+        Array [
+          2,
+          null,
+        ],
+      ],
+    },
+  },
   "id": Any<String>,
   "name": "blockEnvironment",
   "tail": Object {
@@ -5646,13 +8705,23 @@ Object {
         [Function],
       ],
     },
-    "id": "418",
+    "heap": Heap {
+      "storage": Set {
+        [Function],
+      },
+    },
+    "id": "75",
     "name": "es",
     "tail": Object {
       "head": Object {
         "es": [Function],
       },
-      "id": "416",
+      "heap": Heap {
+        "storage": Set {
+          [Function],
+        },
+      },
+      "id": "73",
       "name": "blockEnvironment",
       "tail": Object {
         "callExpression": Object {
@@ -5708,7 +8777,10 @@ Object {
             [Function],
           ],
         },
-        "id": "415",
+        "heap": Heap {
+          "storage": null,
+        },
+        "id": "72",
         "name": "eval_stream",
         "tail": Object {
           "head": Object {
@@ -5723,7 +8795,29 @@ Object {
               ],
             ],
           },
-          "id": "396",
+          "heap": Heap {
+            "storage": Set {
+              Array [],
+              Array [
+                1,
+                Array [
+                  [Circular],
+                  [Circular],
+                ],
+                [Circular],
+              ],
+              Array [
+                [Circular],
+                Array [
+                  1,
+                  [Circular],
+                  [Circular],
+                ],
+              ],
+              [Function],
+            },
+          },
+          "id": "47",
           "name": "programEnvironment",
           "tail": Object {
             "head": Object {
@@ -5738,7 +8832,6 @@ Object {
               "$remove": [Function],
               "$remove_all": [Function],
               "$reverse": [Function],
-              "411": [Function],
               "__access_export__": [Function],
               "__access_named_export__": [Function],
               "accumulate": [Function],
@@ -5772,15 +8865,67 @@ Object {
               "stream_remove": [Function],
               "stream_remove_all": [Function],
               "stream_reverse": [Function],
+              "stream_tail": [Function],
               "stream_to_list": [Function],
             },
-            "id": "350",
-            "name": "programEnvironment",
+            "heap": Heap {
+              "storage": Set {
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+              },
+            },
+            "id": "0",
+            "name": "prelude",
             "tail": Object {
               "head": Object {
-                "411": [Function],
                 ":::pre-declared names::": Symbol(),
-                "integers_from": [Function],
+              },
+              "heap": Heap {
+                "storage": null,
               },
               "id": "-1",
               "name": "global",
@@ -5794,7 +8939,7 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 23`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 25`] = `
 Object {
   "head": Object {
     "z": Array [
@@ -5808,6 +8953,24 @@ Object {
       ],
     ],
   },
+  "heap": Heap {
+    "storage": Set {
+      Array [
+        Array [
+          [Circular],
+          Array [
+            1,
+            [Circular],
+            [Circular],
+          ],
+        ],
+      ],
+      Array [
+        2,
+        null,
+      ],
+    },
+  },
   "id": Any<String>,
   "name": "blockEnvironment",
   "tail": Object {
@@ -5864,13 +9027,21 @@ Object {
         [Function],
       ],
     },
-    "id": "427",
+    "heap": Heap {
+      "storage": null,
+    },
+    "id": "83",
     "name": "es",
     "tail": Object {
       "head": Object {
         "es": [Function],
       },
-      "id": "416",
+      "heap": Heap {
+        "storage": Set {
+          [Function],
+        },
+      },
+      "id": "73",
       "name": "blockEnvironment",
       "tail": Object {
         "callExpression": Object {
@@ -5926,7 +9097,10 @@ Object {
             [Function],
           ],
         },
-        "id": "415",
+        "heap": Heap {
+          "storage": null,
+        },
+        "id": "72",
         "name": "eval_stream",
         "tail": Object {
           "head": Object {
@@ -5941,7 +9115,29 @@ Object {
               ],
             ],
           },
-          "id": "396",
+          "heap": Heap {
+            "storage": Set {
+              Array [],
+              Array [
+                1,
+                Array [
+                  [Circular],
+                  [Circular],
+                ],
+                [Circular],
+              ],
+              Array [
+                [Circular],
+                Array [
+                  1,
+                  [Circular],
+                  [Circular],
+                ],
+              ],
+              [Function],
+            },
+          },
+          "id": "47",
           "name": "programEnvironment",
           "tail": Object {
             "head": Object {
@@ -5956,7 +9152,6 @@ Object {
               "$remove": [Function],
               "$remove_all": [Function],
               "$reverse": [Function],
-              "411": [Function],
               "__access_export__": [Function],
               "__access_named_export__": [Function],
               "accumulate": [Function],
@@ -5990,15 +9185,67 @@ Object {
               "stream_remove": [Function],
               "stream_remove_all": [Function],
               "stream_reverse": [Function],
+              "stream_tail": [Function],
               "stream_to_list": [Function],
             },
-            "id": "350",
-            "name": "programEnvironment",
+            "heap": Heap {
+              "storage": Set {
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+              },
+            },
+            "id": "0",
+            "name": "prelude",
             "tail": Object {
               "head": Object {
-                "411": [Function],
                 ":::pre-declared names::": Symbol(),
-                "integers_from": [Function],
+              },
+              "heap": Heap {
+                "storage": null,
               },
               "id": "-1",
               "name": "global",
@@ -6012,14 +9259,10 @@ Object {
 }
 `;
 
-exports[`CSE Machine calculates correct layout for code sample 7 24`] = `
+exports[`CSE Machine calculates correct layout for code sample 7 26`] = `
 Array [
   ":::pre-declared names::: ",
   Symbol(),
-  "integers_from: ",
-  [Function],
-  "411: ",
-  [Function],
   "y: ",
   Array [
     [Circular],
@@ -6035,12 +9278,13 @@ Array [
   1,
   "n: ",
   1,
-  "414:= ",
-  [Function],
+  "xs: ",
+  Array [
+    1,
+    [Function],
+  ],
   "n: ",
   2,
-  "426:= ",
-  [Function],
   "i: ",
   5,
   "s: ",
@@ -6050,6 +9294,8 @@ Array [
   ],
   "n: ",
   2,
+  "the_tail:= ",
+  [Function],
   "_copy_of_i:= ",
   1,
   "_copy_of_i:= ",

From cb4d0e449abf1a2e74dd114591aee53590eb4e50 Mon Sep 17 00:00:00 2001
From: s-kybound <abadkyriel@gmail.com>
Date: Thu, 4 Apr 2024 14:42:49 +0800
Subject: [PATCH 06/16] reenable csc machine for scheme

---
 src/commons/sagas/WorkspaceSaga/helpers/evalCode.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/commons/sagas/WorkspaceSaga/helpers/evalCode.ts b/src/commons/sagas/WorkspaceSaga/helpers/evalCode.ts
index 635fdbb5ca..f3e74494fd 100644
--- a/src/commons/sagas/WorkspaceSaga/helpers/evalCode.ts
+++ b/src/commons/sagas/WorkspaceSaga/helpers/evalCode.ts
@@ -13,7 +13,7 @@ import { notifyStoriesEvaluated } from 'src/features/stories/StoriesActions';
 import { EVAL_STORY } from 'src/features/stories/StoriesTypes';
 
 import { EventType } from '../../../../features/achievement/AchievementTypes';
-import { OverallState } from '../../../application/ApplicationTypes';
+import { isSchemeLanguage, OverallState } from '../../../application/ApplicationTypes';
 import {
   BEGIN_DEBUG_PAUSE,
   BEGIN_INTERRUPT_EXECUTION,
@@ -94,7 +94,8 @@ export function* evalCode(
             .currentStep
       )
     : -1;
-  const cseActiveAndCorrectChapter = context.chapter >= 3 && cseIsActive;
+  const cseActiveAndCorrectChapter =
+    (isSchemeLanguage(context.chapter) || context.chapter >= 3) && cseIsActive;
   if (cseActiveAndCorrectChapter) {
     context.executionMethod = 'cse-machine';
   }

From c37f83440d5b46289bcb0c24412aace2dcb97952 Mon Sep 17 00:00:00 2001
From: s-kybound <abadkyriel@gmail.com>
Date: Mon, 8 Apr 2024 23:10:47 +0800
Subject: [PATCH 07/16] add prototype visualisations for scheme data types

---
 src/features/cseMachine/CseMachine.tsx        |  3 +-
 src/features/cseMachine/CseMachineLayout.tsx  | 16 ++++--
 src/features/cseMachine/CseMachineUtils.ts    | 50 +++++++++++++++++--
 .../cseMachine/components/ControlStack.tsx    |  9 ++--
 .../cseMachine/components/StashStack.tsx      |  8 +--
 5 files changed, 71 insertions(+), 15 deletions(-)

diff --git a/src/features/cseMachine/CseMachine.tsx b/src/features/cseMachine/CseMachine.tsx
index c3edbd06a4..c6550f6a36 100644
--- a/src/features/cseMachine/CseMachine.tsx
+++ b/src/features/cseMachine/CseMachine.tsx
@@ -84,7 +84,8 @@ export default class CseMachine {
     Layout.setContext(
       context.runtime.environmentTree as EnvTree,
       context.runtime.control,
-      context.runtime.stash
+      context.runtime.stash,
+      context.chapter
     );
     this.setVis(Layout.draw());
     this.setIsStepLimitExceeded(context.runtime.control.isEmpty());
diff --git a/src/features/cseMachine/CseMachineLayout.tsx b/src/features/cseMachine/CseMachineLayout.tsx
index 21e18117f6..e5db0d7b11 100644
--- a/src/features/cseMachine/CseMachineLayout.tsx
+++ b/src/features/cseMachine/CseMachineLayout.tsx
@@ -1,5 +1,6 @@
 import Heap from 'js-slang/dist/cse-machine/heap';
 import { Control, Stash } from 'js-slang/dist/cse-machine/interpreter';
+import { Chapter } from 'js-slang/dist/types';
 import { KonvaEventObject } from 'konva/lib/Node';
 import React, { RefObject } from 'react';
 import { Layer, Rect, Stage } from 'react-konva';
@@ -128,7 +129,12 @@ export class Layout {
   }
 
   /** processes the runtime context from JS Slang */
-  static setContext(envTree: EnvTree, control: Control, stash: Stash): void {
+  static setContext(
+    envTree: EnvTree,
+    control: Control,
+    stash: Stash,
+    chapter: Chapter = Chapter.SOURCE_4
+  ): void {
     Layout.currentLight = undefined;
     Layout.currentDark = undefined;
     Layout.currentStackDark = undefined;
@@ -152,7 +158,7 @@ export class Layout {
     // initialize levels and frames
     Layout.initializeGrid();
     // initialize control and stash
-    Layout.initializeControlStash();
+    Layout.initializeControlStash(chapter);
 
     if (CseMachine.getControlStash()) {
       Layout.controlStashHeight = Math.max(
@@ -185,11 +191,11 @@ export class Layout {
     CseAnimation.updateAnimation();
   }
 
-  static initializeControlStash() {
+  static initializeControlStash(chapter: Chapter) {
     Layout.previousControlComponent = Layout.controlComponent;
     Layout.previousStashComponent = Layout.stashComponent;
-    this.controlComponent = new ControlStack(this.control);
-    this.stashComponent = new StashStack(this.stash);
+    this.controlComponent = new ControlStack(this.control, chapter);
+    this.stashComponent = new StashStack(this.stash, chapter);
   }
 
   /**
diff --git a/src/features/cseMachine/CseMachineUtils.ts b/src/features/cseMachine/CseMachineUtils.ts
index 46d8b757ce..03fc090152 100644
--- a/src/features/cseMachine/CseMachineUtils.ts
+++ b/src/features/cseMachine/CseMachineUtils.ts
@@ -1,3 +1,5 @@
+import { estreeDecode } from 'js-slang/dist/alt-langs/scheme/scm-slang/src/utils/encoder-visitor';
+import { unparse } from 'js-slang/dist/alt-langs/scheme/scm-slang/src/utils/reverse_parser';
 import {
   AppInstr,
   ArrLitInstr,
@@ -9,12 +11,13 @@ import {
   InstrType,
   UnOpInstr
 } from 'js-slang/dist/cse-machine/types';
-import { Environment, Value as StashValue } from 'js-slang/dist/types';
+import { Chapter, Environment, Value as StashValue } from 'js-slang/dist/types';
 import { astToString } from 'js-slang/dist/utils/ast/astToString';
 import { Group } from 'konva/lib/Group';
 import { Node } from 'konva/lib/Node';
 import { Shape } from 'konva/lib/Shape';
 import { cloneDeep } from 'lodash';
+import { isSchemeLanguage } from 'src/commons/application/ApplicationTypes';
 import classes from 'src/styles/Draggable.module.scss';
 
 import { ArrayUnit } from './components/ArrayUnit';
@@ -513,12 +516,26 @@ export function getControlItemComponent(
   stackHeight: number,
   index: number,
   highlightOnHover: () => void,
-  unhighlightOnHover: () => void
+  unhighlightOnHover: () => void,
+  chapter: Chapter
 ): ControlItemComponent {
   const topItem = CseMachine.getStackTruncated()
     ? index === Math.min(Layout.control.size() - 1, 9)
     : index === Layout.control.size() - 1;
   if (!isInstr(controlItem)) {
+    if (isSchemeLanguage(chapter)) {
+      // use the js-slang decoder on the control item
+      controlItem = estreeDecode(controlItem as any);
+      const text = unparse(controlItem as any);
+      return new ControlItemComponent(
+        text,
+        text,
+        stackHeight,
+        highlightOnHover,
+        unhighlightOnHover,
+        topItem
+      );
+    }
     switch (controlItem.type) {
       case 'Program':
         // If the control item is the whole program
@@ -737,6 +754,24 @@ export function getControlItemComponent(
           unhighlightOnHover,
           topItem
         );
+      case InstrType.GENERATE_CONT:
+        return new ControlItemComponent(
+          'generate cont',
+          'Generate continuation',
+          stackHeight,
+          highlightOnHover,
+          unhighlightOnHover,
+          topItem
+        );
+      case InstrType.RESUME_CONT:
+        return new ControlItemComponent(
+          'call cont',
+          'call a continuation',
+          stackHeight,
+          highlightOnHover,
+          unhighlightOnHover,
+          topItem
+        );
       default:
         return new ControlItemComponent(
           'INSTRUCTION',
@@ -750,7 +785,16 @@ export function getControlItemComponent(
   }
 }
 
-export function getStashItemComponent(stashItem: StashValue, stackHeight: number, index: number) {
+export function getStashItemComponent(
+  stashItem: StashValue,
+  stackHeight: number,
+  index: number,
+  chapter: Chapter
+): StashItemComponent {
+  if (isSchemeLanguage(chapter)) {
+    // we can use schemeVisualise to get the representation of the value
+    // TODO
+  }
   if (isClosure(stashItem) || isGlobalFn(stashItem) || isDataArray(stashItem)) {
     for (const level of Layout.levels) {
       for (const frame of level.frames) {
diff --git a/src/features/cseMachine/components/ControlStack.tsx b/src/features/cseMachine/components/ControlStack.tsx
index 4c22371559..628157988f 100644
--- a/src/features/cseMachine/components/ControlStack.tsx
+++ b/src/features/cseMachine/components/ControlStack.tsx
@@ -1,6 +1,6 @@
 import { Control } from 'js-slang/dist/cse-machine/interpreter';
 import { ControlItem, Instr } from 'js-slang/dist/cse-machine/types';
-import { StatementSequence } from 'js-slang/dist/types';
+import { Chapter, StatementSequence } from 'js-slang/dist/types';
 import { Node } from 'js-slang/dist/types';
 import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
@@ -28,7 +28,8 @@ export class ControlStack extends Visible implements IHoverable {
 
   constructor(
     /** the control object */
-    readonly control: Control
+    readonly control: Control,
+    readonly chapter: Chapter
   ) {
     super();
     this._x = ControlStashConfig.ControlPosX;
@@ -36,6 +37,7 @@ export class ControlStack extends Visible implements IHoverable {
     this._width = ControlStashConfig.ControlItemWidth;
     this._height = ControlStashConfig.StashItemHeight + ControlStashConfig.StashItemTextPadding * 2;
     this.control = control;
+    this.chapter = chapter;
 
     // Function to convert the stack items to their components
     let i = 0;
@@ -57,7 +59,8 @@ export class ControlStack extends Visible implements IHoverable {
         this._height,
         i,
         highlightOnHover,
-        unhighlightOnHover
+        unhighlightOnHover,
+        this.chapter
       );
       this._height += component.height();
       i += 1;
diff --git a/src/features/cseMachine/components/StashStack.tsx b/src/features/cseMachine/components/StashStack.tsx
index c552ac8403..3296fdfca5 100644
--- a/src/features/cseMachine/components/StashStack.tsx
+++ b/src/features/cseMachine/components/StashStack.tsx
@@ -1,5 +1,5 @@
 import { Stash } from 'js-slang/dist/cse-machine/interpreter';
-import { Value } from 'js-slang/dist/types';
+import { Chapter, Value } from 'js-slang/dist/types';
 import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
 import { Group } from 'react-konva';
@@ -18,18 +18,20 @@ export class StashStack extends Visible implements IHoverable {
 
   constructor(
     /** the stash object */
-    readonly stash: Stash
+    readonly stash: Stash,
+    readonly chapter: Chapter
   ) {
     super();
     this._x = ControlStashConfig.StashPosX;
     this._y = ControlStashConfig.StashPosY;
     this._width = 0;
     this._height = 0;
+    this.chapter = chapter;
 
     // Function to convert the stack items to their components
     let i = 0;
     const stashItemToComponent = (stashItem: Value) => {
-      const component = getStashItemComponent(stashItem, this._width, i);
+      const component = getStashItemComponent(stashItem, this._width, i, this.chapter);
       this._width += component.width();
       this._height = Math.max(this._height, component.height());
       i += 1;

From 005d824d00be81a428ab1337648ae816aebda9ea Mon Sep 17 00:00:00 2001
From: s-kybound <abadkyriel@gmail.com>
Date: Mon, 8 Apr 2024 23:28:06 +0800
Subject: [PATCH 08/16] update tests

---
 .../__snapshots__/CseMachine.tsx.snap         | 430 ++++++++++++++++++
 1 file changed, 430 insertions(+)

diff --git a/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap b/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap
index d96a33d9bd..92feee408c 100644
--- a/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap
+++ b/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap
@@ -6292,3 +6292,433 @@ Array [
   ],
 ]
 `;
+
+exports[`CSE Machine calculates correct layout for code sample 7 25`] = `
+Object {
+  "head": Object {
+    "z": Array [
+      Array [
+        [Circular],
+        Array [
+          1,
+          [Circular],
+          [Circular],
+        ],
+      ],
+    ],
+  },
+  "heap": Heap {
+    "storage": Set {
+      Array [
+        Array [
+          [Circular],
+          Array [
+            1,
+            [Circular],
+            [Circular],
+          ],
+        ],
+      ],
+      Array [
+        2,
+        null,
+      ],
+    },
+  },
+  "id": Any<String>,
+  "name": "blockEnvironment",
+  "tail": Object {
+    "callExpression": Object {
+      "arguments": Array [
+        Object {
+          "loc": undefined,
+          "type": "Literal",
+          "value": Array [
+            2,
+            [Function],
+          ],
+        },
+        Object {
+          "loc": undefined,
+          "type": "Literal",
+          "value": 1,
+        },
+      ],
+      "callee": Node {
+        "end": 305,
+        "loc": SourceLocation {
+          "end": Position {
+            "column": 61,
+            "line": 12,
+          },
+          "start": Position {
+            "column": 59,
+            "line": 12,
+          },
+        },
+        "name": "es",
+        "start": 303,
+        "type": "Identifier",
+      },
+      "end": 328,
+      "loc": SourceLocation {
+        "end": Position {
+          "column": 84,
+          "line": 12,
+        },
+        "start": Position {
+          "column": 59,
+          "line": 12,
+        },
+      },
+      "start": 303,
+      "type": "CallExpression",
+    },
+    "head": Object {
+      "n": 1,
+      "s": Array [
+        2,
+        [Function],
+      ],
+    },
+    "heap": Heap {
+      "storage": null,
+    },
+    "id": "83",
+    "name": "es",
+    "tail": Object {
+      "head": Object {
+        "es": [Function],
+      },
+      "heap": Heap {
+        "storage": Set {
+          [Function],
+        },
+      },
+      "id": "73",
+      "name": "blockEnvironment",
+      "tail": Object {
+        "callExpression": Object {
+          "arguments": Array [
+            Object {
+              "loc": undefined,
+              "type": "Literal",
+              "value": Array [
+                1,
+                [Function],
+              ],
+            },
+            Object {
+              "loc": undefined,
+              "type": "Literal",
+              "value": 2,
+            },
+          ],
+          "callee": Node {
+            "end": 404,
+            "loc": SourceLocation {
+              "end": Position {
+                "column": 15,
+                "line": 16,
+              },
+              "start": Position {
+                "column": 4,
+                "line": 16,
+              },
+            },
+            "name": "eval_stream",
+            "start": 393,
+            "type": "Identifier",
+          },
+          "end": 425,
+          "loc": SourceLocation {
+            "end": Position {
+              "column": 36,
+              "line": 16,
+            },
+            "start": Position {
+              "column": 4,
+              "line": 16,
+            },
+          },
+          "start": 393,
+          "type": "CallExpression",
+        },
+        "head": Object {
+          "n": 2,
+          "s": Array [
+            1,
+            [Function],
+          ],
+        },
+        "heap": Heap {
+          "storage": null,
+        },
+        "id": "72",
+        "name": "eval_stream",
+        "tail": Object {
+          "head": Object {
+            "eval_stream": [Function],
+            "x": 1,
+            "y": Array [
+              [Circular],
+              Array [
+                1,
+                [Circular],
+                [Circular],
+              ],
+            ],
+          },
+          "heap": Heap {
+            "storage": Set {
+              Array [],
+              Array [
+                1,
+                Array [
+                  [Circular],
+                  [Circular],
+                ],
+                [Circular],
+              ],
+              Array [
+                [Circular],
+                Array [
+                  1,
+                  [Circular],
+                  [Circular],
+                ],
+              ],
+              [Function],
+            },
+          },
+          "id": "47",
+          "name": "programEnvironment",
+          "tail": Object {
+            "head": Object {
+              "$accumulate": [Function],
+              "$append": [Function],
+              "$build_list": [Function],
+              "$enum_list": [Function],
+              "$filter": [Function],
+              "$length": [Function],
+              "$list_to_string": [Function],
+              "$map": [Function],
+              "$remove": [Function],
+              "$remove_all": [Function],
+              "$reverse": [Function],
+              "__access_export__": [Function],
+              "__access_named_export__": [Function],
+              "accumulate": [Function],
+              "append": [Function],
+              "build_list": [Function],
+              "build_stream": [Function],
+              "enum_list": [Function],
+              "enum_stream": [Function],
+              "equal": [Function],
+              "eval_stream": [Function],
+              "filter": [Function],
+              "for_each": [Function],
+              "integers_from": [Function],
+              "is_stream": [Function],
+              "length": [Function],
+              "list_ref": [Function],
+              "list_to_stream": [Function],
+              "list_to_string": [Function],
+              "map": [Function],
+              "member": [Function],
+              "remove": [Function],
+              "remove_all": [Function],
+              "reverse": [Function],
+              "stream_append": [Function],
+              "stream_filter": [Function],
+              "stream_for_each": [Function],
+              "stream_length": [Function],
+              "stream_map": [Function],
+              "stream_member": [Function],
+              "stream_ref": [Function],
+              "stream_remove": [Function],
+              "stream_remove_all": [Function],
+              "stream_reverse": [Function],
+              "stream_tail": [Function],
+              "stream_to_list": [Function],
+            },
+            "heap": Heap {
+              "storage": Set {
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+                [Function],
+              },
+            },
+            "id": "0",
+            "name": "prelude",
+            "tail": Object {
+              "head": Object {
+                ":::pre-declared names::": Symbol(),
+              },
+              "heap": Heap {
+                "storage": null,
+              },
+              "id": "-1",
+              "name": "global",
+              "tail": null,
+            },
+          },
+        },
+      },
+    },
+  },
+}
+`;
+
+exports[`CSE Machine calculates correct layout for code sample 7 26`] = `
+Array [
+  ":::pre-declared names::: ",
+  Symbol(),
+  "y: ",
+  Array [
+    [Circular],
+    Array [
+      1,
+      [Circular],
+      [Circular],
+    ],
+  ],
+  "eval_stream:= ",
+  [Function],
+  "x: ",
+  1,
+  "n: ",
+  1,
+  "xs: ",
+  Array [
+    1,
+    [Function],
+  ],
+  "n: ",
+  2,
+  "i: ",
+  5,
+  "s: ",
+  Array [
+    1,
+    [Function],
+  ],
+  "n: ",
+  2,
+  "the_tail:= ",
+  [Function],
+  "_copy_of_i:= ",
+  1,
+  "_copy_of_i:= ",
+  2,
+  "_copy_of_i:= ",
+  3,
+  "_copy_of_i:= ",
+  4,
+  "es:= ",
+  [Function],
+  "i:= ",
+  1,
+  "i:= ",
+  2,
+  "i:= ",
+  3,
+  "i:= ",
+  4,
+  "s: ",
+  Array [
+    1,
+    [Function],
+  ],
+  "n: ",
+  2,
+  "s: ",
+  Array [
+    2,
+    [Function],
+  ],
+  "n: ",
+  1,
+  "x:= ",
+  Array [
+    Array [],
+  ],
+  "x:= ",
+  Array [
+    Array [],
+  ],
+  "x:= ",
+  Array [
+    Array [],
+  ],
+  "x:= ",
+  Array [
+    Array [],
+  ],
+  "z:= ",
+  Array [
+    Array [
+      [Circular],
+      Array [
+        1,
+        [Circular],
+        [Circular],
+      ],
+    ],
+  ],
+  "z:= ",
+  Array [
+    Array [
+      [Circular],
+      Array [
+        1,
+        [Circular],
+        [Circular],
+      ],
+    ],
+  ],
+]
+`;

From f561bbc68c295022817cb0bb2eef9982bc7ee217 Mon Sep 17 00:00:00 2001
From: s-kybound <abadkyriel@gmail.com>
Date: Tue, 9 Apr 2024 01:31:49 +0800
Subject: [PATCH 09/16] simplify logic for checking prelude

---
 src/features/cseMachine/CseMachineLayout.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/features/cseMachine/CseMachineLayout.tsx b/src/features/cseMachine/CseMachineLayout.tsx
index e5db0d7b11..a286cf4594 100644
--- a/src/features/cseMachine/CseMachineLayout.tsx
+++ b/src/features/cseMachine/CseMachineLayout.tsx
@@ -203,8 +203,7 @@ export class Layout {
    * objects into the global environment head and heap
    */
   private static removePreludeEnv() {
-    if (!Layout.globalEnvNode.children) return;
-    if (Layout.globalEnvNode.children.length === 0) return;
+    if (!Layout.globalEnvNode.children || Layout.globalEnvNode.children.length === 0) return;
 
     const preludeEnvNode = Layout.globalEnvNode.children[0];
     const preludeEnv = preludeEnvNode.environment;

From 9fb1c8462786e15d4fa439f94e66b87f0aa051e9 Mon Sep 17 00:00:00 2001
From: s-kybound <abadkyriel@gmail.com>
Date: Mon, 15 Apr 2024 04:20:31 +0800
Subject: [PATCH 10/16] Make cse refer to correct closure

---
 src/features/cseMachine/CseMachineTypes.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/cseMachine/CseMachineTypes.ts b/src/features/cseMachine/CseMachineTypes.ts
index 33bf239559..4e186d7f88 100644
--- a/src/features/cseMachine/CseMachineTypes.ts
+++ b/src/features/cseMachine/CseMachineTypes.ts
@@ -2,7 +2,7 @@ import {
   EnvTree as EnvironmentTree,
   EnvTreeNode as EnvironmentTreeNode
 } from 'js-slang/dist/createContext';
-import JsSlangClosure from 'js-slang/dist/interpreter/closure';
+import JsSlangClosure from 'js-slang/dist/cse-machine/closure';
 import { Environment } from 'js-slang/dist/types';
 import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';

From 8ae2bf57b9e5e1f3776afb9f207ff1f73dcf9257 Mon Sep 17 00:00:00 2001
From: s-kybound <abadkyriel@gmail.com>
Date: Mon, 15 Apr 2024 04:26:02 +0800
Subject: [PATCH 11/16] Centralise logic for alternate languages

---
 src/features/cseMachine/utils/altLangs.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/features/cseMachine/utils/altLangs.ts

diff --git a/src/features/cseMachine/utils/altLangs.ts b/src/features/cseMachine/utils/altLangs.ts
new file mode 100644
index 0000000000..fb390ee7e7
--- /dev/null
+++ b/src/features/cseMachine/utils/altLangs.ts
@@ -0,0 +1,16 @@
+// alternate representations of data types
+
+import { Data } from '../CseMachineTypes';
+
+/** Returns `true` if `data` is a scheme number
+ * TODO: make this less hacky.
+ */
+function isSchemeNumber(data: Data): boolean {
+  return (data as any)?.numberType !== undefined;
+}
+
+// used to define custom primitives from alternate languages.
+// MAKE SURE the custom primitive has a toString() method!
+export function isCustomPrimitive(data: Data): boolean {
+  return isSchemeNumber(data);
+}

From 4946e192a306d04855655d397ed88ba5e26e0692 Mon Sep 17 00:00:00 2001
From: s-kybound <abadkyriel@gmail.com>
Date: Mon, 15 Apr 2024 04:28:24 +0800
Subject: [PATCH 12/16] separate scheme as its own file

---
 src/features/cseMachine/utils/altLangs.ts | 8 +-------
 src/features/cseMachine/utils/scheme.ts   | 8 ++++++++
 2 files changed, 9 insertions(+), 7 deletions(-)
 create mode 100644 src/features/cseMachine/utils/scheme.ts

diff --git a/src/features/cseMachine/utils/altLangs.ts b/src/features/cseMachine/utils/altLangs.ts
index fb390ee7e7..f5d012ebce 100644
--- a/src/features/cseMachine/utils/altLangs.ts
+++ b/src/features/cseMachine/utils/altLangs.ts
@@ -1,13 +1,7 @@
 // alternate representations of data types
 
 import { Data } from '../CseMachineTypes';
-
-/** Returns `true` if `data` is a scheme number
- * TODO: make this less hacky.
- */
-function isSchemeNumber(data: Data): boolean {
-  return (data as any)?.numberType !== undefined;
-}
+import { isSchemeNumber } from './scheme';
 
 // used to define custom primitives from alternate languages.
 // MAKE SURE the custom primitive has a toString() method!
diff --git a/src/features/cseMachine/utils/scheme.ts b/src/features/cseMachine/utils/scheme.ts
new file mode 100644
index 0000000000..ec5d5494da
--- /dev/null
+++ b/src/features/cseMachine/utils/scheme.ts
@@ -0,0 +1,8 @@
+import { Data } from '../CseMachineTypes';
+
+/** Returns `true` if `data` is a scheme number
+ * TODO: make this less hacky.
+ */
+export function isSchemeNumber(data: Data): boolean {
+  return (data as any)?.numberType !== undefined;
+}

From 732c4acf82a2ea3bce9edb5ecfe3c9f2b9347182 Mon Sep 17 00:00:00 2001
From: s-kybound <abadkyriel@gmail.com>
Date: Mon, 15 Apr 2024 04:30:34 +0800
Subject: [PATCH 13/16] add scheme primitive representation to cse machine

---
 src/features/cseMachine/CseMachineUtils.ts  | 10 +++++++++-
 src/features/cseMachine/components/Text.tsx | 11 ++++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/features/cseMachine/CseMachineUtils.ts b/src/features/cseMachine/CseMachineUtils.ts
index 03fc090152..859aaeca12 100644
--- a/src/features/cseMachine/CseMachineUtils.ts
+++ b/src/features/cseMachine/CseMachineUtils.ts
@@ -45,6 +45,7 @@ import {
   Primitive,
   ReferenceType
 } from './CseMachineTypes';
+import { isCustomPrimitive } from './utils/altLangs';
 
 // TODO: can make use of lodash
 /** Returns `true` if `x` is an object */
@@ -142,7 +143,14 @@ export function isBoolean(data: Data): data is boolean {
 
 /** Returns `true` if `data` is a primitive, defined as a null | data | number */
 export function isPrimitiveData(data: Data): data is Primitive {
-  return isUndefined(data) || isNull(data) || isString(data) || isNumber(data) || isBoolean(data);
+  return (
+    isUndefined(data) ||
+    isNull(data) ||
+    isString(data) ||
+    isNumber(data) ||
+    isBoolean(data) ||
+    isCustomPrimitive(data)
+  );
 }
 
 // TODO: remove this in the future once ES typings are updated to contain the new set functions
diff --git a/src/features/cseMachine/components/Text.tsx b/src/features/cseMachine/components/Text.tsx
index de21ab3073..2ef4f30281 100644
--- a/src/features/cseMachine/components/Text.tsx
+++ b/src/features/cseMachine/components/Text.tsx
@@ -6,6 +6,7 @@ import { Config, ShapeDefaultProps } from '../CseMachineConfig';
 import { Layout } from '../CseMachineLayout';
 import { Data, IHoverable } from '../CseMachineTypes';
 import { getTextWidth, setHoveredCursor, setUnhoveredCursor } from '../CseMachineUtils';
+import { isCustomPrimitive } from '../utils/altLangs';
 import { Visible } from './Visible';
 
 export interface TextOptions {
@@ -48,9 +49,13 @@ export class Text extends Visible implements IHoverable {
 
     const { fontSize, fontStyle, fontFamily, maxWidth, isStringIdentifiable } = this.options;
 
-    this.fullStr = this.partialStr = isStringIdentifiable
-      ? JSON.stringify(data) || String(data)
-      : String(data);
+    this.fullStr = this.partialStr =
+      // if the data is a custom primitive, use its toString method
+      isCustomPrimitive(data)
+        ? String(data)
+        : isStringIdentifiable
+        ? JSON.stringify(data) || String(data)
+        : String(data);
     this._height = fontSize;
     const widthOf = (s: string) => getTextWidth(s, `${fontStyle} ${fontSize}px ${fontFamily}`);
     if (widthOf(this.partialStr) > maxWidth) {

From cf028794cbf3dd175fa0835ecaea1c9f6e3bbe3c Mon Sep 17 00:00:00 2001
From: s-kybound <abadkyriel@gmail.com>
Date: Mon, 15 Apr 2024 04:53:23 +0800
Subject: [PATCH 14/16] update representation of control

---
 src/features/cseMachine/CseMachineUtils.ts | 25 +++++++++---
 src/features/cseMachine/utils/altLangs.ts  | 45 +++++++++++++++++++++-
 src/features/cseMachine/utils/scheme.ts    |  8 ++++
 3 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/src/features/cseMachine/CseMachineUtils.ts b/src/features/cseMachine/CseMachineUtils.ts
index 859aaeca12..a64f41f141 100644
--- a/src/features/cseMachine/CseMachineUtils.ts
+++ b/src/features/cseMachine/CseMachineUtils.ts
@@ -45,7 +45,11 @@ import {
   Primitive,
   ReferenceType
 } from './CseMachineTypes';
-import { isCustomPrimitive } from './utils/altLangs';
+import {
+  getAlternateControlItemComponent,
+  isCustomPrimitive,
+  needsNewRepresentation
+} from './utils/altLangs';
 
 // TODO: can make use of lodash
 /** Returns `true` if `x` is an object */
@@ -531,6 +535,19 @@ export function getControlItemComponent(
     ? index === Math.min(Layout.control.size() - 1, 9)
     : index === Layout.control.size() - 1;
   if (!isInstr(controlItem)) {
+    // there's no reason to provide an alternate representation
+    // for a instruction.
+    if (needsNewRepresentation(chapter)) {
+      return getAlternateControlItemComponent(
+        controlItem,
+        stackHeight,
+        highlightOnHover,
+        unhighlightOnHover,
+        topItem,
+        chapter
+      );
+    }
+
     if (isSchemeLanguage(chapter)) {
       // use the js-slang decoder on the control item
       controlItem = estreeDecode(controlItem as any);
@@ -797,12 +814,8 @@ export function getStashItemComponent(
   stashItem: StashValue,
   stackHeight: number,
   index: number,
-  chapter: Chapter
+  _chapter: Chapter
 ): StashItemComponent {
-  if (isSchemeLanguage(chapter)) {
-    // we can use schemeVisualise to get the representation of the value
-    // TODO
-  }
   if (isClosure(stashItem) || isGlobalFn(stashItem) || isDataArray(stashItem)) {
     for (const level of Layout.levels) {
       for (const frame of level.frames) {
diff --git a/src/features/cseMachine/utils/altLangs.ts b/src/features/cseMachine/utils/altLangs.ts
index f5d012ebce..78eb74bd58 100644
--- a/src/features/cseMachine/utils/altLangs.ts
+++ b/src/features/cseMachine/utils/altLangs.ts
@@ -1,10 +1,53 @@
 // alternate representations of data types
 
+import { ControlItem } from 'js-slang/dist/cse-machine/types';
+import { Chapter, Node } from 'js-slang/dist/types';
+import { isSchemeLanguage } from 'src/commons/application/ApplicationTypes';
+
+import { ControlItemComponent } from '../components/ControlItemComponent';
 import { Data } from '../CseMachineTypes';
-import { isSchemeNumber } from './scheme';
+import { convertNodeToScheme, isSchemeNumber } from './scheme';
 
 // used to define custom primitives from alternate languages.
 // MAKE SURE the custom primitive has a toString() method!
 export function isCustomPrimitive(data: Data): boolean {
   return isSchemeNumber(data);
 }
+
+// tells the CSE machine whether a new representation is needed.
+// expand when necessary.
+export function needsNewRepresentation(chapter: Chapter): boolean {
+  return isSchemeLanguage(chapter);
+}
+
+export function getAlternateControlItemComponent(
+  controlItem: ControlItem,
+  stackHeight: number,
+  highlightOnHover: () => void,
+  unhighlightOnHover: () => void,
+  topItem: boolean,
+  chapter: Chapter
+) {
+  // keep in mind that the controlItem is a node.
+  // there's no reason to provide an alternate representation
+  // for a instruction.
+  const node = controlItem as Node;
+  switch (chapter) {
+    case Chapter.SCHEME_1:
+    case Chapter.SCHEME_2:
+    case Chapter.SCHEME_3:
+    case Chapter.SCHEME_4:
+    case Chapter.FULL_SCHEME:
+      const text = convertNodeToScheme(node);
+      return new ControlItemComponent(
+        text,
+        text,
+        stackHeight,
+        highlightOnHover,
+        unhighlightOnHover,
+        topItem
+      );
+    default:
+      throw new Error('Unknown chapter');
+  }
+}
diff --git a/src/features/cseMachine/utils/scheme.ts b/src/features/cseMachine/utils/scheme.ts
index ec5d5494da..80882d277e 100644
--- a/src/features/cseMachine/utils/scheme.ts
+++ b/src/features/cseMachine/utils/scheme.ts
@@ -1,3 +1,7 @@
+import { estreeDecode } from 'js-slang/dist/alt-langs/scheme/scm-slang/src/utils/encoder-visitor';
+import { unparse } from 'js-slang/dist/alt-langs/scheme/scm-slang/src/utils/reverse_parser';
+import { Node } from 'js-slang/dist/types';
+
 import { Data } from '../CseMachineTypes';
 
 /** Returns `true` if `data` is a scheme number
@@ -6,3 +10,7 @@ import { Data } from '../CseMachineTypes';
 export function isSchemeNumber(data: Data): boolean {
   return (data as any)?.numberType !== undefined;
 }
+
+export function convertNodeToScheme(node: Node): string {
+  return unparse(estreeDecode(node as any));
+}

From 83dd88c2a8a7063f36a8ea112cb7fe46623fa4b9 Mon Sep 17 00:00:00 2001
From: s-kybound <abadkyriel@gmail.com>
Date: Mon, 15 Apr 2024 05:08:38 +0800
Subject: [PATCH 15/16] Squashed commit of the following:
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

commit 27f3fe40837dcf9efc185e8f3550acc3e360f1e3
Author: Martin Henz <henz@comp.nus.edu.sg>
Date:   Sun Apr 14 15:21:16 2024 +0800

    bumping js-slang (#2934)

commit 812393a0f136179abf834cfd3e0439200f77c381
Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date:   Sun Apr 14 13:28:11 2024 +0800

    Migrate to TypeScript v5 (#2850)

    * Bump TypeScript to v5.4

    Also updated tsconfig.json to remove a deprecated config.

    * Fix type error

    * Fix type error

    * Fix type error

    * Fix type error

    * Fix type error

    * Fix lint dependencies and config

    * Fix type errors

    * Fix type error

    * Fix format

    * Fix type errors

    Also standardized React hooks import style.

    * Fix type error

    * Fix type error

    * Fix format

    * Bump typescript to v5.4.3

    * Fix type errors

    * Add some `as any` assertions

    FIXMEs were also incorporated for future refactoring.

    * Update lockfile post-merge

    * Bump dependencies

    * Update lockfile post-merge

    * Create type-safe object helpers

    * Fix type error

    * Fix type error

    * Fix type error

    * Create more type helpers

    * Fix type error

    * Fix type error

    Also removed unnecessary type annotation.

    * Fix type error

    * Fix type error

    * Fix type errors

    * Fix type error

    * Fix type error

    * Fix type errors

    * Fix type error

    * Fix type error

    * Refactor filter logic to fix type error

    * Fix types

    * Address comments

commit 87e646dc337aac0453c843f8e5c29145e3ffac8d
Author: CZX <CZX123@users.noreply.github.com>
Date:   Sat Apr 13 23:05:04 2024 +0800

    CSE UI/UX: Animations & UI improvements (#2931)

    * display array indices

    * animate moving numbers from agenda to stash

    * add code to read from previous agenda

    * Add animation components and some abstraction

    * Change test cases

    * Fix bug

    Properly disable animations when control and stash option is not enabled

    * display array indices

    * animate moving numbers from agenda to stash

    * add code to read from previous agenda

    * Add animation components and some abstraction

    * Change test cases

    * Fix bug

    Properly disable animations when control and stash option is not enabled

    * Fix issues with names after rebase

    * Fix animation bugs and refactoring of animation classes and logic

    * Fix mistake in test snapshot

    * Revert "Merge branch 'cse-uiux' of https://github.com/source-academy/frontend into cse-uiux"

    This reverts commit 7ef87d81a9073d13d28a5146f74692ca70bdaf80, reversing
    changes made to efa8c57c379ebb5d41a4aaca141d0774902941d2.

    * Restructure animation classes

    * Add binary operator animation

    * Add unary operator animation

    * Begin work on block separation animation

    * Improve binary operation animation, and improve the versatility of the base animation components

    * Improve the unary operation and block animations

    * Update test cases and remove block animation conditions

    * Add pop animation (linear movement)

    * Improve pop animation, and cleanup code for pull request

    * Revert envVisualizer test snapshot changes

    * Add assignment animation

    * Work on binding lookup function

    * Improve assignment animation and touch up on other animations, added experimental Column component

    * Add lookup animation (Identifier)

    * Improve lookup animation

    * Hide arrows for lookup animation and show them when it's finished

    * Remove AnimationUtils.tsx file

    replaced with AnimationUtils.ts

    * Slow down assignment and lookup animations

    * Fix issues with merging

    * Add environment animation

    * Refactor setDestination and animate to new method animateTo

    * Improve env animation and rename a utility function

    * Added animated arrows and also modified GenericArrow and improve assignment animation

    * Update test snapshot and formatting changes

    * Add arrow animation to lookup animation, and fix animateTo function behavior

    * Add FrameCreationAnimation

    * Rewrote all animation components for greater flexibility and performance

    * Shorten duration and delay names, and add listener functionality

    * Move experimental file

    * Fix issues with `this` keyword

    * Rewrite AnimatedTextbox to make it easier for both Text and Rect within it to be individually animated

    * Improve FrameCreationAnimation and bunch of other fixes

    * Fix some issues with `undefined` inside the control and stash

    * Make compact components the new default and remove any mentions to the old components.
    Also removes the experimental button toggle.

    * Update test snapshots

    * Clean up testing code a little

    * Formatting changes

    * Fix issues after merge

    * Revert some incorrect merges

    * Add FunctionFrameCreationAnimation

    if possible, reusing AssignmentAnimation would make handling fade-in of values easier

    * Add getNodeDimensions and getNodeLocation

    * Add ArrowFunctionExpressionAnimation

    * Add BranchAnimation

    simple animation for replacing a branch item in the control with the correct code block

    * Sort instr types in alphabetical order

    * Add ArrayLiteralAnimation

    * Added cases for block splitting

    for/while loops and conditional expressions

    * Improve animations for arrow functions and branch instruction

    * Update function application animation

    * Special changes for js-slang branch: add new objectCount property and filter program bindings

    * Change dummy binding behavior to match js-slang update

    * Fix array references being lost in frames due to cloning property descriptors

    * Simplify code

    * Add ArrayAccessAnimation

    * Begin work on ArrayAssignmentAnimation

    todo: animate arrows for object assignment

    * Fix application animation for predeclared funcs

    * Changes to solve issue 2700 and some fixes regarding global frame

    * Re-add animations

    * Fix many issues regarding displaying objects on global frame

    * Formatting

    * Simplify merging of environment heaps and drawing of bindings

    * Fix infinite loop in `findObjects`

    * Disable animations if control is truncated

    Could allow such functionality in the future, but currently animations break with a truncated control.

    * Fix AssignmentAnimation

    previous use of binding.height() causes positioning issues with nested array assignment

    * Increase space between closure and frame

    * Change for/while instr to use BranchAnimation

    * Initial Commit

    * More fixes and added faded gc objects

    * Disable variadic function animation

    * Increase spacing for global closure

    between closure circles and global frame border

    * Add missing case 'FunctionExpression'

    animates the moving of a functionexpression to the stash as a closure

    * Fix variadic function checker

    * Improve FunctionApplicationAnimation

    for nullary functions, allow the closure stash item to fade away

    * Improve assignment animation

    * Run format

    * Simplify check frame creation

    * Fix params text and added SourceObject to display runes correctly

    * bumping js-slang

    * Revamp unreferenced behavior and update snapshots

    * Run format

    * Update snapshot

    * Bump js-slang

    * Fix issues after merge

    * Fix frames creeping to the left

    * Improve rune display, revamp color system and add color interpolation

    * UI & animation improvements

    * Big improvements for many animations

    * More improvements, better transitions between border colors

    * More improvements and update snapshot

    * Update types

    * Remove explicit fragment

    * Remove explicit fragment again

    * Update typings

    * Merge branch 'cse-uiux2' of https://github.com/source-academy/frontend into cse-uiux2

    * Fix findObjects

    * Add docs

    * Re-add color dependencies for Java CSE

    * Re-add color dependencies for Java CSE

    * Fix format

    * Array access & asgn animation improvements, general polish

    * Cleanup and update java cse machine colors to use new functions

    * Move type helpers from animation utils to global type helpers file

    * Run format

    * Fix fn to frame arrow, and cleanup arrow code

    ---------

    Co-authored-by: notnotmax <156508404+notnotmax@users.noreply.github.com>
    Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
    Co-authored-by: henz <henz@comp.nus.edu.sg>

commit 4f6be6b6a756174bfa4530fa086f430a339be5eb
Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date:   Sat Apr 13 21:05:41 2024 +0800

    Refactor frontend part 7 (#2846)

    * Improve useRef type arguments for HTML elements

    * Use named imports for React hooks

    * Refactor MobileWorkspace

    * Replace if statements with optional invocation
    * Move constant `SideContentTab`s out of FC body

    * Simplify classnames call

    * Remove unnecessary braces around string attributes

    Only done for non-UI (non-message/label) strings as these UI strings
    will be pulled out for internationalization in the future.

    * Deduplicate dependencies

    * Create `useTokens` hook

    * Update default throw behavior for `useTokens`

    * Render SICP chatbot only when logged in

    * Fix overloaded types for `useTokens`

    Done following default behavior change.

    * Use `useTokens` where applicable

    * Refactor SICP chatbox

    * Use `useTokens`
    * Move API call to separate file
    * Update React import to default import

    * Refactor SICP chatbox further

    * Update imports
    * Create and use ChatMessage type alias

    * Reorganize SICP chatbot files

    * Refactor chat completion logic

    * Use dependency injection in prompt builder
    * Refactor prompt builder logic
    * Refactor prompt builder to separate file
    * Create type definitions
    * Move, type, rename SICP section summaries
    * Improve typing

    * Refactor SICP chat box component

    * Remove unnecessary template literal
    * Refactor constants out of component
    * Create type definitions
    * Create `CONTEXT_SIZE` constant to replace magic numbers
    * Refactor logic to use `CONTEXT_SIZE` constant
    * Remove unnecessary state variables
    * Refactor payload generation
    * Move fetching logic from event handler to effect callback instead
    * Rename `cleanMessage` to `resetChat`

    * Decouple rendering logic from chat completion logic

    * Only store string content in `ChatMessage` type
    * Move rendering function outside component to prevent unnecessary recreation
    * Update render function signature
    * Restore GPT-generated output warning for bot messages
    * Refactor render function logic
    * Fix React render warnings
    * Add TODOs for full Markdown/stories-like parsing

    Also uses non-greedy regex to match and split code blocks:

    * Only match JavaScript code blocks
    * Fix false matches
    * Supports multiple code blocks in a single message

    * Fix whitespace issue

    * Fix filename capitalization

    * Remove duplicated badge code

    * Fix double request

    * Block chat input when loading response

commit c1abec115e489e1271ff6709425396b05c4166fb
Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date:   Sat Apr 13 20:35:47 2024 +0800

    Bump Blueprint; remove obsolete hotfixes, deprecations (#2773)

    * Bump minimum Blueprint version

    Done to allow compatibility with new React 18 `createRoot`.

    * Migrate from deprecated `Tooltip2`, `Popover2`

    Done partially so far, with the full migration in a subsequent commit.

    * Migrate more components to fix deprecations

    * Update test snapshots

    * Migrate remaining components to fix deprecations

    * Remove deprecated package from `requireProvider`

    This would necessitate a corresponding change in modules to ensure they
    don't import the deprecated package, or simply just mark it as
    non-external.

    * Remove `@blueprintjs/popover2` package completely

    * Fix format

    * Fix format

    * Reformat files post-merge

    * Bump Blueprint version

    * Use BP `Classes` utility instead of raw strings

    Prevents regressions when the CSS namespace changes in the meantime
    while we still have yet to migrate away fully from the CSS API.

    * Fix lint

    * Migrate to new notifications API

    Removes the old hotfix now that Blueprint supports it.

commit d2b322a703d07e5df0a6977c4b40778fd129b821
Author: Josh Thoo Jen Sen <110712708+josh1248@users.noreply.github.com>
Date:   Sat Apr 13 20:03:17 2024 +0800

    Implement isGradingPublished (plus related features) (#2856)

    * Dummy publish grading function

    * skeleton redux loop for publishGrading, update GradingOverview

    * New column filter for isPublished (WIP)

    * Implement anticipated backend format and route implementations for publish and unpublish buttons

    * Remove misleading devnote and simplify message contents

    * fix: Change gradingOverviews to use backend response

    * Readjust publish button from HTML icon button to Blueprintjs text button

    * Publish and unpublish buttons set up

    * set up frontend-only type submissionProgress derived from backend status and isPublished

    * Implement derived submissionProgress frontend field from status and isGradingPublished from backend

    * Improve type safety in Grading page

    * Implement business logic to disable unsubmission if published or not submitted

    * Use notPublished param in backend

    * minor type safety change

    * Update new actions post-merge conflicts

    * Update tests

    * Update jsdocs and field names from ungraded to unpublished

    * adjust field names in test from unpublishedFilter to publishedFilter

    * Updated showGrading to be based on published status

    * Update getAssessmentOverviews to compute submission progress

    * Fix tests

    * Scaffold function for comprehensive progress status (WIP)

    * Update RequestsSaga.ts

    * fix crash

    * Introduce soon-to-be comprehensive field into table

    * Shift conversion functions into utils

    * Update business logic using comprehensive state

    * Introduce progress status to assessment overviews

    * clean up display of progressStatus

    * remove derived submissionProgress field, add in status field from backend

    * remove direct gradingStatus use in grading page

    * remove gradingStatus from assessments

    * Remove more references to gradingStatus

    * Replace references to gradingStatus with progress

    * there is a lot of reference to gradingStatus.

    * Replace gradingStatus with progress in testing

    * Fully remove gradingStatus and replace with progress

    * Fix accidental import

    * Update to use new backend parameter names in backend

    * Remove isPublished field entirely from grading overviews to avoid confusion with publishing within assessment overviews

    * Update tests

    * Dummy publish all button in ground control

    * redux loop for publishall and unpublishall (part 1)

    * Remove re-autograde for published or non-submitted assessments

    * Add publishAll button

    * Replace deprecated ag-grid functions with current versions

    * Implement unpublish all button

    * Add unique key, avoid specialkey flag from react

    * Fix button layout

    * Fix button format

    * increase width for accessibility

    * autoPublish settings inserted into admin panel configs

    * cleanup of isAutoPublished field within assessment configs

    * update tests for assessmentConfiguration

    * remove un-needed import

    * remove debug-only submissionStatus in grading submissions table

    * Revert accidental removal of XP field

    * bp5-minimal tag to clean up bulk publishing buttons - thanks gabriel :)

    * Fix errors post-merge

    * Fix lint error

    * feat: Implement published and unpublished notifications and remove deprecated ones

    * chore: Remove commented code

    * Fix compile error

    * Remove unnecessary typecast

    * Remove unnecessary typecast

    * Remove unused import

    * update notification types to reflect backend

    * change notification types to reflect backend changes

    * remove git stash artifacts

    * remove git stash artefacts

    * add tooltips, update assessment fields

    * remove development artifacts

    * remove TODO comment as issue has been raised

    * Update GradingUtils.ts jsdocs

    * linting

    * readjust progress statuses and conversion functions

    * update colours and logos

    * expose backend isGradingPublished field and update tests

    * update assessment cards to show purely based on isGradingPublished status without further check for graded

    * remove hardcoded assessment status

    * linting

    * revert yarn lock change

    * Update yarn.lock

    * update mocks and tests

    * remove un-needed import

    * linting

    * Use enum values instead of strings for color keys

    * Use prop over BP CSS API

    * remove un-needed field calculation, fix typos

    * update student username to show nusnet id instead of duplicating student name (thanks gabriel :D)

    ---------

    Co-authored-by: GabrielCWT <77312579+GabrielCWT@users.noreply.github.com>
    Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>

commit 4556d3fcceb9499a073edf2eb0790db5daf9d7b7
Author: Liew Xin Yi <e0550381@u.nus.edu>
Date:   Sat Apr 13 19:43:51 2024 +0800

    Implement and Integrate `java-slang` CSEC Visualizer (#2926)

    * Update ControlBarChapterSelect with Java

    * Implement Java CSEC Visualizer

    * Integrate CSEC Visualizer

    * Linting errors for java-slang-csec

    * Fix frontend test: rename Object to Obj to avoid potential name clash?

    * Update snapshot

    * Update imports from java-slang

    * Fix lint

    * Update snapshot

    * Fix linting

    * Fix typo

    Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>

    * Add TODO for err source node location

    ---------

    Co-authored-by: joel chan <joelchanzhiyang@gmail.com>
    Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>

commit 612f68b474ea641cf7b31823e935f1528f4e3515
Author: Lai Mei Tin <77192251+1001mei@users.noreply.github.com>
Date:   Sat Apr 13 18:02:16 2024 +0800

    Integrate Java type checker and compiler into frontend (#2925)

    * Integrate Java compiler into frontend

    * Add typechecker from java-slang

    * Add program terminated succesfully output to Java

    * Bump java-slang to 1.0.7

    * Remove program terminated output from java in frontend

    * Change ProgramTerminatedSuccessfully to anonymous class in java

    * Bump java-slang to 1.0.8

    * Bump java-slang to 1.0.9

    * Add process/browser to craco polyfill

    * Add java-parser to jest transform ignore patterns

    * Bump java-slang to 1.0.13

    * Add mocks for java-slang functions

    * Fix wrong error label in java helper

    * Increase max file size to cache to 20

    ---------

    Co-authored-by: Bryan Loh <bryanlohxz@gmail.com>
    Co-authored-by: Martin Henz <henz@comp.nus.edu.sg>

commit d1c0a458436f5057fb3bb4bc35d69285d964a388
Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date:   Sat Apr 13 14:53:02 2024 +0800

    Migrate to Redux Toolkit part 5 (#2866)

    * Migrate remaining workspace reducers to RTK

    * Migrate remaining action creators to RTK

    * Remove `typesafe-actions` dependency

    Type safety is now achieved via Redux Toolkit.

    * Update testcase

    * Fix format

    * Fix compile error

    * Fix errors

    * Restore old NOTIFY_PROGRAM_EVALUATED reducer

    Done to optimize the diff and will be removed later.

commit 0c456069a5a745571aae1bb121ecfc60ba2212a1
Author: Martin Henz <henz@comp.nus.edu.sg>
Date:   Fri Apr 12 12:34:11 2024 +0800

    bumping js-slang (#2929)

commit 02059bf71764a57b6529985efdf68ebd51e10d4d
Author: John Wong <johnwz123@gmail.com>
Date:   Fri Apr 12 01:59:37 2024 +0800

    Modify mobile keyboard to be scrollable (#2915)

    * Modify mobile keyboard to be scrollable

    * Mobile Keyboard is now swipeable

    * Remove mobile-keyboard-row-toggle styles

    * Fix formatting

    * Remove console.log statements

    ---------

    Co-authored-by: Joven Soh <34702990+JovenSoh@users.noreply.github.com>

commit 4cc020404450f6e821ad2246c89c7b555bf63824
Author: John Wong <johnwz123@gmail.com>
Date:   Thu Apr 11 03:28:57 2024 +0800

    Add full-screen button for Playground side content (#2911)

    * Added fullscreen button to playground side content

    * Refactor fullscreen button to use class as reference and Blueprint's Tooltip

    * updating snapshots

    * Remove unnecessary comments

    * Replace icon with button

    For more correct semantics.

    * Remove unnecessary styles

    Following the change from icon to button, `cursor: pointer` is no longer
    needed.

    Also lowered the z-index to a more reasonable value.

    * Fix format

    * Update test snapshots

    ---------

    Co-authored-by: henz <henz@comp.nus.edu.sg>
    Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>

commit e2abe187df040bc9fcc235e5b6455ae8260329ab
Author: John Wong <johnwz123@gmail.com>
Date:   Thu Apr 11 02:16:49 2024 +0800

    Add a fullscreen button for the game div container (#2855)

    * Add a fullscreen button for the game div container

    * Modify code to use the useFullscreen hook from the @mantine/hooks package

    * Bump dependencies

    * Use `IconNames` instead of magic strings

    ---------

    Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
    Co-authored-by: Martin Henz <henz@comp.nus.edu.sg>
    Co-authored-by: Lee Hyung Woon / 이형운 <leehyungwoonsamuel@gmail.com>

commit f4d6e78aefb55c73f10b145a8fc73e2c21aa410d
Author: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date:   Wed Apr 10 16:10:22 2024 +0800

    Fix `xlsx` security vulnerability (#2914)

    * Bump and use recommended XLSX version from CDN

    * Deduplicate dependencies

commit 571f8b750285d2d929b4951ccde45d97d669e7ff
Author: Martin Henz <henz@comp.nus.edu.sg>
Date:   Wed Apr 10 14:31:39 2024 +0800

    bumping js-slang (#2922)

commit c859f1b2e8ad615d64e9d741c3e71e648fe52d8f
Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Date:   Wed Apr 10 14:14:57 2024 +0800

    Bump tar from 6.1.15 to 6.2.1 (#2920)

    Bumps [tar](https://github.com/isaacs/node-tar) from 6.1.15 to 6.2.1.
    - [Release notes](https://github.com/isaacs/node-tar/releases)
    - [Changelog](https://github.com/isaacs/node-tar/blob/main/CHANGELOG.md)
    - [Commits](https://github.com/isaacs/node-tar/compare/v6.1.15...v6.2.1)

    ---
    updated-dependencies:
    - dependency-name: tar
      dependency-type: indirect
    ...

    Signed-off-by: dependabot[bot] <support@github.com>
    Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

commit bb790df146591d36f42341866562a5e3f4b0c349
Author: Martin Henz <henz@comp.nus.edu.sg>
Date:   Wed Apr 10 14:05:51 2024 +0800

    bumping java-slang to 1.0.6 (#2924)

commit 27e318161872723192136f8b638bf40f8270f2e4
Author: Martin Henz <henz@comp.nus.edu.sg>
Date:   Wed Apr 10 13:30:30 2024 +0800

    bumping java-slang to 1.0.5 (#2923)

commit 5dba6a5b719fa70b2d8c82e37b9d2bec9eb2b6f3
Author: CZX <CZX123@users.noreply.github.com>
Date:   Wed Apr 10 07:58:53 2024 +0800

    CSE Machine: Fixes for variadic function & global closures, added faded unreferenced objects (#2906)

    * Initial Commit

    * More fixes and added faded gc objects

    * Run format

    * Fix params text and added SourceObject to display runes correctly

    * bumping js-slang

    * Revamp unreferenced behavior and update snapshots

    * Run format

    * Update snapshot

    * Bump js-slang

    ---------

    Co-authored-by: henz <henz@comp.nus.edu.sg>
---
 .eslintrc.json                                |  10 +-
 craco.config.js                               |   6 +-
 package.json                                  |  22 +-
 src/commons/SimpleDropdown.tsx                |   9 +-
 src/commons/XMLParser/XMLParserHelper.ts      |  16 +-
 .../achievementEditor/AchievementSettings.tsx |   7 +-
 .../AchievementUuidCopier.tsx                 |   7 +-
 .../achievementEditor/EditableCard.tsx        |   7 +-
 .../achievementEditor/EditableDate.tsx        |   7 +-
 .../achievementEditor/EditableView.tsx        |   7 +-
 .../control/common/ItemDeleter.tsx            |   7 +-
 .../achievement/control/common/ItemSaver.tsx  |  11 +-
 .../control/goalEditor/EditableDate.tsx       |   7 +-
 .../control/goalEditor/EditableMeta.tsx       |   7 +-
 .../control/goalEditor/EditableTime.tsx       |   7 +-
 .../metaDetails/EditableAssessmentMeta.tsx    |  11 +-
 .../metaDetails/EditableBinaryMeta.tsx        |  19 +-
 .../metaDetails/EditableEventMeta.tsx         |  15 +-
 .../metaDetails/EditableManualMeta.tsx        |   7 +-
 .../utils/InsertFakeAchievements.ts           |  24 +-
 src/commons/application/ApplicationTypes.ts   |   2 +-
 .../application/actions/SessionActions.ts     |  22 +-
 .../actions/__tests__/SessionActions.ts       |  52 +-
 .../reducers/__tests__/SessionReducer.ts      |  29 +-
 src/commons/application/types/SessionTypes.ts |   2 +
 src/commons/assessment/Assessment.tsx         |  62 +-
 src/commons/assessment/AssessmentTypes.ts     |  31 +-
 .../assessment/__tests__/Assessment.tsx       |   1 +
 .../__tests__/AssessmentWorkspace.tsx         |   1 +
 .../AssessmentWorkspace.tsx.snap              | 128 +++
 .../collabEditing/CollabEditingHelper.ts      |   8 +-
 .../controlBar/ControlBarChapterSelect.tsx    |  11 +-
 .../controlBar/ControlBarEvalButton.tsx       |   6 +-
 .../controlBar/ControlBarExecutionTime.tsx    |   7 +-
 .../ControlBarGoogleDriveButtons.tsx          |  15 +-
 .../controlBar/ControlBarRunButton.tsx        |   7 +-
 .../controlBar/ControlBarSessionButton.tsx    |  28 +-
 .../controlBar/ControlBarShareButton.tsx      |  27 +-
 .../controlBar/ControlBarStepLimit.tsx        |   7 +-
 .../ControlBarToggleEditModeButton.tsx        |   6 +-
 .../ControlBarToggleFolderModeButton.tsx      |   7 +-
 .../github/ControlBarGitHubButtons.tsx        |  11 +-
 src/commons/documentation/Documentation.ts    |  22 +-
 src/commons/dropdown/Dropdown.tsx             |   7 +-
 src/commons/dropdown/DropdownSettings.tsx     |   8 +-
 .../__tests__/__snapshots__/Dropdown.tsx.snap |   4 +-
 .../editingWorkspace/EditingWorkspace.tsx     |   2 +-
 ...itingWorkspaceSideContentAutograderTab.tsx |   1 -
 ...ingWorkspaceSideContentTextAreaContent.tsx |   2 +-
 src/commons/editor/Editor.tsx                 |  21 +-
 src/commons/editor/tabs/utils.ts              |  25 +-
 .../mobileWorkspace/MobileKeyboard.tsx        |  94 ++-
 .../mobileWorkspace/MobileWorkspace.tsx       | 114 +--
 .../mobileSideContent/MobileControlBar.tsx    |   7 +-
 .../mobileSideContent/MobileSideContent.tsx   |   7 +-
 src/commons/mocks/AssessmentMocks.ts          |  53 +-
 src/commons/mocks/BackendMocks.ts             |   5 +-
 src/commons/mocks/GradingMocks.ts             |  24 +-
 src/commons/mocks/UserMocks.ts                |  29 +-
 src/commons/navigationBar/NavigationBar.tsx   |   8 +-
 .../__snapshots__/NavigationBar.tsx.snap      |  60 +-
 .../NavigationBarLangSelectButton.tsx.snap    |   2 +-
 .../notificationBadge/NotificationBadge.tsx   |  17 +-
 .../NotificationBadgeTypes.ts                 |   5 +-
 .../__tests__/NotificationBadge.tsx           |  12 +-
 .../__tests__/NotificationBadgeHelper.ts      |   4 +-
 src/commons/profile/Profile.tsx               |   9 +-
 src/commons/profile/__tests__/Profile.tsx     |   7 +-
 src/commons/sagas/BackendSaga.ts              | 116 ++-
 src/commons/sagas/PlaygroundSaga.ts           |   6 +
 src/commons/sagas/RequestsSaga.ts             | 128 +--
 .../sagas/WorkspaceSaga/helpers/evalCode.ts   |   3 +-
 .../WorkspaceSaga/helpers/updateInspector.ts  |  39 +-
 src/commons/sagas/WorkspaceSaga/index.ts      |   2 +-
 src/commons/sagas/__tests__/BackendSaga.ts    |   8 +-
 src/commons/sideContent/SideContent.tsx       |   7 +-
 src/commons/sideContent/SideContentHelper.ts  |   4 +-
 .../SideContentCseMachine.tsx.snap            |  24 +-
 .../content/SideContentAutograder.tsx         |   7 +-
 .../content/SideContentContestLeaderboard.tsx |   7 +-
 .../content/SideContentContestVoting.tsx      |  11 +-
 .../content/SideContentCseMachine.tsx         | 259 +++---
 .../content/SideContentDataVisualizer.tsx     |   4 +-
 .../content/SideContentFaceapiDisplay.tsx     |   4 +-
 .../sourceRecorder/SourceRecorderEditor.tsx   |   7 +-
 .../SourceRecorderSelectCell.tsx              |   6 +-
 .../SourceRecorderShareCell.tsx               |  14 +-
 .../sourceRecorder/SourceRecorderTable.tsx    |   2 +-
 src/commons/utils/DisplayBufferService.ts     |  10 +-
 src/commons/utils/Hooks.ts                    |  21 +
 src/commons/utils/JavaHelper.ts               | 120 ++-
 src/commons/utils/JsSlangHelper.ts            |   9 +-
 src/commons/utils/TypeHelper.ts               |  65 ++
 .../notifications/createNotification.tsx      |  42 +-
 src/commons/workspace/Workspace.tsx           |  52 +-
 src/commons/workspace/WorkspaceReducer.ts     | 752 +++++++-----------
 .../workspace/__tests__/WorkspaceReducer.ts   | 120 +--
 .../achievement/AchievementActions.ts         |   3 +-
 .../__tests__/AchievementActions.ts           |   3 +-
 src/features/cseMachine/CseMachine.tsx        |   4 +-
 .../cseMachine/CseMachineAnimation.tsx        | 306 +++++--
 src/features/cseMachine/CseMachineConfig.ts   |  34 +-
 .../CseMachineControlStashConfig.ts           |   7 +-
 src/features/cseMachine/CseMachineLayout.tsx  | 157 ++--
 src/features/cseMachine/CseMachineTypes.ts    |  36 +-
 src/features/cseMachine/CseMachineUtils.ts    | 243 +++---
 .../cseMachine/__tests__/CseMachine.tsx       |   2 +-
 .../__snapshots__/CseMachine.tsx.snap         | 478 ++++++-----
 .../AnimationComponents.tsx                   | 223 ------
 .../animationComponents/AnimationUtils.ts     |  11 -
 .../ArrayAccessAnimation.tsx                  | 134 ++++
 .../ArrayAssignmentAnimation.tsx              | 189 +++++
 .../AssignmentAnimation.tsx                   | 131 +++
 .../BinaryOperationAnimation.tsx              | 116 +--
 .../animationComponents/BlockAnimation.tsx    |  63 --
 .../animationComponents/BranchAnimation.tsx   |  68 ++
 .../ControlExpansionAnimation.tsx             |  90 +++
 .../ControlToStashAnimation.tsx               | 104 +++
 .../EnvironmentAnimation.tsx                  |  79 ++
 .../FrameCreationAnimation.tsx                | 202 +++++
 .../FunctionApplicationAnimation.tsx          | 148 ++++
 .../InstructionApplicationAnimation.tsx       | 141 ++++
 .../animationComponents/LiteralAnimation.tsx  |  24 -
 .../animationComponents/LookupAnimation.tsx   | 117 +++
 .../animationComponents/PopAnimation.tsx      |  67 +-
 .../UnaryOperationAnimation.tsx               | 108 ++-
 .../animationComponents/base/Animatable.tsx   |  72 ++
 .../base/AnimatedGenericArrow.tsx             |  77 ++
 .../base/AnimatedTextbox.tsx                  |  72 ++
 .../base/AnimationComponents.tsx              | 217 +++++
 .../base/AnimationUtils.ts                    | 114 +++
 .../cseMachine/components/ArrayEmptyUnit.tsx  |  26 +-
 .../cseMachine/components/ArrayNullUnit.tsx   |   6 +-
 .../cseMachine/components/ArrayUnit.tsx       |  68 +-
 .../cseMachine/components/Binding.tsx         |  26 +-
 .../components/ControlItemComponent.tsx       |  26 +-
 .../cseMachine/components/ControlStack.tsx    |  19 +-
 src/features/cseMachine/components/Frame.tsx  |  72 +-
 .../components/StashItemComponent.tsx         |  34 +-
 .../cseMachine/components/StashStack.tsx      |  18 +-
 src/features/cseMachine/components/Text.tsx   |  57 +-
 .../cseMachine/components/Visible.tsx         |   2 +-
 .../components/arrows/ArrowFromArrayUnit.tsx  |   5 +
 .../arrows/ArrowFromControlItemComponent.tsx  |  24 +-
 .../components/arrows/ArrowFromFn.tsx         |  18 +-
 .../components/arrows/ArrowFromFrame.tsx      |   2 +-
 .../arrows/ArrowFromStashItemComponent.tsx    |  16 +-
 .../components/arrows/GenericArrow.tsx        |  76 +-
 .../components/values/ArrayValue.tsx          |  41 +-
 .../cseMachine/components/values/FnValue.tsx  | 190 +++--
 .../components/values/GlobalFnValue.tsx       | 145 ++--
 .../components/values/PrimitiveValue.tsx      |  28 +-
 .../components/values/UnassignedValue.tsx     |  27 +-
 .../cseMachine/components/values/Value.tsx    |  18 +
 src/features/cseMachine/java/CseMachine.tsx   | 153 ++++
 .../cseMachine/java/components/Arrow.tsx      |  68 ++
 .../cseMachine/java/components/Binding.tsx    |  96 +++
 .../cseMachine/java/components/Control.tsx    | 195 +++++
 .../java/components/ControlItem.tsx           | 153 ++++
 .../java/components/Environment.tsx           | 219 +++++
 .../cseMachine/java/components/Frame.tsx      | 153 ++++
 .../cseMachine/java/components/Line.tsx       |  59 ++
 .../cseMachine/java/components/Method.tsx     | 120 +++
 .../cseMachine/java/components/Object.tsx     |  43 +
 .../cseMachine/java/components/Stash.tsx      |  90 +++
 .../cseMachine/java/components/StashItem.tsx  |  88 ++
 .../cseMachine/java/components/Text.tsx       |  51 ++
 .../cseMachine/java/components/Variable.tsx   | 110 +++
 .../dataVisualizer/drawable/ArrayDrawable.tsx |   6 +-
 src/features/game/location/GameMap.ts         |   5 +-
 .../game/parser/LocationDetailsParser.ts      |   2 +-
 src/features/game/parser/ObjectParser.ts      |   2 +-
 src/features/game/parser/ParserConverter.ts   |  31 +-
 src/features/game/parser/ParserValidator.ts   |   1 +
 src/features/game/phase/GamePhaseManager.ts   |   4 +-
 src/features/game/state/GameStateManager.ts   |  13 +-
 src/features/grading/GradingTypes.ts          |   8 +-
 src/features/grading/GradingUtils.ts          |  98 ++-
 .../groundControl/GroundControlActions.ts     |  14 +-
 .../groundControl/GroundControlTypes.ts       |   2 +
 .../RemoteExecutionDeviceDialog.tsx           |   8 +-
 src/features/sicp/TableOfContentsHelper.ts    |  19 +-
 src/features/sicp/chatCompletion/api.ts       |  23 +
 .../sicp/chatCompletion/chatCompletion.ts     |  22 +
 .../sicp/chatCompletion/sicpNotes.ts}         |   6 +-
 src/index.tsx                                 |   6 +-
 .../subcomponents/AddStoriesUserPanel.tsx     |  12 +-
 .../adminPanel/subcomponents/AddUserPanel.tsx |  12 +-
 .../subcomponents/NotificationConfigPanel.tsx |   2 +-
 .../AssessmentConfigPanel.tsx                 |  38 +-
 .../userConfigPanel/RolesCell.tsx             |   7 +-
 .../userConfigPanel/UserActionsCell.tsx       |  15 +-
 .../userConfigPanel/UserConfigPanel.tsx       |   2 +-
 src/pages/academy/dashboard/Dashboard.tsx     |   2 +-
 src/pages/academy/game/Game.tsx               |  91 ++-
 .../assetViewer/AssetViewerUtils.tsx          |   9 +-
 .../chapterPublisher/ChapterPublisher.tsx     |   3 +-
 .../ChapterPublisherEditor.tsx                |   8 +-
 .../ChapterSimulatorTextLoader.tsx            |   6 +-
 src/pages/academy/grading/Grading.tsx         |   6 +-
 .../grading/subcomponents/GradingActions.tsx  |  56 +-
 .../grading/subcomponents/GradingBadges.tsx   |  57 +-
 .../subcomponents/GradingSubmissionsTable.tsx |  18 +-
 .../academy/groundControl/GroundControl.tsx   |  32 +-
 .../groundControl/GroundControlContainer.ts   |   4 +
 .../ExportScoreLeaderboardButton.tsx          |   6 +-
 .../ExportVoteLeaderboardButton.tsx           |   6 +-
 .../GroundControlPublishCell.tsx              |   2 +-
 .../GroundControlReleaseGradingCell.tsx       | 127 +++
 .../academy/notiPreference/NotiPreference.tsx |   2 +-
 .../subcomponents/TeamFormationBadges.tsx     |  28 +-
 .../subcomponents/TeamFormationTable.tsx      |  14 +-
 src/pages/createStore.ts                      |   3 +-
 src/pages/playground/Playground.tsx           |   4 +-
 .../__snapshots__/Playground.tsx.snap         |  84 +-
 src/pages/sicp/Sicp.tsx                       |  22 +-
 .../sicp/subcomponents/chatbot/ChatBox.tsx    | 187 ++---
 .../sicp/subcomponents/chatbot/Chatbot.tsx    |   3 +-
 src/setupTests.ts                             |   7 +
 src/styles/_game.scss                         |   6 +
 src/styles/_mobileworkspace.scss              |   7 +-
 src/styles/_workspace.scss                    |   7 +
 src/styles/index.scss                         |   1 -
 tsconfig.json                                 |   1 -
 yarn.lock                                     | 505 ++++++------
 225 files changed, 7837 insertions(+), 3298 deletions(-)
 delete mode 100644 src/features/cseMachine/animationComponents/AnimationComponents.tsx
 delete mode 100644 src/features/cseMachine/animationComponents/AnimationUtils.ts
 create mode 100644 src/features/cseMachine/animationComponents/ArrayAccessAnimation.tsx
 create mode 100644 src/features/cseMachine/animationComponents/ArrayAssignmentAnimation.tsx
 create mode 100644 src/features/cseMachine/animationComponents/AssignmentAnimation.tsx
 delete mode 100644 src/features/cseMachine/animationComponents/BlockAnimation.tsx
 create mode 100644 src/features/cseMachine/animationComponents/BranchAnimation.tsx
 create mode 100644 src/features/cseMachine/animationComponents/ControlExpansionAnimation.tsx
 create mode 100644 src/features/cseMachine/animationComponents/ControlToStashAnimation.tsx
 create mode 100644 src/features/cseMachine/animationComponents/EnvironmentAnimation.tsx
 create mode 100644 src/features/cseMachine/animationComponents/FrameCreationAnimation.tsx
 create mode 100644 src/features/cseMachine/animationComponents/FunctionApplicationAnimation.tsx
 create mode 100644 src/features/cseMachine/animationComponents/InstructionApplicationAnimation.tsx
 delete mode 100644 src/features/cseMachine/animationComponents/LiteralAnimation.tsx
 create mode 100644 src/features/cseMachine/animationComponents/LookupAnimation.tsx
 create mode 100644 src/features/cseMachine/animationComponents/base/Animatable.tsx
 create mode 100644 src/features/cseMachine/animationComponents/base/AnimatedGenericArrow.tsx
 create mode 100644 src/features/cseMachine/animationComponents/base/AnimatedTextbox.tsx
 create mode 100644 src/features/cseMachine/animationComponents/base/AnimationComponents.tsx
 create mode 100644 src/features/cseMachine/animationComponents/base/AnimationUtils.ts
 create mode 100644 src/features/cseMachine/java/CseMachine.tsx
 create mode 100644 src/features/cseMachine/java/components/Arrow.tsx
 create mode 100644 src/features/cseMachine/java/components/Binding.tsx
 create mode 100644 src/features/cseMachine/java/components/Control.tsx
 create mode 100644 src/features/cseMachine/java/components/ControlItem.tsx
 create mode 100644 src/features/cseMachine/java/components/Environment.tsx
 create mode 100644 src/features/cseMachine/java/components/Frame.tsx
 create mode 100644 src/features/cseMachine/java/components/Line.tsx
 create mode 100644 src/features/cseMachine/java/components/Method.tsx
 create mode 100644 src/features/cseMachine/java/components/Object.tsx
 create mode 100644 src/features/cseMachine/java/components/Stash.tsx
 create mode 100644 src/features/cseMachine/java/components/StashItem.tsx
 create mode 100644 src/features/cseMachine/java/components/Text.tsx
 create mode 100644 src/features/cseMachine/java/components/Variable.tsx
 create mode 100644 src/features/sicp/chatCompletion/api.ts
 create mode 100644 src/features/sicp/chatCompletion/chatCompletion.ts
 rename src/{pages/sicp/subcomponents/chatbot/SicpNotes.ts => features/sicp/chatCompletion/sicpNotes.ts} (99%)
 create mode 100644 src/pages/academy/groundControl/subcomponents/GroundControlReleaseGradingCell.tsx

diff --git a/.eslintrc.json b/.eslintrc.json
index 727fd51ac7..8d88924918 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,5 +1,11 @@
 {
-  "extends": ["react-app", "plugin:@typescript-eslint/recommended"],
+  "extends": [
+    // "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended"
+    // "plugin:react/recommended",
+    // "plugin:react/jsx-runtime"
+  ],
   "plugins": ["simple-import-sort"],
   "rules": {
     "no-restricted-imports": [
@@ -18,6 +24,8 @@
         ]
       }
     ],
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-duplicate-enum-values": "off",
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/interface-name-prefix": "off",
     "@typescript-eslint/camelcase": "off",
diff --git a/craco.config.js b/craco.config.js
index 6c8c6a5d34..9ced7dac49 100644
--- a/craco.config.js
+++ b/craco.config.js
@@ -18,7 +18,7 @@ const cracoConfig = {
         plugin => plugin.constructor.name === 'InjectManifest'
       );
       if (injectManifestPlugin) {
-        injectManifestPlugin.config.maximumFileSizeToCacheInBytes = 17 * 1024 * 1024;
+        injectManifestPlugin.config.maximumFileSizeToCacheInBytes = 20 * 1024 * 1024;
       }
 
       // add rules to pack WASM (for Sourceror)
@@ -47,9 +47,10 @@ const cracoConfig = {
         'https': require.resolve('https-browserify'),
         'os': require.resolve('os-browserify/browser'),
         'path/posix': require.resolve('path-browserify'),
+        'process/browser': require.resolve('process/browser'),
         'stream': require.resolve('stream-browserify'),
         'timers': require.resolve('timers-browserify'),
-        'url': require.resolve('url/')
+        'url': require.resolve('url/'),
       };
 
       // workaround .mjs files by Acorn
@@ -138,6 +139,7 @@ const cracoConfig = {
           'split-on-first',
           'filter-obj',
           '@sourceacademy/c-slang',
+          'java-parser'
         ),
         '^.+\\.module\\.(css|sass|scss)$'
       ];
diff --git a/package.json b/package.json
index 29676b4681..a06de2f672 100644
--- a/package.json
+++ b/package.json
@@ -26,11 +26,11 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@blueprintjs/core": "^5.7.0",
-    "@blueprintjs/datetime2": "^2.2.7",
-    "@blueprintjs/icons": "^5.5.0",
-    "@blueprintjs/popover2": "^2.0.0",
-    "@blueprintjs/select": "^5.0.0",
+    "@blueprintjs/core": "^5.10.1",
+    "@blueprintjs/datetime2": "^2.3.3",
+    "@blueprintjs/icons": "^5.9.0",
+    "@blueprintjs/select": "^5.1.3",
+    "@mantine/hooks": "^7.7.0",
     "@octokit/rest": "^20.0.0",
     "@reduxjs/toolkit": "^1.9.7",
     "@sentry/browser": "^7.57.0",
@@ -50,8 +50,8 @@
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",
     "hastscript": "^9.0.0",
-    "java-slang": "^1.0.4",
-    "js-slang": "^1.0.62",
+    "js-slang": "^1.0.68",
+    "java-slang": "^1.0.13",
     "js-yaml": "^4.1.0",
     "konva": "^9.2.0",
     "lodash": "^4.17.21",
@@ -91,10 +91,9 @@
     "rehype-react": "^8.0.0",
     "showdown": "^2.1.0",
     "sourceror": "^0.8.5",
-    "typesafe-actions": "^5.1.0",
     "unified": "^11.0.0",
     "uuid": "^9.0.0",
-    "xlsx": "0.18.5",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz",
     "xml2js": "^0.6.0",
     "yareco": "^0.1.5"
   },
@@ -128,6 +127,8 @@
     "@types/showdown": "^2.0.1",
     "@types/uuid": "^9.0.0",
     "@types/xml2js": "^0.4.11",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
     "babel-core": "6",
     "babel-runtime": "^6.26.0",
     "buffer": "^6.0.3",
@@ -135,6 +136,7 @@
     "constants-browserify": "^1.0.0",
     "coveralls": "^3.1.1",
     "cross-env": "^7.0.3",
+    "eslint": "^8.57.0",
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "https-browserify": "^1.0.0",
     "husky": "^9.0.0",
@@ -152,7 +154,7 @@
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "timers-browserify": "^2.0.12",
-    "typescript": "~4.9.0",
+    "typescript": "^5.4.3",
     "url": "^0.11.1",
     "webpack-bundle-analyzer": "^4.9.0"
   },
diff --git a/src/commons/SimpleDropdown.tsx b/src/commons/SimpleDropdown.tsx
index 6aca5c2668..18648f11d6 100644
--- a/src/commons/SimpleDropdown.tsx
+++ b/src/commons/SimpleDropdown.tsx
@@ -1,5 +1,4 @@
-import { Button, Menu, MenuItem } from '@blueprintjs/core';
-import { Popover2 } from '@blueprintjs/popover2';
+import { Button, Menu, MenuItem, Popover } from '@blueprintjs/core';
 
 type OptionType = { value: any; label: string };
 type Props<T extends OptionType> = {
@@ -7,7 +6,7 @@ type Props<T extends OptionType> = {
   selectedValue?: T['value'];
   onClick?: (v: T['value']) => void;
   buttonProps?: Partial<React.ComponentProps<typeof Button> & { 'data-testid': string }>;
-  popoverProps?: Partial<React.ComponentProps<typeof Popover2>>;
+  popoverProps?: Partial<React.ComponentProps<typeof Popover>>;
 };
 
 const SimpleDropdown = <T extends OptionType>({
@@ -27,7 +26,7 @@ const SimpleDropdown = <T extends OptionType>({
   };
 
   return (
-    <Popover2
+    <Popover
       {...popoverProps}
       interactionKind="click"
       content={
@@ -39,7 +38,7 @@ const SimpleDropdown = <T extends OptionType>({
       }
     >
       <Button {...buttonProps}>{buttonLabel()}</Button>
-    </Popover2>
+    </Popover>
   );
 };
 
diff --git a/src/commons/XMLParser/XMLParserHelper.ts b/src/commons/XMLParser/XMLParserHelper.ts
index 0d67017cac..c5d5bb3106 100644
--- a/src/commons/XMLParser/XMLParserHelper.ts
+++ b/src/commons/XMLParser/XMLParserHelper.ts
@@ -9,7 +9,6 @@ import {
   AssessmentType,
   BaseQuestion,
   emptyLibrary,
-  GradingStatuses,
   IMCQQuestion,
   IProgrammingQuestion,
   Library,
@@ -72,6 +71,7 @@ const makeAssessmentOverview = (result: any, maxXpVal: number): AssessmentOvervi
   return {
     type: capitalizeFirstLetter(rawOverview.kind) as AssessmentType,
     isManuallyGraded: true, // TODO: This is temporarily hardcoded to true. To be redone when overhauling MissionControl
+    isPublished: false,
     closeAt: rawOverview.duedate,
     coverImage: rawOverview.coverimage,
     id: EDITING_ID,
@@ -84,8 +84,8 @@ const makeAssessmentOverview = (result: any, maxXpVal: number): AssessmentOvervi
     shortSummary: task.WEBSUMMARY ? task.WEBSUMMARY[0] : '',
     status: AssessmentStatuses.attempting,
     story: rawOverview.story,
+    isGradingPublished: false,
     xp: 0,
-    gradingStatus: 'none' as GradingStatuses,
     maxTeamSize: 1,
     hasVotingFeatures: false
   };
@@ -167,7 +167,11 @@ const makeQuestions = (task: XmlParseStrTask): [Question[], number] => {
 
 const makeMCQ = (problem: XmlParseStrCProblem, question: BaseQuestion): IMCQQuestion => {
   const choicesVal: MCQChoice[] = [];
-  const solution = problem.SNIPPET ? problem.SNIPPET[0].SOLUTION : undefined;
+  const snippet = problem.SNIPPET;
+  // FIXME: I think `XmlParseStrCProblem` type definition is incorrect
+  // FIXME: Remove `as unknown as keyof typeof snippet` when fixed
+  // @ts-expect-error broken type definition to be fixed above
+  const solution = snippet ? snippet[0 as unknown as keyof typeof snippet].SOLUTION : undefined;
   let solutionVal = 0;
   problem.CHOICE.forEach((choice: XmlParseStrProblemChoice, i: number) => {
     choicesVal.push({
@@ -269,7 +273,8 @@ const exportLibrary = (library: Library) => {
         name: library.external.name
       }
     }
-  };
+    // FIXME: Replace any with proper type
+  } as any;
 
   if (library.external.symbols.length !== 0) {
     /* tslint:disable:no-string-literal */
@@ -327,7 +332,8 @@ export const assessmentToXml = (
       },
       TEXT: question.content,
       CHOICE: [] as any[]
-    };
+      // FIXME: Replace any with proper type
+    } as any;
 
     if (question.library.chapter !== -1) {
       /* tslint:disable:no-string-literal */
diff --git a/src/commons/achievement/control/achievementEditor/AchievementSettings.tsx b/src/commons/achievement/control/achievementEditor/AchievementSettings.tsx
index cf92a42bba..aebca34d6a 100644
--- a/src/commons/achievement/control/achievementEditor/AchievementSettings.tsx
+++ b/src/commons/achievement/control/achievementEditor/AchievementSettings.tsx
@@ -1,6 +1,5 @@
-import { Button, Checkbox, Dialog, EditableText } from '@blueprintjs/core';
+import { Button, Checkbox, Dialog, EditableText, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 import { AchievementItem } from 'src/features/achievement/AchievementTypes';
 
@@ -33,9 +32,9 @@ const AchievementSettings: React.FC<Props> = ({
 
   return (
     <>
-      <Tooltip2 content="More Settings">
+      <Tooltip content="More Settings">
         <Button icon={IconNames.WRENCH} onClick={toggleOpen} />
-      </Tooltip2>
+      </Tooltip>
 
       <Dialog title="More Settings" icon={IconNames.WRENCH} isOpen={isOpen} onClose={toggleOpen}>
         <div style={{ padding: '0 0.5em' }}>
diff --git a/src/commons/achievement/control/achievementEditor/AchievementUuidCopier.tsx b/src/commons/achievement/control/achievementEditor/AchievementUuidCopier.tsx
index ed8e550228..de66adfbda 100644
--- a/src/commons/achievement/control/achievementEditor/AchievementUuidCopier.tsx
+++ b/src/commons/achievement/control/achievementEditor/AchievementUuidCopier.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@blueprintjs/core';
+import { Button, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import { showSuccessMessage } from 'src/commons/utils/notifications/NotificationsHelper';
 
@@ -16,9 +15,9 @@ const AchievmenetUuidCopier: React.FC<Props> = ({ uuid }) => {
   };
 
   return (
-    <Tooltip2 content={hoverText}>
+    <Tooltip content={hoverText}>
       <Button icon={IconNames.CLIPBOARD} onClick={copy} />
-    </Tooltip2>
+    </Tooltip>
   );
 };
 
diff --git a/src/commons/achievement/control/achievementEditor/EditableCard.tsx b/src/commons/achievement/control/achievementEditor/EditableCard.tsx
index 62c7ff0369..5eace57263 100644
--- a/src/commons/achievement/control/achievementEditor/EditableCard.tsx
+++ b/src/commons/achievement/control/achievementEditor/EditableCard.tsx
@@ -1,6 +1,5 @@
-import { EditableText, NumericInput } from '@blueprintjs/core';
+import { EditableText, NumericInput, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import { cloneDeep } from 'lodash';
 import React, { useContext, useMemo, useReducer, useState } from 'react';
 
@@ -225,7 +224,7 @@ const EditableCard: React.FC<Props> = ({
           <EditableText onChange={changeTitle} placeholder="Enter your title here" value={title} />
         </h3>
         <div className="xp">
-          <Tooltip2 content="XP">
+          <Tooltip content="XP">
             <NumericInput
               value={xp}
               min={0}
@@ -234,7 +233,7 @@ const EditableCard: React.FC<Props> = ({
               placeholder="XP"
               onValueChange={changeXp}
             />
-          </Tooltip2>
+          </Tooltip>
         </div>
         <div className="details">
           <EditableDate changeDate={changeRelease} date={release} type="Release" />
diff --git a/src/commons/achievement/control/achievementEditor/EditableDate.tsx b/src/commons/achievement/control/achievementEditor/EditableDate.tsx
index 751325508d..4ab15e19f6 100644
--- a/src/commons/achievement/control/achievementEditor/EditableDate.tsx
+++ b/src/commons/achievement/control/achievementEditor/EditableDate.tsx
@@ -1,6 +1,5 @@
-import { Button, Dialog } from '@blueprintjs/core';
+import { Button, Dialog, Tooltip } from '@blueprintjs/core';
 import { DatePicker } from '@blueprintjs/datetime';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 import { prettifyDate } from 'src/commons/achievement/utils/DateHelper';
 
@@ -18,9 +17,9 @@ const EditableDate: React.FC<Props> = ({ type, date, changeDate }) => {
 
   return (
     <>
-      <Tooltip2 content={hoverText}>
+      <Tooltip content={hoverText}>
         <Button minimal={true} onClick={toggleOpen} outlined={true}>{`${type}`}</Button>
-      </Tooltip2>
+      </Tooltip>
       <Dialog
         isCloseButtonShown={false}
         isOpen={isOpen}
diff --git a/src/commons/achievement/control/achievementEditor/EditableView.tsx b/src/commons/achievement/control/achievementEditor/EditableView.tsx
index cbb1184d1b..cc8d3ee53e 100644
--- a/src/commons/achievement/control/achievementEditor/EditableView.tsx
+++ b/src/commons/achievement/control/achievementEditor/EditableView.tsx
@@ -1,6 +1,5 @@
-import { Button, Dialog, EditableText } from '@blueprintjs/core';
+import { Button, Dialog, EditableText, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 import { AchievementView } from 'src/features/achievement/AchievementTypes';
 
@@ -25,9 +24,9 @@ const EditableView: React.FC<Props> = ({ changeView, view }) => {
 
   return (
     <>
-      <Tooltip2 content="Edit View">
+      <Tooltip content="Edit View">
         <Button icon={IconNames.WIDGET_HEADER} onClick={toggleOpen} />
-      </Tooltip2>
+      </Tooltip>
 
       <Dialog title="Edit View" icon={IconNames.WIDGET_HEADER} isOpen={isOpen} onClose={toggleOpen}>
         <div style={{ padding: '0 0.5em' }}>
diff --git a/src/commons/achievement/control/common/ItemDeleter.tsx b/src/commons/achievement/control/common/ItemDeleter.tsx
index 8745815ab9..a60fd33dd9 100644
--- a/src/commons/achievement/control/common/ItemDeleter.tsx
+++ b/src/commons/achievement/control/common/ItemDeleter.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@blueprintjs/core';
+import { Button, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import { showSimpleConfirmDialog } from 'src/commons/utils/DialogHelper';
 
@@ -23,9 +22,9 @@ const ItemDeleter: React.FC<Props> = ({ deleteItem, item }) => {
   };
 
   return (
-    <Tooltip2 content="Delete">
+    <Tooltip content="Delete">
       <Button icon={IconNames.TRASH} intent="danger" onClick={confirmDelete} />
-    </Tooltip2>
+    </Tooltip>
   );
 };
 
diff --git a/src/commons/achievement/control/common/ItemSaver.tsx b/src/commons/achievement/control/common/ItemSaver.tsx
index cdb37181b8..828999a31d 100644
--- a/src/commons/achievement/control/common/ItemSaver.tsx
+++ b/src/commons/achievement/control/common/ItemSaver.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@blueprintjs/core';
+import { Button, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import {
   showSuccessMessage,
@@ -25,13 +24,13 @@ const ItemSaver: React.FC<Props> = ({ discardChanges, saveChanges }) => {
 
   return (
     <>
-      <Tooltip2 content="Save Changes">
+      <Tooltip content="Save Changes">
         <Button icon={IconNames.FLOPPY_DISK} intent="primary" onClick={handleSaveChanges} />
-      </Tooltip2>
+      </Tooltip>
 
-      <Tooltip2 content="Discard Changes">
+      <Tooltip content="Discard Changes">
         <Button icon={IconNames.CROSS} intent="danger" onClick={handleDiscardChanges} />
-      </Tooltip2>
+      </Tooltip>
     </>
   );
 };
diff --git a/src/commons/achievement/control/goalEditor/EditableDate.tsx b/src/commons/achievement/control/goalEditor/EditableDate.tsx
index 751325508d..4ab15e19f6 100644
--- a/src/commons/achievement/control/goalEditor/EditableDate.tsx
+++ b/src/commons/achievement/control/goalEditor/EditableDate.tsx
@@ -1,6 +1,5 @@
-import { Button, Dialog } from '@blueprintjs/core';
+import { Button, Dialog, Tooltip } from '@blueprintjs/core';
 import { DatePicker } from '@blueprintjs/datetime';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 import { prettifyDate } from 'src/commons/achievement/utils/DateHelper';
 
@@ -18,9 +17,9 @@ const EditableDate: React.FC<Props> = ({ type, date, changeDate }) => {
 
   return (
     <>
-      <Tooltip2 content={hoverText}>
+      <Tooltip content={hoverText}>
         <Button minimal={true} onClick={toggleOpen} outlined={true}>{`${type}`}</Button>
-      </Tooltip2>
+      </Tooltip>
       <Dialog
         isCloseButtonShown={false}
         isOpen={isOpen}
diff --git a/src/commons/achievement/control/goalEditor/EditableMeta.tsx b/src/commons/achievement/control/goalEditor/EditableMeta.tsx
index 665b2a7b30..a2d9a32ab7 100644
--- a/src/commons/achievement/control/goalEditor/EditableMeta.tsx
+++ b/src/commons/achievement/control/goalEditor/EditableMeta.tsx
@@ -1,5 +1,4 @@
-import { Button, MenuItem } from '@blueprintjs/core';
-import { Tooltip2 } from '@blueprintjs/popover2';
+import { Button, MenuItem, Tooltip } from '@blueprintjs/core';
 import { ItemRenderer, Select } from '@blueprintjs/select';
 import React from 'react';
 import {
@@ -51,7 +50,7 @@ const EditableMeta: React.FC<Props> = ({ changeMeta, meta }) => {
 
   return (
     <>
-      <Tooltip2 content="Change Goal Type">
+      <Tooltip content="Change Goal Type">
         <TypeSelect
           filterable={false}
           itemRenderer={typeRenderer}
@@ -60,7 +59,7 @@ const EditableMeta: React.FC<Props> = ({ changeMeta, meta }) => {
         >
           <Button minimal={true} outlined={true} text={type} />
         </TypeSelect>
-      </Tooltip2>
+      </Tooltip>
       {editableMetaDetails(type)}
     </>
   );
diff --git a/src/commons/achievement/control/goalEditor/EditableTime.tsx b/src/commons/achievement/control/goalEditor/EditableTime.tsx
index 36374356f5..67d9b36539 100644
--- a/src/commons/achievement/control/goalEditor/EditableTime.tsx
+++ b/src/commons/achievement/control/goalEditor/EditableTime.tsx
@@ -1,6 +1,5 @@
-import { Button, Dialog } from '@blueprintjs/core';
+import { Button, Dialog, Tooltip } from '@blueprintjs/core';
 import { TimePicker } from '@blueprintjs/datetime';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 import { prettifyTime } from 'src/commons/achievement/utils/DateHelper';
 
@@ -18,9 +17,9 @@ const EditableTime: React.FC<Props> = ({ type, time, changeTime }) => {
 
   return (
     <>
-      <Tooltip2 content={hoverText}>
+      <Tooltip content={hoverText}>
         <Button minimal={true} onClick={toggleOpen} outlined={true}>{`${type}`}</Button>
-      </Tooltip2>
+      </Tooltip>
       <Dialog
         isCloseButtonShown={false}
         isOpen={isOpen}
diff --git a/src/commons/achievement/control/goalEditor/metaDetails/EditableAssessmentMeta.tsx b/src/commons/achievement/control/goalEditor/metaDetails/EditableAssessmentMeta.tsx
index cbd42deb3c..5780f29170 100644
--- a/src/commons/achievement/control/goalEditor/metaDetails/EditableAssessmentMeta.tsx
+++ b/src/commons/achievement/control/goalEditor/metaDetails/EditableAssessmentMeta.tsx
@@ -1,5 +1,4 @@
-import { NumericInput } from '@blueprintjs/core';
-import { Tooltip2 } from '@blueprintjs/popover2';
+import { NumericInput, Tooltip } from '@blueprintjs/core';
 import React from 'react';
 import { AssessmentMeta, GoalMeta } from 'src/features/achievement/AchievementTypes';
 
@@ -21,15 +20,15 @@ const EditableAssessmentMeta: React.FC<Props> = ({ assessmentMeta, changeMeta })
 
   return (
     <>
-      <Tooltip2 content="Assessment Number">
+      <Tooltip content="Assessment Number">
         <NumericInput
           allowNumericCharactersOnly={true}
           onValueChange={changeAssessmentNumber}
           placeholder="Enter assessment number here"
           value={assessmentNumber}
         />
-      </Tooltip2>
-      <Tooltip2 content="Required Completion Percentage">
+      </Tooltip>
+      <Tooltip content="Required Completion Percentage">
         <NumericInput
           allowNumericCharactersOnly={true}
           max={100}
@@ -39,7 +38,7 @@ const EditableAssessmentMeta: React.FC<Props> = ({ assessmentMeta, changeMeta })
           rightElement={<p>%</p>}
           value={requiredCompletionFrac * 100}
         />
-      </Tooltip2>
+      </Tooltip>
     </>
   );
 };
diff --git a/src/commons/achievement/control/goalEditor/metaDetails/EditableBinaryMeta.tsx b/src/commons/achievement/control/goalEditor/metaDetails/EditableBinaryMeta.tsx
index 8fd93115c6..55ef11c495 100644
--- a/src/commons/achievement/control/goalEditor/metaDetails/EditableBinaryMeta.tsx
+++ b/src/commons/achievement/control/goalEditor/metaDetails/EditableBinaryMeta.tsx
@@ -1,6 +1,5 @@
-import { Button, EditableText, MenuItem, NumericInput } from '@blueprintjs/core';
+import { Button, EditableText, MenuItem, NumericInput, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import { ItemRenderer, Select } from '@blueprintjs/select';
 import React from 'react';
 import { BinaryMeta, GoalMeta } from 'src/features/achievement/AchievementTypes';
@@ -113,26 +112,26 @@ const EditableBinaryMeta: React.FC<Props> = ({ binaryMeta, changeMeta }) => {
           idx % 2 === 0 ? (
             // the text to change the condition
             <>
-              <Tooltip2 content="Condition">
+              <Tooltip content="Condition">
                 <EditableText
                   onChange={value => changeConditionArray(value, idx / 2)}
                   multiline={true}
                   placeholder="Enter condition here"
                   value={op}
                 />
-              </Tooltip2>
+              </Tooltip>
               {
                 // should only be deleteable if not the only condition
                 conditions.length > 1 && (
-                  <Tooltip2 content="Delete Condition">
+                  <Tooltip content="Delete Condition">
                     <Button intent="danger" icon="trash" onClick={() => deleteCondition(idx)} />
-                  </Tooltip2>
+                  </Tooltip>
                 )
               }
             </>
           ) : (
             // the button to choose the joiner to use
-            <Tooltip2 content="And/Or">
+            <Tooltip content="And/Or">
               <JoinerSelect
                 filterable={false}
                 itemRenderer={joinerRenderer}
@@ -141,7 +140,7 @@ const EditableBinaryMeta: React.FC<Props> = ({ binaryMeta, changeMeta }) => {
               >
                 <Button minimal={true} outlined={true} text={op} />
               </JoinerSelect>
-            </Tooltip2>
+            </Tooltip>
           )
         }
       </div>
@@ -150,7 +149,7 @@ const EditableBinaryMeta: React.FC<Props> = ({ binaryMeta, changeMeta }) => {
 
   return (
     <>
-      <Tooltip2 content="Target Count">
+      <Tooltip content="Target Count">
         <NumericInput
           allowNumericCharactersOnly={true}
           leftIcon={IconNames.BANK_ACCOUNT}
@@ -159,7 +158,7 @@ const EditableBinaryMeta: React.FC<Props> = ({ binaryMeta, changeMeta }) => {
           placeholder="Enter target count here"
           value={targetCount}
         />
-      </Tooltip2>
+      </Tooltip>
       {generateConditions()}
       <br />
       <Button minimal={true} outlined={true} text="Add Condition" onClick={addCondition} />
diff --git a/src/commons/achievement/control/goalEditor/metaDetails/EditableEventMeta.tsx b/src/commons/achievement/control/goalEditor/metaDetails/EditableEventMeta.tsx
index 7089660cff..2efc4a8fc2 100644
--- a/src/commons/achievement/control/goalEditor/metaDetails/EditableEventMeta.tsx
+++ b/src/commons/achievement/control/goalEditor/metaDetails/EditableEventMeta.tsx
@@ -1,6 +1,5 @@
-import { Button, MenuItem, NumericInput } from '@blueprintjs/core';
+import { Button, MenuItem, NumericInput, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import { ItemRenderer, Select } from '@blueprintjs/select';
 import React from 'react';
 import { EventMeta, EventType, GoalMeta } from 'src/features/achievement/AchievementTypes';
@@ -54,7 +53,7 @@ const EditableEventMeta: React.FC<Props> = ({ changeMeta, eventMeta }) => {
 
   const generateEventNames = () => {
     return eventNames.map((eventName, index) => (
-      <Tooltip2 content={'Change event type ' + index} key={index}>
+      <Tooltip content={'Change event type ' + index} key={index}>
         <EventSelect
           filterable={false}
           items={Object.values(EventType)}
@@ -63,7 +62,7 @@ const EditableEventMeta: React.FC<Props> = ({ changeMeta, eventMeta }) => {
         >
           <Button outlined={true} text={eventName} />
         </EventSelect>
-      </Tooltip2>
+      </Tooltip>
     ));
   };
 
@@ -75,10 +74,10 @@ const EditableEventMeta: React.FC<Props> = ({ changeMeta, eventMeta }) => {
   return (
     <>
       {generateEventNames()}
-      <Tooltip2 content="Add Event">
+      <Tooltip content="Add Event">
         <Button outlined={true} text={'Add Event'} onClick={addEvent} />
-      </Tooltip2>
-      <Tooltip2 content="Target Count">
+      </Tooltip>
+      <Tooltip content="Target Count">
         <NumericInput
           allowNumericCharactersOnly={true}
           leftIcon={IconNames.LOCATE}
@@ -87,7 +86,7 @@ const EditableEventMeta: React.FC<Props> = ({ changeMeta, eventMeta }) => {
           placeholder="Enter target count here"
           value={targetCount}
         />
-      </Tooltip2>
+      </Tooltip>
       <br />
       <EditableDate type="Release" date={release} changeDate={changeRelease} />
       <EditableDate type="Deadline" date={deadline} changeDate={changeDeadline} />
diff --git a/src/commons/achievement/control/goalEditor/metaDetails/EditableManualMeta.tsx b/src/commons/achievement/control/goalEditor/metaDetails/EditableManualMeta.tsx
index 6f500ab972..549d4991c0 100644
--- a/src/commons/achievement/control/goalEditor/metaDetails/EditableManualMeta.tsx
+++ b/src/commons/achievement/control/goalEditor/metaDetails/EditableManualMeta.tsx
@@ -1,6 +1,5 @@
-import { NumericInput } from '@blueprintjs/core';
+import { NumericInput, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import { GoalMeta, ManualMeta } from 'src/features/achievement/AchievementTypes';
 
@@ -16,7 +15,7 @@ const EditableManualMeta: React.FC<Props> = ({ changeMeta, manualMeta }) => {
     changeMeta({ ...manualMeta, targetCount: targetCount });
 
   return (
-    <Tooltip2 content="Target Count">
+    <Tooltip content="Target Count">
       <NumericInput
         allowNumericCharactersOnly={true}
         leftIcon={IconNames.BANK_ACCOUNT}
@@ -25,7 +24,7 @@ const EditableManualMeta: React.FC<Props> = ({ changeMeta, manualMeta }) => {
         placeholder="Enter target count here"
         value={targetCount}
       />
-    </Tooltip2>
+    </Tooltip>
   );
 };
 
diff --git a/src/commons/achievement/utils/InsertFakeAchievements.ts b/src/commons/achievement/utils/InsertFakeAchievements.ts
index 81dbef4901..866b549cbf 100644
--- a/src/commons/achievement/utils/InsertFakeAchievements.ts
+++ b/src/commons/achievement/utils/InsertFakeAchievements.ts
@@ -5,15 +5,16 @@ import {
   coverImageUrl
 } from '../../../features/achievement/AchievementConstants';
 import { GoalType } from '../../../features/achievement/AchievementTypes';
-import { AssessmentConfiguration, AssessmentOverview } from '../../assessment/AssessmentTypes';
+import {
+  AssessmentConfiguration,
+  AssessmentOverview,
+  AssessmentStatuses
+} from '../../assessment/AssessmentTypes';
 import AchievementInferencer from './AchievementInferencer';
 import { isExpired, isReleased } from './DateHelper';
 
-function assessmentCompleted(assessmentOverview: AssessmentOverview): boolean {
-  return (
-    assessmentOverview.gradingStatus === 'graded' ||
-    (!assessmentOverview.isManuallyGraded && assessmentOverview.status === 'submitted')
-  );
+function assessmentPublished(assessmentOverview: AssessmentOverview): boolean {
+  return assessmentOverview.isGradingPublished;
 }
 
 function insertFakeAchievements(
@@ -34,7 +35,8 @@ function insertFakeAchievements(
     // Reduce clutter for achievements that cannot be earned at that point
     if (
       !isReleased(new Date(assessmentOverview.openAt)) ||
-      (isExpired(new Date(assessmentOverview.closeAt)) && assessmentOverview.status !== 'submitted')
+      (isExpired(new Date(assessmentOverview.closeAt)) &&
+        assessmentOverview.status !== AssessmentStatuses.submitted)
     ) {
       return;
     }
@@ -53,7 +55,7 @@ function insertFakeAchievements(
             requiredCompletionFrac: 0
           }
         },
-        assessmentOverview.status === 'submitted'
+        assessmentOverview.status === AssessmentStatuses.submitted
       );
 
       // goal for assessment grading
@@ -69,14 +71,14 @@ function insertFakeAchievements(
               requiredCompletionFrac: 0
             }
           },
-          assessmentOverview.gradingStatus === 'graded'
+          assessmentOverview.isGradingPublished
         );
       }
 
       inferencer.insertFakeAchievement({
         uuid: idString,
         title: assessmentOverview.title,
-        xp: assessmentCompleted(assessmentOverview)
+        xp: assessmentPublished(assessmentOverview)
           ? assessmentOverview.xp
           : assessmentOverview.maxXp,
         isVariableXp: false,
@@ -98,7 +100,7 @@ function insertFakeAchievements(
       });
 
       // if completed, add the uuid into the appropriate array
-      if (assessmentCompleted(assessmentOverview)) {
+      if (assessmentPublished(assessmentOverview)) {
         assessmentTypes.forEach((type, idx) => {
           if (type === assessmentOverview.type) {
             categorisedUuids[idx].push(idString);
diff --git a/src/commons/application/ApplicationTypes.ts b/src/commons/application/ApplicationTypes.ts
index 8217b1e149..85e1498ef4 100644
--- a/src/commons/application/ApplicationTypes.ts
+++ b/src/commons/application/ApplicationTypes.ts
@@ -233,7 +233,7 @@ export const javaLanguages: SALanguage[] = [
     variant: Variant.DEFAULT,
     displayName: 'Java',
     mainLanguage: SupportedLanguage.JAVA,
-    supports: {}
+    supports: { cseMachine: true }
   }
 ];
 export const cLanguages: SALanguage[] = [
diff --git a/src/commons/application/actions/SessionActions.ts b/src/commons/application/actions/SessionActions.ts
index c8cbc7d758..85b6098adc 100644
--- a/src/commons/application/actions/SessionActions.ts
+++ b/src/commons/application/actions/SessionActions.ts
@@ -1,7 +1,7 @@
 import { createAction } from '@reduxjs/toolkit';
 import {
   paginationToBackendParams,
-  ungradedToBackendParams
+  unpublishedToBackendParams
 } from 'src/features/grading/GradingUtils';
 import { OptionType } from 'src/pages/academy/teamFormation/subcomponents/TeamFormationForm';
 
@@ -54,6 +54,7 @@ import {
   LOGOUT_GOOGLE,
   NotificationConfiguration,
   NotificationPreference,
+  PUBLISH_GRADING,
   REAUTOGRADE_ANSWER,
   REAUTOGRADE_SUBMISSION,
   REMOVE_GITHUB_OCTOKIT_OBJECT_AND_ACCESS_TOKEN,
@@ -74,6 +75,7 @@ import {
   SUBMIT_GRADING_AND_CONTINUE,
   TimeOption,
   Tokens,
+  UNPUBLISH_GRADING,
   UNSUBMIT_SUBMISSION,
   UPDATE_ASSESSMENT,
   UPDATE_ASSESSMENT_CONFIGS,
@@ -134,7 +136,7 @@ export const fetchGrading = createAction(FETCH_GRADING, (submissionId: number) =
 /**
  * @param filterToGroup - param that when set to true, only shows submissions under the group
  * of the grader
- * @param gradedFilter - backend params to filter to ungraded
+ * @param publishedFilter - backend params to filter to unpublished
  * @param pageParams - param that contains offset and pageSize, informing backend about how
  * many entries, starting from what offset, to get
  * @param filterParams - param that contains columnFilters converted into JSON for
@@ -144,10 +146,10 @@ export const fetchGradingOverviews = createAction(
   FETCH_GRADING_OVERVIEWS,
   (
     filterToGroup = true,
-    gradedFilter = ungradedToBackendParams(false),
+    publishedFilter = unpublishedToBackendParams(false),
     pageParams = paginationToBackendParams(0, 10),
     filterParams = {}
-  ) => ({ payload: { filterToGroup, gradedFilter, pageParams, filterParams } })
+  ) => ({ payload: { filterToGroup, publishedFilter, pageParams, filterParams } })
 );
 
 export const fetchTeamFormationOverviews = createAction(
@@ -326,6 +328,18 @@ export const unsubmitSubmission = createAction(UNSUBMIT_SUBMISSION, (submissionI
   payload: { submissionId }
 }));
 
+/**
+ * Publishing / unpublishing actions
+ */
+
+export const publishGrading = createAction(PUBLISH_GRADING, (submissionId: number) => ({
+  payload: { submissionId }
+}));
+
+export const unpublishGrading = createAction(UNPUBLISH_GRADING, (submissionId: number) => ({
+  payload: { submissionId }
+}));
+
 /**
  * Notification actions
  */
diff --git a/src/commons/application/actions/__tests__/SessionActions.ts b/src/commons/application/actions/__tests__/SessionActions.ts
index c3574e8edc..f83c160065 100644
--- a/src/commons/application/actions/__tests__/SessionActions.ts
+++ b/src/commons/application/actions/__tests__/SessionActions.ts
@@ -2,12 +2,18 @@ import { Chapter, Variant } from 'js-slang/dist/types';
 import { mockStudents } from 'src/commons/mocks/UserMocks';
 import {
   paginationToBackendParams,
-  ungradedToBackendParams
+  unpublishedToBackendParams
 } from 'src/features/grading/GradingUtils';
 
 import { GradingOverviews, GradingQuery } from '../../../../features/grading/GradingTypes';
 import { TeamFormationOverview } from '../../../../features/teamFormation/TeamFormationTypes';
-import { Assessment, AssessmentOverview } from '../../../assessment/AssessmentTypes';
+import {
+  Assessment,
+  AssessmentConfiguration,
+  AssessmentOverview,
+  AssessmentStatuses,
+  ProgressStatuses
+} from '../../../assessment/AssessmentTypes';
 import { Notification } from '../../../notificationBadge/NotificationBadgeTypes';
 import { GameState, Role, Story } from '../../ApplicationTypes';
 import {
@@ -172,7 +178,7 @@ test('fetchGradingOverviews generates correct default action object', () => {
     type: FETCH_GRADING_OVERVIEWS,
     payload: {
       filterToGroup: true,
-      gradedFilter: ungradedToBackendParams(false),
+      publishedFilter: unpublishedToBackendParams(false),
       pageParams: paginationToBackendParams(0, 10),
       filterParams: {}
     }
@@ -181,15 +187,15 @@ test('fetchGradingOverviews generates correct default action object', () => {
 
 test('fetchGradingOverviews generates correct action object', () => {
   const filterToGroup = false;
-  const gradedFilter = ungradedToBackendParams(true);
+  const publishedFilter = unpublishedToBackendParams(true);
   const pageParams = { offset: 123, pageSize: 456 };
   const filterParams = { abc: 'xxx', def: 'yyy' };
-  const action = fetchGradingOverviews(filterToGroup, gradedFilter, pageParams, filterParams);
+  const action = fetchGradingOverviews(filterToGroup, publishedFilter, pageParams, filterParams);
   expect(action).toEqual({
     type: FETCH_GRADING_OVERVIEWS,
     payload: {
       filterToGroup: filterToGroup,
-      gradedFilter: gradedFilter,
+      publishedFilter: publishedFilter,
       pageParams: pageParams,
       filterParams: filterParams
     }
@@ -328,11 +334,12 @@ test('setCourseRegistration generates correct action object', () => {
 });
 
 test('setAssessmentConfigurations generates correct action object', () => {
-  const assesmentConfigurations = [
+  const assesmentConfigurations: AssessmentConfiguration[] = [
     {
       assessmentConfigId: 1,
       type: 'Mission1',
       isManuallyGraded: true,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hasTokenCounter: false,
       hasVotingFeatures: false,
@@ -343,6 +350,7 @@ test('setAssessmentConfigurations generates correct action object', () => {
       assessmentConfigId: 2,
       type: 'Mission2',
       isManuallyGraded: true,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hasTokenCounter: false,
       hasVotingFeatures: false,
@@ -353,6 +361,7 @@ test('setAssessmentConfigurations generates correct action object', () => {
       assessmentConfigId: 3,
       type: 'Mission3',
       isManuallyGraded: true,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hasTokenCounter: false,
       hasVotingFeatures: false,
@@ -533,6 +542,7 @@ test('updateAssessmentOverviews generates correct action object', () => {
     {
       type: 'Missions',
       isManuallyGraded: true,
+      isPublished: false,
       closeAt: 'test_string',
       coverImage: 'test_string',
       id: 0,
@@ -541,10 +551,10 @@ test('updateAssessmentOverviews generates correct action object', () => {
       openAt: 'test_string',
       title: 'test_string',
       shortSummary: 'test_string',
-      status: 'not_attempted',
+      status: AssessmentStatuses.not_attempted,
       story: null,
       xp: 0,
-      gradingStatus: 'none',
+      isGradingPublished: false,
       maxTeamSize: 1,
       hasVotingFeatures: false
     }
@@ -595,9 +605,10 @@ test('updateGradingOverviews generates correct action object', () => {
         studentUsername: 'E0123456',
         studentUsernames: [],
         submissionId: 1,
-        submissionStatus: 'attempting',
+        isGradingPublished: false,
+        progress: ProgressStatuses.attempting,
         groupName: 'group',
-        gradingStatus: 'excluded',
+        submissionStatus: AssessmentStatuses.attempting,
         questionCount: 6,
         gradedCount: 0
       }
@@ -772,6 +783,7 @@ test('updateAssessmentTypes generates correct action object', () => {
       assessmentConfigId: 1,
       type: 'Missions',
       isManuallyGraded: true,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hasTokenCounter: false,
       hasVotingFeatures: false,
@@ -782,6 +794,7 @@ test('updateAssessmentTypes generates correct action object', () => {
       assessmentConfigId: 2,
       type: 'Quests',
       isManuallyGraded: true,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hasTokenCounter: false,
       hasVotingFeatures: false,
@@ -791,7 +804,8 @@ test('updateAssessmentTypes generates correct action object', () => {
     {
       assessmentConfigId: 3,
       type: 'Paths',
-      isManuallyGraded: true,
+      isManuallyGraded: false,
+      isGradingAutoPublished: true,
       displayInDashboard: true,
       hasTokenCounter: false,
       hasVotingFeatures: false,
@@ -802,6 +816,7 @@ test('updateAssessmentTypes generates correct action object', () => {
       assessmentConfigId: 4,
       type: 'Contests',
       isManuallyGraded: true,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hasTokenCounter: false,
       hasVotingFeatures: false,
@@ -810,8 +825,20 @@ test('updateAssessmentTypes generates correct action object', () => {
     },
     {
       assessmentConfigId: 5,
+      type: 'PEs',
+      isManuallyGraded: false,
+      isGradingAutoPublished: false,
+      displayInDashboard: true,
+      hasTokenCounter: false,
+      hasVotingFeatures: false,
+      hoursBeforeEarlyXpDecay: 0,
+      earlySubmissionXp: 0
+    },
+    {
+      assessmentConfigId: 6,
       type: 'Others',
       isManuallyGraded: true,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hasTokenCounter: false,
       hasVotingFeatures: false,
@@ -831,6 +858,7 @@ test('deleteAssessmentConfig generates correct action object', () => {
     assessmentConfigId: 1,
     type: 'Mission1',
     isManuallyGraded: true,
+    isGradingAutoPublished: false,
     displayInDashboard: true,
     hasTokenCounter: false,
     hasVotingFeatures: false,
diff --git a/src/commons/application/reducers/__tests__/SessionReducer.ts b/src/commons/application/reducers/__tests__/SessionReducer.ts
index 80c9e86cfd..ac19971a86 100644
--- a/src/commons/application/reducers/__tests__/SessionReducer.ts
+++ b/src/commons/application/reducers/__tests__/SessionReducer.ts
@@ -5,7 +5,7 @@ import {
   Assessment,
   AssessmentOverview,
   AssessmentStatuses,
-  GradingStatuses
+  ProgressStatuses
 } from '../../../assessment/AssessmentTypes';
 import { Notification } from '../../../notificationBadge/NotificationBadgeTypes';
 import { defaultSession, GameState, Role, Story } from '../../ApplicationTypes';
@@ -158,6 +158,7 @@ test('SET_ASSESSMENT_CONFIGURATIONS works correctly', () => {
       hoursBeforeEarlyXpDecay: 48,
       earlySubmissionXp: 200,
       isManuallyGraded: false,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hasTokenCounter: false,
       hasVotingFeatures: false
@@ -171,6 +172,7 @@ test('SET_ASSESSMENT_CONFIGURATIONS works correctly', () => {
       hoursBeforeEarlyXpDecay: 48,
       earlySubmissionXp: 200,
       isManuallyGraded: false,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hasTokenCounter: false,
       hasVotingFeatures: false
@@ -184,6 +186,7 @@ test('SET_ASSESSMENT_CONFIGURATIONS works correctly', () => {
       hoursBeforeEarlyXpDecay: 48,
       earlySubmissionXp: 200,
       isManuallyGraded: false,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hasTokenCounter: false,
       hasVotingFeatures: false
@@ -331,6 +334,7 @@ const assessmentOverviewsTest1: AssessmentOverview[] = [
   {
     type: 'Missions',
     isManuallyGraded: true,
+    isPublished: false,
     closeAt: 'test_string',
     coverImage: 'test_string',
     id: 0,
@@ -342,7 +346,7 @@ const assessmentOverviewsTest1: AssessmentOverview[] = [
     status: AssessmentStatuses.not_attempted,
     story: null,
     xp: 0,
-    gradingStatus: GradingStatuses.none,
+    isGradingPublished: false,
     maxTeamSize: 5,
     hasVotingFeatures: false
   }
@@ -352,6 +356,7 @@ const assessmentOverviewsTest2: AssessmentOverview[] = [
   {
     type: 'Contests',
     isManuallyGraded: true,
+    isPublished: false,
     closeAt: 'test_string_0',
     coverImage: 'test_string_0',
     fileName: 'test_sting_0',
@@ -364,7 +369,7 @@ const assessmentOverviewsTest2: AssessmentOverview[] = [
     status: AssessmentStatuses.attempted,
     story: null,
     xp: 1,
-    gradingStatus: GradingStatuses.grading,
+    isGradingPublished: false,
     maxTeamSize: 1,
     hasVotingFeatures: false
   }
@@ -537,11 +542,12 @@ const gradingOverviewTest1: GradingOverview[] = [
     studentUsername: 'E0123456',
     studentUsernames: [],
     submissionId: 1,
-    submissionStatus: 'attempting',
+    submissionStatus: AssessmentStatuses.attempting,
+    progress: ProgressStatuses.attempting,
+    isGradingPublished: false,
     groupName: 'group',
-    gradingStatus: 'excluded',
-    questionCount: 0,
-    gradedCount: 6
+    questionCount: 4,
+    gradedCount: 2
   }
 ];
 
@@ -562,11 +568,12 @@ const gradingOverviewTest2: GradingOverview[] = [
     studentUsername: 'E0000000',
     studentUsernames: [],
     submissionId: 2,
-    submissionStatus: 'attempted',
+    submissionStatus: AssessmentStatuses.attempted,
+    progress: ProgressStatuses.graded,
+    isGradingPublished: false,
     groupName: 'another group',
-    gradingStatus: 'excluded',
-    questionCount: 6,
-    gradedCount: 0
+    questionCount: 3,
+    gradedCount: 3
   }
 ];
 
diff --git a/src/commons/application/types/SessionTypes.ts b/src/commons/application/types/SessionTypes.ts
index 39eaeae823..64799cde16 100644
--- a/src/commons/application/types/SessionTypes.ts
+++ b/src/commons/application/types/SessionTypes.ts
@@ -34,6 +34,7 @@ export const LOGIN = 'LOGIN';
 export const LOGOUT_GOOGLE = 'LOGOUT_GOOGLE';
 export const LOGIN_GITHUB = 'LOGIN_GITHUB';
 export const LOGOUT_GITHUB = 'LOGOUT_GITHUB';
+export const PUBLISH_GRADING = 'PUBLISH_GRADING';
 export const SET_TOKENS = 'SET_TOKENS';
 export const SET_USER = 'SET_USER';
 export const SET_COURSE_CONFIGURATION = 'SET_COURSE_CONFIGURATION';
@@ -51,6 +52,7 @@ export const REAUTOGRADE_SUBMISSION = 'REAUTOGRADE_SUBMISSION';
 export const REAUTOGRADE_ANSWER = 'REAUTOGRADE_ANSWER';
 export const REMOVE_GITHUB_OCTOKIT_OBJECT_AND_ACCESS_TOKEN =
   'REMOVE_GITHUB_OCTOKIT_OBJECT_AND_ACCESS_TOKEN';
+export const UNPUBLISH_GRADING = 'UNPUBLISH_GRADING';
 export const UNSUBMIT_SUBMISSION = 'UNSUBMIT_SUBMISSION';
 export const UPDATE_ASSESSMENT_OVERVIEWS = 'UPDATE_ASSESSMENT_OVERVIEWS';
 export const UPDATE_TOTAL_XP = 'UPDATE_TOTAL_XP';
diff --git a/src/commons/assessment/Assessment.tsx b/src/commons/assessment/Assessment.tsx
index 87ec4ba7c3..a4cbd75279 100644
--- a/src/commons/assessment/Assessment.tsx
+++ b/src/commons/assessment/Assessment.tsx
@@ -14,10 +14,10 @@ import {
   NonIdealState,
   Position,
   Spinner,
-  Text
+  Text,
+  Tooltip
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import { sortBy } from 'lodash';
 import React, { useMemo, useState } from 'react';
@@ -50,8 +50,7 @@ import {
   AssessmentConfiguration,
   AssessmentOverview,
   AssessmentStatuses,
-  AssessmentWorkspaceParams,
-  GradingStatuses
+  AssessmentWorkspaceParams
 } from './AssessmentTypes';
 
 export type AssessmentProps = {
@@ -161,10 +160,8 @@ const Assessment: React.FC<AssessmentProps> = props => {
     overview: AssessmentOverview,
     index: number,
     renderAttemptButton: boolean,
-    renderGradingStatus: boolean
+    renderGradingTooltip: boolean
   ) => {
-    const showGrade =
-      overview.gradingStatus === 'graded' || !props.assessmentConfiguration.isManuallyGraded;
     return (
       <div key={index}>
         <Card className="row listing" elevation={Elevation.ONE}>
@@ -181,10 +178,12 @@ const Assessment: React.FC<AssessmentProps> = props => {
             />
           </div>
           <div className={classNames('listing-text', !isMobileBreakpoint && 'col-xs-9')}>
-            {makeOverviewCardTitle(overview, index, renderGradingStatus)}
+            {makeOverviewCardTitle(overview, index, renderGradingTooltip)}
             <div className="listing-xp">
               <H6>
-                {showGrade ? `XP: ${overview.xp} / ${overview.maxXp}` : `Max XP: ${overview.maxXp}`}
+                {overview.isGradingPublished
+                  ? `XP: ${overview.xp} / ${overview.maxXp}`
+                  : `Max XP: ${overview.maxXp}`}
               </H6>
             </div>
             <div className="listing-description">
@@ -227,21 +226,21 @@ const Assessment: React.FC<AssessmentProps> = props => {
   const makeOverviewCardTitle = (
     overview: AssessmentOverview,
     index: number,
-    renderGradingStatus: boolean
+    renderProgressStatus: boolean
   ) => (
     <div className="listing-header">
       <Text ellipsize={true}>
         <H4 className="listing-title">
           {overview.title}
           {overview.private ? (
-            <Tooltip2
+            <Tooltip
               className="listing-title-tooltip"
               content="This assessment is password-protected."
             >
               <Icon icon="lock" />
-            </Tooltip2>
+            </Tooltip>
           ) : null}
-          {renderGradingStatus ? makeGradingStatus(overview.gradingStatus) : null}
+          {renderProgressStatus ? showGradingTooltip(overview.isGradingPublished) : null}
         </H4>
       </Text>
       <div className="listing-button">{makeSubmissionButton(overview, index)}</div>
@@ -421,39 +420,26 @@ const Assessment: React.FC<AssessmentProps> = props => {
   );
 };
 
-const makeGradingStatus = (gradingStatus: string) => {
+const showGradingTooltip = (isGradingPublished: boolean) => {
   let iconName: IconName;
   let intent: Intent;
   let tooltip: string;
 
-  switch (gradingStatus) {
-    case GradingStatuses.graded:
-      iconName = IconNames.TICK;
-      intent = Intent.SUCCESS;
-      tooltip = 'Fully graded';
-      break;
-    case GradingStatuses.grading:
-      iconName = IconNames.TIME;
-      intent = Intent.WARNING;
-      tooltip = 'Grading in progress';
-      break;
-    case GradingStatuses.none:
-      iconName = IconNames.CROSS;
-      intent = Intent.DANGER;
-      tooltip = 'Not graded yet';
-      break;
-    default:
-      // Shows default icon if this assessment is ungraded
-      iconName = IconNames.DISABLE;
-      intent = Intent.PRIMARY;
-      tooltip = `Not applicable`;
-      break;
+  if (isGradingPublished) {
+    iconName = IconNames.TICK;
+    intent = Intent.SUCCESS;
+    tooltip = 'Fully graded';
+  } else {
+    // shh, hide actual grading progress from users even if graded
+    iconName = IconNames.TIME;
+    intent = Intent.WARNING;
+    tooltip = 'Grading in progress';
   }
 
   return (
-    <Tooltip2 className="listing-title-tooltip" content={tooltip} placement={Position.RIGHT}>
+    <Tooltip className="listing-title-tooltip" content={tooltip} placement={Position.RIGHT}>
       <Icon icon={iconName} intent={intent} />
-    </Tooltip2>
+    </Tooltip>
   );
 };
 
diff --git a/src/commons/assessment/AssessmentTypes.ts b/src/commons/assessment/AssessmentTypes.ts
index 6c9c8be7a4..e61ea9e5b5 100644
--- a/src/commons/assessment/AssessmentTypes.ts
+++ b/src/commons/assessment/AssessmentTypes.ts
@@ -13,19 +13,26 @@ export enum AssessmentStatuses {
 }
 export type AssessmentStatus = keyof typeof AssessmentStatuses;
 
+// Devnote: If adjusting this, ensure that each status can be uniquely attributed to one set of backend parameters, and vice versa.
+// This allows for a clean conversion from progress status to backend parameters, ensuring only backend pagination.
+// Adjust the conversion functions in GradingUtils accordingly.
+export enum ProgressStatuses {
+  autograded = 'autograded',
+  not_attempted = 'not_attempted',
+  attempting = 'attempting',
+  attempted = 'attempted',
+  submitted = 'submitted',
+  graded = 'graded',
+  published = 'published'
+}
+
+export type ProgressStatus = keyof typeof ProgressStatuses;
+
 export type AssessmentWorkspaceParams = {
   assessmentId?: string;
   questionId?: string;
 };
 
-export enum GradingStatuses {
-  excluded = 'excluded',
-  graded = 'graded',
-  grading = 'grading',
-  none = 'none'
-}
-export type GradingStatus = keyof typeof GradingStatuses;
-
 export type AssessmentType = string;
 
 export enum TestcaseTypes {
@@ -59,9 +66,8 @@ export type AssessmentOverview = {
   closeAt: string;
   coverImage: string;
   fileName?: string; // For mission control
-  gradingStatus: GradingStatus;
   id: number;
-  isPublished?: boolean;
+  isPublished?: boolean; // refers to assessment as a whole being published
   hasVotingFeatures: boolean;
   hasTokenCounter?: boolean;
   isVotingPublished?: boolean;
@@ -70,6 +76,7 @@ export type AssessmentOverview = {
   number?: string; // For mission control
   openAt: string;
   private?: boolean;
+  isGradingPublished: boolean; // refers to specific assessment submission being published
   reading?: string; // For mission control
   shortSummary: string;
   status: AssessmentStatus;
@@ -98,6 +105,7 @@ export type AssessmentConfiguration = {
   assessmentConfigId: number;
   type: AssessmentType;
   isManuallyGraded: boolean;
+  isGradingAutoPublished: boolean;
   displayInDashboard: boolean;
   hoursBeforeEarlyXpDecay: number;
   earlySubmissionXp: number;
@@ -242,6 +250,7 @@ export const overviewTemplate = (): AssessmentOverview => {
     closeAt: '2100-12-01T00:00+08',
     coverImage: 'https://fakeimg.pl/300/',
     id: -1,
+    isPublished: false,
     maxXp: 0,
     earlySubmissionXp: 0,
     openAt: '2000-01-01T00:00+08',
@@ -250,8 +259,8 @@ export const overviewTemplate = (): AssessmentOverview => {
     shortSummary: 'Insert short summary here',
     status: AssessmentStatuses.not_attempted,
     story: 'mission',
+    isGradingPublished: false,
     xp: 0,
-    gradingStatus: 'none',
     maxTeamSize: 1,
     hasVotingFeatures: false
   };
diff --git a/src/commons/assessment/__tests__/Assessment.tsx b/src/commons/assessment/__tests__/Assessment.tsx
index 1863ffe91e..739d97b941 100644
--- a/src/commons/assessment/__tests__/Assessment.tsx
+++ b/src/commons/assessment/__tests__/Assessment.tsx
@@ -16,6 +16,7 @@ const mockAssessmentProps = assertType<AssessmentProps>()({
     assessmentConfigId: 1,
     type: 'Missions',
     isManuallyGraded: true,
+    isGradingAutoPublished: false,
     displayInDashboard: true,
     hasTokenCounter: false,
     hasVotingFeatures: false,
diff --git a/src/commons/assessmentWorkspace/__tests__/AssessmentWorkspace.tsx b/src/commons/assessmentWorkspace/__tests__/AssessmentWorkspace.tsx
index 34206febe5..7892a814d6 100644
--- a/src/commons/assessmentWorkspace/__tests__/AssessmentWorkspace.tsx
+++ b/src/commons/assessmentWorkspace/__tests__/AssessmentWorkspace.tsx
@@ -25,6 +25,7 @@ const defaultProps = assertType<AssessmentWorkspaceProps>()({
     assessmentConfigId: 1,
     type: 'Missions',
     isManuallyGraded: true,
+    isGradingAutoPublished: false,
     displayInDashboard: true,
     hasTokenCounter: false,
     hasVotingFeatures: false,
diff --git a/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap b/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
index f8fce30095..9b9db5f8e7 100644
--- a/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
+++ b/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
@@ -333,6 +333,34 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
           <div
             class="right-parent"
           >
+            <span
+              class="fullscreen-button bp5-popover-target"
+            >
+              <button
+                aria-expanded="false"
+                class="bp5-button bp5-minimal"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="bp5-icon bp5-icon-maximize"
+                >
+                  <svg
+                    data-icon="maximize"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </span>
             <div
               class="resize-side-content"
               style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -1583,6 +1611,34 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
           <div
             class="right-parent"
           >
+            <span
+              class="fullscreen-button bp5-popover-target"
+            >
+              <button
+                aria-expanded="false"
+                class="bp5-button bp5-minimal"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="bp5-icon bp5-icon-maximize"
+                >
+                  <svg
+                    data-icon="maximize"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </span>
             <div
               class="resize-side-content"
               style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -2363,6 +2419,34 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
           <div
             class="right-parent"
           >
+            <span
+              class="fullscreen-button bp5-popover-target"
+            >
+              <button
+                aria-expanded="false"
+                class="bp5-button bp5-minimal"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="bp5-icon bp5-icon-maximize"
+                >
+                  <svg
+                    data-icon="maximize"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </span>
             <div
               class="resize-side-content"
               style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -3137,6 +3221,22 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
           <div
             class="right-parent"
           >
+            <span
+              class="fullscreen-button bp5-popover-target"
+            >
+              <button
+                aria-expanded="false"
+                class="bp5-button bp5-minimal"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="bp5-icon bp5-icon-standard bp5-icon-maximize"
+                  data-icon="maximize"
+                />
+              </button>
+            </span>
             <div
               class="resize-side-content"
               style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -3863,6 +3963,34 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
           <div
             class="right-parent"
           >
+            <span
+              class="fullscreen-button bp5-popover-target"
+            >
+              <button
+                aria-expanded="false"
+                class="bp5-button bp5-minimal"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="bp5-icon bp5-icon-maximize"
+                >
+                  <svg
+                    data-icon="maximize"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </span>
             <div
               class="resize-side-content"
               style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
diff --git a/src/commons/collabEditing/CollabEditingHelper.ts b/src/commons/collabEditing/CollabEditingHelper.ts
index ddccb15648..c7a5d29ee8 100644
--- a/src/commons/collabEditing/CollabEditingHelper.ts
+++ b/src/commons/collabEditing/CollabEditingHelper.ts
@@ -1,14 +1,14 @@
 import Constants from '../utils/Constants';
 
-const protocolMap = {
+const protocolMap = Object.freeze({
   'http:': 'ws:',
   'https:': 'wss:'
-};
+});
 
 export function getSessionUrl(sessionId: string, ws?: boolean): string {
   const url = new URL(sessionId, Constants.sharedbBackendUrl);
-  if (ws) {
-    url.protocol = protocolMap[url.protocol];
+  if (ws && Object.keys(protocolMap).includes(url.protocol)) {
+    url.protocol = protocolMap[url.protocol as keyof typeof protocolMap];
   }
   return url.toString();
 }
diff --git a/src/commons/controlBar/ControlBarChapterSelect.tsx b/src/commons/controlBar/ControlBarChapterSelect.tsx
index aad0e84e19..c35be486ca 100644
--- a/src/commons/controlBar/ControlBarChapterSelect.tsx
+++ b/src/commons/controlBar/ControlBarChapterSelect.tsx
@@ -1,6 +1,5 @@
-import { Button, Menu, MenuItem } from '@blueprintjs/core';
+import { Button, Menu, MenuItem, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import { ItemListRenderer, ItemRenderer, Select } from '@blueprintjs/select';
 import { Chapter, Variant } from 'js-slang/dist/types';
 import React from 'react';
@@ -9,6 +8,7 @@ import {
   fullJSLanguage,
   fullTSLanguage,
   htmlLanguage,
+  javaLanguages,
   pyLanguages,
   SALanguage,
   schemeLanguages,
@@ -59,13 +59,13 @@ const chapterRenderer: (isFolderModeEnabled: boolean) => ItemRenderer<SALanguage
       ? 'Folder mode makes use of lists which are not available in Source 1. To switch to Source 1, disable Folder mode.'
       : undefined;
     return (
-      <Tooltip2
+      <Tooltip
         key={lang.displayName}
         content={tooltipContent}
         disabled={tooltipContent === undefined}
       >
         <MenuItem onClick={handleClick} text={lang.displayName} disabled={isDisabled} />
-      </Tooltip2>
+      </Tooltip>
     );
   };
 
@@ -87,7 +87,8 @@ export const ControlBarChapterSelect: React.FC<ControlBarChapterSelectProps> = (
     // See https://github.com/source-academy/frontend/pull/2460#issuecomment-1528759912
     ...(Constants.playgroundOnly ? [fullJSLanguage, fullTSLanguage, htmlLanguage] : []),
     ...schemeLanguages,
-    ...pyLanguages
+    ...pyLanguages,
+    ...javaLanguages
   ];
 
   return (
diff --git a/src/commons/controlBar/ControlBarEvalButton.tsx b/src/commons/controlBar/ControlBarEvalButton.tsx
index 67380d2a78..eaee0d38cc 100644
--- a/src/commons/controlBar/ControlBarEvalButton.tsx
+++ b/src/commons/controlBar/ControlBarEvalButton.tsx
@@ -1,5 +1,5 @@
+import { Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 
 import ControlButton from '../ControlButton';
@@ -11,8 +11,8 @@ type Props = {
 
 export const ControlBarEvalButton: React.FC<Props> = ({ handleReplEval, isRunning }) => {
   return isRunning ? null : (
-    <Tooltip2 content="...or press shift-enter in the REPL">
+    <Tooltip content="...or press shift-enter in the REPL">
       <ControlButton label="Eval" icon={IconNames.CODE} onClick={handleReplEval} />
-    </Tooltip2>
+    </Tooltip>
   );
 };
diff --git a/src/commons/controlBar/ControlBarExecutionTime.tsx b/src/commons/controlBar/ControlBarExecutionTime.tsx
index fa3ed4a395..cd11df6784 100644
--- a/src/commons/controlBar/ControlBarExecutionTime.tsx
+++ b/src/commons/controlBar/ControlBarExecutionTime.tsx
@@ -1,6 +1,5 @@
-import { NumericInput, Position } from '@blueprintjs/core';
+import { NumericInput, Position, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 
 type ControlBarExecutionTimeProps = DispatchProps & StateProps;
@@ -16,7 +15,7 @@ type StateProps = {
 
 export const ControlBarExecutionTime: React.FC<ControlBarExecutionTimeProps> = props => {
   return (
-    <Tooltip2 content="Execution Time" placement={Position.TOP}>
+    <Tooltip content="Execution Time" placement={Position.TOP}>
       <NumericInput
         leftIcon={IconNames.TIME}
         style={{ width: 80 }}
@@ -24,6 +23,6 @@ export const ControlBarExecutionTime: React.FC<ControlBarExecutionTimeProps> = p
         value={props.execTime}
         onValueChange={props.handleChangeExecTime}
       />
-    </Tooltip2>
+    </Tooltip>
   );
 };
diff --git a/src/commons/controlBar/ControlBarGoogleDriveButtons.tsx b/src/commons/controlBar/ControlBarGoogleDriveButtons.tsx
index ce70690d60..ff6246eeca 100644
--- a/src/commons/controlBar/ControlBarGoogleDriveButtons.tsx
+++ b/src/commons/controlBar/ControlBarGoogleDriveButtons.tsx
@@ -1,6 +1,5 @@
-import { ButtonGroup, Classes, Intent } from '@blueprintjs/core';
+import { ButtonGroup, Classes, Intent, Popover, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2, Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 
 import { PersistenceFile, PersistenceState } from '../../features/persistence/PersistenceTypes';
@@ -56,17 +55,17 @@ export const ControlBarGoogleDriveButtons: React.FC<Props> = props => {
     <ControlButton label="Save as" icon={IconNames.SEND_TO} onClick={props.onClickSaveAs} />
   );
   const logoutButton = props.loggedInAs && (
-    <Tooltip2 content={`Logged in as ${props.loggedInAs}`}>
+    <Tooltip content={`Logged in as ${props.loggedInAs}`}>
       <ControlButton label="Log out" icon={IconNames.LOG_OUT} onClick={props.onClickLogOut} />
-    </Tooltip2>
+    </Tooltip>
   );
   const tooltipContent = props.isFolderModeEnabled
     ? 'Currently unsupported in Folder mode'
     : undefined;
 
   return (
-    <Tooltip2 content={tooltipContent} disabled={tooltipContent === undefined}>
-      <Popover2
+    <Tooltip content={tooltipContent} disabled={tooltipContent === undefined}>
+      <Popover
         autoFocus={false}
         content={
           <div>
@@ -83,7 +82,7 @@ export const ControlBarGoogleDriveButtons: React.FC<Props> = props => {
         disabled={props.isFolderModeEnabled}
       >
         {mainButton}
-      </Popover2>
-    </Tooltip2>
+      </Popover>
+    </Tooltip>
   );
 };
diff --git a/src/commons/controlBar/ControlBarRunButton.tsx b/src/commons/controlBar/ControlBarRunButton.tsx
index c462356672..a35062fa88 100644
--- a/src/commons/controlBar/ControlBarRunButton.tsx
+++ b/src/commons/controlBar/ControlBarRunButton.tsx
@@ -1,6 +1,5 @@
-import { Position } from '@blueprintjs/core';
+import { Position, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 
 import ControlButton from '../ControlButton';
@@ -23,7 +22,7 @@ export const ControlBarRunButton: React.FC<ControlButtonRunButtonProps> = props
     ? '...or press shift-enter in the editor'
     : 'Open a file to evaluate the program with the file as the entrypoint';
   return (
-    <Tooltip2 content={tooltipContent} placement={Position.TOP}>
+    <Tooltip content={tooltipContent} placement={Position.TOP}>
       <ControlButton
         label="Run"
         icon={IconNames.PLAY}
@@ -31,6 +30,6 @@ export const ControlBarRunButton: React.FC<ControlButtonRunButtonProps> = props
         options={{ iconColor: props.color, className: props.className }}
         isDisabled={!props.isEntrypointFileDefined}
       />
-    </Tooltip2>
+    </Tooltip>
   );
 };
diff --git a/src/commons/controlBar/ControlBarSessionButton.tsx b/src/commons/controlBar/ControlBarSessionButton.tsx
index 0a886b65cc..fd8ff07734 100644
--- a/src/commons/controlBar/ControlBarSessionButton.tsx
+++ b/src/commons/controlBar/ControlBarSessionButton.tsx
@@ -1,6 +1,14 @@
-import { Classes, Colors, Divider, FormGroup, Menu, Text } from '@blueprintjs/core';
+import {
+  Classes,
+  Colors,
+  Divider,
+  FormGroup,
+  Menu,
+  Popover,
+  Text,
+  Tooltip
+} from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2, Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 
@@ -111,13 +119,13 @@ export class ControlBarSessionButtons extends React.PureComponent<
     );
 
     const inviteButton = (
-      <Popover2
+      <Popover
         popoverClassName="Popover-share"
         inheritDarkTheme={false}
         content={inviteButtonPopoverContent}
       >
         <ControlButton label="Invite" icon={IconNames.GRAPH} />
-      </Popover2>
+      </Popover>
     );
 
     const handleStartJoining = (event: React.FormEvent<HTMLFormElement>) => {
@@ -163,13 +171,13 @@ export class ControlBarSessionButtons extends React.PureComponent<
     );
 
     const joinButton = (
-      <Popover2
+      <Popover
         popoverClassName="Popover-share"
         inheritDarkTheme={false}
         content={joinButtonPopoverContent}
       >
         <ControlButton label="Join" icon={IconNames.LOG_IN} />
-      </Popover2>
+      </Popover>
     );
 
     const leaveButton = (
@@ -189,8 +197,8 @@ export class ControlBarSessionButtons extends React.PureComponent<
       : undefined;
 
     return (
-      <Tooltip2 content={tooltipContent} disabled={tooltipContent === undefined}>
-        <Popover2
+      <Tooltip content={tooltipContent} disabled={tooltipContent === undefined}>
+        <Popover
           content={
             <Menu large={true}>
               {inviteButton}
@@ -212,8 +220,8 @@ export class ControlBarSessionButtons extends React.PureComponent<
             }}
             isDisabled={this.props.isFolderModeEnabled}
           />
-        </Popover2>
-      </Tooltip2>
+        </Popover>
+      </Tooltip>
     );
   }
 
diff --git a/src/commons/controlBar/ControlBarShareButton.tsx b/src/commons/controlBar/ControlBarShareButton.tsx
index 9dc49d90b4..7c3464895a 100644
--- a/src/commons/controlBar/ControlBarShareButton.tsx
+++ b/src/commons/controlBar/ControlBarShareButton.tsx
@@ -1,6 +1,13 @@
-import { NonIdealState, Position, Spinner, SpinnerSize, Text } from '@blueprintjs/core';
+import {
+  NonIdealState,
+  Popover,
+  Position,
+  Spinner,
+  SpinnerSize,
+  Text,
+  Tooltip
+} from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2, Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 
@@ -49,11 +56,11 @@ export class ControlBarShareButton extends React.PureComponent<ControlBarShareBu
       ) : this.props.isSicp ? (
         <div>
           <input defaultValue={this.props.queryString!} readOnly={true} ref={this.shareInputElem} />
-          <Tooltip2 content="Copy link to clipboard">
+          <Tooltip content="Copy link to clipboard">
             <CopyToClipboard text={this.props.queryString!}>
               <ControlButton icon={IconNames.DUPLICATE} onClick={this.selectShareInputText} />
             </CopyToClipboard>
-          </Tooltip2>
+          </Tooltip>
         </div>
       ) : (
         <>
@@ -86,26 +93,26 @@ export class ControlBarShareButton extends React.PureComponent<ControlBarShareBu
           ) : (
             <div key={this.props.shortURL}>
               <input defaultValue={this.props.shortURL} readOnly={true} ref={this.shareInputElem} />
-              <Tooltip2 content="Copy link to clipboard">
+              <Tooltip content="Copy link to clipboard">
                 <CopyToClipboard text={this.props.shortURL}>
                   <ControlButton icon={IconNames.DUPLICATE} onClick={this.selectShareInputText} />
                 </CopyToClipboard>
-              </Tooltip2>
+              </Tooltip>
             </div>
           )}
         </>
       );
 
     return (
-      <Popover2
+      <Popover
         popoverClassName="Popover-share"
         inheritDarkTheme={false}
         content={shareButtonPopoverContent}
       >
-        <Tooltip2 content="Get shareable link" placement={Position.TOP}>
+        <Tooltip content="Get shareable link" placement={Position.TOP}>
           <ControlButton label="Share" icon={IconNames.SHARE} onClick={() => this.toggleButton()} />
-        </Tooltip2>
-      </Popover2>
+        </Tooltip>
+      </Popover>
     );
   }
 
diff --git a/src/commons/controlBar/ControlBarStepLimit.tsx b/src/commons/controlBar/ControlBarStepLimit.tsx
index 9b33016222..db95ee00cf 100644
--- a/src/commons/controlBar/ControlBarStepLimit.tsx
+++ b/src/commons/controlBar/ControlBarStepLimit.tsx
@@ -1,6 +1,5 @@
-import { NumericInput, Position } from '@blueprintjs/core';
+import { NumericInput, Position, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 
 type ControlBarStepLimitProps = DispatchProps & StateProps;
@@ -26,7 +25,7 @@ export const ControlBarStepLimit: React.FC<ControlBarStepLimitProps> = props =>
   };
 
   return (
-    <Tooltip2 content="Step Limit" placement={Position.TOP}>
+    <Tooltip content="Step Limit" placement={Position.TOP}>
       <NumericInput
         leftIcon={IconNames.VERTICAL_BAR_CHART_ASC}
         style={{ width: 80 }}
@@ -37,6 +36,6 @@ export const ControlBarStepLimit: React.FC<ControlBarStepLimitProps> = props =>
         onBlur={onBlurAutoScale}
         onValueChange={props.handleChangeStepLimit}
       />
-    </Tooltip2>
+    </Tooltip>
   );
 };
diff --git a/src/commons/controlBar/ControlBarToggleEditModeButton.tsx b/src/commons/controlBar/ControlBarToggleEditModeButton.tsx
index 877b6da2c3..2b96d6756a 100644
--- a/src/commons/controlBar/ControlBarToggleEditModeButton.tsx
+++ b/src/commons/controlBar/ControlBarToggleEditModeButton.tsx
@@ -1,5 +1,5 @@
+import { Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 
 import ControlButton from '../ControlButton';
@@ -15,12 +15,12 @@ export const ControlBarToggleEditModeButton: React.FC<Props> = ({
 }) => {
   const editMode = editingMode === 'question' ? 'Global' : 'Question Specific';
   return (
-    <Tooltip2 content={'Switch to ' + editMode + ' Editing Mode'}>
+    <Tooltip content={'Switch to ' + editMode + ' Editing Mode'}>
       <ControlButton
         label={editMode + ' Editing Mode'}
         icon={IconNames.REFRESH}
         onClick={toggleEditMode}
       />
-    </Tooltip2>
+    </Tooltip>
   );
 };
diff --git a/src/commons/controlBar/ControlBarToggleFolderModeButton.tsx b/src/commons/controlBar/ControlBarToggleFolderModeButton.tsx
index 2735537470..b567cb4ec9 100644
--- a/src/commons/controlBar/ControlBarToggleFolderModeButton.tsx
+++ b/src/commons/controlBar/ControlBarToggleFolderModeButton.tsx
@@ -1,6 +1,5 @@
-import { Colors } from '@blueprintjs/core';
+import { Colors, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 
 import ControlButton from '../ControlButton';
@@ -24,7 +23,7 @@ export const ControlBarToggleFolderModeButton: React.FC<Props> = ({
     ? 'Currently unsupported while a persistence method is active'
     : `${isFolderModeEnabled ? 'Disable' : 'Enable'} Folder mode`;
   return (
-    <Tooltip2 content={tooltipContent}>
+    <Tooltip content={tooltipContent}>
       <ControlButton
         label="Folder"
         icon={IconNames.FOLDER_CLOSE}
@@ -34,6 +33,6 @@ export const ControlBarToggleFolderModeButton: React.FC<Props> = ({
         onClick={toggleFolderMode}
         isDisabled={isSessionActive || isPersistenceActive}
       />
-    </Tooltip2>
+    </Tooltip>
   );
 };
diff --git a/src/commons/controlBar/github/ControlBarGitHubButtons.tsx b/src/commons/controlBar/github/ControlBarGitHubButtons.tsx
index c9e4d761ea..5fb888dbaa 100644
--- a/src/commons/controlBar/github/ControlBarGitHubButtons.tsx
+++ b/src/commons/controlBar/github/ControlBarGitHubButtons.tsx
@@ -1,6 +1,5 @@
-import { ButtonGroup, Classes, Intent } from '@blueprintjs/core';
+import { ButtonGroup, Classes, Intent, Popover, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2, Tooltip2 } from '@blueprintjs/popover2';
 import { Octokit } from '@octokit/rest';
 import React from 'react';
 import { useResponsive } from 'src/commons/utils/Hooks';
@@ -90,8 +89,8 @@ export const ControlBarGitHubButtons: React.FC<Props> = props => {
     : undefined;
 
   return (
-    <Tooltip2 content={tooltipContent} disabled={tooltipContent === undefined}>
-      <Popover2
+    <Tooltip content={tooltipContent} disabled={tooltipContent === undefined}>
+      <Popover
         autoFocus={false}
         content={
           <div>
@@ -107,7 +106,7 @@ export const ControlBarGitHubButtons: React.FC<Props> = props => {
         disabled={props.isFolderModeEnabled}
       >
         {mainButton}
-      </Popover2>
-    </Tooltip2>
+      </Popover>
+    </Tooltip>
   );
 };
diff --git a/src/commons/documentation/Documentation.ts b/src/commons/documentation/Documentation.ts
index 25b1f332bf..f14fc4eb45 100644
--- a/src/commons/documentation/Documentation.ts
+++ b/src/commons/documentation/Documentation.ts
@@ -3,7 +3,14 @@ import { deviceTypes } from 'src/features/remoteExecution/RemoteExecutionTypes';
 
 import { externalLibraries } from '../application/types/ExternalTypes';
 
-const externalLibrariesDocumentation = {};
+type DocType = {
+  caption: string;
+  value: string;
+  meta: string;
+  docHTML?: string;
+};
+
+const externalLibrariesDocumentation: Record<string, DocType[]> = {};
 
 const MAX_CAPTION_LENGTH = 27;
 
@@ -15,13 +22,14 @@ function shortenCaption(name: string): string {
   return (name = name.substring(0, MAX_CAPTION_LENGTH - 3) + '...');
 }
 
-function mapExternalLibraryName(name: string) {
+function mapExternalLibraryName(name: string): DocType {
   if (name in SourceDocumentation.ext_lib) {
+    const key = name as keyof typeof SourceDocumentation.ext_lib;
     return {
-      caption: shortenCaption(name),
-      value: name,
-      meta: SourceDocumentation.ext_lib[name].meta,
-      docHTML: SourceDocumentation.ext_lib[name].description
+      caption: shortenCaption(key),
+      value: key,
+      meta: SourceDocumentation.ext_lib[key].meta,
+      docHTML: SourceDocumentation.ext_lib[key].description
     };
   } else {
     return {
@@ -42,7 +50,7 @@ for (const deviceType of deviceTypes) {
     deviceType.internalFunctions.map(mapExternalLibraryName);
 }
 
-const builtinDocumentation = {};
+const builtinDocumentation: Record<string, DocType[]> = {};
 
 Object.entries(SourceDocumentation.builtins).forEach((chapterDoc: any) => {
   const [chapter, docs] = chapterDoc;
diff --git a/src/commons/dropdown/Dropdown.tsx b/src/commons/dropdown/Dropdown.tsx
index d6beb7b998..cf18838b15 100644
--- a/src/commons/dropdown/Dropdown.tsx
+++ b/src/commons/dropdown/Dropdown.tsx
@@ -1,6 +1,5 @@
-import { Menu, MenuItem, Position } from '@blueprintjs/core';
+import { Menu, MenuItem, Popover, Position } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 
@@ -69,9 +68,9 @@ const Dropdown: React.FC = () => {
 
   return (
     <>
-      <Popover2 content={menu} inheritDarkTheme={false} placement={Position.BOTTOM}>
+      <Popover content={menu} inheritDarkTheme={false} placement={Position.BOTTOM}>
         <ControlButton icon={IconNames.CARET_DOWN} />
-      </Popover2>
+      </Popover>
       <DropdownSettings isOpen={isSettingsOpen} onClose={toggleSettingsOpen} />
       <DropdownAbout isOpen={isAboutOpen} onClose={toggleAboutOpen} />
       <DropdownHelp isOpen={isHelpOpen} onClose={toggleHelpOpen} />
diff --git a/src/commons/dropdown/DropdownSettings.tsx b/src/commons/dropdown/DropdownSettings.tsx
index 5e8c64a9b9..3bb9aec552 100644
--- a/src/commons/dropdown/DropdownSettings.tsx
+++ b/src/commons/dropdown/DropdownSettings.tsx
@@ -4,10 +4,10 @@ import {
   FormGroup,
   HTMLSelect,
   Icon,
-  PopoverPosition
+  PopoverPosition,
+  Tooltip
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React, { useContext } from 'react';
 
 import { EditorBinding, WorkspaceSettingsContext } from '../WorkspaceSettingsContext';
@@ -51,13 +51,13 @@ const DropdownSettings: React.FC<Props> = ({ isOpen, onClose }) => {
             value={workspaceSettings.editorBinding}
             onChange={handleEditorBindingChange}
           />
-          <Tooltip2
+          <Tooltip
             position={PopoverPosition.TOP}
             className="form-field-help-text"
             content="Optional editor bindings for advanced users. Set to 'None' for default text editor behaviour."
           >
             <Icon icon={IconNames.Help} />
-          </Tooltip2>
+          </Tooltip>
         </FormGroup>
       </DialogBody>
     </Dialog>
diff --git a/src/commons/dropdown/__tests__/__snapshots__/Dropdown.tsx.snap b/src/commons/dropdown/__tests__/__snapshots__/Dropdown.tsx.snap
index 8cc3132cfd..bbe96b5fc2 100644
--- a/src/commons/dropdown/__tests__/__snapshots__/Dropdown.tsx.snap
+++ b/src/commons/dropdown/__tests__/__snapshots__/Dropdown.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Dropdown correctly mounts Profile, DropdownCourses, and DropdownCreateCourses components when a user is logged in 1`] = `
 <span
-  className="bp5-popover2-target bp5-popover-target"
+  className="bp5-popover-target"
   onClick={[Function]}
   onKeyDown={[Function]}
 >
@@ -36,7 +36,7 @@ exports[`Dropdown correctly mounts Profile, DropdownCourses, and DropdownCreateC
 
 exports[`Dropdown does not mount Profile, DropdownCourses and DropdownCreateCourses components when a user is not logged in 1`] = `
 <span
-  className="bp5-popover2-target bp5-popover-target"
+  className="bp5-popover-target"
   onClick={[Function]}
   onKeyDown={[Function]}
 >
diff --git a/src/commons/editingWorkspace/EditingWorkspace.tsx b/src/commons/editingWorkspace/EditingWorkspace.tsx
index c684a2923c..0f8c7e091e 100644
--- a/src/commons/editingWorkspace/EditingWorkspace.tsx
+++ b/src/commons/editingWorkspace/EditingWorkspace.tsx
@@ -723,7 +723,7 @@ const EditingWorkspace: React.FC<EditingWorkspaceProps> = props => {
 };
 
 function uniq(a: string[]) {
-  const seen = {};
+  const seen: Record<string, boolean> = {};
   return a.filter(item => (seen.hasOwnProperty(item) ? false : (seen[item] = true)));
 }
 
diff --git a/src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentAutograderTab.tsx b/src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentAutograderTab.tsx
index 0cb676c1b8..f8f056aee8 100644
--- a/src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentAutograderTab.tsx
+++ b/src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentAutograderTab.tsx
@@ -43,7 +43,6 @@ export const AutograderTab: React.FC<AutograderProps> = props => {
       <div>
         <Card className="row listing" elevation={Elevation.ONE}>
           <div className="col-xs-9 listing-text">
-            {/* {makeOverviewCardTitle(overview, index, setBetchaAssessment, renderGradingStatus)} */}
             <div className="row listing-program">
               <H6>
                 Test Program:
diff --git a/src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentTextAreaContent.tsx b/src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentTextAreaContent.tsx
index e737cbeb93..fae6f33720 100644
--- a/src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentTextAreaContent.tsx
+++ b/src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentTextAreaContent.tsx
@@ -57,7 +57,7 @@ export const TextAreaContent: React.FC<TextAreaContentProps> = props => {
   const makeEditingTextarea = () => (
     <Textarea
       autoFocus={true}
-      className={'editing-textarea'}
+      className="editing-textarea"
       onChange={handleEditAssessment}
       onBlur={saveEditAssessment}
       value={fieldValue}
diff --git a/src/commons/editor/Editor.tsx b/src/commons/editor/Editor.tsx
index 1de0039329..6bccbd28b8 100644
--- a/src/commons/editor/Editor.tsx
+++ b/src/commons/editor/Editor.tsx
@@ -1,25 +1,27 @@
 /* eslint-disable simple-import-sort/imports */
-import { Ace, require as acequire, createEditSession } from 'ace-builds';
 import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/src-noconflict/ext-searchbox';
 import 'ace-builds/src-noconflict/ext-settings_menu';
 import 'js-slang/dist/editors/ace/theme/source';
 
+import { Classes } from '@blueprintjs/core';
 import * as AceBuilds from 'ace-builds';
+import { Ace, require as acequire, createEditSession } from 'ace-builds';
+import classNames from 'classnames';
 import { Chapter, Variant } from 'js-slang/dist/types';
 import React from 'react';
 import AceEditor, { IAceEditorProps, IEditorProps } from 'react-ace';
+import { IAceEditor } from 'react-ace/lib/types';
 import { HotKeys } from 'react-hotkeys';
-
-import { keyBindings, KeyFunction } from './EditorHotkeys';
+import { EditorBinding } from '../WorkspaceSettingsContext';
+import { getModeString, selectMode } from '../utils/AceHelper';
+import { objectEntries } from '../utils/TypeHelper';
+import { KeyFunction, keyBindings } from './EditorHotkeys';
 import { AceMouseEvent, HighlightedLines, Position } from './EditorTypes';
 
 // =============== Hooks ===============
 // TODO: Should further refactor into EditorBase + different variants.
 // Ideally, hooks should be specified by the parent component instead.
-import { IAceEditor } from 'react-ace/lib/types';
-import { getModeString, selectMode } from '../utils/AceHelper';
-import { EditorBinding } from '../WorkspaceSettingsContext';
 import useHighlighting from './UseHighlighting';
 import useNavigation from './UseNavigation';
 import useRefactor from './UseRefactor';
@@ -536,7 +538,7 @@ const EditorBase = React.memo((props: EditorProps & LocalStateProps) => {
     ]
   );
 
-  aceEditorProps.commands = Object.entries(keyHandlers)
+  aceEditorProps.commands = objectEntries(keyHandlers)
     .filter(([_, exec]) => exec)
     .map(([name, exec]) => ({ name, bindKey: keyBindings[name], exec: exec! }));
 
@@ -650,7 +652,10 @@ const EditorBase = React.memo((props: EditorProps & LocalStateProps) => {
   }, []);
 
   return (
-    <HotKeys className="Editor bp5-card bp5-elevation-0" handlers={handlers}>
+    <HotKeys
+      className={classNames('Editor', Classes.CARD, Classes.ELEVATION_0)}
+      handlers={handlers}
+    >
       <div className="row editor-react-ace" data-testid="Editor">
         <AceEditor {...aceEditorProps} ref={reactAceRef} />
       </div>
diff --git a/src/commons/editor/tabs/utils.ts b/src/commons/editor/tabs/utils.ts
index d65ce70ca4..227c10f3d8 100644
--- a/src/commons/editor/tabs/utils.ts
+++ b/src/commons/editor/tabs/utils.ts
@@ -27,7 +27,9 @@ export const getShortestUniqueFilePaths = (originalFilePaths: string[]): string[
   // Split each original file path into path segments and store the mapping from file
   // path to path segments for O(1) lookup. Since we only deal with the BrowserFS file
   // system, the path separator will always be '/'.
-  const filePathSegments: Record<string, string[]> = originalFilePaths.reduce(
+  const filePathSegments: Record<string, string[]> = originalFilePaths.reduce<
+    typeof filePathSegments
+  >(
     (segments, filePath) => ({
       ...segments,
       // It is necessary to remove empty segments to deal with the very first '/' in
@@ -48,15 +50,18 @@ export const getShortestUniqueFilePaths = (originalFilePaths: string[]): string[
     // to any original file path which transforms into it.
     const shortenedToOriginalFilePaths: Record<string, string[]> = Object.entries(
       filePathSegments
-    ).reduce((filePaths, [originalFilePath, filePathSegments]) => {
-      // Note that if there are fewer path segments than the number being sliced,
-      // all of the path segments will be returned without error.
-      const shortenedFilePath = '/' + filePathSegments.slice(-numOfPathSegments).join('/');
-      return {
-        ...filePaths,
-        [shortenedFilePath]: (filePaths[shortenedFilePath] ?? []).concat(originalFilePath)
-      };
-    }, {});
+    ).reduce<typeof shortenedToOriginalFilePaths>(
+      (filePaths, [originalFilePath, filePathSegments]) => {
+        // Note that if there are fewer path segments than the number being sliced,
+        // all of the path segments will be returned without error.
+        const shortenedFilePath = '/' + filePathSegments.slice(-numOfPathSegments).join('/');
+        return {
+          ...filePaths,
+          [shortenedFilePath]: (filePaths[shortenedFilePath] ?? []).concat(originalFilePath)
+        };
+      },
+      {}
+    );
     // Each shortened file path that only has a single corresponding original file
     // path is added to the unique shortened file paths record and their entry in
     // the file path segments record is removed to prevent further processing.
diff --git a/src/commons/mobileWorkspace/MobileKeyboard.tsx b/src/commons/mobileWorkspace/MobileKeyboard.tsx
index 02ae5def0d..eea9c2c9c8 100644
--- a/src/commons/mobileWorkspace/MobileKeyboard.tsx
+++ b/src/commons/mobileWorkspace/MobileKeyboard.tsx
@@ -8,10 +8,12 @@ type Props = {
 };
 
 const MobileKeyboard: React.FC<Props> = props => {
-  const [isKeyboardShown, setIsKeyoardShown] = React.useState(false);
+  const [isKeyboardShown, setIsKeyboardShown] = React.useState(false);
   const [buttonContent, setButtonContent] = React.useState('ᐸ');
   const [keyboardPosition, setKeyboardPosition] = React.useState({ x: 0, y: 0 });
-  const [selectedIndex, setSelectedIndex] = React.useState(1);
+  const [targetKeyboardInput, setTargetKeyboardInput] = React.useState<Ace.Editor | null>(null);
+  const [lastKeyPressed, setLastKeyPressed] = React.useState<string>('');
+  const [touchStartInfo, setTouchStartInfo] = React.useState({ x: 0, y: 0, time: 0 });
 
   const onDrag: DraggableEventHandler = (
     e: DraggableEvent,
@@ -31,53 +33,84 @@ const MobileKeyboard: React.FC<Props> = props => {
       document.getElementById('mobile-floating-toggle')!.style.setProperty('width', '42px');
       document.getElementById('mobile-floating-toggle')!.style.setProperty('opacity', '0.6');
       setButtonContent('ᐸ');
-      setIsKeyoardShown(false);
+      setIsKeyboardShown(false);
     } else {
       //do showing
       document.getElementById('mobile-keyboard-toggle')!.style.setProperty('display', 'flex');
       document.getElementById('mobile-floating-toggle')!.style.setProperty('width', '99%');
       document.getElementById('mobile-floating-toggle')!.style.setProperty('opacity', '1');
       setButtonContent('ᐳ');
-      setIsKeyoardShown(true);
+      setIsKeyboardShown(true);
     }
   };
 
-  const handleRowToggle = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    setSelectedIndex((selectedIndex + 1) % 3);
-    const keyboardClass = document.getElementsByClassName('simple-keyboard-shortcut');
-    Array.from(keyboardClass as HTMLCollectionOf<HTMLElement>)[0].style.top =
-      -selectedIndex * 45 + 'px';
-  };
-
   const handleKeyPress = (button: string) => {
     if (!props.targetKeyboardInput) {
       return;
     }
-    const editor = props.targetKeyboardInput;
-    if (button === '{arrowleft}') {
+
+    setTargetKeyboardInput(props.targetKeyboardInput);
+    setLastKeyPressed(button);
+  };
+
+  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
+    // Get the touch coordinates and current time
+    const touch = e.touches[0];
+    setTouchStartInfo({
+      x: touch.clientX,
+      y: touch.clientY,
+      time: Date.now()
+    });
+  };
+
+  const handleTouchEnd = (e: React.TouchEvent<HTMLDivElement>) => {
+    // Compare the end position with the start position
+    const touch = e.changedTouches[0];
+    const deltaX = touch.clientX - touchStartInfo.x;
+    const deltaY = touch.clientY - touchStartInfo.y;
+    const deltaTime = Date.now() - touchStartInfo.time;
+
+    // Define thresholds for what you consider a swipe vs a tap
+    const swipeThreshold = 30; // pixels
+    const tapThresholdTime = 200; // milliseconds
+
+    if (
+      Math.abs(deltaX) < swipeThreshold &&
+      Math.abs(deltaY) < swipeThreshold &&
+      deltaTime < tapThresholdTime
+    ) {
+      handleKeyRelease();
+    }
+  };
+
+  const handleKeyRelease = () => {
+    if (!targetKeyboardInput) {
+      return;
+    }
+
+    const editor = targetKeyboardInput;
+
+    if (lastKeyPressed === '{arrowleft}') {
       editor.navigateLeft();
-    } else if (button === '{arrowright}') {
+    } else if (lastKeyPressed === '{arrowright}') {
       editor.navigateRight();
-    } else if (button === '{bksp}') {
+    } else if (lastKeyPressed === '{bksp}') {
       editor.remove('left');
-    } else if (button === '{tab}') {
+    } else if (lastKeyPressed === '{tab}') {
       editor.insert('\t');
-    } else if (['+', '-', '*', '/', '%', '=>', '===', '&&', '||'].includes(button)) {
-      editor.insert(' ' + button + ' ');
+    } else if (['+', '-', '*', '/', '%', '=>', '===', '&&', '||'].includes(lastKeyPressed)) {
+      editor.insert(' ' + lastKeyPressed + ' ');
     } else {
-      editor.insert(button);
+      editor.insert(lastKeyPressed);
     }
   };
 
   const keyboardProps = {
     onKeyPress: handleKeyPress,
+    disableButtonHold: true,
     baseClass: 'simple-keyboard-shortcut',
     layout: {
-      default: [
-        '{ } ( ) " \' _ => ;',
-        '{tab} && || ! < > = ===',
-        '+ - * / % // {arrowleft} {arrowright}'
-      ]
+      default: ['{ } ( ) " \' _ => ; {tab} && || ! < > = === + - * / % // {arrowleft} {arrowright}']
     },
     buttonTheme: [
       {
@@ -112,16 +145,13 @@ const MobileKeyboard: React.FC<Props> = props => {
         </button>
 
         <div className="mobile-keyboard-toggle-container" id="mobile-keyboard-toggle">
-          <div className="mobile-keyboard-container">
+          <div
+            className="mobile-keyboard-container"
+            onTouchStart={handleTouchStart}
+            onTouchEnd={handleTouchEnd}
+          >
             <Keyboard {...keyboardProps} />
           </div>
-          <button
-            className="mobile-keyboard-row-toggle"
-            onClick={handleRowToggle}
-            onMouseDown={handlePreventDefault}
-          >
-            ⤸
-          </button>
         </div>
 
         <div id="floating-dragHandle">:</div>
diff --git a/src/commons/mobileWorkspace/MobileWorkspace.tsx b/src/commons/mobileWorkspace/MobileWorkspace.tsx
index 72f53557ec..ee77d7ac4e 100644
--- a/src/commons/mobileWorkspace/MobileWorkspace.tsx
+++ b/src/commons/mobileWorkspace/MobileWorkspace.tsx
@@ -1,7 +1,7 @@
 import { FocusStyleManager } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Ace } from 'ace-builds';
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { DraggableEvent } from 'react-draggable';
 import { useMediaQuery } from 'react-responsive';
 
@@ -30,16 +30,16 @@ export type MobileWorkspaceProps = {
 const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
   const isAndroid = /Android/.test(navigator.userAgent);
   const isPortrait = useMediaQuery({ orientation: 'portrait' });
-  const [draggableReplPosition, setDraggableReplPosition] = React.useState({ x: 0, y: 0 });
+  const [draggableReplPosition, setDraggableReplPosition] = useState({ x: 0, y: 0 });
 
   // For disabling draggable Repl when in stepper tab
-  const [isDraggableReplDisabled, setIsDraggableReplDisabled] = React.useState(false);
+  const [isDraggableReplDisabled, setIsDraggableReplDisabled] = useState(false);
 
   // Get rid of the focus border on blueprint components
   FocusStyleManager.onlyShowFocusOnTabs();
 
   // Handles the panel height when the mobile top controlbar is rendered in the Assessment Workspace
-  React.useEffect(() => {
+  useEffect(() => {
     if (props.mobileSideContentProps.workspaceLocation === 'assessment') {
       document.documentElement.style.setProperty(
         '--mobile-panel-height',
@@ -59,7 +59,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
    * soft keyboard on Android devices. This is due to the viewport height changing when the soft
    * keyboard is up on Android devices. IOS devices are not affected.
    */
-  React.useEffect(() => {
+  useEffect(() => {
     if (isPortrait && isAndroid) {
       document.documentElement.style.setProperty('overflow', 'auto');
       const metaViewport = document.querySelector('meta[name=viewport]');
@@ -83,50 +83,38 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
     };
   }, [isPortrait, isAndroid]);
 
-  const [targetKeyboardInput, setTargetKeyboardInput] = React.useState<Ace.Editor | null>(null);
+  const [targetKeyboardInput, setTargetKeyboardInput] = useState<Ace.Editor | null>(null);
 
   const clearTargetKeyboardInput = () => setTargetKeyboardInput(null);
 
   const enableMobileKeyboardForEditor = (props: EditorContainerProps): EditorContainerProps => {
-    const onFocus = (event: any, editor?: Ace.Editor) => {
-      if (props.onFocus) {
-        props.onFocus(event, editor);
-      }
-      if (!editor) {
-        return;
-      }
-      setTargetKeyboardInput(editor);
-    };
-    const onBlur = (event: any, editor?: Ace.Editor) => {
-      if (props.onBlur) {
-        props.onBlur(event, editor);
-      }
-      clearTargetKeyboardInput();
-    };
     return {
       ...props,
-      onFocus,
-      onBlur
+      onFocus: (event, editor?) => {
+        props.onFocus?.(event, editor);
+        if (!editor) {
+          return;
+        }
+        setTargetKeyboardInput(editor);
+      },
+      onBlur: (event, editor?) => {
+        props.onBlur?.(event, editor);
+        clearTargetKeyboardInput();
+      }
     };
   };
 
   const enableMobileKeyboardForRepl = (props: ReplProps): ReplProps => {
-    const onFocus = (editor: Ace.Editor) => {
-      if (props.onFocus) {
-        props.onFocus(editor);
-      }
-      setTargetKeyboardInput(editor);
-    };
-    const onBlur = () => {
-      if (props.onBlur) {
-        props.onBlur();
-      }
-      clearTargetKeyboardInput();
-    };
     return {
       ...props,
-      onFocus,
-      onBlur
+      onFocus: editor => {
+        props.onFocus?.(editor);
+        setTargetKeyboardInput(editor);
+      },
+      onBlur: () => {
+        props.onBlur?.();
+        clearTargetKeyboardInput();
+      }
     };
   };
 
@@ -184,13 +172,11 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
   };
 
   const handleEditorEval = props.editorContainerProps?.handleEditorEval;
-  const handleTabChangeForRepl = React.useCallback(
+  const handleTabChangeForRepl = useCallback(
     (newTabId: SideContentType, prevTabId: SideContentType) => {
       // Evaluate program upon pressing the run tab.
       if (newTabId === SideContentType.mobileEditorRun) {
-        if (handleEditorEval) {
-          handleEditorEval();
-        }
+        handleEditorEval?.();
       }
 
       // Show the REPL upon pressing the run tab if the previous tab is not listed below.
@@ -226,7 +212,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
   );
 
   const onChange = props.mobileSideContentProps.onChange;
-  const onSideContentTabChange = React.useCallback(
+  const onSideContentTabChange = useCallback(
     (
       newTabId: SideContentType,
       prevTabId: SideContentType,
@@ -241,27 +227,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
   // Convert sidebar tabs with a side content tab ID into side content tabs.
   const sideBarTabs: SideContentTab[] = props.sideBarProps.tabs.filter(tab => tab.id !== undefined);
 
-  const mobileEditorTab: SideContentTab = React.useMemo(
-    () => ({
-      label: 'Editor',
-      iconName: IconNames.EDIT,
-      body: null,
-      id: SideContentType.mobileEditor
-    }),
-    []
-  );
-
-  const mobileRunTab: SideContentTab = React.useMemo(
-    () => ({
-      label: 'Run',
-      iconName: IconNames.PLAY,
-      body: null,
-      id: SideContentType.mobileEditorRun
-    }),
-    []
-  );
-
-  const updatedMobileSideContentProps = React.useCallback(() => {
+  const updatedMobileSideContentProps = useCallback(() => {
     return {
       ...props.mobileSideContentProps,
       onChange: onSideContentTabChange,
@@ -277,13 +243,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
         ]
       }
     };
-  }, [
-    onSideContentTabChange,
-    mobileEditorTab,
-    mobileRunTab,
-    props.mobileSideContentProps,
-    sideBarTabs
-  ]);
+  }, [onSideContentTabChange, props.mobileSideContentProps, sideBarTabs]);
 
   const inAssessmentWorkspace = props.mobileSideContentProps.workspaceLocation === 'assessment';
 
@@ -318,3 +278,17 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
 };
 
 export default MobileWorkspace;
+
+const mobileEditorTab: SideContentTab = {
+  label: 'Editor',
+  iconName: IconNames.EDIT,
+  body: null,
+  id: SideContentType.mobileEditor
+};
+
+const mobileRunTab: SideContentTab = {
+  label: 'Run',
+  iconName: IconNames.PLAY,
+  body: null,
+  id: SideContentType.mobileEditorRun
+};
diff --git a/src/commons/mobileWorkspace/mobileSideContent/MobileControlBar.tsx b/src/commons/mobileWorkspace/mobileSideContent/MobileControlBar.tsx
index 7e07f9a9b3..132c52ec9a 100644
--- a/src/commons/mobileWorkspace/mobileSideContent/MobileControlBar.tsx
+++ b/src/commons/mobileWorkspace/mobileSideContent/MobileControlBar.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@blueprintjs/core';
+import { Button, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 
 import { ControlBarProps } from '../../controlBar/ControlBar';
 
@@ -14,9 +13,9 @@ const MobileControlBar: React.FC<ControlBarProps> = props => {
   );
 
   return (
-    <Popover2 content={controlBarMenu} autoFocus={false}>
+    <Popover content={controlBarMenu} autoFocus={false}>
       <Button minimal icon={IconNames.COG} className="mobile-control-bar-button" />
-    </Popover2>
+    </Popover>
   );
 };
 
diff --git a/src/commons/mobileWorkspace/mobileSideContent/MobileSideContent.tsx b/src/commons/mobileWorkspace/mobileSideContent/MobileSideContent.tsx
index 2ff45559f5..cabad39bac 100644
--- a/src/commons/mobileWorkspace/mobileSideContent/MobileSideContent.tsx
+++ b/src/commons/mobileWorkspace/mobileSideContent/MobileSideContent.tsx
@@ -1,5 +1,4 @@
-import { Classes, Icon, Tab, Tabs } from '@blueprintjs/core';
-import { Tooltip2 } from '@blueprintjs/popover2';
+import { Classes, Icon, Tab, Tabs, Tooltip } from '@blueprintjs/core';
 import classNames from 'classnames';
 import React from 'react';
 import { SideContentProps } from 'src/commons/sideContent/SideContent';
@@ -28,7 +27,7 @@ const renderTab = (tab: SideContentTab, isIOS: boolean) => {
   const iconSize = 20;
   const tabId = tab.id === undefined ? tab.label : tab.id;
   const tabTitle: JSX.Element = (
-    <Tooltip2
+    <Tooltip
       content={tab.label}
       onOpening={() => {
         // Handles iOS hover requiring double taps to press the button
@@ -40,7 +39,7 @@ const renderTab = (tab: SideContentTab, isIOS: boolean) => {
       <div className="side-content-tooltip" id={generateIconId(tabId)}>
         <Icon icon={tab.iconName} iconSize={iconSize} />
       </div>
-    </Tooltip2>
+    </Tooltip>
   );
 
   return (
diff --git a/src/commons/mocks/AssessmentMocks.ts b/src/commons/mocks/AssessmentMocks.ts
index 35e80a0d6d..4a3c8ad5dd 100644
--- a/src/commons/mocks/AssessmentMocks.ts
+++ b/src/commons/mocks/AssessmentMocks.ts
@@ -6,7 +6,6 @@ import {
   AssessmentConfiguration,
   AssessmentOverview,
   AssessmentStatuses,
-  GradingStatuses,
   IContestVotingQuestion,
   IMCQQuestion,
   IProgrammingQuestion,
@@ -20,6 +19,7 @@ export const mockAssessmentConfigurations: AssessmentConfiguration[][] = [
       assessmentConfigId: 1,
       type: 'Missions',
       isManuallyGraded: true,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hoursBeforeEarlyXpDecay: 48,
       hasTokenCounter: false,
@@ -30,6 +30,7 @@ export const mockAssessmentConfigurations: AssessmentConfiguration[][] = [
       assessmentConfigId: 2,
       type: 'Quests',
       isManuallyGraded: true,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hoursBeforeEarlyXpDecay: 48,
       hasTokenCounter: false,
@@ -39,7 +40,8 @@ export const mockAssessmentConfigurations: AssessmentConfiguration[][] = [
     {
       assessmentConfigId: 3,
       type: 'Paths',
-      isManuallyGraded: true,
+      isManuallyGraded: false,
+      isGradingAutoPublished: true,
       displayInDashboard: true,
       hoursBeforeEarlyXpDecay: 48,
       hasTokenCounter: false,
@@ -50,6 +52,7 @@ export const mockAssessmentConfigurations: AssessmentConfiguration[][] = [
       assessmentConfigId: 4,
       type: 'Contests',
       isManuallyGraded: true,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hoursBeforeEarlyXpDecay: 48,
       hasTokenCounter: false,
@@ -60,6 +63,7 @@ export const mockAssessmentConfigurations: AssessmentConfiguration[][] = [
       assessmentConfigId: 5,
       type: 'Others',
       isManuallyGraded: true,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hoursBeforeEarlyXpDecay: 48,
       hasTokenCounter: false,
@@ -72,6 +76,7 @@ export const mockAssessmentConfigurations: AssessmentConfiguration[][] = [
       assessmentConfigId: 1,
       type: 'Mission Impossible',
       isManuallyGraded: true,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hoursBeforeEarlyXpDecay: 48,
       hasTokenCounter: false,
@@ -82,6 +87,7 @@ export const mockAssessmentConfigurations: AssessmentConfiguration[][] = [
       assessmentConfigId: 2,
       type: 'Data Structures',
       isManuallyGraded: true,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hoursBeforeEarlyXpDecay: 48,
       hasTokenCounter: false,
@@ -92,6 +98,7 @@ export const mockAssessmentConfigurations: AssessmentConfiguration[][] = [
       assessmentConfigId: 3,
       type: 'Algorithm Frenzy',
       isManuallyGraded: true,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hoursBeforeEarlyXpDecay: 48,
       hasTokenCounter: false,
@@ -108,6 +115,7 @@ const mockUnopenedAssessmentsOverviews: AssessmentOverview[] = [
     closeAt: '2048-06-18T05:24:26.026Z',
     coverImage: 'https://fakeimg.pl/300/',
     id: 1,
+    isPublished: false,
     maxXp: 1000,
     earlySubmissionXp: 0,
     openAt: '2038-06-18T05:24:26.026Z',
@@ -117,7 +125,7 @@ const mockUnopenedAssessmentsOverviews: AssessmentOverview[] = [
     status: AssessmentStatuses.not_attempted,
     story: 'mission-1',
     xp: 0,
-    gradingStatus: GradingStatuses.none,
+    isGradingPublished: false,
     maxTeamSize: 1,
     hasVotingFeatures: false
   }
@@ -130,6 +138,7 @@ const mockOpenedAssessmentsOverviews: AssessmentOverview[] = [
     closeAt: '2048-06-18T05:24:26.026Z',
     coverImage: 'https://fakeimg.pl/300/',
     id: 2,
+    isPublished: false,
     maxXp: 1000,
     earlySubmissionXp: 0,
     openAt: '2018-06-18T05:24:26.026Z',
@@ -151,13 +160,14 @@ const mockOpenedAssessmentsOverviews: AssessmentOverview[] = [
     status: AssessmentStatuses.attempted,
     story: 'mission-1',
     xp: 1,
-    gradingStatus: GradingStatuses.none,
+    isGradingPublished: false,
     maxTeamSize: 4,
     hasVotingFeatures: false
   },
   {
     type: 'Missions',
     isManuallyGraded: true,
+    isPublished: false,
     closeAt: '2048-06-18T05:24:26.026Z',
     coverImage: 'https://fakeimg.pl/350x200/?text=World&font=lobster',
     id: 3,
@@ -170,13 +180,14 @@ const mockOpenedAssessmentsOverviews: AssessmentOverview[] = [
     status: AssessmentStatuses.attempting,
     story: 'mission-2',
     xp: 2,
-    gradingStatus: GradingStatuses.none,
+    isGradingPublished: false,
     maxTeamSize: 1,
     hasVotingFeatures: false
   },
   {
     type: 'Quests',
     isManuallyGraded: true,
+    isPublished: false,
     closeAt: '2048-06-18T05:24:26.026Z',
     coverImage: 'https://fakeimg.pl/350x200/?text=Hello',
     id: 4,
@@ -189,13 +200,14 @@ const mockOpenedAssessmentsOverviews: AssessmentOverview[] = [
     status: AssessmentStatuses.not_attempted,
     story: 'sidequest-2.1',
     xp: 3,
-    gradingStatus: GradingStatuses.none,
+    isGradingPublished: false,
     maxTeamSize: 2,
     hasVotingFeatures: false
   },
   {
     type: 'Paths',
     isManuallyGraded: true,
+    isPublished: false,
     closeAt: '2069-04-20T01:23:45.111Z',
     coverImage: 'https://fakeimg.pl/700x400/417678,64/?text=%E3%83%91%E3%82%B9&font=noto',
     id: 5,
@@ -208,13 +220,14 @@ const mockOpenedAssessmentsOverviews: AssessmentOverview[] = [
     status: AssessmentStatuses.not_attempted,
     story: null,
     xp: 0,
-    gradingStatus: GradingStatuses.excluded,
+    isGradingPublished: false,
     maxTeamSize: 2,
     hasVotingFeatures: false
   },
   {
     type: 'Others',
     isManuallyGraded: false,
+    isPublished: false,
     closeAt: '2048-06-18T05:24:26.026Z',
     coverImage: 'https://fakeimg.pl/350x200/?text=Hello',
     id: 6,
@@ -227,9 +240,9 @@ const mockOpenedAssessmentsOverviews: AssessmentOverview[] = [
     status: AssessmentStatuses.not_attempted,
     story: 'sidequest-2.1',
     xp: 3,
-    gradingStatus: GradingStatuses.none,
     private: true,
     maxTeamSize: 1,
+    isGradingPublished: false,
     hasVotingFeatures: false
   }
 ];
@@ -238,6 +251,7 @@ const mockClosedAssessmentOverviews: AssessmentOverview[] = [
   {
     type: 'Missions',
     isManuallyGraded: true,
+    isPublished: false,
     closeAt: '2008-06-18T05:24:26.026Z',
     coverImage: 'https://fakeimg.pl/350x200/ff0000/000',
     id: 7,
@@ -250,13 +264,14 @@ const mockClosedAssessmentOverviews: AssessmentOverview[] = [
     status: AssessmentStatuses.submitted,
     story: 'mission-3',
     xp: 800,
-    gradingStatus: GradingStatuses.grading,
+    isGradingPublished: false,
     maxTeamSize: 1,
     hasVotingFeatures: false
   },
   {
     type: 'Quests',
     isManuallyGraded: true,
+    isPublished: false,
     closeAt: '2008-06-18T05:24:26.026Z',
     coverImage: 'https://fakeimg.pl/350x200/ff0000,128/000,255',
     id: 8,
@@ -265,17 +280,18 @@ const mockClosedAssessmentOverviews: AssessmentOverview[] = [
     openAt: '2007-07-18T05:24:26.026Z',
     title: 'Closed (not graded) Sidequest',
     shortSummary:
-      'This is a test for the grading status tooltip when the assessment is not graded. It should render as a red cross.',
+      'This is a test for the grading status tooltip when the assessment is not published. It should render as a yellow waiting clock.',
     status: AssessmentStatuses.submitted,
     story: null,
     xp: 500,
-    gradingStatus: GradingStatuses.none,
+    isGradingPublished: false,
     maxTeamSize: 1,
     hasVotingFeatures: false
   },
   {
     type: 'Quests',
     isManuallyGraded: true,
+    isPublished: true,
     closeAt: '2008-06-18T05:24:26.026Z',
     coverImage: 'https://fakeimg.pl/350x200/ff0000,128/000,255',
     id: 9,
@@ -283,18 +299,19 @@ const mockClosedAssessmentOverviews: AssessmentOverview[] = [
     earlySubmissionXp: 0,
     openAt: '2007-07-18T05:24:26.026Z',
     title: 'Closed (fully graded) Sidequest',
-    shortSummary:
-      'This is a test for the grading status tooltip when the assessment is fully graded. It should render as a green tick. This sidequest links to the mock Sidequest 4.',
+    shortSummary: `This is a test for the grading status tooltip when a manually graded assessment is fully graded but not published.
+       It should still render as a yellow clock. This sidequest links to the mock Sidequest 4.`,
     status: AssessmentStatuses.submitted,
     story: null,
     xp: 150,
-    gradingStatus: GradingStatuses.graded,
+    isGradingPublished: false,
     maxTeamSize: 1,
     hasVotingFeatures: false
   },
   {
-    type: 'Quests',
-    isManuallyGraded: true,
+    type: 'Paths',
+    isManuallyGraded: false,
+    isPublished: true,
     closeAt: '2008-06-18T05:24:26.026Z',
     coverImage: 'https://fakeimg.pl/350x200/ff0000/000',
     id: 10,
@@ -303,11 +320,11 @@ const mockClosedAssessmentOverviews: AssessmentOverview[] = [
     openAt: '2007-07-18T05:24:26.026Z',
     title: 'Ungraded assessment',
     shortSummary:
-      'This is a test for the grading status tooltip when the assessment does not require manual grading (e.g. paths and contests). It should render as a blue disable sign. This sidequest links to the mock Sidequest 4.',
+      'This is a test for the grading status tooltip when the assessment does not require manual grading (e.g. paths and contests) but is unpublished. It should still render as a yellow clock. This sidequest links to the mock Sidequest 4.',
     status: AssessmentStatuses.submitted,
     story: null,
     xp: 100,
-    gradingStatus: GradingStatuses.excluded,
+    isGradingPublished: false,
     maxTeamSize: 1,
     hasVotingFeatures: false
   }
diff --git a/src/commons/mocks/BackendMocks.ts b/src/commons/mocks/BackendMocks.ts
index 14f204cbf4..59edfdf4f7 100644
--- a/src/commons/mocks/BackendMocks.ts
+++ b/src/commons/mocks/BackendMocks.ts
@@ -44,6 +44,7 @@ import {
   AssessmentOverview,
   AssessmentStatuses,
   FETCH_ASSESSMENT_OVERVIEWS,
+  ProgressStatuses,
   Question,
   SUBMIT_ASSESSMENT
 } from '../assessment/AssessmentTypes';
@@ -286,7 +287,7 @@ export function* mockBackendSaga(): SagaIterator {
       );
       const index = overviews.data.findIndex(
         overview =>
-          overview.submissionId === submissionId && overview.submissionStatus === 'submitted'
+          overview.submissionId === submissionId && overview.progress === ProgressStatuses.submitted
       );
       if (index === -1) {
         yield call(showWarningMessage, '400: Bad Request');
@@ -294,7 +295,7 @@ export function* mockBackendSaga(): SagaIterator {
       }
       const newOverviews = overviews.data.map(overview => {
         if (overview.submissionId === submissionId) {
-          return { ...overview, submissionStatus: 'attempted' };
+          overview.progress = ProgressStatuses.attempted;
         }
         return overview;
       });
diff --git a/src/commons/mocks/GradingMocks.ts b/src/commons/mocks/GradingMocks.ts
index 139b0a4e7e..bab0279445 100644
--- a/src/commons/mocks/GradingMocks.ts
+++ b/src/commons/mocks/GradingMocks.ts
@@ -6,7 +6,12 @@ import {
   GradingQuery
 } from '../../features/grading/GradingTypes';
 import { Role } from '../application/ApplicationTypes';
-import { Testcase, TestcaseTypes } from '../assessment/AssessmentTypes';
+import {
+  AssessmentStatuses,
+  ProgressStatuses,
+  Testcase,
+  TestcaseTypes
+} from '../assessment/AssessmentTypes';
 import { mockLibrary } from './AssessmentMocks';
 import { mockFetchRole } from './UserMocks';
 
@@ -27,9 +32,10 @@ export const mockGradingOverviews: GradingOverview[] = [
     studentUsername: 'E0123456',
     studentUsernames: [],
     submissionId: 1,
-    submissionStatus: 'submitted',
+    submissionStatus: AssessmentStatuses.submitted,
+    progress: ProgressStatuses.published,
+    isGradingPublished: true,
     groupName: '1D',
-    gradingStatus: 'graded',
     questionCount: 6,
     gradedCount: 6
   },
@@ -49,9 +55,10 @@ export const mockGradingOverviews: GradingOverview[] = [
     studentUsername: 'E0000000',
     studentUsernames: [],
     submissionId: 2,
-    submissionStatus: 'submitted',
+    submissionStatus: AssessmentStatuses.submitted,
+    progress: ProgressStatuses.submitted,
+    isGradingPublished: false,
     groupName: '1F',
-    gradingStatus: 'grading',
     questionCount: 6,
     gradedCount: 2
   },
@@ -71,10 +78,11 @@ export const mockGradingOverviews: GradingOverview[] = [
     studentUsername: 'E0000001',
     studentUsernames: [],
     submissionId: 3,
-    submissionStatus: 'submitted',
+    submissionStatus: AssessmentStatuses.submitted,
+    progress: ProgressStatuses.graded,
+    isGradingPublished: false,
     groupName: '1F',
-    gradingStatus: 'none',
-    questionCount: 6,
+    questionCount: 0,
     gradedCount: 0
   }
 ];
diff --git a/src/commons/mocks/UserMocks.ts b/src/commons/mocks/UserMocks.ts
index e7c396cc5d..523d68fc05 100644
--- a/src/commons/mocks/UserMocks.ts
+++ b/src/commons/mocks/UserMocks.ts
@@ -430,55 +430,34 @@ export const mockFetchStudentInfo = (accessToken: string): StudentInfo[] | null
 export const mockNotifications: Notification[] = [
   {
     id: 1,
-    type: NotificationTypes.deadline,
-    assessment_id: 3,
-    assessment_type: 'Quests',
-    assessment_title: 'The Secret to Streams'
-  },
-  {
-    id: 2,
-    type: NotificationTypes.autograded,
-    assessment_id: 4,
-    assessment_type: 'Missions',
-    assessment_title: 'A Closed Mission'
-  },
-  {
-    id: 3,
-    type: NotificationTypes.graded,
-    assessment_id: 4,
-    assessment_type: 'Missions',
-    assessment_title: 'A Closed Mission'
-  },
-  {
-    id: 4,
     type: NotificationTypes.new,
     assessment_id: 6,
     assessment_type: 'Paths',
     assessment_title: 'Basic Logic'
   },
   {
-    id: 5,
+    id: 2,
     type: NotificationTypes.new,
     assessment_id: 7,
     assessment_type: 'Missions',
     assessment_title: 'Symphony of the Winds'
   },
   {
-    id: 6,
+    id: 3,
     type: NotificationTypes.submitted,
     submission_id: 1,
     assessment_type: 'Missions',
     assessment_title: 'Mission 0'
   },
   {
-    id: 7,
+    id: 4,
     type: NotificationTypes.submitted,
     submission_id: 2,
     assessment_type: 'Missions',
     assessment_title: 'Mission 1'
   },
   {
-    id: 8,
+    id: 5,
     type: NotificationTypes.submitted,
     submission_id: 3,
     assessment_type: 'Missions',
diff --git a/src/commons/navigationBar/NavigationBar.tsx b/src/commons/navigationBar/NavigationBar.tsx
index df8c4ebdb9..205f44cf1d 100644
--- a/src/commons/navigationBar/NavigationBar.tsx
+++ b/src/commons/navigationBar/NavigationBar.tsx
@@ -9,10 +9,10 @@ import {
   NavbarDivider,
   NavbarGroup,
   NavbarHeading,
+  Popover,
   Position
 } from '@blueprintjs/core';
 import { IconName, IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import { Location } from 'history';
 import { useCallback, useMemo, useState } from 'react';
@@ -241,11 +241,11 @@ const NavigationBar: React.FC = () => {
 
     return (
       <NavbarGroup align={Alignment.LEFT}>
-        <Popover2
+        <Popover
           position={Position.BOTTOM_RIGHT}
           interactionKind="hover"
           content={desktopNavbarLeftPopoverContent}
-          popoverClassName={'desktop-navbar-popover'}
+          popoverClassName="desktop-navbar-popover"
           disabled={!enableDesktopPopover}
         >
           <NavLink
@@ -259,7 +259,7 @@ const NavigationBar: React.FC = () => {
               {courseShortName || Constants.sourceAcademyDeploymentName}
             </NavbarHeading>
           </NavLink>
-        </Popover2>
+        </Popover>
         {renderNavlinksFromInfo(fullAcademyNavbarLeftCommonInfo, createDesktopNavlink)}
       </NavbarGroup>
     );
diff --git a/src/commons/navigationBar/__tests__/__snapshots__/NavigationBar.tsx.snap b/src/commons/navigationBar/__tests__/__snapshots__/NavigationBar.tsx.snap
index a3fca35ac0..6c748630ca 100644
--- a/src/commons/navigationBar/__tests__/__snapshots__/NavigationBar.tsx.snap
+++ b/src/commons/navigationBar/__tests__/__snapshots__/NavigationBar.tsx.snap
@@ -8,7 +8,9 @@ exports[`NavigationBar Renders "Not logged in" correctly 1`] = `
     <Blueprint5.NavbarGroup
       align="left"
     >
-      <Popover2
+      <Blueprint5.Popover
+        boundary="clippingParents"
+        captureDismiss={false}
         content={
           <Blueprint5.Navbar>
             <Blueprint5.NavbarGroup
@@ -16,10 +18,24 @@ exports[`NavigationBar Renders "Not logged in" correctly 1`] = `
             />
           </Blueprint5.Navbar>
         }
+        defaultIsOpen={false}
         disabled={true}
+        fill={false}
+        hasBackdrop={false}
+        hoverCloseDelay={300}
+        hoverOpenDelay={150}
+        inheritDarkTheme={true}
         interactionKind="hover"
+        matchTargetWidth={false}
+        minimal={false}
+        openOnTargetFocus={true}
         popoverClassName="desktop-navbar-popover"
         position="bottom-right"
+        positioningStrategy="absolute"
+        shouldReturnFocusOnClose={false}
+        targetTagName="span"
+        transitionDuration={300}
+        usePortal={true}
       >
         <NavLink
           className="NavigationBar__link bp5-button bp5-minimal bp5-active"
@@ -40,7 +56,7 @@ exports[`NavigationBar Renders "Not logged in" correctly 1`] = `
             Source Academy @ NUS
           </Blueprint5.NavbarHeading>
         </NavLink>
-      </Popover2>
+      </Blueprint5.Popover>
     </Blueprint5.NavbarGroup>
     <Blueprint5.NavbarGroup
       align="right"
@@ -109,7 +125,9 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
     <Blueprint5.NavbarGroup
       align="left"
     >
-      <Popover2
+      <Blueprint5.Popover
+        boundary="clippingParents"
+        captureDismiss={false}
         content={
           <Blueprint5.Navbar>
             <Blueprint5.NavbarGroup
@@ -218,10 +236,24 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
             </Blueprint5.NavbarGroup>
           </Blueprint5.Navbar>
         }
+        defaultIsOpen={false}
         disabled={true}
+        fill={false}
+        hasBackdrop={false}
+        hoverCloseDelay={300}
+        hoverOpenDelay={150}
+        inheritDarkTheme={true}
         interactionKind="hover"
+        matchTargetWidth={false}
+        minimal={false}
+        openOnTargetFocus={true}
         popoverClassName="desktop-navbar-popover"
         position="bottom-right"
+        positioningStrategy="absolute"
+        shouldReturnFocusOnClose={false}
+        targetTagName="span"
+        transitionDuration={300}
+        usePortal={true}
       >
         <NavLink
           className="NavigationBar__link bp5-button bp5-minimal bp5-active"
@@ -242,7 +274,7 @@ exports[`NavigationBar Renders correctly for student with course 1`] = `
             CS1101S
           </Blueprint5.NavbarHeading>
         </NavLink>
-      </Popover2>
+      </Blueprint5.Popover>
       <NavLink
         className={[Function]}
         title="Sourcecast"
@@ -387,7 +419,9 @@ exports[`NavigationBar Renders correctly for student without course 1`] = `
     <Blueprint5.NavbarGroup
       align="left"
     >
-      <Popover2
+      <Blueprint5.Popover
+        boundary="clippingParents"
+        captureDismiss={false}
         content={
           <Blueprint5.Navbar>
             <Blueprint5.NavbarGroup
@@ -395,10 +429,24 @@ exports[`NavigationBar Renders correctly for student without course 1`] = `
             />
           </Blueprint5.Navbar>
         }
+        defaultIsOpen={false}
         disabled={true}
+        fill={false}
+        hasBackdrop={false}
+        hoverCloseDelay={300}
+        hoverOpenDelay={150}
+        inheritDarkTheme={true}
         interactionKind="hover"
+        matchTargetWidth={false}
+        minimal={false}
+        openOnTargetFocus={true}
         popoverClassName="desktop-navbar-popover"
         position="bottom-right"
+        positioningStrategy="absolute"
+        shouldReturnFocusOnClose={false}
+        targetTagName="span"
+        transitionDuration={300}
+        usePortal={true}
       >
         <NavLink
           className="NavigationBar__link bp5-button bp5-minimal bp5-active"
@@ -419,7 +467,7 @@ exports[`NavigationBar Renders correctly for student without course 1`] = `
             Source Academy @ NUS
           </Blueprint5.NavbarHeading>
         </NavLink>
-      </Popover2>
+      </Blueprint5.Popover>
       <NavLink
         className={[Function]}
         title="SICP JS"
diff --git a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.tsx.snap b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.tsx.snap
index 7c74500c8a..4a517e0706 100644
--- a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.tsx.snap
+++ b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`NavigationBarLangSelectButton should render correctly 1`] = `
 <span
-  className="bp5-popover2-target bp5-popover-target"
+  className="bp5-popover-target"
   onClick={[Function]}
   onKeyDown={[Function]}
 >
diff --git a/src/commons/notificationBadge/NotificationBadge.tsx b/src/commons/notificationBadge/NotificationBadge.tsx
index 10625477e5..038f3123e5 100644
--- a/src/commons/notificationBadge/NotificationBadge.tsx
+++ b/src/commons/notificationBadge/NotificationBadge.tsx
@@ -1,5 +1,4 @@
-import { Intent, PopoverInteractionKind, Position, Tag } from '@blueprintjs/core';
-import { Popover2 } from '@blueprintjs/popover2';
+import { Intent, Popover, PopoverInteractionKind, Position, Tag } from '@blueprintjs/core';
 import React from 'react';
 import { useDispatch } from 'react-redux';
 
@@ -54,7 +53,7 @@ const NotificationBadge: React.FC<Props> = props => {
     const notificationTags = <div className="col">{notifications.map(makeNotificationTag)}</div>;
 
     return (
-      <Popover2
+      <Popover
         className={props.className}
         content={notificationTags}
         interactionKind={PopoverInteractionKind.HOVER}
@@ -64,7 +63,7 @@ const NotificationBadge: React.FC<Props> = props => {
         lazy={true}
       >
         {notificationIcon}
-      </Popover2>
+      </Popover>
     );
   }
 
@@ -75,16 +74,14 @@ const makeNotificationMessage = (type: NotificationType) => {
   switch (type) {
     case NotificationTypes.new:
       return 'This assessment is new.';
-    case NotificationTypes.deadline:
-      return 'This assessment is closing soon.';
-    case NotificationTypes.autograded:
-      return 'This assessment has been autograded.';
     case NotificationTypes.submitted:
       return 'This submission is new.';
     case NotificationTypes.unsubmitted:
       return 'This assessment has been unsubmitted.';
-    case NotificationTypes.graded:
-      return 'This assessment has been manually graded.';
+    case NotificationTypes.published_grading:
+      return "This submission's grading has been published.";
+    case NotificationTypes.unpublished_grading:
+      return "This submission's grading has been unpublished.";
     case NotificationTypes.new_message:
       return 'There are new messages.';
     default:
diff --git a/src/commons/notificationBadge/NotificationBadgeTypes.ts b/src/commons/notificationBadge/NotificationBadgeTypes.ts
index e7ed326036..79b9e88b00 100644
--- a/src/commons/notificationBadge/NotificationBadgeTypes.ts
+++ b/src/commons/notificationBadge/NotificationBadgeTypes.ts
@@ -9,11 +9,10 @@ export type Notification = {
 
 export enum NotificationTypes {
   new = 'new',
-  deadline = 'deadline',
-  autograded = 'autograded',
-  graded = 'graded',
   submitted = 'submitted',
   unsubmitted = 'unsubmitted',
+  published_grading = 'published_grading',
+  unpublished_grading = 'unpublished_grading',
   new_message = 'new_message'
 }
 
diff --git a/src/commons/notificationBadge/__tests__/NotificationBadge.tsx b/src/commons/notificationBadge/__tests__/NotificationBadge.tsx
index 2931c4551a..9f8904819e 100644
--- a/src/commons/notificationBadge/__tests__/NotificationBadge.tsx
+++ b/src/commons/notificationBadge/__tests__/NotificationBadge.tsx
@@ -20,18 +20,18 @@ const notifications: Notification[] = [
   },
   {
     id: 2,
-    type: 'graded',
+    type: 'published_grading',
     assessment_id: 1,
     assessment_type: 'Missions',
-    assessment_title: 'The Secret to Streams'
+    assessment_title: 'The Secret to Streams',
+    submission_id: 3
   },
   {
     id: 3,
-    type: 'autograded',
-    assessment_id: 2,
+    type: 'unpublished_grading',
+    assessment_id: 1,
     assessment_type: 'Missions',
-    assessment_title: 'The Secret to Streams',
-    submission_id: 3
+    assessment_title: 'The Secret to Streams'
   },
   {
     id: 4,
diff --git a/src/commons/notificationBadge/__tests__/NotificationBadgeHelper.ts b/src/commons/notificationBadge/__tests__/NotificationBadgeHelper.ts
index 63273242e7..f90fcf6b07 100644
--- a/src/commons/notificationBadge/__tests__/NotificationBadgeHelper.ts
+++ b/src/commons/notificationBadge/__tests__/NotificationBadgeHelper.ts
@@ -11,7 +11,7 @@ const notificationMission: Notification = {
 
 const notificationSidequest: Notification = {
   id: 2,
-  type: 'autograded',
+  type: 'published_grading',
   assessment_id: 2,
   assessment_type: 'Quests',
   assessment_title: 'Quest_1'
@@ -19,7 +19,7 @@ const notificationSidequest: Notification = {
 
 const notificationPath: Notification = {
   id: 3,
-  type: 'graded',
+  type: 'published_grading',
   assessment_id: 3,
   assessment_type: 'Paths',
   assessment_title: 'Path_1'
diff --git a/src/commons/profile/Profile.tsx b/src/commons/profile/Profile.tsx
index 6fd1dda073..d9abf07520 100644
--- a/src/commons/profile/Profile.tsx
+++ b/src/commons/profile/Profile.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { fetchAssessmentOverviews, fetchTotalXp } from '../application/actions/SessionActions';
-import { AssessmentStatuses, AssessmentType, GradingStatuses } from '../assessment/AssessmentTypes';
+import { AssessmentStatuses, AssessmentType } from '../assessment/AssessmentTypes';
 import Constants from '../utils/Constants';
 import { useSession } from '../utils/Hooks';
 import ProfileCard from './ProfileCard';
@@ -126,12 +126,7 @@ const Profile: React.FC<ProfileProps> = props => {
 
       // Build condensed assessment cards from an array of assessments
       const summaryCallouts = assessmentOverviews!
-        .filter(
-          item =>
-            item.status === AssessmentStatuses.submitted &&
-            (item.gradingStatus === GradingStatuses.graded ||
-              item.gradingStatus === GradingStatuses.excluded)
-        )
+        .filter(item => item.isGradingPublished)
         .map((assessment, index) => {
           return (
             <ProfileCard
diff --git a/src/commons/profile/__tests__/Profile.tsx b/src/commons/profile/__tests__/Profile.tsx
index d12e179e09..fb45118901 100644
--- a/src/commons/profile/__tests__/Profile.tsx
+++ b/src/commons/profile/__tests__/Profile.tsx
@@ -24,6 +24,7 @@ const assessmentConfigurations: AssessmentConfiguration[] = [
   assessmentConfigId: i,
   type: c,
   isManuallyGraded: false,
+  isGradingAutoPublished: false,
   displayInDashboard: false,
   hasTokenCounter: false,
   hasVotingFeatures: false,
@@ -94,11 +95,7 @@ test('Profile renders correctly when there are closed and graded, or closed and
     }
   );
 
-  const numProfileCards = mockAssessmentOverviews.filter(
-    item =>
-      item.status === AssessmentStatuses.submitted &&
-      (item.gradingStatus === 'graded' || item.gradingStatus === 'excluded')
-  ).length;
+  const numProfileCards = mockAssessmentOverviews.filter(item => item.isGradingPublished).length;
 
   [
     'profile-summary-navlink',
diff --git a/src/commons/sagas/BackendSaga.ts b/src/commons/sagas/BackendSaga.ts
index 62de8a52d4..eedda867fc 100644
--- a/src/commons/sagas/BackendSaga.ts
+++ b/src/commons/sagas/BackendSaga.ts
@@ -22,6 +22,8 @@ import {
   CONFIGURE_ASSESSMENT,
   DELETE_ASSESSMENT,
   PUBLISH_ASSESSMENT,
+  PUBLISH_GRADING_ALL,
+  UNPUBLISH_GRADING_ALL,
   UPLOAD_ASSESSMENT
 } from '../../features/groundControl/GroundControlTypes';
 import { FETCH_SOURCECAST_INDEX } from '../../features/sourceRecorder/sourcecast/SourcecastTypes';
@@ -63,6 +65,7 @@ import {
   FETCH_TOTAL_XP_ADMIN,
   FETCH_USER_AND_COURSE,
   NotificationConfiguration,
+  PUBLISH_GRADING,
   REAUTOGRADE_ANSWER,
   REAUTOGRADE_SUBMISSION,
   SUBMIT_ANSWER,
@@ -70,6 +73,7 @@ import {
   SUBMIT_GRADING_AND_CONTINUE,
   TimeOption,
   Tokens,
+  UNPUBLISH_GRADING,
   UNSUBMIT_SUBMISSION,
   UPDATE_ASSESSMENT_CONFIGS,
   UPDATE_COURSE_CONFIG,
@@ -89,6 +93,7 @@ import {
   AssessmentOverview,
   AssessmentStatuses,
   FETCH_ASSESSMENT_OVERVIEWS,
+  ProgressStatuses,
   Question,
   SUBMIT_ASSESSMENT
 } from '../assessment/AssessmentTypes';
@@ -136,6 +141,8 @@ import {
   postTeams,
   postUnsubmit,
   postUploadTeams,
+  publishGrading,
+  publishGradingAll,
   putAssessmentConfigs,
   putCourseConfig,
   putCourseResearchAgreement,
@@ -149,6 +156,8 @@ import {
   removeAssessmentConfig,
   removeTimeOptions,
   removeUserCourseRegistration,
+  unpublishGrading,
+  unpublishGradingAll,
   updateAssessment,
   uploadAssessment
 } from './RequestsSaga';
@@ -458,13 +467,13 @@ function* BackendSaga(): SagaIterator {
         return;
       }
 
-      const { filterToGroup, gradedFilter, pageParams, filterParams } = action.payload;
+      const { filterToGroup, publishedFilter, pageParams, filterParams } = action.payload;
 
       const gradingOverviews: GradingOverviews | null = yield call(
         getGradingOverviews,
         tokens,
         filterToGroup,
-        gradedFilter,
+        publishedFilter,
         pageParams,
         filterParams
       );
@@ -635,7 +644,7 @@ function* BackendSaga(): SagaIterator {
       );
       const newOverviews = overviews.map(overview => {
         if (overview.submissionId === submissionId) {
-          return { ...overview, submissionStatus: 'attempted' };
+          return { ...overview, progress: ProgressStatuses.attempted };
         }
         return overview;
       });
@@ -651,6 +660,70 @@ function* BackendSaga(): SagaIterator {
     }
   );
 
+  yield takeEvery(
+    PUBLISH_GRADING,
+    function* (action: ReturnType<typeof actions.publishGrading>): any {
+      const tokens: Tokens = yield selectTokens();
+      const { submissionId } = action.payload;
+
+      const resp: Response | null = yield publishGrading(submissionId, tokens);
+      if (!resp || !resp.ok) {
+        return yield handleResponseError(resp);
+      }
+
+      const overviews: GradingOverview[] = yield select(
+        (state: OverallState) => state.session.gradingOverviews?.data || []
+      );
+      const newOverviews = overviews.map(overview => {
+        if (overview.submissionId === submissionId) {
+          return { ...overview, progress: ProgressStatuses.published };
+        }
+        return overview;
+      });
+
+      const totalPossibleEntries = yield select(
+        (state: OverallState) => state.session.gradingOverviews?.count
+      );
+
+      yield call(showSuccessMessage, 'Publish grading successful', 1000);
+      yield put(
+        actions.updateGradingOverviews({ count: totalPossibleEntries, data: newOverviews })
+      );
+    }
+  );
+
+  yield takeEvery(
+    UNPUBLISH_GRADING,
+    function* (action: ReturnType<typeof actions.unpublishGrading>): any {
+      const tokens: Tokens = yield selectTokens();
+      const { submissionId } = action.payload;
+
+      const resp: Response | null = yield unpublishGrading(submissionId, tokens);
+      if (!resp || !resp.ok) {
+        return yield handleResponseError(resp);
+      }
+
+      const overviews: GradingOverview[] = yield select(
+        (state: OverallState) => state.session.gradingOverviews?.data || []
+      );
+      const newOverviews = overviews.map(overview => {
+        if (overview.submissionId === submissionId) {
+          return { ...overview, progress: ProgressStatuses.graded };
+        }
+        return overview;
+      });
+
+      const totalPossibleEntries = yield select(
+        (state: OverallState) => state.session.gradingOverviews?.count
+      );
+
+      yield call(showSuccessMessage, 'Unpublish grading successful', 1000);
+      yield put(
+        actions.updateGradingOverviews({ count: totalPossibleEntries, data: newOverviews })
+      );
+    }
+  );
+
   const sendGrade = function* (
     action:
       | ReturnType<typeof actions.submitGrading>
@@ -1155,11 +1228,12 @@ function* BackendSaga(): SagaIterator {
       yield put(actions.clearStoriesUserAndGroup());
     }
 
-    const placeholderAssessmentConfig = [
+    const placeholderAssessmentConfig: AssessmentConfiguration[] = [
       {
         type: 'Missions',
         assessmentConfigId: -1,
         isManuallyGraded: true,
+        isGradingAutoPublished: false,
         displayInDashboard: true,
         hoursBeforeEarlyXpDecay: 0,
         hasTokenCounter: false,
@@ -1318,7 +1392,7 @@ function* BackendSaga(): SagaIterator {
     function* (action: ReturnType<typeof actions.publishAssessment>): any {
       const tokens: Tokens = yield selectTokens();
       const id = action.payload.id;
-      const togglePublishTo = action.payload.togglePublishTo;
+      const togglePublishTo = action.payload.togglePublishAssessmentTo;
 
       const resp: Response | null = yield updateAssessment(
         id,
@@ -1409,6 +1483,38 @@ function* BackendSaga(): SagaIterator {
       yield call(showSuccessMessage, 'Updated successfully!', 1000);
     }
   );
+
+  yield takeEvery(
+    PUBLISH_GRADING_ALL,
+    function* (action: ReturnType<typeof actions.publishGradingAll>): any {
+      const tokens: Tokens = yield selectTokens();
+      const id = action.payload;
+
+      const resp: Response | null = yield publishGradingAll(id, tokens);
+      if (!resp || !resp.ok) {
+        return yield handleResponseError(resp);
+      }
+
+      yield put(actions.fetchAssessmentOverviews());
+      yield call(showSuccessMessage, 'Published all graded submissons successfully!', 1000);
+    }
+  );
+
+  yield takeEvery(
+    UNPUBLISH_GRADING_ALL,
+    function* (action: ReturnType<typeof actions.unpublishGradingAll>): any {
+      const tokens: Tokens = yield selectTokens();
+      const id = action.payload;
+
+      const resp: Response | null = yield unpublishGradingAll(id, tokens);
+      if (!resp || !resp.ok) {
+        return yield handleResponseError(resp);
+      }
+
+      yield put(actions.fetchAssessmentOverviews());
+      yield call(showSuccessMessage, 'Unpublished all submissons successfully!', 1000);
+    }
+  );
 }
 
 function* handleReautogradeResponse(resp: Response | null): any {
diff --git a/src/commons/sagas/PlaygroundSaga.ts b/src/commons/sagas/PlaygroundSaga.ts
index bb813e1cd1..ab212d471b 100644
--- a/src/commons/sagas/PlaygroundSaga.ts
+++ b/src/commons/sagas/PlaygroundSaga.ts
@@ -5,6 +5,7 @@ import qs from 'query-string';
 import { SagaIterator } from 'redux-saga';
 import { call, delay, put, race, select } from 'redux-saga/effects';
 import CseMachine from 'src/features/cseMachine/CseMachine';
+import { CseMachine as JavaCseMachine } from 'src/features/cseMachine/java/CseMachine';
 
 import {
   changeQueryString,
@@ -100,12 +101,17 @@ export default function* PlaygroundSaga(): SagaIterator {
       if (newId !== SideContentType.cseMachine) {
         yield put(toggleUsingCse(false, workspaceLocation));
         yield call([CseMachine, CseMachine.clearCse]);
+        yield call([JavaCseMachine, JavaCseMachine.clearCse]);
         yield put(updateCurrentStep(-1, workspaceLocation));
         yield put(updateStepsTotal(0, workspaceLocation));
         yield put(toggleUpdateCse(true, workspaceLocation));
         yield put(setEditorHighlightedLines(workspaceLocation, 0, []));
       }
 
+      if (playgroundSourceChapter === Chapter.FULL_JAVA && newId === SideContentType.cseMachine) {
+        yield put(toggleUsingCse(true, workspaceLocation));
+      }
+
       if (
         isSourceLanguage(playgroundSourceChapter) &&
         (newId === SideContentType.substVisualizer || newId === SideContentType.cseMachine)
diff --git a/src/commons/sagas/RequestsSaga.ts b/src/commons/sagas/RequestsSaga.ts
index 50e95e8626..6c7a1ee68b 100644
--- a/src/commons/sagas/RequestsSaga.ts
+++ b/src/commons/sagas/RequestsSaga.ts
@@ -1,4 +1,5 @@
 import { call } from 'redux-saga/effects';
+import { backendParamsToProgressStatus } from 'src/features/grading/GradingUtils';
 import { OptionType } from 'src/pages/academy/teamFormation/subcomponents/TeamFormationForm';
 
 import {
@@ -48,7 +49,6 @@ import {
   AssessmentConfiguration,
   AssessmentOverview,
   ContestEntry,
-  GradingStatus,
   IContestVotingQuestion,
   IProgrammingQuestion,
   QuestionType,
@@ -429,12 +429,6 @@ export const getAssessmentOverviews = async (
   const assessmentOverviews = await resp.json();
 
   return assessmentOverviews.map((overview: any) => {
-    overview.gradingStatus = computeGradingStatus(
-      overview.isManuallyGraded,
-      overview.status,
-      overview.gradedCount,
-      overview.questionCount
-    );
     delete overview.gradedCount;
     delete overview.questionCount;
 
@@ -481,12 +475,6 @@ export const getUserAssessmentOverviews = async (
   }
   const assessmentOverviews = await resp.json();
   return assessmentOverviews.map((overview: any) => {
-    overview.gradingStatus = computeGradingStatus(
-      overview.isManuallyGraded,
-      overview.status,
-      overview.gradedCount,
-      overview.questionCount
-    );
     delete overview.gradedCount;
     delete overview.questionCount;
 
@@ -668,7 +656,7 @@ export const getGradingOverviews = async (
           studentNames: overview.team
             ? overview.team.team_members.map((member: { name: any }) => member.name)
             : undefined,
-          studentUsername: overview.student ? overview.student.name : undefined,
+          studentUsername: overview.student ? overview.student.username : undefined,
           studentUsernames: overview.team
             ? overview.team.team_members.map((member: { username: any }) => member.username)
             : undefined,
@@ -676,8 +664,14 @@ export const getGradingOverviews = async (
           submissionStatus: overview.status,
           groupName: overview.student ? overview.student.groupName : '-',
           groupLeaderId: overview.student ? overview.student.groupLeaderId : undefined,
-          // Grading Status
-          gradingStatus: 'none',
+          isGradingPublished: overview.isGradingPublished,
+          progress: backendParamsToProgressStatus(
+            overview.assessment.isManuallyGraded,
+            overview.isGradingPublished,
+            overview.status,
+            overview.gradedCount,
+            overview.assessment.questionCount
+          ),
           questionCount: overview.assessment.questionCount,
           gradedCount: overview.gradedCount,
           // XP
@@ -687,12 +681,6 @@ export const getGradingOverviews = async (
           maxXp: overview.assessment.maxXp,
           xpBonus: overview.xpBonus
         };
-        gradingOverview.gradingStatus = computeGradingStatus(
-          overview.assessment.isManuallyGraded,
-          gradingOverview.submissionStatus,
-          gradingOverview.gradedCount,
-          gradingOverview.questionCount
-        );
         return gradingOverview;
       })
       .sort((subX: GradingOverview, subY: GradingOverview) =>
@@ -1026,6 +1014,64 @@ export const postUnsubmit = async (
   return resp;
 };
 
+/**
+ * POST /courses/{courseId}/admin/grading/{submissionId}/publish_grades
+ */
+export const publishGrading = async (
+  submissionId: number,
+  tokens: Tokens
+): Promise<Response | null> => {
+  const resp = await request(`${courseId()}/admin/grading/${submissionId}/publish_grades`, 'POST', {
+    ...tokens,
+    noHeaderAccept: true
+  });
+
+  return resp;
+};
+
+/**
+ * POST /courses/{course_id}/admin/grading/{assessmentid}/publish_all_grades
+ */
+export const publishGradingAll = async (id: number, tokens: Tokens): Promise<Response | null> => {
+  const resp = await request(`${courseId()}/admin/grading/${id}/publish_all_grades`, 'POST', {
+    ...tokens,
+    noHeaderAccept: true
+  });
+
+  return resp;
+};
+
+/**
+ * POST /courses/{courseId}/admin/grading/{submissionId}/unpublish_grades
+ */
+export const unpublishGrading = async (
+  submissionId: number,
+  tokens: Tokens
+): Promise<Response | null> => {
+  const resp = await request(
+    `${courseId()}/admin/grading/${submissionId}/unpublish_grades`,
+    'POST',
+    {
+      ...tokens,
+      noHeaderAccept: true
+    }
+  );
+
+  return resp;
+};
+
+/**
+ * POST /courses/{course_id}/admin/grading/{assessmentid}/unpublish_all_grades
+ */
+export const unpublishGradingAll = async (id: number, tokens: Tokens): Promise<Response | null> => {
+  const resp = await request(`${courseId()}/admin/grading/${id}/unpublish_all_grades`, 'POST', {
+    ...tokens,
+    noHeaderAccept: true
+  });
+
+  return resp;
+};
+
 /**
  * GET /courses/{courseId}/notifications
  */
@@ -1614,28 +1660,6 @@ export async function deleteDevice(device: Pick<Device, 'id'>, tokens?: Tokens):
   return true;
 }
 
-/**
- * POST /chat
- */
-
-export async function chat(
-  tokens: Tokens,
-  payload: { role: string; content: string }[]
-): Promise<string> {
-  const response = await request(`chat`, 'POST', {
-    ...tokens,
-    body: { json: payload }
-  });
-  if (!response) {
-    throw new Error('Unknown error occurred.');
-  }
-  if (!response.ok) {
-    const message = await response.text();
-    throw new Error(`Failed to chat to louis: ${message}`);
-  }
-  return response.text();
-}
-
 function fillTokens(tokens?: Tokens): Tokens {
   tokens = tokens || getTokensFromStore();
   if (!tokens) {
@@ -1673,22 +1697,6 @@ export function* handleResponseError(resp: Response | null): any {
   yield call(showWarningMessage, respText);
 }
 
-const computeGradingStatus = (
-  isManuallyGraded: boolean,
-  submissionStatus: any,
-  numGraded: number,
-  numQuestions: number
-): GradingStatus =>
-  // isGraded refers to whether the assessment type is graded or not, as specified in
-  // the respective assessment configuration
-  isManuallyGraded && submissionStatus === 'submitted'
-    ? numGraded === 0
-      ? 'none'
-      : numGraded === numQuestions
-      ? 'graded'
-      : 'grading'
-    : 'excluded';
-
 const courseId: () => string = () => {
   const id = store.getState().session.courseId;
   if (id) {
diff --git a/src/commons/sagas/WorkspaceSaga/helpers/evalCode.ts b/src/commons/sagas/WorkspaceSaga/helpers/evalCode.ts
index ef6d262e58..29426be942 100644
--- a/src/commons/sagas/WorkspaceSaga/helpers/evalCode.ts
+++ b/src/commons/sagas/WorkspaceSaga/helpers/evalCode.ts
@@ -251,6 +251,7 @@ export function* evalCode(
   let lastDebuggerResult = yield select(
     (state: OverallState) => state.workspaces[workspaceLocation].lastDebuggerResult
   );
+  const isUsingCse = yield select((state: OverallState) => state.workspaces['playground'].usingCse);
 
   // Handles `console.log` statements in fullJS
   const detachConsole: () => void =
@@ -267,7 +268,7 @@ export function* evalCode(
         : isC
         ? call(cCompileAndRun, entrypointCode, context)
         : isJava
-        ? call(javaRun, entrypointCode, context)
+        ? call(javaRun, entrypointCode, context, currentStep, isUsingCse)
         : call(
             runFilesInContext,
             isFolderModeEnabled
diff --git a/src/commons/sagas/WorkspaceSaga/helpers/updateInspector.ts b/src/commons/sagas/WorkspaceSaga/helpers/updateInspector.ts
index 7a0305091b..788e813ebf 100644
--- a/src/commons/sagas/WorkspaceSaga/helpers/updateInspector.ts
+++ b/src/commons/sagas/WorkspaceSaga/helpers/updateInspector.ts
@@ -1,24 +1,41 @@
+import { Chapter } from 'js-slang/dist/types';
 import { SagaIterator } from 'redux-saga';
 import { put, select } from 'redux-saga/effects';
 
 import { OverallState } from '../../../application/ApplicationTypes';
 import { actions } from '../../../utils/ActionsHelper';
+import { visualizeJavaCseMachine } from '../../../utils/JavaHelper';
 import { visualizeCseMachine } from '../../../utils/JsSlangHelper';
 import { WorkspaceLocation } from '../../../workspace/WorkspaceTypes';
 
 export function* updateInspector(workspaceLocation: WorkspaceLocation): SagaIterator {
   try {
-    const lastDebuggerResult = yield select(
-      (state: OverallState) => state.workspaces[workspaceLocation].lastDebuggerResult
-    );
-    const row = lastDebuggerResult.context.runtime.nodes[0].loc.start.line - 1;
-    // TODO: Hardcoded to make use of the first editor tab. Rewrite after editor tabs are added.
-    yield put(actions.setEditorHighlightedLines(workspaceLocation, 0, []));
-    // We highlight only one row to show the current line
-    // If we highlight from start to end, the whole program block will be highlighted at the start
-    // since the first node is the program node
-    yield put(actions.setEditorHighlightedLines(workspaceLocation, 0, [[row, row]]));
-    visualizeCseMachine(lastDebuggerResult);
+    const [lastDebuggerResult, chapter] = yield select((state: OverallState) => [
+      state.workspaces[workspaceLocation].lastDebuggerResult,
+      state.workspaces[workspaceLocation].context.chapter
+    ]);
+    if (chapter === Chapter.FULL_JAVA) {
+      const controlItem = lastDebuggerResult.context.control.peek();
+      let start = -1;
+      let end = -1;
+      if (controlItem?.srcNode?.location) {
+        const node = controlItem.srcNode;
+        start = node.location.startLine - 1;
+        end = node.location.endLine ? node.location.endLine - 1 : start;
+      }
+      yield put(actions.setEditorHighlightedLines(workspaceLocation, 0, []));
+      yield put(actions.setEditorHighlightedLines(workspaceLocation, 0, [[start, end]]));
+      visualizeJavaCseMachine(lastDebuggerResult);
+    } else {
+      const row = lastDebuggerResult.context.runtime.nodes[0].loc.start.line - 1;
+      // TODO: Hardcoded to make use of the first editor tab. Rewrite after editor tabs are added.
+      yield put(actions.setEditorHighlightedLines(workspaceLocation, 0, []));
+      // We highlight only one row to show the current line
+      // If we highlight from start to end, the whole program block will be highlighted at the start
+      // since the first node is the program node
+      yield put(actions.setEditorHighlightedLines(workspaceLocation, 0, [[row, row]]));
+      visualizeCseMachine(lastDebuggerResult);
+    }
   } catch (e) {
     // TODO: Hardcoded to make use of the first editor tab. Rewrite after editor tabs are added.
     yield put(actions.setEditorHighlightedLines(workspaceLocation, 0, []));
diff --git a/src/commons/sagas/WorkspaceSaga/index.ts b/src/commons/sagas/WorkspaceSaga/index.ts
index 6cd5760f9d..57ccf7f0fe 100644
--- a/src/commons/sagas/WorkspaceSaga/index.ts
+++ b/src/commons/sagas/WorkspaceSaga/index.ts
@@ -490,7 +490,7 @@ export default function* WorkspaceSaga(): SagaIterator {
       yield call([CseMachine, CseMachine.clear]);
       const globals: Array<[string, any]> = action.payload.library.globals as Array<[string, any]>;
       for (const [key, value] of globals) {
-        window[key] = value;
+        window[key as any] = value;
       }
       yield put(
         actions.endClearContext(
diff --git a/src/commons/sagas/__tests__/BackendSaga.ts b/src/commons/sagas/__tests__/BackendSaga.ts
index add54c78f8..402d6b9915 100644
--- a/src/commons/sagas/__tests__/BackendSaga.ts
+++ b/src/commons/sagas/__tests__/BackendSaga.ts
@@ -228,6 +228,7 @@ const mockAssessmentConfigurations: AssessmentConfiguration[] = [
     assessmentConfigId: 1,
     type: 'Missions',
     isManuallyGraded: true,
+    isGradingAutoPublished: false,
     displayInDashboard: true,
     hoursBeforeEarlyXpDecay: 48,
     hasTokenCounter: false,
@@ -238,6 +239,7 @@ const mockAssessmentConfigurations: AssessmentConfiguration[] = [
     assessmentConfigId: 2,
     type: 'Quests',
     isManuallyGraded: true,
+    isGradingAutoPublished: false,
     displayInDashboard: true,
     hoursBeforeEarlyXpDecay: 48,
     hasTokenCounter: false,
@@ -248,6 +250,7 @@ const mockAssessmentConfigurations: AssessmentConfiguration[] = [
     assessmentConfigId: 3,
     type: 'Paths',
     isManuallyGraded: false,
+    isGradingAutoPublished: true,
     displayInDashboard: false,
     hoursBeforeEarlyXpDecay: 48,
     hasTokenCounter: false,
@@ -258,6 +261,7 @@ const mockAssessmentConfigurations: AssessmentConfiguration[] = [
     assessmentConfigId: 4,
     type: 'Contests',
     isManuallyGraded: false,
+    isGradingAutoPublished: false,
     displayInDashboard: false,
     hoursBeforeEarlyXpDecay: 48,
     hasTokenCounter: false,
@@ -268,6 +272,7 @@ const mockAssessmentConfigurations: AssessmentConfiguration[] = [
     assessmentConfigId: 5,
     type: 'Others',
     isManuallyGraded: true,
+    isGradingAutoPublished: false,
     displayInDashboard: false,
     hoursBeforeEarlyXpDecay: 48,
     hasTokenCounter: false,
@@ -1065,11 +1070,12 @@ describe('Test CREATE_COURSE action', () => {
   const user = mockUser;
   const courseConfiguration = mockCourseConfiguration1;
   const courseRegistration = mockCourseRegistration1;
-  const placeholderAssessmentConfig = [
+  const placeholderAssessmentConfig: AssessmentConfiguration[] = [
     {
       type: 'Missions',
       assessmentConfigId: -1,
       isManuallyGraded: true,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hoursBeforeEarlyXpDecay: 0,
       hasTokenCounter: false,
diff --git a/src/commons/sideContent/SideContent.tsx b/src/commons/sideContent/SideContent.tsx
index 7b266dc078..75cffad579 100644
--- a/src/commons/sideContent/SideContent.tsx
+++ b/src/commons/sideContent/SideContent.tsx
@@ -1,5 +1,4 @@
-import { Card, Icon, Tab, TabProps, Tabs } from '@blueprintjs/core';
-import { Tooltip2 } from '@blueprintjs/popover2';
+import { Card, Icon, Tab, TabProps, Tabs, Tooltip } from '@blueprintjs/core';
 
 import { assertType } from '../utils/TypeHelper';
 import { generateTabAlert, getTabId } from './SideContentHelper';
@@ -34,11 +33,11 @@ const renderTab = (
   const iconSize = 20;
   const tabId = getTabId(tab);
   const tabTitle = (
-    <Tooltip2 content={tab.label}>
+    <Tooltip content={tab.label}>
       <div className={generateTabAlert(shouldAlert)}>
         <Icon icon={tab.iconName} size={iconSize} />
       </div>
-    </Tooltip2>
+    </Tooltip>
   );
   const tabProps = assertType<TabProps>()({
     id: tabId,
diff --git a/src/commons/sideContent/SideContentHelper.ts b/src/commons/sideContent/SideContentHelper.ts
index 08553cfd94..7971b0f82a 100644
--- a/src/commons/sideContent/SideContentHelper.ts
+++ b/src/commons/sideContent/SideContentHelper.ts
@@ -1,7 +1,6 @@
 import * as bpcore from '@blueprintjs/core';
 import { TabId } from '@blueprintjs/core';
 import * as bpicons from '@blueprintjs/icons';
-import * as bppopover from '@blueprintjs/popover2';
 import * as jsslang from 'js-slang';
 import * as jsslangDist from 'js-slang/dist';
 import lodash from 'lodash';
@@ -34,7 +33,6 @@ const requireProvider = (x: string) => {
     'react-dom': ReactDOM,
     '@blueprintjs/core': bpcore,
     '@blueprintjs/icons': bpicons,
-    '@blueprintjs/popover2': bppopover,
     'js-slang': jsslang,
     'js-slang/dist': jsslangDist,
     lodash,
@@ -42,7 +40,7 @@ const requireProvider = (x: string) => {
   };
 
   if (!(x in exports)) throw new Error(`Dynamic require of ${x} is not supported`);
-  return exports[x];
+  return exports[x as keyof typeof exports] as any;
 };
 
 type RawTab = (provider: ReturnType<typeof requireProvider>) => { default: ModuleSideContent };
diff --git a/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.tsx.snap b/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.tsx.snap
index 3ded2a0fb5..f33e89daec 100644
--- a/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.tsx.snap
+++ b/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.tsx.snap
@@ -352,17 +352,19 @@ exports[`CSE Machine component renders correctly 1`] = `
     data-testid="cse-machine-default-text"
     id="cse-machine-default-text"
   >
-    The CSE machine generates control, stash and environment model diagrams following a notation introduced in
-     
-    <a
-      href="https://sourceacademy.org/sicpjs/3.2"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <i>
-        Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 3, Section 2
-      </i>
-    </a>
+    <span>
+      The CSE machine generates control, stash and environment model diagrams following a notation introduced in
+       
+      <a
+        href="https://sourceacademy.org/sicpjs/3.2"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <i>
+          Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 3, Section 2
+        </i>
+      </a>
+    </span>
     .
     <br />
     <br />
diff --git a/src/commons/sideContent/content/SideContentAutograder.tsx b/src/commons/sideContent/content/SideContentAutograder.tsx
index 698ddeb473..2379c24137 100644
--- a/src/commons/sideContent/content/SideContentAutograder.tsx
+++ b/src/commons/sideContent/content/SideContentAutograder.tsx
@@ -1,6 +1,5 @@
-import { Button, Collapse, Icon, PopoverPosition } from '@blueprintjs/core';
+import { Button, Collapse, Icon, PopoverPosition, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 
 import { AutogradingResult, Testcase } from '../../assessment/AssessmentTypes';
@@ -89,9 +88,9 @@ const SideContentAutograder: React.FC<SideContentAutograderProps> = props => {
         onClick={toggleTestcases}
       >
         <span>Testcases</span>
-        <Tooltip2 content={autograderTooltip} placement={PopoverPosition.LEFT}>
+        <Tooltip content={autograderTooltip} placement={PopoverPosition.LEFT}>
           <Icon icon={IconNames.HELP} />
-        </Tooltip2>
+        </Tooltip>
       </Button>
       <Collapse isOpen={showsTestcases} keepChildrenMounted={true}>
         {testcaseCards}
diff --git a/src/commons/sideContent/content/SideContentContestLeaderboard.tsx b/src/commons/sideContent/content/SideContentContestLeaderboard.tsx
index d072cc3131..49f255eb99 100644
--- a/src/commons/sideContent/content/SideContentContestLeaderboard.tsx
+++ b/src/commons/sideContent/content/SideContentContestLeaderboard.tsx
@@ -1,6 +1,5 @@
-import { Button, Collapse, Icon } from '@blueprintjs/core';
+import { Button, Collapse, Icon, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React, { useMemo, useState } from 'react';
 
 import { ContestEntry } from '../../assessment/AssessmentTypes';
@@ -104,9 +103,9 @@ const SideContentContestLeaderboard: React.FC<SideContentContestLeaderboardProps
         onClick={() => setShowLeaderboard(!showLeaderboard)}
       >
         <span>{leaderboardTitle}</span>
-        <Tooltip2 content={contestLeaderboardTooltipContent}>
+        <Tooltip content={contestLeaderboardTooltipContent}>
           <Icon icon={IconNames.HELP} />
-        </Tooltip2>
+        </Tooltip>
       </Button>
       <Collapse isOpen={showLeaderboard} keepChildrenMounted>
         {contestEntryCards}
diff --git a/src/commons/sideContent/content/SideContentContestVoting.tsx b/src/commons/sideContent/content/SideContentContestVoting.tsx
index f6c12fe6f6..2af8989e25 100644
--- a/src/commons/sideContent/content/SideContentContestVoting.tsx
+++ b/src/commons/sideContent/content/SideContentContestVoting.tsx
@@ -1,6 +1,5 @@
-import { Button, Card, Classes, Collapse, Elevation, Icon, Pre } from '@blueprintjs/core';
+import { Button, Card, Classes, Collapse, Elevation, Icon, Pre, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
@@ -98,8 +97,8 @@ const SideContentContestVoting: React.FC<SideContentContestVotingProps> = ({
     [currentDraggedItem]
   );
 
-  const contestEntryRefs = useRef({});
-  const tierContainerRefs = useRef({});
+  const contestEntryRefs = useRef<Record<number, HTMLDivElement | null>>({});
+  const tierContainerRefs = useRef<Record<number, HTMLDivElement | null>>({});
 
   const tierBoard = useMemo(() => {
     return TIERS.map((tier, index) => (
@@ -214,13 +213,13 @@ const SideContentContestVoting: React.FC<SideContentContestVotingProps> = ({
         onClick={() => setShowContestEntries(!showContestEntries)}
       >
         <span>Contest Voting</span>
-        <Tooltip2
+        <Tooltip
           content={
             <span>Rank your favourite contest entries from tiers D (worst) to S (best)!</span>
           }
         >
           <Icon icon={IconNames.HELP} />
-        </Tooltip2>
+        </Tooltip>
       </Button>
       <Collapse isOpen={showContestEntries} keepChildrenMounted>
         {contestEntryCards}
diff --git a/src/commons/sideContent/content/SideContentCseMachine.tsx b/src/commons/sideContent/content/SideContentCseMachine.tsx
index 009c2aec85..277cb79422 100644
--- a/src/commons/sideContent/content/SideContentCseMachine.tsx
+++ b/src/commons/sideContent/content/SideContentCseMachine.tsx
@@ -5,11 +5,12 @@ import {
   Checkbox,
   Classes,
   Divider,
-  Slider
+  Slider,
+  Tooltip
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
+import { Chapter } from 'js-slang/dist/types';
 import { debounce } from 'lodash';
 import React from 'react';
 import { HotKeys } from 'react-hotkeys';
@@ -20,6 +21,7 @@ import type { PlaygroundWorkspaceState } from 'src/commons/workspace/WorkspaceTy
 import CseMachine from 'src/features/cseMachine/CseMachine';
 import { CseAnimation } from 'src/features/cseMachine/CseMachineAnimation';
 import { Layout } from 'src/features/cseMachine/CseMachineLayout';
+import { CseMachine as JavaCseMachine } from 'src/features/cseMachine/java/CseMachine';
 
 import { InterpreterOutput, OverallState } from '../../application/ApplicationTypes';
 import { HighlightedLines } from '../../editor/EditorTypes';
@@ -40,6 +42,7 @@ type State = {
   width: number;
   lastStep: boolean;
   stepLimitExceeded: boolean;
+  chapter: Chapter;
 };
 
 type CseMachineProps = OwnProps & StateProps & DispatchProps;
@@ -53,6 +56,7 @@ type StateProps = {
   changepointSteps: number[];
   needCseUpdate: boolean;
   machineOutput: InterpreterOutput[];
+  chapter: Chapter;
 };
 
 type OwnProps = {
@@ -85,25 +89,39 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
       width: this.calculateWidth(props.editorWidth),
       height: this.calculateHeight(props.sideContentHeight),
       lastStep: false,
-      stepLimitExceeded: false
+      stepLimitExceeded: false,
+      chapter: props.chapter
     };
-    CseMachine.init(
-      visualization => {
-        this.setState({ visualization }, () => CseAnimation.playAnimation());
-        if (visualization) this.props.handleAlertSideContent();
-      },
-      this.state.width,
-      this.state.height,
-      (segments: [number, number][]) => {
-        // TODO: Hardcoded to make use of the first editor tab. Rewrite after editor tabs are added.
-        // This comment is copied over from workspace saga
-        props.setEditorHighlightedLines(0, segments);
-      },
-      // We shouldn't be able to move slider to a step number beyond the step limit
-      isControlEmpty => {
-        this.setState({ stepLimitExceeded: false });
-      }
-    );
+    if (this.isJava()) {
+      JavaCseMachine.init(
+        visualization => this.setState({ visualization }),
+        (segments: [number, number][]) => {
+          props.setEditorHighlightedLines(0, segments);
+        }
+      );
+    } else {
+      CseMachine.init(
+        visualization => {
+          this.setState({ visualization }, () => CseAnimation.playAnimation());
+          if (visualization) this.props.handleAlertSideContent();
+        },
+        this.state.width,
+        this.state.height,
+        (segments: [number, number][]) => {
+          // TODO: Hardcoded to make use of the first editor tab. Rewrite after editor tabs are added.
+          // This comment is copied over from workspace saga
+          props.setEditorHighlightedLines(0, segments);
+        },
+        // We shouldn't be able to move slider to a step number beyond the step limit
+        isControlEmpty => {
+          this.setState({ stepLimitExceeded: false });
+        }
+      );
+    }
+  }
+
+  private isJava(): boolean {
+    return this.props.chapter === Chapter.FULL_JAVA;
   }
 
   private calculateWidth(editorWidth?: string) {
@@ -173,7 +191,11 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
     }
     if (prevProps.needCseUpdate && !this.props.needCseUpdate) {
       this.stepFirst();
-      CseMachine.clearCse();
+      if (this.isJava()) {
+        JavaCseMachine.clearCse();
+      } else {
+        CseMachine.clearCse();
+      }
     }
   }
 
@@ -210,45 +232,53 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
             onRelease={this.sliderRelease}
             value={this.state.value < 0 ? 0 : this.state.value}
           />
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-            <ButtonGroup>
-              <Tooltip2 content="Control and Stash" compact>
-                <AnchorButton
-                  onMouseUp={() => {
-                    if (this.state.visualization) {
-                      CseMachine.toggleControlStash();
-                      CseMachine.redraw();
-                    }
-                  }}
-                  icon="layers"
-                  disabled={!this.state.visualization}
-                >
-                  <Checkbox
-                    checked={CseMachine.getControlStash()}
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: this.isJava() ? 'center' : 'space-between',
+              alignItems: 'center'
+            }}
+          >
+            {!this.isJava() && (
+              <ButtonGroup>
+                <Tooltip content="Control and Stash" compact>
+                  <AnchorButton
+                    onMouseUp={() => {
+                      if (this.state.visualization) {
+                        CseMachine.toggleControlStash();
+                        CseMachine.redraw();
+                      }
+                    }}
+                    icon="layers"
                     disabled={!this.state.visualization}
-                    style={{ margin: 0 }}
-                  />
-                </AnchorButton>
-              </Tooltip2>
-              <Tooltip2 content="Truncate Control" compact>
-                <AnchorButton
-                  onMouseUp={() => {
-                    if (this.state.visualization) {
-                      CseMachine.toggleStackTruncated();
-                      CseMachine.redraw();
-                    }
-                  }}
-                  icon="minimize"
-                  disabled={!this.state.visualization}
-                >
-                  <Checkbox
-                    checked={CseMachine.getStackTruncated()}
+                  >
+                    <Checkbox
+                      checked={CseMachine.getControlStash()}
+                      disabled={!this.state.visualization}
+                      style={{ margin: 0 }}
+                    />
+                  </AnchorButton>
+                </Tooltip>
+                <Tooltip content="Truncate Control" compact>
+                  <AnchorButton
+                    onMouseUp={() => {
+                      if (this.state.visualization) {
+                        CseMachine.toggleStackTruncated();
+                        CseMachine.redraw();
+                      }
+                    }}
+                    icon="minimize"
                     disabled={!this.state.visualization}
-                    style={{ margin: 0 }}
-                  />
-                </AnchorButton>
-              </Tooltip2>
-            </ButtonGroup>
+                  >
+                    <Checkbox
+                      checked={CseMachine.getStackTruncated()}
+                      disabled={!this.state.visualization}
+                      style={{ margin: 0 }}
+                    />
+                  </AnchorButton>
+                </Tooltip>
+              </ButtonGroup>
+            )}
             <ButtonGroup>
               <Button
                 disabled={!this.state.visualization}
@@ -259,13 +289,19 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
                 disabled={!this.state.visualization}
                 icon="chevron-left"
                 onClick={
-                  CseMachine.getControlStash() ? this.stepPrevious : this.stepPrevChangepoint
+                  this.isJava() || CseMachine.getControlStash()
+                    ? this.stepPrevious
+                    : this.stepPrevChangepoint
                 }
               />
               <Button
                 disabled={!this.state.visualization}
                 icon="chevron-right"
-                onClick={CseMachine.getControlStash() ? this.stepNext : this.stepNextChangepoint}
+                onClick={
+                  this.isJava() || CseMachine.getControlStash()
+                    ? this.stepNext
+                    : this.stepNextChangepoint
+                }
               />
               <Button
                 disabled={!this.state.visualization}
@@ -273,33 +309,35 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
                 onClick={this.stepNextBreakpoint}
               />
             </ButtonGroup>
-            <ButtonGroup>
-              <Tooltip2 content="Print" compact>
-                <AnchorButton
-                  onMouseUp={() => {
-                    if (this.state.visualization) {
-                      CseMachine.togglePrintableMode();
-                      CseMachine.redraw();
-                    }
-                  }}
-                  icon="print"
-                  disabled={!this.state.visualization}
-                >
-                  <Checkbox
+            {!this.isJava() && (
+              <ButtonGroup>
+                <Tooltip content="Print" compact>
+                  <AnchorButton
+                    onMouseUp={() => {
+                      if (this.state.visualization) {
+                        CseMachine.togglePrintableMode();
+                        CseMachine.redraw();
+                      }
+                    }}
+                    icon="print"
                     disabled={!this.state.visualization}
-                    checked={CseMachine.getPrintableMode()}
-                    style={{ margin: 0 }}
+                  >
+                    <Checkbox
+                      disabled={!this.state.visualization}
+                      checked={CseMachine.getPrintableMode()}
+                      style={{ margin: 0 }}
+                    />
+                  </AnchorButton>
+                </Tooltip>
+                <Tooltip content="Save" compact>
+                  <AnchorButton
+                    icon="floppy-disk"
+                    disabled={!this.state.visualization}
+                    onClick={Layout.exportImage}
                   />
-                </AnchorButton>
-              </Tooltip2>
-              <Tooltip2 content="Save" compact>
-                <AnchorButton
-                  icon="floppy-disk"
-                  disabled={!this.state.visualization}
-                  onClick={Layout.exportImage}
-                />
-              </Tooltip2>
-            </ButtonGroup>
+                </Tooltip>
+              </ButtonGroup>
+            )}
           </div>
         </div>{' '}
         {this.state.visualization &&
@@ -331,14 +369,34 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
             className={Classes.RUNNING_TEXT}
             data-testid="cse-machine-default-text"
           >
-            The CSE machine generates control, stash and environment model diagrams following a
-            notation introduced in{' '}
-            <a href={Links.textbookChapter3_2} rel="noopener noreferrer" target="_blank">
-              <i>
-                Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 3,
-                Section 2
-              </i>
-            </a>
+            {this.isJava() ? (
+              <span>
+                The CSEC machine generates control, stash, environment and class model diagrams
+                adapted from the notation introduced in{' '}
+                <a href={Links.textbookChapter3_2} rel="noopener noreferrer" target="_blank">
+                  <i>
+                    Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter
+                    3, Section 2
+                  </i>
+                </a>
+                {'. '}
+                You have chosen the sublanguage{' '}
+                <a href={`${Links.sourceDocs}java_csec/`} rel="noopener noreferrer" target="_blank">
+                  <i>Java CSEC</i>
+                </a>
+              </span>
+            ) : (
+              <span>
+                The CSE machine generates control, stash and environment model diagrams following a
+                notation introduced in{' '}
+                <a href={Links.textbookChapter3_2} rel="noopener noreferrer" target="_blank">
+                  <i>
+                    Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter
+                    3, Section 2
+                  </i>
+                </a>
+              </span>
+            )}
             .
             <br />
             <br /> On this tab, the REPL will be hidden from view, so do check that your code has no
@@ -371,13 +429,13 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
           <Button
             icon="plus"
             disabled={!this.state.visualization}
-            onClick={() => Layout.zoomStage(true, 5)}
+            onClick={() => this.zoomStage(true, 5)}
             style={{ marginBottom: '5px', borderRadius: '3px' }}
           />
           <Button
             icon="minus"
             disabled={!this.state.visualization}
-            onClick={() => Layout.zoomStage(false, 5)}
+            onClick={() => this.zoomStage(false, 5)}
             style={{ borderRadius: '3px' }}
           />
         </ButtonGroup>
@@ -385,6 +443,14 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
     );
   }
 
+  private zoomStage = (isZoomIn: boolean, multiplier: number) => {
+    if (this.isJava()) {
+      JavaCseMachine.zoomStage(isZoomIn, multiplier);
+    } else {
+      Layout.zoomStage(isZoomIn, multiplier);
+    }
+  };
+
   private sliderRelease = (newValue: number) => {
     if (newValue === this.props.stepsTotal) {
       this.setState({ lastStep: true });
@@ -509,7 +575,8 @@ const mapStateToProps: MapStateToProps<StateProps, OwnProps, OverallState> = (
     breakpointSteps: workspace.breakpointSteps,
     changepointSteps: workspace.changepointSteps,
     needCseUpdate: workspace.updateCse,
-    machineOutput: workspace.output
+    machineOutput: workspace.output,
+    chapter: workspace.context.chapter
   };
 };
 
diff --git a/src/commons/sideContent/content/SideContentDataVisualizer.tsx b/src/commons/sideContent/content/SideContentDataVisualizer.tsx
index 4b991f216d..8a5306ce62 100644
--- a/src/commons/sideContent/content/SideContentDataVisualizer.tsx
+++ b/src/commons/sideContent/content/SideContentDataVisualizer.tsx
@@ -96,7 +96,7 @@ class SideContentDataVisualizerBase extends React.Component<OwnProps & DispatchP
               >
                 Previous
               </Button>
-              <h3 className="bp5-text-large">
+              <h3 className={Classes.TEXT_LARGE}>
                 Call {this.state.currentStep + 1}/{this.state.steps.length}
               </h3>
               <Button
@@ -130,7 +130,7 @@ class SideContentDataVisualizerBase extends React.Component<OwnProps & DispatchP
                   <Card style={{ background: '#1a2530', padding: 10 }}>
                     {step.length > 1 && (
                       <h5
-                        className="bp5-heading bp5-monospace-text"
+                        className={classNames(Classes.HEADING, Classes.MONOSPACE_TEXT)}
                         style={{ marginTop: 0, marginBottom: 20, whiteSpace: 'nowrap' }}
                       >
                         Structure {i + 1}
diff --git a/src/commons/sideContent/content/SideContentFaceapiDisplay.tsx b/src/commons/sideContent/content/SideContentFaceapiDisplay.tsx
index bdead31ee4..ecdede9192 100644
--- a/src/commons/sideContent/content/SideContentFaceapiDisplay.tsx
+++ b/src/commons/sideContent/content/SideContentFaceapiDisplay.tsx
@@ -21,7 +21,7 @@ const SideContentFaceapiDisplay: React.FC = () => {
     <div className="sa-video-header">
       <div className="sa-video-header-element">
         <Button
-          className={'sa-live-video-button'}
+          className="sa-live-video-button"
           style={{ height: 20 }}
           icon={IconNames.CAMERA}
           onClick={takePhoto}
@@ -35,7 +35,7 @@ const SideContentFaceapiDisplay: React.FC = () => {
       <Divider />
       <div className="sa-video-header-element">
         <Button
-          className={'sa-still-image-button'}
+          className="sa-still-image-button"
           style={{ height: 20 }}
           icon={IconNames.RESET}
           onClick={resetPhoto}
diff --git a/src/commons/sourceRecorder/SourceRecorderEditor.tsx b/src/commons/sourceRecorder/SourceRecorderEditor.tsx
index 9342ee7ccb..ea933a0c48 100644
--- a/src/commons/sourceRecorder/SourceRecorderEditor.tsx
+++ b/src/commons/sourceRecorder/SourceRecorderEditor.tsx
@@ -2,7 +2,9 @@ import 'ace-builds/src-noconflict/ext-searchbox';
 import 'ace-builds/src-noconflict/mode-javascript';
 import 'js-slang/dist/editors/ace/theme/source';
 
+import { Classes } from '@blueprintjs/core';
 import { Ace } from 'ace-builds';
+import classNames from 'classnames';
 import { isEqual } from 'lodash';
 import React from 'react';
 import AceEditor, { IAceEditorProps } from 'react-ace';
@@ -206,7 +208,10 @@ class SourcecastEditor extends React.PureComponent<SourceRecorderEditorProps, {}
 
   public render() {
     return (
-      <HotKeys className="Editor bp5-card bp5-elevation-0" handlers={handlers}>
+      <HotKeys
+        className={classNames('Editor', Classes.CARD, Classes.ELEVATION_0)}
+        handlers={handlers}
+      >
         <div className="row editor-react-ace">
           <AceEditor
             className="react-ace"
diff --git a/src/commons/sourceRecorder/SourceRecorderSelectCell.tsx b/src/commons/sourceRecorder/SourceRecorderSelectCell.tsx
index 7ce1da2e4f..4393c16cbe 100644
--- a/src/commons/sourceRecorder/SourceRecorderSelectCell.tsx
+++ b/src/commons/sourceRecorder/SourceRecorderSelectCell.tsx
@@ -1,5 +1,5 @@
+import { Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 
 import { PlaybackData, SourcecastData } from '../../features/sourceRecorder/SourceRecorderTypes';
@@ -35,9 +35,9 @@ const SourceRecorderSelectCell: React.FC<SourceRecorderSelectCellProps> = ({
   };
 
   return (
-    <Tooltip2 content="Load Sourcecast Recording">
+    <Tooltip content="Load Sourcecast Recording">
       <ControlButton label={`${data.title}`} icon={IconNames.PAPERCLIP} onClick={handleSelect} />
-    </Tooltip2>
+    </Tooltip>
   );
 };
 
diff --git a/src/commons/sourceRecorder/SourceRecorderShareCell.tsx b/src/commons/sourceRecorder/SourceRecorderShareCell.tsx
index 783f9e2408..15c10cb249 100644
--- a/src/commons/sourceRecorder/SourceRecorderShareCell.tsx
+++ b/src/commons/sourceRecorder/SourceRecorderShareCell.tsx
@@ -1,5 +1,5 @@
+import { Popover, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2, Tooltip2 } from '@blueprintjs/popover2';
 import React, { useRef, useState } from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 
@@ -27,24 +27,24 @@ const SourceRecorderShareCell: React.FC<Props> = props => {
   const shareButtonPopoverContent = (
     <div key={shareURL}>
       <input defaultValue={shareURL} readOnly={true} ref={shareInputElem} />
-      <Tooltip2 content="Copy link to clipboard">
+      <Tooltip content="Copy link to clipboard">
         <CopyToClipboard text={shareURL}>
           <ControlButton icon={IconNames.DUPLICATE} onClick={selectShareInputText} />
         </CopyToClipboard>
-      </Tooltip2>
+      </Tooltip>
     </div>
   );
 
   return (
-    <Popover2
+    <Popover
       popoverClassName="Popover-share"
       inheritDarkTheme={false}
       content={shareButtonPopoverContent}
     >
-      <Tooltip2 content="Get shareable link">
+      <Tooltip content="Get shareable link">
         <ControlButton icon={IconNames.SHARE} />
-      </Tooltip2>
-    </Popover2>
+      </Tooltip>
+    </Popover>
   );
 };
 
diff --git a/src/commons/sourceRecorder/SourceRecorderTable.tsx b/src/commons/sourceRecorder/SourceRecorderTable.tsx
index 4298b5f481..cd4d33171b 100644
--- a/src/commons/sourceRecorder/SourceRecorderTable.tsx
+++ b/src/commons/sourceRecorder/SourceRecorderTable.tsx
@@ -169,7 +169,7 @@ class SourcecastTable extends React.Component<SourceRecorderTableProps, State> {
         <div className="SourcecastTable">
           <div className="ag-grid-parent">
             <AgGridReact
-              domLayout={'autoHeight'}
+              domLayout="autoHeight"
               columnDefs={this.state.columnDefs}
               defaultColDef={this.defaultColumnDefs}
               onGridReady={this.onGridReady}
diff --git a/src/commons/utils/DisplayBufferService.ts b/src/commons/utils/DisplayBufferService.ts
index 79347a8df0..3e9f8e57b6 100644
--- a/src/commons/utils/DisplayBufferService.ts
+++ b/src/commons/utils/DisplayBufferService.ts
@@ -22,15 +22,17 @@ class BufferService {
 
   public attachConsole(workspaceLocation: WorkspaceLocation): () => void {
     const bufferCallback = (log: string) => this.push(log, workspaceLocation);
-    const defaultConsole = {};
+    const defaultConsole: Record<string, any> = {};
     Object.entries(consoleOverloads).forEach(([method, overload]) => {
-      defaultConsole[method] = console[method];
-      console[method] = overload(bufferCallback);
+      const key = method as keyof typeof consoleOverloads;
+      defaultConsole[method] = console[key];
+      console[key] = overload(bufferCallback);
     });
 
     return () => {
       Object.entries(consoleOverloads).forEach(([method]) => {
-        console[method] = defaultConsole[method];
+        const key = method as keyof typeof consoleOverloads;
+        console[key] = defaultConsole[key];
       });
     };
   }
diff --git a/src/commons/utils/Hooks.ts b/src/commons/utils/Hooks.ts
index 2b306e8b3a..226a2c9210 100644
--- a/src/commons/utils/Hooks.ts
+++ b/src/commons/utils/Hooks.ts
@@ -7,6 +7,7 @@ import {
 import { useMediaQuery } from 'react-responsive';
 
 import { OverallState } from '../application/ApplicationTypes';
+import { Tokens } from '../application/types/SessionTypes';
 import Constants from './Constants';
 import { readLocalStorage, setLocalStorage } from './LocalStorageHelper';
 
@@ -135,3 +136,23 @@ export const useSession = () => {
     isLoggedIn
   };
 };
+
+// Overload for useTokens
+type UseTokens = {
+  (): Tokens;
+  (options: { throwWhenEmpty: true }): Tokens;
+  (options: { throwWhenEmpty: false }): Partial<Tokens>;
+};
+
+/**
+ * Returns the access token and refresh token from the session.
+ * @param throwWhenEmpty (optional) If true, throws an error if no tokens are found.
+ */
+export const useTokens: UseTokens = ({ throwWhenEmpty = true } = {}) => {
+  const accessToken = useTypedSelector(state => state.session.accessToken);
+  const refreshToken = useTypedSelector(state => state.session.refreshToken);
+  if (throwWhenEmpty && (!accessToken || !refreshToken)) {
+    throw new Error('No access token or refresh token found');
+  }
+  return { accessToken, refreshToken } as Tokens;
+};
diff --git a/src/commons/utils/JavaHelper.ts b/src/commons/utils/JavaHelper.ts
index 21ddc66f51..fab36ed3c3 100644
--- a/src/commons/utils/JavaHelper.ts
+++ b/src/commons/utils/JavaHelper.ts
@@ -1,14 +1,50 @@
+import { compileFromSource, ECE, typeCheck } from 'java-slang';
+import { BinaryWriter } from 'java-slang/dist/compiler/binary-writer';
 import setupJVM, { parseBin } from 'java-slang/dist/jvm';
 import { createModuleProxy, loadCachedFiles } from 'java-slang/dist/jvm/utils/integration';
 import { Context } from 'js-slang';
 import loadSourceModules from 'js-slang/dist/modules/loader';
+import { ErrorSeverity, ErrorType, Result, SourceError } from 'js-slang/dist/types';
 
+import { CseMachine } from '../../features/cseMachine/java/CseMachine';
 import Constants from './Constants';
 import DisplayBufferService from './DisplayBufferService';
 
-export async function javaRun(javaCode: string, context: Context) {
+export async function javaRun(
+  javaCode: string,
+  context: Context,
+  targetStep: number,
+  isUsingCse: boolean
+) {
   let compiled = {};
 
+  const stderr = (type: 'TypeCheck' | 'Compile' | 'Runtime', msg: string) => {
+    context.errors.push({
+      type: type as any,
+      severity: 'Error' as any,
+      location: { start: { line: -1, column: -1 }, end: { line: -1, column: -1 } },
+      explain: () => msg,
+      elaborate: () => msg
+    });
+  };
+
+  const typeCheckResult = typeCheck(javaCode);
+  if (typeCheckResult.hasTypeErrors) {
+    const typeErrMsg = typeCheckResult.errorMsgs.join('\n');
+    stderr('TypeCheck', typeErrMsg);
+    return Promise.resolve({ status: 'error' });
+  }
+
+  try {
+    const classFile = compileFromSource(javaCode);
+    compiled = {
+      'Main.class': Buffer.from(new BinaryWriter().generateBinary(classFile)).toString('base64')
+    };
+  } catch (e) {
+    stderr('Compile', e);
+    return Promise.resolve({ status: 'error' });
+  }
+
   let files = {};
   let buffer: string[] = [];
 
@@ -46,6 +82,7 @@ export async function javaRun(javaCode: string, context: Context) {
     }
     return parseBin(new DataView(bytes.buffer));
   };
+
   const loadNatives = async (path: string) => {
     // dynamic load modules
     if (path.startsWith('modules')) {
@@ -56,6 +93,7 @@ export async function javaRun(javaCode: string, context: Context) {
     }
     return await import(`java-slang/dist/jvm/stdlib/${path}.js`);
   };
+
   const stdout = (str: string) => {
     if (str.endsWith('\n')) {
       buffer.push(str);
@@ -67,33 +105,8 @@ export async function javaRun(javaCode: string, context: Context) {
       buffer.push(str);
     }
   };
-  const stderr = (msg: string) => {
-    context.errors.push({
-      type: 'Runtime' as any,
-      severity: 'Error' as any,
-      location: {
-        start: {
-          line: -1,
-          column: -1
-        },
-        end: {
-          line: -1,
-          column: -1
-        }
-      },
-      explain: () => msg,
-      elaborate: () => msg
-    });
-  };
 
-  // FIXME: Remove when the compiler is working
-  try {
-    const json = JSON.parse(javaCode);
-    compiled = json;
-  } catch (e) {
-    stderr(e);
-    return Promise.resolve({ status: 'error' });
-  }
+  if (isUsingCse) return await runJavaCseMachine(javaCode, targetStep, context);
 
   // load cached classfiles from IndexedDB
   return loadCachedFiles(() =>
@@ -119,12 +132,20 @@ export async function javaRun(javaCode: string, context: Context) {
             readFileSync: readClassFiles,
             readFile: loadNatives,
             stdout,
-            stderr,
+            stderr: (msg: string) => stderr('Runtime', msg),
             onFinish: () => {
               resolve(
                 context.errors.length
                   ? { status: 'error' }
-                  : { status: 'finished', context, value: '' }
+                  : {
+                      status: 'finished',
+                      context,
+                      value: new (class {
+                        toString() {
+                          return ' ';
+                        }
+                      })()
+                    }
               );
             }
           },
@@ -136,3 +157,44 @@ export async function javaRun(javaCode: string, context: Context) {
       return { status: 'error' };
     });
 }
+
+export function visualizeJavaCseMachine({ context }: { context: ECE.Context }) {
+  try {
+    CseMachine.drawCse(context);
+  } catch (err) {
+    throw new Error('Java CSE machine is not enabled');
+  }
+}
+
+export async function runJavaCseMachine(code: string, targetStep: number, context: Context) {
+  const convertJavaErrorToJsError = (e: ECE.SourceError): SourceError => ({
+    type: ErrorType.RUNTIME,
+    severity: ErrorSeverity.ERROR,
+    // TODO update err source node location once location info is avail
+    location: {
+      start: {
+        line: 0,
+        column: 0
+      },
+      end: {
+        line: 0,
+        column: 0
+      }
+    },
+    explain: () => e.explain(),
+    elaborate: () => e.explain()
+  });
+  context.executionMethod = 'cse-machine';
+  return ECE.runECEvaluator(code, targetStep)
+    .then(result => {
+      context.runtime.envStepsTotal = result.context.totalSteps;
+      if (result.status === 'error') {
+        context.errors = result.context.errors.map(e => convertJavaErrorToJsError(e));
+      }
+      return result;
+    })
+    .catch(e => {
+      console.error(e);
+      return { status: 'error' } as Result;
+    });
+}
diff --git a/src/commons/utils/JsSlangHelper.ts b/src/commons/utils/JsSlangHelper.ts
index 5591d62240..ab88e89db8 100644
--- a/src/commons/utils/JsSlangHelper.ts
+++ b/src/commons/utils/JsSlangHelper.ts
@@ -94,6 +94,7 @@ export function visualizeCseMachine({ context }: { context: Context }) {
   try {
     CseMachine.drawCse(context);
   } catch (err) {
+    console.error(err);
     throw new Error('CSE machine is not enabled');
   }
 }
@@ -179,7 +180,7 @@ export function makeElevatedContext(context: Context) {
       if (prop === 'head') {
         return fakeFrame;
       }
-      return target[prop];
+      return target[prop as keyof typeof target];
     }
   });
 
@@ -188,7 +189,7 @@ export function makeElevatedContext(context: Context) {
       if (prop === '0') {
         return proxyGlobalEnv;
       }
-      return target[prop];
+      return target[prop as keyof typeof target];
     }
   });
 
@@ -197,7 +198,7 @@ export function makeElevatedContext(context: Context) {
       if (prop === 'environments') {
         return proxyEnvs;
       }
-      return target[prop];
+      return target[prop as keyof typeof target];
     }
   });
 
@@ -209,7 +210,7 @@ export function makeElevatedContext(context: Context) {
         case 'runtime':
           return proxyRuntime;
         default:
-          return target[prop];
+          return target[prop as keyof typeof target];
       }
     }
   });
diff --git a/src/commons/utils/TypeHelper.ts b/src/commons/utils/TypeHelper.ts
index 23e8e312ac..e93d425ab8 100644
--- a/src/commons/utils/TypeHelper.ts
+++ b/src/commons/utils/TypeHelper.ts
@@ -10,11 +10,53 @@ export type KeysOfType<O, T> = {
   [K in keyof O]: O[K] extends T ? K : never;
 }[keyof O];
 
+/**
+ * Does union(keyof <member>) for each member of T. This is unlike
+ * `keyof T` which would give keyof(union(<member>)).
+ * @param T - The union type to extract keys from
+ */
+export type DistributedKeyOf<T extends Record<any, any>> = T extends any ? keyof T : never;
+
+/**
+ * Generates a "set difference" of two types, keeping the properties of T that are not
+ * present in S.
+ * @param T - The type to extract keys from
+ * @param S - The type to compare against
+ */
+export type Diff<T extends Record<any, any>, S extends Record<any, any>> = Pick<
+  T,
+  Exclude<keyof T, keyof S>
+>;
+
+/**
+ * Merges two types together, keeping the properties of T and adding the
+ * properties of U that are not present in T.
+ * @param T - The first type
+ * @param U - The second type (also "universal" set of properties to add to T)
+ */
+export type Merge<T extends Record<any, any>, U extends Record<any, any>> = T & Diff<U, T>;
+
 // Adapted from https://github.com/piotrwitek/typesafe-actions/blob/a1fe54bb150ac1b935bb9ca78361d2d024d2efaf/src/type-helpers.ts#L117-L130
 export type ActionType<T extends Record<string, any>> = {
   [k in keyof T]: ReturnType<T[k]>;
 }[keyof T];
 
+/** Omits the index signature `[key: string]: any;` from type `T` */
+export type RemoveIndex<T> = {
+  [K in keyof T as string extends K
+    ? never
+    : number extends K
+    ? never
+    : symbol extends K
+    ? never
+    : K]: T[K];
+};
+
+/** A true intersection of the properties of types `A` and `B`, unlike the confusingly named
+ * "Intersection Types" in TypeScript which uses the `&` operator and are actually unions.
+ * This also excludes the index signature from both `A` and `B` automatically. */
+export type SharedProperties<A, B> = Pick<A, Extract<keyof RemoveIndex<A>, keyof RemoveIndex<B>>>;
+
 /* =========================================
  * Utility types for tuple type manipulation
  * ========================================= */
@@ -84,3 +126,26 @@ export const assertType =
     // Keep the original type as inferred by TS
   ): T =>
     obj;
+
+/**
+ * Type safe `Object.keys`
+ */
+export function objectKeys<T extends string | number | symbol>(obj: Record<T, any>): T[] {
+  return Object.keys(obj) as T[];
+}
+
+/**
+ * Type safe `Object.values`
+ */
+export function objectValues<T>(obj: Record<any, T>) {
+  return Object.values(obj) as T[];
+}
+
+/**
+ * Type safe `Object.entries`
+ */
+export function objectEntries<K extends string | number | symbol, V>(
+  obj: Partial<Record<K, V>>
+): [K, V][] {
+  return Object.entries(obj) as [K, V][];
+}
diff --git a/src/commons/utils/notifications/createNotification.tsx b/src/commons/utils/notifications/createNotification.tsx
index 34c0af4cf2..840d20485b 100644
--- a/src/commons/utils/notifications/createNotification.tsx
+++ b/src/commons/utils/notifications/createNotification.tsx
@@ -1,36 +1,22 @@
-import { OverlayToaster, OverlayToasterProps, Position } from '@blueprintjs/core';
+import { OverlayToaster, OverlayToasterProps, Position, Toaster } from '@blueprintjs/core';
 import { createRoot } from 'react-dom/client';
 
 /**
- * Blueprintjs v4 OverlayToaster still uses ReactDOM.render, which is deprecated in React v18.
- * They plan to migrate out of ReactDOM.render in v6. Temporary custom workaround `Toaster.create` as follows.
- *
- * https://github.com/palantir/blueprint/issues/5212
- *
- * SEPARATE NOTE: `notification` is intentionally exported from this separate file in order for us to mock it in `NotificationsHelper.tsx`
- * - `ReactDOM.render` was deprecated in react v18, which previously returned the instance of the class component `OverlayToaster` from Blueprint v4
- * - the new React `createRoot.render` returns `void`
- * - we are able to circumvent this by accessing the `OverlayToaster` instance from the `ref` prop based on the linked GitHub suggestion above
- * - HOWEVER, React Testing Library (@testing-library/react) does not support refs and accessing component instances based on their [Guiding Principles](https://testing-library.com/docs/guiding-principles) and [FAQ](https://testing-library.com/docs/dom-testing-library/faq/)
- * - thus we have to mock `notification` in our tests from this file (see `src/setupTests.ts`)
- * - this also means we can't test UI changes related to notification toasters since we are mocking the toaster (e.g. checking that the toast appears in our test UI)
+ * React Testing Library (@testing-library/react) does not support refs and accessing component
+ * instances based on their [Guiding Principles](https://testing-library.com/docs/guiding-principles)
+ * and [FAQ](https://testing-library.com/docs/dom-testing-library/faq/).
+ * - Thus we have to mock `notification` in our tests from this file (see `src/setupTests.ts`)
+ * - This also means we can't test UI changes related to notification toasters since we are mocking
+ *   the toaster (e.g. checking that the toast appears in our test UI)
  */
-export let notification: OverlayToaster;
+export let notification: Toaster;
 
-const createToaster = (props?: OverlayToasterProps, container = document.body) => {
-  const containerElement = document.createElement('div');
-  container.appendChild(containerElement);
-  const root = createRoot(containerElement);
-
-  root.render(
-    <OverlayToaster
-      {...props}
-      usePortal={false}
-      ref={instance => {
-        notification = instance!;
-      }}
-    />
-  );
+const createToaster = async (props?: OverlayToasterProps) => {
+  // Workaround no top-level await
+  notification = await OverlayToaster.createAsync(props, {
+    // See https://github.com/palantir/blueprint/issues/5212#issuecomment-1881229199
+    domRenderer: (toaster, containerElement) => createRoot(containerElement).render(toaster)
+  });
 };
 
 createToaster({
diff --git a/src/commons/workspace/Workspace.tsx b/src/commons/workspace/Workspace.tsx
index b15423a4cd..dc84c62b6d 100644
--- a/src/commons/workspace/Workspace.tsx
+++ b/src/commons/workspace/Workspace.tsx
@@ -1,7 +1,9 @@
-import { FocusStyleManager } from '@blueprintjs/core';
+import { Button, FocusStyleManager, Tooltip } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { useFullscreen } from '@mantine/hooks';
 import { Enable, NumberSize, Resizable, ResizableProps, ResizeCallback } from 're-resizable';
 import { Direction } from 're-resizable/lib/resizer';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import ControlBar, { ControlBarProps } from '../controlBar/ControlBar';
 import EditorContainer, { EditorContainerProps } from '../editor/EditorContainer';
@@ -33,15 +35,15 @@ type StateProps = {
 };
 
 const Workspace: React.FC<WorkspaceProps> = props => {
-  const sideBarResizable = React.useRef<Resizable | null>(null);
-  const contentContainerDiv = React.useRef<HTMLDivElement | null>(null);
-  const editorDividerDiv = React.useRef<HTMLDivElement | null>(null);
-  const leftParentResizable = React.useRef<Resizable | null>(null);
-  const maxDividerHeight = React.useRef<number | null>(null);
-  const sideDividerDiv = React.useRef<HTMLDivElement | null>(null);
+  const sideBarResizable = useRef<Resizable | null>(null);
+  const contentContainerDiv = useRef<HTMLDivElement>(null);
+  const editorDividerDiv = useRef<HTMLDivElement>(null);
+  const leftParentResizable = useRef<Resizable | null>(null);
+  const maxDividerHeight = useRef<number | null>(null);
+  const sideDividerDiv = useRef<HTMLDivElement>(null);
   const [contentContainerWidth] = useDimensions(contentContainerDiv);
-  const [expandedSideBarWidth, setExpandedSideBarWidth] = React.useState(200);
-  const [isSideBarExpanded, setIsSideBarExpanded] = React.useState(true);
+  const [expandedSideBarWidth, setExpandedSideBarWidth] = useState(200);
+  const [isSideBarExpanded, setIsSideBarExpanded] = useState(true);
 
   const sideBarCollapsedWidth = 40;
 
@@ -50,7 +52,7 @@ const Workspace: React.FC<WorkspaceProps> = props => {
 
   FocusStyleManager.onlyShowFocusOnTabs();
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (props.sideContentIsResizeable && maxDividerHeight.current === null) {
       maxDividerHeight.current = sideDividerDiv.current!.clientHeight;
     }
@@ -187,6 +189,21 @@ const Workspace: React.FC<WorkspaceProps> = props => {
     </Resizable>
   );
 
+  const {
+    ref: fullscreenRef,
+    toggle: toggleFullscreen,
+    fullscreen: isFullscreen
+  } = useFullscreen<HTMLDivElement>();
+
+  const fullscreenContainerRef = React.useRef<HTMLDivElement | null>(null);
+  const setFullscreenRefs = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      fullscreenContainerRef.current = node;
+      fullscreenRef(node);
+    },
+    [fullscreenRef]
+  );
+
   return (
     <div className="workspace">
       <Prompt
@@ -206,7 +223,18 @@ const Workspace: React.FC<WorkspaceProps> = props => {
         <div className="row content-parent" ref={contentContainerDiv}>
           <div className="editor-divider" ref={editorDividerDiv} />
           <Resizable {...editorResizableProps()}>{createWorkspaceInput(props)}</Resizable>
-          <div className="right-parent">
+          <div className="right-parent" ref={setFullscreenRefs}>
+            <Tooltip
+              className="fullscreen-button"
+              content={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+              portalContainer={fullscreenContainerRef.current || undefined}
+            >
+              <Button
+                minimal
+                icon={isFullscreen ? IconNames.MINIMIZE : IconNames.MAXIMIZE}
+                onClick={toggleFullscreen}
+              />
+            </Tooltip>
             {props.sideContentIsResizeable === undefined || props.sideContentIsResizeable
               ? resizableSideContent
               : sideContent}
diff --git a/src/commons/workspace/WorkspaceReducer.ts b/src/commons/workspace/WorkspaceReducer.ts
index 5283b9f2a4..c06bb2e1cf 100644
--- a/src/commons/workspace/WorkspaceReducer.ts
+++ b/src/commons/workspace/WorkspaceReducer.ts
@@ -3,11 +3,17 @@ import { stringify } from 'js-slang/dist/utils/stringify';
 import { Reducer } from 'redux';
 
 import { SourcecastReducer } from '../../features/sourceRecorder/sourcecast/SourcecastReducer';
-import { SET_IS_EDITOR_READONLY } from '../../features/sourceRecorder/sourcecast/SourcecastTypes';
 import { SourcereelReducer } from '../../features/sourceRecorder/sourcereel/SourcereelReducer';
 import { logOut } from '../application/actions/CommonsActions';
 import {
+  debuggerReset,
+  debuggerResume,
+  endDebuggerPause,
+  endInterruptExecution,
+  evalInterpreterError,
   evalInterpreterSuccess,
+  evalTestcaseFailure,
+  evalTestcaseSuccess,
   handleConsoleLog
 } from '../application/actions/InterpreterActions';
 import {
@@ -20,27 +26,16 @@ import {
   ResultOutput
 } from '../application/ApplicationTypes';
 import {
-  DEBUG_RESET,
-  DEBUG_RESUME,
-  END_DEBUG_PAUSE,
-  END_INTERRUPT_EXECUTION,
-  EVAL_INTERPRETER_ERROR,
-  EVAL_TESTCASE_FAILURE,
-  EVAL_TESTCASE_SUCCESS,
-  UPDATE_EDITOR_HIGHLIGHTED_LINES,
-  UPDATE_EDITOR_HIGHLIGHTED_LINES_CONTROL
-} from '../application/types/InterpreterTypes';
-import { Testcase } from '../assessment/AssessmentTypes';
-import {
-  SET_EDITOR_SESSION_ID,
-  SET_SESSION_DETAILS,
-  SET_SHAREDB_CONNECTED
-} from '../collabEditing/CollabEditingTypes';
+  setEditorSessionId,
+  setSessionDetails,
+  setSharedbConnected
+} from '../collabEditing/CollabEditingActions';
 import { NOTIFY_PROGRAM_EVALUATED } from '../sideContent/SideContentTypes';
 import { SourceActionType } from '../utils/ActionsHelper';
 import Constants from '../utils/Constants';
 import { createContext } from '../utils/JsSlangHelper';
 import {
+  addEditorTab,
   browseReplHistoryDown,
   browseReplHistoryUp,
   changeExecTime,
@@ -54,43 +49,45 @@ import {
   endClearContext,
   evalEditor,
   evalRepl,
+  moveCursor,
+  removeEditorTab,
+  removeEditorTabForFile,
+  removeEditorTabsForDirectory,
+  renameEditorTabForFile,
+  renameEditorTabsForDirectory,
+  resetTestcase,
+  resetWorkspace,
   sendReplInputToOutput,
-  setTokenCount
+  setEditorBreakpoint,
+  setEditorHighlightedLines,
+  setEditorHighlightedLinesControl,
+  setFolderMode,
+  setIsEditorReadonly,
+  setTokenCount,
+  shiftEditorTab,
+  toggleEditorAutorun,
+  toggleUpdateCse,
+  toggleUsingCse,
+  toggleUsingSubst,
+  updateActiveEditorTab,
+  updateActiveEditorTabIndex,
+  updateBreakpointSteps,
+  updateCurrentAssessmentId,
+  updateCurrentStep,
+  updateCurrentSubmissionId,
+  updateEditorValue,
+  updateHasUnsavedChanges,
+  updateReplValue,
+  updateStepsTotal,
+  updateSublanguage,
+  updateSubmissionsTableFilters,
+  updateWorkspace
 } from './WorkspaceActions';
 import {
-  ADD_EDITOR_TAB,
   EditorTabState,
-  MOVE_CURSOR,
-  REMOVE_EDITOR_TAB,
-  REMOVE_EDITOR_TAB_FOR_FILE,
-  REMOVE_EDITOR_TABS_FOR_DIRECTORY,
-  RENAME_EDITOR_TAB_FOR_FILE,
-  RENAME_EDITOR_TABS_FOR_DIRECTORY,
-  RESET_TESTCASE,
-  RESET_WORKSPACE,
-  SET_FOLDER_MODE,
-  SHIFT_EDITOR_TAB,
-  TOGGLE_EDITOR_AUTORUN,
-  TOGGLE_UPDATE_CSE,
-  TOGGLE_USING_CSE,
-  TOGGLE_USING_SUBST,
-  UPDATE_ACTIVE_EDITOR_TAB,
-  UPDATE_ACTIVE_EDITOR_TAB_INDEX,
-  UPDATE_BREAKPOINTSTEPS,
   UPDATE_CHANGEPOINTSTEPS,
-  UPDATE_CURRENT_ASSESSMENT_ID,
-  UPDATE_CURRENT_SUBMISSION_ID,
-  UPDATE_CURRENTSTEP,
-  UPDATE_EDITOR_BREAKPOINTS,
-  UPDATE_EDITOR_VALUE,
-  UPDATE_HAS_UNSAVED_CHANGES,
   UPDATE_LAST_DEBUGGER_RESULT,
   UPDATE_LAST_NON_DET_RESULT,
-  UPDATE_REPL_VALUE,
-  UPDATE_STEPSTOTAL,
-  UPDATE_SUBLANGUAGE,
-  UPDATE_SUBMISSIONS_TABLE_FILTERS,
-  UPDATE_WORKSPACE,
   WorkspaceLocation,
   WorkspaceManagerState
 } from './WorkspaceTypes';
@@ -366,60 +363,26 @@ const newWorkspaceReducer = createReducer(defaultWorkspaceManager, builder => {
 
       state[workspaceLocation].output = newOutput;
       state[workspaceLocation].isRunning = false;
-    });
-});
+    })
+    .addCase(evalTestcaseSuccess, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
+      const testcase = state[workspaceLocation].editorTestcases[action.payload.index];
+      testcase.result = action.payload.value;
+      testcase.errors = undefined;
+      state[workspaceLocation].isRunning = false;
+    })
+    .addCase(evalTestcaseFailure, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
+      const testcase = state[workspaceLocation].editorTestcases[action.payload.index];
+      testcase.result = undefined;
+      testcase.errors = action.payload.value;
+    })
+    .addCase(evalInterpreterError, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
 
-const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
-  state = defaultWorkspaceManager,
-  action
-) => {
-  const workspaceLocation = getWorkspaceLocation(action);
-  let newOutput: InterpreterOutput[];
-  let lastOutput: InterpreterOutput;
+      const lastOutput: InterpreterOutput = state[workspaceLocation].output.slice(-1)[0];
+      let newOutput: InterpreterOutput[];
 
-  switch (action.type) {
-    case EVAL_TESTCASE_SUCCESS:
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          editorTestcases: state[workspaceLocation].editorTestcases.map(
-            (testcase: Testcase, i: any) => {
-              if (i === action.payload.index) {
-                return {
-                  ...testcase,
-                  result: action.payload.value,
-                  errors: undefined
-                };
-              } else {
-                return testcase;
-              }
-            }
-          ),
-          isRunning: false
-        }
-      };
-    case EVAL_TESTCASE_FAILURE:
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          editorTestcases: state[workspaceLocation].editorTestcases.map(
-            (testcase: Testcase, i: number) => {
-              if (i === action.payload.index) {
-                return {
-                  ...testcase,
-                  result: undefined,
-                  errors: action.payload.value
-                };
-              }
-              return testcase;
-            }
-          )
-        }
-      };
-    case EVAL_INTERPRETER_ERROR:
-      lastOutput = state[workspaceLocation].output.slice(-1)[0];
       if (lastOutput !== undefined && lastOutput.type === 'running') {
         newOutput = state[workspaceLocation].output.slice(0, -1).concat({
           type: action.payload.type,
@@ -433,21 +396,18 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
           consoleLogs: []
         } as ErrorOutput);
       }
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          output: newOutput,
-          isRunning: false,
-          isDebugging: false
-        }
-      };
+
+      state[workspaceLocation].output = newOutput;
+      state[workspaceLocation].isRunning = false;
+      state[workspaceLocation].isDebugging = false;
+    })
     /**
      * Called to signal the end of an interruption,
      * i.e called after the interpreter is told to stop interruption,
      * to cause UI changes.
      */
-    case END_INTERRUPT_EXECUTION:
+    .addCase(endInterruptExecution, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
       /**
        * Set the isRunning property of the
        * context to false, to ensure a re-render.
@@ -455,68 +415,39 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
        * function does not finish interrupting before
        * this action is called.
        */
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          isRunning: false,
-          isDebugging: false
-        }
-      };
-    case END_DEBUG_PAUSE:
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          isRunning: false,
-          isDebugging: true
-        }
-      };
-    case DEBUG_RESUME:
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          isRunning: true,
-          isDebugging: false
-        }
-      };
-    case DEBUG_RESET:
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          isRunning: false,
-          isDebugging: false
-        }
-      };
-    case RESET_TESTCASE:
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          editorTestcases: state[workspaceLocation].editorTestcases.map(
-            (testcase: Testcase, i: any) => {
-              if (i === action.payload.index) {
-                return {
-                  ...testcase,
-                  result: undefined,
-                  errors: undefined
-                };
-              } else {
-                return testcase;
-              }
-            }
-          )
-        }
-      };
-
+      state[workspaceLocation].isRunning = false;
+      state[workspaceLocation].isDebugging = false;
+    })
+    .addCase(endDebuggerPause, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
+      state[workspaceLocation].isRunning = false;
+      state[workspaceLocation].isDebugging = true;
+    })
+    .addCase(debuggerResume, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
+      state[workspaceLocation].isRunning = true;
+      state[workspaceLocation].isDebugging = false;
+    })
+    .addCase(debuggerReset, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
+      state[workspaceLocation].isRunning = false;
+      state[workspaceLocation].isDebugging = false;
+    })
+    .addCase(resetTestcase, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
+      const testcase = state[workspaceLocation].editorTestcases[action.payload.index];
+      testcase.result = undefined;
+      testcase.errors = undefined;
+    })
     /**
      * Resets the workspace to default settings,
      * including the js-slang Context. Apply
      * any specified settings (workspaceOptions)
      */
-    case RESET_WORKSPACE:
+    .addCase(resetWorkspace, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
+      // For some reason mutating the state directly results in type
+      // errors, so we have to do it the old-fashioned way
       return {
         ...state,
         [workspaceLocation]: {
@@ -525,11 +456,15 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
           ...action.payload.workspaceOptions
         }
       };
+    })
     /**
      * Updates workspace without changing anything
      * which has not been specified
      */
-    case UPDATE_WORKSPACE:
+    .addCase(updateWorkspace, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
+      // For some reason mutating the state directly results in type
+      // errors, so we have to do it the old-fashioned way
       return {
         ...state,
         [workspaceLocation]: {
@@ -537,123 +472,62 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
           ...action.payload.workspaceOptions
         }
       };
-    case SET_EDITOR_SESSION_ID:
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          editorSessionId: action.payload.editorSessionId
-        }
-      };
-    case SET_SESSION_DETAILS:
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          sessionDetails: action.payload.sessionDetails
-        }
-      };
-    case SET_IS_EDITOR_READONLY:
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          isEditorReadonly: action.payload.isEditorReadonly
-        }
-      };
-    case SET_SHAREDB_CONNECTED:
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          sharedbConnected: action.payload.connected
-        }
-      };
-    case TOGGLE_EDITOR_AUTORUN:
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          isEditorAutorun: !state[workspaceLocation].isEditorAutorun
-        }
-      };
-    case TOGGLE_USING_SUBST: {
+    })
+    .addCase(setEditorSessionId, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
+      state[workspaceLocation].editorSessionId = action.payload.editorSessionId;
+    })
+    .addCase(setSessionDetails, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
+      state[workspaceLocation].sessionDetails = action.payload.sessionDetails;
+    })
+    .addCase(setIsEditorReadonly, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
+      state[workspaceLocation].isEditorReadonly = action.payload.isEditorReadonly;
+    })
+    .addCase(setSharedbConnected, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
+      state[workspaceLocation].sharedbConnected = action.payload.connected;
+    })
+    .addCase(toggleEditorAutorun, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
+      state[workspaceLocation].isEditorAutorun = !state[workspaceLocation].isEditorAutorun;
+    })
+    .addCase(toggleUsingSubst, (state, action) => {
       const { workspaceLocation } = action.payload;
       if (workspaceLocation === 'playground' || workspaceLocation === 'sicp') {
-        return {
-          ...state,
-          [workspaceLocation]: {
-            ...state[workspaceLocation],
-            usingSubst: action.payload.usingSubst
-          }
-        };
-      } else {
-        return state;
+        state[workspaceLocation].usingSubst = action.payload.usingSubst;
       }
-    }
-    case TOGGLE_USING_CSE: {
+    })
+    .addCase(toggleUsingCse, (state, action) => {
       const { workspaceLocation } = action.payload;
       if (workspaceLocation === 'playground' || workspaceLocation === 'sicp') {
-        return {
-          ...state,
-          [workspaceLocation]: {
-            ...state[workspaceLocation],
-            usingCse: action.payload.usingCse
-          }
-        };
-      } else {
-        return state;
+        state[workspaceLocation].usingCse = action.payload.usingCse;
       }
-    }
-    case TOGGLE_UPDATE_CSE: {
+    })
+    .addCase(toggleUpdateCse, (state, action) => {
       const { workspaceLocation } = action.payload;
       if (workspaceLocation === 'playground' || workspaceLocation === 'sicp') {
-        return {
-          ...state,
-          [workspaceLocation]: {
-            ...state[workspaceLocation],
-            updateCse: action.payload.updateCse
-          }
-        };
-      } else {
-        return state;
+        state[workspaceLocation].updateCse = action.payload.updateCse;
       }
-    }
-    case UPDATE_SUBMISSIONS_TABLE_FILTERS:
-      return {
-        ...state,
-        grading: {
-          ...state.grading,
-          submissionsTableFilters: action.payload.filters
-        }
-      };
-    case UPDATE_CURRENT_ASSESSMENT_ID:
-      return {
-        ...state,
-        assessment: {
-          ...state.assessment,
-          currentAssessment: action.payload.assessmentId,
-          currentQuestion: action.payload.questionId
-        }
-      };
-    case UPDATE_CURRENT_SUBMISSION_ID:
-      return {
-        ...state,
-        grading: {
-          ...state.grading,
-          currentSubmission: action.payload.submissionId,
-          currentQuestion: action.payload.questionId
-        }
-      };
-    case SET_FOLDER_MODE:
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          isFolderModeEnabled: action.payload.isFolderModeEnabled
-        }
-      };
-    case UPDATE_ACTIVE_EDITOR_TAB_INDEX: {
+    })
+    .addCase(updateSubmissionsTableFilters, (state, action) => {
+      state.grading.submissionsTableFilters = action.payload.filters;
+    })
+    .addCase(updateCurrentAssessmentId, (state, action) => {
+      state.assessment.currentAssessment = action.payload.assessmentId;
+      state.assessment.currentQuestion = action.payload.questionId;
+    })
+    .addCase(updateCurrentSubmissionId, (state, action) => {
+      state.grading.currentSubmission = action.payload.submissionId;
+      state.grading.currentQuestion = action.payload.questionId;
+    })
+    .addCase(setFolderMode, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
+      state[workspaceLocation].isFolderModeEnabled = action.payload.isFolderModeEnabled;
+    })
+    .addCase(updateActiveEditorTabIndex, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
       const activeEditorTabIndex = action.payload.activeEditorTabIndex;
       if (activeEditorTabIndex !== null) {
         if (activeEditorTabIndex < 0) {
@@ -664,20 +538,15 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
         }
       }
 
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          activeEditorTabIndex: activeEditorTabIndex
-        }
-      };
-    }
-    case UPDATE_ACTIVE_EDITOR_TAB: {
+      state[workspaceLocation].activeEditorTabIndex = activeEditorTabIndex;
+    })
+    .addCase(updateActiveEditorTab, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
       const { activeEditorTabOptions } = action.payload;
       const activeEditorTabIndex = state[workspaceLocation].activeEditorTabIndex;
       // Do not modify the workspace state if there is no active editor tab.
       if (activeEditorTabIndex === null) {
-        return state;
+        return;
       }
 
       const updatedEditorTabs = [...state[workspaceLocation].editorTabs];
@@ -686,15 +555,10 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
         ...activeEditorTabOptions
       };
 
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          editorTabs: updatedEditorTabs
-        }
-      };
-    }
-    case UPDATE_EDITOR_VALUE: {
+      state[workspaceLocation].editorTabs = updatedEditorTabs;
+    })
+    .addCase(updateEditorValue, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
       const { editorTabIndex, newEditorValue } = action.payload;
       if (editorTabIndex < 0) {
         throw new Error('Editor tab index must be non-negative!');
@@ -703,21 +567,10 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
         throw new Error('Editor tab index must have a corresponding editor tab!');
       }
 
-      const newEditorTabs = [...state[workspaceLocation].editorTabs];
-      newEditorTabs[editorTabIndex] = {
-        ...newEditorTabs[editorTabIndex],
-        value: newEditorValue
-      };
-
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          editorTabs: newEditorTabs
-        }
-      };
-    }
-    case UPDATE_EDITOR_BREAKPOINTS: {
+      state[workspaceLocation].editorTabs[editorTabIndex].value = newEditorValue;
+    })
+    .addCase(setEditorBreakpoint, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
       const { editorTabIndex, newBreakpoints } = action.payload;
       if (editorTabIndex < 0) {
         throw new Error('Editor tab index must be non-negative!');
@@ -726,21 +579,11 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
         throw new Error('Editor tab index must have a corresponding editor tab!');
       }
 
-      const newEditorTabs = [...state[workspaceLocation].editorTabs];
-      newEditorTabs[editorTabIndex] = {
-        ...newEditorTabs[editorTabIndex],
-        breakpoints: newBreakpoints
-      };
-
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          editorTabs: newEditorTabs
-        }
-      };
-    }
-    case UPDATE_EDITOR_HIGHLIGHTED_LINES: {
+      state[workspaceLocation].editorTabs[editorTabIndex].breakpoints = newBreakpoints;
+    })
+    .addCase(setEditorHighlightedLines, (state, action) => {
+      // TODO: This and the subsequent reducer achieves the same thing?
+      const workspaceLocation = getWorkspaceLocation(action);
       const { editorTabIndex, newHighlightedLines } = action.payload;
       if (editorTabIndex < 0) {
         throw new Error('Editor tab index must be non-negative!');
@@ -749,21 +592,10 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
         throw new Error('Editor tab index must have a corresponding editor tab!');
       }
 
-      const newEditorTabs = [...state[workspaceLocation].editorTabs];
-      newEditorTabs[editorTabIndex] = {
-        ...newEditorTabs[editorTabIndex],
-        highlightedLines: newHighlightedLines
-      };
-
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          editorTabs: newEditorTabs
-        }
-      };
-    }
-    case UPDATE_EDITOR_HIGHLIGHTED_LINES_CONTROL: {
+      state[workspaceLocation].editorTabs[editorTabIndex].highlightedLines = newHighlightedLines;
+    })
+    .addCase(setEditorHighlightedLinesControl, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
       const { editorTabIndex, newHighlightedLines } = action.payload;
 
       if (editorTabIndex < 0) {
@@ -773,21 +605,10 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
         throw new Error('Editor tab index must have a corresponding editor tab!');
       }
 
-      const newEditorTabs = [...state[workspaceLocation].editorTabs];
-      newEditorTabs[editorTabIndex] = {
-        ...newEditorTabs[editorTabIndex],
-        highlightedLines: newHighlightedLines
-      };
-
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          editorTabs: newEditorTabs
-        }
-      };
-    }
-    case MOVE_CURSOR: {
+      state[workspaceLocation].editorTabs[editorTabIndex].highlightedLines = newHighlightedLines;
+    })
+    .addCase(moveCursor, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
       const { editorTabIndex, newCursorPosition } = action.payload;
       if (editorTabIndex < 0) {
         throw new Error('Editor tab index must be non-negative!');
@@ -796,21 +617,10 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
         throw new Error('Editor tab index must have a corresponding editor tab!');
       }
 
-      const newEditorTabs = [...state[workspaceLocation].editorTabs];
-      newEditorTabs[editorTabIndex] = {
-        ...newEditorTabs[editorTabIndex],
-        newCursorPosition
-      };
-
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          editorTabs: newEditorTabs
-        }
-      };
-    }
-    case ADD_EDITOR_TAB: {
+      state[workspaceLocation].editorTabs[editorTabIndex].newCursorPosition = newCursorPosition;
+    })
+    .addCase(addEditorTab, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
       const { filePath, editorValue } = action.payload;
 
       const editorTabs = state[workspaceLocation].editorTabs;
@@ -819,13 +629,8 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
       );
       const fileIsAlreadyOpen = openedEditorTabIndex !== -1;
       if (fileIsAlreadyOpen) {
-        return {
-          ...state,
-          [workspaceLocation]: {
-            ...state[workspaceLocation],
-            activeEditorTabIndex: openedEditorTabIndex
-          }
-        };
+        state[workspaceLocation].activeEditorTabIndex = openedEditorTabIndex;
+        return;
       }
 
       const newEditorTab: EditorTabState = {
@@ -834,23 +639,13 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
         highlightedLines: [],
         breakpoints: []
       };
-      const newEditorTabs: EditorTabState[] = [
-        ...state[workspaceLocation].editorTabs,
-        newEditorTab
-      ];
+      editorTabs.push(newEditorTab);
       // Set the newly added editor tab as the active tab.
-      const newActiveEditorTabIndex = newEditorTabs.length - 1;
-
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          activeEditorTabIndex: newActiveEditorTabIndex,
-          editorTabs: newEditorTabs
-        }
-      };
-    }
-    case SHIFT_EDITOR_TAB: {
+      const newActiveEditorTabIndex = editorTabs.length - 1;
+      state[workspaceLocation].activeEditorTabIndex = newActiveEditorTabIndex;
+    })
+    .addCase(shiftEditorTab, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
       const { previousEditorTabIndex, newEditorTabIndex } = action.payload;
       if (previousEditorTabIndex < 0) {
         throw new Error('Previous editor tab index must be non-negative!');
@@ -880,16 +675,11 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
         ...filteredEditorTabs.slice(newEditorTabIndex)
       ];
 
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          activeEditorTabIndex: newActiveEditorTabIndex,
-          editorTabs: newEditorTabs
-        }
-      };
-    }
-    case REMOVE_EDITOR_TAB: {
+      state[workspaceLocation].activeEditorTabIndex = newActiveEditorTabIndex;
+      state[workspaceLocation].editorTabs = newEditorTabs;
+    })
+    .addCase(removeEditorTab, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
       const editorTabIndex = action.payload.editorTabIndex;
       if (editorTabIndex < 0) {
         throw new Error('Editor tab index must be non-negative!');
@@ -908,16 +698,11 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
         newEditorTabs.length
       );
 
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          activeEditorTabIndex: newActiveEditorTabIndex,
-          editorTabs: newEditorTabs
-        }
-      };
-    }
-    case REMOVE_EDITOR_TAB_FOR_FILE: {
+      state[workspaceLocation].activeEditorTabIndex = newActiveEditorTabIndex;
+      state[workspaceLocation].editorTabs = newEditorTabs;
+    })
+    .addCase(removeEditorTabForFile, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
       const removedFilePath = action.payload.removedFilePath;
 
       const editorTabs = state[workspaceLocation].editorTabs;
@@ -925,7 +710,7 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
         (editorTab: EditorTabState) => editorTab.filePath === removedFilePath
       );
       if (editorTabIndexToRemove === -1) {
-        return state;
+        return;
       }
       const newEditorTabs = editorTabs.filter(
         (editorTab: EditorTabState, index: number) => index !== editorTabIndexToRemove
@@ -938,16 +723,11 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
         newEditorTabs.length
       );
 
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          activeEditorTabIndex: newActiveEditorTabIndex,
-          editorTabs: newEditorTabs
-        }
-      };
-    }
-    case REMOVE_EDITOR_TABS_FOR_DIRECTORY: {
+      state[workspaceLocation].activeEditorTabIndex = newActiveEditorTabIndex;
+      state[workspaceLocation].editorTabs = newEditorTabs;
+    })
+    .addCase(removeEditorTabsForDirectory, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
       const removedDirectoryPath = action.payload.removedDirectoryPath;
 
       const editorTabs = state[workspaceLocation].editorTabs;
@@ -960,7 +740,7 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
         })
         .filter((index: number | null): index is number => index !== null);
       if (editorTabIndicesToRemove.length === 0) {
-        return state;
+        return;
       }
 
       let newActiveEditorTabIndex = state[workspaceLocation].activeEditorTabIndex;
@@ -975,37 +755,21 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
         );
       }
 
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          activeEditorTabIndex: newActiveEditorTabIndex,
-          editorTabs: newEditorTabs
-        }
-      };
-    }
-    case RENAME_EDITOR_TAB_FOR_FILE: {
+      state[workspaceLocation].activeEditorTabIndex = newActiveEditorTabIndex;
+      state[workspaceLocation].editorTabs = newEditorTabs;
+    })
+    .addCase(renameEditorTabForFile, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
       const { oldFilePath, newFilePath } = action.payload;
 
       const editorTabs = state[workspaceLocation].editorTabs;
-      const newEditorTabs = editorTabs.map((editorTab: EditorTabState) =>
-        editorTab.filePath === oldFilePath
-          ? {
-              ...editorTab,
-              filePath: newFilePath
-            }
-          : editorTab
-      );
-
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          editorTabs: newEditorTabs
-        }
-      };
-    }
-    case RENAME_EDITOR_TABS_FOR_DIRECTORY: {
+      const tabToEdit = editorTabs.find(({ filePath }) => filePath === oldFilePath);
+      if (tabToEdit) {
+        tabToEdit.filePath = newFilePath;
+      }
+    })
+    .addCase(renameEditorTabsForDirectory, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
       const { oldDirectoryPath, newDirectoryPath } = action.payload;
 
       const editorTabs = state[workspaceLocation].editorTabs;
@@ -1018,23 +782,16 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
           : editorTab
       );
 
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          editorTabs: newEditorTabs
-        }
-      };
-    }
-    case UPDATE_REPL_VALUE:
-      return {
-        ...state,
-        [workspaceLocation]: {
-          ...state[workspaceLocation],
-          replValue: action.payload.newReplValue
-        }
-      };
-    case UPDATE_HAS_UNSAVED_CHANGES:
+      state[workspaceLocation].editorTabs = newEditorTabs;
+    })
+    .addCase(updateReplValue, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
+      state[workspaceLocation].replValue = action.payload.newReplValue;
+    })
+    .addCase(updateHasUnsavedChanges, (state, action) => {
+      // For some reason mutating the state directly results in type
+      // errors, so we have to do it the old-fashioned way
+      const workspaceLocation = getWorkspaceLocation(action);
       return {
         ...state,
         [workspaceLocation]: {
@@ -1042,19 +799,17 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
           hasUnsavedChanges: action.payload.hasUnsavedChanges
         }
       };
-    case UPDATE_SUBLANGUAGE:
-      return {
-        ...state,
-        playground: {
-          ...state.playground,
-          context: {
-            ...state.playground.context,
-            chapter: action.payload.sublang.chapter,
-            variant: action.payload.sublang.variant
-          }
-        }
-      };
-    case UPDATE_CURRENTSTEP:
+    })
+    .addCase(updateSublanguage, (state, action) => {
+      // TODO: Mark for removal
+      const { chapter, variant } = action.payload.sublang;
+      state.playground.context.chapter = chapter;
+      state.playground.context.variant = variant;
+    })
+    .addCase(updateCurrentStep, (state, action) => {
+      // For some reason mutating the state directly results in type
+      // errors, so we have to do it the old-fashioned way
+      const workspaceLocation = getWorkspaceLocation(action);
       return {
         ...state,
         [workspaceLocation]: {
@@ -1062,7 +817,11 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
           currentStep: action.payload.steps
         }
       };
-    case UPDATE_STEPSTOTAL:
+    })
+    .addCase(updateStepsTotal, (state, action) => {
+      // For some reason mutating the state directly results in type
+      // errors, so we have to do it the old-fashioned way
+      const workspaceLocation = getWorkspaceLocation(action);
       return {
         ...state,
         [workspaceLocation]: {
@@ -1070,7 +829,11 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
           stepsTotal: action.payload.steps
         }
       };
-    case UPDATE_BREAKPOINTSTEPS:
+    })
+    .addCase(updateBreakpointSteps, (state, action) => {
+      // For some reason mutating the state directly results in type
+      // errors, so we have to do it the old-fashioned way
+      const workspaceLocation = getWorkspaceLocation(action);
       return {
         ...state,
         [workspaceLocation]: {
@@ -1078,6 +841,27 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
           breakpointSteps: action.payload.breakpointSteps
         }
       };
+    });
+  // .addCase(notifyProgramEvaluated, (state, action) => {
+  //   const workspaceLocation = getWorkspaceLocation(action);
+
+  //   const debuggerContext = state[workspaceLocation].debuggerContext;
+  //   debuggerContext.result = action.payload.result;
+  //   debuggerContext.lastDebuggerResult = action.payload.lastDebuggerResult;
+  //   debuggerContext.code = action.payload.code;
+  //   debuggerContext.context = action.payload.context;
+  //   debuggerContext.workspaceLocation = action.payload.workspaceLocation;
+  // });
+});
+
+/** Temporarily kept to prevent conflicts */
+const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
+  state = defaultWorkspaceManager,
+  action
+) => {
+  const workspaceLocation = getWorkspaceLocation(action);
+
+  switch (action.type) {
     case UPDATE_CHANGEPOINTSTEPS:
       return {
         ...state,
diff --git a/src/commons/workspace/__tests__/WorkspaceReducer.ts b/src/commons/workspace/__tests__/WorkspaceReducer.ts
index 080f4c56f6..1ad5546ecc 100644
--- a/src/commons/workspace/__tests__/WorkspaceReducer.ts
+++ b/src/commons/workspace/__tests__/WorkspaceReducer.ts
@@ -136,7 +136,7 @@ describe('BROWSE_REPL_HISTORY_DOWN', () => {
 
     actions.forEach(action => {
       let result = WorkspaceReducer(replDownDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...replDownDefaultState,
         [location]: {
@@ -203,7 +203,7 @@ describe('BROWSE_REPL_HISTORY_UP', () => {
 
     actions.forEach(action => {
       let result = WorkspaceReducer(replUpDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...replUpDefaultState,
         [location]: {
@@ -280,7 +280,7 @@ describe('CLEAR_REPL_INPUT', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(clearReplDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...clearReplDefaultState,
         [location]: {
@@ -300,7 +300,7 @@ describe('CLEAR_REPL_OUTPUT', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(clearReplDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...clearReplDefaultState,
         [location]: {
@@ -331,7 +331,7 @@ describe('CLEAR_REPL_OUTPUT_LAST', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(clearReplLastPriorState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...clearReplLastPriorState,
         [location]: {
@@ -355,7 +355,7 @@ describe('DEBUG_RESET', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(debugResetDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...debugResetDefaultState,
         [location]: {
@@ -378,7 +378,7 @@ describe('DEBUG_RESUME', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(debugResumeDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...debugResumeDefaultState,
         [location]: {
@@ -416,7 +416,7 @@ describe('END_CLEAR_CONTEXT', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceManager, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       const context = createContext<WorkspaceLocation>(
         library.chapter,
         library.external.symbols,
@@ -449,7 +449,7 @@ describe('END_DEBUG_PAUSE', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(debugPauseDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...debugPauseDefaultState,
         [location]: {
@@ -474,7 +474,7 @@ describe('END_INTERRUPT_EXECUTION', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(interruptExecutionDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...interruptExecutionDefaultState,
         [location]: {
@@ -497,7 +497,7 @@ describe('EVAL_EDITOR', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(evalEditorDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...evalEditorDefaultState,
         [location]: {
@@ -535,7 +535,7 @@ describe('EVAL_INTERPRETER_ERROR', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(evalEditorDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...evalEditorDefaultState,
         [location]: {
@@ -561,7 +561,7 @@ describe('EVAL_INTERPRETER_ERROR', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(evalEditorDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...evalEditorDefaultState,
         [location]: {
@@ -595,7 +595,7 @@ describe('EVAL_INTERPRETER_SUCCESS', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(evalEditorDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...evalEditorDefaultState,
         [location]: {
@@ -625,7 +625,7 @@ describe('EVAL_INTERPRETER_SUCCESS', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(evalEditorDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...evalEditorDefaultState,
         [location]: {
@@ -648,7 +648,7 @@ describe('EVAL_REPL', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceManager, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...defaultWorkspaceManager,
         [location]: {
@@ -696,7 +696,7 @@ describe('EVAL_TESTCASE_FAILURE', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(evalFailureDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...evalFailureDefaultState,
         [location]: {
@@ -725,7 +725,7 @@ describe('EVAL_TESTCASE_SUCCESS', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(testcaseSuccessDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...testcaseSuccessDefaultState,
         [location]: {
@@ -754,7 +754,7 @@ describe('EVAL_TESTCASE_SUCCESS', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(testcaseSuccessDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...testcaseSuccessDefaultState,
         [location]: {
@@ -778,7 +778,7 @@ describe('HANDLE_CONSOLE_LOG', () => {
     const actions = generateActions(HANDLE_CONSOLE_LOG, { logString: [logString] });
     actions.forEach(action => {
       const result = WorkspaceReducer(cloneDeep(consoleLogDefaultState), action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
 
       expect(result).toEqual({
         ...consoleLogDefaultState,
@@ -805,7 +805,7 @@ describe('HANDLE_CONSOLE_LOG', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(consoleLogDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...consoleLogDefaultState,
         [location]: {
@@ -827,7 +827,7 @@ describe('HANDLE_CONSOLE_LOG', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(consoleLogDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...consoleLogDefaultState,
         [location]: {
@@ -895,7 +895,7 @@ describe('RESET_TESTCASE', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(resetTestcaseDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...resetTestcaseDefaultState,
         [location]: {
@@ -928,7 +928,7 @@ describe('RESET_WORKSPACE', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(resetWorkspaceDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       const newContext = createDefaultWorkspace(location);
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
@@ -969,7 +969,7 @@ describe('SEND_REPL_INPUT_TO_OUTPUT', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(inputToOutputDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...inputToOutputDefaultState,
         [location]: {
@@ -1004,7 +1004,7 @@ describe('SEND_REPL_INPUT_TO_OUTPUT', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(inputToOutputDefaultState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...inputToOutputDefaultState,
         [location]: {
@@ -1024,7 +1024,7 @@ describe('SET_EDITOR_SESSION_ID', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceManager, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...defaultWorkspaceManager,
         [location]: {
@@ -1043,7 +1043,7 @@ describe('SET_SHAREDB_CONNECTED', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceManager, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...defaultWorkspaceManager,
         [location]: {
@@ -1061,7 +1061,7 @@ describe('TOGGLE_EDITOR_AUTORUN', () => {
 
     actions.forEach(action => {
       let result = WorkspaceReducer(defaultWorkspaceManager, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...defaultWorkspaceManager,
         [location]: {
@@ -1131,7 +1131,7 @@ describe('SET_FOLDER_MODE', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceManager, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...defaultWorkspaceManager,
         [location]: {
@@ -1183,7 +1183,7 @@ describe('UPDATE_ACTIVE_EDITOR_TAB_INDEX', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -1241,7 +1241,7 @@ describe('UPDATE_ACTIVE_EDITOR_TAB', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       const newContext = createDefaultWorkspace(location);
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
@@ -1341,7 +1341,7 @@ describe('UPDATE_EDITOR_VALUE', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...defaultWorkspaceState,
         [location]: {
@@ -1408,7 +1408,7 @@ describe('UPDATE_EDITOR_BREAKPOINTS', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...defaultWorkspaceState,
         [location]: {
@@ -1487,7 +1487,7 @@ describe('UPDATE_EDITOR_HIGHLIGHTED_LINES', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...defaultWorkspaceState,
         [location]: {
@@ -1569,7 +1569,7 @@ describe('MOVE_CURSOR', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...defaultWorkspaceState,
         [location]: {
@@ -1608,7 +1608,7 @@ describe('ADD_EDITOR_TAB', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -1640,7 +1640,7 @@ describe('ADD_EDITOR_TAB', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -1777,7 +1777,7 @@ describe('SHIFT_EDITOR_TAB', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -1807,7 +1807,7 @@ describe('SHIFT_EDITOR_TAB', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -1878,7 +1878,7 @@ describe('REMOVE_EDITOR_TAB', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -1905,7 +1905,7 @@ describe('REMOVE_EDITOR_TAB', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -1932,7 +1932,7 @@ describe('REMOVE_EDITOR_TAB', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -1959,7 +1959,7 @@ describe('REMOVE_EDITOR_TAB', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -1986,7 +1986,7 @@ describe('REMOVE_EDITOR_TAB', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -2046,7 +2046,7 @@ describe('REMOVE_EDITOR_TAB_FOR_FILE', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -2073,7 +2073,7 @@ describe('REMOVE_EDITOR_TAB_FOR_FILE', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -2100,7 +2100,7 @@ describe('REMOVE_EDITOR_TAB_FOR_FILE', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -2127,7 +2127,7 @@ describe('REMOVE_EDITOR_TAB_FOR_FILE', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -2154,7 +2154,7 @@ describe('REMOVE_EDITOR_TAB_FOR_FILE', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -2231,7 +2231,7 @@ describe('REMOVE_EDITOR_TABS_FOR_DIRECTORY', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -2258,7 +2258,7 @@ describe('REMOVE_EDITOR_TABS_FOR_DIRECTORY', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -2285,7 +2285,7 @@ describe('REMOVE_EDITOR_TABS_FOR_DIRECTORY', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -2312,7 +2312,7 @@ describe('REMOVE_EDITOR_TABS_FOR_DIRECTORY', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -2339,7 +2339,7 @@ describe('REMOVE_EDITOR_TABS_FOR_DIRECTORY', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -2400,7 +2400,7 @@ describe('RENAME_EDITOR_TAB_FOR_FILE', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -2470,7 +2470,7 @@ describe('RENAME_EDITOR_TABS_FOR_DIRECTORY', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceState, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       // Note: we stringify because context contains functions which cause
       // the two to compare unequal; stringifying strips functions
       expect(JSON.stringify(result)).toEqual(
@@ -2500,7 +2500,7 @@ describe('UPDATE_HAS_UNSAVED_CHANGES', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceManager, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...defaultWorkspaceManager,
         [location]: {
@@ -2519,7 +2519,7 @@ describe('UPDATE_REPL_VALUE', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceManager, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
       expect(result).toEqual({
         ...defaultWorkspaceManager,
         [location]: {
@@ -2538,7 +2538,7 @@ describe('TOGGLE_USING_SUBST', () => {
 
     actions.forEach(action => {
       const result = WorkspaceReducer(defaultWorkspaceManager, action);
-      const location = action.payload.workspaceLocation;
+      const location: WorkspaceLocation = action.payload.workspaceLocation;
 
       const expectedResult =
         location === playgroundWorkspace || location === sicpWorkspace
diff --git a/src/features/achievement/AchievementActions.ts b/src/features/achievement/AchievementActions.ts
index 1c6f711f9b..c62bd98a25 100644
--- a/src/features/achievement/AchievementActions.ts
+++ b/src/features/achievement/AchievementActions.ts
@@ -1,6 +1,5 @@
 import { createAction } from '@reduxjs/toolkit';
 import { AssessmentOverview } from 'src/commons/assessment/AssessmentTypes';
-import { action } from 'typesafe-actions';
 
 import {
   AchievementGoal,
@@ -37,7 +36,7 @@ export const bulkUpdateGoals = createAction(BULK_UPDATE_GOALS, (goals: GoalDefin
   payload: goals
 }));
 
-export const getAchievements = () => action(GET_ACHIEVEMENTS);
+export const getAchievements = createAction(GET_ACHIEVEMENTS, () => ({ payload: {} }));
 
 export const getGoals = createAction(GET_GOALS, (studentCourseRegId: number) => ({
   payload: studentCourseRegId
diff --git a/src/features/achievement/__tests__/AchievementActions.ts b/src/features/achievement/__tests__/AchievementActions.ts
index cd3db6dd4a..a4fcdfc379 100644
--- a/src/features/achievement/__tests__/AchievementActions.ts
+++ b/src/features/achievement/__tests__/AchievementActions.ts
@@ -15,7 +15,8 @@ test('getAchievements generates correct action object', () => {
   const action = getAchievements();
 
   expect(action).toEqual({
-    type: GET_ACHIEVEMENTS
+    type: GET_ACHIEVEMENTS,
+    payload: {}
   });
 });
 
diff --git a/src/features/cseMachine/CseMachine.tsx b/src/features/cseMachine/CseMachine.tsx
index c6550f6a36..f829344807 100644
--- a/src/features/cseMachine/CseMachine.tsx
+++ b/src/features/cseMachine/CseMachine.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import { Layout } from './CseMachineLayout';
 import { EnvTree } from './CseMachineTypes';
-import { deepCopyTree, getEnvID } from './CseMachineUtils';
+import { deepCopyTree, getEnvId } from './CseMachineUtils';
 
 type SetVis = (vis: React.ReactNode) => void;
 type SetEditorHighlightedLines = (segments: [number, number][]) => void;
@@ -75,7 +75,7 @@ export default class CseMachine {
   static drawCse(context: Context) {
     // store environmentTree at last breakpoint.
     CseMachine.environmentTree = deepCopyTree(context.runtime.environmentTree as EnvTree);
-    CseMachine.currentEnvId = getEnvID(context.runtime.environments[0]);
+    CseMachine.currentEnvId = getEnvId(context.runtime.environments[0]);
     if (!this.setVis || !context.runtime.control || !context.runtime.stash)
       throw new Error('CSE machine not initialized');
     CseMachine.control = context.runtime.control;
diff --git a/src/features/cseMachine/CseMachineAnimation.tsx b/src/features/cseMachine/CseMachineAnimation.tsx
index 3c6020e138..8c8cc70bd8 100644
--- a/src/features/cseMachine/CseMachineAnimation.tsx
+++ b/src/features/cseMachine/CseMachineAnimation.tsx
@@ -1,21 +1,44 @@
-import { InstrType } from 'js-slang/dist/cse-machine/types';
+import { AppInstr, ArrLitInstr, AssmtInstr, InstrType } from 'js-slang/dist/cse-machine/types';
+import { Node } from 'js-slang/dist/types';
+import { Layer } from 'konva/lib/Layer';
 import { Easings } from 'konva/lib/Tween';
+import React from 'react';
 
-import { Animatable } from './animationComponents/AnimationComponents';
+import { ArrayAccessAnimation } from './animationComponents/ArrayAccessAnimation';
+import { ArrayAssignmentAnimation } from './animationComponents/ArrayAssignmentAnimation';
+import { AssignmentAnimation } from './animationComponents/AssignmentAnimation';
+import { Animatable } from './animationComponents/base/Animatable';
+import { lookupBinding } from './animationComponents/base/AnimationUtils';
 import { BinaryOperationAnimation } from './animationComponents/BinaryOperationAnimation';
-import { BlockAnimation } from './animationComponents/BlockAnimation';
-import { LiteralAnimation } from './animationComponents/LiteralAnimation';
+import { BranchAnimation } from './animationComponents/BranchAnimation';
+import { ControlExpansionAnimation } from './animationComponents/ControlExpansionAnimation';
+import { ControlToStashAnimation } from './animationComponents/ControlToStashAnimation';
+import { EnvironmentAnimation } from './animationComponents/EnvironmentAnimation';
+import { FrameCreationAnimation } from './animationComponents/FrameCreationAnimation';
+import { FunctionApplicationAnimation } from './animationComponents/FunctionApplicationAnimation';
+import { InstructionApplicationAnimation } from './animationComponents/InstructionApplicationAnimation';
+import { LookupAnimation } from './animationComponents/LookupAnimation';
 import { PopAnimation } from './animationComponents/PopAnimation';
 import { UnaryOperationAnimation } from './animationComponents/UnaryOperationAnimation';
-import { isInstr } from './components/ControlStack';
+import { isNode } from './components/ControlStack';
+import { Frame } from './components/Frame';
+import { ArrayValue } from './components/values/ArrayValue';
 import CseMachine from './CseMachine';
 import { Layout } from './CseMachineLayout';
+import { isBuiltInFn, isStreamFn } from './CseMachineUtils';
 
 export class CseAnimation {
-  private static animationEnabled = false;
-  static readonly animationComponents: Animatable[] = [];
-  static readonly defaultDuration = 0.3;
+  static readonly animations: Animatable[] = [];
+  static readonly defaultDuration = 300;
   static readonly defaultEasing = Easings.StrongEaseInOut;
+  private static animationEnabled = false;
+  private static currentFrame: Frame;
+  private static previousFrame: Frame;
+
+  static layerRef = React.createRef<Layer>();
+  static getLayer(): Layer | null {
+    return this.layerRef.current;
+  }
 
   static enableAnimations(): void {
     CseAnimation.animationEnabled = true;
@@ -25,99 +48,258 @@ export class CseAnimation {
     CseAnimation.animationEnabled = false;
   }
 
+  static setCurrentFrame(frame: Frame) {
+    CseAnimation.previousFrame = CseAnimation.currentFrame;
+    CseAnimation.currentFrame = frame;
+  }
+
   private static clearAnimationComponents(): void {
-    CseAnimation.animationComponents.length = 0;
+    CseAnimation.animations.length = 0;
+  }
+
+  private static getNewControlItems() {
+    const currentControlSize = Layout.controlComponent.control.size();
+    const previousControlSize = Layout.previousControlComponent.control.size();
+    const numOfItems = currentControlSize - previousControlSize + 1;
+    if (numOfItems <= 0) return [];
+    return Layout.controlComponent.stackItemComponents.slice(-numOfItems);
+  }
+
+  private static handleNode(node: Node) {
+    const lastControlComponent = Layout.previousControlComponent.stackItemComponents.at(-1)!;
+    const currStashComponent = Layout.stashComponent.stashItemComponents.at(-1)!;
+    switch (node.type) {
+      case 'Program':
+        CseAnimation.animations.push(
+          new ControlExpansionAnimation(lastControlComponent, CseAnimation.getNewControlItems())
+        );
+        if (CseMachine.getCurrentEnvId() !== '-1') {
+          CseAnimation.animations.push(
+            new FrameCreationAnimation(lastControlComponent, CseAnimation.currentFrame)
+          );
+        }
+        break;
+      case 'BlockStatement':
+        CseAnimation.animations.push(
+          new ControlExpansionAnimation(lastControlComponent, CseAnimation.getNewControlItems()),
+          new FrameCreationAnimation(lastControlComponent, CseAnimation.currentFrame)
+        );
+        break;
+      case 'Literal':
+        CseAnimation.animations.push(
+          new ControlToStashAnimation(lastControlComponent, currStashComponent!)
+        );
+        break;
+      case 'ArrowFunctionExpression':
+        CseAnimation.animations.push(
+          new ControlToStashAnimation(lastControlComponent, currStashComponent!)
+        );
+        break;
+      case 'Identifier':
+        // Special case for 'undefined' identifier
+        if (node.name === 'undefined') {
+          CseAnimation.animations.push(
+            new ControlToStashAnimation(lastControlComponent, currStashComponent!)
+          );
+        } else {
+          CseAnimation.animations.push(
+            new LookupAnimation(
+              lastControlComponent,
+              currStashComponent!,
+              ...lookupBinding(CseAnimation.currentFrame, node.name)
+            )
+          );
+        }
+        break;
+      case 'AssignmentExpression':
+      case 'ArrayExpression':
+      case 'BinaryExpression':
+      case 'CallExpression':
+      case 'ConditionalExpression':
+      case 'ForStatement':
+      case 'IfStatement':
+      case 'MemberExpression':
+      case 'ReturnStatement':
+      case 'StatementSequence':
+      case 'UnaryExpression':
+      case 'VariableDeclaration':
+      case 'FunctionDeclaration':
+      case 'WhileStatement':
+        CseAnimation.animations.push(
+          new ControlExpansionAnimation(lastControlComponent, CseAnimation.getNewControlItems())
+        );
+        break;
+      case 'ExpressionStatement':
+        CseAnimation.handleNode(node.expression);
+        break;
+    }
   }
 
   static updateAnimation() {
-    CseAnimation.animationComponents.forEach(a => a.destroy());
+    CseAnimation.animations.forEach(a => a.destroy());
     CseAnimation.clearAnimationComponents();
 
     if (!Layout.previousControlComponent) return;
     const lastControlItem = Layout.previousControlComponent.control.peek();
     const lastControlComponent = Layout.previousControlComponent.stackItemComponents.at(-1);
+    const currStashComponent = Layout.stashComponent.stashItemComponents.at(-1);
     if (
       !CseAnimation.animationEnabled ||
       !lastControlItem ||
       !lastControlComponent ||
-      !CseMachine.getControlStash() // TODO: handle cases where there are environment animations
+      !CseMachine.getControlStash() // TODO: handle cases where there are only environment animations
     ) {
       return;
     }
-    let animation: Animatable | undefined;
-    if (!isInstr(lastControlItem)) {
-      switch (lastControlItem.type) {
-        case 'Literal':
-          animation = new LiteralAnimation(
-            lastControlComponent,
-            Layout.stashComponent.stashItemComponents.at(-1)!
+    if (isNode(lastControlItem)) {
+      CseAnimation.handleNode(lastControlItem);
+    } else {
+      switch (lastControlItem.instrType) {
+        case InstrType.APPLICATION:
+          const appInstr = lastControlItem as AppInstr;
+          const fnStashItem = Layout.previousStashComponent.stashItemComponents.at(
+            -appInstr.numOfArgs - 1
+          )!;
+          const fn = fnStashItem.value;
+          if (isBuiltInFn(fn) || isStreamFn(fn)) {
+            CseAnimation.animations.push(
+              new InstructionApplicationAnimation(
+                lastControlComponent,
+                Layout.previousStashComponent.stashItemComponents.slice(-appInstr.numOfArgs - 1),
+                currStashComponent!
+              )
+            );
+            break;
+          }
+          const frameCreated = appInstr.numOfArgs > 0;
+
+          CseAnimation.animations.push(
+            new FunctionApplicationAnimation(
+              lastControlComponent,
+              CseAnimation.getNewControlItems(),
+              fnStashItem,
+              Layout.previousStashComponent.stashItemComponents.slice(-appInstr.numOfArgs),
+              frameCreated ? CseAnimation.currentFrame : undefined
+            )
           );
           break;
-        case 'Program':
-        case 'ExpressionStatement':
-        case 'VariableDeclaration':
-          const currentControlSize = Layout.controlComponent.control.size();
-          const previousControlSize = Layout.previousControlComponent.control.size();
-          const numOfItems = currentControlSize - previousControlSize + 1;
-          if (numOfItems <= 0) break;
-          const targetItems = Array.from({ length: numOfItems }, (_, i) => {
-            return Layout.controlComponent.stackItemComponents[previousControlSize + i - 1];
-          });
-          animation = new BlockAnimation(lastControlComponent, targetItems);
+        case InstrType.ARRAY_ACCESS:
+          CseAnimation.animations.push(
+            new ArrayAccessAnimation(
+              lastControlComponent,
+              Layout.previousStashComponent.stashItemComponents.at(-2)!,
+              Layout.previousStashComponent.stashItemComponents.at(-1)!,
+              Layout.stashComponent.stashItemComponents.at(-1)!
+            )
+          );
           break;
-      }
-    } else {
-      switch (lastControlItem.instrType) {
-        case InstrType.RESET:
-        case InstrType.WHILE:
-        case InstrType.FOR:
-        case InstrType.ASSIGNMENT:
+        case InstrType.ARRAY_ASSIGNMENT:
+          const arrayItem = Layout.previousStashComponent.stashItemComponents.at(-3)!;
+          CseAnimation.animations.push(
+            new ArrayAssignmentAnimation(
+              lastControlComponent,
+              arrayItem,
+              Layout.values.get(arrayItem.value.id) as ArrayValue,
+              Layout.previousStashComponent.stashItemComponents.at(-2)!,
+              Layout.previousStashComponent.stashItemComponents.at(-1)!,
+              Layout.stashComponent.stashItemComponents.at(-1)!
+            )
+          );
           break;
-        case InstrType.UNARY_OP:
-          animation = new UnaryOperationAnimation(
-            lastControlComponent,
-            Layout.previousStashComponent.stashItemComponents.at(-1)!,
-            Layout.stashComponent.stashItemComponents.at(-1)!
+        case InstrType.ARRAY_LITERAL:
+          const arrSize = (lastControlItem as ArrLitInstr).arity;
+          CseAnimation.animations.push(
+            new InstructionApplicationAnimation(
+              lastControlComponent,
+              Layout.previousStashComponent.stashItemComponents.slice(-arrSize),
+              currStashComponent!
+            )
           );
           break;
-        case InstrType.BINARY_OP:
-          animation = new BinaryOperationAnimation(
-            lastControlComponent,
-            Layout.previousStashComponent.stashItemComponents.at(-2)!,
-            Layout.previousStashComponent.stashItemComponents.at(-1)!,
-            Layout.stashComponent.stashItemComponents.at(-1)!
+        case InstrType.ASSIGNMENT:
+          CseAnimation.animations.push(
+            new AssignmentAnimation(
+              lastControlComponent,
+              currStashComponent!,
+              ...lookupBinding(CseAnimation.currentFrame, (lastControlItem as AssmtInstr).symbol)
+            )
           );
           break;
-        case InstrType.POP:
-          animation = new PopAnimation(
-            lastControlComponent,
-            Layout.previousStashComponent.stashItemComponents.at(-1)!
+        case InstrType.BINARY_OP:
+          CseAnimation.animations.push(
+            new BinaryOperationAnimation(
+              lastControlComponent,
+              Layout.previousStashComponent.stashItemComponents.at(-2)!,
+              Layout.previousStashComponent.stashItemComponents.at(-1)!,
+              currStashComponent!
+            )
           );
           break;
-        case InstrType.APPLICATION:
         case InstrType.BRANCH:
+        case InstrType.FOR:
+        case InstrType.WHILE:
+          CseAnimation.animations.push(
+            new BranchAnimation(
+              lastControlComponent,
+              Layout.previousStashComponent.stashItemComponents.at(-1)!,
+              CseAnimation.getNewControlItems()
+            )
+          );
+          break;
         case InstrType.ENVIRONMENT:
-        case InstrType.ARRAY_LITERAL:
-        case InstrType.ARRAY_ACCESS:
-        case InstrType.ARRAY_ASSIGNMENT:
+          CseAnimation.animations.push(
+            new EnvironmentAnimation(CseAnimation.previousFrame, CseAnimation.currentFrame)
+          );
+          break;
+        case InstrType.POP:
+          const currentStashSize = Layout.stashComponent.stash.size();
+          const previousStashSize = Layout.previousStashComponent.stash.size();
+          const lastStashIsUndefined =
+            currentStashSize === 1 &&
+            currStashComponent!.text === 'undefined' &&
+            currentStashSize === previousStashSize;
+          CseAnimation.animations.push(
+            new PopAnimation(
+              lastControlComponent,
+              Layout.previousStashComponent.stashItemComponents.at(-1)!,
+              lastStashIsUndefined ? currStashComponent : undefined
+            )
+          );
+          break;
+        case InstrType.UNARY_OP:
+          CseAnimation.animations.push(
+            new UnaryOperationAnimation(
+              lastControlComponent,
+              Layout.previousStashComponent.stashItemComponents.at(-1)!,
+              currStashComponent!
+            )
+          );
+          break;
         case InstrType.ARRAY_LENGTH:
-        case InstrType.CONTINUE_MARKER:
         case InstrType.BREAK:
         case InstrType.BREAK_MARKER:
+        case InstrType.CONTINUE_MARKER:
         case InstrType.MARKER:
+        case InstrType.RESET:
+          break;
       }
     }
-    if (animation) CseAnimation.animationComponents.push(animation);
   }
 
-  static playAnimation(): void {
+  static async playAnimation() {
     if (!CseAnimation.animationEnabled) {
-      CseAnimation.disableAnimations();
+      CseAnimation.animations.forEach(a => a.destroy());
+      CseAnimation.clearAnimationComponents();
       return;
     }
     CseAnimation.disableAnimations();
-    for (const animationComponent of this.animationComponents) {
-      animationComponent.animate();
-    }
+    // Get the actual HTML <canvas> element and set the pointer events to none, to allow for
+    // mouse events to pass through the animation layer, and be handled by the actual CSE Machine.
+    // Setting the listening property to false on the Konva Layer does not seem to work, so
+    // this a workaround.
+    const canvasElement = CseAnimation.getLayer()?.getCanvas()._canvas;
+    if (canvasElement) canvasElement.style.pointerEvents = 'none';
+    // Play all the animations
+    await Promise.all(this.animations.map(a => a.animate()));
   }
 }
diff --git a/src/features/cseMachine/CseMachineConfig.ts b/src/features/cseMachine/CseMachineConfig.ts
index 27b275c1fc..bdbd1c006d 100644
--- a/src/features/cseMachine/CseMachineConfig.ts
+++ b/src/features/cseMachine/CseMachineConfig.ts
@@ -34,8 +34,6 @@ export const Config = Object.freeze({
   FontStyle: 'normal',
   FontVariant: 'normal',
 
-  HoveredColor: '#32CD32',
-
   ArrowHeadSize: 10,
   ArrowStrokeWidth: 1,
   ArrowHitStrokeWidth: 5,
@@ -45,10 +43,34 @@ export const Config = Object.freeze({
   MaxExportWidth: 20000,
   MaxExportHeight: 12000,
 
-  SA_WHITE: '#999999',
-  SA_BLUE: '#2c3e50',
-  PRINT_BACKGROUND: 'white',
-  SA_CURRENT_ITEM: '#030fff',
+  // Canvas background color
+  BgColor: '#2c3e50',
+  PrintBgColor: '#fff',
+
+  // Colors of all text
+  TextColor: '#999',
+  TextColorFaded: '#5b6773',
+  PrintTextColor: '#333',
+  PrintTextColorFaded: '#ccc',
+
+  // Colors of arrows and borders
+  StrokeColor: '#999',
+  StrokeColorFaded: '#5b6773',
+  PrintStrokeColor: '#777',
+  PrintStrokeColorFaded: '#ccc',
+
+  // Colors of different states
+  ActiveColor: '#030fff',
+  PrintActiveColor: '#3d5afe',
+  DangerColor: '#ff1744',
+  PrintDangerColor: '#f44336',
+  HoverColor: '#25c225',
+  PrintHoverColor: '#0dbf0d',
+
+  // Colors for text hover background
+  // Note that these are also applied with an opacity when drawn
+  HoverBgColor: '#000',
+  PrintHoverBgColor: '#bbb',
 
   ConstantColon: ':= ',
   VariableColon: ': ',
diff --git a/src/features/cseMachine/CseMachineControlStashConfig.ts b/src/features/cseMachine/CseMachineControlStashConfig.ts
index fd3b910c45..c87ee4a292 100644
--- a/src/features/cseMachine/CseMachineControlStashConfig.ts
+++ b/src/features/cseMachine/CseMachineControlStashConfig.ts
@@ -30,10 +30,5 @@ export const ControlStashConfig = Object.freeze({
   FontStyle: 'normal',
   FontVariant: 'normal',
   FontStyleHeader: 'bold',
-  FontSizeHeader: 18,
-
-  SA_WHITE: '#999999',
-  SA_BLUE: '#2c3e50',
-  PRINT_BACKGROUND: 'white',
-  STASH_DANGER_ITEM: '#ff0000'
+  FontSizeHeader: 18
 });
diff --git a/src/features/cseMachine/CseMachineLayout.tsx b/src/features/cseMachine/CseMachineLayout.tsx
index a286cf4594..07615cbf90 100644
--- a/src/features/cseMachine/CseMachineLayout.tsx
+++ b/src/features/cseMachine/CseMachineLayout.tsx
@@ -1,6 +1,6 @@
 import Heap from 'js-slang/dist/cse-machine/heap';
 import { Control, Stash } from 'js-slang/dist/cse-machine/interpreter';
-import { Chapter } from 'js-slang/dist/types';
+import { Chapter, Frame } from 'js-slang/dist/types';
 import { KonvaEventObject } from 'konva/lib/Node';
 import React, { RefObject } from 'react';
 import { Layer, Rect, Stage } from 'react-konva';
@@ -20,23 +20,28 @@ import CseMachine from './CseMachine';
 import { CseAnimation } from './CseMachineAnimation';
 import { Config, ShapeDefaultProps } from './CseMachineConfig';
 import {
-  Closure,
   Data,
   DataArray,
   EnvTree,
   EnvTreeNode,
   GlobalFn,
-  ReferenceType
+  NonGlobalFn,
+  ReferenceType,
+  StreamFn
 } from './CseMachineTypes';
 import {
-  convertClosureToGlobalFn,
+  assert,
   deepCopyTree,
+  defaultBackgroundColor,
   getNextChildren,
+  isBuiltInFn,
   isClosure,
   isDataArray,
-  isFunction,
+  isEnvEqual,
   isGlobalFn,
+  isNonGlobalFn,
   isPrimitiveData,
+  isStreamFn,
   isUnassigned,
   setDifference
 } from './CseMachineUtils';
@@ -64,8 +69,6 @@ export class Layout {
   /** scale factor for zooming and out of canvas */
   static scaleFactor = 1.02;
 
-  /** the environment tree */
-  static environmentTree: EnvTree;
   /** the global environment */
   static globalEnvNode: EnvTreeNode;
   /** grid of frames */
@@ -79,8 +82,12 @@ export class Layout {
   static previousControlComponent: ControlStack;
   static previousStashComponent: StashStack;
 
-  /** memoized values */
-  static values = new Map<Data, Value>();
+  /**
+   * memoized values, where keys are either ids for arrays and closures,
+   * or the function objects themselves for built-in functions and stream functions
+   */
+  static values = new Map<string | (() => any), Value>();
+
   /** memoized layout */
   static prevLayout: React.ReactNode;
   static currentDark: React.ReactNode;
@@ -90,6 +97,7 @@ export class Layout {
   static currentStackLight: React.ReactNode;
   static currentStackTruncLight: React.ReactNode;
   static stageRef: RefObject<any> = React.createRef();
+
   // buffer for faster rendering of diagram when scrolling
   static invisiblePaddingVertical: number = 300;
   static invisiblePaddingHorizontal: number = 300;
@@ -146,8 +154,7 @@ export class Layout {
     Layout.key = 0;
 
     // deep copy so we don't mutate the context
-    Layout.environmentTree = deepCopyTree(envTree);
-    Layout.globalEnvNode = Layout.environmentTree.root;
+    Layout.globalEnvNode = deepCopyTree(envTree).root;
     Layout.control = control;
     Layout.stash = stash;
 
@@ -207,42 +214,42 @@ export class Layout {
 
     const preludeEnvNode = Layout.globalEnvNode.children[0];
     const preludeEnv = preludeEnvNode.environment;
-    const globalEnvNode = Layout.globalEnvNode;
-    const globalEnv = globalEnvNode.environment;
-
-    const preludeValueKeyMap = new Map(
-      Object.entries(preludeEnv.head).map(([key, value]) => [value, key])
-    );
+    const globalEnv = Layout.globalEnvNode.environment;
+
+    // Add bindings from prelude environment head to global environment head
+    for (const [key, value] of Object.entries(preludeEnv.head)) {
+      delete preludeEnv.head[key];
+      globalEnv.head[key] = value;
+      if (isStreamFn(value) && isEnvEqual(value.environment, preludeEnv)) {
+        Object.defineProperty(value, 'environment', { value: globalEnv });
+      }
+    }
 
-    // Change environments of each array and closure in the prelude to be the global environment
+    // Move objects from prelude environment heap to global environment heap
     for (const value of preludeEnv.heap.getHeap()) {
-      Object.defineProperty(value, 'environment', { value: globalEnvNode.environment });
-      globalEnv.heap.add(value);
-      const key = preludeValueKeyMap.get(value);
-      if (key) {
-        globalEnv.head[key] = value;
+      Object.defineProperty(value, 'environment', { value: globalEnv });
+      if (isDataArray(value)) {
+        for (const item of value) {
+          if (isStreamFn(item) && isEnvEqual(item.environment, preludeEnv)) {
+            Object.defineProperty(item, 'environment', { value: globalEnv });
+          }
+        }
       }
+      preludeEnv.heap.move(value, globalEnv.heap);
     }
 
     // update globalEnvNode children
-    globalEnvNode.resetChildren(preludeEnvNode.children);
+    Layout.globalEnvNode.resetChildren(preludeEnvNode.children);
 
     // update the tail of each child's environment to point to the global environment
-    globalEnvNode.children.forEach(node => {
+    Layout.globalEnvNode.children.forEach(node => {
       node.environment.tail = globalEnv;
     });
-
-    // go through new bindings and update closures to be global functions
-    for (const value of Object.values(globalEnv.head)) {
-      if (isClosure(value)) {
-        convertClosureToGlobalFn(value);
-      }
-    }
   }
 
   /** remove any global functions not referenced elsewhere in the program */
   private static removeUnreferencedGlobalFns(): void {
-    const referencedGlobalFns = new Set<GlobalFn>();
+    const referencedFns = new Set<GlobalFn | NonGlobalFn>();
     const visitedData = new Set<DataArray>();
 
     const findGlobalFnReferences = (envNode: EnvTreeNode): void => {
@@ -250,7 +257,7 @@ export class Layout {
       const unreferenced = setDifference(envNode.environment.heap.getHeap(), new Set(headValues));
       for (const data of headValues) {
         if (isGlobalFn(data)) {
-          referencedGlobalFns.add(data);
+          referencedFns.add(data);
         } else if (isDataArray(data)) {
           findGlobalFnReferencesInData(data);
         }
@@ -269,7 +276,7 @@ export class Layout {
       visitedData.add(data);
       data.forEach(d => {
         if (isGlobalFn(d)) {
-          referencedGlobalFns.add(d);
+          referencedFns.add(d);
         } else if (isDataArray(d)) {
           findGlobalFnReferencesInData(d);
         }
@@ -279,15 +286,18 @@ export class Layout {
     // First, add any referenced global functions in the stash
     for (const item of Layout.stash.getStack()) {
       if (isGlobalFn(item)) {
-        referencedGlobalFns.add(item);
+        referencedFns.add(item);
       } else if (isDataArray(item)) {
         findGlobalFnReferencesInData(item);
       }
     }
 
-    // Then, find any references within any arrays inside the global environment heap
+    // Then, find any references within any arrays inside the global environment heap,
+    // and also add any non-global functions created in the global frame
     for (const data of Layout.globalEnvNode.environment.heap.getHeap()) {
-      if (isDataArray(data)) {
+      if (isNonGlobalFn(data)) {
+        referencedFns.add(data);
+      } else if (isDataArray(data)) {
         findGlobalFnReferencesInData(data);
       }
     }
@@ -299,13 +309,12 @@ export class Layout {
       Object.entries(Layout.globalEnvNode.environment.head).map(([key, value]) => [value, key])
     );
 
-    const newHead = {};
+    let i = 0;
+    const newHead: Frame = {};
     const newHeap = new Heap();
-    for (const fn of referencedGlobalFns) {
-      newHead[functionNames.get(fn)!] = fn;
-      if (fn.hasOwnProperty('environment')) {
-        newHeap.add(fn as Closure);
-      }
+    for (const fn of referencedFns) {
+      if (isClosure(fn)) newHeap.add(fn);
+      if (isGlobalFn(fn)) newHead[functionNames.get(fn) ?? `${i++}`] = fn;
     }
 
     // add any arrays from the original heap to the new heap
@@ -355,50 +364,41 @@ export class Layout {
     }
   }
 
-  /** memoize `Value` (used to detect circular references in non-primitive `Value`) */
-  static memoizeValue(value: Value): void {
-    Layout.values.set(value.data, value);
-  }
-
-  /** create an instance of the corresponding `Value` if it doesn't already exists,
-   *  else, return the existing value */
+  /** Creates an instance of the corresponding `Value` if it doesn't already exists,
+   *  else, returns the existing value */
   static createValue(data: Data, reference: ReferenceType): Value {
     if (isUnassigned(data)) {
+      assert(reference instanceof Binding);
       return new UnassignedValue(reference);
     } else if (isPrimitiveData(data)) {
       return new PrimitiveValue(data, reference);
     } else {
-      // try to find if this value is already created
-      const existingValue = Layout.values.get(data);
+      const existingValue = Layout.values.get(
+        isBuiltInFn(data) || isStreamFn(data) ? data : data.id
+      );
       if (existingValue) {
         existingValue.addReference(reference);
         return existingValue;
       }
 
-      // else create a new one
-      let newValue: Value = new PrimitiveValue(null, reference);
       if (isDataArray(data)) {
-        newValue = new ArrayValue(data, reference);
-      } else if (isFunction(data)) {
-        if (isClosure(data)) {
-          // normal JS Slang function
-          newValue = new FnValue(data, reference);
-        } else {
-          if (reference instanceof Binding) {
-            // function from the global env (has no extra props such as env, fnName)
-            newValue = new GlobalFnValue(data, reference);
-          } else {
-            // this should be impossible, since bindings for global function always get
-            // drawn first, before any other values like arrays get drawn
-            throw new Error('First reference of global function value is not a binding!');
-          }
-        }
+        return new ArrayValue(data, reference);
+      } else if (isGlobalFn(data)) {
+        assert(reference instanceof Binding);
+        return new GlobalFnValue(data, reference);
+      } else if (isNonGlobalFn(data)) {
+        return new FnValue(data, reference);
       }
 
-      return newValue;
+      return new PrimitiveValue(null, reference);
     }
   }
 
+  static memoizeValue(data: GlobalFn | NonGlobalFn | StreamFn | DataArray, value: Value) {
+    if (isBuiltInFn(data) || isStreamFn(data)) Layout.values.set(data, value);
+    else Layout.values.set(data.id, value);
+  }
+
   /**
    * Scrolls diagram to top left, resets the zoom, and saves the diagram as multiple images of width < MaxExportWidth.
    */
@@ -498,7 +498,7 @@ export class Layout {
       return Layout.prevLayout;
     } else {
       const layout = (
-        <div className={'sa-cse-machine'} data-testid="sa-cse-machine">
+        <div className="sa-cse-machine" data-testid="sa-cse-machine">
           <div
             id="scroll-container"
             ref={Layout.scrollContainerRef}
@@ -517,15 +517,13 @@ export class Layout {
                 width: Layout.width(),
                 height: Layout.height(),
                 overflow: 'hidden',
-                backgroundColor: CseMachine.getPrintableMode()
-                  ? Config.PRINT_BACKGROUND
-                  : Config.SA_BLUE
+                backgroundColor: defaultBackgroundColor()
               }}
             >
               <Stage
                 width={Layout.stageWidth}
                 height={Layout.stageHeight}
-                ref={this.stageRef}
+                ref={Layout.stageRef}
                 draggable
                 onWheel={Layout.zoomStage}
                 className={classes['draggable']}
@@ -537,15 +535,16 @@ export class Layout {
                     y={0}
                     width={Layout.width()}
                     height={Layout.height()}
-                    fill={CseMachine.getPrintableMode() ? Config.PRINT_BACKGROUND : Config.SA_BLUE}
+                    fill={defaultBackgroundColor()}
                     key={Layout.key++}
                     listening={false}
                   />
                   {Layout.levels.map(level => level.draw())}
                   {CseMachine.getControlStash() && Layout.controlComponent.draw()}
                   {CseMachine.getControlStash() && Layout.stashComponent.draw()}
-                  {CseMachine.getControlStash() &&
-                    CseAnimation.animationComponents.map(c => c.draw())}
+                </Layer>
+                <Layer ref={CseAnimation.layerRef} listening={false}>
+                  {CseMachine.getControlStash() && CseAnimation.animations.map(c => c.draw())}
                 </Layer>
               </Stage>
             </div>
diff --git a/src/features/cseMachine/CseMachineTypes.ts b/src/features/cseMachine/CseMachineTypes.ts
index 4e186d7f88..a2e9445c43 100644
--- a/src/features/cseMachine/CseMachineTypes.ts
+++ b/src/features/cseMachine/CseMachineTypes.ts
@@ -44,15 +44,39 @@ export interface IVisible extends Drawable {
 /** unassigned is internally represented as a symbol */
 export type Unassigned = symbol;
 
-/** types of primitives in JS Slang  */
-export type Primitive = number | string | boolean | null | undefined;
+/** types of source objects such as runes */
+export type SourceObject = {
+  [index: string]: any;
+  toReplString: () => string;
+};
 
-/** types of in-built functions in JS Slang */
-export type GlobalFn = Function;
+/** types of primitives in JS Slang  */
+export type Primitive = number | string | boolean | null | undefined | SourceObject;
 
-/** types of functions in JS Slang */
+/** types of closures in JS Slang, redefined here for convenience. */
 export type Closure = JsSlangClosure;
 
+/** types of built-in functions in JS Slang */
+export type BuiltInFn = () => never; // Use `never` to differentiate from `StreamFn`
+
+/** types of pre-defined functions in JS Slang */
+export type PredefinedFn = Omit<Closure, 'predefined'> & { predefined: true };
+
+/**
+ * Special type of a function returned from calling `stream`. It is mostly similar to a global
+ * function, but has the extra `environment` property as it should be drawn next to the frame
+ * in which `stream` is called.
+ *
+ * TODO: remove this and all other `StreamFn` code if `stream` becomes a pre-defined function
+ */
+export type StreamFn = (() => [any, StreamFn] | null) & { environment: Env };
+
+/** types of global functions in JS Slang */
+export type GlobalFn = BuiltInFn | PredefinedFn;
+
+/** types of global functions in JS Slang */
+export type NonGlobalFn = (Omit<Closure, 'predefined'> & { predefined: false }) | StreamFn;
+
 /** types of arrays in JS Slang */
 export type DataArray = Data[] & {
   readonly id: string;
@@ -60,7 +84,7 @@ export type DataArray = Data[] & {
 };
 
 /** the types of data in the JS Slang context */
-export type Data = Primitive | Closure | GlobalFn | Unassigned | DataArray;
+export type Data = Primitive | NonGlobalFn | GlobalFn | Unassigned | DataArray;
 
 /** modified `Environment` to store children and associated frame */
 export type Env = Environment;
diff --git a/src/features/cseMachine/CseMachineUtils.ts b/src/features/cseMachine/CseMachineUtils.ts
index a64f41f141..f83ebf8caf 100644
--- a/src/features/cseMachine/CseMachineUtils.ts
+++ b/src/features/cseMachine/CseMachineUtils.ts
@@ -1,5 +1,6 @@
 import { estreeDecode } from 'js-slang/dist/alt-langs/scheme/scm-slang/src/utils/encoder-visitor';
 import { unparse } from 'js-slang/dist/alt-langs/scheme/scm-slang/src/utils/reverse_parser';
+import JsSlangClosure from 'js-slang/dist/cse-machine/closure';
 import {
   AppInstr,
   ArrLitInstr,
@@ -16,7 +17,8 @@ import { astToString } from 'js-slang/dist/utils/ast/astToString';
 import { Group } from 'konva/lib/Group';
 import { Node } from 'konva/lib/Node';
 import { Shape } from 'konva/lib/Shape';
-import { cloneDeep } from 'lodash';
+import { Text } from 'konva/lib/shapes/Text';
+import { cloneDeep, isObject } from 'lodash';
 import { isSchemeLanguage } from 'src/commons/application/ApplicationTypes';
 import classes from 'src/styles/Draggable.module.scss';
 
@@ -31,9 +33,9 @@ import { GlobalFnValue } from './components/values/GlobalFnValue';
 import { Value } from './components/values/Value';
 import CseMachine from './CseMachine';
 import { Config } from './CseMachineConfig';
-import { ControlStashConfig } from './CseMachineControlStashConfig';
 import { Layout } from './CseMachineLayout';
 import {
+  BuiltInFn,
   Closure,
   Data,
   DataArray,
@@ -42,19 +44,28 @@ import {
   EnvTree,
   EnvTreeNode,
   GlobalFn,
+  NonGlobalFn,
+  PredefinedFn,
   Primitive,
-  ReferenceType
+  ReferenceType,
+  SourceObject,
+  StreamFn,
+  Unassigned
 } from './CseMachineTypes';
 import {
   getAlternateControlItemComponent,
   isCustomPrimitive,
   needsNewRepresentation
 } from './utils/altLangs';
+class AssertionError extends Error {
+  constructor(msg?: string) {
+    super(msg);
+    this.name = 'AssertionError';
+  }
+}
 
-// TODO: can make use of lodash
-/** Returns `true` if `x` is an object */
-export function isObject(x: any): x is object {
-  return x === Object(x);
+export function assert(condition: boolean, msg?: string): asserts condition {
+  if (!condition) throw new AssertionError(msg);
 }
 
 /** Returns `true` if `object` is empty */
@@ -62,6 +73,11 @@ export function isEmptyObject(object: Object): object is EmptyObject {
   return Object.keys(object).length === 0;
 }
 
+/** Returns `true` if `x` is a source object, e.g. runes */
+export function isSourceObject(x: any): x is SourceObject {
+  return isObject(x) && 'toReplString' in x && isFunction(x.toReplString);
+}
+
 /** Returns `true` if `object` is `Environment` */
 export function isEnvironment(object: Object): object is Environment {
   return 'head' in object && 'tail' in object && 'name' in object;
@@ -101,18 +117,51 @@ export function isFunction(x: any): x is Function {
   return x && {}.toString.call(x) === '[object Function]';
 }
 
+/** Returns `true` if `data` is a built-in function */
+export function isBuiltInFn(data: Data): data is BuiltInFn {
+  // Extra `environment` check for functions returned from `stream`
+  // TODO: remove if `stream` becomes a pre-defined function
+  return isFunction(data) && !isClosure(data) && !{}.hasOwnProperty.call(data, 'environment');
+}
+
+/** Returns `true` if `data` is a pre-defined function */
+export function isPredefinedFn(data: Data): data is PredefinedFn {
+  return isClosure(data) && data.predefined;
+}
+
+const closureFields = ['id', 'environment', 'functionName', 'predefined', 'node', 'originalNode'];
+
 /** Returns `true` if `data` is a JS Slang closure */
 export function isClosure(data: Data): data is Closure {
+  const obj = {};
   return (
-    isFunction(data) &&
-    {}.hasOwnProperty.call(data, 'environment') &&
-    {}.hasOwnProperty.call(data, 'functionName')
+    data instanceof JsSlangClosure ||
+    (isFunction(data) &&
+      closureFields.reduce((prev, field) => prev && obj.hasOwnProperty.call(data, field), true))
   );
 }
 
-/** Returns `true` if `x` is a JS Slang function in the global frame */
-export function isGlobalFn(x: any): x is GlobalFn {
-  return isFunction(x) && !isClosure(x);
+/**
+ * Returns `true` if `data` is a function returned from calling `stream`.
+ * TODO: remove if `stream` becomes a pre-defined function
+ */
+export function isStreamFn(data: Data): data is StreamFn {
+  return isFunction(data) && !isClosure(data) && {}.hasOwnProperty.call(data, 'environment');
+}
+
+/** Returns `true` if `data` is a function that is built-in or pre-defined */
+export function isGlobalFn(data: Data): data is GlobalFn {
+  return isBuiltInFn(data) || isPredefinedFn(data);
+}
+
+/**
+ * Returns `true` if `data` is **not** a function that is built-in or pre-defined.
+ * In other words, it is either a closure that is not predefined, or a stream function.
+ *
+ * TODO: remove checking for `isStreamFn` if `stream` becomes pre-defined
+ */
+export function isNonGlobalFn(data: Data): data is NonGlobalFn {
+  return (isClosure(data) && !isPredefinedFn(data)) || isStreamFn(data);
 }
 
 /** Returns `true` if `data` is null */
@@ -136,7 +185,7 @@ export function isNumber(data: Data): data is number {
 }
 
 /** Returns `true` if `data` is a symbol */
-export function isUnassigned(data: Data): data is symbol {
+export function isUnassigned(data: Data): data is Unassigned {
   return typeof data === 'symbol';
 }
 
@@ -145,7 +194,7 @@ export function isBoolean(data: Data): data is boolean {
   return typeof data === 'boolean';
 }
 
-/** Returns `true` if `data` is a primitive, defined as a null | data | number */
+/** Returns `true` if `data` is a primitive, which are non-reference types and source objects */
 export function isPrimitiveData(data: Data): data is Primitive {
   return (
     isUndefined(data) ||
@@ -153,6 +202,7 @@ export function isPrimitiveData(data: Data): data is Primitive {
     isString(data) ||
     isNumber(data) ||
     isBoolean(data) ||
+    isSourceObject(data) ||
     isCustomPrimitive(data)
   );
 }
@@ -175,22 +225,12 @@ export function setDifference<T>(set1: Set<T>, set2: Set<T>) {
   }
 }
 
-/**
- * Mutates the given closure and converts it into a global function,
- * by removing the `functionName` property
- */
-export function convertClosureToGlobalFn(fn: Closure) {
-  delete (fn as Partial<Closure>).functionName;
-}
-
 /**
  * Returns `true` if `reference` is the main reference of `value`. The main reference priority
- * order is as follows:
- * 1. The first `ArrayUnit` inside `value.references` that also shares the same environment
- * 2. The first `Binding` inside `value.references` that also shares the same environment
+ * order is the first binding or array unit which shares the same environment with `value`.
  *
  * An exception is for a global function value, in which case the global frame binding is
- * always prioritised.
+ * always prioritised over array units.
  */
 export function isMainReference(value: Value, reference: ReferenceType) {
   if (isGlobalFn(value.data)) {
@@ -199,21 +239,25 @@ export function isMainReference(value: Value, reference: ReferenceType) {
       isEnvEqual(reference.frame.environment, Layout.globalEnvNode.environment)
     );
   }
-  if (!isClosure(value.data) && !isDataArray(value.data)) {
+  if (!isNonGlobalFn(value.data) && !isDataArray(value.data)) {
     return true;
   }
   const valueEnv = value.data.environment;
-  const firstArrayUnit = value.references.find(
-    r => r instanceof ArrayUnit && isEnvEqual(r.parent.data.environment, valueEnv)
+  const mainReference = value.references.find(r =>
+    isEnvEqual(r instanceof ArrayUnit ? r.parent.data.environment : r.frame.environment, valueEnv)
+  );
+  return reference === mainReference;
+}
+
+/**
+ * Returns `true` if `reference` is a dummy reference,
+ * i.e. it is a dummy binding, or the reference is from an array which is unreferenced
+ */
+export function isDummyReference(reference: ReferenceType) {
+  return (
+    (reference instanceof Binding && reference.isDummyBinding) ||
+    (reference instanceof ArrayUnit && !reference.parent.isReferenced())
   );
-  if (firstArrayUnit) {
-    return reference === firstArrayUnit;
-  } else {
-    const firstBinding = value.references.find(
-      r => r instanceof Binding && isEnvEqual(r.frame.environment, valueEnv)
-    );
-    return reference === firstBinding;
-  }
 }
 
 /** checks if `value` is a `number` */
@@ -230,6 +274,9 @@ export function isDummyKey(key: string) {
   return isNumeric(key);
 }
 
+const canvas = document.createElement('canvas');
+const context = canvas.getContext('2d');
+
 /**
  * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
  *
@@ -240,9 +287,6 @@ export function getTextWidth(
   text: string,
   font: string = `${Config.FontStyle} ${Config.FontSize}px ${Config.FontFamily}`
 ): number {
-  const canvas = document.createElement('canvas');
-  const context = canvas.getContext('2d');
-
   if (!context || !text) {
     return 0;
   }
@@ -276,9 +320,6 @@ export function getTextHeight(
   font: string = `${Config.FontStyle} ${Config.FontSize}px ${Config.FontFamily}`,
   fontSize: number = Config.FontSize
 ): number {
-  const canvas = document.createElement('canvas');
-  const context = canvas.getContext('2d');
-
   if (!context || !text) {
     return 0;
   }
@@ -291,27 +332,32 @@ export function getTextHeight(
   return numberOfLines * fontSize;
 }
 
-/** Returns the parameter string of the given function */
-export function getParamsText(data: Function): string {
+/** Returns the parameter string of the given function, surrounded by brackets */
+export function getParamsText(data: Closure | GlobalFn | StreamFn): string {
   if (isClosure(data)) {
-    return data.node.params.map((node: any) => node.name).join(',');
+    let params = data.functionName.slice(0, data.functionName.indexOf('=>')).trim();
+    if (!params.startsWith('(')) params = '(' + params + ')';
+    return params;
   } else {
     const fnString = data.toString();
-    return fnString.substring(fnString.indexOf('('), fnString.indexOf('{')).trim();
+    return fnString.substring(fnString.indexOf('('), fnString.indexOf(')') + 1);
   }
 }
 
 /** Returns the body string of the given function */
-export function getBodyText(data: Function): string {
+export function getBodyText(data: Closure | GlobalFn | StreamFn): string {
   const fnString = data.toString();
   if (isClosure(data)) {
     let body =
-      data.node.type === 'FunctionDeclaration' || fnString.substring(0, 8) === 'function'
+      fnString.substring(0, 8) === 'function'
         ? fnString.substring(fnString.indexOf('{'))
         : fnString.substring(fnString.indexOf('=') + 3);
 
     if (body[0] !== '{') body = '{\n  return ' + body + ';\n}';
     return body;
+  } else if (isStreamFn(data)) {
+    // TODO: remove if `stream` becomes pre-defined
+    return '{\n  [implementation hidden]\n}';
   } else {
     return fnString.substring(fnString.indexOf('{'));
   }
@@ -340,8 +386,8 @@ export function setHoveredStyle(target: Node | Group, hoveredAttrs: any = {}): v
   nodes.push(target);
   nodes.forEach(node => {
     node.setAttrs({
-      stroke: node.attrs.stroke ? Config.HoveredColor : node.attrs.stroke,
-      fill: node.attrs.fill ? Config.HoveredColor : node.attrs.fill,
+      stroke: node.attrs.stroke ? Config.HoverColor : node.attrs.stroke,
+      fill: node.attrs.fill ? Config.HoverColor : node.attrs.fill,
       ...hoveredAttrs
     });
   });
@@ -356,14 +402,14 @@ export function setUnhoveredStyle(target: Node | Group, unhoveredAttrs: any = {}
   nodes.forEach(node => {
     node.setAttrs({
       stroke: node.attrs.stroke
-        ? CseMachine.getPrintableMode()
-          ? Config.SA_BLUE
-          : Config.SA_WHITE
+        ? node instanceof Text
+          ? defaultTextColor()
+          : defaultStrokeColor()
         : node.attrs.stroke,
       fill: node.attrs.fill
-        ? CseMachine.getPrintableMode()
-          ? Config.SA_BLUE
-          : Config.SA_WHITE
+        ? node instanceof Text
+          ? defaultTextColor()
+          : defaultStrokeColor()
         : node.attrs.fill,
       ...unhoveredAttrs
     });
@@ -406,8 +452,10 @@ function findObjects(
   visited.add(array);
   for (const item of array) {
     if (isDataArray(item) || isClosure(item)) {
-      if (isEnvEqual(item.environment, environment)) set.add(item);
-      if (isDataArray(item)) findObjects(environment, set, item, visited);
+      if (isEnvEqual(item.environment, environment)) {
+        set.add(item);
+        if (isDataArray(item)) findObjects(environment, set, item, visited);
+      }
     }
   }
 }
@@ -425,7 +473,7 @@ export function getReferencedObjects(environment: Env): Set<DataArray | Closure>
 /**
  * Get the set of all objects in the heap of the given environment that are **not**
  * referenced in the head. (Note that these objects can still be referenced from other
- * environments, just not the given one)
+ * environments, just not the given one.)
  */
 export function getUnreferencedObjects(environment: Env): Set<DataArray | Closure> {
   return setDifference(environment.heap.getHeap(), getReferencedObjects(environment));
@@ -701,7 +749,7 @@ export function getControlItemComponent(
             (accum, level) =>
               accum
                 ? accum
-                : level.frames.find(frame => frame.environment?.id === getEnvID(envInstr.env)),
+                : level.frames.find(frame => frame.environment?.id === getEnvId(envInstr.env)),
             undefined
           )
         );
@@ -816,39 +864,23 @@ export function getStashItemComponent(
   index: number,
   _chapter: Chapter
 ): StashItemComponent {
-  if (isClosure(stashItem) || isGlobalFn(stashItem) || isDataArray(stashItem)) {
-    for (const level of Layout.levels) {
-      for (const frame of level.frames) {
-        if (isClosure(stashItem) || isGlobalFn(stashItem)) {
-          const fn: FnValue | GlobalFnValue | undefined = frame.bindings.find(binding => {
-            if (isClosure(stashItem) && isClosure(binding.data)) {
-              return binding.data.id === stashItem.id;
-            } else if (isGlobalFn(stashItem) && isGlobalFn(binding.data)) {
-              return binding.data?.toString() === stashItem.toString();
-            }
-            return false;
-          })?.value as unknown as FnValue | GlobalFnValue;
-          if (fn) return new StashItemComponent(stashItem, stackHeight, index, fn);
-        } else {
-          const ar: ArrayValue | undefined = frame.bindings.find(binding => {
-            if (isDataArray(binding.data)) {
-              return binding.data === stashItem;
-            }
-            return false;
-          })?.value as ArrayValue;
-          if (ar) return new StashItemComponent(stashItem, stackHeight, index, ar);
-        }
-      }
+  let arrowTo: ArrayValue | FnValue | GlobalFnValue | undefined;
+  if (isFunction(stashItem) || isDataArray(stashItem)) {
+    if (isClosure(stashItem) || isDataArray(stashItem)) {
+      arrowTo = Layout.values.get(stashItem.id) as ArrayValue | FnValue;
+    } else {
+      arrowTo = Layout.values.get(stashItem) as FnValue | GlobalFnValue;
     }
   }
-  return new StashItemComponent(stashItem, stackHeight, index);
+  return new StashItemComponent(stashItem, stackHeight, index, arrowTo);
 }
 
 // Helper function to get environment ID. Accounts for the hidden prelude environment right
 // after the global environment. Does not need to be used for frame environments, only for
 // environments from the context.
-export const getEnvID = (environment: Environment): string =>
-  environment.tail?.name === 'global' ? environment.tail.id : environment.id;
+export const getEnvId = (environment: Environment): string => {
+  return environment.name === 'prelude' ? environment.tail!.id : environment.id;
+};
 
 // Function that returns whether the stash item will be popped off in the next step
 export const isStashItemInDanger = (stashIndex: number): boolean => {
@@ -881,18 +913,23 @@ export const isStashItemInDanger = (stashIndex: number): boolean => {
   return false;
 };
 
-export const defaultSAColor = () =>
-  CseMachine.getPrintableMode() ? Config.SA_BLUE : Config.SA_WHITE;
-
-export const stackItemSAColor = (index: number) =>
-  isStashItemInDanger(index)
-    ? ControlStashConfig.STASH_DANGER_ITEM
-    : CseMachine.getPrintableMode()
-    ? ControlStashConfig.SA_BLUE
-    : ControlStashConfig.SA_WHITE;
-export const currentItemSAColor = (test: boolean) =>
-  test
-    ? Config.SA_CURRENT_ITEM
-    : CseMachine.getPrintableMode()
-    ? ControlStashConfig.SA_BLUE
-    : ControlStashConfig.SA_WHITE;
+export const defaultBackgroundColor = () =>
+  CseMachine.getPrintableMode() ? Config.PrintBgColor : Config.BgColor;
+
+export const defaultTextColor = () =>
+  CseMachine.getPrintableMode() ? Config.PrintTextColor : Config.TextColor;
+
+export const fadedTextColor = () =>
+  CseMachine.getPrintableMode() ? Config.PrintTextColorFaded : Config.TextColorFaded;
+
+export const defaultStrokeColor = () =>
+  CseMachine.getPrintableMode() ? Config.PrintStrokeColor : Config.StrokeColor;
+
+export const fadedStrokeColor = () =>
+  CseMachine.getPrintableMode() ? Config.PrintStrokeColorFaded : Config.StrokeColorFaded;
+
+export const defaultActiveColor = () =>
+  CseMachine.getPrintableMode() ? Config.PrintActiveColor : Config.ActiveColor;
+
+export const defaultDangerColor = () =>
+  CseMachine.getPrintableMode() ? Config.PrintDangerColor : Config.DangerColor;
diff --git a/src/features/cseMachine/__tests__/CseMachine.tsx b/src/features/cseMachine/__tests__/CseMachine.tsx
index e10468814f..ac2827a432 100644
--- a/src/features/cseMachine/__tests__/CseMachine.tsx
+++ b/src/features/cseMachine/__tests__/CseMachine.tsx
@@ -192,7 +192,7 @@ const codeSamplesControlStash = [
     {
       const math_sin = x => x;
     }
-    math_sin(math_PI / 2); 
+    math_sin(math_PI / 2);
     `,
     5
   ],
diff --git a/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap b/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap
index 92feee408c..ac9116dd06 100644
--- a/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap
+++ b/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap
@@ -11,10 +11,10 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -32,13 +32,13 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     y={45}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -49,18 +49,16 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     />
   </Label>
   <Group
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
+    listening={false}
   >
     <Path
-      data="M 140 57.5 L 170 390 L 170 390 M 140 57.5 L 170 390 L 170 390 "
-      hitStrokeWidth={5}
+      data="M 140 57.5 L 170 390 L 170 390 "
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
       strokeWidth={1}
     />
     <Arrow
-      fill="#999999"
+      fill="#999"
       pointerWidth={10}
       points={
         Array [
@@ -88,10 +86,10 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -109,13 +107,13 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     y={80}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -139,10 +137,10 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -160,13 +158,13 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     y={115}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -177,25 +175,23 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     />
   </Label>
   <Group
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
+    listening={false}
   >
     <Path
-      data="M 140 127.5 L 486 390 L 486 390 M 140 127.5 L 486 390 L 486 390 "
-      hitStrokeWidth={5}
+      data="M 140 127.5 L 486 400 L 486 400 "
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
       strokeWidth={1}
     />
     <Arrow
-      fill="#999999"
+      fill="#999"
       pointerWidth={10}
       points={
         Array [
           140,
           127.5,
           486,
-          390,
+          400,
         ]
       }
       preventDefault={false}
@@ -216,10 +212,10 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -237,13 +233,13 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     y={150}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -267,10 +263,10 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -288,13 +284,13 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     y={185}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -305,25 +301,23 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     />
   </Label>
   <Group
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
+    listening={false}
   >
     <Path
-      data="M 140 197.5 L 802 390 L 802 390 M 140 197.5 L 802 390 L 802 390 "
-      hitStrokeWidth={5}
+      data="M 140 197.5 L 802 400 L 802 400 "
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
       strokeWidth={1}
     />
     <Arrow
-      fill="#999999"
+      fill="#999"
       pointerWidth={10}
       points={
         Array [
           140,
           197.5,
           802,
-          390,
+          400,
         ]
       }
       preventDefault={false}
@@ -344,10 +338,10 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -365,13 +359,13 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     y={220}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -395,10 +389,10 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -416,13 +410,13 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     y={255}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -433,25 +427,23 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     />
   </Label>
   <Group
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
+    listening={false}
   >
     <Path
-      data="M 140 267.5 L 1118 390 L 1118 390 M 140 267.5 L 1118 390 L 1118 390 "
-      hitStrokeWidth={5}
+      data="M 140 267.5 L 1118 400 L 1118 400 "
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
       strokeWidth={1}
     />
     <Arrow
-      fill="#999999"
+      fill="#999"
       pointerWidth={10}
       points={
         Array [
           140,
           267.5,
           1118,
-          390,
+          400,
         ]
       }
       preventDefault={false}
@@ -472,10 +464,10 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -493,13 +485,13 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     y={290}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -523,10 +515,10 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -544,13 +536,13 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     y={325}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -561,25 +553,23 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     />
   </Label>
   <Group
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
+    listening={false}
   >
     <Path
-      data="M 140 337.5 L 1434 390 L 1434 390 M 140 337.5 L 1434 390 L 1434 390 "
-      hitStrokeWidth={5}
+      data="M 140 337.5 L 1434 400 L 1434 400 "
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
       strokeWidth={1}
     />
     <Arrow
-      fill="#999999"
+      fill="#999"
       pointerWidth={10}
       points={
         Array [
           140,
           337.5,
           1434,
-          390,
+          400,
         ]
       }
       preventDefault={false}
@@ -603,7 +593,7 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
       stroke="#030fff"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -621,13 +611,13 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     y={360}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -651,10 +641,10 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -670,13 +660,13 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     y={45}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -700,10 +690,10 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -719,13 +709,13 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     y={45}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -749,10 +739,10 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -768,13 +758,13 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     y={45}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -798,10 +788,10 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -817,13 +807,13 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     y={45}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -847,10 +837,10 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -866,13 +856,13 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     y={45}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -896,10 +886,10 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#ff0000"
+      stroke="#ff1744"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -915,13 +905,13 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     y={45}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -945,10 +935,10 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#ff0000"
+      stroke="#ff1744"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -964,13 +954,13 @@ exports[`CSE Machine Control Stash correctly renders: Control is truncated prope
     y={45}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -994,10 +984,10 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1015,13 +1005,13 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     y={45}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1045,10 +1035,10 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1066,13 +1056,13 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     y={80}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1096,10 +1086,10 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1117,13 +1107,13 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     y={115}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1147,10 +1137,10 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1168,13 +1158,13 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     y={150}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1185,18 +1175,16 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     />
   </Label>
   <Group
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
+    listening={false}
   >
     <Path
-      data="M 140 162.5 L 170 240 L 170 240 M 140 162.5 L 170 240 L 170 240 "
-      hitStrokeWidth={5}
+      data="M 140 162.5 L 170 240 L 170 240 "
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
       strokeWidth={1}
     />
     <Arrow
-      fill="#999999"
+      fill="#999"
       pointerWidth={10}
       points={
         Array [
@@ -1224,10 +1212,10 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1245,13 +1233,13 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     y={185}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1275,10 +1263,10 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1296,13 +1284,13 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     y={220}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1313,18 +1301,16 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     />
   </Label>
   <Group
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
+    listening={false}
   >
     <Path
-      data="M 140 232.5 L 170 390 L 170 390 M 140 232.5 L 170 390 L 170 390 "
-      hitStrokeWidth={5}
+      data="M 140 232.5 L 170 390 L 170 390 "
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
       strokeWidth={1}
     />
     <Arrow
-      fill="#999999"
+      fill="#999"
       pointerWidth={10}
       points={
         Array [
@@ -1352,10 +1338,10 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1373,13 +1359,13 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     y={255}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1403,10 +1389,10 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1424,13 +1410,13 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     y={290}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1454,10 +1440,10 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1475,13 +1461,13 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     y={325}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1505,10 +1491,10 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1526,13 +1512,13 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     y={360}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1556,10 +1542,10 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1577,13 +1563,13 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     y={395}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1607,10 +1593,10 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1628,13 +1614,13 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     y={430}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1661,7 +1647,7 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
       stroke="#030fff"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1679,13 +1665,13 @@ exports[`CSE Machine Control Stash correctly renders: arrows from the environmen
     y={465}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1709,10 +1695,10 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1730,13 +1716,13 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
     y={45}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1760,10 +1746,10 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1781,13 +1767,13 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
     y={80}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1798,18 +1784,16 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
     />
   </Label>
   <Group
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
+    listening={false}
   >
     <Path
-      data="M 140 92.5 L 170 105 L 170 105 M 140 92.5 L 170 105 L 170 105 "
-      hitStrokeWidth={5}
+      data="M 140 92.5 L 170 105 L 170 105 "
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
       strokeWidth={1}
     />
     <Arrow
-      fill="#999999"
+      fill="#999"
       pointerWidth={10}
       points={
         Array [
@@ -1837,10 +1821,10 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1858,13 +1842,13 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
     y={115}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1891,7 +1875,7 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
       stroke="#030fff"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1909,13 +1893,13 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
     y={150}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1939,10 +1923,10 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
     <Tag
       cornerRadius={5}
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1958,13 +1942,13 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
     y={45}
   >
     <Tag
-      fill="black"
+      fill="#000"
       opacity={0.7}
       preventDefault={false}
-      stroke="black"
+      stroke="#000"
     />
     <Text
-      fill="#999999"
+      fill="#999"
       fontFamily="monospace, monospace"
       fontSize={15}
       fontStyle="normal"
@@ -1975,24 +1959,22 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
     />
   </Label>
   <Group
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
+    listening={false}
   >
     <Path
-      data="M 181.5 40 L 356.5 330 L 356.5 330 M 181.5 40 L 356.5 330 L 356.5 330 "
-      hitStrokeWidth={5}
+      data="M 181.5 40 L 379 330 L 379 330 "
       preventDefault={false}
-      stroke="#999999"
+      stroke="#999"
       strokeWidth={1}
     />
     <Arrow
-      fill="#999999"
+      fill="#999"
       pointerWidth={10}
       points={
         Array [
           181.5,
           40,
-          356.5,
+          379,
           330,
         ]
       }
@@ -3528,7 +3510,7 @@ Array [
   [Function],
   "x: ",
   11,
-  "0:= ",
+  "1:= ",
   [Function],
 ]
 `;
@@ -3618,8 +3600,6 @@ Array [
   [Function],
   "accumulate: ",
   [Function],
-  "0:= ",
-  [Function],
   "x:= ",
   Array [
     1,
@@ -4133,9 +4113,7 @@ Object {
     "the_tail": [Function],
   },
   "heap": Heap {
-    "storage": Set {
-      [Function],
-    },
+    "storage": null,
   },
   "id": "79",
   "name": "blockEnvironment",
@@ -5003,9 +4981,7 @@ Object {
     ],
   },
   "heap": Heap {
-    "storage": Set {
-      [Function],
-    },
+    "storage": null,
   },
   "id": "75",
   "name": "es",
@@ -5801,9 +5777,7 @@ Object {
       ],
     },
     "heap": Heap {
-      "storage": Set {
-        [Function],
-      },
+      "storage": null,
     },
     "id": "75",
     "name": "es",
@@ -6167,13 +6141,11 @@ Array [
   [Function],
   "x: ",
   1,
-  "0:= ",
+  "1:= ",
   Array [],
   "n: ",
   1,
-  "0:= ",
-  [Function],
-  "0:= ",
+  "1:= ",
   Array [
     1,
     [Function],
@@ -6185,9 +6157,7 @@ Array [
   ],
   "n: ",
   2,
-  "0:= ",
-  [Function],
-  "0:= ",
+  "1:= ",
   Array [
     2,
     [Function],
@@ -6203,8 +6173,6 @@ Array [
   2,
   "the_tail:= ",
   [Function],
-  "0:= ",
-  [Function],
   "_copy_of_i:= ",
   1,
   "_copy_of_i:= ",
@@ -6230,8 +6198,6 @@ Array [
   ],
   "n: ",
   2,
-  "0:= ",
-  [Function],
   "s: ",
   Array [
     2,
@@ -6266,7 +6232,7 @@ Array [
       ],
     ],
   ],
-  "0:= ",
+  "1:= ",
   Array [
     1,
     Array [
@@ -6285,7 +6251,7 @@ Array [
       ],
     ],
   ],
-  "0:= ",
+  "1:= ",
   Array [
     2,
     null,
diff --git a/src/features/cseMachine/animationComponents/AnimationComponents.tsx b/src/features/cseMachine/animationComponents/AnimationComponents.tsx
deleted file mode 100644
index 0540209432..0000000000
--- a/src/features/cseMachine/animationComponents/AnimationComponents.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import { NodeConfig } from 'konva/lib/Node';
-import { RectConfig } from 'konva/lib/shapes/Rect';
-import { TextConfig } from 'konva/lib/shapes/Text';
-import { Easings, Tween } from 'konva/lib/Tween';
-import React from 'react';
-import { Group, Rect, Text } from 'react-konva';
-
-import { Visible } from '../components/Visible';
-import { CseAnimation } from '../CseMachineAnimation';
-import { ControlStashConfig } from '../CseMachineControlStashConfig';
-import { currentItemSAColor } from '../CseMachineUtils';
-
-/** Type that extends the NodeConfig type from Konva, making the x, y, width & height values required */
-type StrictNodeConfig = Omit<NodeConfig, 'x' | 'y' | 'width' | 'height'> & {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-};
-
-type AnimationConfig = {
-  durationMultiplier?: number;
-  delayMultiplier?: number;
-  easing?: typeof Easings.Linear;
-};
-
-export abstract class Animatable extends Visible {
-  static key = -1;
-  /** Plays the animation, and resolves after the animation is complete */
-  abstract animate(): Promise<void>;
-  /** Properly dispose of the current animation and ensures that subsequent calls to animate cannot be made */
-  abstract destroy(): void;
-}
-
-abstract class AnimationComponent extends Animatable {
-  private isDestroyed = false;
-  private tween?: Tween;
-  private resolve?: (value: void | PromiseLike<void>) => void;
-
-  constructor(
-    protected from: StrictNodeConfig,
-    protected to?: NodeConfig,
-    protected animationConfig?: AnimationConfig
-  ) {
-    super();
-    this._x = from.x;
-    this._y = from.y;
-    this._width = from.width;
-    this._height = from.height;
-  }
-
-  private async delay(duration: number) {
-    return new Promise(resolve => {
-      setTimeout(resolve, duration);
-    });
-  }
-
-  setDestination(to: NodeConfig, animationConfig?: AnimationConfig) {
-    this.to = to;
-    if (animationConfig) this.animationConfig = animationConfig;
-  }
-
-  async animate(): Promise<void> {
-    return new Promise(async (resolve, reject) => {
-      if (this.isDestroyed) {
-        resolve();
-        return;
-      }
-      if (!this.ref.current || !this.to) {
-        const errorMsg = !this.ref.current
-          ? 'Current node reference is null, unable to play animation!'
-          : 'No destination value specified!';
-        reject('Animation error: ' + errorMsg);
-        return;
-      }
-      this.resolve = resolve;
-      if (this.animationConfig?.delayMultiplier) {
-        await this.delay(this.animationConfig.delayMultiplier * CseAnimation.defaultDuration);
-      }
-      if (this.isDestroyed) {
-        return;
-      }
-      if (this.tween) {
-        this.tween.pause();
-        this.tween.destroy();
-      }
-      this.tween = new Tween({
-        node: this.ref.current,
-        ...this.to,
-        duration: CseAnimation.defaultDuration * (this.animationConfig?.durationMultiplier ?? 1),
-        easing: this.animationConfig?.easing ?? CseAnimation.defaultEasing,
-        onFinish: () => {
-          if (this.to) {
-            if (this.to.x) this._x = this.to.x;
-            if (this.to.y) this._y = this.to.y;
-            if (this.to.width) this._width = this.to.width;
-            if (this.to.height) this._height = this.to.height;
-          }
-          this.resolve = undefined;
-          this.tween?.destroy();
-          this.tween = undefined;
-          resolve();
-        }
-      });
-      this.tween.play();
-    });
-  }
-
-  destroy() {
-    this.isDestroyed = true;
-    if (this.tween) {
-      this.tween.finish();
-    } else {
-      this.resolve?.();
-      this.resolve = undefined;
-    }
-  }
-}
-
-export class AnimatedTextComponent extends AnimationComponent {
-  readonly text?: string;
-
-  constructor(
-    from: StrictNodeConfig,
-    to?: NodeConfig,
-    private textProps?: TextConfig,
-    animationConfig?: AnimationConfig
-  ) {
-    super(from, to, animationConfig);
-    if (this.textProps?.text === undefined) {
-      console.warn('AnimatedTextComponent has no text defined inside textProps.');
-    }
-    this.text = this.textProps?.text;
-  }
-
-  draw(): React.ReactNode {
-    return (
-      <Text
-        ref={this.ref}
-        {...(this.textProps ?? {})}
-        {...this.from}
-        text={this.text}
-        width={this.width()}
-        height={this.height()}
-      />
-    );
-  }
-}
-
-export class AnimatedRectComponent extends AnimationComponent {
-  constructor(
-    from: StrictNodeConfig,
-    to?: NodeConfig,
-    private rectProps?: RectConfig,
-    animationConfig?: AnimationConfig
-  ) {
-    super(from, to, animationConfig);
-  }
-
-  draw(): React.ReactNode {
-    return (
-      <Rect
-        ref={this.ref}
-        {...(this.rectProps ?? {})}
-        {...this.from}
-        width={this.width()}
-        height={this.height()}
-      />
-    );
-  }
-}
-
-export class AnimatedTextboxComponent extends Animatable {
-  private rectComponent: AnimatedRectComponent;
-  private textComponent: AnimatedTextComponent;
-
-  constructor(
-    from: StrictNodeConfig,
-    to?: NodeConfig,
-    text?: string,
-    animationConfig?: AnimationConfig
-  ) {
-    super();
-    const rectProps = {
-      stroke: currentItemSAColor(false),
-      cornerRadius: ControlStashConfig.ControlItemCornerRadius
-    };
-    const textProps = {
-      text,
-      fill: ControlStashConfig.SA_WHITE,
-      padding: ControlStashConfig.ControlItemTextPadding,
-      fontFamily: ControlStashConfig.FontFamily,
-      fontSize: ControlStashConfig.FontSize,
-      fontStyle: ControlStashConfig.FontStyle,
-      fontVariant: ControlStashConfig.FontVariant
-    };
-    this.rectComponent = new AnimatedRectComponent(from, to, rectProps, animationConfig);
-    this.textComponent = new AnimatedTextComponent(from, to, textProps, animationConfig);
-  }
-
-  draw(): React.ReactNode {
-    return (
-      <Group key={Animatable.key--} ref={this.ref}>
-        {this.rectComponent.draw()}
-        {this.textComponent.draw()}
-      </Group>
-    );
-  }
-
-  setDestination(to: NodeConfig, animationConfig?: AnimationConfig) {
-    this.rectComponent.setDestination(to, animationConfig);
-    this.textComponent.setDestination(to, animationConfig);
-  }
-
-  async animate() {
-    await Promise.all([this.rectComponent.animate(), this.textComponent.animate()]);
-  }
-
-  destroy() {
-    this.rectComponent.destroy();
-    this.textComponent.destroy();
-  }
-}
diff --git a/src/features/cseMachine/animationComponents/AnimationUtils.ts b/src/features/cseMachine/animationComponents/AnimationUtils.ts
deleted file mode 100644
index e1eee10c61..0000000000
--- a/src/features/cseMachine/animationComponents/AnimationUtils.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ControlItemComponent } from '../components/ControlItemComponent';
-import { StashItemComponent } from '../components/StashItemComponent';
-
-export function getNodePositionFromItem(item: ControlItemComponent | StashItemComponent) {
-  return {
-    x: item.x(),
-    y: item.y(),
-    height: item.height(),
-    width: item.width()
-  };
-}
diff --git a/src/features/cseMachine/animationComponents/ArrayAccessAnimation.tsx b/src/features/cseMachine/animationComponents/ArrayAccessAnimation.tsx
new file mode 100644
index 0000000000..d233117238
--- /dev/null
+++ b/src/features/cseMachine/animationComponents/ArrayAccessAnimation.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import { Group } from 'react-konva';
+
+import { ArrayUnit } from '../components/ArrayUnit';
+import { ControlItemComponent } from '../components/ControlItemComponent';
+import { StashItemComponent } from '../components/StashItemComponent';
+import { ArrayValue } from '../components/values/ArrayValue';
+import { Visible } from '../components/Visible';
+import { ControlStashConfig } from '../CseMachineControlStashConfig';
+import {
+  defaultActiveColor,
+  defaultDangerColor,
+  defaultStrokeColor,
+  getTextWidth,
+  isStashItemInDanger
+} from '../CseMachineUtils';
+import { Animatable } from './base/Animatable';
+import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
+import { AnimatedTextbox } from './base/AnimatedTextbox';
+import { getNodeDimensions, getNodeLocation, getNodePosition } from './base/AnimationUtils';
+
+/** Animation for array access */
+export class ArrayAccessAnimation extends Animatable {
+  private accessorAnimation: AnimatedTextbox;
+  private arrayItemAnimation: AnimatedTextbox;
+  private arrayArrowAnimation: AnimatedGenericArrow<StashItemComponent, Visible>;
+  private indexItemAnimation: AnimatedTextbox;
+  private resultAnimation: AnimatedTextbox;
+  private resultArrowAnimation?: AnimatedGenericArrow<StashItemComponent, Visible>;
+  private arrayUnit: ArrayUnit;
+
+  constructor(
+    private accInstr: ControlItemComponent,
+    arrayItem: StashItemComponent,
+    private indexItem: StashItemComponent,
+    private resultItem: StashItemComponent
+  ) {
+    super();
+    this.accessorAnimation = new AnimatedTextbox(accInstr.text, getNodePosition(accInstr), {
+      rectProps: { stroke: defaultActiveColor() }
+    });
+    this.arrayItemAnimation = new AnimatedTextbox(arrayItem.text, getNodePosition(arrayItem), {
+      rectProps: { stroke: defaultDangerColor() }
+    });
+    this.indexItemAnimation = new AnimatedTextbox(indexItem.text, getNodePosition(indexItem), {
+      rectProps: { stroke: defaultDangerColor() }
+    });
+    this.arrayArrowAnimation = new AnimatedGenericArrow(arrayItem.arrow!);
+    // the target should always be an array value
+    const array = arrayItem.arrow!.target! as ArrayValue;
+    this.arrayUnit = array.units[parseInt(indexItem.text)];
+    this.resultAnimation = new AnimatedTextbox(resultItem.text, {
+      ...getNodeDimensions(resultItem),
+      x: this.arrayUnit.x() + this.arrayUnit.width() / 2 - this.resultItem.width() / 2,
+      y: this.arrayUnit.y() + this.arrayUnit.height() / 2 - this.resultItem.height() / 2,
+      opacity: 0
+    });
+    if (this.resultItem.arrow) {
+      this.resultArrowAnimation = new AnimatedGenericArrow(this.resultItem.arrow, { opacity: 0 });
+    }
+  }
+
+  draw(): React.ReactNode {
+    return (
+      <Group key={Animatable.key--} ref={this.ref}>
+        {this.accessorAnimation.draw()}
+        {this.arrayItemAnimation.draw()}
+        {this.arrayArrowAnimation.draw()}
+        {this.indexItemAnimation.draw()}
+        {this.resultAnimation.draw()}
+        {this.resultArrowAnimation?.draw()}
+      </Group>
+    );
+  }
+
+  async animate() {
+    this.resultItem.ref.current?.hide();
+    this.resultItem.arrow?.ref.current?.hide();
+    const minInstrItemWidth =
+      getTextWidth(this.accInstr.text) + ControlStashConfig.ControlItemTextPadding * 2;
+    const indexAboveArrayLocation = {
+      x: this.arrayUnit.x() + this.arrayUnit.width() / 2 - this.indexItem.width() / 2,
+      y: this.arrayUnit.y() - this.indexItem.height() - 8
+    };
+    const indexInArrayLocation = {
+      y: this.arrayUnit.y() + this.arrayUnit.height() / 2 - this.indexItem.height() / 2
+    };
+    const resultAboveArrayLocation = { y: this.arrayUnit.y() - this.resultItem.height() - 8 };
+    // move arr acc instruction and index to above array
+    await Promise.all([
+      this.arrayItemAnimation.animateTo({ opacity: 0 }, { duration: 0.6 }),
+      this.arrayArrowAnimation.animateTo({ opacity: 0 }, { duration: 0.6 }),
+      this.accessorAnimation.animateRectTo({ stroke: defaultStrokeColor() }, { duration: 1.2 }),
+      this.accessorAnimation.animateTo(
+        {
+          x: indexAboveArrayLocation.x - minInstrItemWidth,
+          y: indexAboveArrayLocation.y,
+          width: minInstrItemWidth
+        },
+        { duration: 1.2 }
+      ),
+      this.indexItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }, { duration: 1.2 }),
+      this.indexItemAnimation.animateTo(indexAboveArrayLocation, { duration: 1.2 })
+    ]);
+    // Move arr acc instruction and result on top of array, and bring result up
+    await Promise.all([
+      this.accessorAnimation.animateTo({ opacity: 0 }, { duration: 0.8 }),
+      this.accessorAnimation.animateTo(indexInArrayLocation),
+      this.indexItemAnimation.animateTo({ opacity: 0 }, { duration: 0.8 }),
+      this.indexItemAnimation.animateTo(indexInArrayLocation),
+      this.resultAnimation.animateTo(resultAboveArrayLocation),
+      this.resultAnimation.animateTo({ opacity: 1 }, { duration: 0.8, delay: 0.2 })
+    ]);
+    // Move result into stash
+    await Promise.all([
+      this.resultAnimation.animateTo(getNodeLocation(this.resultItem), { duration: 1.2 }),
+      isStashItemInDanger(this.resultItem.index) &&
+        this.resultAnimation.animateRectTo({ stroke: defaultDangerColor() }, { duration: 1.2 }),
+      this.resultArrowAnimation?.animateTo({ opacity: 1 }, { delay: 1 })
+    ]);
+    this.destroy();
+  }
+
+  destroy() {
+    this.ref.current?.hide();
+    this.resultItem.ref.current?.show();
+    this.resultItem.arrow?.ref.current?.show();
+    this.accessorAnimation.destroy();
+    this.arrayItemAnimation.destroy();
+    this.indexItemAnimation.destroy();
+    this.resultAnimation.destroy();
+    this.resultArrowAnimation?.destroy();
+  }
+}
diff --git a/src/features/cseMachine/animationComponents/ArrayAssignmentAnimation.tsx b/src/features/cseMachine/animationComponents/ArrayAssignmentAnimation.tsx
new file mode 100644
index 0000000000..744a9b6929
--- /dev/null
+++ b/src/features/cseMachine/animationComponents/ArrayAssignmentAnimation.tsx
@@ -0,0 +1,189 @@
+import React from 'react';
+import { Group } from 'react-konva';
+
+import { ArrayUnit } from '../components/ArrayUnit';
+import { ControlItemComponent } from '../components/ControlItemComponent';
+import { StashItemComponent } from '../components/StashItemComponent';
+import { Text } from '../components/Text';
+import { ArrayValue } from '../components/values/ArrayValue';
+import { PrimitiveValue } from '../components/values/PrimitiveValue';
+import { Visible } from '../components/Visible';
+import { ControlStashConfig } from '../CseMachineControlStashConfig';
+import {
+  defaultActiveColor,
+  defaultDangerColor,
+  defaultStrokeColor,
+  getTextWidth
+} from '../CseMachineUtils';
+import { Animatable } from './base/Animatable';
+import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
+import { AnimatedTextbox } from './base/AnimatedTextbox';
+import { AnimatedTextComponent } from './base/AnimationComponents';
+import { getNodePosition } from './base/AnimationUtils';
+
+/** Animation for array assignment */
+export class ArrayAssignmentAnimation extends Animatable {
+  // Control item
+  private asgnItemAnimation: AnimatedTextbox;
+
+  // Stash items
+  private arrayItemAnimation: AnimatedTextbox;
+  private arrayArrowAnimation: AnimatedGenericArrow<StashItemComponent, Visible>;
+  private indexItemAnimation: AnimatedTextbox;
+  private valueArrowAnimation?: AnimatedGenericArrow<StashItemComponent, Visible>;
+  private resultAnimation: AnimatedTextbox;
+  private resultArrowAnimation?: AnimatedGenericArrow<StashItemComponent, Visible>;
+
+  // Value inside array unit
+  private arrayUnitText?: Text;
+  private arrayUnitTextAnimation?: AnimatedTextComponent;
+  private arrayUnitArrowAnimation?: AnimatedGenericArrow<ArrayUnit, Visible>;
+
+  private arrayUnit: ArrayUnit;
+  private resultItemIsFirst: boolean;
+
+  constructor(
+    private asgnItem: ControlItemComponent,
+    arrayItem: StashItemComponent,
+    arrayValue: ArrayValue,
+    indexItem: StashItemComponent,
+    valueItem: StashItemComponent,
+    private resultItem: StashItemComponent
+  ) {
+    super();
+    this.resultItemIsFirst = resultItem.index === 0;
+    this.asgnItemAnimation = new AnimatedTextbox(asgnItem.text, getNodePosition(asgnItem), {
+      rectProps: { stroke: defaultActiveColor() }
+    });
+    this.arrayItemAnimation = new AnimatedTextbox(arrayItem.text, getNodePosition(arrayItem), {
+      rectProps: { stroke: defaultDangerColor() }
+    });
+    this.arrayArrowAnimation = new AnimatedGenericArrow(arrayItem.arrow!);
+    this.indexItemAnimation = new AnimatedTextbox(indexItem.text, getNodePosition(indexItem), {
+      rectProps: { stroke: defaultDangerColor() }
+    });
+    // valueItem and resultItem should be the same
+    this.resultAnimation = new AnimatedTextbox(resultItem.text, getNodePosition(valueItem), {
+      rectProps: { stroke: defaultDangerColor() }
+    });
+    if (valueItem.arrow) this.valueArrowAnimation = new AnimatedGenericArrow(valueItem.arrow);
+    if (resultItem.arrow) {
+      this.resultArrowAnimation = new AnimatedGenericArrow(resultItem.arrow, { opacity: 0 });
+    }
+    this.arrayUnit = arrayValue.units[parseInt(indexItem.text)];
+    if (
+      this.arrayUnit.value instanceof PrimitiveValue &&
+      this.arrayUnit.value.text instanceof Text
+    ) {
+      this.arrayUnitText = this.arrayUnit.value.text;
+      this.arrayUnitTextAnimation = new AnimatedTextComponent({
+        text: this.arrayUnitText.partialStr,
+        x: this.arrayUnitText.x(),
+        y: this.arrayUnitText.y() - 16,
+        opacity: 0
+      });
+    }
+  }
+
+  draw(): React.ReactNode {
+    // Arrow only gets updated when drawn, so animated arrow is initialised here instead
+    if (this.arrayUnit.arrow) {
+      this.arrayUnitArrowAnimation = new AnimatedGenericArrow(this.arrayUnit.arrow, {
+        opacity: 0,
+        y: -16
+      });
+    }
+    return (
+      <Group key={Animatable.key--} ref={this.ref}>
+        {this.asgnItemAnimation.draw()}
+        {this.arrayItemAnimation.draw()}
+        {this.arrayArrowAnimation.draw()}
+        {this.indexItemAnimation.draw()}
+        {this.valueArrowAnimation?.draw()}
+        {this.resultAnimation.draw()}
+        {this.resultArrowAnimation?.draw()}
+        {this.arrayUnitTextAnimation?.draw()}
+        {this.arrayUnitArrowAnimation?.draw()}
+      </Group>
+    );
+  }
+
+  async animate() {
+    this.resultItem.ref.current?.hide();
+    this.resultItem.arrow?.ref.current?.hide();
+    this.arrayUnitText?.ref.current?.hide();
+    this.arrayUnit.arrow?.ref.current?.hide();
+    const minAsgnItemWidth =
+      getTextWidth(this.asgnItem.text) + ControlStashConfig.ControlItemTextPadding * 2;
+    const fadeConfig = { duration: 3 / 4 };
+    // move the instruction next to stash while merging stash items
+    await Promise.all([
+      this.arrayArrowAnimation.animateTo({ opacity: 0 }, { duration: 0.5 }),
+      this.valueArrowAnimation?.animateTo({ opacity: 0 }, { duration: 0.5 }),
+      this.asgnItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.asgnItemAnimation.animateTo({
+        x: this.resultItem.x() - (this.resultItemIsFirst ? minAsgnItemWidth : 0),
+        y: this.resultItem.y() + (this.resultItemIsFirst ? 0 : this.resultItem.height()),
+        width: minAsgnItemWidth
+      }),
+      this.arrayItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.arrayItemAnimation.animateTo({ opacity: 0 }, fadeConfig),
+      this.indexItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.indexItemAnimation.animateTo({ x: this.resultItem.x() }),
+      this.indexItemAnimation.animateTo({ opacity: 0 }, fadeConfig),
+      this.resultAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.resultAnimation.animateTo({ x: this.resultItem.x() }),
+      this.resultArrowAnimation?.animateTo({ opacity: 1 }, { duration: 0.5, delay: 0.75 })
+    ]);
+    this.resultItem.ref.current?.show();
+    this.resultItem.arrow?.ref.current?.show();
+    this.resultArrowAnimation?.destroy();
+    const aboveArrayLocation = {
+      x: this.arrayUnit.x() + this.arrayUnit.width() / 2 - this.resultItem.width() / 2,
+      y: this.arrayUnit.y() - this.resultItem.height() - 8
+    };
+    const inArrayLocation = {
+      y: this.arrayUnit.y() + this.arrayUnit.height() / 2 - this.resultItem.height() / 2
+    };
+    // move instruction and a copy of the value to above the array
+    await Promise.all([
+      this.asgnItemAnimation.animateTo(
+        {
+          x: aboveArrayLocation.x - minAsgnItemWidth,
+          y: aboveArrayLocation.y
+        },
+        { duration: 1.2 }
+      ),
+      this.resultAnimation.animateTo(aboveArrayLocation, { duration: 1.2 })
+    ]);
+    // insert value into array
+    await Promise.all([
+      this.asgnItemAnimation.animateTo(inArrayLocation),
+      this.asgnItemAnimation.animateTo({ opacity: 0 }, fadeConfig),
+      this.resultAnimation.animateTo(inArrayLocation),
+      this.resultAnimation.animateTo({ opacity: 0 }, fadeConfig),
+      this.arrayUnitTextAnimation?.animateTo({ y: this.arrayUnitText!.y() }),
+      this.arrayUnitTextAnimation?.animateTo({ opacity: 1 }, { ...fadeConfig, delay: 1 / 4 }),
+      this.arrayUnitArrowAnimation?.animateTo({ y: 0 }),
+      this.arrayUnitArrowAnimation?.animateTo({ opacity: 1 }, { ...fadeConfig, delay: 1 / 4 })
+    ]);
+    this.destroy();
+  }
+
+  destroy() {
+    this.ref.current?.hide();
+    this.resultItem.ref.current?.show();
+    this.resultItem.arrow?.ref.current?.show();
+    this.arrayUnitText?.ref.current?.show();
+    this.arrayUnit.arrow?.ref.current?.show();
+    this.asgnItemAnimation.destroy();
+    this.arrayItemAnimation.destroy();
+    this.arrayArrowAnimation.destroy();
+    this.indexItemAnimation.destroy();
+    this.valueArrowAnimation?.destroy();
+    this.resultAnimation.destroy();
+    this.resultArrowAnimation?.destroy();
+    this.arrayUnitTextAnimation?.destroy();
+    this.arrayUnitArrowAnimation?.destroy();
+  }
+}
diff --git a/src/features/cseMachine/animationComponents/AssignmentAnimation.tsx b/src/features/cseMachine/animationComponents/AssignmentAnimation.tsx
new file mode 100644
index 0000000000..a8254d1dec
--- /dev/null
+++ b/src/features/cseMachine/animationComponents/AssignmentAnimation.tsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import { Group } from 'react-konva';
+
+import { Binding } from '../components/Binding';
+import { ControlItemComponent } from '../components/ControlItemComponent';
+import { Frame } from '../components/Frame';
+import { StashItemComponent } from '../components/StashItemComponent';
+import { defaultOptions, Text } from '../components/Text';
+import { PrimitiveValue } from '../components/values/PrimitiveValue';
+import { Value } from '../components/values/Value';
+import { ControlStashConfig } from '../CseMachineControlStashConfig';
+import { defaultActiveColor, defaultStrokeColor, getTextWidth } from '../CseMachineUtils';
+import { Animatable } from './base/Animatable';
+import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
+import { AnimatedTextbox } from './base/AnimatedTextbox';
+import { AnimatedTextComponent } from './base/AnimationComponents';
+import { getNodePosition } from './base/AnimationUtils';
+
+/** Animation for a variable assignment */
+export class AssignmentAnimation extends Animatable {
+  private asgnItemAnimation: AnimatedTextbox;
+  private stashItemAnimation: AnimatedTextbox;
+  private bindingAnimation?: AnimatedTextComponent;
+  private arrowAnimation?: AnimatedGenericArrow<Text, Value>;
+
+  private stashItemIsFirst: boolean;
+
+  constructor(
+    private asgnItem: ControlItemComponent,
+    private stashItem: StashItemComponent,
+    private frame: Frame,
+    private binding: Binding
+  ) {
+    super();
+    this.stashItemIsFirst = stashItem.index === 0;
+    this.asgnItemAnimation = new AnimatedTextbox(asgnItem.text, getNodePosition(asgnItem), {
+      rectProps: { stroke: defaultActiveColor() }
+    });
+    this.stashItemAnimation = new AnimatedTextbox(stashItem.text, getNodePosition(stashItem));
+    if (this.binding.value instanceof PrimitiveValue && this.binding.value.text instanceof Text) {
+      this.bindingAnimation = new AnimatedTextComponent({
+        ...defaultOptions,
+        ...getNodePosition(this.binding.value.text),
+        text: this.binding.value.text.partialStr,
+        x: this.binding.value.text.x() - 16,
+        opacity: 0
+      });
+    }
+  }
+
+  draw(): React.ReactNode {
+    // Arrow only gets updated when drawn, so animated arrow is initialised here instead
+    if (this.binding.arrow) {
+      this.arrowAnimation = new AnimatedGenericArrow(this.binding.arrow, { x: -16, opacity: 0 });
+    }
+    return (
+      <Group key={Animatable.key--} ref={this.ref}>
+        {this.asgnItemAnimation.draw()}
+        {this.stashItemAnimation.draw()}
+        {this.bindingAnimation?.draw()}
+        {this.arrowAnimation?.draw()}
+      </Group>
+    );
+  }
+
+  async animate() {
+    const minAsgnItemWidth =
+      getTextWidth(this.asgnItem.text) + ControlStashConfig.ControlItemTextPadding * 2;
+    // hide value of binding
+    if (this.bindingAnimation) this.binding.value.ref.current?.hide();
+    // hide arrow
+    this.binding.arrow?.ref.current?.hide();
+    // move asgn instruction next to stash item, while also decreasing its width
+    await Promise.all([
+      this.asgnItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.asgnItemAnimation.animateTo({
+        x: this.stashItem.x() - (this.stashItemIsFirst ? minAsgnItemWidth : 0),
+        y: this.stashItem.y() + (this.stashItemIsFirst ? 0 : this.stashItem.height()),
+        width: minAsgnItemWidth
+      })
+    ]);
+    // move both asgn instruction and stash item down to the frame the binding is in
+    await Promise.all([
+      this.asgnItemAnimation.animateTo(
+        {
+          x: this.frame.x() - this.asgnItemAnimation.width() - this.stashItemAnimation.width(),
+          y: this.bindingAnimation
+            ? this.binding.y() + this.binding.height() / 2 - this.asgnItemAnimation.height() / 2
+            : this.binding.y()
+        },
+        { duration: 1.2 }
+      ),
+      this.stashItemAnimation.animateTo(
+        {
+          x: this.frame.x() - this.stashItem.width(),
+          y: this.bindingAnimation
+            ? this.binding.y() + this.binding.height() / 2 - this.asgnItemAnimation.height() / 2
+            : this.binding.y()
+        },
+        { duration: 1.2 }
+      )
+    ]);
+    // move both asgn instruction and stash item right, fade in the binding value and binding arrow
+    await Promise.all([
+      this.asgnItemAnimation.animateTo({
+        x: this.binding.x() - this.asgnItemAnimation.width(),
+        opacity: 0
+      }),
+      this.stashItemAnimation.animateTo({
+        x: this.binding.x(),
+        opacity: 0
+      }),
+      this.bindingAnimation?.animateTo(
+        { x: (this.binding.value as PrimitiveValue).text.x(), opacity: 1 },
+        { duration: 0.5, delay: 0.5 }
+      ),
+      this.arrowAnimation?.animateTo({ x: 0, opacity: 1 }, { duration: 0.5, delay: 0.5 })
+    ]);
+    this.destroy();
+  }
+
+  destroy() {
+    this.ref.current?.hide();
+    this.binding.value.ref.current?.show();
+    this.binding.arrow?.ref.current?.show();
+    this.asgnItemAnimation.destroy();
+    this.stashItemAnimation.destroy();
+    this.bindingAnimation?.destroy();
+    this.arrowAnimation?.destroy();
+  }
+}
diff --git a/src/features/cseMachine/animationComponents/BinaryOperationAnimation.tsx b/src/features/cseMachine/animationComponents/BinaryOperationAnimation.tsx
index 5b015a5738..949ddf58e3 100644
--- a/src/features/cseMachine/animationComponents/BinaryOperationAnimation.tsx
+++ b/src/features/cseMachine/animationComponents/BinaryOperationAnimation.tsx
@@ -1,56 +1,54 @@
-import { NodeConfig } from 'konva/lib/Node';
 import React from 'react';
 import { Group } from 'react-konva';
 
 import { ControlItemComponent } from '../components/ControlItemComponent';
 import { StashItemComponent } from '../components/StashItemComponent';
-import { Animatable, AnimatedTextboxComponent } from './AnimationComponents';
-import { getNodePositionFromItem } from './AnimationUtils';
+import { ControlStashConfig } from '../CseMachineControlStashConfig';
+import {
+  defaultActiveColor,
+  defaultDangerColor,
+  defaultStrokeColor,
+  getTextWidth,
+  isStashItemInDanger
+} from '../CseMachineUtils';
+import { Animatable } from './base/Animatable';
+import { AnimatedTextbox } from './base/AnimatedTextbox';
+import { getNodePosition } from './base/AnimationUtils';
 
+/** Animation for a binary operation, e.g. `+`, `===` */
 export class BinaryOperationAnimation extends Animatable {
-  private binaryOperatorAnimation: AnimatedTextboxComponent;
-  private leftOperandAnimation: AnimatedTextboxComponent;
-  private rightOperandAnimation: AnimatedTextboxComponent;
-  private resultAnimation: AnimatedTextboxComponent;
-  private resultPosition: NodeConfig;
+  private binaryOperatorAnimation: AnimatedTextbox;
+  private leftOperandAnimation: AnimatedTextbox;
+  private rightOperandAnimation: AnimatedTextbox;
+  private resultAnimation: AnimatedTextbox;
 
   constructor(
-    binaryOperator: ControlItemComponent,
+    private binaryOperator: ControlItemComponent,
     leftOperand: StashItemComponent,
-    rightOperand: StashItemComponent,
+    private rightOperand: StashItemComponent,
     private result: StashItemComponent
   ) {
     super();
-    const binOpPosition = getNodePositionFromItem(binaryOperator);
-    const leftOpPosition = getNodePositionFromItem(leftOperand);
-    const rightOpPosition = getNodePositionFromItem(rightOperand);
-    const resultPosition = getNodePositionFromItem(result);
-    this.resultPosition = resultPosition;
-    this.binaryOperatorAnimation = new AnimatedTextboxComponent(
-      binOpPosition,
-      rightOpPosition,
-      binaryOperator.text
+    this.binaryOperatorAnimation = new AnimatedTextbox(
+      binaryOperator.text,
+      getNodePosition(binaryOperator),
+      { rectProps: { stroke: defaultActiveColor() } }
     );
-    this.rightOperandAnimation = new AnimatedTextboxComponent(
-      rightOpPosition,
-      { ...rightOpPosition, x: rightOpPosition.x + rightOpPosition.width },
-      rightOperand.text
+    this.rightOperandAnimation = new AnimatedTextbox(
+      rightOperand.text,
+      getNodePosition(rightOperand),
+      { rectProps: { stroke: defaultDangerColor() } }
     );
-    this.leftOperandAnimation = new AnimatedTextboxComponent(
-      leftOpPosition,
-      { opacity: 0 },
-      leftOperand.text
-    );
-    this.resultAnimation = new AnimatedTextboxComponent(
-      {
-        ...resultPosition,
-        x: rightOpPosition.x,
-        opacity: 0
-      },
-      { ...resultPosition, opacity: 1 },
-      result.text,
-      { delayMultiplier: 0.5 }
+    this.leftOperandAnimation = new AnimatedTextbox(
+      leftOperand.text,
+      getNodePosition(leftOperand),
+      { rectProps: { stroke: defaultDangerColor() } }
     );
+    this.resultAnimation = new AnimatedTextbox(result.text, {
+      ...getNodePosition(result),
+      x: rightOperand.x(),
+      opacity: 0
+    });
   }
 
   draw(): React.ReactNode {
@@ -65,25 +63,45 @@ export class BinaryOperationAnimation extends Animatable {
   }
 
   async animate() {
-    this.result.ref.current.hide();
+    this.result.ref.current?.hide();
+    const rightOpPosition = getNodePosition(this.rightOperand);
+    const resultPosition = getNodePosition(this.result);
+    const minBinOpWidth =
+      getTextWidth(this.binaryOperator.text) + ControlStashConfig.ControlItemTextPadding * 2;
+    const fadeDuration = 3 / 4;
+    const fadeInDelay = 1 / 4;
+    // Shifts the right operand to the right and move the operator in between the operands
     await Promise.all([
-      this.binaryOperatorAnimation.animate(),
-      this.rightOperandAnimation.animate()
+      this.binaryOperatorAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.binaryOperatorAnimation.animateTo({ ...rightOpPosition, width: minBinOpWidth }),
+      this.leftOperandAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.rightOperandAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.rightOperandAnimation.animateTo({
+        ...rightOpPosition,
+        x: rightOpPosition.x + minBinOpWidth
+      })
     ]);
-    const to = { ...this.resultPosition, opacity: 0 };
-    this.binaryOperatorAnimation.setDestination(to);
-    this.rightOperandAnimation.setDestination(to);
+    // Merges the operators and operands together to form the result
     await Promise.all([
-      this.binaryOperatorAnimation.animate(),
-      this.leftOperandAnimation.animate(),
-      this.rightOperandAnimation.animate(),
-      this.resultAnimation.animate()
+      this.binaryOperatorAnimation.animateTo(resultPosition),
+      this.binaryOperatorAnimation.animateTo({ opacity: 0 }, { duration: fadeDuration }),
+      this.leftOperandAnimation.animateTo({ opacity: 0 }, { duration: fadeDuration }),
+      this.rightOperandAnimation.animateTo(resultPosition),
+      this.rightOperandAnimation.animateTo({ opacity: 0 }, { duration: fadeDuration }),
+      this.resultAnimation.animateTo(resultPosition),
+      this.resultAnimation.animateTo(
+        { opacity: 1 },
+        { duration: fadeDuration, delay: fadeInDelay }
+      ),
+      isStashItemInDanger(this.result.index) &&
+        this.resultAnimation.animateRectTo({ stroke: defaultDangerColor() })
     ]);
-    this.ref.current?.hide();
-    this.result.ref.current?.show();
+    this.destroy();
   }
 
   destroy() {
+    this.ref.current?.hide();
+    this.result.ref.current?.show();
     this.binaryOperatorAnimation.destroy();
     this.leftOperandAnimation.destroy();
     this.rightOperandAnimation.destroy();
diff --git a/src/features/cseMachine/animationComponents/BlockAnimation.tsx b/src/features/cseMachine/animationComponents/BlockAnimation.tsx
deleted file mode 100644
index c392c902d4..0000000000
--- a/src/features/cseMachine/animationComponents/BlockAnimation.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import { Group } from 'react-konva';
-
-import { ControlItemComponent } from '../components/ControlItemComponent';
-import { Animatable, AnimatedTextboxComponent } from './AnimationComponents';
-import { getNodePositionFromItem } from './AnimationUtils';
-
-export class BlockAnimation extends Animatable {
-  initialItemAnimation: AnimatedTextboxComponent;
-  targetItemAnimations: AnimatedTextboxComponent[];
-
-  constructor(
-    private initialItem: ControlItemComponent,
-    private targetItems: ControlItemComponent[]
-  ) {
-    super();
-    const initialPosition = getNodePositionFromItem(this.initialItem);
-    targetItems.sort((a, b) => a.y() - b.y());
-    let totalHeight = 0;
-    this.targetItemAnimations = targetItems.map((item, index) => {
-      const destination = getNodePositionFromItem(item);
-      totalHeight += destination.height;
-      return new AnimatedTextboxComponent(
-        {
-          ...initialPosition,
-          y: initialPosition.y + (index / targetItems.length) * initialPosition.height,
-          height: destination.height,
-          opacity: 0
-        },
-        { ...destination, opacity: 1 },
-        item.text
-      );
-    });
-    this.initialItemAnimation = new AnimatedTextboxComponent(
-      initialPosition,
-      { height: totalHeight, opacity: 0 },
-      initialItem.text
-    );
-  }
-
-  draw(): React.ReactNode {
-    return (
-      <Group key={Animatable.key--} ref={this.ref}>
-        {this.initialItemAnimation.draw()}
-        {this.targetItemAnimations.map(c => c.draw())}
-      </Group>
-    );
-  }
-
-  async animate() {
-    this.targetItems.forEach(c => c.ref.current.hide());
-    await Promise.all([
-      this.initialItemAnimation.animate(),
-      ...this.targetItemAnimations.map(a => a.animate())
-    ]);
-    this.targetItems.forEach(c => c.ref.current?.show());
-  }
-
-  destroy() {
-    this.initialItemAnimation.destroy();
-    this.targetItemAnimations.forEach(a => a.destroy());
-  }
-}
diff --git a/src/features/cseMachine/animationComponents/BranchAnimation.tsx b/src/features/cseMachine/animationComponents/BranchAnimation.tsx
new file mode 100644
index 0000000000..092651359d
--- /dev/null
+++ b/src/features/cseMachine/animationComponents/BranchAnimation.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Group } from 'react-konva';
+
+import { ControlItemComponent } from '../components/ControlItemComponent';
+import { StashItemComponent } from '../components/StashItemComponent';
+import { defaultDangerColor, defaultStrokeColor } from '../CseMachineUtils';
+import { Animatable } from './base/Animatable';
+import { AnimatedTextbox } from './base/AnimatedTextbox';
+import { getNodePosition } from './base/AnimationUtils';
+import { ControlExpansionAnimation } from './ControlExpansionAnimation';
+
+/**
+ * Animation for the `branch` instruction.
+ */
+export class BranchAnimation extends Animatable {
+  private booleanItemAnimation: AnimatedTextbox;
+  private controlExpandAnimation: ControlExpansionAnimation;
+
+  constructor(
+    private branchItem: ControlItemComponent,
+    booleanItem: StashItemComponent,
+    private resultItems: ControlItemComponent[]
+  ) {
+    super();
+    this.booleanItemAnimation = new AnimatedTextbox(
+      booleanItem.text,
+      getNodePosition(booleanItem),
+      { rectProps: { stroke: defaultDangerColor() } }
+    );
+    // Note that branch item is drawn in here as well
+    this.controlExpandAnimation = new ControlExpansionAnimation(branchItem, resultItems);
+  }
+
+  draw(): React.ReactNode {
+    return (
+      <Group ref={this.ref} key={Animatable.key--}>
+        {this.controlExpandAnimation.draw()}
+        {this.booleanItemAnimation.draw()}
+      </Group>
+    );
+  }
+
+  async animate() {
+    this.resultItems.forEach(i => i.ref.current?.hide());
+    // Move boolean next to branch instruction
+    await Promise.all([
+      this.booleanItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.booleanItemAnimation.animateTo({
+        x: this.branchItem.x() + this.branchItem.width(),
+        y: this.branchItem.y()
+      })
+    ]);
+    // Merge boolean and branch instruction together
+    await Promise.all([
+      this.booleanItemAnimation.animateTo({ x: this.branchItem.x() }),
+      this.booleanItemAnimation.animateTo({ opacity: 0 }, { duration: 3 / 4 }),
+      // Play the control expansion animation for the results of the branch instruction
+      this.controlExpandAnimation.animate()
+    ]);
+    this.destroy();
+  }
+
+  destroy() {
+    this.ref.current?.hide();
+    this.booleanItemAnimation.destroy();
+    this.controlExpandAnimation.destroy();
+  }
+}
diff --git a/src/features/cseMachine/animationComponents/ControlExpansionAnimation.tsx b/src/features/cseMachine/animationComponents/ControlExpansionAnimation.tsx
new file mode 100644
index 0000000000..6a61ac4e4e
--- /dev/null
+++ b/src/features/cseMachine/animationComponents/ControlExpansionAnimation.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { Group } from 'react-konva';
+
+import { ControlItemComponent } from '../components/ControlItemComponent';
+import { defaultActiveColor, defaultStrokeColor } from '../CseMachineUtils';
+import { Animatable, AnimationConfig } from './base/Animatable';
+import { AnimatedTextbox } from './base/AnimatedTextbox';
+import { getNodePosition } from './base/AnimationUtils';
+
+/**
+ * Animation used for any change that only affects the control.
+ * It fades out and moves the outgoing items alongside the incoming items which fade in.
+ *
+ * Used in many different cases like blocks or expressions which expand to more control items.
+ */
+export class ControlExpansionAnimation extends Animatable {
+  private initialItemAnimation: AnimatedTextbox;
+  private targetItemAnimations: AnimatedTextbox[];
+
+  constructor(
+    private initialItem: ControlItemComponent,
+    private targetItems: ControlItemComponent[]
+  ) {
+    super();
+    this.targetItems = [...targetItems];
+    this.targetItems.sort((a, b) => a.y() - b.y());
+    const initialPosition = getNodePosition(this.initialItem);
+    this.initialItemAnimation = new AnimatedTextbox(initialItem.text, initialPosition, {
+      rectProps: { stroke: defaultActiveColor() }
+    });
+    this.targetItemAnimations = this.targetItems.map((item, i) => {
+      return new AnimatedTextbox(item.text, {
+        ...initialPosition,
+        y: initialPosition.y + (i / this.targetItems.length) * initialPosition.height,
+        height: item.height(),
+        opacity: 0
+      });
+    });
+  }
+
+  draw(): React.ReactNode {
+    return (
+      <Group key={Animatable.key--} ref={this.ref}>
+        {this.initialItemAnimation.draw()}
+        {this.targetItemAnimations.map(c => c.draw())}
+      </Group>
+    );
+  }
+
+  async animate(animationConfig?: AnimationConfig) {
+    this.targetItems.forEach(c => c.ref.current?.hide());
+    const totalHeight = this.targetItems.reduce((height, item) => height + item.height(), 0);
+    const textY = this.initialItem.y() + (totalHeight - this.initialItem.height()) / 2;
+    const fadeDuration = ((animationConfig?.duration ?? 1) * 3) / 4;
+    const fadeInDelay = (animationConfig?.delay ?? 0) + (animationConfig?.duration ?? 1) / 4;
+    await Promise.all([
+      // Fade out the previous item while also changing its height for a more fluid animation
+      this.initialItemAnimation.animateRectTo(
+        { height: totalHeight, stroke: defaultStrokeColor() },
+        animationConfig
+      ),
+      this.initialItemAnimation.animateTextTo({ y: textY }, animationConfig),
+      this.initialItemAnimation.animateTo(
+        { opacity: 0 },
+        { ...animationConfig, duration: fadeDuration }
+      ),
+      // Fade in the new items while also moving them from the old item's position
+      ...this.targetItemAnimations.flatMap((a, i) => [
+        a.animateTo({ ...getNodePosition(this.targetItems[i]) }, animationConfig),
+        a.animateTo(
+          { opacity: 1 },
+          { ...animationConfig, duration: fadeDuration, delay: fadeInDelay }
+        )
+      ]),
+      // Also animate the last item's rect border color to the blue border
+      // which the last control item always have
+      this.targetItemAnimations
+        .at(-1)
+        ?.animateRectTo({ stroke: defaultActiveColor() }, animationConfig)
+    ]);
+    this.destroy();
+  }
+
+  destroy() {
+    this.ref.current?.hide();
+    this.targetItems.forEach(c => c.ref.current?.show());
+    this.initialItemAnimation.destroy();
+    this.targetItemAnimations.forEach(a => a.destroy());
+  }
+}
diff --git a/src/features/cseMachine/animationComponents/ControlToStashAnimation.tsx b/src/features/cseMachine/animationComponents/ControlToStashAnimation.tsx
new file mode 100644
index 0000000000..6cbd749966
--- /dev/null
+++ b/src/features/cseMachine/animationComponents/ControlToStashAnimation.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { Group } from 'react-konva';
+
+import { ControlItemComponent } from '../components/ControlItemComponent';
+import { StashItemComponent } from '../components/StashItemComponent';
+import { Visible } from '../components/Visible';
+import { ControlStashConfig } from '../CseMachineControlStashConfig';
+import {
+  defaultActiveColor,
+  defaultDangerColor,
+  defaultStrokeColor,
+  isStashItemInDanger
+} from '../CseMachineUtils';
+import { Animatable } from './base/Animatable';
+import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
+import { AnimatedRectComponent, AnimatedTextComponent } from './base/AnimationComponents';
+import { getNodePosition } from './base/AnimationUtils';
+
+/**
+ * Animation for any single item movement from control to stash.
+ * Used for literals and arrow function expressions
+ */
+export class ControlToStashAnimation extends Animatable {
+  private borderRectAnimation: AnimatedRectComponent;
+  private controlTextAnimation: AnimatedTextComponent;
+  private stackTextAnimation?: AnimatedTextComponent;
+  private arrowAnimation?: AnimatedGenericArrow<StashItemComponent, Visible>;
+  private textChanged: boolean;
+
+  constructor(
+    controlItem: ControlItemComponent,
+    private stashItem: StashItemComponent
+  ) {
+    super();
+    const controlPosition = getNodePosition(controlItem);
+    this.borderRectAnimation = new AnimatedRectComponent({
+      ...controlPosition,
+      stroke: defaultActiveColor()
+    });
+    this.controlTextAnimation = new AnimatedTextComponent({
+      ...controlPosition,
+      text: controlItem.text,
+      padding: ControlStashConfig.ControlItemTextPadding
+    });
+    this.textChanged = controlItem.text !== stashItem.text;
+    if (this.textChanged) {
+      this.stackTextAnimation = new AnimatedTextComponent({
+        ...controlPosition,
+        text: stashItem.text,
+        padding: ControlStashConfig.StashItemTextPadding,
+        opacity: 0
+      });
+    }
+    if (this.stashItem.arrow) {
+      this.arrowAnimation = new AnimatedGenericArrow(this.stashItem.arrow, { opacity: 0 });
+    }
+  }
+
+  draw(): React.ReactNode {
+    return (
+      <Group ref={this.ref} key={Animatable.key--}>
+        {this.borderRectAnimation.draw()}
+        {this.controlTextAnimation.draw()}
+        {this.stackTextAnimation?.draw()}
+        {this.arrowAnimation?.draw()}
+      </Group>
+    );
+  }
+
+  async animate() {
+    this.stashItem.ref.current?.hide();
+    this.stashItem.arrow?.ref.current.hide();
+    const stashPosition = getNodePosition(this.stashItem);
+    await Promise.all([
+      this.borderRectAnimation.animateTo({
+        ...stashPosition,
+        stroke: isStashItemInDanger(this.stashItem.index)
+          ? defaultDangerColor()
+          : defaultStrokeColor()
+      }),
+      this.controlTextAnimation.animateTo(stashPosition),
+      // If the text is different, also fade out the old text and fade in the new text
+      ...(this.textChanged
+        ? [
+            this.controlTextAnimation.animateTo({ opacity: 0 }, { duration: 0.5, delay: 0.2 }),
+            this.stackTextAnimation!.animateTo(stashPosition),
+            this.stackTextAnimation!.animateTo({ opacity: 1 }, { duration: 0.5, delay: 0.5 })
+          ]
+        : []),
+      this.arrowAnimation?.animateTo({ opacity: 1 }, { delay: 1 })
+    ]);
+    this.destroy();
+  }
+
+  destroy() {
+    this.ref.current?.hide();
+    this.stashItem.ref.current?.show();
+    this.stashItem.arrow?.ref.current?.show();
+    this.borderRectAnimation.destroy();
+    this.controlTextAnimation.destroy();
+    this.stackTextAnimation?.destroy();
+    this.arrowAnimation?.destroy();
+  }
+}
diff --git a/src/features/cseMachine/animationComponents/EnvironmentAnimation.tsx b/src/features/cseMachine/animationComponents/EnvironmentAnimation.tsx
new file mode 100644
index 0000000000..13c7584de6
--- /dev/null
+++ b/src/features/cseMachine/animationComponents/EnvironmentAnimation.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { Group } from 'react-konva';
+
+import { Frame } from '../components/Frame';
+import { Config } from '../CseMachineConfig';
+import { defaultActiveColor } from '../CseMachineUtils';
+import { Animatable } from './base/Animatable';
+import { AnimatedRectComponent } from './base/AnimationComponents';
+import { getNodePosition } from './base/AnimationUtils';
+
+/**
+ * Animation for the `env` instruction.
+ * Moves the frame border from previous environment frame to new one.
+ */
+export class EnvironmentAnimation extends Animatable {
+  private frameAnimation: AnimatedRectComponent;
+  private tempRect: AnimatedRectComponent; // this one just hides the blue temporarily
+
+  constructor(
+    prevFrame: Frame,
+    private currFrame: Frame
+  ) {
+    super();
+    const currFramePosition = getNodePosition(currFrame);
+    this.tempRect = new AnimatedRectComponent({
+      ...currFramePosition,
+      cornerRadius: Config.FrameCornerRadius
+    });
+    const prevFramePosition = getNodePosition(prevFrame);
+    this.frameAnimation = new AnimatedRectComponent({
+      ...prevFramePosition,
+      cornerRadius: Config.FrameCornerRadius,
+      stroke: defaultActiveColor()
+    });
+  }
+
+  draw(): React.ReactNode {
+    return (
+      <Group key={Animatable.key--} ref={this.ref}>
+        {this.tempRect.draw()}
+        {this.frameAnimation.draw()}
+      </Group>
+    );
+  }
+
+  async animate() {
+    const oldPosition = getNodePosition(this.frameAnimation);
+    const strokeWidth: number = this.currFrame.ref.current?.strokeWidth?.() ?? 2;
+    const strokeIncrease = 4;
+    // increase frame border width
+    await this.frameAnimation.animateTo({
+      x: oldPosition.x - strokeIncrease / 2,
+      y: oldPosition.y - strokeIncrease / 2,
+      height: oldPosition.height + strokeIncrease,
+      width: oldPosition.width + strokeIncrease,
+      strokeWidth: strokeWidth + strokeIncrease
+    });
+    // move frame border to correct position
+    const newPosition = getNodePosition(this.currFrame);
+    await this.frameAnimation.animateTo(
+      {
+        x: newPosition.x - strokeIncrease / 2,
+        y: newPosition.y - strokeIncrease / 2,
+        height: newPosition.height + strokeIncrease,
+        width: newPosition.width + strokeIncrease
+      },
+      { duration: 1.2 }
+    );
+    this.tempRect.ref.current?.hide();
+    await this.frameAnimation.animateTo({ ...newPosition, strokeWidth }, { duration: 1 });
+    this.destroy();
+  }
+
+  destroy() {
+    this.ref.current?.hide();
+    this.frameAnimation.destroy();
+    this.tempRect.destroy();
+  }
+}
diff --git a/src/features/cseMachine/animationComponents/FrameCreationAnimation.tsx b/src/features/cseMachine/animationComponents/FrameCreationAnimation.tsx
new file mode 100644
index 0000000000..cbc7db54c7
--- /dev/null
+++ b/src/features/cseMachine/animationComponents/FrameCreationAnimation.tsx
@@ -0,0 +1,202 @@
+import React from 'react';
+import { Group } from 'react-konva';
+
+import { GenericArrow } from '../components/arrows/GenericArrow';
+import { ControlItemComponent } from '../components/ControlItemComponent';
+import { Frame } from '../components/Frame';
+import { StashItemComponent } from '../components/StashItemComponent';
+import { Text } from '../components/Text';
+import { ArrayValue } from '../components/values/ArrayValue';
+import { PrimitiveValue } from '../components/values/PrimitiveValue';
+import { Value } from '../components/values/Value';
+import { CseAnimation } from '../CseMachineAnimation';
+import { Config } from '../CseMachineConfig';
+import { ControlStashConfig } from '../CseMachineControlStashConfig';
+import { defaultActiveColor, defaultStrokeColor, isEnvEqual } from '../CseMachineUtils';
+import { Animatable, AnimationConfig } from './base/Animatable';
+import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
+import { AnimatedRectComponent, AnimatedTextComponent } from './base/AnimationComponents';
+import { getNodeDimensions, getNodeLocation, getNodePosition } from './base/AnimationUtils';
+
+/**
+ * Animation for the creation of a new frame. "Throws" out the frame from the origin, either
+ * a ControlItemComponent when evaluating a block or a StashItemComponent when a function is
+ * called.
+ *
+ * Used when a block containing bindings is evaluated, or as part of a function application
+ * animation when a non-nullary function is called.
+ */
+export class FrameCreationAnimation extends Animatable {
+  private controlTextAnimation: AnimatedTextComponent;
+  private borderAnimation: AnimatedRectComponent;
+  private frameArrowAnimation?: AnimatedGenericArrow<Frame, Frame>;
+  private frameNameAnimation: AnimatedTextComponent;
+
+  // Bindings
+  private frameKeyAnimations: AnimatedTextComponent[];
+  private frameValues: PrimitiveValue[];
+  private frameValueAnimations: AnimatedTextComponent[];
+  private frameArrows: GenericArrow<Text, Value>[];
+  private frameArrowAnimations: AnimatedGenericArrow<Text, Value>[];
+
+  // The array value that is in the frame created from a variadic closure.
+  // This is special since it is the only object that is created together with the frame.
+  private variadicArray?: ArrayValue;
+
+  constructor(
+    origin: ControlItemComponent | StashItemComponent,
+    private frame: Frame
+  ) {
+    super();
+    const xDiff = frame.x() - origin.x();
+    const yDiff = frame.y() - origin.y();
+    this.controlTextAnimation = new AnimatedTextComponent({
+      ...getNodePosition(origin),
+      text: origin.text,
+      padding:
+        origin instanceof ControlItemComponent
+          ? ControlStashConfig.ControlItemTextPadding
+          : ControlStashConfig.StashItemTextPadding,
+      opacity: origin instanceof ControlItemComponent ? 1 : 0
+    });
+    this.borderAnimation = new AnimatedRectComponent({
+      ...getNodePosition(origin),
+      stroke: origin instanceof ControlItemComponent ? defaultActiveColor() : defaultStrokeColor(),
+      opacity: origin instanceof ControlItemComponent ? 1 : 0
+    });
+    if (frame.arrow) {
+      this.frameArrowAnimation = new AnimatedGenericArrow(frame.arrow, { opacity: 0 });
+    }
+    this.frameNameAnimation = new AnimatedTextComponent({
+      text: frame.name.partialStr,
+      ...getNodeDimensions(frame.name),
+      x: frame.name.x() - xDiff,
+      y: frame.name.y() - yDiff,
+      opacity: 0
+    });
+    this.frameKeyAnimations = frame.bindings.map(binding => {
+      return new AnimatedTextComponent({
+        text: binding.keyString,
+        ...getNodeDimensions(binding.key),
+        x: binding.key.x() - xDiff,
+        y: binding.key.y() - yDiff,
+        opacity: 0
+      });
+    });
+    this.frameValues = frame.bindings.flatMap(binding =>
+      binding.value instanceof PrimitiveValue ? binding.value : []
+    );
+    this.frameValueAnimations = this.frameValues.map(value => {
+      return new AnimatedTextComponent({
+        text: (value.text as Text).partialStr,
+        ...getNodeDimensions(value),
+        x: value.x() - xDiff,
+        y: value.y() - yDiff,
+        opacity: 0
+      });
+    });
+    this.frameArrows = frame.bindings.flatMap(binding => {
+      if (
+        binding.value instanceof ArrayValue &&
+        isEnvEqual(binding.value.data.environment, this.frame.environment)
+      ) {
+        this.variadicArray = binding.value;
+      }
+      return binding.arrow ?? [];
+    });
+    this.frameArrowAnimations = this.frameArrows.map(arrow => {
+      return new AnimatedGenericArrow(arrow, {
+        x: -xDiff,
+        y: -yDiff,
+        opacity: 0
+      });
+    });
+  }
+
+  draw(): React.ReactNode {
+    return (
+      <Group key={Animatable.key--} ref={this.ref}>
+        {this.controlTextAnimation.draw()}
+        {this.borderAnimation.draw()}
+        {this.frameArrowAnimation?.draw()}
+        {this.frameNameAnimation.draw()}
+        {this.frameKeyAnimations.map(a => a.draw())}
+        {this.frameValueAnimations.map(a => a.draw())}
+        {this.frameArrowAnimations.map(a => a.draw())}
+      </Group>
+    );
+  }
+
+  async animate(animationConfig?: AnimationConfig) {
+    this.frame.ref.current?.hide();
+    const duration = animationConfig?.duration ?? 1.2;
+    const translateConfig = { ...animationConfig, duration };
+    const fadeOutConfig = { ...animationConfig, duration: (duration * 3) / 4 };
+    const fadeInConfig = {
+      duration: (duration * 3) / 4,
+      delay: duration / 4 + (animationConfig?.delay ?? 0),
+      easing: animationConfig?.easing
+    };
+    const framePosition = getNodePosition(this.frame);
+    // Fade in the arrow last. Declared here first so it runs alongside the rest of the animations,
+    // but needed to be awaited later on in this function
+    const frameArrowAnimate = this.frameArrowAnimation?.animateTo(
+      { opacity: 1 },
+      { delay: duration + (animationConfig?.delay ?? 0) }
+    );
+    await Promise.all([
+      // Fade out the control text during translation
+      this.controlTextAnimation.animateTo({ opacity: 0 }, fadeOutConfig),
+      // Move everything towards the frame position
+      this.controlTextAnimation.animateTo(getNodeLocation(this.frame), translateConfig),
+      this.borderAnimation.animateTo(
+        {
+          ...framePosition,
+          stroke: defaultActiveColor(),
+          opacity: 1,
+          cornerRadius: Config.FrameCornerRadius
+        },
+        translateConfig
+      ),
+      this.frameNameAnimation.animateTo(getNodePosition(this.frame.name), translateConfig),
+      // Also fade frame bindings in during translation
+      ...this.frameKeyAnimations.flatMap((a, i) => [
+        a.animateTo(getNodeLocation(this.frame.bindings[i].key), translateConfig),
+        a.animateTo({ opacity: 1 }, fadeInConfig)
+      ]),
+      ...this.frameValueAnimations.flatMap((a, i) => [
+        a.animateTo(getNodeLocation(this.frameValues[i]), translateConfig),
+        a.animateTo({ opacity: 1 }, fadeInConfig)
+      ]),
+      ...this.frameArrowAnimations.flatMap(a => [
+        a.animateTo({ x: 0, y: 0 }, translateConfig),
+        a.animateTo({ opacity: 1 }, fadeInConfig)
+      ]),
+      this.frameNameAnimation.animateTo({ opacity: 1 }, fadeInConfig)
+    ]);
+    // if variadic array exists, make it fade in together with the frame arrow
+    this.variadicArray?.ref.current?.opacity(0);
+    this.frame.arrow?.ref.current?.hide();
+    this.frame.ref.current?.show();
+    this.variadicArray?.ref.current?.to({
+      opacity: 1,
+      duration: CseAnimation.defaultDuration / 1000
+    });
+    // Wait for the frame arrow animation to finish before returning
+    await frameArrowAnimate;
+    this.destroy();
+  }
+
+  destroy() {
+    this.ref.current?.hide();
+    this.frame.ref.current?.show();
+    this.frame.arrow?.ref.current?.show();
+    this.controlTextAnimation.destroy();
+    this.borderAnimation.destroy();
+    this.frameArrowAnimation?.destroy();
+    this.frameNameAnimation.destroy();
+    this.frameKeyAnimations.forEach(a => a.destroy());
+    this.frameValueAnimations.forEach(a => a.destroy());
+    this.frameArrowAnimations.forEach(a => a.destroy());
+  }
+}
diff --git a/src/features/cseMachine/animationComponents/FunctionApplicationAnimation.tsx b/src/features/cseMachine/animationComponents/FunctionApplicationAnimation.tsx
new file mode 100644
index 0000000000..cea5bbf6cf
--- /dev/null
+++ b/src/features/cseMachine/animationComponents/FunctionApplicationAnimation.tsx
@@ -0,0 +1,148 @@
+import React from 'react';
+import { Group } from 'react-konva';
+
+import { ControlItemComponent } from '../components/ControlItemComponent';
+import { Frame } from '../components/Frame';
+import { StashItemComponent } from '../components/StashItemComponent';
+import { Visible } from '../components/Visible';
+import { ControlStashConfig } from '../CseMachineControlStashConfig';
+import {
+  defaultActiveColor,
+  defaultDangerColor,
+  defaultStrokeColor,
+  getTextWidth
+} from '../CseMachineUtils';
+import { Animatable } from './base/Animatable';
+import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
+import { AnimatedTextbox } from './base/AnimatedTextbox';
+import { getNodeLocation, getNodePosition } from './base/AnimationUtils';
+import { FrameCreationAnimation } from './FrameCreationAnimation';
+
+/**
+ * Animation for function application. Visually moves the resultant items out of the stash
+ * into position somewhere in the control or environment.
+ *
+ * Used when a function is called, specifically the 'APPLICATION' instruction.
+ */
+export class FunctionApplicationAnimation extends Animatable {
+  private callInstrAnimation: AnimatedTextbox;
+  private stashItemAnimations: AnimatedTextbox[];
+  private stashArrowAnimations: AnimatedGenericArrow<StashItemComponent, Visible>[];
+  private newControlItemAnimations: AnimatedTextbox[];
+  private envArrowAnimation?: AnimatedGenericArrow<ControlItemComponent, Visible>;
+  private frameCreationAnimation?: FrameCreationAnimation;
+
+  private isFirstStashItem: boolean;
+
+  constructor(
+    private callInstrItem: ControlItemComponent,
+    private newControlItems: ControlItemComponent[],
+    private closureStashItem: StashItemComponent,
+    argStashItems: StashItemComponent[],
+    private functionFrame?: Frame
+  ) {
+    super();
+    const closureLocation = getNodeLocation(closureStashItem);
+    this.isFirstStashItem = closureStashItem.index === 0;
+    this.callInstrAnimation = new AnimatedTextbox(
+      callInstrItem.text,
+      getNodePosition(callInstrItem),
+      { rectProps: { stroke: defaultActiveColor() } }
+    );
+    this.stashItemAnimations = [
+      new AnimatedTextbox(closureStashItem.text, getNodePosition(closureStashItem), {
+        rectProps: { stroke: defaultDangerColor() }
+      }),
+      ...argStashItems.map(item => {
+        return new AnimatedTextbox(item.text, getNodePosition(item), {
+          rectProps: { stroke: defaultDangerColor() }
+        });
+      })
+    ];
+    this.stashArrowAnimations = [
+      new AnimatedGenericArrow(closureStashItem.arrow!),
+      ...argStashItems.flatMap(item => (item.arrow ? new AnimatedGenericArrow(item.arrow) : []))
+    ];
+    this.newControlItemAnimations = newControlItems.map(
+      i => new AnimatedTextbox(i.text, { ...closureLocation, opacity: 0 })
+    );
+    if (this.newControlItems[0].arrow) {
+      this.envArrowAnimation = new AnimatedGenericArrow(this.newControlItems[0].arrow, {
+        opacity: 0
+      });
+    }
+    if (functionFrame) {
+      this.frameCreationAnimation = new FrameCreationAnimation(closureStashItem, functionFrame);
+    }
+  }
+
+  draw(): React.ReactNode {
+    return (
+      <Group key={Animatable.key--} ref={this.ref}>
+        {this.callInstrAnimation.draw()}
+        {this.stashItemAnimations.map(a => a.draw())}
+        {this.stashArrowAnimations.map(a => a.draw())}
+        {this.newControlItemAnimations.map(a => a.draw())}
+        {this.envArrowAnimation?.draw()}
+        {this.frameCreationAnimation?.draw()}
+      </Group>
+    );
+  }
+
+  async animate() {
+    this.newControlItems.forEach(item => item.ref.current?.hide());
+    this.newControlItems[0].arrow?.ref.current?.hide();
+    // hide the function frame before the frame creation animation plays
+    this.functionFrame?.ref.current?.hide();
+
+    const minInstrWidth =
+      getTextWidth(this.callInstrItem.text) + ControlStashConfig.ControlItemTextPadding * 2;
+    // Move call instruction next to stash items
+    await Promise.all([
+      this.callInstrAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.callInstrAnimation.animateTo({
+        x: this.closureStashItem.x() - (this.isFirstStashItem ? minInstrWidth : 0),
+        y: this.closureStashItem.y() + (this.isFirstStashItem ? 0 : this.closureStashItem.height()),
+        width: minInstrWidth
+      }),
+      ...this.stashItemAnimations.map(a => a.animateRectTo({ stroke: defaultStrokeColor() }))
+    ]);
+    const targetLocation = {
+      x: this.functionFrame?.x() ?? this.newControlItems[0].x(),
+      y: this.functionFrame?.y() ?? this.newControlItems[0].y()
+    };
+    const config = { duration: 1.2 };
+    const fadeDuration = 9 / 8;
+    const fadeInDelay = 3 / 8;
+    // merge all items together while also creating the new frame and new control items
+    await Promise.all([
+      this.stashArrowAnimations.map(a => a.animateTo({ opacity: 0 }, { duration: 0.5 })),
+      this.callInstrAnimation.animateTo(targetLocation, config),
+      this.callInstrAnimation.animateTo({ opacity: 0 }, { ...config, duration: fadeDuration }),
+      ...this.stashItemAnimations.flatMap(a => [
+        a.animateTo(targetLocation, config),
+        a.animateTo({ opacity: 0 }, { ...config, duration: fadeDuration })
+      ]),
+      ...this.newControlItemAnimations.flatMap((a, i) => [
+        a.animateTo(getNodePosition(this.newControlItems[i]), config),
+        a.animateTo({ opacity: 1 }, { ...config, duration: fadeDuration, delay: fadeInDelay })
+      ]),
+      this.newControlItemAnimations.at(-1)!.animateRectTo({ stroke: defaultActiveColor() }, config),
+      this.frameCreationAnimation?.animate(config),
+      this.envArrowAnimation?.animateTo({ opacity: 1 }, { delay: config.duration })
+    ]);
+    this.destroy();
+  }
+
+  destroy() {
+    this.ref.current?.hide();
+    this.newControlItems.forEach(item => item.ref.current?.show());
+    this.newControlItems[0].arrow?.ref.current?.show();
+    this.functionFrame?.ref.current?.show();
+    this.callInstrAnimation.destroy();
+    this.stashItemAnimations.forEach(a => a.destroy());
+    this.stashArrowAnimations.forEach(a => a.destroy());
+    this.newControlItemAnimations.forEach(a => a.destroy());
+    this.frameCreationAnimation?.destroy();
+  }
+}
diff --git a/src/features/cseMachine/animationComponents/InstructionApplicationAnimation.tsx b/src/features/cseMachine/animationComponents/InstructionApplicationAnimation.tsx
new file mode 100644
index 0000000000..973d925ca5
--- /dev/null
+++ b/src/features/cseMachine/animationComponents/InstructionApplicationAnimation.tsx
@@ -0,0 +1,141 @@
+import React from 'react';
+import { Group } from 'react-konva';
+
+import { ControlItemComponent } from '../components/ControlItemComponent';
+import { StashItemComponent } from '../components/StashItemComponent';
+import { Visible } from '../components/Visible';
+import { ControlStashConfig } from '../CseMachineControlStashConfig';
+import {
+  defaultActiveColor,
+  defaultDangerColor,
+  defaultStrokeColor,
+  getTextWidth,
+  isStashItemInDanger
+} from '../CseMachineUtils';
+import { Animatable, AnimationConfig } from './base/Animatable';
+import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
+import { AnimatedTextbox } from './base/AnimatedTextbox';
+import { getNodePosition } from './base/AnimationUtils';
+
+/**
+ * Animation for control instructions that combines the previous stash items into a new stash result.
+ *
+ * Instructions include `array lit=`, `call` (for built-in functions)
+ */
+export class InstructionApplicationAnimation extends Animatable {
+  private controlInstrAnimation: AnimatedTextbox; // the array literal control item
+  private stashItemAnimations: AnimatedTextbox[];
+  private resultAnimation: AnimatedTextbox;
+  private arrowAnimation?: AnimatedGenericArrow<StashItemComponent, Visible>;
+
+  private endX: number;
+  private resultItemIsFirst: boolean;
+
+  constructor(
+    private controlInstrItem: ControlItemComponent,
+    private stashItems: StashItemComponent[],
+    private resultItem: StashItemComponent
+  ) {
+    super();
+    this.resultItemIsFirst = (resultItem?.index ?? stashItems[0].index) === 0;
+    this.endX = stashItems.at(-1)!.x() + stashItems.at(-1)!.width();
+    this.controlInstrAnimation = new AnimatedTextbox(
+      controlInstrItem.text,
+      getNodePosition(controlInstrItem),
+      { rectProps: { stroke: defaultActiveColor() } }
+    );
+    this.stashItemAnimations = stashItems.map(item => {
+      return new AnimatedTextbox(item.text, getNodePosition(item), {
+        rectProps: {
+          stroke: isStashItemInDanger(item.index) ? defaultDangerColor() : defaultStrokeColor()
+        }
+      });
+    });
+    this.resultAnimation = new AnimatedTextbox(resultItem.text, {
+      ...getNodePosition(resultItem),
+      opacity: 0
+    });
+    if (resultItem.arrow) {
+      this.arrowAnimation = new AnimatedGenericArrow(resultItem.arrow, { opacity: 0 });
+    }
+  }
+
+  draw(): React.ReactNode {
+    return (
+      <Group ref={this.ref} key={Animatable.key--}>
+        {this.controlInstrAnimation.draw()}
+        {this.stashItemAnimations.map(a => a.draw())}
+        {this.resultAnimation.draw()}
+        {this.arrowAnimation?.draw()}
+      </Group>
+    );
+  }
+
+  async animate(animationConfig?: AnimationConfig) {
+    this.resultItem?.ref.current?.hide();
+    this.resultItem?.arrow?.ref.current?.hide();
+    const minInstrWidth =
+      getTextWidth(this.controlInstrItem.text) + ControlStashConfig.ControlItemTextPadding * 2;
+    const resultX = this.resultItem?.x() ?? this.stashItems[0].x();
+    const resultY = this.resultItem?.y() ?? this.stashItems[0].y();
+    const startX = resultX - (this.resultItemIsFirst ? minInstrWidth : 0);
+    const fadeDuration = ((animationConfig?.duration ?? 1) * 3) / 4;
+    const fadeInDelay = (animationConfig?.delay ?? 0) + (animationConfig?.duration ?? 1) / 4;
+    // Move array literal instruction next to stash items
+    await Promise.all([
+      this.resultAnimation.animateTo(
+        { x: startX + (this.endX - startX) / 2 - this.resultItem!.width() / 2 },
+        { duration: 0 }
+      ),
+      this.controlInstrAnimation.animateRectTo({ stroke: defaultStrokeColor() }, animationConfig),
+      this.controlInstrAnimation.animateTo(
+        {
+          x: startX,
+          y:
+            resultY +
+            (this.resultItemIsFirst ? 0 : this.resultItem?.height() ?? this.stashItems[0].height()),
+          width: minInstrWidth
+        },
+        animationConfig
+      ),
+      ...this.stashItemAnimations.map(a =>
+        a.animateRectTo({ stroke: defaultStrokeColor() }, animationConfig)
+      )
+    ]);
+    animationConfig = { ...animationConfig, delay: 0 };
+    // Merge all elements together to form the result
+    await Promise.all([
+      this.controlInstrAnimation.animateTo({ x: resultX, y: resultY }, animationConfig),
+      this.controlInstrAnimation.animateTo(
+        { opacity: 0 },
+        { ...animationConfig, duration: fadeDuration }
+      ),
+      ...this.stashItemAnimations.flatMap(a => [
+        a.animateTo({ x: resultX }, animationConfig),
+        a.animateTo({ opacity: 0 }, { ...animationConfig, duration: fadeDuration })
+      ]),
+      this.resultAnimation?.animateTo({ x: resultX }, animationConfig),
+      isStashItemInDanger(this.resultItem.index) &&
+        this.resultAnimation?.animateRectTo({ stroke: defaultDangerColor() }, animationConfig),
+      this.resultAnimation?.animateTo(
+        { opacity: 1 },
+        { ...animationConfig, duration: fadeDuration, delay: fadeInDelay }
+      ),
+      this.arrowAnimation?.animateTo(
+        { opacity: 1 },
+        { ...animationConfig, delay: animationConfig?.duration ?? 1 }
+      )
+    ]);
+    this.destroy();
+  }
+
+  destroy() {
+    this.ref.current?.hide();
+    this.resultItem.ref.current?.show();
+    this.resultItem.arrow?.ref.current?.show();
+    this.controlInstrAnimation.destroy();
+    this.stashItemAnimations.map(a => a.destroy());
+    this.resultAnimation.destroy();
+    this.arrowAnimation?.destroy();
+  }
+}
diff --git a/src/features/cseMachine/animationComponents/LiteralAnimation.tsx b/src/features/cseMachine/animationComponents/LiteralAnimation.tsx
deleted file mode 100644
index 5aed82be9b..0000000000
--- a/src/features/cseMachine/animationComponents/LiteralAnimation.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ControlItemComponent } from '../components/ControlItemComponent';
-import { StashItemComponent } from '../components/StashItemComponent';
-import { AnimatedTextboxComponent } from './AnimationComponents';
-import { getNodePositionFromItem } from './AnimationUtils';
-
-export class LiteralAnimation extends AnimatedTextboxComponent {
-  constructor(
-    controlItem: ControlItemComponent,
-    private stashItem: StashItemComponent
-  ) {
-    super(
-      getNodePositionFromItem(controlItem),
-      getNodePositionFromItem(stashItem),
-      controlItem.text
-    );
-  }
-
-  async animate() {
-    this.stashItem.ref.current.hide();
-    await super.animate();
-    this.ref.current?.hide();
-    this.stashItem.ref.current?.show();
-  }
-}
diff --git a/src/features/cseMachine/animationComponents/LookupAnimation.tsx b/src/features/cseMachine/animationComponents/LookupAnimation.tsx
new file mode 100644
index 0000000000..eb3f72cd62
--- /dev/null
+++ b/src/features/cseMachine/animationComponents/LookupAnimation.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import { Group } from 'react-konva';
+
+import { Binding } from '../components/Binding';
+import { ControlItemComponent } from '../components/ControlItemComponent';
+import { Frame } from '../components/Frame';
+import { StashItemComponent } from '../components/StashItemComponent';
+import { Visible } from '../components/Visible';
+import { ControlStashConfig } from '../CseMachineControlStashConfig';
+import {
+  defaultActiveColor,
+  defaultDangerColor,
+  defaultStrokeColor,
+  getTextWidth,
+  isStashItemInDanger
+} from '../CseMachineUtils';
+import { Animatable } from './base/Animatable';
+import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
+import { AnimatedTextbox } from './base/AnimatedTextbox';
+import { getNodePosition } from './base/AnimationUtils';
+
+/** Animation for variable lookup */
+export class LookupAnimation extends Animatable {
+  private nameItemAnimation: AnimatedTextbox;
+  private stashItemAnimation: AnimatedTextbox;
+  private arrowAnimation?: AnimatedGenericArrow<StashItemComponent, Visible>;
+
+  constructor(
+    private nameItem: ControlItemComponent,
+    private stashItem: StashItemComponent,
+    private frame: Frame,
+    private binding: Binding
+  ) {
+    super();
+    this.nameItemAnimation = new AnimatedTextbox(nameItem.text, getNodePosition(nameItem), {
+      rectProps: { stroke: defaultActiveColor() }
+    });
+    this.stashItemAnimation = new AnimatedTextbox(stashItem.text, {
+      ...getNodePosition(stashItem),
+      x: frame.x(),
+      y: binding.key.y() + binding.key.height() / 2 - stashItem.height() / 2,
+      opacity: 0
+    });
+    if (stashItem.arrow) {
+      this.arrowAnimation = new AnimatedGenericArrow(stashItem.arrow, { opacity: 0 });
+    }
+  }
+
+  draw(): React.ReactNode {
+    return (
+      <Group key={Animatable.key--} ref={this.ref}>
+        {this.nameItemAnimation.draw()}
+        {this.stashItemAnimation.draw()}
+        {this.arrowAnimation?.draw()}
+      </Group>
+    );
+  }
+
+  async animate() {
+    this.stashItem.ref.current?.hide();
+    if (this.stashItem.arrow) {
+      this.stashItem.arrow.ref.current?.hide();
+    }
+    const minNameItemWidth =
+      getTextWidth(this.nameItem.text) + ControlStashConfig.ControlItemTextPadding * 2;
+    // move name item next to binding
+    await Promise.all([
+      this.nameItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }, { duration: 1.2 }),
+      this.nameItemAnimation.animateTo(
+        {
+          x: this.frame.x() - minNameItemWidth,
+          y: this.binding.key.y() + this.binding.key.height() / 2 - this.nameItem.height() / 2,
+          width: minNameItemWidth
+        },
+        { duration: 1.2 }
+      )
+    ]);
+    // the name item 'pulls' the stash item out of the binding
+    await Promise.all([
+      this.nameItemAnimation.animateTo({
+        x: this.frame.x() - this.nameItemAnimation.width() - this.stashItemAnimation.width()
+      }),
+      this.stashItemAnimation.animateTo({ x: this.frame.x() - this.stashItem.width(), opacity: 1 })
+    ]);
+    // move both name item and stash item to the stash, while fading out the name item
+    await Promise.all([
+      this.nameItemAnimation.animateTo(
+        {
+          x: this.stashItem.x() - this.nameItemAnimation.width(),
+          y: this.stashItem.y(),
+          opacity: 0
+        },
+        { duration: 1.2 }
+      ),
+      this.stashItemAnimation.animateTo(
+        {
+          x: this.stashItem.x(),
+          y: this.stashItem.y()
+        },
+        { duration: 1.2 }
+      ),
+      isStashItemInDanger(this.stashItem.index) &&
+        this.stashItemAnimation.animateRectTo({ stroke: defaultDangerColor() }, { duration: 1.2 }),
+      // fade in the arrow if there is one
+      this.arrowAnimation?.animateTo({ opacity: 1 }, { delay: 1.2 })
+    ]);
+    this.destroy();
+  }
+
+  destroy() {
+    this.ref.current?.hide();
+    this.stashItem.ref.current?.show();
+    this.stashItem.arrow?.ref.current?.show();
+    this.nameItemAnimation.destroy();
+    this.stashItemAnimation.destroy();
+  }
+}
diff --git a/src/features/cseMachine/animationComponents/PopAnimation.tsx b/src/features/cseMachine/animationComponents/PopAnimation.tsx
index c7d60334c0..92c028f683 100644
--- a/src/features/cseMachine/animationComponents/PopAnimation.tsx
+++ b/src/features/cseMachine/animationComponents/PopAnimation.tsx
@@ -4,24 +4,29 @@ import { Group } from 'react-konva';
 
 import { ControlItemComponent } from '../components/ControlItemComponent';
 import { StashItemComponent } from '../components/StashItemComponent';
-import { Animatable, AnimatedTextboxComponent } from './AnimationComponents';
-import { getNodePositionFromItem } from './AnimationUtils';
+import { defaultActiveColor, defaultDangerColor, defaultStrokeColor } from '../CseMachineUtils';
+import { Animatable } from './base/Animatable';
+import { AnimatedTextbox } from './base/AnimatedTextbox';
+import { getNodePosition } from './base/AnimationUtils';
 
+/** Animation for the `pop` instruction, which removes the top item in the stash */
 export class PopAnimation extends Animatable {
-  private popItemAnimation: AnimatedTextboxComponent;
-  private stashItemAnimation: AnimatedTextboxComponent;
+  private popItemAnimation: AnimatedTextbox;
+  private stashItemAnimation: AnimatedTextbox;
+  private undefinedStashItemAnimation?: AnimatedTextbox;
 
-  constructor(popItem: ControlItemComponent, stashItem: StashItemComponent) {
+  constructor(
+    popItem: ControlItemComponent,
+    private stashItem: StashItemComponent,
+    private undefinedStashItem?: StashItemComponent
+  ) {
     super();
-    const popItemPosition = getNodePositionFromItem(popItem);
-    const stashItemPosition = getNodePositionFromItem(stashItem);
-    // TODO: improve the animation make the travel path an arc
-    this.popItemAnimation = new AnimatedTextboxComponent(
-      popItemPosition,
-      { ...stashItemPosition, opacity: 0 },
-      popItem.text
-    );
-    this.stashItemAnimation = new AnimatedTextboxComponent(
+    const stashItemPosition = getNodePosition(stashItem);
+    this.popItemAnimation = new AnimatedTextbox(popItem.text, getNodePosition(popItem), {
+      rectProps: { stroke: defaultActiveColor() }
+    });
+    this.stashItemAnimation = new AnimatedTextbox(
+      stashItem.text,
       {
         ...stashItemPosition,
         x: stashItemPosition.x + stashItemPosition.width / 2,
@@ -29,10 +34,14 @@ export class PopAnimation extends Animatable {
         y: stashItemPosition.y + stashItemPosition.height / 2,
         offsetY: stashItemPosition.height / 2
       },
-      { scaleX: 0.6, scaleY: 0.6 },
-      stashItem.text,
-      { delayMultiplier: 0.3 }
+      { rectProps: { stroke: defaultDangerColor() } }
     );
+    if (undefinedStashItem) {
+      this.undefinedStashItemAnimation = new AnimatedTextbox(undefinedStashItem.text, {
+        ...getNodePosition(undefinedStashItem),
+        opacity: 0
+      });
+    }
   }
 
   draw(): React.ReactNode {
@@ -40,20 +49,32 @@ export class PopAnimation extends Animatable {
       <Group key={Animatable.key--} ref={this.ref}>
         {this.popItemAnimation.draw()}
         {this.stashItemAnimation.draw()}
+        {this.undefinedStashItemAnimation?.draw()}
       </Group>
     );
   }
 
   async animate() {
-    await Promise.all([this.popItemAnimation.animate(), this.stashItemAnimation.animate()]);
-    this.stashItemAnimation.setDestination(
-      { scaleX: 1.1, scaleY: 1.1, opacity: 0 },
-      { durationMultiplier: 0.5, easing: Easings.StrongEaseOut }
-    );
-    await this.stashItemAnimation.animate();
+    this.undefinedStashItem?.ref.current?.hide();
+    await Promise.all([
+      this.popItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }, { duration: 0.8 }),
+      this.popItemAnimation.animateTo({ ...getNodePosition(this.stashItem), opacity: 0 }),
+      this.stashItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }, { delay: 0.3 }),
+      this.stashItemAnimation.animateTo({ scaleX: 0.6, scaleY: 0.6 }, { delay: 0.3 })
+    ]);
+    await Promise.all([
+      this.stashItemAnimation.animateTo(
+        { scaleX: 1.1, scaleY: 1.1, opacity: 0 },
+        { duration: 0.5, easing: Easings.StrongEaseOut }
+      ),
+      this.undefinedStashItemAnimation?.animateTo({ opacity: 1 }, { delay: 0.3 })
+    ]);
+    this.destroy();
   }
 
   destroy() {
+    this.ref.current?.hide();
+    this.undefinedStashItem?.ref?.current?.show();
     this.popItemAnimation.destroy();
     this.stashItemAnimation.destroy();
   }
diff --git a/src/features/cseMachine/animationComponents/UnaryOperationAnimation.tsx b/src/features/cseMachine/animationComponents/UnaryOperationAnimation.tsx
index 53459afe12..6343346a7f 100644
--- a/src/features/cseMachine/animationComponents/UnaryOperationAnimation.tsx
+++ b/src/features/cseMachine/animationComponents/UnaryOperationAnimation.tsx
@@ -1,44 +1,43 @@
-import { NodeConfig } from 'konva/lib/Node';
 import React from 'react';
 import { Group } from 'react-konva';
 
 import { ControlItemComponent } from '../components/ControlItemComponent';
 import { StashItemComponent } from '../components/StashItemComponent';
-import { Animatable, AnimatedTextboxComponent } from './AnimationComponents';
-import { getNodePositionFromItem } from './AnimationUtils';
+import { ControlStashConfig } from '../CseMachineControlStashConfig';
+import {
+  defaultActiveColor,
+  defaultDangerColor,
+  defaultStrokeColor,
+  getTextWidth,
+  isStashItemInDanger
+} from '../CseMachineUtils';
+import { Animatable } from './base/Animatable';
+import { AnimatedTextbox } from './base/AnimatedTextbox';
+import { getNodePosition } from './base/AnimationUtils';
 
+/** Animation for an unary operation, e.g. `-`, `!` */
 export class UnaryOperationAnimation extends Animatable {
-  private operatorAnimation: AnimatedTextboxComponent;
-  private operandAnimation: AnimatedTextboxComponent;
-  private resultAnimation: AnimatedTextboxComponent;
-  private resultPosition: NodeConfig;
+  private operatorAnimation: AnimatedTextbox;
+  private operandAnimation: AnimatedTextbox;
+  private resultAnimation: AnimatedTextbox;
 
   constructor(
-    operator: ControlItemComponent,
-    operand: StashItemComponent,
+    private operator: ControlItemComponent,
+    private operand: StashItemComponent,
     private result: StashItemComponent
   ) {
     super();
-    const operatorPosition = getNodePositionFromItem(operator);
-    const operandPosition = getNodePositionFromItem(operand);
-    const resultPosition = getNodePositionFromItem(result);
-    this.resultPosition = resultPosition;
-    this.operatorAnimation = new AnimatedTextboxComponent(
-      operatorPosition,
-      operandPosition,
-      operator.text
-    );
-    this.operandAnimation = new AnimatedTextboxComponent(
-      operandPosition,
-      { ...operandPosition, x: operandPosition.x + operandPosition.width },
-      operand.text
-    );
-    this.resultAnimation = new AnimatedTextboxComponent(
-      { ...resultPosition, x: operandPosition.x + operandPosition.width / 2, opacity: 0 },
-      { ...resultPosition, opacity: 1 },
-      result.text,
-      { delayMultiplier: 0.5 }
-    );
+    this.operatorAnimation = new AnimatedTextbox(operator.text, getNodePosition(operator), {
+      rectProps: { stroke: defaultActiveColor() }
+    });
+    this.operandAnimation = new AnimatedTextbox(operand.text, getNodePosition(operand), {
+      rectProps: { stroke: defaultDangerColor() }
+    });
+    this.resultAnimation = new AnimatedTextbox(result.text, {
+      ...getNodePosition(result),
+      x: operand.x() + operand.width() / 2,
+      opacity: 0
+    });
   }
 
   draw(): React.ReactNode {
@@ -52,21 +51,52 @@ export class UnaryOperationAnimation extends Animatable {
   }
 
   async animate() {
-    this.result.ref.current.hide();
-    await Promise.all([this.operatorAnimation.animate(), this.operandAnimation.animate()]);
-    const to = { ...this.resultPosition, opacity: 0 };
-    this.operatorAnimation.setDestination(to);
-    this.operandAnimation.setDestination(to);
+    this.result.ref.current?.hide();
+    const minOpWidth =
+      getTextWidth(this.operator.text) + ControlStashConfig.ControlItemTextPadding * 2;
+    // Move operator next to operand, while moving operand to make space
     await Promise.all([
-      this.operatorAnimation.animate(),
-      this.operandAnimation.animate(),
-      this.resultAnimation.animate()
+      this.resultAnimation.animateTo(
+        {
+          x:
+            this.operand.x() +
+            (this.operand.x() + minOpWidth + this.operand.width()) / 2 +
+            this.result.width() / 2
+        },
+        { duration: 0 }
+      ),
+      this.operatorAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.operatorAnimation.animateTo({
+        x: this.operand.x(),
+        y: this.result.y(),
+        width: minOpWidth
+      }),
+      this.operandAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.operandAnimation.animateTo({
+        x: this.operand.x() + minOpWidth
+      })
     ]);
-    this.ref.current?.hide();
-    this.result.ref.current?.show();
+    const fadeDuration = 3 / 4;
+    const fadeInDelay = 1 / 4;
+    await Promise.all([
+      this.operatorAnimation.animateTo({ width: this.result.width() }),
+      this.operatorAnimation.animateTo({ opacity: 0 }, { duration: fadeDuration }),
+      this.operandAnimation.animateTo({ x: this.result.x(), width: this.result.width() }),
+      this.operandAnimation.animateTo({ opacity: 0 }, { duration: fadeDuration }),
+      this.resultAnimation.animateTo({ x: this.result.x() }),
+      this.resultAnimation.animateTo(
+        { opacity: 1 },
+        { duration: fadeDuration, delay: fadeInDelay }
+      ),
+      isStashItemInDanger(this.result.index) &&
+        this.resultAnimation.animateRectTo({ stroke: defaultDangerColor() })
+    ]);
+    this.destroy();
   }
 
   destroy() {
+    this.ref.current?.hide();
+    this.result.ref.current?.show();
     this.operatorAnimation.destroy();
     this.operandAnimation.destroy();
     this.resultAnimation.destroy();
diff --git a/src/features/cseMachine/animationComponents/base/Animatable.tsx b/src/features/cseMachine/animationComponents/base/Animatable.tsx
new file mode 100644
index 0000000000..cebaaf6f23
--- /dev/null
+++ b/src/features/cseMachine/animationComponents/base/Animatable.tsx
@@ -0,0 +1,72 @@
+import { NodeConfig } from 'konva/lib/Node';
+
+import { Visible } from '../../components/Visible';
+
+export type AnimationConfig = {
+  /** Duration of the animation as a factor of `CSEAnimation.defaultDuration`.
+   * For example, if the default duration is 300ms and the duration value is set to `0.5`,
+   * the animation would be 150ms long. If unspecified, the duration value will default to `1`.
+   */
+  duration?: number;
+
+  /** Delay of the animation as a factor of `CSEAnimation.defaultDuration`.
+   * For example, if the default duration is 300ms and the delay value is set to `0.5`,
+   * the animation would be delayed by 150ms before it starts. If unspecified,
+   * the delay value will default to `0`.
+   */
+  delay?: number;
+
+  /** Easing of the animation. The easing function can be chosen from `Konva.Easings`,
+   * or a custom function can also be provided. If unspecified, the defult easing function
+   * will be `CSEAnimation.defaultEasing`.
+   */
+  easing?: (time: number, startValue: number, valueRange: number, duration: number) => number;
+};
+
+/** Class that represents a general animatable component, with the key method being `animate` */
+export abstract class Animatable extends Visible {
+  /** The key value to be used for all `KonvaNodeComponent` to prevent them from reusing
+   * previously destroyed konva components. This value is decremented after it is used, to prevent
+   * conflicts with the incrementing `Layout.key` value used inside the general layout of
+   * other none-animation component. */
+  static key = -1;
+
+  /** Starts the animation. `animate` should not be called if the animation is still running.
+   * @return a void promise that resolves when the animation is complete */
+  abstract animate(animationConfig?: AnimationConfig): Promise<void>;
+
+  /** Properly dispose of the current animation and ensures that subsequent calls to animate cannot be made */
+  abstract destroy(): void;
+}
+
+/** Class that represents an animatable component, which allows for animations towards new values
+ * defined inside the key method `animateTo`
+ */
+export abstract class AnimatableTo<KonvaConfig extends NodeConfig> extends Visible {
+  protected listeners: ((props: Partial<KonvaConfig>) => void)[] = [];
+
+  /** Adds a listener that is called when the animation is running */
+  addListener(listener: (props: Partial<KonvaConfig>) => void) {
+    this.listeners.push(listener);
+  }
+
+  /** Removes the specified listener so it is no longer called when the animation is running */
+  removeListener(listener: (props: Partial<KonvaConfig>) => void) {
+    const i = this.listeners.indexOf(listener);
+    if (i > -1) this.listeners.splice(i, 1);
+  }
+
+  /** Animates the node to the specified values, and update any listeners attached to the animation
+   * component in every frame of the animation. If multiple calls are made to `animateTo` in the same
+   * frame, all animations will correctly run and start at the same time. If there are conflicts in
+   * the property names in different `animateTo` calls, the latest call will be prioritised for
+   * that particular property.
+   * @param to the target props
+   * @param animationConfig an optional animation config to customise duration, delay or easing
+   * @return a void promise that resolves when the animation is complete
+   */
+  abstract animateTo(to: Partial<KonvaConfig>, animationConfig?: AnimationConfig): Promise<void>;
+
+  /** Properly dispose of the current animation and ensures that subsequent calls to animate cannot be made */
+  abstract destroy(): void;
+}
diff --git a/src/features/cseMachine/animationComponents/base/AnimatedGenericArrow.tsx b/src/features/cseMachine/animationComponents/base/AnimatedGenericArrow.tsx
new file mode 100644
index 0000000000..704444d927
--- /dev/null
+++ b/src/features/cseMachine/animationComponents/base/AnimatedGenericArrow.tsx
@@ -0,0 +1,77 @@
+import { ArrowConfig } from 'konva/lib/shapes/Arrow';
+import { PathConfig } from 'konva/lib/shapes/Path';
+import { Group } from 'react-konva';
+import { SharedProperties } from 'src/commons/utils/TypeHelper';
+
+import { GenericArrow } from '../../components/arrows/GenericArrow';
+import { Visible } from '../../components/Visible';
+import { defaultStrokeColor, fadedStrokeColor } from '../../CseMachineUtils';
+import { Animatable, AnimatableTo, AnimationConfig } from './Animatable';
+import { AnimatedArrowComponent, AnimatedPathComponent } from './AnimationComponents';
+
+type PathArrowSharedConfig = Omit<SharedProperties<PathConfig, ArrowConfig>, 'width' | 'height'>;
+
+export class AnimatedGenericArrow<
+  Source extends Visible,
+  Target extends Visible
+> extends AnimatableTo<PathArrowSharedConfig> {
+  private pathComponent: AnimatedPathComponent;
+  private arrowComponent: AnimatedArrowComponent;
+
+  private onPropsChange = (props: PathConfig) => {
+    if (props.x) this._x = this.arrow.x() + props.x;
+    if (props.y) this._y = this.arrow.y() + props.y;
+  };
+
+  constructor(
+    private arrow: GenericArrow<Source, Target>,
+    props?: PathArrowSharedConfig
+  ) {
+    super();
+    this._x = arrow.x();
+    this._y = arrow.y();
+    this._width = arrow.width();
+    this._height = arrow.height();
+    this.pathComponent = new AnimatedPathComponent({
+      stroke: arrow.faded ? fadedStrokeColor() : defaultStrokeColor(),
+      data: arrow.path(),
+      ...props
+    });
+    this.pathComponent.addListener(this.onPropsChange);
+    this.arrowComponent = new AnimatedArrowComponent({
+      fill: arrow.faded ? fadedStrokeColor() : defaultStrokeColor(),
+      points: arrow.points.slice(arrow.points.length - 4),
+      ...props
+    });
+  }
+
+  draw(): React.ReactNode {
+    return (
+      <Group ref={this.ref} key={Animatable.key--}>
+        {this.pathComponent.draw()}
+        {this.arrowComponent.draw()}
+      </Group>
+    );
+  }
+
+  animatePathTo(to: Partial<PathConfig>, animationConfig?: AnimationConfig) {
+    return this.pathComponent.animateTo(to, animationConfig);
+  }
+
+  animateArrowTo(to: Partial<ArrowConfig>, animationConfig?: AnimationConfig) {
+    return this.arrowComponent.animateTo(to, animationConfig);
+  }
+
+  async animateTo(to: Partial<PathArrowSharedConfig>, animationConfig?: AnimationConfig) {
+    await Promise.all([
+      this.animatePathTo(to, animationConfig),
+      this.animateArrowTo(to, animationConfig)
+    ]);
+  }
+
+  destroy() {
+    this.pathComponent.removeListener(this.onPropsChange);
+    this.pathComponent.destroy();
+    this.arrowComponent.destroy();
+  }
+}
diff --git a/src/features/cseMachine/animationComponents/base/AnimatedTextbox.tsx b/src/features/cseMachine/animationComponents/base/AnimatedTextbox.tsx
new file mode 100644
index 0000000000..0bd86c352a
--- /dev/null
+++ b/src/features/cseMachine/animationComponents/base/AnimatedTextbox.tsx
@@ -0,0 +1,72 @@
+import { RectConfig } from 'konva/lib/shapes/Rect';
+import { TextConfig } from 'konva/lib/shapes/Text';
+import { Group } from 'react-konva';
+import { SharedProperties } from 'src/commons/utils/TypeHelper';
+
+import { ControlStashConfig } from '../../CseMachineControlStashConfig';
+import { Animatable, AnimatableTo, AnimationConfig } from './Animatable';
+import { AnimatedRectComponent, AnimatedTextComponent } from './AnimationComponents';
+
+type TextRectSharedConfig = SharedProperties<TextConfig, RectConfig>;
+
+export class AnimatedTextbox extends AnimatableTo<TextRectSharedConfig> {
+  private rectComponent: AnimatedRectComponent;
+  private textComponent: AnimatedTextComponent;
+
+  // Update the current component's dimensions based on the inner rect component's dimensions
+  private onPropsChange = (props: RectConfig) => {
+    if (props.x) this._x = props.x;
+    if (props.y) this._y = props.y;
+    if (props.width) this._width = props.width;
+    if (props.height) this._height = props.height;
+  };
+
+  constructor(
+    text: string,
+    sharedProps: TextRectSharedConfig,
+    additionalProps?: { rectProps?: RectConfig; textProps?: TextConfig }
+  ) {
+    super();
+    const rectProps = { ...sharedProps, ...additionalProps?.rectProps };
+    this.onPropsChange(rectProps);
+    this.rectComponent = new AnimatedRectComponent(rectProps);
+    this.rectComponent.addListener(this.onPropsChange);
+    const textProps = {
+      padding: ControlStashConfig.ControlItemTextPadding,
+      ...sharedProps,
+      ...additionalProps?.textProps,
+      text
+    };
+    this.textComponent = new AnimatedTextComponent(textProps);
+  }
+
+  draw(): React.ReactNode {
+    return (
+      <Group ref={this.ref} key={Animatable.key--}>
+        {this.rectComponent.draw()}
+        {this.textComponent.draw()}
+      </Group>
+    );
+  }
+
+  animateRectTo(to: Partial<RectConfig>, animationConfig?: AnimationConfig) {
+    return this.rectComponent.animateTo(to, animationConfig);
+  }
+
+  animateTextTo(to: Partial<TextConfig>, animationConfig?: AnimationConfig) {
+    return this.textComponent.animateTo(to, animationConfig);
+  }
+
+  async animateTo(to: Partial<TextRectSharedConfig>, animationConfig?: AnimationConfig) {
+    await Promise.all([
+      this.animateRectTo(to, animationConfig),
+      this.animateTextTo(to, animationConfig)
+    ]);
+  }
+
+  destroy() {
+    this.rectComponent.removeListener(this.onPropsChange);
+    this.rectComponent.destroy();
+    this.textComponent.destroy();
+  }
+}
diff --git a/src/features/cseMachine/animationComponents/base/AnimationComponents.tsx b/src/features/cseMachine/animationComponents/base/AnimationComponents.tsx
new file mode 100644
index 0000000000..b69420f81e
--- /dev/null
+++ b/src/features/cseMachine/animationComponents/base/AnimationComponents.tsx
@@ -0,0 +1,217 @@
+import Konva from 'konva';
+import { AnimationFn } from 'konva/lib/types';
+import React from 'react';
+import { Arrow, KonvaNodeComponent, Path, Rect, Text } from 'react-konva';
+
+import { CseAnimation } from '../../CseMachineAnimation';
+import { Config } from '../../CseMachineConfig';
+import { ControlStashConfig } from '../../CseMachineControlStashConfig';
+import { defaultStrokeColor, defaultTextColor } from '../../CseMachineUtils';
+import { Animatable, AnimatableTo, AnimationConfig } from './Animatable';
+import { lerp } from './AnimationUtils';
+
+type AnimationData<KonvaConfig extends Konva.NodeConfig> = {
+  startTime: number;
+  endTime: number;
+  from: Readonly<Partial<KonvaConfig>>;
+  current: Partial<KonvaConfig>;
+  to: Readonly<Partial<KonvaConfig>>;
+  easing: NonNullable<AnimationConfig['easing']>;
+  resolve: (value: void | PromiseLike<void>) => void;
+};
+
+abstract class BaseAnimationComponent<
+  KonvaConfig extends Konva.NodeConfig
+> extends AnimatableTo<KonvaConfig> {
+  private isDestroyed = false;
+  private animationData: AnimationData<KonvaConfig>[] = [];
+  private animation: Konva.Animation;
+
+  private animationFn: AnimationFn = frame => {
+    if (!frame || this.animationData.length === 0) return false;
+    if (!this.ref.current) {
+      this.animationData.forEach(data => data.resolve());
+      this.animation.stop();
+      return;
+    }
+
+    let animationComplete = true;
+    const attrs: Partial<KonvaConfig> = {};
+    const resolveList: ((value: void | PromiseLike<void>) => void)[] = [];
+
+    let i = 0;
+    while (i < this.animationData.length) {
+      const data = this.animationData[i];
+      if (frame.time <= data.startTime) {
+        animationComplete = false;
+        i++;
+        continue;
+      }
+      // Calculate animation progress from 0 to 1
+      const delta = Math.min((frame.time - data.startTime) / (data.endTime - data.startTime), 1);
+      // Interpolate each attribute between the starting and ending values
+      for (const attr in data.current) {
+        const value = lerp(delta, attr, data.from[attr], data.to[attr], data.easing);
+        data.current[attr] = value;
+        if (attr === 'x') this._x = value;
+        if (attr === 'y') this._y = value;
+        if (attr === 'width') this._width = value;
+        if (attr === 'height') this._height = value;
+      }
+      // Add the new attributes and values into the main attrs object
+      Object.assign(attrs, data.current);
+      // Resolve the animation's promise later if the animation is done, and also
+      // remove the animation data from the list
+      if (delta === 1) {
+        resolveList.push(data.resolve);
+        this.animationData.splice(i, 1);
+      } else {
+        animationComplete = false;
+        i++;
+      }
+    }
+    if (Object.keys(attrs).length > 0) {
+      // Set all the attributes in one go to improve performance
+      this.ref.current.setAttrs(attrs);
+      this.listeners.forEach(f => f({ ...attrs }));
+    }
+    if (animationComplete) this.animation.stop();
+    resolveList.forEach(r => r());
+    return;
+  };
+
+  constructor(protected props: KonvaConfig) {
+    super();
+    if (!CseAnimation.getLayer()) {
+      // If this occurs, it would most likely mean that this animation component is created
+      // before the animation layer is even drawn, as the layer ref current value would be null.
+      throw new Error('Missing animation layer! Unable to create animation component!');
+    }
+    this.animation = new Konva.Animation(this.animationFn, CseAnimation.getLayer());
+    if (props.x) this._x = props.x;
+    if (props.y) this._y = props.y;
+    if (props.width) this._width = props.width;
+    if (props.height) this._height = props.height;
+  }
+
+  animateTo(to: Partial<KonvaConfig>, animationConfig?: AnimationConfig): Promise<void> {
+    return new Promise(resolve => {
+      // Note: this.ref.current being undefined could also result from not calling the draw
+      // function of this animation component.
+      // TODO: find a better way to detect the animation component not being drawn
+      if (this.isDestroyed || Object.keys(to).length === 0 || !this.ref.current) {
+        resolve();
+        return;
+      }
+      const node: Konva.Node = this.ref.current;
+      // Get current node values first
+      const from: Partial<KonvaConfig> = {};
+      for (const attr in to) {
+        from[attr] = node.getAttr(attr);
+      }
+      // Calculate timings based on values given in animationConfig
+      const startTime =
+        this.animation.frame.time + (animationConfig?.delay ?? 0) * CseAnimation.defaultDuration;
+      const endTime = startTime + (animationConfig?.duration ?? 1) * CseAnimation.defaultDuration;
+      const easing = animationConfig?.easing ?? CseAnimation.defaultEasing;
+      // Add animation data
+      const data = { startTime, endTime, from, current: { ...from }, to, easing, resolve };
+      this.animationData.push(data);
+      // Play animation
+      if (!this.animation.isRunning()) this.animation.start();
+    });
+  }
+
+  destroy() {
+    this.isDestroyed = true;
+    if (this.animation.isRunning()) {
+      this.animation.stop();
+    }
+    this.ref.current?.hide();
+    this.animationData.forEach(data => data.resolve());
+    this.animationData.length = 0;
+    this.listeners.length = 0;
+  }
+}
+
+export class AnimationComponent<
+  KonvaNode extends Konva.Node,
+  KonvaConfig extends Konva.NodeConfig
+> extends BaseAnimationComponent<KonvaConfig> {
+  constructor(
+    /**
+     * The `KonvaNodeComponent` that we want to build. Examples: `Text`, `Rect`, `Path`, etc.
+     * Note that these components are imported from the 'react-konva' library, not the
+     * standard 'konva' library.
+     */
+    // Note that the React nodes from `react-konva` (such as `Text`, `Rect`, etc.) are not
+    // actually types or classes, but are actually variables.
+    private type: KonvaNodeComponent<KonvaNode, KonvaConfig>,
+    /** The props we want our konva node to have initially. It should match the correct
+     *  subtype of `NodeConfig` that the konva node requires. */
+    props: KonvaConfig
+  ) {
+    super(props);
+  }
+
+  draw(): React.ReactNode {
+    const ReactKonvaNode = this.type;
+    return (
+      <ReactKonvaNode
+        ref={this.ref}
+        key={Animatable.key--}
+        {...this.props}
+        listening={false}
+        perfectDrawEnabled={false}
+      />
+    );
+  }
+}
+
+export class AnimatedTextComponent extends AnimationComponent<Konva.Text, Konva.TextConfig> {
+  constructor(props: Konva.TextConfig & Required<Pick<Konva.TextConfig, 'text'>>) {
+    const defaultProps = {
+      fill: defaultTextColor(),
+      fontFamily: ControlStashConfig.FontFamily,
+      fontSize: ControlStashConfig.FontSize,
+      fontStyle: ControlStashConfig.FontStyle,
+      fontVariant: ControlStashConfig.FontVariant
+    };
+    super(Text, { ...defaultProps, ...props, width: undefined });
+  }
+
+  animateTo(to: Partial<Konva.TextConfig>, animationConfig?: AnimationConfig) {
+    return super.animateTo({ ...to, width: undefined }, animationConfig);
+  }
+}
+
+export class AnimatedRectComponent extends AnimationComponent<Konva.Rect, Konva.RectConfig> {
+  constructor(props: Konva.RectConfig) {
+    const defaultProps = {
+      stroke: defaultStrokeColor(),
+      cornerRadius: ControlStashConfig.ControlItemCornerRadius
+    };
+    super(Rect, { ...defaultProps, ...props });
+  }
+}
+
+export class AnimatedPathComponent extends AnimationComponent<Konva.Path, Konva.PathConfig> {
+  constructor(props: Konva.PathConfig & Required<Pick<Konva.PathConfig, 'data'>>) {
+    const defaultProps = {
+      stroke: defaultStrokeColor(),
+      strokeWidth: Config.ArrowStrokeWidth
+    };
+    super(Path, { ...defaultProps, ...props });
+  }
+}
+
+export class AnimatedArrowComponent extends AnimationComponent<Konva.Arrow, Konva.ArrowConfig> {
+  constructor(props: Konva.ArrowConfig) {
+    const defaultProps = {
+      fill: defaultStrokeColor(),
+      strokeEnabled: false,
+      pointerWidth: Config.ArrowHeadSize
+    };
+    super(Arrow, { ...defaultProps, ...props });
+  }
+}
diff --git a/src/features/cseMachine/animationComponents/base/AnimationUtils.ts b/src/features/cseMachine/animationComponents/base/AnimationUtils.ts
new file mode 100644
index 0000000000..ece0e322ab
--- /dev/null
+++ b/src/features/cseMachine/animationComponents/base/AnimationUtils.ts
@@ -0,0 +1,114 @@
+import { Binding } from '../../components/Binding';
+import { Frame } from '../../components/Frame';
+import { Visible } from '../../components/Visible';
+import { AnimationConfig } from './Animatable';
+
+export function getNodeDimensions(item: Visible) {
+  return {
+    height: item.height(),
+    width: item.width()
+  };
+}
+
+export function getNodeLocation(item: Visible) {
+  return {
+    x: item.x(),
+    y: item.y()
+  };
+}
+
+export function getNodePosition(item: Visible) {
+  return {
+    ...getNodeDimensions(item),
+    ...getNodeLocation(item)
+  };
+}
+
+// Given a current frame, find a binding by traversing the enclosing environments (frames).
+export function lookupBinding(currFrame: Frame, bindingName: string): [Frame, Binding] {
+  let frame: Frame | undefined = currFrame;
+  while (frame !== undefined) {
+    const binding = frame.bindings.find(b => b.keyString.split(':')[0] === bindingName);
+    // return the top most global frame if we have reached the top of the tree
+    if (frame?.environment?.id === '-1') {
+      return [frame, binding ?? frame.bindings[0]];
+    }
+    if (binding) {
+      return [frame, binding];
+    }
+    frame = frame.parentFrame;
+  }
+  // this line should never be reached as long as the interpreter works correctly
+  throw new Error(
+    `Error: Binding with name "${bindingName}" cannot be found within the environment!`
+  );
+}
+
+/** Simple check for if a string is a hex color string. Does not check individual characters. */
+function isHexColor(value: string): boolean {
+  return value.startsWith('#') && (value.length === 4 || value.length === 7);
+}
+
+/** Converts a hex color string to a 3-element rgb array */
+function parseHexColor(color: string): [number, number, number] {
+  if (!isHexColor(color)) {
+    throw new Error(`Cannot parse given color string: ${color}`);
+  }
+  if (color.length === 4) color = color + color.slice(1);
+  return [
+    parseInt(color.slice(1, 3), 16),
+    parseInt(color.slice(3, 5), 16),
+    parseInt(color.slice(5, 7), 16)
+  ];
+}
+
+/** Converts a rgb array to hex color string */
+function convertRgbToHex([r, g, b]: [number, number, number]): `#${string}` {
+  return `#${
+    r.toString(16).padStart(2, '0') +
+    g.toString(16).padStart(2, '0') +
+    b.toString(16).padStart(2, '0')
+  }`;
+}
+
+/**
+ * Interpolates between the colors based on the given delta and easing function.
+ * Only supports hex colors, e.g. `#000`, `#abcdef`, etc.
+ */
+function lerpColor(
+  delta: number,
+  startColor: string | undefined,
+  endColor: string,
+  easingFn: NonNullable<AnimationConfig['easing']>
+): `#${string}` {
+  if (!startColor) return endColor as `#${string}`;
+  const startRgb = parseHexColor(startColor);
+  const endRgb = parseHexColor(endColor);
+  const rgb = Array.from({ length: 3 }, (_, i) =>
+    Math.round(easingFn(delta, startRgb[i], endRgb[i] - startRgb[i], 1))
+  );
+  return convertRgbToHex(rgb as [number, number, number]);
+}
+
+/**
+ * Interpolates between `startValue` and `endValue` at the given `delta`, depending on the given
+ * `property` and `easingFn`.
+ * Only supports interpolation between numbers, or color strings
+ */
+export function lerp(
+  delta: number,
+  property: string,
+  startValue: any,
+  endValue: any,
+  easingFn: NonNullable<AnimationConfig['easing']>
+): any {
+  if (startValue === endValue) return endValue;
+  if (typeof endValue === 'number') {
+    if (typeof startValue !== 'number') return endValue;
+    return easingFn(delta, startValue, endValue - startValue, 1);
+  } else if (property === 'fill' || property === 'stroke') {
+    return lerpColor(delta, startValue, endValue, easingFn);
+  } else {
+    return endValue;
+  }
+}
diff --git a/src/features/cseMachine/components/ArrayEmptyUnit.tsx b/src/features/cseMachine/components/ArrayEmptyUnit.tsx
index 47ce7e2521..9fb9c16bb5 100644
--- a/src/features/cseMachine/components/ArrayEmptyUnit.tsx
+++ b/src/features/cseMachine/components/ArrayEmptyUnit.tsx
@@ -3,42 +3,22 @@ import { Rect } from 'react-konva';
 
 import { ShapeDefaultProps } from '../CseMachineConfig';
 import { Layout } from '../CseMachineLayout';
-import { DataArray } from '../CseMachineTypes';
-import { defaultSAColor } from '../CseMachineUtils';
+import { defaultStrokeColor, fadedStrokeColor } from '../CseMachineUtils';
 import { ArrayValue } from './values/ArrayValue';
 import { Visible } from './Visible';
 
 /** this classes encapsulates an empty array */
 export class ArrayEmptyUnit extends Visible {
   readonly value: null = null;
-
-  readonly data: DataArray;
+  readonly data = undefined;
 
   constructor(readonly parent: ArrayValue) {
     super();
-    this.data = parent.data;
     this._x = this.parent.x();
     this._y = this.parent.y();
     this._height = this.parent.height();
     this._width = this.parent.width();
   }
-  x(): number {
-    return this._x;
-  }
-  y(): number {
-    return this._y;
-  }
-  height(): number {
-    return this._height;
-  }
-  width(): number {
-    return this._width;
-  }
-  updatePosition = () => {
-    this._x = this.parent.x();
-    this._y = this.parent.y();
-  };
-  reset(): void {}
 
   draw(): React.ReactNode {
     return (
@@ -49,7 +29,7 @@ export class ArrayEmptyUnit extends Visible {
         y={this.y()}
         width={this.width()}
         height={this.height()}
-        stroke={defaultSAColor()}
+        stroke={this.parent.isReferenced() ? defaultStrokeColor() : fadedStrokeColor()}
         ref={this.ref}
       />
     );
diff --git a/src/features/cseMachine/components/ArrayNullUnit.tsx b/src/features/cseMachine/components/ArrayNullUnit.tsx
index f95a6c27b8..4fead96f2a 100644
--- a/src/features/cseMachine/components/ArrayNullUnit.tsx
+++ b/src/features/cseMachine/components/ArrayNullUnit.tsx
@@ -3,13 +3,13 @@ import { Line as KonvaLine } from 'react-konva';
 
 import { Config, ShapeDefaultProps } from '../CseMachineConfig';
 import { Layout } from '../CseMachineLayout';
-import { defaultSAColor } from '../CseMachineUtils';
+import { defaultStrokeColor, fadedStrokeColor } from '../CseMachineUtils';
 import { ArrayUnit } from './ArrayUnit';
 import { Visible } from './Visible';
 
 /** this classes encapsulates a null value in Source pairs or arrays */
 export class ArrayNullUnit extends Visible {
-  constructor(reference: ArrayUnit) {
+  constructor(readonly reference: ArrayUnit) {
     super();
     this._x = reference.x();
     this._y = reference.y();
@@ -23,7 +23,7 @@ export class ArrayNullUnit extends Visible {
         {...ShapeDefaultProps}
         key={Layout.key++}
         points={[this.x(), this.y() + this.height(), this.x() + this.width(), this.y()]}
-        stroke={defaultSAColor()}
+        stroke={this.reference.parent.isReferenced() ? defaultStrokeColor() : fadedStrokeColor()}
         hitStrokeWidth={Config.DataHitStrokeWidth}
         ref={this.ref}
         listening={false}
diff --git a/src/features/cseMachine/components/ArrayUnit.tsx b/src/features/cseMachine/components/ArrayUnit.tsx
index ee483fdaf8..5ebbd04022 100644
--- a/src/features/cseMachine/components/ArrayUnit.tsx
+++ b/src/features/cseMachine/components/ArrayUnit.tsx
@@ -1,13 +1,21 @@
+import { Text, TextConfig } from 'konva/lib/shapes/Text';
 import React from 'react';
+import { Text as KonvaText } from 'react-konva';
 
-import { Config } from '../CseMachineConfig';
+import CseMachine from '../CseMachine';
+import { Config, ShapeDefaultProps } from '../CseMachineConfig';
 import { Layout } from '../CseMachineLayout';
 import { Data } from '../CseMachineTypes';
-import { defaultSAColor } from '../CseMachineUtils';
-import { Arrow } from './arrows/Arrow';
+import {
+  defaultStrokeColor,
+  defaultTextColor,
+  fadedStrokeColor,
+  fadedTextColor
+} from '../CseMachineUtils';
 import { ArrowFromArrayUnit } from './arrows/ArrowFromArrayUnit';
+import { GenericArrow } from './arrows/GenericArrow';
 import { RoundedRect } from './shapes/RoundedRect';
-import { Text } from './Text';
+import { defaultOptions } from './Text';
 import { ArrayValue } from './values/ArrayValue';
 import { PrimitiveValue } from './values/PrimitiveValue';
 import { Value } from './values/Value';
@@ -24,9 +32,9 @@ export class ArrayUnit extends Visible {
   readonly isLastUnit: boolean;
   /** check if this unit is the main reference of the value */
   readonly isMainReference: boolean;
-  parent: ArrayValue;
-  arrow: Arrow | undefined = undefined;
-  index: Text;
+  /** arrow that is drawn from the array unit to the value */
+  arrow?: GenericArrow<ArrayUnit, Value>;
+  readonly indexRef = React.createRef<Text>();
 
   constructor(
     /** index of this unit in its parent */
@@ -34,10 +42,9 @@ export class ArrayUnit extends Visible {
     /** the value this unit contains*/
     readonly data: Data,
     /** parent of this unit */
-    parent: ArrayValue
+    readonly parent: ArrayValue
   ) {
     super();
-    this.parent = parent;
     this._x = this.parent.x() + this.idx * Config.DataUnitWidth;
     this._y = this.parent.y();
     this._height = Config.DataUnitHeight;
@@ -46,19 +53,24 @@ export class ArrayUnit extends Visible {
     this.isLastUnit = this.idx === this.parent.data.length - 1;
     this.value = Layout.createValue(this.data, this);
     this.isMainReference = this.value.references.length > 1;
-    this.index = new Text(this.idx, this.x(), this.y() - 0.4 * this.height());
   }
 
-  updatePosition = () => {};
-
-  onMouseEnter = () => {};
+  showIndex() {
+    this.indexRef.current?.show();
+  }
 
-  onMouseLeave = () => {};
+  hideIndex() {
+    if (!CseMachine.getPrintableMode()) this.indexRef.current?.hide();
+  }
 
   draw(): React.ReactNode {
     if (this.isDrawn()) return null;
     this._isDrawn = true;
 
+    if (!(this.value instanceof PrimitiveValue)) {
+      this.arrow = new ArrowFromArrayUnit(this).to(this.value);
+    }
+
     const cornerRadius = {
       upperLeft: 0,
       lowerLeft: 0,
@@ -70,6 +82,18 @@ export class ArrayUnit extends Visible {
     if (this.isLastUnit)
       cornerRadius.upperRight = cornerRadius.lowerRight = Config.DataCornerRadius;
 
+    const indexProps: TextConfig = {
+      fontFamily: defaultOptions.fontFamily,
+      fontSize: defaultOptions.fontSize,
+      fontStyle: defaultOptions.fontStyle,
+      fill: this.parent.isReferenced() ? defaultTextColor() : fadedTextColor(),
+      x: this.x(),
+      y: this.y() - defaultOptions.fontSize - 4,
+      width: this.width(),
+      padding: 2,
+      visible: CseMachine.getPrintableMode()
+    };
+
     return (
       <React.Fragment key={Layout.key++}>
         <RoundedRect
@@ -78,17 +102,21 @@ export class ArrayUnit extends Visible {
           y={this.y()}
           width={this.width()}
           height={this.height()}
-          stroke={defaultSAColor()}
+          stroke={this.parent.isReferenced() ? defaultStrokeColor() : fadedStrokeColor()}
           hitStrokeWidth={Config.DataHitStrokeWidth}
-          fillEnabled={false}
-          onMouseEnter={this.onMouseEnter}
-          onMouseLeave={this.onMouseLeave}
+          fillEnabled={true}
           cornerRadius={cornerRadius}
           forwardRef={this.ref}
         />
-        {this.index.draw()}
+        <KonvaText
+          key={Layout.key++}
+          ref={this.indexRef}
+          {...ShapeDefaultProps}
+          {...indexProps}
+          text={`${this.idx}`}
+        />
         {this.value.draw()}
-        {this.value instanceof PrimitiveValue || new ArrowFromArrayUnit(this).to(this.value).draw()}
+        {this.arrow?.draw()}
       </React.Fragment>
     );
   }
diff --git a/src/features/cseMachine/components/Binding.tsx b/src/features/cseMachine/components/Binding.tsx
index 2787d53a8f..187f020e08 100644
--- a/src/features/cseMachine/components/Binding.tsx
+++ b/src/features/cseMachine/components/Binding.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Config } from '../CseMachineConfig';
 import { Layout } from '../CseMachineLayout';
 import { Data } from '../CseMachineTypes';
-import { isDummyKey, isEnvEqual, isGlobalFn, isMainReference } from '../CseMachineUtils';
+import { isDummyKey, isMainReference } from '../CseMachineUtils';
 import { ArrowFromText } from './arrows/ArrowFromText';
 import { GenericArrow } from './arrows/GenericArrow';
 import { Frame } from './Frame';
@@ -27,10 +27,8 @@ export class Binding extends Visible {
    * i.e. the value is anonymous
    */
   readonly isDummyBinding: boolean = false;
-  private arrow: GenericArrow<Text, Value> | undefined = undefined;
-  public getArrow = (): GenericArrow<Text, Value> | undefined => {
-    return this.arrow;
-  };
+  /** arrow that is drawn from the key to the value */
+  arrow?: GenericArrow<Text, Value>;
 
   constructor(
     /** the key of this binding */
@@ -44,9 +42,7 @@ export class Binding extends Visible {
     readonly isConstant: boolean = false
   ) {
     super();
-    this.isDummyBinding =
-      isDummyKey(this.keyString) ||
-      (isEnvEqual(frame.environment, Layout.globalEnvNode.environment) && isGlobalFn(data));
+    this.isDummyBinding = isDummyKey(this.keyString);
 
     // derive the coordinates from the binding above it
     if (this.prevBinding) {
@@ -89,16 +85,20 @@ export class Binding extends Visible {
   }
 
   draw(): React.ReactNode {
+    if (
+      !this.isDummyBinding && // value is unreferenced in dummy binding
+      !(this.value instanceof PrimitiveValue) &&
+      !(this.value instanceof UnassignedValue)
+    ) {
+      this.arrow = new ArrowFromText(this.key).to(this.value);
+    }
+
     return (
       <React.Fragment key={Layout.key++}>
         {this.isDummyBinding
           ? null // omit the key since value is anonymous
           : this.key.draw()}
-        {this.isDummyBinding || // value is unreferenced in dummy binding
-        this.value instanceof PrimitiveValue ||
-        this.value instanceof UnassignedValue
-          ? null
-          : new ArrowFromText(this.key).to(this.value).draw()}
+        {this.arrow?.draw()}
         {isMainReference(this.value, this) ? this.value.draw() : null}
       </React.Fragment>
     );
diff --git a/src/features/cseMachine/components/ControlItemComponent.tsx b/src/features/cseMachine/components/ControlItemComponent.tsx
index f6f6a50cc2..c02cbf606c 100644
--- a/src/features/cseMachine/components/ControlItemComponent.tsx
+++ b/src/features/cseMachine/components/ControlItemComponent.tsx
@@ -2,12 +2,15 @@ import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
 import { Label, Tag, Text } from 'react-konva';
 
-import { ShapeDefaultProps } from '../CseMachineConfig';
+import CseMachine from '../CseMachine';
+import { Config, ShapeDefaultProps } from '../CseMachineConfig';
 import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import { Layout } from '../CseMachineLayout';
 import { IHoverable } from '../CseMachineTypes';
 import {
-  currentItemSAColor,
+  defaultActiveColor,
+  defaultStrokeColor,
+  defaultTextColor,
   getTextHeight,
   setHoveredCursor,
   setHoveredStyle,
@@ -65,18 +68,26 @@ export class ControlItemComponent extends Visible implements IHoverable {
     }
   }
 
+  // Save previous z-index to go back to later
+  private zIndex = 0;
   onMouseEnter = (e: KonvaEventObject<MouseEvent>) => {
     this.highlightOnHover();
     !this.topItem && setHoveredStyle(e.currentTarget);
     setHoveredCursor(e.currentTarget);
+    this.zIndex = this.ref.current.zIndex();
+    this.ref.current.moveToTop();
+    this.tooltipRef.current.moveToTop();
     this.tooltipRef.current.show();
   };
 
   onMouseLeave = (e: KonvaEventObject<MouseEvent>) => {
     this.unhighlightOnHover?.();
-    !this.topItem && setUnhoveredStyle(e.currentTarget);
     setUnhoveredCursor(e.currentTarget);
     this.tooltipRef.current.hide();
+    if (!this.topItem) {
+      setUnhoveredStyle(e.currentTarget);
+    }
+    this.ref.current.zIndex(this.zIndex);
   };
 
   destroy() {
@@ -85,7 +96,7 @@ export class ControlItemComponent extends Visible implements IHoverable {
 
   draw(): React.ReactNode {
     const textProps = {
-      fill: ControlStashConfig.SA_WHITE,
+      fill: defaultTextColor(),
       padding: ControlStashConfig.ControlItemTextPadding,
       fontFamily: ControlStashConfig.FontFamily,
       fontSize: ControlStashConfig.FontSize,
@@ -93,7 +104,7 @@ export class ControlItemComponent extends Visible implements IHoverable {
       fontVariant: ControlStashConfig.FontVariant
     };
     const tagProps = {
-      stroke: currentItemSAColor(this.topItem),
+      stroke: this.topItem ? defaultActiveColor() : defaultStrokeColor(),
       cornerRadius: ControlStashConfig.ControlItemCornerRadius
     };
     return (
@@ -122,13 +133,14 @@ export class ControlItemComponent extends Visible implements IHoverable {
         >
           <Tag
             {...ShapeDefaultProps}
-            stroke="black"
-            fill={'black'}
+            stroke={Config.HoverBgColor}
+            fill={Config.HoverBgColor}
             opacity={ControlStashConfig.TooltipOpacity}
           />
           <Text
             {...ShapeDefaultProps}
             {...textProps}
+            fill={CseMachine.getPrintableMode() ? Config.PrintBgColor : Config.TextColor}
             text={this.tooltip}
             padding={ControlStashConfig.TooltipPadding}
           />
diff --git a/src/features/cseMachine/components/ControlStack.tsx b/src/features/cseMachine/components/ControlStack.tsx
index 628157988f..6f0850380c 100644
--- a/src/features/cseMachine/components/ControlStack.tsx
+++ b/src/features/cseMachine/components/ControlStack.tsx
@@ -4,7 +4,7 @@ import { Chapter, StatementSequence } from 'js-slang/dist/types';
 import { Node } from 'js-slang/dist/types';
 import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
-import { Group, Label, Tag, Text } from 'react-konva';
+import { Label, Tag, Text } from 'react-konva';
 
 import CseMachine from '../CseMachine';
 import { Config } from '../CseMachineConfig';
@@ -12,7 +12,8 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import { Layout } from '../CseMachineLayout';
 import { IHoverable } from '../CseMachineTypes';
 import {
-  defaultSAColor,
+  defaultStrokeColor,
+  defaultTextColor,
   getControlItemComponent,
   setHoveredCursor,
   setHoveredStyle,
@@ -73,19 +74,17 @@ export class ControlStack extends Visible implements IHoverable {
       .slice(CseMachine.getStackTruncated() ? -10 : 0)
       .map(controlItemToComponent);
   }
+
   onMouseEnter(e: KonvaEventObject<MouseEvent>): void {
     setHoveredStyle(e.currentTarget);
     setHoveredCursor(e.currentTarget);
   }
+
   onMouseLeave(e: KonvaEventObject<MouseEvent>): void {
     setUnhoveredStyle(e.currentTarget);
     setUnhoveredCursor(e.currentTarget);
   }
 
-  destroy() {
-    this.ref.current.destroyChildren();
-  }
-
   draw(): React.ReactNode {
     const textProps = {
       fontFamily: ControlStashConfig.FontFamily,
@@ -94,7 +93,7 @@ export class ControlStack extends Visible implements IHoverable {
       fontVariant: ControlStashConfig.FontVariant
     };
     return (
-      <Group key={Layout.key++} ref={this.ref}>
+      <>
         {CseMachine.getStackTruncated() && Layout.control.size() > 10 && (
           <Label
             x={ControlStashConfig.ShowMoreButtonX}
@@ -107,21 +106,21 @@ export class ControlStack extends Visible implements IHoverable {
             }}
           >
             <Tag
-              stroke={defaultSAColor()}
+              stroke={defaultStrokeColor()}
               cornerRadius={ControlStashConfig.ControlItemCornerRadius}
             />
             <Text
               {...textProps}
               text={`${Config.Ellipsis}`}
               align="center"
-              fill={defaultSAColor()}
+              fill={defaultTextColor()}
               width={ControlStashConfig.ShowMoreButtonWidth}
               height={ControlStashConfig.ShowMoreButtonHeight}
             />
           </Label>
         )}
         {this.stackItemComponents.map(c => c?.draw())}
-      </Group>
+      </>
     );
   }
 }
diff --git a/src/features/cseMachine/components/Frame.tsx b/src/features/cseMachine/components/Frame.tsx
index c3ac074fee..3c5d6221bd 100644
--- a/src/features/cseMachine/components/Frame.tsx
+++ b/src/features/cseMachine/components/Frame.tsx
@@ -2,19 +2,22 @@ import React from 'react';
 import { Group, Rect } from 'react-konva';
 
 import CseMachine from '../CseMachine';
+import { CseAnimation } from '../CseMachineAnimation';
 import { Config, ShapeDefaultProps } from '../CseMachineConfig';
 import { Layout } from '../CseMachineLayout';
-import { DataArray, Env, EnvTreeNode, IHoverable } from '../CseMachineTypes';
+import { Env, EnvTreeNode, IHoverable } from '../CseMachineTypes';
 import {
-  currentItemSAColor,
+  defaultActiveColor,
+  defaultStrokeColor,
   getTextWidth,
   getUnreferencedObjects,
+  isClosure,
   isDataArray,
   isPrimitiveData,
-  isUnassigned,
-  setDifference
+  isUnassigned
 } from '../CseMachineUtils';
 import { ArrowFromFrame } from './arrows/ArrowFromFrame';
+import { GenericArrow } from './arrows/GenericArrow';
 import { Binding } from './Binding';
 import { Level } from './Level';
 import { Text } from './Text';
@@ -31,6 +34,11 @@ const frameNames = new Map([
 
 /** this class encapsulates a frame of key-value bindings to be drawn on canvas */
 export class Frame extends Visible implements IHoverable {
+  private static envFrameMap: Map<string, Frame> = new Map();
+  public static getFrom(environment: Env): Frame | undefined {
+    return Frame.envFrameMap.get(environment.id);
+  }
+
   /** total height = frame height + frame title height */
   readonly totalHeight: number;
   /** width of this frame + max width of the bound values */
@@ -46,6 +54,8 @@ export class Frame extends Visible implements IHoverable {
   readonly environment: Env;
   /** the parent/enclosing frame of this frame (the frame above it) */
   readonly parentFrame: Frame | undefined;
+  /** arrow that is drawn from this frame to the parent frame */
+  readonly arrow: GenericArrow<Frame, Frame> | undefined;
 
   constructor(
     /** environment tree node that contains this frame */
@@ -57,12 +67,15 @@ export class Frame extends Visible implements IHoverable {
     this._width = Config.FrameMinWidth;
     this.level = envTreeNode.level as Level;
     this.environment = envTreeNode.environment;
+    Frame.envFrameMap.set(this.environment.id, this);
     this.parentFrame = envTreeNode.parent?.frame;
     this._x = this.level.x();
     // derive the x coordinate from the left sibling frame
     this.leftSiblingFrame &&
       (this._x +=
         this.leftSiblingFrame.x() + this.leftSiblingFrame.totalWidth + Config.FrameMarginX);
+    // ensure x coordinate cannot be less than that of parent frame
+    this.parentFrame && (this._x = Math.max(this._x, this.parentFrame.x()));
 
     this.name = new Text(
       frameNames.get(this.environment.name) || this.environment.name,
@@ -95,25 +108,34 @@ export class Frame extends Visible implements IHoverable {
     const entries = Object.entries(Object.getOwnPropertyDescriptors(this.environment.head));
 
     // get values that are unreferenced, which will used to created dummy bindings
-    const unreferencedValues = getUnreferencedObjects(this.environment);
-
-    // find arrays that are nested inside other arrays, and prevent them from creating new
-    // dummy bindings, as they should be drawn around the original parent array instead
-    const nestedArrays = new Set<DataArray>();
-    for (const value of unreferencedValues) {
+    const unreferencedValues = [...getUnreferencedObjects(this.environment)];
+
+    // TODO: find out why values are not added to heap on the correct order in JS Slang
+    // For now, sorting is a good workaround since id also increases in insertion order
+    unreferencedValues.sort((v1, v2) => Number(v1.id) - Number(v2.id));
+
+    // find objects that are nested inside other arrays, and prevent them from creating new
+    // dummy bindings by removing them from unreferencedValues, as they should be drawn
+    // around the original parent array instead
+    let i = 0;
+    while (i < unreferencedValues.length) {
+      const value = unreferencedValues[i];
       if (isDataArray(value)) {
         for (const data of value) {
-          if (isDataArray(data) && data !== value) {
-            nestedArrays.add(data);
-            // Since deeply nested arrays always come first inside the heap order, there is no need
-            // to do a recursive search for deeply nested arrays, as they would have already been
-            // added to the nestedArrays set by this point.
+          if ((isDataArray(data) && data !== value) || isClosure(data)) {
+            const prev = unreferencedValues.findIndex(value => value.id === data.id);
+            if (prev > -1) {
+              unreferencedValues.splice(prev, 1);
+              if (prev <= i) i--;
+            }
           }
         }
       }
+      i++;
     }
+
     // Add dummy bindings to `entries`
-    for (const value of setDifference(unreferencedValues, nestedArrays)) {
+    for (const value of unreferencedValues) {
       const descriptor: TypedPropertyDescriptor<any> & PropertyDescriptor = {
         value,
         configurable: false,
@@ -122,7 +144,7 @@ export class Frame extends Visible implements IHoverable {
       };
       // The key is a number string to "disguise" as a dummy binding
       // TODO: revamp the dummy binding behavior, don't rely on numeric keys
-      entries.push(['0', descriptor]);
+      entries.push([`${i++}`, descriptor]);
     }
 
     for (const [key, data] of entries) {
@@ -142,6 +164,12 @@ export class Frame extends Visible implements IHoverable {
       : Config.FramePaddingY * 2;
 
     this.totalHeight = this.height() + this.name.height() + Config.TextPaddingY / 2;
+
+    if (this.parentFrame) this.arrow = new ArrowFromFrame(this).to(this.parentFrame);
+
+    if (CseMachine.getCurrentEnvId() === this.environment.id) {
+      CseAnimation.setCurrentFrame(this);
+    }
   }
 
   onMouseEnter = () => {};
@@ -150,7 +178,7 @@ export class Frame extends Visible implements IHoverable {
 
   draw(): React.ReactNode {
     return (
-      <Group key={Layout.key++}>
+      <Group ref={this.ref} key={Layout.key++}>
         {this.name.draw()}
         <Rect
           {...ShapeDefaultProps}
@@ -158,14 +186,18 @@ export class Frame extends Visible implements IHoverable {
           y={this.y()}
           width={this.width()}
           height={this.height()}
-          stroke={currentItemSAColor(CseMachine.getCurrentEnvId() === this.environment?.id)}
+          stroke={
+            CseMachine.getCurrentEnvId() === this.environment?.id
+              ? defaultActiveColor()
+              : defaultStrokeColor()
+          }
           cornerRadius={Config.FrameCornerRadius}
           onMouseEnter={this.onMouseEnter}
           onMouseLeave={this.onMouseLeave}
           key={Layout.key++}
         />
         {this.bindings.map(binding => binding.draw())}
-        {this.parentFrame && new ArrowFromFrame(this).to(this.parentFrame).draw()}
+        {this.arrow?.draw()}
       </Group>
     );
   }
diff --git a/src/features/cseMachine/components/StashItemComponent.tsx b/src/features/cseMachine/components/StashItemComponent.tsx
index e14810fe95..4d26aba8c4 100644
--- a/src/features/cseMachine/components/StashItemComponent.tsx
+++ b/src/features/cseMachine/components/StashItemComponent.tsx
@@ -4,20 +4,24 @@ import { Label, Tag, Text } from 'react-konva';
 
 import { FnValue } from '../components/values/FnValue';
 import { GlobalFnValue } from '../components/values/GlobalFnValue';
-import { ShapeDefaultProps } from '../CseMachineConfig';
+import CseMachine from '../CseMachine';
+import { Config, ShapeDefaultProps } from '../CseMachineConfig';
 import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import { Layout } from '../CseMachineLayout';
 import { IHoverable } from '../CseMachineTypes';
 import {
+  defaultDangerColor,
+  defaultStrokeColor,
+  defaultTextColor,
   getTextWidth,
-  isClosure,
   isDataArray,
+  isNonGlobalFn,
+  isSourceObject,
   isStashItemInDanger,
   setHoveredCursor,
   setHoveredStyle,
   setUnhoveredCursor,
   setUnhoveredStyle,
-  stackItemSAColor,
   truncateText
 } from '../CseMachineUtils';
 import { ArrowFromStashItemComponent } from './arrows/ArrowFromStashItemComponent';
@@ -44,12 +48,14 @@ export class StashItemComponent extends Visible implements IHoverable {
     const valToStashRep = (val: any): string => {
       return typeof val === 'string'
         ? `'${val}'`.trim()
-        : isClosure(val)
+        : isNonGlobalFn(val)
         ? 'closure'
         : isDataArray(val)
         ? arrowTo
           ? 'pair/array'
           : JSON.stringify(val)
+        : isSourceObject(val)
+        ? val.toReplString()
         : String(value);
     };
     this.text = truncateText(
@@ -69,20 +75,29 @@ export class StashItemComponent extends Visible implements IHoverable {
     this._x = ControlStashConfig.StashPosX + stackWidth;
     this._y = ControlStashConfig.StashPosY;
     if (arrowTo) {
+      arrowTo.markAsReferenced();
       this.arrow = new ArrowFromStashItemComponent(this).to(arrowTo) as ArrowFromStashItemComponent;
     }
   }
 
+  // Save previous z-index to go back to later
+  private zIndex = 0;
   onMouseEnter = (e: KonvaEventObject<MouseEvent>) => {
     !isStashItemInDanger(this.index) && setHoveredStyle(e.currentTarget);
     setHoveredCursor(e.currentTarget);
+    this.zIndex = this.ref.current.zIndex();
+    this.ref.current.moveToTop();
+    this.tooltipRef.current.moveToTop();
     this.tooltipRef.current.show();
   };
 
   onMouseLeave = (e: KonvaEventObject<MouseEvent>) => {
-    !isStashItemInDanger(this.index) && setUnhoveredStyle(e.currentTarget);
     setUnhoveredCursor(e.currentTarget);
     this.tooltipRef.current.hide();
+    if (!isStashItemInDanger(this.index)) {
+      setUnhoveredStyle(e.currentTarget);
+    }
+    this.ref.current.zIndex(this.zIndex);
   };
 
   destroy() {
@@ -91,7 +106,7 @@ export class StashItemComponent extends Visible implements IHoverable {
 
   draw(): React.ReactNode {
     const textProps = {
-      fill: ControlStashConfig.SA_WHITE,
+      fill: defaultTextColor(),
       padding: ControlStashConfig.StashItemTextPadding,
       fontFamily: ControlStashConfig.FontFamily,
       fontSize: ControlStashConfig.FontSize,
@@ -99,7 +114,7 @@ export class StashItemComponent extends Visible implements IHoverable {
       fontVariant: ControlStashConfig.FontVariant
     };
     const tagProps = {
-      stroke: stackItemSAColor(this.index),
+      stroke: isStashItemInDanger(this.index) ? defaultDangerColor() : defaultStrokeColor(),
       cornerRadius: ControlStashConfig.StashItemCornerRadius
     };
     return (
@@ -122,13 +137,14 @@ export class StashItemComponent extends Visible implements IHoverable {
         >
           <Tag
             {...ShapeDefaultProps}
-            stroke="black"
-            fill={'black'}
+            stroke={Config.HoverBgColor}
+            fill={Config.HoverBgColor}
             opacity={ControlStashConfig.TooltipOpacity}
           />
           <Text
             {...ShapeDefaultProps}
             {...textProps}
+            fill={CseMachine.getPrintableMode() ? Config.PrintBgColor : Config.TextColor}
             text={this.tooltip}
             padding={ControlStashConfig.TooltipPadding}
           />
diff --git a/src/features/cseMachine/components/StashStack.tsx b/src/features/cseMachine/components/StashStack.tsx
index 3296fdfca5..e4e2486c79 100644
--- a/src/features/cseMachine/components/StashStack.tsx
+++ b/src/features/cseMachine/components/StashStack.tsx
@@ -1,18 +1,14 @@
 import { Stash } from 'js-slang/dist/cse-machine/interpreter';
 import { Chapter, Value } from 'js-slang/dist/types';
-import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
-import { Group } from 'react-konva';
 
 import CseMachine from '../CseMachine';
 import { ControlStashConfig } from '../CseMachineControlStashConfig';
-import { Layout } from '../CseMachineLayout';
-import { IHoverable } from '../CseMachineTypes';
 import { getStashItemComponent } from '../CseMachineUtils';
 import { StashItemComponent } from './StashItemComponent';
 import { Visible } from './Visible';
 
-export class StashStack extends Visible implements IHoverable {
+export class StashStack extends Visible {
   /** array of stash item components */
   readonly stashItemComponents: StashItemComponent[];
 
@@ -42,18 +38,8 @@ export class StashStack extends Visible implements IHoverable {
       .slice(CseMachine.getStackTruncated() ? -10 : 0)
       .map(stashItemToComponent);
   }
-  onMouseEnter(e: KonvaEventObject<MouseEvent>): void {}
-  onMouseLeave(e: KonvaEventObject<MouseEvent>): void {}
-
-  destroy() {
-    this.ref.current.destroyChildren();
-  }
 
   draw(): React.ReactNode {
-    return (
-      <Group key={Layout.key++} ref={this.ref}>
-        {this.stashItemComponents.map(c => c?.draw())}
-      </Group>
-    );
+    return <>{this.stashItemComponents.map(c => c?.draw())}</>;
   }
 }
diff --git a/src/features/cseMachine/components/Text.tsx b/src/features/cseMachine/components/Text.tsx
index 2ef4f30281..2a5d93e19e 100644
--- a/src/features/cseMachine/components/Text.tsx
+++ b/src/features/cseMachine/components/Text.tsx
@@ -1,11 +1,20 @@
 import { KonvaEventObject } from 'konva/lib/Node';
+import { Label } from 'konva/lib/shapes/Label';
 import React from 'react';
 import { Label as KonvaLabel, Tag as KonvaTag, Text as KonvaText } from 'react-konva';
 
+import CseMachine from '../CseMachine';
 import { Config, ShapeDefaultProps } from '../CseMachineConfig';
 import { Layout } from '../CseMachineLayout';
 import { Data, IHoverable } from '../CseMachineTypes';
-import { getTextWidth, setHoveredCursor, setUnhoveredCursor } from '../CseMachineUtils';
+import {
+  defaultTextColor,
+  fadedTextColor,
+  getTextWidth,
+  isSourceObject,
+  setHoveredCursor,
+  setUnhoveredCursor
+} from '../CseMachineUtils';
 import { isCustomPrimitive } from '../utils/altLangs';
 import { Visible } from './Visible';
 
@@ -16,6 +25,8 @@ export interface TextOptions {
   fontStyle: string;
   fontVariant: string;
   isStringIdentifiable: boolean;
+  faded: boolean;
+  hidden: boolean;
 }
 
 export const defaultOptions: TextOptions = {
@@ -24,7 +35,9 @@ export const defaultOptions: TextOptions = {
   fontSize: Config.FontSize, // in pixels. Default is 12
   fontStyle: Config.FontStyle, // can be normal, bold, or italic. Default is normal
   fontVariant: Config.FontVariant, // can be normal or small-caps. Default is normal
-  isStringIdentifiable: false // if true, contain strings within double quotation marks "". Default is false
+  isStringIdentifiable: false, // if true, contain strings within double quotation marks "". Default is false
+  faded: false, // if true, draws text with a lighter shade
+  hidden: false // if true, hides the text when only when first drawn
 };
 
 /** this class encapsulates a string to be drawn onto the canvas */
@@ -36,6 +49,7 @@ export class Text extends Visible implements IHoverable {
   readonly fullStr: string; // full string representation of data
 
   readonly options: TextOptions = defaultOptions;
+  readonly labelRef: React.RefObject<Label> = React.createRef();
 
   constructor(
     readonly data: Data,
@@ -49,13 +63,13 @@ export class Text extends Visible implements IHoverable {
 
     const { fontSize, fontStyle, fontFamily, maxWidth, isStringIdentifiable } = this.options;
 
-    this.fullStr = this.partialStr =
-      // if the data is a custom primitive, use its toString method
-      isCustomPrimitive(data)
-        ? String(data)
-        : isStringIdentifiable
-        ? JSON.stringify(data) || String(data)
-        : String(data);
+    this.fullStr = this.partialStr = isSourceObject(data)
+      ? data.toReplString()
+      : isCustomPrimitive(data)
+      ? String(data)
+      : isStringIdentifiable
+      ? JSON.stringify(data) || String(data)
+      : String(data);
     this._height = fontSize;
     const widthOf = (s: string) => getTextWidth(s, `${fontStyle} ${fontSize}px ${fontFamily}`);
     if (widthOf(this.partialStr) > maxWidth) {
@@ -73,14 +87,14 @@ export class Text extends Visible implements IHoverable {
 
   onMouseEnter = ({ currentTarget }: KonvaEventObject<MouseEvent>) => {
     setHoveredCursor(currentTarget);
-    this.ref.current.moveToTop();
-    this.ref.current.show();
+    this.labelRef.current?.moveToTop();
+    this.labelRef.current?.show();
     currentTarget.getLayer()?.draw();
   };
 
   onMouseLeave = ({ currentTarget }: KonvaEventObject<MouseEvent>) => {
     setUnhoveredCursor(currentTarget);
-    this.ref.current.hide();
+    this.labelRef.current?.hide();
     currentTarget.getLayer()?.draw();
   };
 
@@ -89,7 +103,8 @@ export class Text extends Visible implements IHoverable {
       fontFamily: this.options.fontFamily,
       fontSize: this.options.fontSize,
       fontStyle: this.options.fontStyle,
-      fill: Config.SA_WHITE
+      fill: this.options.faded ? fadedTextColor() : defaultTextColor(),
+      visible: !this.options.hidden
     };
     return (
       <React.Fragment key={Layout.key++}>
@@ -99,17 +114,27 @@ export class Text extends Visible implements IHoverable {
           onMouseEnter={this.onMouseEnter}
           onMouseLeave={this.onMouseLeave}
         >
-          <KonvaText {...ShapeDefaultProps} key={Layout.key++} text={this.partialStr} {...props} />
+          <KonvaText
+            {...ShapeDefaultProps}
+            key={Layout.key++}
+            ref={this.ref}
+            text={this.partialStr}
+            {...props}
+          />
         </KonvaLabel>
         <KonvaLabel
           x={this.x()}
           y={this.y()}
-          ref={this.ref}
+          ref={this.labelRef}
           visible={false}
           onMouseEnter={this.onMouseEnter}
           onMouseLeave={this.onMouseLeave}
         >
-          <KonvaTag {...ShapeDefaultProps} fill={'black'} opacity={0.5} />
+          <KonvaTag
+            {...ShapeDefaultProps}
+            fill={CseMachine.getPrintableMode() ? Config.PrintHoverBgColor : Config.HoverBgColor}
+            opacity={0.5}
+          />
           <KonvaText {...ShapeDefaultProps} key={Layout.key++} text={this.fullStr} {...props} />
         </KonvaLabel>
       </React.Fragment>
diff --git a/src/features/cseMachine/components/Visible.tsx b/src/features/cseMachine/components/Visible.tsx
index 76deeb945d..d25336b63c 100644
--- a/src/features/cseMachine/components/Visible.tsx
+++ b/src/features/cseMachine/components/Visible.tsx
@@ -30,6 +30,6 @@ export abstract class Visible implements IVisible {
   reset(): void {
     this._isDrawn = false;
   }
-  readonly ref: RefObject<any> = React.createRef();
+  public ref: RefObject<any> = React.createRef();
   abstract draw(key?: number): React.ReactNode;
 }
diff --git a/src/features/cseMachine/components/arrows/ArrowFromArrayUnit.tsx b/src/features/cseMachine/components/arrows/ArrowFromArrayUnit.tsx
index f4031acd31..b670f06e4a 100644
--- a/src/features/cseMachine/components/arrows/ArrowFromArrayUnit.tsx
+++ b/src/features/cseMachine/components/arrows/ArrowFromArrayUnit.tsx
@@ -9,6 +9,11 @@ import { GenericArrow } from './GenericArrow';
 
 /** this class encapsulates an GenericArrow to be drawn between 2 points */
 export class ArrowFromArrayUnit extends GenericArrow<ArrayUnit, Value> {
+  constructor(from: ArrayUnit) {
+    super(from);
+    this.faded = !from.parent.isReferenced();
+  }
+
   protected calculateSteps() {
     const from = this.source;
     const to = this.target;
diff --git a/src/features/cseMachine/components/arrows/ArrowFromControlItemComponent.tsx b/src/features/cseMachine/components/arrows/ArrowFromControlItemComponent.tsx
index 91920bca4d..756a8a775d 100644
--- a/src/features/cseMachine/components/arrows/ArrowFromControlItemComponent.tsx
+++ b/src/features/cseMachine/components/arrows/ArrowFromControlItemComponent.tsx
@@ -1,6 +1,6 @@
 import { FnValue } from '../../components/values/FnValue';
 import { GlobalFnValue } from '../../components/values/GlobalFnValue';
-import { Config } from '../../CseMachineConfig';
+import { ControlStashConfig } from '../../CseMachineControlStashConfig';
 import { StepsArray } from '../../CseMachineTypes';
 import { ControlItemComponent } from '../ControlItemComponent';
 import { Frame } from '../Frame';
@@ -16,17 +16,17 @@ export class ArrowFromControlItemComponent extends GenericArrow<
     const to = this.target;
     if (!to) return [];
 
-    const steps: StepsArray = [(x, y) => [x + from.width() / 1, y + from.height() / 2]];
-
-    if (to.x() < from.x()) {
-      steps.push((x, y) => [x + Config.TextMargin, y]);
-      steps.push((x, y) => [x, y - from.height() / 2 - Config.TextMargin]);
-      steps.push((x, y) => [to.x() + to.width() + Config.ArrowHeadSize, y]);
-      steps.push((x, y) => [x, to.y()]);
-      steps.push((x, y) => [x - Config.ArrowHeadSize, y]);
-    } else {
-      steps.push((x, y) => [to.x(), to.y()]);
-    }
+    const steps: StepsArray = [
+      (x, y) => [x + from.width(), y + from.height() / 2],
+      () => [
+        to.x(),
+        to.y() +
+          // Draw arrow slightly below frame corner if frame is far enough
+          (to.x() > ControlStashConfig.ControlItemWidth + 100
+            ? ControlStashConfig.ControlItemTextPadding
+            : 0)
+      ]
+    ];
 
     return steps;
   }
diff --git a/src/features/cseMachine/components/arrows/ArrowFromFn.tsx b/src/features/cseMachine/components/arrows/ArrowFromFn.tsx
index 79b2cb0ad6..37b4585cf3 100644
--- a/src/features/cseMachine/components/arrows/ArrowFromFn.tsx
+++ b/src/features/cseMachine/components/arrows/ArrowFromFn.tsx
@@ -7,19 +7,21 @@ import { GenericArrow } from './GenericArrow';
 
 /** this class encapsulates an GenericArrow to be drawn between 2 points */
 export class ArrowFromFn extends GenericArrow<FnValue | GlobalFnValue, Frame> {
+  constructor(from: FnValue | GlobalFnValue) {
+    super(from);
+    this.faded = !from.isReferenced();
+  }
+
   protected calculateSteps() {
     const from = this.source;
     const to = this.target;
     if (!to) return [];
 
-    const steps: StepsArray = [(x, y) => [x + Config.FnRadius * 3, y]];
-
-    if (to.y() < from.y() && from.y() < to.y() + to.height()) {
-      steps.push((x, y) => [x, y - Config.FnRadius * 2]);
-      steps.push((x, y) => [to.x() + (from.x() < to.x() ? 0 : to.width()), y]);
-    } else {
-      steps.push(() => [to.x() + to.width() / 2, to.y() + (to.y() < from.y() ? to.height() : 0)]);
-    }
+    const steps: StepsArray = [
+      (x, y) => [x + Config.FnRadius * 3, y],
+      (x, y) => [x, y - Config.FnRadius * 2],
+      (x, y) => [to.x() + (from.x() < to.x() ? 0 : to.width()), y]
+    ];
 
     return steps;
   }
diff --git a/src/features/cseMachine/components/arrows/ArrowFromFrame.tsx b/src/features/cseMachine/components/arrows/ArrowFromFrame.tsx
index fe9c797bcb..9f31781305 100644
--- a/src/features/cseMachine/components/arrows/ArrowFromFrame.tsx
+++ b/src/features/cseMachine/components/arrows/ArrowFromFrame.tsx
@@ -16,7 +16,7 @@ export class ArrowFromFrame extends GenericArrow<Frame, Frame> {
       steps.push((x, y) => [to.x() + Config.FramePaddingX, y]);
     }
 
-    steps.push((x, y) => [to.x() + Config.FramePaddingX, to.y() + to.height()]);
+    steps.push(() => [to.x() + Config.FramePaddingX, to.y() + to.height()]);
     return steps;
   }
 }
diff --git a/src/features/cseMachine/components/arrows/ArrowFromStashItemComponent.tsx b/src/features/cseMachine/components/arrows/ArrowFromStashItemComponent.tsx
index f48f52eb0b..cc7971246c 100644
--- a/src/features/cseMachine/components/arrows/ArrowFromStashItemComponent.tsx
+++ b/src/features/cseMachine/components/arrows/ArrowFromStashItemComponent.tsx
@@ -1,6 +1,5 @@
 import { FnValue } from '../../components/values/FnValue';
 import { GlobalFnValue } from '../../components/values/GlobalFnValue';
-import { Config } from '../../CseMachineConfig';
 import { StepsArray } from '../../CseMachineTypes';
 import { Frame } from '../Frame';
 import { StashItemComponent } from '../StashItemComponent';
@@ -17,17 +16,10 @@ export class ArrowFromStashItemComponent extends GenericArrow<
     const to = this.target;
     if (!to) return [];
 
-    const steps: StepsArray = [(x, y) => [x + from.width() / 2, y + from.height() / 1]];
-
-    if (to.x() < from.x()) {
-      steps.push((x, y) => [x + Config.TextMargin, y]);
-      steps.push((x, y) => [x, y - from.height() / 2 - Config.TextMargin]);
-      steps.push((x, y) => [to.x() + to.width() + Config.ArrowHeadSize, y]);
-      steps.push((x, y) => [x, to.y()]);
-      steps.push((x, y) => [x - Config.ArrowHeadSize, y]);
-    } else {
-      steps.push((x, y) => [to.x(), to.y()]);
-    }
+    const steps: StepsArray = [
+      (x, y) => [x + from.width() / 2, y + from.height()],
+      (x, y) => [to.x() + (to.x() < x ? to.width() / 2 : 0), to.y()]
+    ];
 
     return steps;
   }
diff --git a/src/features/cseMachine/components/arrows/GenericArrow.tsx b/src/features/cseMachine/components/arrows/GenericArrow.tsx
index 180b891792..38786dfa1e 100644
--- a/src/features/cseMachine/components/arrows/GenericArrow.tsx
+++ b/src/features/cseMachine/components/arrows/GenericArrow.tsx
@@ -3,7 +3,7 @@ import { Arrow as KonvaArrow, Group as KonvaGroup, Path as KonvaPath } from 'rea
 import { Config, ShapeDefaultProps } from '../../CseMachineConfig';
 import { Layout } from '../../CseMachineLayout';
 import { IVisible, StepsArray } from '../../CseMachineTypes';
-import { defaultSAColor } from '../../CseMachineUtils';
+import { defaultStrokeColor, fadedStrokeColor } from '../../CseMachineUtils';
 import { Visible } from '../Visible';
 
 /** this class encapsulates an arrow to be drawn between 2 points */
@@ -12,6 +12,7 @@ export class GenericArrow<Source extends IVisible, Target extends IVisible> exte
   points: number[] = [];
   source: Source;
   target: Target | undefined;
+  faded: boolean = false;
 
   constructor(from: Source) {
     super();
@@ -20,6 +21,7 @@ export class GenericArrow<Source extends IVisible, Target extends IVisible> exte
     this._x = from.x();
     this._y = from.y();
   }
+
   path(): string {
     return this._path;
   }
@@ -28,38 +30,7 @@ export class GenericArrow<Source extends IVisible, Target extends IVisible> exte
     this.target = to;
     this._width = Math.abs(to.x() - this.source.x());
     this._height = Math.abs(to.y() - this.source.y());
-    return this;
-  }
-
-  /**
-   * Calculates the steps that this arrows takes.
-   * The arrow is decomposed into numerous straight line segments, each of which we
-   * can consider as a step of dx in the x direction and of dy in the y direction.
-   * The line segment is thus defined by 2 points (x, y) and (x + dx, y + dy)
-   * where (x, y) is the ending coordinate of the previous line segment.
-   * This function returns an array of such steps, represented by an array of functions
-   *  [ (x, y) => [x + dx1, y + dy1], (x, y) => [x + dx2, y + dy2], ... ].
-   * From this, we can retrieve the points that make up the arrow as such:
-   * (from.x from.y), (from.x + dx1, from.y + dy1), (from.x + dx1 + dx2, from.y + dy1 + dy2), ..
-   *
-   * Note that the functions need not be of the form (x, y) => [x + dx, y + dy];
-   * (x, y) => [to.x, to.y] is valid as well, and is used to specify a step to the ending coordinates
-   *
-   * @return an array of steps represented by functions
-   */
-  protected calculateSteps(): StepsArray {
-    const to = this.target;
-    if (!to) return [];
-    return [() => [to.x(), to.y()]];
-  }
-
-  onMouseEnter = () => {};
-
-  onMouseLeave = () => {};
-
-  onClick() {}
 
-  draw() {
     const points = this.calculateSteps().reduce<Array<number>>(
       (points, step) => [...points, ...step(points[points.length - 2], points[points.length - 1])],
       [this.source.x(), this.source.y()]
@@ -96,24 +67,47 @@ export class GenericArrow<Source extends IVisible, Target extends IVisible> exte
     }
     // end path
     this._path += `L ${points[points.length - 2]} ${points[points.length - 1]} `;
+    this.points = points;
+    return this;
+  }
+
+  /**
+   * Calculates the steps that this arrows takes.
+   * The arrow is decomposed into numerous straight line segments, each of which we
+   * can consider as a step of dx in the x direction and of dy in the y direction.
+   * The line segment is thus defined by 2 points (x, y) and (x + dx, y + dy)
+   * where (x, y) is the ending coordinate of the previous line segment.
+   * This function returns an array of such steps, represented by an array of functions
+   *  [ (x, y) => [x + dx1, y + dy1], (x, y) => [x + dx2, y + dy2], ... ].
+   * From this, we can retrieve the points that make up the arrow as such:
+   * (from.x from.y), (from.x + dx1, from.y + dy1), (from.x + dx1 + dx2, from.y + dy1 + dy2), ..
+   *
+   * Note that the functions need not be of the form (x, y) => [x + dx, y + dy];
+   * (x, y) => [to.x, to.y] is valid as well, and is used to specify a step to the ending coordinates
+   *
+   * @return an array of steps represented by functions
+   */
+  protected calculateSteps(): StepsArray {
+    const to = this.target;
+    if (!to) return [];
+    return [() => [to.x(), to.y()]];
+  }
+
+  draw() {
+    const stroke = this.faded ? fadedStrokeColor() : defaultStrokeColor();
     return (
-      <KonvaGroup
-        key={Layout.key++}
-        onMouseEnter={this.onMouseEnter}
-        onMouseLeave={this.onMouseLeave}
-      >
+      <KonvaGroup key={Layout.key++} ref={this.ref} listening={false}>
         <KonvaPath
           {...ShapeDefaultProps}
-          stroke={defaultSAColor()}
+          stroke={stroke}
           strokeWidth={Config.ArrowStrokeWidth}
-          hitStrokeWidth={Config.ArrowHitStrokeWidth}
           data={this.path()}
           key={Layout.key++}
         />
         <KonvaArrow
           {...ShapeDefaultProps}
-          points={points.slice(points.length - 4)}
-          fill={defaultSAColor()}
+          points={this.points.slice(this.points.length - 4)}
+          fill={stroke}
           strokeEnabled={false}
           pointerWidth={Config.ArrowHeadSize}
           key={Layout.key++}
diff --git a/src/features/cseMachine/components/values/ArrayValue.tsx b/src/features/cseMachine/components/values/ArrayValue.tsx
index 8701a3efb6..1726254c91 100644
--- a/src/features/cseMachine/components/values/ArrayValue.tsx
+++ b/src/features/cseMachine/components/values/ArrayValue.tsx
@@ -1,8 +1,10 @@
+import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
+import { Group } from 'react-konva';
 
 import { Config } from '../../CseMachineConfig';
 import { Layout } from '../../CseMachineLayout';
-import { DataArray, ReferenceType } from '../../CseMachineTypes';
+import { DataArray, IHoverable, ReferenceType } from '../../CseMachineTypes';
 import { isMainReference } from '../../CseMachineUtils';
 import { ArrayEmptyUnit } from '../ArrayEmptyUnit';
 import { ArrayUnit } from '../ArrayUnit';
@@ -12,7 +14,7 @@ import { Value } from './Value';
 
 /** this class encapsulates an array value in source,
  *  defined as a JS array with not 2 elements */
-export class ArrayValue extends Value {
+export class ArrayValue extends Value implements IHoverable {
   /** array of units this array is made of */
   units: ArrayUnit[] = [];
 
@@ -23,7 +25,7 @@ export class ArrayValue extends Value {
     firstReference: ReferenceType
   ) {
     super();
-    Layout.memoizeValue(this);
+    Layout.memoizeValue(data, this);
     this.addReference(firstReference);
   }
 
@@ -44,7 +46,7 @@ export class ArrayValue extends Value {
       }
     }
 
-    this._width = this.data.length * Config.DataUnitWidth + Config.DataMinWidth;
+    this._width = Math.max(this.data.length * Config.DataUnitWidth, Config.DataMinWidth);
     this._height = Config.DataUnitHeight;
 
     // initialize array units from the last index
@@ -75,15 +77,42 @@ export class ArrayValue extends Value {
     }
   }
 
+  markAsReferenced() {
+    if (this.isReferenced()) return;
+    super.markAsReferenced();
+    for (const unit of this.units) {
+      unit.value.markAsReferenced();
+    }
+  }
+
+  onMouseEnter = (e: KonvaEventObject<MouseEvent>) => {
+    e.cancelBubble = true;
+    for (const unit of this.units) {
+      unit.showIndex();
+    }
+  };
+
+  onMouseLeave = (e: KonvaEventObject<MouseEvent>) => {
+    e.cancelBubble = true;
+    for (const unit of this.units) {
+      unit.hideIndex();
+    }
+  };
+
   draw(): React.ReactNode {
     if (this.isDrawn()) return null;
     this._isDrawn = true;
     return (
-      <React.Fragment key={Layout.key++}>
+      <Group
+        key={Layout.key++}
+        ref={this.ref}
+        onMouseEnter={this.onMouseEnter}
+        onMouseLeave={this.onMouseLeave}
+      >
         {this.units.length > 0
           ? this.units.map(unit => unit.draw())
           : new ArrayEmptyUnit(this).draw()}
-      </React.Fragment>
+      </Group>
     );
   }
 }
diff --git a/src/features/cseMachine/components/values/FnValue.tsx b/src/features/cseMachine/components/values/FnValue.tsx
index 38aab1170a..3cc9f9637d 100644
--- a/src/features/cseMachine/components/values/FnValue.tsx
+++ b/src/features/cseMachine/components/values/FnValue.tsx
@@ -1,4 +1,5 @@
 import { KonvaEventObject } from 'konva/lib/Node';
+import { Label } from 'konva/lib/shapes/Label';
 import React, { RefObject } from 'react';
 import {
   Circle,
@@ -11,18 +12,23 @@ import {
 import CseMachine from '../../CseMachine';
 import { Config, ShapeDefaultProps } from '../../CseMachineConfig';
 import { Layout } from '../../CseMachineLayout';
-import { Closure, EnvTreeNode, IHoverable, ReferenceType } from '../../CseMachineTypes';
+import { IHoverable, NonGlobalFn, ReferenceType } from '../../CseMachineTypes';
 import {
-  defaultSAColor,
+  defaultStrokeColor,
+  defaultTextColor,
+  fadedStrokeColor,
+  fadedTextColor,
   getBodyText,
-  getNonEmptyEnv,
   getParamsText,
   getTextWidth,
-  isEmptyEnvironment,
-  isMainReference
+  isMainReference,
+  isStreamFn,
+  setHoveredCursor,
+  setUnhoveredCursor
 } from '../../CseMachineUtils';
 import { ArrowFromFn } from '../arrows/ArrowFromFn';
 import { Binding } from '../Binding';
+import { Frame } from '../Frame';
 import { Value } from './Value';
 
 /** this class encapsulates a JS Slang function (not from the global frame) that
@@ -31,43 +37,61 @@ export class FnValue extends Value implements IHoverable {
   /** name of this function */
   readonly radius: number = Config.FnRadius;
   readonly innerRadius: number = Config.FnInnerRadius;
-  tooltipWidth!: number;
-  centerX!: number;
 
-  fnName!: string;
-  paramsText!: string;
-  bodyText!: string;
-  exportBodyText!: string;
-  tooltip!: string;
-  exportTooltip!: string;
-  exportTooltipWidth!: number;
-  private _arrow: ArrowFromFn | undefined;
+  readonly fnName: string;
+  readonly paramsText: string;
+  readonly bodyText: string;
+  readonly exportBodyText: string;
+  readonly tooltip: string;
+  readonly tooltipWidth: number;
+  readonly exportTooltip: string;
+  readonly exportTooltipWidth: number;
+  readonly labelRef: RefObject<Label> = React.createRef();
 
-  /** the parent/enclosing environment of this fn value */
-  enclosingEnvNode!: EnvTreeNode;
-  readonly labelRef: RefObject<any> = React.createRef();
+  centerX: number;
+  enclosingFrame?: Frame;
+  private _arrow: ArrowFromFn | undefined;
 
   constructor(
     /** underlying JS Slang function (contains extra props) */
-    readonly data: Closure,
+    readonly data: NonGlobalFn,
     /** what this value is being referenced by */
     firstReference: ReferenceType
   ) {
     super();
-    // Workaround for `stream_tail`, as the closure will always be linked to the
-    // "functionBodyEnvironment" which might be empty
-    if (isEmptyEnvironment(data.environment)) {
-      data.environment = getNonEmptyEnv(data.environment);
-    }
-    Layout.memoizeValue(this);
+    Layout.memoizeValue(data, this);
+
+    this.centerX = 0;
+    this._width = this.radius * 4;
+    this._height = this.radius * 2;
+
+    this.enclosingFrame = Frame.getFrom(this.data.environment);
+    this.fnName = isStreamFn(this.data) ? '' : this.data.functionName;
+
+    this.paramsText = `params: ${getParamsText(this.data)}`;
+    this.bodyText = `body: ${getBodyText(this.data)}`;
+    this.exportBodyText =
+      (this.bodyText.length > 23 ? this.bodyText.slice(0, 20) : this.bodyText)
+        .split('\n')
+        .slice(0, 2)
+        .join('\n') + ' ...';
+    this.tooltip = `${this.paramsText}\n${this.bodyText}`;
+    this.exportTooltip = `${this.paramsText}\n${this.exportBodyText}`;
+    this.tooltipWidth = Math.max(getTextWidth(this.paramsText), getTextWidth(this.bodyText));
+    this.exportTooltipWidth = Math.max(
+      getTextWidth(this.paramsText),
+      getTextWidth(this.exportBodyText)
+    );
+
     this.addReference(firstReference);
   }
 
   handleNewReference(newReference: ReferenceType): void {
     if (!isMainReference(this, newReference)) return;
+
     // derive the coordinates from the main reference (binding / array unit)
     if (newReference instanceof Binding) {
-      this._x = newReference.frame.x() + newReference.frame.width() + Config.FrameMarginX / 4;
+      this._x = newReference.frame.x() + newReference.frame.width() + Config.FrameMarginX;
       this._y = newReference.y();
       this.centerX = this._x + this.radius * 2;
     } else {
@@ -82,63 +106,44 @@ export class FnValue extends Value implements IHoverable {
       this._x = this.centerX - this.radius * 2;
     }
     this._y += this.radius;
+  }
 
-    this._width = this.radius * 4;
-    this._height = this.radius * 2;
-
-    this.enclosingEnvNode = Layout.environmentTree.getTreeNode(
-      this.data.environment
-    ) as EnvTreeNode;
-    this.fnName = this.data.functionName;
-
-    this.paramsText = `params: (${getParamsText(this.data)})`;
-    this.bodyText = `body: ${getBodyText(this.data)}`;
-    this.exportBodyText =
-      (this.bodyText.length > 23 ? this.bodyText.slice(0, 20) : this.bodyText)
-        .split('\n')
-        .slice(0, 2)
-        .join('\n') + ' ...';
-    this.tooltip = `${this.paramsText}\n${this.bodyText}`;
-    this.exportTooltip = `${this.paramsText}\n${this.exportBodyText}`;
-    this.tooltipWidth = Math.max(getTextWidth(this.paramsText), getTextWidth(this.bodyText));
-    this.exportTooltipWidth = Math.max(
-      getTextWidth(this.paramsText),
-      getTextWidth(this.exportBodyText)
-    );
+  arrow(): ArrowFromFn | undefined {
+    return this._arrow;
   }
 
   onMouseEnter = ({ currentTarget }: KonvaEventObject<MouseEvent>) => {
     if (CseMachine.getPrintableMode()) return;
-    this.ref.current.moveToTop();
-    this.labelRef.current.show();
+    setHoveredCursor(currentTarget);
+    this.labelRef.current?.moveToTop();
+    this.labelRef.current?.show();
   };
 
   onMouseLeave = ({ currentTarget }: KonvaEventObject<MouseEvent>) => {
     if (CseMachine.getPrintableMode()) return;
-    this.labelRef.current.hide();
+    setUnhoveredCursor(currentTarget);
+    this.labelRef.current?.hide();
   };
 
   draw(): React.ReactNode {
     if (this.fnName === undefined) {
-      throw new Error('Error: Closure has no main reference and is not initialised!');
+      throw new Error('Closure has no main reference and is not initialised!');
     }
-    this._arrow =
-      this.enclosingEnvNode.frame &&
-      (new ArrowFromFn(this).to(this.enclosingEnvNode.frame) as ArrowFromFn);
+    if (this.enclosingFrame) {
+      this._arrow = new ArrowFromFn(this).to(this.enclosingFrame) as ArrowFromFn;
+    }
+    const textColor = this.isReferenced() ? defaultTextColor() : fadedTextColor();
+    const strokeColor = this.isReferenced() ? defaultStrokeColor() : fadedStrokeColor();
     return (
       <React.Fragment key={Layout.key++}>
-        <Group
-          onMouseEnter={e => this.onMouseEnter(e)}
-          onMouseLeave={e => this.onMouseLeave(e)}
-          ref={this.ref}
-        >
+        <Group onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} ref={this.ref}>
           <Circle
             {...ShapeDefaultProps}
             key={Layout.key++}
             x={this.centerX - this.radius}
             y={this.y()}
             radius={this.radius}
-            stroke={defaultSAColor()}
+            stroke={strokeColor}
           />
           <Circle
             {...ShapeDefaultProps}
@@ -146,7 +151,7 @@ export class FnValue extends Value implements IHoverable {
             x={this.centerX - this.radius}
             y={this.y()}
             radius={this.innerRadius}
-            fill={defaultSAColor()}
+            fill={strokeColor}
           />
           <Circle
             {...ShapeDefaultProps}
@@ -154,7 +159,7 @@ export class FnValue extends Value implements IHoverable {
             x={this.centerX + this.radius}
             y={this.y()}
             radius={this.radius}
-            stroke={defaultSAColor()}
+            stroke={strokeColor}
           />
           <Circle
             {...ShapeDefaultProps}
@@ -162,44 +167,33 @@ export class FnValue extends Value implements IHoverable {
             x={this.centerX + this.radius}
             y={this.y()}
             radius={this.innerRadius}
-            fill={defaultSAColor()}
+            fill={strokeColor}
           />
         </Group>
-        {CseMachine.getPrintableMode() ? (
-          <KonvaLabel
-            x={this.x() + this.width() + Config.TextPaddingX * 2}
-            y={this.y() - Config.TextPaddingY}
-            visible={true}
-            ref={this.labelRef}
-          >
-            <KonvaTag stroke="black" fill={'white'} opacity={Config.FnTooltipOpacity} />
-            <KonvaText
-              text={this.exportTooltip}
-              fontFamily={Config.FontFamily}
-              fontSize={Config.FontSize}
-              fontStyle={Config.FontStyle}
-              fill={Config.SA_BLUE}
-              padding={5}
-            />
-          </KonvaLabel>
-        ) : (
-          <KonvaLabel
-            x={this.x() + this.width() + Config.TextPaddingX * 2}
-            y={this.y() - Config.TextPaddingY}
-            visible={false}
-            ref={this.labelRef}
-          >
-            <KonvaTag stroke="black" fill={'black'} opacity={Config.FnTooltipOpacity} />
-            <KonvaText
-              text={this.tooltip}
-              fontFamily={Config.FontFamily}
-              fontSize={Config.FontSize}
-              fontStyle={Config.FontStyle}
-              fill={Config.SA_WHITE}
-              padding={5}
+        <KonvaLabel
+          x={this.x() + this.width() + Config.TextPaddingX * 2}
+          y={this.y() - Config.TextPaddingY}
+          visible={CseMachine.getPrintableMode()}
+          ref={this.labelRef}
+        >
+          {CseMachine.getPrintableMode() ? (
+            <KonvaTag stroke={strokeColor} />
+          ) : (
+            <KonvaTag
+              stroke={Config.HoverBgColor}
+              fill={Config.HoverBgColor}
+              opacity={Config.FnTooltipOpacity}
             />
-          </KonvaLabel>
-        )}
+          )}
+          <KonvaText
+            text={CseMachine.getPrintableMode() ? this.exportTooltip : this.tooltip}
+            fontFamily={Config.FontFamily}
+            fontSize={Config.FontSize}
+            fontStyle={Config.FontStyle}
+            fill={textColor}
+            padding={5}
+          />
+        </KonvaLabel>
         {this._arrow?.draw()}
       </React.Fragment>
     );
diff --git a/src/features/cseMachine/components/values/GlobalFnValue.tsx b/src/features/cseMachine/components/values/GlobalFnValue.tsx
index 1f88b826ae..b4e4711802 100644
--- a/src/features/cseMachine/components/values/GlobalFnValue.tsx
+++ b/src/features/cseMachine/components/values/GlobalFnValue.tsx
@@ -1,4 +1,5 @@
 import { KonvaEventObject } from 'konva/lib/Node';
+import { Label } from 'konva/lib/shapes/Label';
 import React, { RefObject } from 'react';
 import {
   Circle,
@@ -12,7 +13,17 @@ import CseMachine from '../../CseMachine';
 import { Config, ShapeDefaultProps } from '../../CseMachineConfig';
 import { Layout } from '../../CseMachineLayout';
 import { GlobalFn, IHoverable } from '../../CseMachineTypes';
-import { defaultSAColor, getBodyText, getParamsText, getTextWidth } from '../../CseMachineUtils';
+import {
+  defaultStrokeColor,
+  defaultTextColor,
+  fadedStrokeColor,
+  fadedTextColor,
+  getBodyText,
+  getParamsText,
+  getTextWidth,
+  setHoveredCursor,
+  setUnhoveredCursor
+} from '../../CseMachineUtils';
 import { ArrowFromFn } from '../arrows/ArrowFromFn';
 import { Binding } from '../Binding';
 import { Value } from './Value';
@@ -20,21 +31,20 @@ import { Value } from './Value';
 /** this encapsulates a function from the global frame
  * (which has no extra props such as environment or fnName) */
 export class GlobalFnValue extends Value implements IHoverable {
-  centerX: number;
-  readonly tooltipWidth: number;
-  readonly exportTooltipWidth: number;
   readonly radius: number = Config.FnRadius;
   readonly innerRadius: number = Config.FnInnerRadius;
-  private _arrow: ArrowFromFn | undefined;
 
   readonly paramsText: string;
   readonly bodyText: string;
   readonly exportBodyText: string;
   readonly tooltip: string;
+  readonly tooltipWidth: number;
   readonly exportTooltip: string;
-  private selected: boolean = false;
+  readonly exportTooltipWidth: number;
+  readonly labelRef: RefObject<Label> = React.createRef();
 
-  readonly labelRef: RefObject<any> = React.createRef();
+  centerX: number;
+  private _arrow: ArrowFromFn | undefined;
 
   constructor(
     /** underlying function */
@@ -43,11 +53,10 @@ export class GlobalFnValue extends Value implements IHoverable {
     mainReference: Binding
   ) {
     super();
-    Layout.memoizeValue(this);
-    this.references = [mainReference];
+    Layout.memoizeValue(data, this);
 
     // derive the coordinates from the main reference (binding)
-    this._x = mainReference.frame.x() + mainReference.frame.width() + Config.FrameMarginX / 4;
+    this._x = mainReference.frame.x() + mainReference.frame.width() + Config.FrameMarginX;
     this._y = mainReference.y();
     this.centerX = this._x + this.radius * 2;
     this._y += this.radius;
@@ -64,68 +73,51 @@ export class GlobalFnValue extends Value implements IHoverable {
         .join('\n') + ' ...';
     this.tooltip = `${this.paramsText}\n${this.bodyText}`;
     this.exportTooltip = `${this.paramsText}\n${this.exportBodyText}`;
-    this.tooltipWidth =
-      Math.max(getTextWidth(this.paramsText), getTextWidth(this.bodyText)) + Config.TextPaddingX;
+    this.tooltipWidth = Math.max(getTextWidth(this.paramsText), getTextWidth(this.bodyText));
     this.exportTooltipWidth = Math.max(
       getTextWidth(this.paramsText),
       getTextWidth(this.exportBodyText)
     );
-  }
 
-  handleNewReference(): void {
-    // do nothing, since the first reference which is a binding in the global frame,
-    // is also the main reference
+    this.addReference(mainReference);
   }
 
+  handleNewReference(): void {}
+
   arrow(): ArrowFromFn | undefined {
     return this._arrow;
   }
 
-  onMouseEnter = (_: KonvaEventObject<MouseEvent>) => {
+  onMouseEnter = ({ currentTarget }: KonvaEventObject<MouseEvent>) => {
     if (CseMachine.getPrintableMode()) return;
-    this.labelRef.current.show();
+    setHoveredCursor(currentTarget);
+    this.labelRef.current?.moveToTop();
+    this.labelRef.current?.show();
   };
 
   onMouseLeave = ({ currentTarget }: KonvaEventObject<MouseEvent>) => {
     if (CseMachine.getPrintableMode()) return;
-    if (!this.selected) {
-      this.labelRef.current.hide();
-    } else {
-      const container = currentTarget.getStage()?.container();
-      container && (container.style.cursor = 'default');
-    }
-  };
-
-  onClick = (_: KonvaEventObject<MouseEvent>) => {
-    if (CseMachine.getPrintableMode()) return;
-    this.selected = !this.selected;
-    if (!this.selected) {
-      this.labelRef.current.hide();
-    } else {
-      this.labelRef.current.show();
-    }
+    setUnhoveredCursor(currentTarget);
+    this.labelRef.current?.hide();
   };
 
   draw(): React.ReactNode {
     this._isDrawn = true;
-    this._arrow =
-      Layout.globalEnvNode.frame &&
-      (new ArrowFromFn(this).to(Layout.globalEnvNode.frame) as ArrowFromFn);
+    if (Layout.globalEnvNode.frame) {
+      this._arrow = new ArrowFromFn(this).to(Layout.globalEnvNode.frame) as ArrowFromFn;
+    }
+    const textColor = this.isReferenced() ? defaultTextColor() : fadedTextColor();
+    const strokeColor = this.isReferenced() ? defaultStrokeColor() : fadedStrokeColor();
     return (
       <React.Fragment key={Layout.key++}>
-        <Group
-          onMouseEnter={e => this.onMouseEnter(e)}
-          onMouseLeave={e => this.onMouseLeave(e)}
-          onClick={e => this.onClick(e)}
-          ref={this.ref}
-        >
+        <Group onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} ref={this.ref}>
           <Circle
             {...ShapeDefaultProps}
             key={Layout.key++}
             x={this.centerX - this.radius}
             y={this.y()}
             radius={this.radius}
-            stroke={defaultSAColor()}
+            stroke={strokeColor}
           />
           <Circle
             {...ShapeDefaultProps}
@@ -133,7 +125,7 @@ export class GlobalFnValue extends Value implements IHoverable {
             x={this.centerX - this.radius}
             y={this.y()}
             radius={this.innerRadius}
-            fill={defaultSAColor()}
+            fill={strokeColor}
           />
           <Circle
             {...ShapeDefaultProps}
@@ -141,7 +133,7 @@ export class GlobalFnValue extends Value implements IHoverable {
             x={this.centerX + this.radius}
             y={this.y()}
             radius={this.radius}
-            stroke={defaultSAColor()}
+            stroke={strokeColor}
           />
           <Circle
             {...ShapeDefaultProps}
@@ -149,45 +141,34 @@ export class GlobalFnValue extends Value implements IHoverable {
             x={this.centerX + this.radius}
             y={this.y()}
             radius={this.innerRadius}
-            fill={defaultSAColor()}
+            fill={strokeColor}
           />
         </Group>
-        {CseMachine.getPrintableMode() ? (
-          <KonvaLabel
-            x={this.x() + this.width() + Config.TextPaddingX * 2}
-            y={this.y() - Config.TextPaddingY}
-            visible={true}
-            ref={this.labelRef}
-          >
-            <KonvaTag stroke="black" fill={'white'} opacity={Config.FnTooltipOpacity} />
-            <KonvaText
-              text={this.exportTooltip}
-              fontFamily={Config.FontFamily}
-              fontSize={Config.FontSize}
-              fontStyle={Config.FontStyle}
-              fill={Config.SA_BLUE}
-              padding={5}
-            />
-          </KonvaLabel>
-        ) : (
-          <KonvaLabel
-            x={this.x() + this.width() + Config.TextPaddingX * 2}
-            y={this.y() - Config.TextPaddingY}
-            visible={false}
-            ref={this.labelRef}
-          >
-            <KonvaTag stroke="black" fill={'black'} opacity={Config.FnTooltipOpacity} />
-            <KonvaText
-              text={this.tooltip}
-              fontFamily={Config.FontFamily}
-              fontSize={Config.FontSize}
-              fontStyle={Config.FontStyle}
-              fill={Config.SA_WHITE}
-              padding={5}
+        <KonvaLabel
+          x={this.x() + this.width() + Config.TextPaddingX * 2}
+          y={this.y() - Config.TextPaddingY}
+          visible={CseMachine.getPrintableMode()}
+          ref={this.labelRef}
+        >
+          {CseMachine.getPrintableMode() ? (
+            <KonvaTag stroke={strokeColor} />
+          ) : (
+            <KonvaTag
+              stroke={Config.HoverBgColor}
+              fill={Config.HoverBgColor}
+              opacity={Config.FnTooltipOpacity}
             />
-          </KonvaLabel>
-        )}
-        {Layout.globalEnvNode.frame && new ArrowFromFn(this).to(Layout.globalEnvNode.frame).draw()}
+          )}
+          <KonvaText
+            text={CseMachine.getPrintableMode() ? this.exportTooltip : this.tooltip}
+            fontFamily={Config.FontFamily}
+            fontSize={Config.FontSize}
+            fontStyle={Config.FontStyle}
+            fill={textColor}
+            padding={5}
+          />
+        </KonvaLabel>
+        {this._arrow?.draw()}
       </React.Fragment>
     );
   }
diff --git a/src/features/cseMachine/components/values/PrimitiveValue.tsx b/src/features/cseMachine/components/values/PrimitiveValue.tsx
index 837f6f4773..f87de6f7dc 100644
--- a/src/features/cseMachine/components/values/PrimitiveValue.tsx
+++ b/src/features/cseMachine/components/values/PrimitiveValue.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Config } from '../../CseMachineConfig';
 import { Layout } from '../../CseMachineLayout';
 import { Primitive, ReferenceType } from '../../CseMachineTypes';
-import { getTextWidth, isNull } from '../../CseMachineUtils';
+import { getTextWidth, isNull, isSourceObject } from '../../CseMachineUtils';
 import { ArrayNullUnit } from '../ArrayNullUnit';
 import { Binding } from '../Binding';
 import { Text } from '../Text';
@@ -21,32 +21,48 @@ export class PrimitiveValue extends Value {
     reference: ReferenceType
   ) {
     super();
-    this.references = [reference];
 
     // derive the coordinates from the main reference (binding / array unit)
     if (reference instanceof Binding) {
       this._x = reference.x() + getTextWidth(reference.keyString) + Config.TextPaddingX;
       this._y = reference.y();
-      this.text = new Text(this.data, this.x(), this.y(), { isStringIdentifiable: true });
+      this.text = new Text(this.data, this.x(), this.y(), {
+        isStringIdentifiable: !isSourceObject(data)
+      });
     } else {
       const maxWidth = reference.width();
-      const textWidth = Math.min(getTextWidth(String(this.data)), maxWidth);
+      const textWidth = isNull(this.data)
+        ? 0
+        : Math.min(
+            getTextWidth(isSourceObject(data) ? data.toReplString() : String(this.data)),
+            maxWidth
+          );
       this._x = reference.x() + (reference.width() - textWidth) / 2;
       this._y = reference.y() + (reference.height() - Config.FontSize) / 2;
       this.text = isNull(this.data)
         ? new ArrayNullUnit(reference)
         : new Text(this.data, this.x(), this.y(), {
             maxWidth: maxWidth,
-            isStringIdentifiable: true
+            isStringIdentifiable: !isSourceObject(data),
+            faded: true
           });
     }
 
     this._width = this.text.width();
     this._height = this.text.height();
+    this.ref = this.text.ref;
+    this.addReference(reference);
   }
 
   handleNewReference(): void {
-    throw new Error('Primitive values cannot have more than one reference!');
+    if (this.references.length > 1)
+      throw new Error('Primitive values cannot have more than one reference!');
+  }
+
+  markAsReferenced() {
+    if (this.isReferenced()) return;
+    super.markAsReferenced();
+    if (this.text instanceof Text) this.text.options.faded = false;
   }
 
   draw(): React.ReactNode {
diff --git a/src/features/cseMachine/components/values/UnassignedValue.tsx b/src/features/cseMachine/components/values/UnassignedValue.tsx
index 84e3f77b19..966aa368b5 100644
--- a/src/features/cseMachine/components/values/UnassignedValue.tsx
+++ b/src/features/cseMachine/components/values/UnassignedValue.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Config } from '../../CseMachineConfig';
 import { Layout } from '../../CseMachineLayout';
-import { ReferenceType, Unassigned } from '../../CseMachineTypes';
+import { Unassigned } from '../../CseMachineTypes';
 import { getTextWidth } from '../../CseMachineUtils';
 import { Binding } from '../Binding';
 import { Text } from '../Text';
@@ -13,30 +13,19 @@ export class UnassignedValue extends Value {
   readonly data: Unassigned = Symbol();
   readonly text: Text;
 
-  constructor(reference: ReferenceType) {
+  constructor(reference: Binding) {
     super();
     this.references = [reference];
 
-    // derive the coordinates from the main reference (binding / array unit)
-    if (reference instanceof Binding) {
-      this._x = reference.x() + getTextWidth(reference.keyString) + Config.TextPaddingX;
-      this._y = reference.y();
-      this.text = new Text(Config.UnassignedData, this._x, this._y, {
-        isStringIdentifiable: false
-      });
-    } else {
-      const maxWidth = reference.width();
-      const textWidth = Math.min(getTextWidth(String(this.data)), maxWidth);
-      this._x = reference.x() + (reference.width() - textWidth) / 2;
-      this._y = reference.y() + (reference.height() - Config.FontSize) / 2;
-      this.text = new Text(Config.UnassignedData, this._x, this._y, {
-        maxWidth: maxWidth,
-        isStringIdentifiable: false
-      });
-    }
+    this._x = reference.x() + getTextWidth(reference.keyString) + Config.TextPaddingX;
+    this._y = reference.y();
+    this.text = new Text(Config.UnassignedData, this._x, this._y, {
+      isStringIdentifiable: false
+    });
 
     this._width = this.text.width();
     this._height = this.text.height();
+    this.ref = this.text.ref;
   }
 
   handleNewReference(): void {
diff --git a/src/features/cseMachine/components/values/Value.tsx b/src/features/cseMachine/components/values/Value.tsx
index d713793ebb..58262bcd8f 100644
--- a/src/features/cseMachine/components/values/Value.tsx
+++ b/src/features/cseMachine/components/values/Value.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Data, ReferenceType } from '../../CseMachineTypes';
+import { isDummyReference } from '../../CseMachineUtils';
 import { Visible } from '../Visible';
 
 /** the value of a `Binding` or an `ArrayUnit` */
@@ -8,6 +9,20 @@ export abstract class Value extends Visible {
   /** the underlying data of this value */
   abstract readonly data: Data;
 
+  /**
+   * if the value has actual references, i.e. the references
+   * are not from dummy bindings or from unreferenced arrays
+   */
+  private _isReferenced: boolean = false;
+
+  isReferenced() {
+    return this._isReferenced;
+  }
+
+  markAsReferenced() {
+    this._isReferenced = true;
+  }
+
   /** references to this value */
   public references: ReferenceType[] = [];
 
@@ -15,6 +30,9 @@ export abstract class Value extends Visible {
   addReference(newReference: ReferenceType): void {
     this.references.push(newReference);
     this.handleNewReference(newReference);
+    if (!this.isReferenced() && !isDummyReference(newReference)) {
+      this.markAsReferenced();
+    }
   }
 
   /** additional logic to handle new references */
diff --git a/src/features/cseMachine/java/CseMachine.tsx b/src/features/cseMachine/java/CseMachine.tsx
new file mode 100644
index 0000000000..51b639c8f0
--- /dev/null
+++ b/src/features/cseMachine/java/CseMachine.tsx
@@ -0,0 +1,153 @@
+import { ECE } from 'java-slang';
+import { KonvaEventObject } from 'konva/lib/Node';
+import React, { RefObject } from 'react';
+import { Layer, Rect, Stage } from 'react-konva';
+
+import { defaultBackgroundColor } from '../CseMachineUtils';
+import { Config, ShapeDefaultProps } from './../CseMachineConfig';
+import { Control } from './components/Control';
+import { Environment } from './components/Environment';
+import { Stash } from './components/Stash';
+
+type SetVis = (vis: React.ReactNode) => void;
+type SetEditorHighlightedLines = (segments: [number, number][]) => void;
+
+export class CseMachine {
+  /** the unique key assigned to each node */
+  static key: number = 0;
+
+  /** callback function to update the visualization state in the SideContentCseMachine component */
+  private static setVis: SetVis;
+  /** function to highlight editor lines */
+  public static setEditorHighlightedLines: SetEditorHighlightedLines;
+
+  public static stageRef: RefObject<any> = React.createRef();
+  /** scale factor for zooming and out of canvas */
+  public static scaleFactor = 1.02;
+
+  static environment: Environment | undefined;
+  static control: Control | undefined;
+  static stash: Stash | undefined;
+
+  static init(setVis: SetVis, setEditorHighlightedLines: (segments: [number, number][]) => void) {
+    this.setVis = setVis;
+    this.setEditorHighlightedLines = setEditorHighlightedLines;
+  }
+
+  /** updates the visualization state in the SideContentCseMachine component based on
+   * the Java Slang context passed in */
+  static drawCse(context: ECE.Context) {
+    if (!this.setVis || !context.environment || !context.control || !context.stash) {
+      throw new Error('Java CSE Machine not initialized');
+    }
+
+    CseMachine.environment = new Environment(context.environment);
+    CseMachine.control = new Control(context.control);
+    CseMachine.stash = new Stash(context.stash);
+
+    this.setVis(this.draw());
+
+    // Set icon to blink.
+    const icon = document.getElementById('env_visualizer-icon');
+    icon && icon.classList.add('side-content-tab-alert');
+  }
+
+  static clearCse() {
+    if (this.setVis) {
+      this.setVis(undefined);
+      CseMachine.environment = undefined;
+      CseMachine.control = undefined;
+      CseMachine.stash = undefined;
+    }
+  }
+
+  /**
+   * Updates the scale of the stage after the user inititates a zoom in or out
+   * by scrolling or by the trackpad.
+   */
+  static zoomStage(event: KonvaEventObject<WheelEvent> | boolean, multiplier: number = 1) {
+    typeof event != 'boolean' && event.evt.preventDefault();
+    if (CseMachine.stageRef.current) {
+      const stage = CseMachine.stageRef.current;
+      const oldScale = stage.scaleX();
+      const { x: pointerX, y: pointerY } = stage.getPointerPosition();
+      const mousePointTo = {
+        x: (pointerX - stage.x()) / oldScale,
+        y: (pointerY - stage.y()) / oldScale
+      };
+
+      // zoom in or zoom out
+      const direction =
+        typeof event != 'boolean' ? (event.evt.deltaY > 0 ? -1 : 1) : event ? 1 : -1;
+
+      // Check if the zoom limits have been reached
+      if ((direction > 0 && oldScale < 3) || (direction < 0 && oldScale > 0.4)) {
+        const newScale =
+          direction > 0
+            ? oldScale * CseMachine.scaleFactor ** multiplier
+            : oldScale / CseMachine.scaleFactor ** multiplier;
+        stage.scale({ x: newScale, y: newScale });
+        if (typeof event !== 'boolean') {
+          const newPos = {
+            x: pointerX - mousePointTo.x * newScale,
+            y: pointerY - mousePointTo.y * newScale
+          };
+          stage.position(newPos);
+          stage.batchDraw();
+        }
+      }
+    }
+  }
+
+  static draw(): React.ReactNode {
+    const layout = (
+      <div className={'sa-cse-machine'} data-testid="sa-cse-machine">
+        <div
+          id="scroll-container"
+          style={{
+            width: window.innerWidth - 50,
+            height: window.innerHeight - 150,
+            overflow: 'hidden'
+          }}
+        >
+          <div
+            id="large-container"
+            style={{
+              width: Config.CanvasMinWidth,
+              height: Config.CanvasMinHeight,
+              overflow: 'hidden',
+              backgroundColor: defaultBackgroundColor()
+            }}
+          >
+            <Stage
+              width={+Config.CanvasMinWidth}
+              height={+Config.CanvasMinHeight}
+              ref={this.stageRef}
+              draggable
+              onWheel={CseMachine.zoomStage}
+              className="draggable"
+            >
+              <Layer>
+                <Rect
+                  {...ShapeDefaultProps}
+                  x={0}
+                  y={0}
+                  width={Config.CanvasMinWidth}
+                  height={Config.CanvasMinHeight}
+                  fill={defaultBackgroundColor()}
+                  key={CseMachine.key++}
+                  listening={false}
+                />
+                {this.control?.draw()}
+                {this.stash?.draw()}
+                {this.environment?.draw()}
+              </Layer>
+            </Stage>
+          </div>
+        </div>
+      </div>
+    );
+
+    return layout;
+  }
+}
diff --git a/src/features/cseMachine/java/components/Arrow.tsx b/src/features/cseMachine/java/components/Arrow.tsx
new file mode 100644
index 0000000000..c3ed35fb08
--- /dev/null
+++ b/src/features/cseMachine/java/components/Arrow.tsx
@@ -0,0 +1,68 @@
+import { KonvaEventObject } from 'konva/lib/Node';
+import { Arrow as KonvaArrow, Group as KonvaGroup, Path as KonvaPath } from 'react-konva';
+
+import { Visible } from '../../components/Visible';
+import { Config, ShapeDefaultProps } from '../../CseMachineConfig';
+import { IHoverable } from '../../CseMachineTypes';
+import {
+  defaultStrokeColor,
+  setHoveredCursor,
+  setHoveredStyle,
+  setUnhoveredCursor,
+  setUnhoveredStyle
+} from '../../CseMachineUtils';
+import { CseMachine } from '../CseMachine';
+
+/** this class encapsulates an Arrow to be drawn between 2 points */
+export class Arrow extends Visible implements IHoverable {
+  private static readonly TO_X_INDEX = 2;
+  private readonly _points: number[] = [];
+
+  constructor(fromX: number, fromY: number, toX: number, toY: number) {
+    super();
+    this._points.push(fromX, fromY, toX, toY);
+  }
+
+  setToX(x: number) {
+    this._points[Arrow.TO_X_INDEX] = x;
+  }
+
+  onMouseEnter(e: KonvaEventObject<MouseEvent>) {
+    setHoveredStyle(e.currentTarget);
+    setHoveredCursor(e.currentTarget);
+  }
+
+  onMouseLeave(e: KonvaEventObject<MouseEvent>) {
+    setUnhoveredStyle(e.currentTarget);
+    setUnhoveredCursor(e.currentTarget);
+  }
+
+  draw() {
+    const path = `M ${this._points[0]} ${this._points[1]} L ${this._points[2]} ${this._points[3]}`;
+    return (
+      <KonvaGroup
+        key={CseMachine.key++}
+        onMouseEnter={e => this.onMouseEnter(e)}
+        onMouseLeave={e => this.onMouseLeave(e)}
+      >
+        <KonvaPath
+          {...ShapeDefaultProps}
+          stroke={defaultStrokeColor()}
+          strokeWidth={Config.ArrowStrokeWidth}
+          hitStrokeWidth={Config.ArrowHitStrokeWidth}
+          data={path}
+          key={CseMachine.key++}
+        />
+        <KonvaArrow
+          {...ShapeDefaultProps}
+          points={this._points.slice(this._points.length - 4)}
+          fill={defaultStrokeColor()}
+          strokeEnabled={false}
+          pointerWidth={Config.ArrowHeadSize}
+          pointerLength={Config.ArrowHeadSize}
+          key={CseMachine.key++}
+        />
+      </KonvaGroup>
+    );
+  }
+}
diff --git a/src/features/cseMachine/java/components/Binding.tsx b/src/features/cseMachine/java/components/Binding.tsx
new file mode 100644
index 0000000000..6ecdb6cb47
--- /dev/null
+++ b/src/features/cseMachine/java/components/Binding.tsx
@@ -0,0 +1,96 @@
+import { ECE } from 'java-slang';
+import React from 'react';
+
+import { Visible } from '../../components/Visible';
+import { Config } from '../../CseMachineConfig';
+import { CseMachine } from '../CseMachine';
+import { Arrow } from './Arrow';
+import { Method } from './Method';
+import { Text } from './Text';
+import { Variable } from './Variable';
+
+/** a Binding is a key-value pair in a Frame */
+export class Binding extends Visible {
+  private readonly _name: Text;
+
+  private readonly _value: Variable | Method | Text;
+  // Only Method has arrow.
+  private readonly _arrow: Arrow | undefined;
+
+  constructor(name: ECE.Name, value: ECE.Value, x: number, y: number) {
+    super();
+
+    // Position.
+    this._x = x;
+    this._y = y;
+
+    if (value.kind === ECE.StructType.CLOSURE) {
+      // Name.
+      this._name = new Text(
+        name + Config.VariableColon, // := is part of name
+        this.x(),
+        this.y()
+      );
+      // Value.
+      this._value = new Method(
+        this._name.x() + this._name.width(),
+        this.y() + this._name.height() / 2,
+        value
+      );
+      this._arrow = new Arrow(
+        this._name.x() + this._name.width(),
+        this._name.y() + this._name.height() / 2,
+        this._value.x(),
+        this._value.y()
+      );
+    } else if (value.kind === ECE.StructType.VARIABLE) {
+      // Name.
+      this._name = new Text(
+        name + Config.VariableColon, // := is part of name
+        this.x(),
+        this.y() + Config.FontSize + Config.TextPaddingX
+      );
+      // Value.
+      this._value = new Variable(this._name.x() + this._name.width(), this.y(), value);
+    } /*if (value.kind === StructType.CLASS)*/ else {
+      // Dummy value as class will nvr be drawn.
+      // Name.
+      this._name = new Text(
+        name + Config.VariableColon, // := is part of name
+        this.x(),
+        this.y() + Config.FontSize + Config.TextPaddingX
+      );
+      // Value.
+      this._value = new Text(
+        '',
+        this._name.x() + this._name.width() + Config.TextPaddingX,
+        this.y() + Config.TextPaddingX
+      );
+    }
+
+    // Height and width.
+    this._height = Math.max(this._name.height(), this._value.height());
+    this._width = this._value.x() + this._value.width() - this._name.x();
+  }
+
+  get value() {
+    return this._value;
+  }
+
+  setArrowToX(x: number) {
+    this._arrow?.setToX(x);
+  }
+
+  draw(): React.ReactNode {
+    return (
+      <React.Fragment key={CseMachine.key++}>
+        {/* Name */}
+        {this._name.draw()}
+
+        {/* Value */}
+        {this._value.draw()}
+        {this._arrow?.draw()}
+      </React.Fragment>
+    );
+  }
+}
diff --git a/src/features/cseMachine/java/components/Control.tsx b/src/features/cseMachine/java/components/Control.tsx
new file mode 100644
index 0000000000..dcce409585
--- /dev/null
+++ b/src/features/cseMachine/java/components/Control.tsx
@@ -0,0 +1,195 @@
+import { astToString, ECE } from 'java-slang';
+import { Group } from 'react-konva';
+
+import { Visible } from '../../components/Visible';
+import { ControlStashConfig } from '../../CseMachineControlStashConfig';
+import { defaultActiveColor, defaultStrokeColor } from '../../CseMachineUtils';
+import { CseMachine } from '../CseMachine';
+import { ControlItem } from './ControlItem';
+
+export class Control extends Visible {
+  private readonly _controlItems: ControlItem[] = [];
+
+  constructor(control: ECE.Control) {
+    super();
+
+    // Position.
+    this._x = ControlStashConfig.ControlPosX;
+    this._y =
+      ControlStashConfig.ControlPosY +
+      ControlStashConfig.StashItemHeight +
+      ControlStashConfig.StashItemTextPadding * 2;
+
+    // Create each ControlItem.
+    let controlItemY: number = this._y;
+    control.getStack().forEach((controlItem, index) => {
+      const controlItemText = this.getControlItemString(controlItem);
+
+      const controlItemStroke =
+        index === control.getStack().length - 1 ? defaultActiveColor() : defaultStrokeColor();
+
+      // TODO reference draw ltr?
+      const controlItemReference =
+        ECE.isInstr(controlItem) && controlItem.instrType === ECE.InstrType.ENV
+          ? CseMachine.environment?.frames.find(f => f.frame === (controlItem as ECE.EnvInstr).env)
+          : undefined;
+
+      const controlItemTooltip = this.getControlItemTooltip(controlItem);
+      this.getControlItemTooltip(controlItem);
+
+      const node = ECE.isNode(controlItem) ? controlItem : controlItem.srcNode;
+      const highlightOnHover = () => {
+        let start = -1;
+        let end = -1;
+        if (node.location) {
+          start = node.location.startLine - 1;
+          end = node.location.endLine ? node.location.endLine - 1 : start;
+        }
+        CseMachine.setEditorHighlightedLines([[start, end]]);
+      };
+      const unhighlightOnHover = () => CseMachine.setEditorHighlightedLines([]);
+
+      const currControlItem = new ControlItem(
+        controlItemY,
+        controlItemText,
+        controlItemStroke,
+        controlItemReference,
+        controlItemTooltip,
+        highlightOnHover,
+        unhighlightOnHover
+      );
+
+      this._controlItems.push(currControlItem);
+      controlItemY += currControlItem.height();
+    });
+
+    // Height and width.
+    this._height = controlItemY - this._y;
+    // TODO cal real width?
+    this._width = ControlStashConfig.ControlItemWidth;
+  }
+
+  draw(): React.ReactNode {
+    return (
+      <Group key={CseMachine.key++} ref={this.ref}>
+        {this._controlItems.map(c => c.draw())}
+      </Group>
+    );
+  }
+
+  private getControlItemString = (controlItem: ECE.ControlItem): string => {
+    if (ECE.isNode(controlItem)) {
+      return astToString(controlItem);
+    }
+
+    switch (controlItem.instrType) {
+      case ECE.InstrType.RESET:
+        return 'return';
+      case ECE.InstrType.ASSIGNMENT:
+        return 'asgn';
+      case ECE.InstrType.BINARY_OP:
+        const binOpInstr = controlItem as ECE.BinOpInstr;
+        return binOpInstr.symbol;
+      case ECE.InstrType.POP:
+        return 'pop';
+      case ECE.InstrType.INVOCATION:
+        const appInstr = controlItem as ECE.InvInstr;
+        return `invoke ${appInstr.arity}`;
+      case ECE.InstrType.ENV:
+        return 'env';
+      case ECE.InstrType.MARKER:
+        return 'mark';
+      case ECE.InstrType.EVAL_VAR:
+        const evalVarInstr = controlItem as ECE.EvalVarInstr;
+        return `name ${evalVarInstr.symbol}`;
+      case ECE.InstrType.NEW:
+        const newInstr = controlItem as ECE.NewInstr;
+        return `new ${newInstr.c.frame.name}`;
+      case ECE.InstrType.RES_TYPE:
+        const resTypeInstr = controlItem as ECE.ResTypeInstr;
+        return `res_type ${
+          resTypeInstr.value.kind === 'Class'
+            ? resTypeInstr.value.frame.name
+            : astToString(resTypeInstr.value)
+        }`;
+      case ECE.InstrType.RES_TYPE_CONT:
+        const resTypeContInstr = controlItem as ECE.ResTypeContInstr;
+        return `res_type_cont ${resTypeContInstr.name}`;
+      case ECE.InstrType.RES_OVERLOAD:
+        const resOverloadInstr = controlItem as ECE.ResOverloadInstr;
+        return `res_overload ${resOverloadInstr.name} ${resOverloadInstr.arity}`;
+      case ECE.InstrType.RES_OVERRIDE:
+        return `res_override`;
+      case ECE.InstrType.RES_CON_OVERLOAD:
+        const resConOverloadInstr = controlItem as ECE.ResConOverloadInstr;
+        return `res_con_overload ${resConOverloadInstr.arity}`;
+      case ECE.InstrType.RES:
+        const resInstr = controlItem as ECE.ResInstr;
+        return `res ${resInstr.name}`;
+      case ECE.InstrType.DEREF:
+        return 'deref';
+      default:
+        return 'INSTRUCTION';
+    }
+  };
+
+  private getControlItemTooltip = (controlItem: ECE.ControlItem): string => {
+    if (ECE.isNode(controlItem)) {
+      return astToString(controlItem);
+    }
+
+    switch (controlItem.instrType) {
+      case ECE.InstrType.RESET:
+        return 'Skip control items until marker instruction is reached';
+      case ECE.InstrType.ASSIGNMENT:
+        return 'Assign value on top of stash to location on top of stash';
+      case ECE.InstrType.BINARY_OP:
+        const binOpInstr = controlItem as ECE.BinOpInstr;
+        return `Perform ${binOpInstr.symbol} on top 2 stash values`;
+      case ECE.InstrType.POP:
+        return 'Pop most recently pushed value from stash';
+      case ECE.InstrType.INVOCATION:
+        const appInstr = controlItem as ECE.InvInstr;
+        return `Invoke method with ${appInstr.arity} argument${appInstr.arity === 1 ? '' : 's'}`;
+      case ECE.InstrType.ENV:
+        return 'Set current environment to this environment';
+      case ECE.InstrType.MARKER:
+        return 'Mark return address';
+      case ECE.InstrType.EVAL_VAR:
+        const evalVarInstr = controlItem as ECE.EvalVarInstr;
+        return `name ${evalVarInstr.symbol}`;
+      case ECE.InstrType.NEW:
+        const newInstr = controlItem as ECE.NewInstr;
+        return `Create new instance of class ${newInstr.c.frame.name}`;
+      case ECE.InstrType.RES_TYPE:
+        const resTypeInstr = controlItem as ECE.ResTypeInstr;
+        return `Resolve type of ${
+          resTypeInstr.value.kind === 'Class'
+            ? resTypeInstr.value.frame.name
+            : astToString(resTypeInstr.value)
+        }`;
+      case ECE.InstrType.RES_TYPE_CONT:
+        const resTypeContInstr = controlItem as ECE.ResTypeContInstr;
+        return `Resolve type of ${resTypeContInstr.name} in most recently pushed type from stash`;
+      case ECE.InstrType.RES_OVERLOAD:
+        const resOverloadInstr = controlItem as ECE.ResOverloadInstr;
+        return `Resolve overloading of method ${resOverloadInstr.name} with ${
+          resOverloadInstr.arity
+        } argument${resOverloadInstr.arity === 1 ? '' : 's'}`;
+      case ECE.InstrType.RES_OVERRIDE:
+        return 'Resolve overriding of resolved method on top of stash';
+      case ECE.InstrType.RES_CON_OVERLOAD:
+        const resConOverloadInstr = controlItem as ECE.ResConOverloadInstr;
+        return `Resolve constructor overloading of class on stash with ${
+          resConOverloadInstr.arity
+        } argument${resConOverloadInstr.arity === 1 ? '' : 's'}`;
+      case ECE.InstrType.RES:
+        const resInstr = controlItem as ECE.ResInstr;
+        return `Resolve field ${resInstr.name} of most recently pushed value from stash`;
+      case ECE.InstrType.DEREF:
+        return 'Dereference most recently pushed value from stash';
+      default:
+        return 'INSTRUCTION';
+    }
+  };
+}
diff --git a/src/features/cseMachine/java/components/ControlItem.tsx b/src/features/cseMachine/java/components/ControlItem.tsx
new file mode 100644
index 0000000000..cd548ecb8d
--- /dev/null
+++ b/src/features/cseMachine/java/components/ControlItem.tsx
@@ -0,0 +1,153 @@
+import { KonvaEventObject } from 'konva/lib/Node';
+import React, { RefObject } from 'react';
+import { Label, Tag, Text } from 'react-konva';
+
+import { Visible } from '../../components/Visible';
+import { ShapeDefaultProps } from '../../CseMachineConfig';
+import { ControlStashConfig } from '../../CseMachineControlStashConfig';
+import { IHoverable } from '../../CseMachineTypes';
+import {
+  defaultActiveColor,
+  defaultTextColor,
+  getTextHeight,
+  setHoveredCursor,
+  setHoveredStyle,
+  setUnhoveredCursor,
+  setUnhoveredStyle,
+  truncateText
+} from '../../CseMachineUtils';
+import { CseMachine } from '../CseMachine';
+import { Arrow } from './Arrow';
+import { Frame } from './Frame';
+
+export class ControlItem extends Visible implements IHoverable {
+  private readonly _arrow: Arrow | undefined;
+  private readonly _tooltipRef: RefObject<any>;
+
+  constructor(
+    y: number,
+
+    private readonly _text: string,
+    private readonly _stroke: string,
+
+    reference: Frame | undefined,
+
+    private readonly _tooltip: string,
+    private readonly highlightOnHover: () => void,
+    private readonly unhighlightOnHover: () => void
+  ) {
+    super();
+
+    // Position.
+    this._x = ControlStashConfig.ControlPosX;
+    this._y = y;
+
+    // Text.
+    this._text = truncateText(
+      this._text,
+      ControlStashConfig.ControlMaxTextWidth,
+      ControlStashConfig.ControlMaxTextHeight
+    );
+
+    // Tooltip.
+    this._tooltipRef = React.createRef();
+
+    // Height and width.
+    this._height =
+      getTextHeight(this._text, ControlStashConfig.ControlMaxTextWidth) +
+      ControlStashConfig.ControlItemTextPadding * 2;
+    this._width = ControlStashConfig.ControlItemWidth;
+
+    // Arrow
+    if (reference) {
+      this._arrow = new Arrow(
+        this._x + this._width,
+        this._y + this._height / 2,
+        reference.x(),
+        reference.y() + reference.height() / 2 + reference.name.height()
+      );
+    }
+  }
+
+  private isCurrentItem = (): boolean => {
+    return this._stroke === defaultActiveColor();
+  };
+
+  onMouseEnter = (e: KonvaEventObject<MouseEvent>): void => {
+    this.highlightOnHover();
+    !this.isCurrentItem() && setHoveredStyle(e.currentTarget);
+    setHoveredCursor(e.currentTarget);
+    this._tooltipRef.current.show();
+  };
+
+  onMouseLeave = (e: KonvaEventObject<MouseEvent>): void => {
+    this.unhighlightOnHover();
+    !this.isCurrentItem() && setUnhoveredStyle(e.currentTarget);
+    setUnhoveredCursor(e.currentTarget);
+    this._tooltipRef.current.hide();
+  };
+
+  draw(): React.ReactNode {
+    const textProps = {
+      fill: defaultTextColor(),
+      padding: ControlStashConfig.ControlItemTextPadding,
+      fontFamily: ControlStashConfig.FontFamily,
+      fontSize: ControlStashConfig.FontSize,
+      fontStyle: ControlStashConfig.FontStyle,
+      fontVariant: ControlStashConfig.FontVariant
+    };
+    const tagProps = {
+      stroke: this._stroke,
+      cornerRadius: ControlStashConfig.ControlItemCornerRadius
+    };
+    return (
+      <React.Fragment key={CseMachine.key++}>
+        {/* Text */}
+        <Label
+          x={this.x()}
+          y={this.y()}
+          onMouseEnter={this.onMouseEnter}
+          onMouseLeave={this.onMouseLeave}
+          key={CseMachine.key++}
+        >
+          <Tag {...ShapeDefaultProps} {...tagProps} key={CseMachine.key++} />
+          <Text
+            {...ShapeDefaultProps}
+            {...textProps}
+            text={this._text}
+            width={this.width()}
+            height={this.height()}
+            key={CseMachine.key++}
+          />
+        </Label>
+
+        {/* Tooltip */}
+        <Label
+          x={this.x() + this.width() + ControlStashConfig.TooltipMargin}
+          y={this.y() + ControlStashConfig.TooltipMargin}
+          visible={false}
+          ref={this._tooltipRef}
+          key={CseMachine.key++}
+        >
+          <Tag
+            {...ShapeDefaultProps}
+            stroke="black"
+            fill={'black'}
+            opacity={ControlStashConfig.TooltipOpacity}
+            key={CseMachine.key++}
+          />
+          <Text
+            {...ShapeDefaultProps}
+            {...textProps}
+            text={this._tooltip}
+            padding={ControlStashConfig.TooltipPadding}
+            key={CseMachine.key++}
+          />
+        </Label>
+
+        {/* Arrow */}
+        {this._arrow?.draw()}
+      </React.Fragment>
+    );
+  }
+}
diff --git a/src/features/cseMachine/java/components/Environment.tsx b/src/features/cseMachine/java/components/Environment.tsx
new file mode 100644
index 0000000000..f79376881c
--- /dev/null
+++ b/src/features/cseMachine/java/components/Environment.tsx
@@ -0,0 +1,219 @@
+import { ECE } from 'java-slang';
+import { Group } from 'react-konva';
+
+import { Visible } from '../../components/Visible';
+import { Config } from '../../CseMachineConfig';
+import { ControlStashConfig } from '../../CseMachineControlStashConfig';
+import { defaultActiveColor, defaultStrokeColor } from '../../CseMachineUtils';
+import { CseMachine } from '../CseMachine';
+import { Arrow } from './Arrow';
+import { Frame } from './Frame';
+import { Line } from './Line';
+import { Obj } from './Object';
+import { Variable } from './Variable';
+
+export class Environment extends Visible {
+  private readonly _methodFrames: Frame[] = [];
+  private readonly _objects: Obj[] = [];
+  private readonly _classFrames: Frame[] = [];
+  private readonly _lines: Line[] = [];
+
+  constructor(environment: ECE.Environment) {
+    super();
+
+    // Position.
+    this._x =
+      ControlStashConfig.ControlPosX +
+      ControlStashConfig.ControlItemWidth +
+      2 * Config.CanvasPaddingX;
+    this._y =
+      ControlStashConfig.StashPosY + ControlStashConfig.StashItemHeight + 2 * Config.CanvasPaddingY;
+
+    // Create method frames.
+    const methodFramesX = this._x;
+    let methodFramesY: number = this._y;
+    let methodFramesWidth = Number(Config.FrameMinWidth);
+    environment.global.children.forEach(env => {
+      if (env.name.includes('(')) {
+        let currEnv: ECE.EnvNode | undefined = env;
+        let parentFrame;
+        while (currEnv) {
+          const stroke =
+            currEnv === environment.current ? defaultActiveColor() : defaultStrokeColor();
+          const frame = new Frame(currEnv, methodFramesX, methodFramesY, stroke);
+          this._methodFrames.push(frame);
+          methodFramesY += frame.height() + Config.FramePaddingY;
+          methodFramesWidth = Math.max(methodFramesWidth, frame.width());
+          parentFrame && frame.setParent(parentFrame);
+
+          parentFrame = frame;
+          currEnv = currEnv.children.length ? currEnv.children[0] : undefined;
+        }
+      }
+    });
+
+    // Create objects.
+    const objectFramesX = methodFramesX + methodFramesWidth + Config.FrameMinWidth;
+    let objectFramesY: number = this._y;
+    let objectFramesWidth = Number(Config.FrameMinWidth);
+    environment.objects.forEach(obj => {
+      const objectFrames: Frame[] = [];
+      let objectFrameWidth = Number(Config.FrameMinWidth);
+
+      // Get top env.
+      let env: ECE.EnvNode | undefined = obj.frame;
+      while (env.parent) {
+        env = env.parent;
+      }
+
+      // Create frame top-down.
+      while (env) {
+        const stroke = env === environment.current ? defaultActiveColor() : defaultStrokeColor();
+        const frame = new Frame(env, objectFramesX, objectFramesY, stroke);
+        // No padding btwn obj frames thus no arrows required.
+        objectFramesY += frame.height();
+        objectFramesWidth = Math.max(objectFramesWidth, frame.width());
+
+        env = env.children.length ? env.children[0] : undefined;
+
+        objectFrames.push(frame);
+        objectFrameWidth = Math.max(objectFrameWidth, frame.width());
+      }
+
+      // Standardize obj frames width.
+      objectFrames.forEach(o => o.setWidth(objectFrameWidth));
+
+      // Only add padding btwn objects.
+      objectFramesY += Config.FramePaddingY;
+
+      this._objects.push(new Obj(objectFrames, obj));
+    });
+
+    // Create class frames.
+    const classFramesX = objectFramesX + objectFramesWidth + Config.FrameMinWidth;
+    let classFramesY = this._y;
+    for (const c of environment.global.frame.values()) {
+      const classEnv = (c as ECE.Class).frame;
+      const classFrameStroke =
+        classEnv === environment.current ? defaultActiveColor() : defaultStrokeColor();
+      const highlightOnHover = () => {
+        const node = (c as ECE.Class).classDecl;
+        let start = -1;
+        let end = -1;
+        if (node.location) {
+          start = node.location.startLine - 1;
+          end = node.location.endLine ? node.location.endLine - 1 : start;
+        }
+        CseMachine.setEditorHighlightedLines([[start, end]]);
+      };
+      const unhighlightOnHover = () => CseMachine.setEditorHighlightedLines([]);
+      const classFrame = new Frame(
+        classEnv,
+        classFramesX,
+        classFramesY,
+        classFrameStroke,
+        '',
+        highlightOnHover,
+        unhighlightOnHover
+      );
+      const superClassName = (c as ECE.Class).superclass?.frame.name;
+      if (superClassName) {
+        const parentFrame = this._classFrames.find(f => f.name.text === superClassName)!;
+        classFrame.setParent(parentFrame);
+      }
+      this._classFrames.push(classFrame);
+      classFramesY += classFrame.height() + Config.FramePaddingY;
+    }
+
+    // Draw arrow for var ref in mtd frames to corresponding obj.
+    this._methodFrames.forEach(mf => {
+      mf.bindings.forEach(b => {
+        if (b.value instanceof Variable && b.value.variable.value.kind === ECE.StructType.OBJECT) {
+          const objFrame = b.value.variable.value.frame;
+          const matchingObj = this._objects.filter(o => o.getFrame().frame === objFrame)[0];
+          b.value.value = new Arrow(
+            b.value.x() + b.value.width() / 2,
+            b.value.y() + b.value.type.height() + (b.value.height() - b.value.type.height()) / 2,
+            matchingObj.x(),
+            matchingObj.y() + matchingObj.height() / 2
+          );
+        }
+      });
+    });
+
+    // Draw arrow for var ref in obj frames to corresponding var or obj.
+    this._objects
+      .flatMap(obj => obj.frames)
+      .forEach(of => {
+        of.bindings.forEach(b => {
+          if (
+            b.value instanceof Variable &&
+            b.value.variable.value.kind === ECE.StructType.VARIABLE
+          ) {
+            const variable = b.value.variable.value;
+            const matchingVariable = this._classFrames
+              .flatMap(c => c.bindings)
+              .filter(b => b.value instanceof Variable && b.value.variable === variable)[0]
+              .value as Variable;
+            b.value.value = new Arrow(
+              b.value.x() + b.value.width() / 2,
+              b.value.y() + b.value.type.height() + (b.value.height() - b.value.type.height()) / 2,
+              matchingVariable.x(),
+              matchingVariable.y() + matchingVariable.type.height()
+            );
+          }
+          if (
+            b.value instanceof Variable &&
+            b.value.variable.value.kind === ECE.StructType.OBJECT
+          ) {
+            const obj = b.value.variable.value.frame;
+            const matchingObj = this._objects.find(o => o.getFrame().frame === obj)!;
+            // Variable always has a box.
+            b.value.value = new Arrow(
+              b.value.x() + b.value.width() / 2,
+              b.value.y() + b.value.type.height() + (b.value.height() - b.value.type.height()) / 2,
+              matchingObj.x(),
+              matchingObj.y() + matchingObj.height() / 2
+            );
+          }
+        });
+      });
+
+    // Draw line for obj to class.
+    this._objects.forEach(obj => {
+      const matchingClass = this._classFrames.find(
+        c => c.name.text === obj.object.class.frame.name
+      )!;
+      const line = new Line(
+        obj.x() + obj.width(),
+        obj.y() + obj.height() / 2,
+        matchingClass.x(),
+        matchingClass.y() + matchingClass.height() / 2 + matchingClass.name.height()
+      );
+      this._lines.push(line);
+    });
+  }
+
+  get classes() {
+    return this._classFrames;
+  }
+
+  get objects() {
+    return this._objects.flatMap(obj => obj.frames);
+  }
+
+  get frames() {
+    return this._methodFrames;
+  }
+
+  draw(): React.ReactNode {
+    return (
+      <Group key={CseMachine.key++}>
+        {this._methodFrames.map(f => f.draw())}
+        {this._objects.flatMap(obj => obj.frames).map(f => f.draw())}
+        {this._classFrames.map(f => f.draw())}
+        {this._lines.map(f => f.draw())}
+      </Group>
+    );
+  }
+}
diff --git a/src/features/cseMachine/java/components/Frame.tsx b/src/features/cseMachine/java/components/Frame.tsx
new file mode 100644
index 0000000000..75ef4b49c9
--- /dev/null
+++ b/src/features/cseMachine/java/components/Frame.tsx
@@ -0,0 +1,153 @@
+import { ECE } from 'java-slang';
+import { KonvaEventObject } from 'konva/lib/Node';
+import React, { RefObject } from 'react';
+import { Group, Label, Rect, Tag, Text as KonvaText } from 'react-konva';
+
+import { Visible } from '../../components/Visible';
+import { Config, ShapeDefaultProps } from '../../CseMachineConfig';
+import { ControlStashConfig } from '../../CseMachineControlStashConfig';
+import { IHoverable } from '../../CseMachineTypes';
+import { defaultTextColor, setHoveredCursor, setUnhoveredCursor } from '../../CseMachineUtils';
+import { CseMachine } from '../CseMachine';
+import { Arrow } from './Arrow';
+import { Binding } from './Binding';
+import { Method } from './Method';
+import { Text } from './Text';
+
+export class Frame extends Visible implements IHoverable {
+  readonly tooltipRef: RefObject<any>;
+
+  readonly bindings: Binding[] = [];
+  readonly name: Text;
+  private parent: Frame | undefined;
+
+  constructor(
+    readonly frame: ECE.EnvNode,
+    x: number,
+    y: number,
+    readonly stroke: string,
+
+    readonly tooltip?: string,
+    readonly highlightOnHover?: () => void,
+    readonly unhighlightOnHover?: () => void
+  ) {
+    super();
+
+    this._x = x;
+    this._y = y;
+
+    this.name = new Text(frame.name, this._x + Config.FramePaddingX, this._y);
+
+    this._width = Math.max(Config.FrameMinWidth, this.name.width() + 2 * Config.FramePaddingX);
+    this._height = Config.FramePaddingY + this.name.height();
+
+    // Create binding for each key-value pair
+    let bindingY: number = this._y + this.name.height() + Config.FramePaddingY;
+    for (const [key, data] of frame.frame) {
+      const currBinding: Binding = new Binding(key, data, this._x + Config.FramePaddingX, bindingY);
+      this.bindings.push(currBinding);
+      bindingY += currBinding.height() + Config.FramePaddingY;
+      this._width = Math.max(this._width, currBinding.width() + 2 * Config.FramePaddingX);
+      this._height += currBinding.height() + Config.FramePaddingY;
+    }
+
+    // Set x of Method aft knowing frame width.
+    this.bindings
+      .filter(b => b.value instanceof Method)
+      .forEach(b => {
+        (b.value as Method).setX(this._x + this._width + Config.FramePaddingX);
+        b.setArrowToX(this._x + this._width + Config.FramePaddingX);
+      });
+
+    this.tooltipRef = React.createRef();
+  }
+
+  setWidth(width: number) {
+    this._width = width;
+  }
+
+  setParent(parent: Frame) {
+    this.parent = parent;
+  }
+
+  onMouseEnter = (e: KonvaEventObject<MouseEvent>) => {
+    this.highlightOnHover && this.highlightOnHover();
+    (this.tooltip || this.highlightOnHover) && setHoveredCursor(e.currentTarget);
+    this.tooltip && this.tooltipRef.current.show();
+  };
+
+  onMouseLeave = (e: KonvaEventObject<MouseEvent>) => {
+    this.unhighlightOnHover && this.unhighlightOnHover();
+    (this.tooltip || this.unhighlightOnHover) && setUnhoveredCursor(e.currentTarget);
+    this.tooltip && this.tooltipRef.current.hide();
+  };
+
+  draw(): React.ReactNode {
+    const textProps = {
+      fill: defaultTextColor(),
+      padding: Number(ControlStashConfig.ControlItemTextPadding),
+      fontFamily: ControlStashConfig.FontFamily.toString(),
+      fontSize: Number(ControlStashConfig.FontSize),
+      fontStyle: ControlStashConfig.FontStyle.toString(),
+      fontVariant: ControlStashConfig.FontVariant.toString()
+    };
+
+    return (
+      <Group key={CseMachine.key++}>
+        <Rect
+          {...ShapeDefaultProps}
+          x={this.x()}
+          y={this.y() + this.name.height()}
+          width={this.width()}
+          height={this.height()}
+          stroke={this.stroke}
+          cornerRadius={Number(Config.FrameCornerRadius)}
+          onMouseEnter={this.onMouseEnter}
+          onMouseLeave={this.onMouseLeave}
+          key={CseMachine.key++}
+        />
+        {/* Frame name */}
+        {this.name.draw()}
+
+        {/* Frame */}
+        {this.bindings.map(binding => binding.draw())}
+
+        {/* Frame parent */}
+        {this.parent &&
+          new Arrow(
+            this._x + Config.FramePaddingX / 2,
+            this._y + this.name.height(),
+            this.parent.x() + Config.FramePaddingX / 2,
+            // TODO WHY NEED TO ADD NAME HEIGHT?
+            this.parent.y() + this.parent.height() + this.name?.height()
+          ).draw()}
+
+        {/* Frame tooltip */}
+        {this.tooltip && (
+          <Label
+            x={this.x() + this.width() + ControlStashConfig.TooltipMargin}
+            y={this.y() + ControlStashConfig.TooltipMargin}
+            visible={false}
+            ref={this.tooltipRef}
+            key={CseMachine.key++}
+          >
+            <Tag
+              {...ShapeDefaultProps}
+              stroke="black"
+              fill={'black'}
+              opacity={Number(ControlStashConfig.TooltipOpacity)}
+              key={CseMachine.key++}
+            />
+            <KonvaText
+              {...ShapeDefaultProps}
+              {...textProps}
+              text={this.tooltip}
+              padding={Number(ControlStashConfig.TooltipPadding)}
+              key={CseMachine.key++}
+            />
+          </Label>
+        )}
+      </Group>
+    );
+  }
+}
diff --git a/src/features/cseMachine/java/components/Line.tsx b/src/features/cseMachine/java/components/Line.tsx
new file mode 100644
index 0000000000..6767aafa8f
--- /dev/null
+++ b/src/features/cseMachine/java/components/Line.tsx
@@ -0,0 +1,59 @@
+import { KonvaEventObject } from 'konva/lib/Node';
+import { Group, Path } from 'react-konva';
+
+import { Visible } from '../../components/Visible';
+import { Config, ShapeDefaultProps } from '../../CseMachineConfig';
+import { IHoverable } from '../../CseMachineTypes';
+import {
+  defaultStrokeColor,
+  setHoveredCursor,
+  setHoveredStyle,
+  setUnhoveredCursor,
+  setUnhoveredStyle
+} from '../../CseMachineUtils';
+import { CseMachine } from '../CseMachine';
+
+/** this class encapsulates a Line to be drawn between 2 points */
+export class Line extends Visible implements IHoverable {
+  private static readonly TO_X_INDEX = 2;
+  private readonly _points: number[] = [];
+
+  constructor(fromX: number, fromY: number, toX: number, toY: number) {
+    super();
+    this._points.push(fromX, fromY, toX, toY);
+  }
+
+  setToX(x: number) {
+    this._points[Line.TO_X_INDEX] = x;
+  }
+
+  onMouseEnter(e: KonvaEventObject<MouseEvent>) {
+    setHoveredStyle(e.currentTarget);
+    setHoveredCursor(e.currentTarget);
+  }
+
+  onMouseLeave(e: KonvaEventObject<MouseEvent>) {
+    setUnhoveredStyle(e.currentTarget);
+    setUnhoveredCursor(e.currentTarget);
+  }
+
+  draw() {
+    const path = `M ${this._points[0]} ${this._points[1]} L ${this._points[2]} ${this._points[3]}`;
+    return (
+      <Group
+        key={CseMachine.key++}
+        onMouseEnter={e => this.onMouseEnter(e)}
+        onMouseLeave={e => this.onMouseLeave(e)}
+      >
+        <Path
+          {...ShapeDefaultProps}
+          stroke={defaultStrokeColor()}
+          strokeWidth={Number(Config.ArrowStrokeWidth)}
+          hitStrokeWidth={Number(Config.ArrowHitStrokeWidth)}
+          data={path}
+          key={CseMachine.key++}
+        />
+      </Group>
+    );
+  }
+}
diff --git a/src/features/cseMachine/java/components/Method.tsx b/src/features/cseMachine/java/components/Method.tsx
new file mode 100644
index 0000000000..cfd3d60d53
--- /dev/null
+++ b/src/features/cseMachine/java/components/Method.tsx
@@ -0,0 +1,120 @@
+import { astToString, ECE } from 'java-slang';
+import { KonvaEventObject } from 'konva/lib/Node';
+import React, { RefObject } from 'react';
+import { Circle, Group, Label, Tag, Text } from 'react-konva';
+
+import { Visible } from '../../components/Visible';
+import { Config, ShapeDefaultProps } from '../../CseMachineConfig';
+import { ControlStashConfig } from '../../CseMachineControlStashConfig';
+import { IHoverable } from '../../CseMachineTypes';
+import {
+  defaultStrokeColor,
+  defaultTextColor,
+  getTextHeight,
+  getTextWidth,
+  setHoveredCursor,
+  setUnhoveredCursor
+} from '../../CseMachineUtils';
+import { CseMachine } from '../CseMachine';
+
+export class Method extends Visible implements IHoverable {
+  private _centerX: number;
+
+  private readonly _tooltipRef: RefObject<any>;
+  private readonly _tooltip: string;
+
+  constructor(
+    x: number,
+    y: number,
+    private readonly _method: ECE.Closure
+  ) {
+    super();
+
+    // Position.
+    this._x = x;
+    this._y = y;
+
+    // Circle.
+    this._centerX = this._x + Config.FnRadius * 2;
+
+    // Tooltip.
+    this._tooltipRef = React.createRef();
+    this._tooltip = astToString(this._method.mtdOrCon);
+  }
+
+  get method() {
+    return this._method;
+  }
+
+  setX(x: number) {
+    this._x = x;
+    this._centerX = this._x + Config.FnRadius * 2;
+  }
+
+  onMouseEnter = (e: KonvaEventObject<MouseEvent>) => {
+    setHoveredCursor(e.currentTarget);
+    this._tooltipRef.current.show();
+  };
+
+  onMouseLeave = (e: KonvaEventObject<MouseEvent>) => {
+    setUnhoveredCursor(e.currentTarget);
+    this._tooltipRef.current.hide();
+  };
+
+  draw(): React.ReactNode {
+    return (
+      <React.Fragment key={CseMachine.key++}>
+        <Group
+          onMouseEnter={e => this.onMouseEnter(e)}
+          onMouseLeave={e => this.onMouseLeave(e)}
+          // ref={this.ref}
+          key={CseMachine.key++}
+        >
+          {/* Left outer */}
+          <Circle
+            {...ShapeDefaultProps}
+            key={CseMachine.key++}
+            x={this._centerX - Config.FnRadius}
+            y={this.y()}
+            radius={Config.FnRadius}
+            stroke={defaultStrokeColor()}
+          />
+          {/* Left inner */}
+          <Circle
+            {...ShapeDefaultProps}
+            key={CseMachine.key++}
+            x={this._centerX - Config.FnRadius}
+            y={this.y()}
+            radius={Config.FnInnerRadius}
+            fill={defaultStrokeColor()}
+          />
+        </Group>
+
+        {/* Tooltip */}
+        <Label
+          x={this.x() + Config.FnRadius * 2 + Config.TextPaddingX * 2}
+          y={this.y() - getTextHeight(this._tooltip, getTextWidth(this._tooltip)) / 2}
+          visible={false}
+          ref={this._tooltipRef}
+          key={CseMachine.key++}
+        >
+          <Tag
+            stroke="black"
+            fill={'black'}
+            opacity={Config.FnTooltipOpacity}
+            key={CseMachine.key++}
+          />
+          <Text
+            text={this._tooltip}
+            fontFamily={ControlStashConfig.FontFamily}
+            fontSize={ControlStashConfig.FontSize}
+            fontStyle={ControlStashConfig.FontStyle}
+            fill={defaultTextColor()}
+            padding={5}
+            key={CseMachine.key++}
+          />
+        </Label>
+      </React.Fragment>
+    );
+  }
+}
diff --git a/src/features/cseMachine/java/components/Object.tsx b/src/features/cseMachine/java/components/Object.tsx
new file mode 100644
index 0000000000..73760e232f
--- /dev/null
+++ b/src/features/cseMachine/java/components/Object.tsx
@@ -0,0 +1,43 @@
+import { ECE } from 'java-slang';
+import React from 'react';
+import { Group } from 'react-konva';
+
+import { Visible } from '../../components/Visible';
+import { CseMachine } from '../CseMachine';
+import { Frame } from './Frame';
+
+export class Obj extends Visible {
+  constructor(
+    private readonly _frames: Frame[],
+    private readonly _object: ECE.Object
+  ) {
+    super();
+
+    // Position.
+    this._x = _frames[0].x();
+    this._y = _frames[0].y();
+
+    // Height and width.
+    this._height = this._frames.reduce((accHeight, currFrame) => accHeight + currFrame.height(), 0);
+    this._width = this._frames.reduce(
+      (maxWidth, currFrame) => Math.max(maxWidth, currFrame.width()),
+      0
+    );
+  }
+
+  get frames() {
+    return this._frames;
+  }
+
+  get object() {
+    return this._object;
+  }
+
+  getFrame(): Frame {
+    return this._frames[this._frames.length - 1];
+  }
+
+  draw(): React.ReactNode {
+    return <Group key={CseMachine.key++}>{this._frames.map(f => f.draw())}</Group>;
+  }
+}
diff --git a/src/features/cseMachine/java/components/Stash.tsx b/src/features/cseMachine/java/components/Stash.tsx
new file mode 100644
index 0000000000..7b7e6b72e9
--- /dev/null
+++ b/src/features/cseMachine/java/components/Stash.tsx
@@ -0,0 +1,90 @@
+import { ECE } from 'java-slang';
+import React from 'react';
+import { Group } from 'react-konva';
+
+import { Visible } from '../../components/Visible';
+import { ControlStashConfig } from '../../CseMachineControlStashConfig';
+import { defaultTextColor } from '../../CseMachineUtils';
+import { CseMachine } from '../CseMachine';
+import { Method } from './Method';
+import { StashItem } from './StashItem';
+import { Variable } from './Variable';
+
+export class Stash extends Visible {
+  private readonly _stashItems: StashItem[] = [];
+
+  constructor(stash: ECE.Stash) {
+    super();
+
+    // Position.
+    this._x = ControlStashConfig.StashPosX;
+    this._y = ControlStashConfig.StashPosY;
+
+    // Create each StashItem.
+    let stashItemX: number = this._x;
+    for (const stashItem of stash.getStack()) {
+      const stashItemText = this.getStashItemString(stashItem);
+      const stashItemStroke = defaultTextColor();
+      const stashItemReference = this.getStashItemRef(stashItem);
+      const currStashItem = new StashItem(
+        stashItemX,
+        stashItemText,
+        stashItemStroke,
+        stashItemReference
+      );
+
+      this._stashItems.push(currStashItem);
+      stashItemX += currStashItem.width();
+    }
+
+    // Height and width.
+    this._height = ControlStashConfig.StashItemHeight;
+    this._width = stashItemX - this._x;
+  }
+
+  draw(): React.ReactNode {
+    return <Group key={CseMachine.key++}>{this._stashItems.map(s => s.draw())}</Group>;
+  }
+
+  private getStashItemString = (stashItem: ECE.StashItem): string => {
+    switch (stashItem.kind) {
+      case 'Literal':
+        return stashItem.literalType.value;
+      case ECE.StructType.VARIABLE:
+        return 'location';
+      case ECE.StructType.TYPE:
+        return stashItem.type;
+      default:
+        return stashItem.kind.toLowerCase();
+    }
+  };
+
+  private getStashItemRef = (stashItem: ECE.StashItem) => {
+    return stashItem.kind === ECE.StructType.CLOSURE
+      ? CseMachine.environment &&
+          (CseMachine.environment.classes
+            .flatMap(c => c.bindings)
+            .find(b => b.value instanceof Method && b.value.method === stashItem)?.value as Method)
+      : stashItem.kind === ECE.StructType.VARIABLE
+      ? CseMachine.environment &&
+        ((CseMachine.environment.frames
+          .flatMap(c => c.bindings)
+          .find(b => b.value instanceof Variable && b.value.variable === stashItem)
+          ?.value as Variable) ||
+          (CseMachine.environment.classes
+            .flatMap(c => c.bindings)
+            .find(b => b.value instanceof Variable && b.value.variable === stashItem)
+            ?.value as Variable) ||
+          (CseMachine.environment.objects
+            .flatMap(o => o.bindings)
+            .find(b => b.value instanceof Variable && b.value.variable === stashItem)
+            ?.value as Variable))
+      : stashItem.kind === ECE.StructType.CLASS
+      ? CseMachine.environment &&
+        CseMachine.environment.classes.find(c => c.frame === stashItem.frame)
+      : stashItem.kind === ECE.StructType.OBJECT
+      ? CseMachine.environment &&
+        CseMachine.environment.objects.find(o => o.frame === stashItem.frame)
+      : undefined;
+  };
+}
diff --git a/src/features/cseMachine/java/components/StashItem.tsx b/src/features/cseMachine/java/components/StashItem.tsx
new file mode 100644
index 0000000000..ed2d938be8
--- /dev/null
+++ b/src/features/cseMachine/java/components/StashItem.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  Group as KonvaGroup,
+  Label as KonvaLabel,
+  Tag as KonvaTag,
+  Text as KonvaText
+} from 'react-konva';
+
+import { Visible } from '../../components/Visible';
+import { ShapeDefaultProps } from '../../CseMachineConfig';
+import { ControlStashConfig } from '../../CseMachineControlStashConfig';
+import { defaultTextColor, getTextWidth } from '../../CseMachineUtils';
+import { CseMachine } from '../CseMachine';
+import { Arrow } from './Arrow';
+import { Frame } from './Frame';
+import { Method } from './Method';
+import { Variable } from './Variable';
+
+export class StashItem extends Visible {
+  private readonly _arrow: Arrow | undefined;
+
+  constructor(
+    x: number,
+    private readonly _text: string,
+    private readonly _stroke: string,
+    reference?: Method | Frame | Variable
+  ) {
+    super();
+
+    // Position.
+    this._x = x;
+    this._y = ControlStashConfig.StashPosY;
+
+    // Height and width.
+    this._height = ControlStashConfig.StashItemHeight + ControlStashConfig.StashItemTextPadding * 2;
+    this._width = ControlStashConfig.StashItemTextPadding * 2 + getTextWidth(this._text);
+
+    // Arrow
+    if (reference) {
+      const toY =
+        reference instanceof Frame
+          ? reference.y() + reference.name.height()
+          : reference instanceof Method
+          ? reference.y()
+          : reference.y() + reference.type.height();
+      this._arrow = new Arrow(
+        this._x + this._width / 2,
+        this._y + this._height,
+        reference.x(),
+        toY
+      );
+    }
+  }
+
+  draw(): React.ReactNode {
+    const textProps = {
+      fill: defaultTextColor(),
+      padding: ControlStashConfig.StashItemTextPadding,
+      fontFamily: ControlStashConfig.FontFamily,
+      fontSize: ControlStashConfig.FontSize,
+      fontStyle: ControlStashConfig.FontStyle,
+      fontVariant: ControlStashConfig.FontVariant
+    };
+
+    const tagProps = {
+      stroke: this._stroke,
+      cornerRadius: ControlStashConfig.StashItemCornerRadius
+    };
+
+    return (
+      <KonvaGroup key={CseMachine.key++}>
+        {/* Text */}
+        <KonvaLabel x={this.x()} y={this.y()} key={CseMachine.key++}>
+          <KonvaTag {...ShapeDefaultProps} {...tagProps} key={CseMachine.key++} />
+          <KonvaText
+            {...ShapeDefaultProps}
+            {...textProps}
+            text={this._text}
+            key={CseMachine.key++}
+          />
+        </KonvaLabel>
+
+        {/* Arrow */}
+        {this._arrow?.draw()}
+      </KonvaGroup>
+    );
+  }
+}
diff --git a/src/features/cseMachine/java/components/Text.tsx b/src/features/cseMachine/java/components/Text.tsx
new file mode 100644
index 0000000000..b88d8c3c5b
--- /dev/null
+++ b/src/features/cseMachine/java/components/Text.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Group as KonvaGroup, Label as KonvaLabel, Text as KonvaText } from 'react-konva';
+
+import { Visible } from '../../components/Visible';
+import { Config, ShapeDefaultProps } from '../../CseMachineConfig';
+import { defaultTextColor, getTextWidth } from '../../CseMachineUtils';
+import { CseMachine } from '../CseMachine';
+
+/** this class encapsulates a string to be drawn onto the canvas */
+export class Text extends Visible {
+  constructor(
+    private readonly _text: string,
+    x: number,
+    y: number
+  ) {
+    super();
+
+    // Position
+    this._x = x;
+    this._y = y;
+
+    // Height and width
+    this._height = Config.FontSize;
+    this._width = getTextWidth(this._text);
+  }
+
+  get text() {
+    return this._text;
+  }
+
+  setY(y: number) {
+    this._y = y;
+  }
+
+  draw(): React.ReactNode {
+    const props = {
+      fontFamily: Config.FontFamily,
+      fontSize: Config.FontSize,
+      fontStyle: Config.FontStyle,
+      fill: defaultTextColor()
+    };
+
+    return (
+      <KonvaGroup key={CseMachine.key++}>
+        <KonvaLabel x={this.x()} y={this.y()} key={CseMachine.key++}>
+          <KonvaText {...ShapeDefaultProps} key={CseMachine.key++} text={this._text} {...props} />
+        </KonvaLabel>
+      </KonvaGroup>
+    );
+  }
+}
diff --git a/src/features/cseMachine/java/components/Variable.tsx b/src/features/cseMachine/java/components/Variable.tsx
new file mode 100644
index 0000000000..4d42365453
--- /dev/null
+++ b/src/features/cseMachine/java/components/Variable.tsx
@@ -0,0 +1,110 @@
+import { ECE } from 'java-slang';
+import React from 'react';
+import { Group, Rect } from 'react-konva';
+
+import { Visible } from '../../components/Visible';
+import { Config, ShapeDefaultProps } from '../../CseMachineConfig';
+import { defaultTextColor } from '../../CseMachineUtils';
+import { CseMachine } from '../CseMachine';
+import { Arrow } from './Arrow';
+import { Text } from './Text';
+
+export interface TextOptions {
+  maxWidth: number;
+  fontSize: number;
+  fontFamily: string;
+  fontStyle: string;
+  fontVariant: string;
+  isStringIdentifiable: boolean;
+}
+
+export const defaultOptions: TextOptions = {
+  maxWidth: Number.MAX_VALUE, // maximum width this text should be
+  fontFamily: Config.FontFamily.toString(), // default is Arial
+  fontSize: Number(Config.FontSize), // in pixels. Default is 12
+  fontStyle: Config.FontStyle.toString(), // can be normal, bold, or italic. Default is normal
+  fontVariant: Config.FontVariant.toString(), // can be normal or small-caps. Default is normal
+  isStringIdentifiable: false // if true, contain strings within double quotation marks "". Default is false
+};
+
+export class Variable extends Visible {
+  private readonly _type: Text;
+  private _value: Text | Arrow;
+
+  constructor(
+    x: number,
+    y: number,
+    private readonly _variable: ECE.Variable
+  ) {
+    super();
+
+    // Position.
+    this._x = x;
+    this._y = y;
+
+    // Type.
+    this._type = new Text(this._variable.type, this._x, this._y);
+
+    // Value.
+    if (this.variable.value.kind === 'Literal') {
+      this._value = new Text(
+        this.variable.value.literalType.value,
+        this._x + Config.TextPaddingX,
+        this._y + this._type.height() + Config.TextPaddingX
+      );
+    } else if (this.variable.value.kind === ECE.StructType.SYMBOL) {
+      this._value = new Text(
+        '',
+        this._x + Config.TextPaddingX,
+        this._y + this._type.height() + Config.TextPaddingX
+      );
+    } else {
+      this._value = new Text(
+        '',
+        this._x + Config.TextPaddingX,
+        this._y + this._type.height() + Config.TextPaddingX
+      );
+    }
+
+    // Height and width.
+    this._height = this._type.height() + this._value.height() + 2 * Config.TextPaddingX;
+    this._width = Math.max(this._type.width(), this._value.width() + 2 * Config.TextPaddingX);
+  }
+
+  get variable() {
+    return this._variable;
+  }
+
+  set value(value: Arrow) {
+    this._value = value;
+    this._height = this._type.height() + Config.FontSize + 2 * Config.TextPaddingX;
+    this._width = Math.max(this._type.width(), Config.TextMinWidth);
+  }
+
+  get type() {
+    return this._type;
+  }
+
+  draw(): React.ReactNode {
+    return (
+      <Group key={CseMachine.key++}>
+        {/* Type */}
+        {this._type.draw()}
+
+        {/* Box */}
+        <Rect
+          {...ShapeDefaultProps}
+          x={this._x}
+          y={this._y + this._type.height()}
+          width={this._width}
+          height={this._height - this._type.height()}
+          stroke={defaultTextColor()}
+          key={CseMachine.key++}
+        />
+
+        {/* Text */}
+        {this._value.draw()}
+      </Group>
+    );
+  }
+}
diff --git a/src/features/dataVisualizer/drawable/ArrayDrawable.tsx b/src/features/dataVisualizer/drawable/ArrayDrawable.tsx
index 494004da84..8f37d7d716 100644
--- a/src/features/dataVisualizer/drawable/ArrayDrawable.tsx
+++ b/src/features/dataVisualizer/drawable/ArrayDrawable.tsx
@@ -27,12 +27,12 @@ class ArrayDrawable extends React.PureComponent<ArrayProps> {
           <Text
             key={'' + nodeValue + index}
             text={textToDisplay}
-            align={'center'}
+            align="center"
             width={Config.BoxWidth}
             x={Config.BoxWidth * index}
             y={Math.floor((Config.BoxHeight - 1.2 * 12) / 2)}
             fontStyle={textValue === undefined ? 'italic' : 'normal'}
-            fill={'white'}
+            fill="white"
             preventDefault={false}
           />
         );
@@ -55,7 +55,7 @@ class ArrayDrawable extends React.PureComponent<ArrayProps> {
           height={Config.BoxHeight}
           strokeWidth={Config.StrokeWidth}
           stroke={Config.Stroke}
-          fill={'#17181A'}
+          fill="#17181A"
           preventDefault={false}
         />
         {/* Vertical lines in the box */}
diff --git a/src/features/game/location/GameMap.ts b/src/features/game/location/GameMap.ts
index d009abce86..412fd1fbbb 100644
--- a/src/features/game/location/GameMap.ts
+++ b/src/features/game/location/GameMap.ts
@@ -125,11 +125,14 @@ class GameMap {
   }
 
   public setItemInMap(gameItemType: GameItemType, itemId: string, item: any) {
+    // @ts-expect-error TS 5.0, violating abstraction of class and object using .set
     this[gameItemType].set(itemId, item);
   }
 
   public addItemToLocation(locId: LocationId, gameItemType: GameItemType, itemId: string) {
-    this.getLocationAtId(locId)[gameItemType].add(itemId);
+    const location = this.getLocationAtId(locId);
+    const items = location[gameItemType as keyof typeof location];
+    (items as Set<any>).add(itemId);
   }
 
   public setBGMusicAt(locId: LocationId, soundKey: AssetKey) {
diff --git a/src/features/game/parser/LocationDetailsParser.ts b/src/features/game/parser/LocationDetailsParser.ts
index 91a40012ff..a87b8649cb 100644
--- a/src/features/game/parser/LocationDetailsParser.ts
+++ b/src/features/game/parser/LocationDetailsParser.ts
@@ -30,7 +30,7 @@ export default class LocationDetailsParser {
       });
 
       Parser.checkpoint.map.addMapAsset(this.locationAssetKey(shortPath), {
-        type: AssetType[type] || AssetType.Image,
+        type: AssetType[type as keyof typeof AssetType] || AssetType.Image,
         key: id,
         path: this.locationPath(shortPath),
         config: {
diff --git a/src/features/game/parser/ObjectParser.ts b/src/features/game/parser/ObjectParser.ts
index 1a23199201..2f2fecb0f4 100644
--- a/src/features/game/parser/ObjectParser.ts
+++ b/src/features/game/parser/ObjectParser.ts
@@ -83,7 +83,7 @@ export default class ObjectParser {
     };
 
     Parser.checkpoint.map.addMapAsset(this.objectAssetKey(shortPath), {
-      type: AssetType[type] || AssetType.Image,
+      type: AssetType[type as keyof typeof AssetType] || AssetType.Image,
       key: objectId,
       path: this.objectPath(shortPath),
       config: {
diff --git a/src/features/game/parser/ParserConverter.ts b/src/features/game/parser/ParserConverter.ts
index 56b7dcb3bb..921cdb45ce 100644
--- a/src/features/game/parser/ParserConverter.ts
+++ b/src/features/game/parser/ParserConverter.ts
@@ -82,30 +82,44 @@ const stringToUserStateTypeMap = {
  * This also acts as a validity checker to ensure that
  * strings such as action types (eg 'show_dialogue') and
  * game modes (eg 'explore') are actually valid enums
+ *
+ * TODO: Investigate if the typing can be improved
  */
 export default class ParserConverter {
   public static stringToSize(str: string) {
-    return stringToSizeMap[str] || GameSize.Medium;
+    return stringToSizeMap[str as keyof typeof stringToSizeMap] || GameSize.Medium;
   }
 
   public static stringToPosition(str: string) {
-    return stringToPositionMap[str] || GamePosition.Middle;
+    return stringToPositionMap[str as keyof typeof stringToPositionMap] || GamePosition.Middle;
   }
 
   public static stringToGameMode(str: string) {
-    return mandatory(stringToGameModeMap[str], `Invalid location mode, ${str}`);
+    return mandatory(
+      stringToGameModeMap[str as keyof typeof stringToGameModeMap],
+      `Invalid location mode, ${str}`
+    );
   }
 
   public static stringToActionType(str: string) {
-    return mandatory(stringToActionTypeMap[str], `Invalid action type, ${str}`);
+    return mandatory(
+      stringToActionTypeMap[str as keyof typeof stringToActionTypeMap],
+      `Invalid action type, ${str}`
+    );
   }
 
   public static stringToGameStateStorage(str: string) {
-    return mandatory(stringToGameStateStorageMap[str], `Invalid condition type, ${str}`);
+    return mandatory(
+      stringToGameStateStorageMap[str as keyof typeof stringToGameStateStorageMap],
+      `Invalid condition type, ${str}`
+    );
   }
 
   public static stringToGameItemType(str: string) {
-    return mandatory(stringToGameItemMap[str], `Invalid entity type, ${str}`);
+    return mandatory(
+      stringToGameItemMap[str as keyof typeof stringToGameItemMap],
+      `Invalid entity type, ${str}`
+    );
   }
 
   public static stringToBoolean(str: string) {
@@ -113,6 +127,9 @@ export default class ParserConverter {
   }
 
   public static stringToUserStateType(str: string) {
-    return mandatory(stringToUserStateTypeMap[str], `Invalid user state type ${str}`);
+    return mandatory(
+      stringToUserStateTypeMap[str as keyof typeof stringToUserStateTypeMap],
+      `Invalid user state type ${str}`
+    );
   }
 }
diff --git a/src/features/game/parser/ParserValidator.ts b/src/features/game/parser/ParserValidator.ts
index a58a106b0e..52bd8af204 100644
--- a/src/features/game/parser/ParserValidator.ts
+++ b/src/features/game/parser/ParserValidator.ts
@@ -121,6 +121,7 @@ export default class ParserValidator {
       (assertionDetails: AssertionDetail[], gameItemType: GameItemType) => {
         assertionDetails.forEach((assertionDetail: AssertionDetail) => {
           const { itemId, actionType } = assertionDetail;
+          // @ts-expect-error TS 5.0, violating abstraction of class and object using .has
           if (!Parser.checkpoint.map[gameItemType].has(itemId)) {
             if (actionType) {
               this.actionAssertionError(itemId, gameItemType, actionType);
diff --git a/src/features/game/phase/GamePhaseManager.ts b/src/features/game/phase/GamePhaseManager.ts
index 90d4477cc5..df7baa2b28 100644
--- a/src/features/game/phase/GamePhaseManager.ts
+++ b/src/features/game/phase/GamePhaseManager.ts
@@ -172,7 +172,9 @@ export default class GamePhaseManager {
    * @returns {boolean}
    */
   public isCurrentPhaseTerminal(): boolean {
-    return Object.values(GameTerminalPhaseType).includes(this.getCurrentPhase());
+    return Object.values(GameTerminalPhaseType).includes(
+      this.getCurrentPhase() as unknown as GameTerminalPhaseType
+    );
   }
 
   /**
diff --git a/src/features/game/state/GameStateManager.ts b/src/features/game/state/GameStateManager.ts
index 5cb0ecc1ce..24c3264947 100644
--- a/src/features/game/state/GameStateManager.ts
+++ b/src/features/game/state/GameStateManager.ts
@@ -232,7 +232,10 @@ class GameStateManager {
    * @returns {ItemId[]} items IDS of all game items of that type in the location
    */
   public getGameItemsInLocation(gameItemType: GameItemType, locationId: LocationId): ItemId[] {
-    return Array.from(this.gameMap.getLocationAtId(locationId)[gameItemType]) || [];
+    const location = this.gameMap.getLocationAtId(locationId);
+    const items = location[gameItemType as keyof typeof location];
+    // Non-strict equality check to match both null and undefined
+    return items == undefined ? [] : Array.from(items);
   }
 
   /**
@@ -245,7 +248,9 @@ class GameStateManager {
    * @param itemId item ID to be added
    */
   public addItem(gameItemType: GameItemType, locationId: LocationId, itemId: ItemId) {
-    this.gameMap.getLocationAtId(locationId)[gameItemType]?.add(itemId);
+    const location = this.gameMap.getLocationAtId(locationId);
+    const items = location[gameItemType as keyof typeof location];
+    (items as Set<any> | undefined)?.add(itemId);
 
     this.isCurrentLocation(locationId)
       ? this.getSubscriberForItemType(gameItemType)?.handleAdd(itemId)
@@ -263,7 +268,9 @@ class GameStateManager {
    * @param itemId item ID to be removed
    */
   public removeItem(gameItemType: GameItemType, locationId: LocationId, itemId: string) {
-    this.gameMap.getLocationAtId(locationId)[gameItemType]?.delete(itemId);
+    const location = this.gameMap.getLocationAtId(locationId);
+    const items = location[gameItemType as keyof typeof location];
+    (items as Set<any> | undefined)?.delete(itemId);
 
     this.isCurrentLocation(locationId)
       ? this.getSubscriberForItemType(gameItemType)?.handleDelete(itemId)
diff --git a/src/features/grading/GradingTypes.ts b/src/features/grading/GradingTypes.ts
index 5e531b046e..f978eb1ce9 100644
--- a/src/features/grading/GradingTypes.ts
+++ b/src/features/grading/GradingTypes.ts
@@ -1,8 +1,9 @@
 import {
+  AssessmentStatus,
   AssessmentType,
   AutogradingResult,
-  GradingStatus,
   MCQChoice,
+  ProgressStatus,
   Question,
   Testcase
 } from '../../commons/assessment/AssessmentTypes';
@@ -22,16 +23,17 @@ export type GradingOverview = {
   xpAdjustment: number;
   currentXp: number;
   maxXp: number;
+  isGradingPublished: boolean;
+  progress: ProgressStatus;
   studentId: number;
   studentName: string | undefined;
   studentNames: string[] | undefined;
   studentUsername: string | undefined;
   studentUsernames: string[] | undefined;
+  submissionStatus: AssessmentStatus;
   submissionId: number;
-  submissionStatus: string;
   groupName: string;
   groupLeaderId?: number;
-  gradingStatus: GradingStatus;
   questionCount: number;
   gradedCount: number;
 };
diff --git a/src/features/grading/GradingUtils.ts b/src/features/grading/GradingUtils.ts
index f7871dd425..37b66eb077 100644
--- a/src/features/grading/GradingUtils.ts
+++ b/src/features/grading/GradingUtils.ts
@@ -1,16 +1,13 @@
 import { ColumnFilter } from '@tanstack/react-table';
-import { GradingStatuses } from 'src/commons/assessment/AssessmentTypes';
+import {
+  AssessmentStatus,
+  AssessmentStatuses,
+  ProgressStatus,
+  ProgressStatuses
+} from 'src/commons/assessment/AssessmentTypes';
 
 import { GradingOverview } from './GradingTypes';
 
-// TODO: Unused. Marked for deletion.
-export const isSubmissionUngraded = (s: GradingOverview): boolean => {
-  const isSubmitted = s.submissionStatus === 'submitted';
-  const isNotGraded =
-    s.gradingStatus !== GradingStatuses.graded && s.gradingStatus !== GradingStatuses.excluded;
-  return isSubmitted && isNotGraded;
-};
-
 export const exportGradingCSV = (gradingOverviews: GradingOverview[] | undefined) => {
   if (!gradingOverviews) return;
 
@@ -22,7 +19,7 @@ export const exportGradingCSV = (gradingOverviews: GradingOverview[] | undefined
 
   const content = new Blob(
     [
-      '"Assessment Number","Assessment Name","Student Name","Student Username","Group","Status","Grading","Question Count","Questions Graded","Initial XP","XP Adjustment","Current XP (excl. bonus)","Max XP","Bonus XP"\n',
+      '"Assessment Number","Assessment Name","Student Name","Student Username","Group","Progress","Question Count","Questions Graded","Initial XP","XP Adjustment","Current XP (excl. bonus)","Max XP","Bonus XP"\n',
       ...gradingOverviews.map(
         e =>
           [
@@ -31,8 +28,7 @@ export const exportGradingCSV = (gradingOverviews: GradingOverview[] | undefined
             e.studentName,
             e.studentUsername,
             e.groupName,
-            e.submissionStatus,
-            e.gradingStatus,
+            e.progress,
             e.questionCount,
             e.gradedCount,
             e.initialXp,
@@ -72,9 +68,7 @@ export const exportGradingCSV = (gradingOverviews: GradingOverview[] | undefined
   }, 0);
 };
 
-// Cleanup work: change all references to column properties in backend saga to backend name to reduce
-// un-needed hardcode conversion, ensuring that places that reference it are updated. A two-way conversion
-// function would be good to implement in GradingUtils.
+// TODO: Two-way conversion function for frontend-backend parameter conversion
 export const convertFilterToBackendParams = (column: ColumnFilter) => {
   switch (column.id) {
     case 'assessmentName':
@@ -85,8 +79,8 @@ export const convertFilterToBackendParams = (column: ColumnFilter) => {
       return { name: column.value };
     case 'studentUsername':
       return { username: column.value };
-    case 'submissionStatus':
-      return { status: column.value };
+    case 'progress':
+      return progressStatusToBackendParams(column.value as ProgressStatus);
     case 'groupName':
       return { groupName: column.value };
     default:
@@ -98,13 +92,77 @@ export const paginationToBackendParams = (page: number, pageSize: number) => {
   return { offset: page * pageSize, pageSize: pageSize };
 };
 
-export const ungradedToBackendParams = (showAll: boolean) => {
+export const unpublishedToBackendParams = (showAll: boolean) => {
   if (showAll) {
     return {};
   }
+
   return {
-    status: 'submitted',
+    status: AssessmentStatuses.submitted,
     isManuallyGraded: true,
-    notFullyGraded: true
+    isGradingPublished: false
   };
 };
+
+/**
+ * Converts multiple backend parameters into a single comprehensive grading status for use in the grading dashboard.
+ * @returns a ProgressStatus, defined within AssessmentTypes, useable by the grading dashboard for display and business logic
+ * as well as by the assessment overviews for each student to determine if grading is to be shown
+ */
+export const backendParamsToProgressStatus = (
+  isManuallyGraded: boolean,
+  isGradingPublished: boolean,
+  submissionStatus: AssessmentStatus,
+  numGraded: number,
+  numQuestions: number
+): ProgressStatus => {
+  if (!isManuallyGraded) {
+    return ProgressStatuses.autograded;
+  } else if (submissionStatus !== AssessmentStatuses.submitted) {
+    return submissionStatus;
+  } else if (numGraded < numQuestions) {
+    return ProgressStatuses.submitted;
+  } else if (!isGradingPublished) {
+    return ProgressStatuses.graded;
+  } else {
+    return ProgressStatuses.published;
+  }
+};
+
+export const progressStatusToBackendParams = (progress: ProgressStatus) => {
+  switch (progress) {
+    case ProgressStatuses.autograded:
+      return {
+        isManuallyGraded: false
+      };
+    case ProgressStatuses.published:
+      return {
+        isManuallyGraded: true,
+        isGradingPublished: true,
+        isFullyGraded: true,
+        status: AssessmentStatuses.submitted
+      };
+    case ProgressStatuses.graded:
+      return {
+        isManuallyGraded: true,
+        isGradingPublished: false,
+        isFullyGraded: true,
+        status: AssessmentStatuses.submitted
+      };
+    case ProgressStatuses.submitted:
+      return {
+        isManuallyGraded: true,
+        isGradingPublished: false,
+        isFullyGraded: false,
+        status: AssessmentStatuses.submitted
+      };
+    default:
+      // 'attempted' work may have been previously graded and then unsubmitted
+      // thus, isFullyGraded flag is not added
+      return {
+        isManuallyGraded: true,
+        isGradingPublished: false,
+        status: progress as AssessmentStatus
+      };
+  }
+};
diff --git a/src/features/groundControl/GroundControlActions.ts b/src/features/groundControl/GroundControlActions.ts
index 0cf419a4ed..0f4b32f555 100644
--- a/src/features/groundControl/GroundControlActions.ts
+++ b/src/features/groundControl/GroundControlActions.ts
@@ -7,6 +7,8 @@ import {
   CONFIGURE_ASSESSMENT,
   DELETE_ASSESSMENT,
   PUBLISH_ASSESSMENT,
+  PUBLISH_GRADING_ALL,
+  UNPUBLISH_GRADING_ALL,
   UPLOAD_ASSESSMENT
 } from './GroundControlTypes';
 
@@ -24,9 +26,19 @@ export const deleteAssessment = createAction(DELETE_ASSESSMENT, (id: number) =>
 
 export const publishAssessment = createAction(
   PUBLISH_ASSESSMENT,
-  (togglePublishTo: boolean, id: number) => ({ payload: { id, togglePublishTo } })
+  (togglePublishAssessmentTo: boolean, id: number) => ({
+    payload: { id, togglePublishAssessmentTo }
+  })
 );
 
+export const publishGradingAll = createAction(PUBLISH_GRADING_ALL, (id: number) => ({
+  payload: id
+}));
+
+export const unpublishGradingAll = createAction(UNPUBLISH_GRADING_ALL, (id: number) => ({
+  payload: id
+}));
+
 export const uploadAssessment = createAction(
   UPLOAD_ASSESSMENT,
   (file: File, forceUpdate: boolean, assessmentConfigId: number) => ({
diff --git a/src/features/groundControl/GroundControlTypes.ts b/src/features/groundControl/GroundControlTypes.ts
index f14b1b61a3..7999c9860a 100644
--- a/src/features/groundControl/GroundControlTypes.ts
+++ b/src/features/groundControl/GroundControlTypes.ts
@@ -2,6 +2,8 @@ export const CHANGE_DATE_ASSESSMENT = 'CHANGE_DATE_ASSESSMENT';
 export const CHANGE_TEAM_SIZE_ASSESSMENT = 'CHANGE_TEAM_SIZE_ASSESSMENT';
 export const DELETE_ASSESSMENT = 'DELETE_ASSESSMENT';
 export const PUBLISH_ASSESSMENT = 'PUBLISH_ASSESSMENT';
+export const PUBLISH_GRADING_ALL = 'PUBLISH_GRADING_ALL';
+export const UNPUBLISH_GRADING_ALL = 'UNPUBLISH_GRADING_ALL';
 export const UPLOAD_ASSESSMENT = 'UPLOAD_ASSESSMENT';
 export const CONFIGURE_ASSESSMENT = 'CONFIGURE_ASSESSMENT';
 export const ASSIGN_ENTRIES_FOR_VOTING = 'ASSIGN_ENTRIES_FOR_VOTING';
diff --git a/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx b/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx
index aa73f7ad49..9b16045e64 100644
--- a/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx
+++ b/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx
@@ -7,9 +7,9 @@ import {
   DialogFooter,
   FormGroup,
   HTMLSelect,
-  InputGroup
+  InputGroup,
+  Tooltip
 } from '@blueprintjs/core';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import React from 'react';
 import { QrReader } from 'react-qr-reader';
@@ -83,9 +83,9 @@ const RemoteExecutionDeviceDialog: React.FC<Props> = ({
   };
 
   const scanButton = (
-    <Tooltip2 content="Scan QR Code">
+    <Tooltip content="Scan QR Code">
       <Button minimal icon="clip" onClick={() => setShowScanner(() => !showScanner)} />
-    </Tooltip2>
+    </Tooltip>
   );
 
   return (
diff --git a/src/features/sicp/TableOfContentsHelper.ts b/src/features/sicp/TableOfContentsHelper.ts
index 1616d6947c..7f2a850f5e 100644
--- a/src/features/sicp/TableOfContentsHelper.ts
+++ b/src/features/sicp/TableOfContentsHelper.ts
@@ -1,13 +1,20 @@
+import { DistributedKeyOf, Merge } from 'src/commons/utils/TypeHelper';
+
 import tocNavigation from './data/toc-navigation.json';
 
-export const getNext = (section: string): string | undefined => {
-  const node = tocNavigation[section];
+type MergeAll<T extends Record<any, Record<any, any>>> = {
+  [K in keyof T]: Merge<T[K], Record<DistributedKeyOf<T[keyof T]>, undefined>>;
+};
 
-  return node && node['next'];
+type NodeTree = MergeAll<typeof tocNavigation>;
+type Node = NodeTree[keyof NodeTree];
+
+export const getNext = (section: string): string | undefined => {
+  const node = tocNavigation[section as keyof typeof tocNavigation] as Node;
+  return node && node.next;
 };
 
 export const getPrev = (section: string): string | undefined => {
-  const node = tocNavigation[section];
-
-  return node && node['prev'];
+  const node = tocNavigation[section as keyof typeof tocNavigation] as Node;
+  return node && node.prev;
 };
diff --git a/src/features/sicp/chatCompletion/api.ts b/src/features/sicp/chatCompletion/api.ts
new file mode 100644
index 0000000000..610660d479
--- /dev/null
+++ b/src/features/sicp/chatCompletion/api.ts
@@ -0,0 +1,23 @@
+import { Tokens } from 'src/commons/application/types/SessionTypes';
+import { request } from 'src/commons/utils/RequestHelper';
+
+/**
+ * POST /chat
+ */
+export async function chat(
+  tokens: Tokens,
+  payload: { role: string; content: string }[]
+): Promise<string> {
+  const response = await request(`chat`, 'POST', {
+    ...tokens,
+    body: { json: payload }
+  });
+  if (!response) {
+    throw new Error('Unknown error occurred.');
+  }
+  if (!response.ok) {
+    const message = await response.text();
+    throw new Error(`Failed to chat to louis: ${message}`);
+  }
+  return response.text();
+}
diff --git a/src/features/sicp/chatCompletion/chatCompletion.ts b/src/features/sicp/chatCompletion/chatCompletion.ts
new file mode 100644
index 0000000000..72728c1ff1
--- /dev/null
+++ b/src/features/sicp/chatCompletion/chatCompletion.ts
@@ -0,0 +1,22 @@
+import sicpNotes from './sicpNotes';
+
+const promptPrefix =
+  'You are a competent tutor, assisting a student who is learning computer science following the textbook "Structure and Interpretation of Computer Programs,' +
+  'JavaScript edition". The student request is about a paragraph of the book. The request may be a follow-up request to a request that was posed to you' +
+  'previously.\n' +
+  'What follows are:\n' +
+  '(1) the summary of section (2) the full paragraph. Please answer the student request,' +
+  'not the requests of the history. If the student request is not related to the book, ask them to ask questions that are related to the book. Do not say that I provide you text.\n\n';
+
+const queryPrefix = '\n(2) Here is the paragraph:\n';
+
+export type SicpSection = `${number}` | `${number}.${number}` | `${number}.${number}.${number}`;
+export const buildPrompt = <T extends SicpSection>(section: T, query: string) => {
+  const sectionSummary = sicpNotes[section as SicpSection];
+  const sectionPrefix =
+    sectionSummary === undefined
+      ? '\n(1) There is no section summary for this section. Please answer the question based on the following paragraph.\n'
+      : '\n(1) Here is the summary of this section:\n' + sectionSummary;
+
+  return promptPrefix + sectionPrefix + queryPrefix + query;
+};
diff --git a/src/pages/sicp/subcomponents/chatbot/SicpNotes.ts b/src/features/sicp/chatCompletion/sicpNotes.ts
similarity index 99%
rename from src/pages/sicp/subcomponents/chatbot/SicpNotes.ts
rename to src/features/sicp/chatCompletion/sicpNotes.ts
index 8d780bb485..ee463f22e1 100644
--- a/src/pages/sicp/subcomponents/chatbot/SicpNotes.ts
+++ b/src/features/sicp/chatCompletion/sicpNotes.ts
@@ -1,3 +1,5 @@
+import { SicpSection } from './chatCompletion';
+
 const summary1 =
   '1. Building Abstractions with Functions' +
   '\n1. **Introduction to Programming Concepts:**' +
@@ -1144,7 +1146,7 @@ const summary3_5_5 =
 
 //...
 
-const SICPNotes = {
+const sicpNotes: Partial<Record<SicpSection, string>> = {
   '1': summary1,
   '1.1': summary1_1,
   '1.1.1': summary1_1_1,
@@ -1219,4 +1221,4 @@ const SICPNotes = {
   //...
 };
 
-export default SICPNotes;
+export default sicpNotes;
diff --git a/src/index.tsx b/src/index.tsx
index e98f961989..8f3a37a1c7 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,6 @@
 import 'src/styles/index.scss';
 
-import { Button } from '@blueprintjs/core';
+import { Button, OverlaysProvider } from '@blueprintjs/core';
 import * as Sentry from '@sentry/browser';
 import { setModulesStaticURL } from 'js-slang/dist/modules/loader';
 import { createRoot } from 'react-dom/client';
@@ -42,7 +42,9 @@ createInBrowserFileSystem(store)
   .finally(() => {
     root.render(
       <Provider store={store}>
-        <ApplicationWrapper />
+        <OverlaysProvider>
+          <ApplicationWrapper />
+        </OverlaysProvider>
       </Provider>
     );
   });
diff --git a/src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx b/src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx
index 96752de472..5ebabb6560 100644
--- a/src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/AddStoriesUserPanel.tsx
@@ -8,10 +8,10 @@ import {
   HTMLSelect,
   Icon,
   Intent,
+  Popover,
   Position
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import { GridApi, GridReadyEvent } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { uniqBy } from 'lodash';
@@ -65,7 +65,7 @@ const AddStoriesUserPanel: React.FC<Props> = props => {
   const grid = (
     <div className="Grid ag-grid-parent ag-theme-balham">
       <AgGridReact
-        domLayout={'autoHeight'}
+        domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}
         onGridReady={onGridReady}
@@ -178,7 +178,7 @@ const AddStoriesUserPanel: React.FC<Props> = props => {
                 {({ getRootProps, acceptedFile, ProgressBar, getRemoveFileProps }: any) => (
                   <>
                     <FileInput text="Upload CSV" inputProps={getRootProps()} />
-                    <Popover2
+                    <Popover
                       content={
                         <div>
                           <p>
@@ -226,7 +226,7 @@ const AddStoriesUserPanel: React.FC<Props> = props => {
                       popoverClassName="file-input-popover"
                     >
                       <Icon icon={IconNames.HELP} className="file-input-icon" />
-                    </Popover2>
+                    </Popover>
                   </>
                 )}
               </CSVReader>
@@ -237,14 +237,14 @@ const AddStoriesUserPanel: React.FC<Props> = props => {
               label={
                 <div className="html-select-label">
                   <div>Authentication Provider</div>
-                  <Popover2
+                  <Popover
                     content="The authentication provider your learners will use to log in with"
                     interactionKind="hover-target"
                     position={Position.TOP}
                     popoverClassName="html-select-popover"
                   >
                     <Icon icon={IconNames.HELP} className="html-select-label-icon" />
-                  </Popover2>
+                  </Popover>
                 </div>
               }
               inline
diff --git a/src/pages/academy/adminPanel/subcomponents/AddUserPanel.tsx b/src/pages/academy/adminPanel/subcomponents/AddUserPanel.tsx
index b8345768bf..e6ad189e39 100644
--- a/src/pages/academy/adminPanel/subcomponents/AddUserPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/AddUserPanel.tsx
@@ -8,10 +8,10 @@ import {
   HTMLSelect,
   Icon,
   Intent,
+  Popover,
   Position
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import { GridApi, GridReadyEvent } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { uniqBy } from 'lodash';
@@ -65,7 +65,7 @@ const AddUserPanel: React.FC<Props> = props => {
   const grid = (
     <div className="Grid ag-grid-parent ag-theme-balham">
       <AgGridReact
-        domLayout={'autoHeight'}
+        domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}
         onGridReady={onGridReady}
@@ -177,7 +177,7 @@ const AddUserPanel: React.FC<Props> = props => {
                 {({ getRootProps, acceptedFile, ProgressBar, getRemoveFileProps }: any) => (
                   <>
                     <FileInput text="Upload CSV" inputProps={getRootProps()} />
-                    <Popover2
+                    <Popover
                       content={
                         <div>
                           <p>
@@ -251,7 +251,7 @@ const AddUserPanel: React.FC<Props> = props => {
                       popoverClassName="file-input-popover"
                     >
                       <Icon icon={IconNames.HELP} className="file-input-icon" />
-                    </Popover2>
+                    </Popover>
                   </>
                 )}
               </CSVReader>
@@ -262,14 +262,14 @@ const AddUserPanel: React.FC<Props> = props => {
               label={
                 <div className="html-select-label">
                   <div>Authentication Provider</div>
-                  <Popover2
+                  <Popover
                     content="The authentication provider your learners will use to log in with"
                     interactionKind="hover-target"
                     position={Position.TOP}
                     popoverClassName="html-select-popover"
                   >
                     <Icon icon={IconNames.HELP} className="html-select-label-icon" />
-                  </Popover2>
+                  </Popover>
                 </div>
               }
               inline
diff --git a/src/pages/academy/adminPanel/subcomponents/NotificationConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/NotificationConfigPanel.tsx
index 008531d606..6c5a469a71 100644
--- a/src/pages/academy/adminPanel/subcomponents/NotificationConfigPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/NotificationConfigPanel.tsx
@@ -191,7 +191,7 @@ const NotificationConfigPanel = () => {
   const grid = (
     <div className="Grid ag-grid-parent ag-theme-balham">
       <AgGridReact
-        domLayout={'autoHeight'}
+        domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}
         onGridReady={onGridReady}
diff --git a/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx
index 3d10e8818b..650441eeb1 100644
--- a/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx
@@ -31,16 +31,42 @@ const AssessmentConfigPanel: React.FC<Props> = ({
 }) => {
   const gridApi = React.useRef<GridApi>();
 
+  // manually graded assessments should not be auto-published
+  // check and ensure that isManuallyGraded = true and isGradingAutoPublished = true cannot be set simultaneously
   const setIsManuallyGraded = (index: number, value: boolean) => {
     const temp = [...assessmentConfig.current];
     temp[index] = {
       ...temp[index],
       isManuallyGraded: value
     };
+
+    // use a second spread operator if mutation of temp[index] causes issues
+    if (value) {
+      temp[index].isGradingAutoPublished = false;
+      gridApi.current?.getDisplayedRowAtIndex(index)?.setDataValue('isGradingAutoPublished', false);
+    }
+
     setAssessmentConfig(temp);
     gridApi.current?.getDisplayedRowAtIndex(index)?.setDataValue('isManuallyGraded', value);
   };
 
+  const setIsGradingAutoPublished = (index: number, value: boolean) => {
+    const temp = [...assessmentConfig.current];
+
+    temp[index] = {
+      ...temp[index],
+      isGradingAutoPublished: value
+    };
+
+    if (value) {
+      temp[index].isManuallyGraded = false;
+      gridApi.current?.getDisplayedRowAtIndex(index)?.setDataValue('isManuallyGraded', false);
+    }
+
+    setAssessmentConfig(temp);
+    gridApi.current?.getDisplayedRowAtIndex(index)?.setDataValue('isGradingAutoPublished', value);
+  };
+
   const setDisplayInDashboard = (index: number, value: boolean) => {
     const temp = [...assessmentConfig.current];
     temp[index] = {
@@ -102,6 +128,7 @@ const AssessmentConfigPanel: React.FC<Props> = ({
       assessmentConfigId: -1,
       type: 'untitled',
       isManuallyGraded: true,
+      isGradingAutoPublished: false,
       displayInDashboard: true,
       hoursBeforeEarlyXpDecay: 0,
       hasTokenCounter: false,
@@ -141,6 +168,15 @@ const AssessmentConfigPanel: React.FC<Props> = ({
         field: 'isManuallyGraded'
       }
     },
+    {
+      headerName: 'Is Auto-published',
+      field: 'isGradingAutoPublished',
+      cellRenderer: BooleanCell,
+      cellRendererParams: {
+        setStateHandler: setIsGradingAutoPublished,
+        field: 'isGradingAutoPublished'
+      }
+    },
     {
       headerName: 'Display in Dashboard',
       field: 'displayInDashboard',
@@ -252,7 +288,7 @@ const AssessmentConfigPanel: React.FC<Props> = ({
   const grid = (
     <div className="Grid ag-grid-parent ag-theme-balham">
       <AgGridReact
-        domLayout={'autoHeight'}
+        domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}
         onGridReady={onGridReady}
diff --git a/src/pages/academy/adminPanel/subcomponents/userConfigPanel/RolesCell.tsx b/src/pages/academy/adminPanel/subcomponents/userConfigPanel/RolesCell.tsx
index 04bcfb9f8a..6aa0dc240c 100644
--- a/src/pages/academy/adminPanel/subcomponents/userConfigPanel/RolesCell.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/userConfigPanel/RolesCell.tsx
@@ -1,5 +1,4 @@
-import { HTMLSelect, Position } from '@blueprintjs/core';
-import { Popover2 } from '@blueprintjs/popover2';
+import { HTMLSelect, Popover, Position } from '@blueprintjs/core';
 import React from 'react';
 import { Role } from 'src/commons/application/ApplicationTypes';
 import { AdminPanelCourseRegistration } from 'src/commons/application/types/SessionTypes';
@@ -27,7 +26,7 @@ const RolesCell: React.FC<Props> = props => {
     { label: 'Admin', value: Role.Admin }
   ];
   return (
-    <Popover2
+    <Popover
       content="You cannot downgrade yourself from an admin role!"
       interactionKind="click"
       position={Position.TOP}
@@ -42,7 +41,7 @@ const RolesCell: React.FC<Props> = props => {
         value={data.role}
         disabled={props.courseRegId === data.courseRegId}
       />
-    </Popover2>
+    </Popover>
   );
 };
 
diff --git a/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserActionsCell.tsx b/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserActionsCell.tsx
index 8bdf21018a..bbcb15d8df 100644
--- a/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserActionsCell.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserActionsCell.tsx
@@ -1,6 +1,13 @@
-import { Button, Dialog, DialogBody, DialogFooter, Intent, Position } from '@blueprintjs/core';
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  Intent,
+  Popover,
+  Position
+} from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Popover2 } from '@blueprintjs/popover2';
 import React, { useCallback, useState } from 'react';
 import { Role } from 'src/commons/application/ApplicationTypes';
 import { AdminPanelCourseRegistration } from 'src/commons/application/types/SessionTypes';
@@ -31,7 +38,7 @@ const DeleteUserCell: React.FC<Props> = ({ data, handleDeleteUserFromCourse }) =
 
   return (
     <>
-      <Popover2
+      <Popover
         content="You cannot delete an admin!"
         interactionKind="click"
         position={Position.TOP}
@@ -43,7 +50,7 @@ const DeleteUserCell: React.FC<Props> = ({ data, handleDeleteUserFromCourse }) =
           onClick={clickHandler}
           disabled={data.role === Role.Admin}
         />
-      </Popover2>
+      </Popover>
       <Dialog
         icon={IconNames.WARNING_SIGN}
         isOpen={isDialogOpen}
diff --git a/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserConfigPanel.tsx
index f0a65b5bfb..b292121b35 100644
--- a/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserConfigPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserConfigPanel.tsx
@@ -79,7 +79,7 @@ const UserConfigPanel: React.FC<Props> = props => {
   const grid = (
     <div className="Grid ag-grid-parent ag-theme-balham">
       <AgGridReact
-        domLayout={'autoHeight'}
+        domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}
         onGridReady={onGridReady}
diff --git a/src/pages/academy/dashboard/Dashboard.tsx b/src/pages/academy/dashboard/Dashboard.tsx
index c3c0dacbf6..15b3a55c17 100644
--- a/src/pages/academy/dashboard/Dashboard.tsx
+++ b/src/pages/academy/dashboard/Dashboard.tsx
@@ -44,7 +44,7 @@ const Dashboard: React.FC = () => {
     <div className="Dashboard">
       <div className="Grid ag-grid-parent ag-theme-balham">
         <AgGridReact
-          domLayout={'autoHeight'}
+          domLayout="autoHeight"
           columnDefs={columnDefs}
           defaultColDef={defaultColumnDefs}
           onGridReady={onGridReady}
diff --git a/src/pages/academy/game/Game.tsx b/src/pages/academy/game/Game.tsx
index 65adf5495f..f68a0aae78 100644
--- a/src/pages/academy/game/Game.tsx
+++ b/src/pages/academy/game/Game.tsx
@@ -1,3 +1,6 @@
+import { Icon } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { useFullscreen } from '@mantine/hooks';
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
@@ -50,9 +53,95 @@ function Game() {
     }
   }, [session, achievements, goals]);
 
+  // This is a custom hook imported from @mantine/hooks that handles the fullscreen logic
+  // It returns a ref to attach to the element that should be fullscreened,
+  // a function to toggle fullscreen and a boolean indicating whether the element is fullscreen
+  const {
+    ref: fullscreenRef,
+    toggle: toggleFullscreen,
+    fullscreen: isFullscreen
+  } = useFullscreen<HTMLDivElement>();
+
+  // This function is a wrapper around toggleFullscreen that also locks the screen orientation
+  // to landscape when entering fullscreen and unlocks it when exiting fullscreen
+  const enhancedToggleFullscreen = async () => {
+    toggleFullscreen();
+
+    if (window.screen.orientation) {
+      if (!isFullscreen) {
+        // @ts-expect-error: lock is not defined in the type definition
+        // as it is not suppored in some browsers (notably Firefox)
+        window.screen.orientation.lock('landscape');
+      } else {
+        window.screen.orientation.unlock();
+      }
+    }
+  };
+
+  const gameDisplayRef = React.useRef<HTMLDivElement | null>(null);
+
+  // This function sets the gameDisplayRef and also calls the ref callback from useFullscreen
+  // to attach the fullscreen logic to the game display element
+  const setGameDisplayRefs = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      // Refs returned by useRef()
+      gameDisplayRef.current = node;
+
+      // Ref callback from useFullscreen
+      fullscreenRef(node);
+    },
+    [fullscreenRef]
+  );
+
+  // Logic for the fullscreen button to dynamically adjust its size, position and padding
+  // based on the size of the game display.
+  const [iconSize, setIconSize] = React.useState(0);
+  const [iconLeft, setIconLeft] = React.useState('0px');
+  const [iconPadding, setIconPadding] = React.useState('0px');
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      if (gameDisplayRef.current) {
+        const aspectRatio = 16 / 9;
+        const height = gameDisplayRef.current.offsetHeight;
+        const width = gameDisplayRef.current.offsetWidth;
+        const size = height / 40;
+        const padding = height / 50;
+        const leftOffset =
+          isFullscreen || height * aspectRatio > width ? 0 : (width - height * aspectRatio) / 2;
+        setIconSize(size);
+        setIconPadding(`${padding}px`);
+        setIconLeft(`${leftOffset}px`);
+      }
+    };
+
+    // When exiting fullscreen, the browser might not have completed the transition
+    // at the time handleResize is called, so the height of gameDisplayRef.current
+    // is still the fullscreen height.
+    // To fix this, we delay handleResize by 100ms.
+    const delayedHandleResize = () => {
+      setTimeout(handleResize, 100);
+    };
+
+    window.addEventListener('resize', delayedHandleResize);
+    delayedHandleResize();
+
+    return () => window.removeEventListener('resize', delayedHandleResize);
+  }, [isFullscreen]);
+
   return (
     <>
-      <div id="game-display"></div>
+      <div id="game-display" ref={setGameDisplayRefs}>
+        <Icon
+          id="fullscreen-button"
+          icon={isFullscreen ? IconNames.MINIMIZE : IconNames.FULLSCREEN}
+          color="white"
+          htmlTitle={isFullscreen ? 'Exit full screen' : 'Full screen'}
+          size={iconSize}
+          onClick={enhancedToggleFullscreen}
+          style={{ left: iconLeft, padding: iconPadding }}
+        />
+      </div>
       {isTestStudent && (
         <div className="Horizontal">
           <button
diff --git a/src/pages/academy/gameSimulator/subcomponents/assetViewer/AssetViewerUtils.tsx b/src/pages/academy/gameSimulator/subcomponents/assetViewer/AssetViewerUtils.tsx
index 3f05682c9a..b67e93ecfd 100644
--- a/src/pages/academy/gameSimulator/subcomponents/assetViewer/AssetViewerUtils.tsx
+++ b/src/pages/academy/gameSimulator/subcomponents/assetViewer/AssetViewerUtils.tsx
@@ -1,6 +1,8 @@
 import { TreeNodeInfo } from '@blueprintjs/core';
 import { set } from 'lodash';
 
+type Tree = Record<any, any> | string[] | any;
+
 /**
  * This function takes a list of filepaths and returns blueprint core tree nodes.
  * Each node represents a file / folder.
@@ -21,7 +23,7 @@ export function convertAssetPathsToTree(
   iconRenderer: (pathName: string) => JSX.Element,
   rootFolders: string[] = []
 ): TreeNodeInfo[] {
-  const assetObj = {};
+  const assetObj: Tree = {};
   assetPaths.forEach(assetPath => set(assetObj, assetPath.split('/'), 'FILE'));
   rootFolders.forEach(folder => {
     if (!assetObj[folder] || assetObj[folder] === 'FILE') {
@@ -29,10 +31,7 @@ export function convertAssetPathsToTree(
     }
   });
 
-  const convertAssetObjectsToTree = (
-    parentFolders: string[],
-    assetObj: object | Array<string>
-  ): TreeNodeInfo[] => {
+  const convertAssetObjectsToTree = (parentFolders: string[], assetObj: Tree): TreeNodeInfo[] => {
     return Object.keys(assetObj).map(file => {
       const shortPath = '/' + parentFolders.join('/') + '/' + file;
       return {
diff --git a/src/pages/academy/gameSimulator/subcomponents/chapterPublisher/ChapterPublisher.tsx b/src/pages/academy/gameSimulator/subcomponents/chapterPublisher/ChapterPublisher.tsx
index e643f42bed..dcd552f563 100644
--- a/src/pages/academy/gameSimulator/subcomponents/chapterPublisher/ChapterPublisher.tsx
+++ b/src/pages/academy/gameSimulator/subcomponents/chapterPublisher/ChapterPublisher.tsx
@@ -1,3 +1,4 @@
+import { Classes } from '@blueprintjs/core';
 import { memo, useState } from 'react';
 import { useRequest } from 'src/commons/utils/Hooks';
 import { defaultChapter } from 'src/features/gameSimulator/GameSimulatorConstants';
@@ -20,7 +21,7 @@ const ChapterPublisher: React.FC = () => {
   return (
     <>
       <h3>Publish / Edit Chapters</h3>
-      <select className="bp5-menu" onChange={(e: any) => setChosenIndex(e.target.key)}>
+      <select className={Classes.MENU} onChange={(e: any) => setChosenIndex(e.target.key)}>
         {chapters.map((chapter, chapterIndex) => (
           <option key={chapterIndex} value={chapter.title}>
             {`Chapter ${chapterIndex}: ${chapter.title}`}
diff --git a/src/pages/academy/gameSimulator/subcomponents/chapterPublisher/ChapterPublisherEditor.tsx b/src/pages/academy/gameSimulator/subcomponents/chapterPublisher/ChapterPublisherEditor.tsx
index 27e30433ce..08f680500d 100644
--- a/src/pages/academy/gameSimulator/subcomponents/chapterPublisher/ChapterPublisherEditor.tsx
+++ b/src/pages/academy/gameSimulator/subcomponents/chapterPublisher/ChapterPublisherEditor.tsx
@@ -1,4 +1,4 @@
-import { Button, Intent, Switch } from '@blueprintjs/core';
+import { Button, Classes, Intent, Switch } from '@blueprintjs/core';
 import { DatePicker } from '@blueprintjs/datetime';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { getStandardDateTime } from 'src/commons/utils/DateHelper';
@@ -115,7 +115,8 @@ const ChapterPublisherEditor: React.FC<ChapterSimProps> = ({ chapterDetail, chap
   return (
     <>
       <h4>
-        Title: <input className="bp5-input" type="text" placeholder="New title" {...titleProps} />
+        Title:{' '}
+        <input className={Classes.INPUT} type="text" placeholder="New title" {...titleProps} />
       </h4>
       <b>Open date: </b>
       {openDate && getStandardDateTime(openDate.toISOString())}
@@ -127,7 +128,8 @@ const ChapterPublisherEditor: React.FC<ChapterSimProps> = ({ chapterDetail, chap
         highlightCurrentDay
       />
       <h4>
-        Chapter Preview Image URL: <input className="bp5-input" type="text" {...imageUrlProps} />
+        Chapter Preview Image URL:{' '}
+        <input className={Classes.INPUT} type="text" {...imageUrlProps} />
       </h4>
       <h4>Chapter Files (.txt):</h4>
       <SortableList items={chosenFiles} onSortEnd={onSortEnd} />
diff --git a/src/pages/academy/gameSimulator/subcomponents/chapterSimulator/ChapterSimulatorTextLoader.tsx b/src/pages/academy/gameSimulator/subcomponents/chapterSimulator/ChapterSimulatorTextLoader.tsx
index b5a7c64c03..4fa87efcc8 100644
--- a/src/pages/academy/gameSimulator/subcomponents/chapterSimulator/ChapterSimulatorTextLoader.tsx
+++ b/src/pages/academy/gameSimulator/subcomponents/chapterSimulator/ChapterSimulatorTextLoader.tsx
@@ -1,6 +1,6 @@
 import 'ace-builds/webpack-resolver';
 
-import { Button, Tab, Tabs } from '@blueprintjs/core';
+import { Button, Classes, Tab, Tabs } from '@blueprintjs/core';
 import { useState } from 'react';
 import { toTxtPath } from 'src/features/game/assets/TextAssets';
 import { toS3Path } from 'src/features/game/utils/GameUtils';
@@ -39,14 +39,14 @@ const ChapterSimulatorTextLoader: React.FC<StorageProps> = ({ storageName, s3Txt
 
   const chooseS3Txt = (
     <>
-      <select className="bp5-menu" onChange={changeChosenFilename}>
+      <select className={Classes.MENU} onChange={changeChosenFilename}>
         {s3TxtFiles.map(file => (
           <option value={file} key={file}>
             {file}
           </option>
         ))}
       </select>
-      <Button icon={'download'} onClick={() => window.open(toTxtPath(chosenFilename))} />
+      <Button icon="download" onClick={() => window.open(toTxtPath(chosenFilename))} />
     </>
   );
 
diff --git a/src/pages/academy/grading/Grading.tsx b/src/pages/academy/grading/Grading.tsx
index af28f984c3..529758da4e 100644
--- a/src/pages/academy/grading/Grading.tsx
+++ b/src/pages/academy/grading/Grading.tsx
@@ -14,7 +14,7 @@ import { numberRegExp } from 'src/features/academy/AcademyTypes';
 import {
   exportGradingCSV,
   paginationToBackendParams,
-  ungradedToBackendParams
+  unpublishedToBackendParams
 } from 'src/features/grading/GradingUtils';
 
 import ContentDisplay from '../../../commons/ContentDisplay';
@@ -28,7 +28,7 @@ const groupOptions = [
 ];
 
 const showOptions = [
-  { value: false, label: 'ungraded' },
+  { value: false, label: 'unpublished' },
   { value: true, label: 'all' }
 ];
 
@@ -55,7 +55,7 @@ const Grading: React.FC = () => {
       dispatch(
         fetchGradingOverviews(
           showAllGroups,
-          ungradedToBackendParams(showAllSubmissions),
+          unpublishedToBackendParams(showAllSubmissions),
           paginationToBackendParams(page, pageSize),
           filterParams
         )
diff --git a/src/pages/academy/grading/subcomponents/GradingActions.tsx b/src/pages/academy/grading/subcomponents/GradingActions.tsx
index d10ea8f5dc..c99df8c3fd 100644
--- a/src/pages/academy/grading/subcomponents/GradingActions.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingActions.tsx
@@ -1,20 +1,24 @@
-import { Icon as BpIcon } from '@blueprintjs/core';
+import { Button, Icon as BpIcon } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Flex, Icon } from '@tremor/react';
 import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 import {
+  publishGrading,
   reautogradeSubmission,
+  unpublishGrading,
   unsubmitSubmission
 } from 'src/commons/application/actions/SessionActions';
+import { ProgressStatus, ProgressStatuses } from 'src/commons/assessment/AssessmentTypes';
 import { showSimpleConfirmDialog } from 'src/commons/utils/DialogHelper';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
 
 type Props = {
   submissionId: number;
+  progress: ProgressStatus;
 };
 
-const GradingActions: React.FC<Props> = ({ submissionId }) => {
+const GradingActions: React.FC<Props> = ({ submissionId, progress }) => {
   const dispatch = useDispatch();
   const courseId = useTypedSelector(store => store.session.courseId);
 
@@ -45,13 +49,40 @@ const GradingActions: React.FC<Props> = ({ submissionId }) => {
     }
   };
 
+  const handlePublishClick = async () => {
+    const confirm = await showSimpleConfirmDialog({
+      contents: "Publish this assessment's grading?",
+      positiveIntent: 'primary',
+      positiveLabel: 'Publish'
+    });
+    if (confirm) {
+      dispatch(publishGrading(submissionId));
+    }
+  };
+
+  const handleUnpublishClick = async () => {
+    const confirm = await showSimpleConfirmDialog({
+      contents: "Unpublish this assessment's grading?",
+      positiveIntent: 'primary',
+      positiveLabel: 'Unpublish'
+    });
+    if (confirm) {
+      dispatch(unpublishGrading(submissionId));
+    }
+  };
+
   return (
     <Flex justifyContent="justify-start" spaceX="space-x-2">
       <Link to={`/courses/${courseId}/grading/${submissionId}`}>
         <Icon tooltip="Grade" icon={() => <BpIcon icon={IconNames.EDIT} />} variant="light" />
       </Link>
 
-      <button type="button" style={{ padding: 0 }} onClick={handleReautogradeClick}>
+      <button
+        type="button"
+        style={{ padding: 0 }}
+        hidden={progress !== ProgressStatuses.graded && progress !== ProgressStatuses.submitted}
+        onClick={handleReautogradeClick}
+      >
         <Icon
           tooltip="Reautograde"
           icon={() => <BpIcon icon={IconNames.REFRESH} />}
@@ -59,9 +90,26 @@ const GradingActions: React.FC<Props> = ({ submissionId }) => {
         />
       </button>
 
-      <button type="button" style={{ padding: 0 }} onClick={handleUnsubmitClick}>
+      <button
+        type="button"
+        style={{ padding: 0 }}
+        hidden={progress !== ProgressStatuses.graded && progress !== ProgressStatuses.submitted}
+        onClick={handleUnsubmitClick}
+      >
         <Icon tooltip="Unsubmit" icon={() => <BpIcon icon={IconNames.UNDO} />} variant="simple" />
       </button>
+
+      <Button
+        onClick={handlePublishClick}
+        hidden={progress !== ProgressStatuses.graded}
+        text={'Publish'}
+      />
+
+      <Button
+        onClick={handleUnpublishClick}
+        hidden={progress !== ProgressStatuses.published}
+        text={'Unpublish'}
+      />
     </Flex>
   );
 };
diff --git a/src/pages/academy/grading/subcomponents/GradingBadges.tsx b/src/pages/academy/grading/subcomponents/GradingBadges.tsx
index 32df016ca3..cdb85fc884 100644
--- a/src/pages/academy/grading/subcomponents/GradingBadges.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingBadges.tsx
@@ -2,27 +2,27 @@ import { Icon } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { ColumnFilter } from '@tanstack/react-table';
 import { Badge } from '@tremor/react';
-import { GradingStatus } from 'src/commons/assessment/AssessmentTypes';
+import { ProgressStatus, ProgressStatuses } from 'src/commons/assessment/AssessmentTypes';
 
-const BADGE_COLORS = {
+const BADGE_COLORS = Object.freeze({
   // assessment types
   missions: 'indigo',
   quests: 'emerald',
   paths: 'sky',
 
-  // submission status
-  submitted: 'green',
-  attempting: 'yellow',
-  attempted: 'red',
-
-  // grading status
-  graded: 'green',
-  grading: 'yellow',
-  none: 'red'
-};
+  // ProgressStatus
+  [ProgressStatuses.autograded]: 'purple',
+  [ProgressStatuses.not_attempted]: 'gray',
+  [ProgressStatuses.attempting]: 'red',
+  [ProgressStatuses.attempted]: 'red',
+  [ProgressStatuses.submitted]: 'yellow',
+  [ProgressStatuses.graded]: 'green',
+  [ProgressStatuses.published]: 'blue'
+});
 
 export function getBadgeColorFromLabel(label: string) {
-  return BADGE_COLORS[label.toLowerCase()] || 'gray';
+  const maybeKey = label.toLowerCase() as keyof typeof BADGE_COLORS;
+  return BADGE_COLORS[maybeKey] || 'gray';
 }
 
 type AssessmentTypeBadgeProps = {
@@ -40,36 +40,29 @@ const AssessmentTypeBadge: React.FC<AssessmentTypeBadgeProps> = ({ type, size =
   );
 };
 
-type SubmissionStatusBadgeProps = {
-  status: string;
-};
-
-const SubmissionStatusBadge: React.FC<SubmissionStatusBadgeProps> = ({ status }) => {
-  const statusText = status.charAt(0).toUpperCase() + status.slice(1);
-  return <Badge text={statusText} color={getBadgeColorFromLabel(status)} />;
-};
-
-type GradingStatusBadgeProps = {
-  status: GradingStatus;
+type ProgressStatusBadgeProps = {
+  progress: ProgressStatus;
 };
 
-const GradingStatusBadge: React.FC<GradingStatusBadgeProps> = ({ status }) => {
-  const statusText = status.charAt(0).toUpperCase() + status.slice(1);
+const ProgressStatusBadge: React.FC<ProgressStatusBadgeProps> = ({ progress }) => {
+  const statusText = progress.charAt(0).toUpperCase() + progress.slice(1);
   const badgeIcon = () => (
     <Icon
       icon={
-        status === 'graded'
+        progress === ProgressStatuses.autograded
+          ? IconNames.AIRPLANE
+          : progress === ProgressStatuses.published
+          ? IconNames.ENDORSED
+          : progress === ProgressStatuses.graded
           ? IconNames.TICK
-          : status === 'grading'
+          : progress === ProgressStatuses.submitted
           ? IconNames.TIME
-          : status === 'none'
-          ? IconNames.CROSS
           : IconNames.DISABLE
       }
       style={{ marginRight: '0.5rem' }}
     />
   );
-  return <Badge text={statusText} color={getBadgeColorFromLabel(status)} icon={badgeIcon} />;
+  return <Badge text={statusText} color={getBadgeColorFromLabel(progress)} icon={badgeIcon} />;
 };
 
 type FilterBadgeProps = {
@@ -95,4 +88,4 @@ const FilterBadge: React.FC<FilterBadgeProps> = ({ filter, onRemove }) => {
   );
 };
 
-export { AssessmentTypeBadge, FilterBadge, GradingStatusBadge, SubmissionStatusBadge };
+export { AssessmentTypeBadge, FilterBadge, ProgressStatusBadge };
diff --git a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx
index ab63b9cf79..be36cfed5a 100644
--- a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx
@@ -36,7 +36,7 @@ import { GradingOverview } from 'src/features/grading/GradingTypes';
 import { convertFilterToBackendParams } from 'src/features/grading/GradingUtils';
 
 import GradingActions from './GradingActions';
-import { AssessmentTypeBadge, GradingStatusBadge, SubmissionStatusBadge } from './GradingBadges';
+import { AssessmentTypeBadge, ProgressStatusBadge } from './GradingBadges';
 import GradingSubmissionFilters from './GradingSubmissionFilters';
 
 const columnHelper = createColumnHelper<GradingOverview>();
@@ -90,18 +90,14 @@ const makeColumns = (handleClick: () => void) => [
     header: 'Group',
     cell: info => <Filterable onClick={handleClick} column={info.column} value={info.getValue()} />
   }),
-  columnHelper.accessor('submissionStatus', {
+  columnHelper.accessor('progress', {
     header: 'Progress',
     cell: info => (
       <Filterable onClick={handleClick} column={info.column} value={info.getValue()}>
-        <SubmissionStatusBadge status={info.getValue()} />
+        <ProgressStatusBadge progress={info.getValue()} />
       </Filterable>
     )
   }),
-  columnHelper.accessor('gradingStatus', {
-    header: 'Grading',
-    cell: info => <GradingStatusBadge status={info.getValue()} />
-  }),
   columnHelper.accessor(({ currentXp, xpBonus, maxXp }) => ({ currentXp, xpBonus, maxXp }), {
     header: 'Raw XP (+Bonus)',
     enableColumnFilter: false,
@@ -118,12 +114,12 @@ const makeColumns = (handleClick: () => void) => [
       );
     }
   }),
-  columnHelper.accessor(({ submissionId }) => ({ submissionId }), {
+  columnHelper.accessor(({ submissionId, progress }) => ({ submissionId, progress }), {
     header: 'Actions',
     enableColumnFilter: false,
     cell: info => {
-      const { submissionId } = info.getValue();
-      return <GradingActions submissionId={submissionId} />;
+      const { submissionId, progress } = info.getValue();
+      return <GradingActions submissionId={submissionId} progress={progress} />;
     }
   })
 ];
@@ -215,7 +211,7 @@ const GradingSubmissionTable: React.FC<Props> = ({
 
   useEffect(() => {
     resetPage();
-  }, [updateEntries, resetPage, searchValue]);
+  }, [updateEntries, resetPage]);
 
   useEffect(() => {
     updateEntries(page, backendFilterParams);
diff --git a/src/pages/academy/groundControl/GroundControl.tsx b/src/pages/academy/groundControl/GroundControl.tsx
index a932c78d10..2e851621b9 100644
--- a/src/pages/academy/groundControl/GroundControl.tsx
+++ b/src/pages/academy/groundControl/GroundControl.tsx
@@ -25,6 +25,7 @@ import Dropzone from './subcomponents/GroundControlDropzone';
 import EditCell from './subcomponents/GroundControlEditCell';
 import EditTeamSizeCell from './subcomponents/GroundControlEditTeamSizeCell';
 import PublishCell from './subcomponents/GroundControlPublishCell';
+import ReleaseGradingCell from './subcomponents/GroundControlReleaseGradingCell';
 
 type Props = DispatchProps;
 
@@ -32,7 +33,9 @@ export type DispatchProps = {
   handleAssessmentOverviewFetch: () => void;
   handleDeleteAssessment: (id: number) => void;
   handleUploadAssessment: (file: File, forceUpdate: boolean, assessmentConfigId: number) => void;
-  handlePublishAssessment: (togglePublishTo: boolean, id: number) => void;
+  handlePublishAssessment: (togglePublishAssessmentTo: boolean, id: number) => void;
+  handlePublishGradingAll: (id: number) => void;
+  handleUnpublishGradingAll: (id: number) => void;
   handleAssessmentChangeDate: (id: number, openAt: string, closeAt: string) => void;
   handleAssessmentChangeTeamSize: (id: number, maxTeamSize: number) => void;
   handleConfigureAssessment: (
@@ -136,7 +139,23 @@ const GroundControl: React.FC<Props> = props => {
       cellRendererParams: {
         handlePublishAssessment: props.handlePublishAssessment
       },
-      width: 80,
+      width: 70,
+      filter: false,
+      resizable: false,
+      sortable: false,
+      cellStyle: {
+        padding: 0
+      }
+    },
+    {
+      headerName: 'Release Grading',
+      field: 'placeholderReleaseGrading' as any,
+      cellRenderer: ReleaseGradingCell,
+      cellRendererParams: {
+        handlePublishGradingAll: props.handlePublishGradingAll,
+        handleUnpublishGradingAll: props.handleUnpublishGradingAll
+      },
+      width: 120,
       filter: false,
       resizable: false,
       sortable: false,
@@ -151,7 +170,7 @@ const GroundControl: React.FC<Props> = props => {
       cellRendererParams: {
         handleDeleteAssessment: props.handleDeleteAssessment
       },
-      width: 80,
+      width: 70,
       filter: false,
       resizable: false,
       sortable: false,
@@ -167,7 +186,7 @@ const GroundControl: React.FC<Props> = props => {
         handleConfigureAssessment: props.handleConfigureAssessment,
         handleAssignEntriesForVoting: props.handleAssignEntriesForVoting
       },
-      width: 80,
+      width: 70,
       filter: false,
       resizable: false,
       sortable: false,
@@ -212,13 +231,14 @@ const GroundControl: React.FC<Props> = props => {
   const grid = (
     <div className="Grid ag-grid-parent ag-theme-balham">
       <AgGridReact
-        domLayout={'autoHeight'}
+        alwaysShowHorizontalScroll={true}
+        domLayout="autoHeight"
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}
         onGridReady={onGridReady}
         onGridSizeChanged={resizeGrid}
         rowData={assessmentOverviews}
-        rowHeight={30}
+        rowHeight={35}
         suppressCellFocus={true}
         suppressMovableColumns={true}
         suppressPaginationPanel={true}
diff --git a/src/pages/academy/groundControl/GroundControlContainer.ts b/src/pages/academy/groundControl/GroundControlContainer.ts
index a73f9d319f..482eb62641 100644
--- a/src/pages/academy/groundControl/GroundControlContainer.ts
+++ b/src/pages/academy/groundControl/GroundControlContainer.ts
@@ -13,6 +13,8 @@ import {
   configureAssessment,
   deleteAssessment,
   publishAssessment,
+  publishGradingAll,
+  unpublishGradingAll,
   uploadAssessment
 } from '../../../features/groundControl/GroundControlActions';
 import GroundControl, { DispatchProps } from './GroundControl';
@@ -28,6 +30,8 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dis
       handleDeleteAssessment: deleteAssessment,
       handleUploadAssessment: uploadAssessment,
       handlePublishAssessment: publishAssessment,
+      handlePublishGradingAll: publishGradingAll,
+      handleUnpublishGradingAll: unpublishGradingAll,
       handleFetchCourseConfigs: fetchCourseConfig,
       handleConfigureAssessment: configureAssessment,
       handleAssignEntriesForVoting: assignEntriesForVoting
diff --git a/src/pages/academy/groundControl/configureControls/ExportScoreLeaderboardButton.tsx b/src/pages/academy/groundControl/configureControls/ExportScoreLeaderboardButton.tsx
index 76c00fceda..f0a375fec6 100644
--- a/src/pages/academy/groundControl/configureControls/ExportScoreLeaderboardButton.tsx
+++ b/src/pages/academy/groundControl/configureControls/ExportScoreLeaderboardButton.tsx
@@ -1,17 +1,15 @@
 import { IconNames } from '@blueprintjs/icons';
 import { createGrid, GridOptions } from 'ag-grid-community';
-import { Tokens } from 'src/commons/application/types/SessionTypes';
 import ControlButton from 'src/commons/ControlButton';
 import { getScoreLeaderboard } from 'src/commons/sagas/RequestsSaga';
-import { useSession } from 'src/commons/utils/Hooks';
+import { useTokens } from 'src/commons/utils/Hooks';
 
 type Props = {
   assessmentId: number;
 };
 
 const ExportScoreLeaderboardButton: React.FC<Props> = ({ assessmentId }) => {
-  const { accessToken, refreshToken } = useSession();
-  const tokens = { accessToken, refreshToken } as Tokens;
+  const tokens = useTokens();
 
   // onClick handler for fetching score leaderboard, putting it into a grid and exporting data
   const exportScoreLeaderboardToCsv = async () => {
diff --git a/src/pages/academy/groundControl/configureControls/ExportVoteLeaderboardButton.tsx b/src/pages/academy/groundControl/configureControls/ExportVoteLeaderboardButton.tsx
index b0cc8cf286..912a91c5c6 100644
--- a/src/pages/academy/groundControl/configureControls/ExportVoteLeaderboardButton.tsx
+++ b/src/pages/academy/groundControl/configureControls/ExportVoteLeaderboardButton.tsx
@@ -1,17 +1,15 @@
 import { IconNames } from '@blueprintjs/icons';
 import { createGrid, GridOptions } from 'ag-grid-community';
-import { Tokens } from 'src/commons/application/types/SessionTypes';
 import ControlButton from 'src/commons/ControlButton';
 import { getPopularVoteLeaderboard } from 'src/commons/sagas/RequestsSaga';
-import { useSession } from 'src/commons/utils/Hooks';
+import { useTokens } from 'src/commons/utils/Hooks';
 
 type Props = {
   assessmentId: number;
 };
 
 const ExportVoteLeaderboardButton: React.FC<Props> = ({ assessmentId }) => {
-  const { accessToken, refreshToken } = useSession();
-  const tokens = { accessToken, refreshToken } as Tokens;
+  const tokens = useTokens({ throwWhenEmpty: true });
 
   // onClick handler for fetching popular vote leaderboard, putting it into a grid and exporting data
   const exportPopularVoteLeaderboardToCsv = async () => {
diff --git a/src/pages/academy/groundControl/subcomponents/GroundControlPublishCell.tsx b/src/pages/academy/groundControl/subcomponents/GroundControlPublishCell.tsx
index eaff3118ba..be90ff62aa 100644
--- a/src/pages/academy/groundControl/subcomponents/GroundControlPublishCell.tsx
+++ b/src/pages/academy/groundControl/subcomponents/GroundControlPublishCell.tsx
@@ -6,7 +6,7 @@ import { AssessmentOverview } from '../../../../commons/assessment/AssessmentTyp
 import ControlButton from '../../../../commons/ControlButton';
 
 type Props = {
-  handlePublishAssessment: (togglePublishTo: boolean, id: number) => void;
+  handlePublishAssessment: (togglePublishAssessmentTo: boolean, id: number) => void;
   data: AssessmentOverview;
 };
 
diff --git a/src/pages/academy/groundControl/subcomponents/GroundControlReleaseGradingCell.tsx b/src/pages/academy/groundControl/subcomponents/GroundControlReleaseGradingCell.tsx
new file mode 100644
index 0000000000..5d244cfca9
--- /dev/null
+++ b/src/pages/academy/groundControl/subcomponents/GroundControlReleaseGradingCell.tsx
@@ -0,0 +1,127 @@
+import { Button, Dialog, DialogBody, DialogFooter, Intent, Tooltip } from '@blueprintjs/core';
+import { IconName, IconNames } from '@blueprintjs/icons';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { AssessmentOverview } from '../../../../commons/assessment/AssessmentTypes';
+import ControlButton from '../../../../commons/ControlButton';
+
+type MassPublishFn = (id: number) => void;
+
+type Props = {
+  handlePublishGradingAll: MassPublishFn;
+  handleUnpublishGradingAll: MassPublishFn;
+  data: AssessmentOverview;
+};
+
+const ReleaseGradingCell: React.FC<Props> = ({
+  data,
+  handlePublishGradingAll,
+  handleUnpublishGradingAll
+}) => {
+  const cells = useMemo(
+    () => massPublishingChanges(data, handlePublishGradingAll, handleUnpublishGradingAll),
+    [data, handlePublishGradingAll, handleUnpublishGradingAll]
+  );
+
+  return (
+    <>
+      {cells.map(props => (
+        <MassPublishingChangeCell {...props} key={props.keyID} />
+      ))}
+    </>
+  );
+};
+
+type SubProps = {
+  keyID: string;
+  callbackFn: MassPublishFn;
+  data: AssessmentOverview;
+  change: string;
+  description: string;
+  icon: IconName;
+};
+
+const massPublishingChanges = (
+  data: AssessmentOverview,
+  publishAll: MassPublishFn,
+  unpublishAll: MassPublishFn
+): SubProps[] => [
+  {
+    keyID: '1',
+    callbackFn: unpublishAll,
+    data: data,
+    change: 'Unpublish all submissions',
+    description: 'Non-published submissions are not affected.',
+    icon: IconNames.CROSS_CIRCLE
+  },
+  {
+    keyID: '2',
+    callbackFn: publishAll,
+    data: data,
+    change: 'Publish graded submissions',
+    description: 'Ungraded or already-published submissions are not affected.',
+    icon: IconNames.ENDORSED
+  }
+];
+
+const MassPublishingChangeCell: React.FC<SubProps> = ({
+  keyID,
+  callbackFn,
+  data,
+  change,
+  description,
+  icon
+}) => {
+  const [isDialogOpen, setDialogState] = useState(false);
+
+  const handleOpenDialog = useCallback(() => setDialogState(true), []);
+  const handleCloseDialog = useCallback(() => setDialogState(false), []);
+
+  const handleMassPublishChange = useCallback(() => {
+    const { id } = data;
+    callbackFn(id);
+    handleCloseDialog();
+  }, [data, handleCloseDialog, callbackFn]);
+
+  return (
+    <>
+      <Tooltip content={change} placement="top">
+        <Button minimal key={keyID} onClick={handleOpenDialog} icon={icon} />
+      </Tooltip>
+      <Dialog
+        icon={IconNames.WARNING_SIGN}
+        isOpen={isDialogOpen}
+        onClose={handleCloseDialog}
+        title={change}
+        canOutsideClickClose={true}
+      >
+        <DialogBody>
+          <p>
+            Are you sure you want to {change.toLowerCase()} for the assessment: <i>{data.title}</i>?
+          </p>
+          <p>{description}</p>
+        </DialogBody>
+        <DialogFooter
+          actions={
+            <>
+              <ControlButton
+                label="Cancel"
+                icon={IconNames.CROSS}
+                onClick={handleCloseDialog}
+                options={{ minimal: false }}
+              />
+              <ControlButton
+                label="Confirm"
+                icon={IconNames.CONFIRM}
+                onClick={handleMassPublishChange}
+                options={{ minimal: false, intent: Intent.DANGER }}
+              />
+            </>
+          }
+        />
+      </Dialog>
+    </>
+  );
+};
+
+export default ReleaseGradingCell;
diff --git a/src/pages/academy/notiPreference/NotiPreference.tsx b/src/pages/academy/notiPreference/NotiPreference.tsx
index 2476be1eb1..a03d62b8c0 100644
--- a/src/pages/academy/notiPreference/NotiPreference.tsx
+++ b/src/pages/academy/notiPreference/NotiPreference.tsx
@@ -154,7 +154,7 @@ const NotiPreference: React.FC = () => {
       <H1>Notifications</H1>
       <div className="Grid ag-grid-parent ag-theme-balham">
         <AgGridReact
-          domLayout={'autoHeight'}
+          domLayout="autoHeight"
           columnDefs={columnDefs}
           defaultColDef={defaultColumnDefs}
           onGridReady={onGridReady}
diff --git a/src/pages/academy/teamFormation/subcomponents/TeamFormationBadges.tsx b/src/pages/academy/teamFormation/subcomponents/TeamFormationBadges.tsx
index e5ab93dc01..27a1b304e0 100644
--- a/src/pages/academy/teamFormation/subcomponents/TeamFormationBadges.tsx
+++ b/src/pages/academy/teamFormation/subcomponents/TeamFormationBadges.tsx
@@ -3,31 +3,7 @@ import { IconNames } from '@blueprintjs/icons';
 import { ColumnFilter } from '@tanstack/react-table';
 import { Badge } from '@tremor/react';
 
-const BADGE_COLORS = {
-  // assessment types
-  missions: 'indigo',
-  quests: 'emerald',
-  paths: 'sky'
-};
-
-export function getBadgeColorFromLabel(label: string) {
-  return BADGE_COLORS[label.toLowerCase()] || 'gray';
-}
-
-type AssessmentTypeBadgeProps = {
-  type: string;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-};
-
-const AssessmentTypeBadge: React.FC<AssessmentTypeBadgeProps> = ({ type, size = 'sm' }) => {
-  return (
-    <Badge
-      text={size === 'xs' ? type.charAt(0).toUpperCase() : type}
-      size={size}
-      color={getBadgeColorFromLabel(type)}
-    />
-  );
-};
+import { getBadgeColorFromLabel } from '../../grading/subcomponents/GradingBadges';
 
 type FilterBadgeProps = {
   filter: ColumnFilter;
@@ -48,4 +24,4 @@ const FilterBadge: React.FC<FilterBadgeProps> = ({ filter, onRemove }) => {
   );
 };
 
-export { AssessmentTypeBadge, FilterBadge };
+export { FilterBadge };
diff --git a/src/pages/academy/teamFormation/subcomponents/TeamFormationTable.tsx b/src/pages/academy/teamFormation/subcomponents/TeamFormationTable.tsx
index 33dcaf4756..3f255ae8ec 100644
--- a/src/pages/academy/teamFormation/subcomponents/TeamFormationTable.tsx
+++ b/src/pages/academy/teamFormation/subcomponents/TeamFormationTable.tsx
@@ -28,9 +28,10 @@ import {
   TextInput
 } from '@tremor/react';
 import React, { useState } from 'react';
+import { objectKeys } from 'src/commons/utils/TypeHelper';
 import { TeamFormationOverview } from 'src/features/teamFormation/TeamFormationTypes';
 
-import { AssessmentTypeBadge } from '../../teamFormation/subcomponents/TeamFormationBadges';
+import { AssessmentTypeBadge } from '../../grading/subcomponents/GradingBadges';
 import TeamFormationFilters from '../../teamFormation/subcomponents/TeamFormationFilters';
 import TeamFormationActions from './TeamFormationActions';
 
@@ -60,9 +61,12 @@ const columns = [
           {', '}
         </React.Fragment>
       )),
-    filterFn: (row: Row<TeamFormationOverview>, id: string | number, filterValue: any): boolean => {
-      const rowValue = row.original[id];
-      return Array.isArray(rowValue) && rowValue.includes(filterValue);
+    filterFn: (row, id: string | number, filterValue: any): boolean => {
+      const rowValue = row.original[id as keyof typeof row.original];
+      if (typeof rowValue === 'string' || typeof rowValue === 'number') {
+        return rowValue === filterValue;
+      }
+      return rowValue.some(v => v === filterValue);
     }
   }),
   columnHelper.accessor(({ teamId }) => ({ teamId }), {
@@ -97,7 +101,7 @@ const TeamFormationTable: React.FC<TeamFormationTableProps> = ({ group, teams })
     columnId: string | number,
     filterValue: any
   ): boolean => {
-    for (const column of Object.keys(row.original)) {
+    for (const column of objectKeys(row.original)) {
       const rowValue = row.original[column];
 
       if (Array.isArray(rowValue)) {
diff --git a/src/pages/createStore.ts b/src/pages/createStore.ts
index 48962a4a3e..04389b95bb 100644
--- a/src/pages/createStore.ts
+++ b/src/pages/createStore.ts
@@ -2,6 +2,7 @@ import { configureStore } from '@reduxjs/toolkit';
 import { setAutoFreeze } from 'immer';
 import { throttle } from 'lodash';
 import createSagaMiddleware from 'redux-saga';
+import { SourceActionType } from 'src/commons/utils/ActionsHelper';
 
 import { defaultState, OverallState } from '../commons/application/ApplicationTypes';
 import createRootReducer from '../commons/application/reducers/RootReducer';
@@ -19,7 +20,7 @@ export function createStore() {
   const middleware = [sagaMiddleware];
   const initialStore = loadStore(loadStoredState()) || defaultState;
 
-  const createdStore = configureStore<OverallState>({
+  const createdStore = configureStore<OverallState, SourceActionType>({
     reducer: createRootReducer(),
     // Fix for redux-saga type incompatibility
     // See: https://github.com/reduxjs/redux-toolkit/issues/3950
diff --git a/src/pages/playground/Playground.tsx b/src/pages/playground/Playground.tsx
index 4ae2ae9741..4c7d48ac7c 100644
--- a/src/pages/playground/Playground.tsx
+++ b/src/pages/playground/Playground.tsx
@@ -1047,12 +1047,12 @@ const Playground: React.FC<PlaygroundProps> = props => {
   };
 
   return isMobileBreakpoint ? (
-    <div className={classNames('Playground', Classes.DARK, isGreen ? 'GreenScreen' : undefined)}>
+    <div className={classNames('Playground', Classes.DARK, isGreen && 'GreenScreen')}>
       <MobileWorkspace {...mobileWorkspaceProps} />
     </div>
   ) : (
     <HotKeys
-      className={classNames('Playground', Classes.DARK, isGreen ? 'GreenScreen' : undefined)}
+      className={classNames('Playground', Classes.DARK, isGreen && 'GreenScreen')}
       keyMap={keyMap}
       handlers={handlers}
     >
diff --git a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
index 250b5fc50b..10c33683f0 100644
--- a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
+++ b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
@@ -48,7 +48,7 @@ exports[`Playground tests Playground renders correctly 1`] = `
             </button>
           </span>
           <span
-            class="bp5-popover2-target bp5-popover-target"
+            class="bp5-popover-target"
           >
             <span
               class="bp5-popover-target"
@@ -97,7 +97,7 @@ exports[`Playground tests Playground renders correctly 1`] = `
             class="bp5-popover-target"
           >
             <span
-              class="bp5-popover2-target bp5-popover-target"
+              class="bp5-popover-target"
             >
               <button
                 class="bp5-button bp5-minimal"
@@ -137,7 +137,7 @@ exports[`Playground tests Playground renders correctly 1`] = `
             class="bp5-popover-target"
           >
             <span
-              class="bp5-popover2-target bp5-popover-target"
+              class="bp5-popover-target"
             >
               <button
                 class="bp5-button bp5-minimal"
@@ -159,7 +159,7 @@ exports[`Playground tests Playground renders correctly 1`] = `
             class="bp5-popover-target"
           >
             <span
-              class="bp5-popover2-target bp5-popover-target"
+              class="bp5-popover-target"
             >
               <button
                 class="bp5-button bp5-minimal"
@@ -412,6 +412,22 @@ exports[`Playground tests Playground renders correctly 1`] = `
           <div
             class="right-parent"
           >
+            <span
+              class="fullscreen-button bp5-popover-target"
+            >
+              <button
+                aria-expanded="false"
+                class="bp5-button bp5-minimal"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="bp5-icon bp5-icon-standard bp5-icon-maximize"
+                  data-icon="maximize"
+                />
+              </button>
+            </span>
             <div
               class="resize-side-content"
               style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -963,17 +979,19 @@ and also the
                               data-testid="cse-machine-default-text"
                               id="cse-machine-default-text"
                             >
-                              The CSE machine generates control, stash and environment model diagrams following a notation introduced in
-                               
-                              <a
-                                href="https://sourceacademy.org/sicpjs/3.2"
-                                rel="noopener noreferrer"
-                                target="_blank"
-                              >
-                                <i>
-                                  Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 3, Section 2
-                                </i>
-                              </a>
+                              <span>
+                                The CSE machine generates control, stash and environment model diagrams following a notation introduced in
+                                 
+                                <a
+                                  href="https://sourceacademy.org/sicpjs/3.2"
+                                  rel="noopener noreferrer"
+                                  target="_blank"
+                                >
+                                  <i>
+                                    Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 3, Section 2
+                                  </i>
+                                </a>
+                              </span>
                               .
                               <br />
                               <br />
@@ -1301,7 +1319,7 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
             </button>
           </span>
           <span
-            class="bp5-popover2-target bp5-popover-target"
+            class="bp5-popover-target"
           >
             <span
               class="bp5-popover-target"
@@ -1374,7 +1392,7 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
             class="bp5-popover-target"
           >
             <span
-              class="bp5-popover2-target bp5-popover-target"
+              class="bp5-popover-target"
             >
               <button
                 class="bp5-button bp5-minimal"
@@ -1438,7 +1456,7 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
             class="bp5-popover-target"
           >
             <span
-              class="bp5-popover2-target bp5-popover-target"
+              class="bp5-popover-target"
             >
               <button
                 class="bp5-button bp5-minimal"
@@ -1472,7 +1490,7 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
             class="bp5-popover-target"
           >
             <span
-              class="bp5-popover2-target bp5-popover-target"
+              class="bp5-popover-target"
             >
               <button
                 class="bp5-button bp5-minimal"
@@ -1749,6 +1767,34 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
           <div
             class="right-parent"
           >
+            <span
+              class="fullscreen-button bp5-popover-target"
+            >
+              <button
+                aria-expanded="false"
+                class="bp5-button bp5-minimal"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="bp5-icon bp5-icon-maximize"
+                >
+                  <svg
+                    data-icon="maximize"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </span>
             <div
               class="resize-side-content"
               style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
diff --git a/src/pages/sicp/Sicp.tsx b/src/pages/sicp/Sicp.tsx
index c0e0960305..aa093097ce 100644
--- a/src/pages/sicp/Sicp.tsx
+++ b/src/pages/sicp/Sicp.tsx
@@ -2,13 +2,15 @@ import 'katex/dist/katex.min.css';
 
 import { Button, Classes, NonIdealState, Spinner } from '@blueprintjs/core';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useLocation, useNavigate, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 import Constants from 'src/commons/utils/Constants';
+import { useSession } from 'src/commons/utils/Hooks';
 import { setLocalStorage } from 'src/commons/utils/LocalStorageHelper';
 import { resetWorkspace, toggleUsingSubst } from 'src/commons/workspace/WorkspaceActions';
+import { SicpSection } from 'src/features/sicp/chatCompletion/chatCompletion';
 import { parseArr, ParseJsonError } from 'src/features/sicp/parser/ParseJson';
 import { getNext, getPrev } from 'src/features/sicp/TableOfContentsHelper';
 import {
@@ -35,17 +37,19 @@ export const CodeSnippetContext = React.createContext({
 const loadingComponent = <NonIdealState title="Loading Content" icon={<Spinner />} />;
 
 const Sicp: React.FC = () => {
-  const [data, setData] = React.useState(<></>);
-  const [loading, setLoading] = React.useState(false);
-  const [active, setActive] = React.useState('0');
+  const [data, setData] = useState(<></>);
+  const [loading, setLoading] = useState(false);
+  const [active, setActive] = useState('0');
   const { section } = useParams<{ section: string }>();
-  const parentRef = React.useRef<HTMLDivElement>(null);
-  const refs = React.useRef({});
+  const parentRef = useRef<HTMLDivElement>(null);
+  const refs = useRef<Record<string, HTMLElement | null>>({});
   const navigate = useNavigate();
   const location = useLocation();
+  const { isLoggedIn } = useSession();
 
   function getSection() {
-    return location.pathname.replace('/sicpjs/', ''); // To discard the '/sicpjs/'
+    // To discard the '/sicpjs/'
+    return location.pathname.replace('/sicpjs/', '') as SicpSection;
   }
 
   const getText = () => {
@@ -69,7 +73,7 @@ const Sicp: React.FC = () => {
     return visibleParagraphs;
   };
 
-  const scrollRefIntoView = (ref: HTMLDivElement | null) => {
+  const scrollRefIntoView = (ref: HTMLElement | null) => {
     if (!ref || !parentRef?.current) {
       return;
     }
@@ -197,7 +201,7 @@ const Sicp: React.FC = () => {
           )}
         </CodeSnippetContext.Provider>
       </SicpErrorBoundary>
-      <Chatbot getSection={getSection} getText={getText} />
+      {isLoggedIn && <Chatbot getSection={getSection} getText={getText} />}
     </div>
   );
 };
diff --git a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
index c55337142b..e325655893 100644
--- a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
+++ b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
@@ -1,139 +1,99 @@
 import { Button } from '@blueprintjs/core';
-import * as React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { useSession } from 'src/commons/utils/Hooks';
+import { useTokens } from 'src/commons/utils/Hooks';
+import { chat } from 'src/features/sicp/chatCompletion/api';
+import { buildPrompt, SicpSection } from 'src/features/sicp/chatCompletion/chatCompletion';
 import { SourceTheme } from 'src/features/sicp/SourceTheme';
 import classes from 'src/styles/Chatbot.module.scss';
 
-import { chat } from '../../../../commons/sagas/RequestsSaga';
-import SICPNotes from './SicpNotes';
-
 type Props = {
-  getSection: () => string;
+  getSection: () => SicpSection;
   getText: () => string;
 };
 
+type ChatMessage = { role: 'user' | 'bot'; content: string };
+const initialMessage: ChatMessage = {
+  content: 'Ask me something about this paragraph!',
+  role: 'bot'
+};
+const botErrorMessage: ChatMessage = {
+  content: 'Sorry, I am down with a cold, please try again later.',
+  role: 'bot'
+};
+
+type Payload = { role: 'user' | 'assistant' | 'system'; content: string }[];
+/** At most CONTEXT_SIZE messages are passed for chat completion. */
+const CONTEXT_SIZE = 20;
+
 const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
-  const chatRef = React.useRef<HTMLDivElement | null>(null);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [messages, setMessages] = React.useState<{ role: 'user' | 'bot'; content: string[] }[]>([
-    { content: ['Ask me something about this paragraph!'], role: 'bot' }
-  ]);
-  const [userInput, setUserInput] = React.useState('');
-  const [contentHistory, setContentHistory] = React.useState<Array<string>>([]);
-  const [roleHistory, setRoleHistory] = React.useState<Array<string>>([]);
-  const { accessToken, refreshToken } = useSession();
+  const chatRef = useRef<HTMLDivElement>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [messages, setMessages] = useState<ChatMessage[]>([initialMessage]);
+  const [userInput, setUserInput] = useState('');
+  const tokens = useTokens();
 
   const handleUserInput = (event: React.ChangeEvent<HTMLInputElement>) => {
     setUserInput(event.target.value);
   };
 
-  // To get code snippets
-  const codeBlocks = (temp: string) => {
-    return temp.split('```');
-  };
-
-  const text = () => {
-    return '\n(2) Here is the paragraph:\n' + getText();
-  };
-
-  const section = () => {
-    const sectionNumber = getSection();
-    return parseInt(sectionNumber.charAt(0), 10) > 3
-      ? '\n(1) There is no section summary for this section. Please answer the question based on the following paragraph\n'
-      : '\n(1) Here is the summary of this section:\n' + SICPNotes[getSection()];
-  };
-
-  function getPrompt() {
-    const prompt =
-      'You are a competent tutor, assisting a student who is learning computer science following the textbook "Structure and Interpretation of Computer Programs,' +
-      'JavaScript edition". The student request is about a paragraph of the book. The request may be a follow-up request to a request that was posed to you' +
-      'previously.\n' +
-      'What follows are:\n' +
-      '(1) the summary of section (2) the full paragraph. Please answer the student request,' +
-      'not the requests of the history. If the student request is not related to the book, ask them to ask questions that are related to the book. Donot say that I provide you text\n\n' +
-      section() +
-      text();
-    return prompt;
-  }
-
   const sendMessage = async () => {
     if (userInput.trim() === '') {
       return;
     }
-    // clean the input immediately after the user sends the message so that the user would not feel the lag
-    const _userInput = userInput;
-    const _messages = messages;
     setUserInput('');
-    const blocks = codeBlocks(_userInput);
-    setMessages([...messages, { role: 'user', content: blocks }]);
-    setIsLoading(true);
+    setMessages(prev => [...prev, { role: 'user', content: userInput }]);
+  };
 
-    const prompt = getPrompt();
-    const payload: { role: string; content: string }[] = [{ role: 'system', content: prompt }];
-    for (let i = 0; i < contentHistory.length; i++) {
-      payload.push({ role: roleHistory[i], content: contentHistory[i] });
+  // Watch whenever a new message comes in
+  useEffect(() => {
+    if (messages.length === 0) {
+      return;
     }
-    payload.push({ role: 'user', content: _userInput });
-    const tokens = { accessToken: accessToken!, refreshToken: refreshToken! };
+
+    const lastMessage = messages[messages.length - 1];
+    if (lastMessage.role === 'bot' || isLoading) {
+      // Bot has responded, or user request for the new message already sent
+      return;
+    }
+
+    // User just sent a message
+    setIsLoading(true);
+
+    // Bot needs to respond, send payload to chat completion
+    const prompt = buildPrompt(getSection(), getText());
+    const payload: Payload = [
+      { role: 'system', content: prompt },
+      ...messages.slice(-CONTEXT_SIZE).map(message => {
+        const role = message.role === 'user' ? 'user' : 'assistant';
+        const segment: Payload[number] = { role, content: message.content };
+        return segment;
+      })
+    ];
+
     chat(tokens, payload)
       .then(text => {
-        const keptContentHistory =
-          contentHistory.length >= 20 ? contentHistory.slice(2) : contentHistory;
-        const keptRoleHistory = roleHistory.length >= 20 ? roleHistory.slice(2) : roleHistory;
-        setContentHistory([...keptContentHistory, _userInput, text]);
-        setRoleHistory([...keptRoleHistory, 'user', 'assistant']);
-        setMessages([
-          ..._messages,
-          { role: 'user', content: blocks },
-          {
-            role: 'bot',
-            content: [text + '\n\nThe answer is generated by GPT-4 and may not be correct.']
-          }
-        ]);
+        setMessages(prev => [...prev, { role: 'bot', content: text }]);
       })
       .catch(e => {
-        setMessages([
-          ..._messages,
-          { role: 'user', content: blocks },
-          { content: [`Sorry, I am down with a cold, please try again later.`], role: 'bot' }
-        ]);
+        setMessages(prev => [...prev, botErrorMessage]);
       })
       .finally(() => {
         setIsLoading(false);
       });
-  };
+  }, [getSection, getText, isLoading, messages, tokens]);
 
-  const cleanMessage = () => {
-    setMessages([{ content: ['Ask me something about this paragraph!'], role: 'bot' }]);
-    setContentHistory([]);
-    setRoleHistory([]);
-  };
-
-  const renderMessageContent = (message: string | string[]) => {
-    if (!Array.isArray(message)) {
-      return message;
-    }
-
-    return message.map((block, index) =>
-      // Assume that only javascript code snippets will appear
-      block.substring(0, 10) === 'javascript' ? (
-        <SyntaxHighlighter language="javascript" style={SourceTheme} key={index}>
-          {block.substring(11, block.length)}
-        </SyntaxHighlighter>
-      ) : (
-        block
-      )
-    );
+  const resetChat = () => {
+    setMessages([initialMessage]);
   };
 
   const keyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter') {
+    if (event.key === 'Enter' && !isLoading) {
       sendMessage();
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     scrollToBottom();
   }, [messages, isLoading]);
 
@@ -150,24 +110,25 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
             className={classes[`${message.role}`]}
             style={{ whiteSpace: 'pre-line' }}
           >
-            {renderMessageContent(message.content)}
+            {renderMessageContent(message)}
           </div>
         ))}
         {isLoading && <p>loading...</p>}
       </div>
       <input
         type="text"
+        disabled={isLoading}
         className={classes['user-input']}
-        placeholder="Type your message here..."
+        placeholder={isLoading ? 'Waiting for response...' : 'Type your message here...'}
         value={userInput}
         onChange={handleUserInput}
         onKeyDown={keyDown}
       />
       <div className={classes['button-container']}>
-        <Button className={classes['button-send']} onClick={sendMessage}>
+        <Button disabled={isLoading} className={classes['button-send']} onClick={sendMessage}>
           Send
         </Button>
-        <Button className={classes['button-clean']} onClick={cleanMessage}>
+        <Button className={classes['button-clean']} onClick={resetChat}>
           Clean
         </Button>
       </div>
@@ -175,4 +136,26 @@ const ChatBox: React.FC<Props> = ({ getSection, getText }) => {
   );
 };
 
+const renderMessageContent = (message: ChatMessage) => {
+  let contentToRender = message.content;
+  if (message.role === 'bot') {
+    contentToRender += '\n\nThe answer is generated by GPT-4 and may not be correct.';
+  }
+  // TODO: Parse full Markdown, make snippets runnable
+  if (!contentToRender.includes('```javascript')) {
+    return contentToRender;
+  }
+  const renderableRegex = /```javascript\n([\s\S]*?)\n```/g;
+  const chunks = contentToRender.split(renderableRegex);
+  return chunks.map((chunk, i) => {
+    return renderableRegex.test(chunk) ? (
+      <SyntaxHighlighter language="javascript" style={SourceTheme} key={i}>
+        {chunk}
+      </SyntaxHighlighter>
+    ) : (
+      <React.Fragment key={i}>{chunk.trim()}</React.Fragment>
+    );
+  });
+};
+
 export default ChatBox;
diff --git a/src/pages/sicp/subcomponents/chatbot/Chatbot.tsx b/src/pages/sicp/subcomponents/chatbot/Chatbot.tsx
index d2f5a1fc22..840256c2d2 100644
--- a/src/pages/sicp/subcomponents/chatbot/Chatbot.tsx
+++ b/src/pages/sicp/subcomponents/chatbot/Chatbot.tsx
@@ -2,12 +2,13 @@ import { AnchorButton, Icon } from '@blueprintjs/core';
 import * as React from 'react';
 import logo from 'src/assets/SA.jpg';
 import { useSession } from 'src/commons/utils/Hooks';
+import { SicpSection } from 'src/features/sicp/chatCompletion/chatCompletion';
 import classes from 'src/styles/Chatbot.module.scss';
 
 import ChatBox from './ChatBox';
 
 type Props = {
-  getSection: () => string;
+  getSection: () => SicpSection;
   getText: () => string;
 };
 
diff --git a/src/setupTests.ts b/src/setupTests.ts
index 325a68de3a..342d11a07b 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -8,3 +8,10 @@ jest.mock('./commons/utils/notifications/createNotification', () => ({
     show: jest.fn()
   }
 }));
+
+jest.mock('java-slang', () => {
+  return {
+    compileFromSource: () => '',
+    typeCheck: () => ({ hasTypeErrors: false, errorMsgs: [] })
+  };
+});
diff --git a/src/styles/_game.scss b/src/styles/_game.scss
index ce2616f41c..40b1039898 100644
--- a/src/styles/_game.scss
+++ b/src/styles/_game.scss
@@ -4,3 +4,9 @@
   width: 100%;
   align-items: center;
 }
+
+#fullscreen-button {
+  position: absolute;
+  cursor: pointer;
+  z-index: 100;
+}
diff --git a/src/styles/_mobileworkspace.scss b/src/styles/_mobileworkspace.scss
index 82096cd671..e592ce130d 100644
--- a/src/styles/_mobileworkspace.scss
+++ b/src/styles/_mobileworkspace.scss
@@ -121,6 +121,7 @@ $shadow-light: rgba(0, 0, 0, 0.2);
 
           .hg-row {
             height: 40px;
+            overflow-x: auto;
 
             .hg-button {
               background: $cadet-color-2;
@@ -145,12 +146,6 @@ $shadow-light: rgba(0, 0, 0, 0.2);
           }
         }
       }
-
-      .mobile-keyboard-row-toggle {
-        width: 28px;
-        font-size: 28px;
-        padding: 0 2px 0 0;
-      }
     }
 
     #floating-dragHandle {
diff --git a/src/styles/_workspace.scss b/src/styles/_workspace.scss
index 1332cec81d..63af80872f 100755
--- a/src/styles/_workspace.scss
+++ b/src/styles/_workspace.scss
@@ -80,6 +80,13 @@ $code-color-notification: #f9f0d7;
     height: 100%;
     padding-bottom: 0.6rem;
     overflow: auto;
+
+    .fullscreen-button {
+      position: absolute;
+      right: 8px;
+      padding: 5px;
+      z-index: 10;
+    }
   }
 
   .left-parent {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 0aa1439825..eeaf4f6200 100755
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -3,7 +3,6 @@
 @import '~normalize.css/normalize.css';
 @import '~@blueprintjs/core/lib/css/blueprint.css';
 @import '~@blueprintjs/datetime/lib/css/blueprint-datetime.css';
-@import '~@blueprintjs/popover2/lib/css/blueprint-popover2.css';
 @import '~@blueprintjs/select/lib/css/blueprint-select.css';
 @import '~flexboxgrid/dist/flexboxgrid.css';
 @import '~flexboxgrid-helpers/dist/flexboxgrid-helpers.min.css';
diff --git a/tsconfig.json b/tsconfig.json
index 186f9134ca..c988d3f032 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,6 @@
     "noImplicitAny": true,
     "strictNullChecks": true,
     "skipLibCheck": true,
-    "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
diff --git a/yarn.lock b/yarn.lock
index 914a2c5dcd..eb43c44554 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@aashutoshrathi/word-wrap@^1.2.3":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
+  integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
+
 "@adobe/css-tools@^4.3.2":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.3.tgz#90749bde8b89cd41764224f5aac29cd4138f75ff"
@@ -287,12 +292,7 @@
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.19.4", "@babel/parser@^7.20.7", "@babel/parser@^7.23.9":
-  version "7.23.9"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b"
-  integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==
-
-"@babel/parser@^7.24.0":
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.19.4", "@babel/parser@^7.20.7", "@babel/parser@^7.23.9", "@babel/parser@^7.24.0":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.0.tgz#26a3d1ff49031c53a97d03b604375f028746a9ac"
   integrity sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==
@@ -1131,14 +1131,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.2.0", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.23.9"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
-  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
-  dependencies:
-    regenerator-runtime "^0.14.0"
-
-"@babel/runtime@^7.12.0", "@babel/runtime@^7.18.3":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.2.0", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
   integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==
@@ -1154,23 +1147,7 @@
     "@babel/parser" "^7.23.9"
     "@babel/types" "^7.23.9"
 
-"@babel/traverse@^7.23.9", "@babel/traverse@^7.7.2":
-  version "7.23.9"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.9.tgz#2f9d6aead6b564669394c5ce0f9302bb65b9d950"
-  integrity sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==
-  dependencies:
-    "@babel/code-frame" "^7.23.5"
-    "@babel/generator" "^7.23.6"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-hoist-variables" "^7.22.5"
-    "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.23.9"
-    "@babel/types" "^7.23.9"
-    debug "^4.3.1"
-    globals "^11.1.0"
-
-"@babel/traverse@^7.4.5":
+"@babel/traverse@^7.23.9", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.2":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.0.tgz#4a408fbf364ff73135c714a2ab46a5eab2831b1e"
   integrity sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==
@@ -1186,16 +1163,7 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.3", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.23.9", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
-  version "7.23.9"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.9.tgz#1dd7b59a9a2b5c87f8b41e52770b5ecbf492e002"
-  integrity sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==
-  dependencies:
-    "@babel/helper-string-parser" "^7.23.4"
-    "@babel/helper-validator-identifier" "^7.22.20"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.24.0":
+"@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.3", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.23.9", "@babel/types@^7.24.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.0.tgz#3b951f435a92e7333eba05b7566fd297960ea1bf"
   integrity sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==
@@ -1209,20 +1177,20 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@blueprintjs/colors@^5.1.0":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/colors/-/colors-5.1.0.tgz#be6494e8254561e793e341591f9fb2b4b179a093"
-  integrity sha512-eNYpVM84NYIgdkywzJdlskzJ2FJCT4EoUa3s86Lhl5VULTOEqEk7CqdbrbCosIRcYHBsR3tdtMjb9g9tfczgFQ==
+"@blueprintjs/colors@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/colors/-/colors-5.1.1.tgz#b227d1ce8b95d9266d976441f34cd71d436735db"
+  integrity sha512-Mni/GgCYLaMf5U5zsCN42skOG49w3U0QmUFuJgFZ/1pv+3cHF/9xR4L4dXcj5DtgJoHkmUbK36PR5mdFB65WEA==
   dependencies:
     tslib "~2.6.2"
 
-"@blueprintjs/core@^5.7.0", "@blueprintjs/core@^5.9.1":
-  version "5.9.1"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-5.9.1.tgz#79e474aa063468aec4c2e82cd9b6e12d0b98b1bc"
-  integrity sha512-/Cq6CAV/GyMhTOGrzgIBDsneduQCFWxzDwlX2f8MMAFZFO7FaeCONPvzbcxpTRAXR+RFkb4HpPdIsAslyZUMzA==
+"@blueprintjs/core@^5.10.1":
+  version "5.10.1"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-5.10.1.tgz#d3df1743258a10841d2885dd2ba712d116a96689"
+  integrity sha512-yE10tC/tA/NWo8zsged3n0PUcjlQzh9GqNKOqMAoSSnsAKGI+RJiHtbS2RERyKU+NailIsuFx1k282ohkJvkOQ==
   dependencies:
-    "@blueprintjs/colors" "^5.1.0"
-    "@blueprintjs/icons" "^5.7.1"
+    "@blueprintjs/colors" "^5.1.1"
+    "@blueprintjs/icons" "^5.9.0"
     "@popperjs/core" "^2.11.8"
     classnames "^2.3.1"
     normalize.css "^8.0.1"
@@ -1232,28 +1200,28 @@
     tslib "~2.6.2"
     use-sync-external-store "^1.2.0"
 
-"@blueprintjs/datetime2@^2.2.7":
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/datetime2/-/datetime2-2.3.1.tgz#6f650998b8f94d8e0f725f3d4c68e5ed97ef7949"
-  integrity sha512-9UsGE/fmGzqpJA1p5kciZJWQNJ6P2qZBFCnMy9XFzPtFUSmDtNrUevnkV4EBWOAi2bUcXykvZMBaKrFrLUcJHg==
+"@blueprintjs/datetime2@^2.3.3":
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/datetime2/-/datetime2-2.3.3.tgz#94d9f832a5a47758bb01d78768a185ae94231905"
+  integrity sha512-eCFZ7oEtvK6lMrK9rOZbOed+XeBjSs9z1bH66Rn/5KHk/SvR9dEdhrQU8gViLntYxB0W/RMltdOOIKc+6/vphA==
   dependencies:
-    "@blueprintjs/core" "^5.9.1"
-    "@blueprintjs/datetime" "^5.3.1"
-    "@blueprintjs/icons" "^5.7.1"
+    "@blueprintjs/core" "^5.10.1"
+    "@blueprintjs/datetime" "^5.3.3"
+    "@blueprintjs/icons" "^5.9.0"
     classnames "^2.3.1"
     date-fns "^2.28.0"
     react-day-picker "^8.10.0"
     react-innertext "^1.1.5"
     tslib "~2.6.2"
 
-"@blueprintjs/datetime@^5.3.1":
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/datetime/-/datetime-5.3.1.tgz#ee6bd79d70fd81f4d338edc02dfab096fea39e95"
-  integrity sha512-MDiM/+HFlN0C87sQWKrLfNiKja14Tt1HaxF66OX4mka3Y2fkEtBrZoOrTf1JVky/noXNRxcpLgiQFTEVGgy02Q==
+"@blueprintjs/datetime@^5.3.3":
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/datetime/-/datetime-5.3.3.tgz#e801c63429ef3726adb4b4e7ea074ca60423dc0e"
+  integrity sha512-INrUA9bQx37bvd1o5vk8RUesIn4sg54/BrOwmsJXtMw0zCyhy2rZ3joJgaawRO89qgKcnRJDsF8sodwFPGk03g==
   dependencies:
-    "@blueprintjs/core" "^5.9.1"
-    "@blueprintjs/icons" "^5.7.1"
-    "@blueprintjs/select" "^5.1.1"
+    "@blueprintjs/core" "^5.10.1"
+    "@blueprintjs/icons" "^5.9.0"
+    "@blueprintjs/select" "^5.1.3"
     classnames "^2.3.1"
     date-fns "^2.28.0"
     date-fns-tz "^2.0.0"
@@ -1261,31 +1229,22 @@
     react-day-picker "7.4.9"
     tslib "~2.6.2"
 
-"@blueprintjs/icons@^5.5.0", "@blueprintjs/icons@^5.7.1":
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-5.7.1.tgz#48b76bed2759ebd919c06bef0775635435bd6644"
-  integrity sha512-oWOaa6PFYa3ShBtUpNGU0fnu66AC0/ecQoD1VnI1yg3F0IFHxKApYOC11SL//ckfB6tDkqN+O8Y/7TdtTmVzig==
+"@blueprintjs/icons@^5.9.0":
+  version "5.9.0"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-5.9.0.tgz#f1d6ebffa3033bbdd8ea05dbfa6fb8e5e88cf119"
+  integrity sha512-9W9DYFqSORBr1QPSEwpbjnftbU+hfWB/gFtpa4LdzR7VhtQaCdcrinyXFmNUFacQ9czYrmr72bP567Rv6pRUDg==
   dependencies:
     change-case "^4.1.2"
     classnames "^2.3.1"
     tslib "~2.6.2"
 
-"@blueprintjs/popover2@^2.0.0":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/popover2/-/popover2-2.1.1.tgz#b1e2dee9fd4679f70c7337ab03327d863eec4e42"
-  integrity sha512-8bPzPQH6uROCsghXCUbiolH3pe6rOVxvsSWEnnJrztAUQa4BGBOpUje32J5EDKYZqhdiiKKa+HpDa06lShFcww==
-  dependencies:
-    "@blueprintjs/core" "^5.9.1"
-    classnames "^2.3.1"
-    tslib "~2.6.2"
-
-"@blueprintjs/select@^5.0.0", "@blueprintjs/select@^5.1.1":
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/select/-/select-5.1.1.tgz#39bda2c1c73bfa96a395a42586a8583ca38f4173"
-  integrity sha512-5BiYtYJvQmUuPHS/2g3ZYy8I3TgAmQtkO+ksqMXVWzRibW7CdggqvszeaSWA0+RHgYw3gJEUQk53yt+rqZCF6Q==
+"@blueprintjs/select@^5.1.3":
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/select/-/select-5.1.3.tgz#383c449a215136191e815bd0ebc3ea2d80012ef8"
+  integrity sha512-9DGtB4S0ck8d6v16DLzLMEWyNRwX5k2YegWwvyLRh4xaeovgFSHphSuJPczvzuhquf+3aTXKryIhB5Ivf3fTGw==
   dependencies:
-    "@blueprintjs/core" "^5.9.1"
-    "@blueprintjs/icons" "^5.7.1"
+    "@blueprintjs/core" "^5.10.1"
+    "@blueprintjs/icons" "^5.9.0"
     classnames "^2.3.1"
     tslib "~2.6.2"
 
@@ -1569,19 +1528,26 @@
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
-"@eslint-community/regexpp@^4.4.0":
+"@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.4.0.tgz#3e61c564fcd6b921cb789838631c5ee44df09403"
-  integrity sha512-A9983Q0LnDGdLPjxyXQ00sbV+K+O+ko2Dr+CZigbHWtX9pNfxlaBkMR8X1CztI73zuEyEBXTVjx7CE+/VSwDiQ==
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  dependencies:
+    eslint-visitor-keys "^3.3.0"
 
-"@eslint/eslintrc@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.0.1.tgz#7888fe7ec8f21bc26d646dbd2c11cd776e21192d"
-  integrity sha512-eFRmABvW2E5Ho6f5fHLqgena46rOj7r7OKHYfLElqcBfGFHHpjBhivyi5+jOEQuSpdc/1phIZJlbC2te+tZNIw==
+"@eslint-community/regexpp@^4.5.1", "@eslint-community/regexpp@^4.6.1":
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
+  integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
+
+"@eslint/eslintrc@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
+  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.5.0"
+    espree "^9.6.0"
     globals "^13.19.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
@@ -1589,10 +1555,10 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@8.36.0":
-  version "8.36.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.36.0.tgz#9837f768c03a1e4a30bd304a64fb8844f0e72efe"
-  integrity sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg==
+"@eslint/js@8.57.0":
+  version "8.57.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
+  integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
 "@floating-ui/core@^1.0.0":
   version "1.6.0"
@@ -1619,13 +1585,13 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
-"@humanwhocodes/config-array@^0.11.8":
-  version "0.11.8"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
-  integrity sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==
+"@humanwhocodes/config-array@^0.11.14":
+  version "0.11.14"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
+  integrity sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
   dependencies:
-    "@humanwhocodes/object-schema" "^1.2.1"
-    debug "^4.1.1"
+    "@humanwhocodes/object-schema" "^2.0.2"
+    debug "^4.3.1"
     minimatch "^3.0.5"
 
 "@humanwhocodes/module-importer@^1.0.1":
@@ -1633,10 +1599,10 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
-"@humanwhocodes/object-schema@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
-  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+"@humanwhocodes/object-schema@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
+  integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
 
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
@@ -1956,6 +1922,11 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
+"@mantine/hooks@^7.7.0":
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-7.7.1.tgz#04fd8999fe109615d064bf42a8ff04435c93b927"
+  integrity sha512-3YH2FzKMlg840tb04PBDcDXyBCi9puFOxEBVgc6Y/pN6KFqfOoAnQE/YvgOtwSNXZlbTWyDlQoYj+3je7pA7og==
+
 "@mapbox/node-pre-gyp@^1.0.0":
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.10.tgz#8e6735ccebbb1581e5a7e652244cadc8a844d03c"
@@ -3032,10 +3003,10 @@
   resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.9.tgz#cd82382c4f902fed9691a2ed79ec68c5898af4c2"
   integrity sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==
 
-"@types/json-schema@*", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
-  version "7.0.11"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
-  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
+"@types/json-schema@*", "@types/json-schema@^7.0.12", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
+  version "7.0.15"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
 "@types/json5@^0.0.29":
   version "0.0.29"
@@ -3224,10 +3195,10 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
   integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
 
-"@types/semver@^7.3.12":
-  version "7.3.13"
-  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.13.tgz#da4bfd73f49bd541d28920ab0e2bf0ee80f71c91"
-  integrity sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==
+"@types/semver@^7.3.12", "@types/semver@^7.5.0":
+  version "7.5.8"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
+  integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
 
 "@types/serve-index@^1.9.1":
   version "1.9.1"
@@ -3330,6 +3301,23 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
+"@typescript-eslint/eslint-plugin@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.4.0.tgz#de61c3083842fc6ac889d2fc83c9a96b55ab8328"
+  integrity sha512-yHMQ/oFaM7HZdVrVm/M2WHaNPgyuJH4WelkSVEWSSsir34kxW2kDJCxlXRhhGWEsMN0WAW/vLpKfKVcm8k+MPw==
+  dependencies:
+    "@eslint-community/regexpp" "^4.5.1"
+    "@typescript-eslint/scope-manager" "7.4.0"
+    "@typescript-eslint/type-utils" "7.4.0"
+    "@typescript-eslint/utils" "7.4.0"
+    "@typescript-eslint/visitor-keys" "7.4.0"
+    debug "^4.3.4"
+    graphemer "^1.4.0"
+    ignore "^5.2.4"
+    natural-compare "^1.4.0"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
 "@typescript-eslint/experimental-utils@^5.0.0":
   version "5.54.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-5.54.1.tgz#a45609ce43fc6b24b4c4dde215446eaad7805223"
@@ -3347,6 +3335,17 @@
     "@typescript-eslint/typescript-estree" "5.54.1"
     debug "^4.3.4"
 
+"@typescript-eslint/parser@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.4.0.tgz#540f4321de1e52b886c0fa68628af1459954c1f1"
+  integrity sha512-ZvKHxHLusweEUVwrGRXXUVzFgnWhigo4JurEj0dGF1tbcGh6buL+ejDdjxOQxv6ytcY1uhun1p2sm8iWStlgLQ==
+  dependencies:
+    "@typescript-eslint/scope-manager" "7.4.0"
+    "@typescript-eslint/types" "7.4.0"
+    "@typescript-eslint/typescript-estree" "7.4.0"
+    "@typescript-eslint/visitor-keys" "7.4.0"
+    debug "^4.3.4"
+
 "@typescript-eslint/scope-manager@5.54.1":
   version "5.54.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.54.1.tgz#6d864b4915741c608a58ce9912edf5a02bb58735"
@@ -3355,6 +3354,14 @@
     "@typescript-eslint/types" "5.54.1"
     "@typescript-eslint/visitor-keys" "5.54.1"
 
+"@typescript-eslint/scope-manager@7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.4.0.tgz#acfc69261f10ece7bf7ece1734f1713392c3655f"
+  integrity sha512-68VqENG5HK27ypafqLVs8qO+RkNc7TezCduYrx8YJpXq2QGZ30vmNZGJJJC48+MVn4G2dCV8m5ZTVnzRexTVtw==
+  dependencies:
+    "@typescript-eslint/types" "7.4.0"
+    "@typescript-eslint/visitor-keys" "7.4.0"
+
 "@typescript-eslint/type-utils@5.54.1":
   version "5.54.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.54.1.tgz#4825918ec27e55da8bb99cd07ec2a8e5f50ab748"
@@ -3365,11 +3372,26 @@
     debug "^4.3.4"
     tsutils "^3.21.0"
 
+"@typescript-eslint/type-utils@7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.4.0.tgz#cfcaab21bcca441c57da5d3a1153555e39028cbd"
+  integrity sha512-247ETeHgr9WTRMqHbbQdzwzhuyaJ8dPTuyuUEMANqzMRB1rj/9qFIuIXK7l0FX9i9FXbHeBQl/4uz6mYuCE7Aw==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "7.4.0"
+    "@typescript-eslint/utils" "7.4.0"
+    debug "^4.3.4"
+    ts-api-utils "^1.0.1"
+
 "@typescript-eslint/types@5.54.1":
   version "5.54.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.54.1.tgz#29fbac29a716d0f08c62fe5de70c9b6735de215c"
   integrity sha512-G9+1vVazrfAfbtmCapJX8jRo2E4MDXxgm/IMOF4oGh3kq7XuK3JRkOg6y2Qu1VsTRmWETyTkWt1wxy7X7/yLkw==
 
+"@typescript-eslint/types@7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.4.0.tgz#ee9dafa75c99eaee49de6dcc9348b45d354419b6"
+  integrity sha512-mjQopsbffzJskos5B4HmbsadSJQWaRK0UxqQ7GuNA9Ga4bEKeiO6b2DnB6cM6bpc8lemaPseh0H9B/wyg+J7rw==
+
 "@typescript-eslint/typescript-estree@5.54.1":
   version "5.54.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.54.1.tgz#df7b6ae05fd8fef724a87afa7e2f57fa4a599be1"
@@ -3383,6 +3405,20 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
+"@typescript-eslint/typescript-estree@7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.4.0.tgz#12dbcb4624d952f72c10a9f4431284fca24624f4"
+  integrity sha512-A99j5AYoME/UBQ1ucEbbMEmGkN7SE0BvZFreSnTd1luq7yulcHdyGamZKizU7canpGDWGJ+Q6ZA9SyQobipePg==
+  dependencies:
+    "@typescript-eslint/types" "7.4.0"
+    "@typescript-eslint/visitor-keys" "7.4.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    minimatch "9.0.3"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
 "@typescript-eslint/utils@5.54.1", "@typescript-eslint/utils@^5.43.0":
   version "5.54.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.54.1.tgz#7a3ee47409285387b9d4609ea7e1020d1797ec34"
@@ -3397,6 +3433,19 @@
     eslint-utils "^3.0.0"
     semver "^7.3.7"
 
+"@typescript-eslint/utils@7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.4.0.tgz#d889a0630cab88bddedaf7c845c64a00576257bd"
+  integrity sha512-NQt9QLM4Tt8qrlBVY9lkMYzfYtNz8/6qwZg8pI3cMGlPnj6mOpRxxAm7BMJN9K0AiY+1BwJ5lVC650YJqYOuNg==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@types/json-schema" "^7.0.12"
+    "@types/semver" "^7.5.0"
+    "@typescript-eslint/scope-manager" "7.4.0"
+    "@typescript-eslint/types" "7.4.0"
+    "@typescript-eslint/typescript-estree" "7.4.0"
+    semver "^7.5.4"
+
 "@typescript-eslint/visitor-keys@5.54.1":
   version "5.54.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.54.1.tgz#d7a8a0f7181d6ac748f4d47b2306e0513b98bf8b"
@@ -3405,7 +3454,15 @@
     "@typescript-eslint/types" "5.54.1"
     eslint-visitor-keys "^3.3.0"
 
-"@ungap/structured-clone@^1.0.0":
+"@typescript-eslint/visitor-keys@7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.4.0.tgz#0c8ff2c1f8a6fe8d7d1a57ebbd4a638e86a60a94"
+  integrity sha512-0zkC7YM0iX5Y41homUUeW1CHtZR01K3ybjM1l6QczoMuay0XKtrb93kv95AxUGwdjGr64nNqnOCwmEl616N8CA==
+  dependencies:
+    "@typescript-eslint/types" "7.4.0"
+    eslint-visitor-keys "^3.4.1"
+
+"@ungap/structured-clone@^1.0.0", "@ungap/structured-clone@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
@@ -3641,7 +3698,7 @@ acorn-walk@^8.0.0, acorn-walk@^8.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.2.tgz#7703af9415f1b6db9315d6895503862e231d34aa"
   integrity sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==
 
-acorn@*, acorn@^8.0.4, acorn@^8.1, acorn@^8.2.4, acorn@^8.4.1, acorn@^8.5.0, acorn@^8.7.1, acorn@^8.8.0, acorn@^8.8.2, acorn@^8.9.0:
+acorn@*, acorn@^8.0.4, acorn@^8.1, acorn@^8.2.4, acorn@^8.4.1, acorn@^8.5.0, acorn@^8.7.1, acorn@^8.8.2, acorn@^8.9.0:
   version "8.11.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
   integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
@@ -3664,11 +3721,6 @@ adjust-sourcemap-loader@^4.0.0:
     loader-utils "^2.0.0"
     regex-parser "^2.2.11"
 
-adler-32@~1.3.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/adler-32/-/adler-32-1.3.1.tgz#1dbf0b36dda0012189a32b3679061932df1821e2"
-  integrity sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==
-
 ag-grid-community@31.1.1, ag-grid-community@^31.0.0:
   version "31.1.1"
   resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-31.1.1.tgz#212fc3e358d4be1865bc4618f6d0d865faaed385"
@@ -3725,7 +3777,7 @@ ajv-keywords@^5.0.0:
   dependencies:
     fast-deep-equal "^3.1.3"
 
-ajv@^6.10.0, ajv@^6.12.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.12.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -4644,14 +4696,6 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==
 
-cfb@~1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/cfb/-/cfb-1.2.2.tgz#94e687628c700e5155436dac05f74e08df23bc44"
-  integrity sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==
-  dependencies:
-    adler-32 "~1.3.0"
-    crc-32 "~1.2.0"
-
 chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -4854,11 +4898,6 @@ coa@^2.0.2:
     chalk "^2.4.1"
     q "^1.1.2"
 
-codepage@~1.15.0:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/codepage/-/codepage-1.15.0.tgz#2e00519024b39424ec66eeb3ec07227e692618ab"
-  integrity sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==
-
 collect-v8-coverage@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
@@ -5159,11 +5198,6 @@ coveralls@^3.1.1:
     minimist "^1.2.5"
     request "^2.88.2"
 
-crc-32@~1.2.0, crc-32@~1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/crc-32/-/crc-32-1.2.2.tgz#3cad35a934b8bf71f25ca524b6da51fb7eace2ff"
-  integrity sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==
-
 create-require@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
@@ -6355,10 +6389,10 @@ eslint-scope@5.1.1, eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-eslint-scope@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.1.1.tgz#fff34894c2f65e5226d3041ac480b4513a163642"
-  integrity sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==
+eslint-scope@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
   dependencies:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
@@ -6375,10 +6409,10 @@ eslint-visitor-keys@^2.0.0, eslint-visitor-keys@^2.1.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
-eslint-visitor-keys@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
-  integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
 eslint-webpack-plugin@^3.1.1:
   version "3.2.0"
@@ -6391,27 +6425,28 @@ eslint-webpack-plugin@^3.1.1:
     normalize-path "^3.0.0"
     schema-utils "^4.0.0"
 
-eslint@^8.3.0:
-  version "8.36.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.36.0.tgz#1bd72202200a5492f91803b113fb8a83b11285cf"
-  integrity sha512-Y956lmS7vDqomxlaaQAHVmeb4tNMp2FWIvU/RnU5BD3IKMD/MJPr76xdyr68P8tV1iNMvN2mRK0yy3c+UjL+bw==
+eslint@^8.3.0, eslint@^8.57.0:
+  version "8.57.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668"
+  integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
-    "@eslint-community/regexpp" "^4.4.0"
-    "@eslint/eslintrc" "^2.0.1"
-    "@eslint/js" "8.36.0"
-    "@humanwhocodes/config-array" "^0.11.8"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.57.0"
+    "@humanwhocodes/config-array" "^0.11.14"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
-    ajv "^6.10.0"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
     debug "^4.3.2"
     doctrine "^3.0.0"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^7.1.1"
-    eslint-visitor-keys "^3.3.0"
-    espree "^9.5.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
     esquery "^1.4.2"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
@@ -6419,32 +6454,29 @@ eslint@^8.3.0:
     find-up "^5.0.0"
     glob-parent "^6.0.2"
     globals "^13.19.0"
-    grapheme-splitter "^1.0.4"
+    graphemer "^1.4.0"
     ignore "^5.2.0"
-    import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
     is-path-inside "^3.0.3"
-    js-sdsl "^4.1.4"
     js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
     lodash.merge "^4.6.2"
     minimatch "^3.1.2"
     natural-compare "^1.4.0"
-    optionator "^0.9.1"
+    optionator "^0.9.3"
     strip-ansi "^6.0.1"
-    strip-json-comments "^3.1.0"
     text-table "^0.2.0"
 
-espree@^9.5.0:
-  version "9.5.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.5.0.tgz#3646d4e3f58907464edba852fa047e6a27bdf113"
-  integrity sha512-JPbJGhKc47++oo4JkEoTe2wjy4fmMwvFpgJT9cQzmfXKp22Dr6Hf1tdCteLz1h0P3t+mGvWZ+4Uankvh8+c6zw==
+espree@^9.6.0, espree@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
   dependencies:
-    acorn "^8.8.0"
+    acorn "^8.9.0"
     acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^3.3.0"
+    eslint-visitor-keys "^3.4.1"
 
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
@@ -6860,11 +6892,6 @@ forwarded@0.2.0:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
-frac@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/frac/-/frac-1.1.2.tgz#3d74f7f6478c88a1b5020306d747dc6313c74d0b"
-  integrity sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==
-
 fraction.js@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
@@ -7182,6 +7209,11 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
+graphemer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
+
 gzip-size@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
@@ -7597,10 +7629,10 @@ ieee754@^1.1.13, ieee754@^1.2.1:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^5.2.0:
-  version "5.2.4"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
-  integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
+ignore@^5.2.0, ignore@^5.2.4:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
+  integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
 
 immer@^9.0.21, immer@^9.0.7:
   version "9.0.21"
@@ -7612,7 +7644,7 @@ immutable@^4.0.0:
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.5.tgz#f8b436e66d59f99760dc577f5c99a4fd2a5cc5a0"
   integrity sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==
 
-import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1, import-fresh@^3.3.0:
+import-fresh@^3.1.0, import-fresh@^3.2.1, import-fresh@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -8084,10 +8116,10 @@ java-parser@^2.0.5:
     chevrotain-allstar "0.3.1"
     lodash "4.17.21"
 
-java-slang@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/java-slang/-/java-slang-1.0.4.tgz#ae25540e28fee7ff5ee4d10f3d82f1e2afdb72d4"
-  integrity sha512-AN2ysL9OrWWI6E1sxDtNRuwI8mJpTKppIuj7J8zfGj6/FLnHnxp1my+jdAduzAGnfYPwrIkmUQSMg/e/B7gRig==
+java-slang@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/java-slang/-/java-slang-1.0.13.tgz#601454c9dd28a41ea6918dab51a7e65401d2c2d9"
+  integrity sha512-xBh84Gcp7iyc3o9bWDbaIa7GXf75tpUVmDrd/gXIAU/gxNARitJdl5xCjQW5y4iesqwucV7cY+Ewx6MIt4xKeQ==
   dependencies:
     "@types/lodash" "^4.14.198"
     java-parser "^2.0.5"
@@ -8633,15 +8665,15 @@ js-base64@^3.7.5:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.5.tgz#21e24cf6b886f76d6f5f165bfcd69cc55b9e3fca"
   integrity sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA==
 
-js-sdsl@4.3.0, js-sdsl@^4.1.4:
+js-sdsl@4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.3.0.tgz#aeefe32a451f7af88425b11fdb5f58c90ae1d711"
   integrity sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ==
 
-js-slang@^1.0.62:
-  version "1.0.62"
-  resolved "https://registry.yarnpkg.com/js-slang/-/js-slang-1.0.62.tgz#516352f5db0738d1bca91b1146e3a7e012355127"
-  integrity sha512-rngDsPDpEsx2VFmJfHxbA9O2AYIR8czwyJgDUC0EeJCBYOVJf8TJLWJEN/85795x5xTrhaZ3qc/QyP84qv53Sw==
+js-slang@^1.0.68:
+  version "1.0.68"
+  resolved "https://registry.yarnpkg.com/js-slang/-/js-slang-1.0.68.tgz#8540cc556a3afe8ced21740e917dd387d022986c"
+  integrity sha512-oOcj+m8tiPf0XVQWJtWRydgL58CabqIaaSf0JlT55Ute+CLuGKP+otlVnkFMP0F9KGUjMovicopcDPO238ZfQg==
   dependencies:
     "@babel/parser" "^7.19.4"
     "@joeychenofficial/alt-ergo-modified" "^2.4.0"
@@ -9462,6 +9494,13 @@ minimalistic-assert@^1.0.0:
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
   integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
+minimatch@9.0.3, minimatch@^9.0.0:
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
+  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -9476,13 +9515,6 @@ minimatch@^5.0.1, minimatch@^5.1.0:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimatch@^9.0.0:
-  version "9.0.3"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
-  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
-  dependencies:
-    brace-expansion "^2.0.1"
-
 minimist@^1.1.0, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5, minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
@@ -9974,17 +10006,17 @@ optionator@^0.8.1:
     type-check "~0.3.2"
     word-wrap "~1.2.3"
 
-optionator@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
-  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+optionator@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
+  integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
   dependencies:
+    "@aashutoshrathi/word-wrap" "^1.2.3"
     deep-is "^0.1.3"
     fast-levenshtein "^2.0.6"
     levn "^0.4.1"
     prelude-ls "^1.2.1"
     type-check "^0.4.0"
-    word-wrap "^1.2.3"
 
 os-browserify@^0.3.0:
   version "0.3.0"
@@ -12041,7 +12073,7 @@ selfsigned@^2.1.1:
   dependencies:
     node-forge "^1"
 
-semver@7.6.0:
+semver@7.6.0, semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.4:
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
   integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==
@@ -12053,13 +12085,6 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0, semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8:
-  version "7.5.4"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
-  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
-  dependencies:
-    lru-cache "^6.0.0"
-
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
@@ -12442,13 +12467,6 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
-ssf@~0.11.2:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/ssf/-/ssf-0.11.2.tgz#0b99698b237548d088fc43cdf2b70c1a7512c06c"
-  integrity sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==
-  dependencies:
-    frac "~1.1.2"
-
 sshpk@^1.7.0:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.17.0.tgz#578082d92d4fe612b13007496e543fa0fbcbe4c5"
@@ -12666,7 +12684,7 @@ strip-indent@^3.0.0:
   dependencies:
     min-indent "^1.0.0"
 
-strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -12872,9 +12890,9 @@ tar-stream@^2.1.4:
     readable-stream "^3.1.1"
 
 tar@^6.1.11, tar@^6.1.2:
-  version "6.1.15"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.15.tgz#c9738b0b98845a3b344d334b8fa3041aaba53a69"
-  integrity sha512-/zKt9UyngnxIT/EAGYuxaMYgOIJiP81ab9ZfkILq4oNLPFX50qyYmu7jRj9qeXoxmJHjGlbH0+cm2uy1WCs10A==
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.1.tgz#717549c541bc3c2af15751bea94b1dd068d4b03a"
+  integrity sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==
   dependencies:
     chownr "^2.0.0"
     fs-minipass "^2.0.0"
@@ -13072,6 +13090,11 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
+ts-api-utils@^1.0.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
+  integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
+
 ts-custom-error@^3.0.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/ts-custom-error/-/ts-custom-error-3.3.1.tgz#8bd3c8fc6b8dc8e1cb329267c45200f1e17a65d1"
@@ -13198,11 +13221,6 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
-typesafe-actions@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/typesafe-actions/-/typesafe-actions-5.1.0.tgz#9afe8b1e6a323af1fd59e6a57b11b7dd6623d2f1"
-  integrity sha512-bna6Yi1pRznoo6Bz1cE6btB/Yy8Xywytyfrzu/wc+NFW3ZF0I+2iCGImhBsoYYCOWuICtRO4yHcnDlzgo1AdNg==
-
 typescript-compare@^0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/typescript-compare/-/typescript-compare-0.0.2.tgz#7ee40a400a406c2ea0a7e551efd3309021d5f425"
@@ -13222,10 +13240,10 @@ typescript-tuple@^2.2.1:
   dependencies:
     typescript-compare "^0.0.2"
 
-typescript@~4.9.0:
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
-  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+typescript@^5.4.3:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.3.tgz#5c6fedd4c87bee01cd7a528a30145521f8e0feff"
+  integrity sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==
 
 unbox-primitive@^1.0.2:
   version "1.0.2"
@@ -13867,21 +13885,11 @@ wildcard@^2.0.0:
   resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.0.tgz#a77d20e5200c6faaac979e4b3aadc7b3dd7f8fec"
   integrity sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==
 
-wmf@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wmf/-/wmf-1.0.2.tgz#7d19d621071a08c2bdc6b7e688a9c435298cc2da"
-  integrity sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==
-
-word-wrap@^1.2.3, word-wrap@~1.2.3:
+word-wrap@~1.2.3:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.4.tgz#cb4b50ec9aca570abd1f52f33cd45b6c61739a9f"
   integrity sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==
 
-word@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/word/-/word-0.3.0.tgz#8542157e4f8e849f4a363a288992d47612db9961"
-  integrity sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==
-
 workbox-background-sync@6.5.4:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-6.5.4.tgz#3141afba3cc8aa2ae14c24d0f6811374ba8ff6a9"
@@ -14085,18 +14093,9 @@ ws@^8.4.2:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
   integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
 
-xlsx@0.18.5:
-  version "0.18.5"
-  resolved "https://registry.yarnpkg.com/xlsx/-/xlsx-0.18.5.tgz#16711b9113c848076b8a177022799ad356eba7d0"
-  integrity sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==
-  dependencies:
-    adler-32 "~1.3.0"
-    cfb "~1.2.1"
-    codepage "~1.15.0"
-    crc-32 "~1.2.1"
-    ssf "~0.11.2"
-    wmf "~1.0.1"
-    word "~0.3.0"
+"xlsx@https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz":
+  version "0.20.2"
+  resolved "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz#0f64eeed3f1a46e64724620c3553f2dbd3cd2d7d"
 
 xml-name-validator@^3.0.0:
   version "3.0.0"

From 8cb7c6167e05c77e14bbfbf0514d4b49f0b4f3d4 Mon Sep 17 00:00:00 2001
From: s-kybound <abadkyriel@gmail.com>
Date: Mon, 15 Apr 2024 05:16:39 +0800
Subject: [PATCH 16/16] update tests

---
 .../__snapshots__/CseMachine.tsx.snap         | 430 ------------------
 1 file changed, 430 deletions(-)

diff --git a/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap b/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap
index ac9116dd06..9a2414132b 100644
--- a/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap
+++ b/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap
@@ -6258,433 +6258,3 @@ Array [
   ],
 ]
 `;
-
-exports[`CSE Machine calculates correct layout for code sample 7 25`] = `
-Object {
-  "head": Object {
-    "z": Array [
-      Array [
-        [Circular],
-        Array [
-          1,
-          [Circular],
-          [Circular],
-        ],
-      ],
-    ],
-  },
-  "heap": Heap {
-    "storage": Set {
-      Array [
-        Array [
-          [Circular],
-          Array [
-            1,
-            [Circular],
-            [Circular],
-          ],
-        ],
-      ],
-      Array [
-        2,
-        null,
-      ],
-    },
-  },
-  "id": Any<String>,
-  "name": "blockEnvironment",
-  "tail": Object {
-    "callExpression": Object {
-      "arguments": Array [
-        Object {
-          "loc": undefined,
-          "type": "Literal",
-          "value": Array [
-            2,
-            [Function],
-          ],
-        },
-        Object {
-          "loc": undefined,
-          "type": "Literal",
-          "value": 1,
-        },
-      ],
-      "callee": Node {
-        "end": 305,
-        "loc": SourceLocation {
-          "end": Position {
-            "column": 61,
-            "line": 12,
-          },
-          "start": Position {
-            "column": 59,
-            "line": 12,
-          },
-        },
-        "name": "es",
-        "start": 303,
-        "type": "Identifier",
-      },
-      "end": 328,
-      "loc": SourceLocation {
-        "end": Position {
-          "column": 84,
-          "line": 12,
-        },
-        "start": Position {
-          "column": 59,
-          "line": 12,
-        },
-      },
-      "start": 303,
-      "type": "CallExpression",
-    },
-    "head": Object {
-      "n": 1,
-      "s": Array [
-        2,
-        [Function],
-      ],
-    },
-    "heap": Heap {
-      "storage": null,
-    },
-    "id": "83",
-    "name": "es",
-    "tail": Object {
-      "head": Object {
-        "es": [Function],
-      },
-      "heap": Heap {
-        "storage": Set {
-          [Function],
-        },
-      },
-      "id": "73",
-      "name": "blockEnvironment",
-      "tail": Object {
-        "callExpression": Object {
-          "arguments": Array [
-            Object {
-              "loc": undefined,
-              "type": "Literal",
-              "value": Array [
-                1,
-                [Function],
-              ],
-            },
-            Object {
-              "loc": undefined,
-              "type": "Literal",
-              "value": 2,
-            },
-          ],
-          "callee": Node {
-            "end": 404,
-            "loc": SourceLocation {
-              "end": Position {
-                "column": 15,
-                "line": 16,
-              },
-              "start": Position {
-                "column": 4,
-                "line": 16,
-              },
-            },
-            "name": "eval_stream",
-            "start": 393,
-            "type": "Identifier",
-          },
-          "end": 425,
-          "loc": SourceLocation {
-            "end": Position {
-              "column": 36,
-              "line": 16,
-            },
-            "start": Position {
-              "column": 4,
-              "line": 16,
-            },
-          },
-          "start": 393,
-          "type": "CallExpression",
-        },
-        "head": Object {
-          "n": 2,
-          "s": Array [
-            1,
-            [Function],
-          ],
-        },
-        "heap": Heap {
-          "storage": null,
-        },
-        "id": "72",
-        "name": "eval_stream",
-        "tail": Object {
-          "head": Object {
-            "eval_stream": [Function],
-            "x": 1,
-            "y": Array [
-              [Circular],
-              Array [
-                1,
-                [Circular],
-                [Circular],
-              ],
-            ],
-          },
-          "heap": Heap {
-            "storage": Set {
-              Array [],
-              Array [
-                1,
-                Array [
-                  [Circular],
-                  [Circular],
-                ],
-                [Circular],
-              ],
-              Array [
-                [Circular],
-                Array [
-                  1,
-                  [Circular],
-                  [Circular],
-                ],
-              ],
-              [Function],
-            },
-          },
-          "id": "47",
-          "name": "programEnvironment",
-          "tail": Object {
-            "head": Object {
-              "$accumulate": [Function],
-              "$append": [Function],
-              "$build_list": [Function],
-              "$enum_list": [Function],
-              "$filter": [Function],
-              "$length": [Function],
-              "$list_to_string": [Function],
-              "$map": [Function],
-              "$remove": [Function],
-              "$remove_all": [Function],
-              "$reverse": [Function],
-              "__access_export__": [Function],
-              "__access_named_export__": [Function],
-              "accumulate": [Function],
-              "append": [Function],
-              "build_list": [Function],
-              "build_stream": [Function],
-              "enum_list": [Function],
-              "enum_stream": [Function],
-              "equal": [Function],
-              "eval_stream": [Function],
-              "filter": [Function],
-              "for_each": [Function],
-              "integers_from": [Function],
-              "is_stream": [Function],
-              "length": [Function],
-              "list_ref": [Function],
-              "list_to_stream": [Function],
-              "list_to_string": [Function],
-              "map": [Function],
-              "member": [Function],
-              "remove": [Function],
-              "remove_all": [Function],
-              "reverse": [Function],
-              "stream_append": [Function],
-              "stream_filter": [Function],
-              "stream_for_each": [Function],
-              "stream_length": [Function],
-              "stream_map": [Function],
-              "stream_member": [Function],
-              "stream_ref": [Function],
-              "stream_remove": [Function],
-              "stream_remove_all": [Function],
-              "stream_reverse": [Function],
-              "stream_tail": [Function],
-              "stream_to_list": [Function],
-            },
-            "heap": Heap {
-              "storage": Set {
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-                [Function],
-              },
-            },
-            "id": "0",
-            "name": "prelude",
-            "tail": Object {
-              "head": Object {
-                ":::pre-declared names::": Symbol(),
-              },
-              "heap": Heap {
-                "storage": null,
-              },
-              "id": "-1",
-              "name": "global",
-              "tail": null,
-            },
-          },
-        },
-      },
-    },
-  },
-}
-`;
-
-exports[`CSE Machine calculates correct layout for code sample 7 26`] = `
-Array [
-  ":::pre-declared names::: ",
-  Symbol(),
-  "y: ",
-  Array [
-    [Circular],
-    Array [
-      1,
-      [Circular],
-      [Circular],
-    ],
-  ],
-  "eval_stream:= ",
-  [Function],
-  "x: ",
-  1,
-  "n: ",
-  1,
-  "xs: ",
-  Array [
-    1,
-    [Function],
-  ],
-  "n: ",
-  2,
-  "i: ",
-  5,
-  "s: ",
-  Array [
-    1,
-    [Function],
-  ],
-  "n: ",
-  2,
-  "the_tail:= ",
-  [Function],
-  "_copy_of_i:= ",
-  1,
-  "_copy_of_i:= ",
-  2,
-  "_copy_of_i:= ",
-  3,
-  "_copy_of_i:= ",
-  4,
-  "es:= ",
-  [Function],
-  "i:= ",
-  1,
-  "i:= ",
-  2,
-  "i:= ",
-  3,
-  "i:= ",
-  4,
-  "s: ",
-  Array [
-    1,
-    [Function],
-  ],
-  "n: ",
-  2,
-  "s: ",
-  Array [
-    2,
-    [Function],
-  ],
-  "n: ",
-  1,
-  "x:= ",
-  Array [
-    Array [],
-  ],
-  "x:= ",
-  Array [
-    Array [],
-  ],
-  "x:= ",
-  Array [
-    Array [],
-  ],
-  "x:= ",
-  Array [
-    Array [],
-  ],
-  "z:= ",
-  Array [
-    Array [
-      [Circular],
-      Array [
-        1,
-        [Circular],
-        [Circular],
-      ],
-    ],
-  ],
-  "z:= ",
-  Array [
-    Array [
-      [Circular],
-      Array [
-        1,
-        [Circular],
-        [Circular],
-      ],
-    ],
-  ],
-]
-`;