From 22d7859d14370fb4017482e6cab310488d73823a Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Thu, 19 Feb 2026 15:52:33 +0800
Subject: [PATCH 01/26] Added the removeDeadFrames feature Only dead frames
 disappear as of right now, for function objects and the rest, work to be done

Animations : will be done by Keying!
---
 .../content/SideContentCseMachine.tsx         | 38 ++++++++++++++++++-
 src/features/cseMachine/CseMachine.tsx        | 16 ++++++++
 src/features/cseMachine/CseMachineLayout.tsx  |  2 +
 src/features/cseMachine/components/Frame.tsx  |  4 ++
 4 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/src/commons/sideContent/content/SideContentCseMachine.tsx b/src/commons/sideContent/content/SideContentCseMachine.tsx
index 96a60442ab..ac28669c4b 100644
--- a/src/commons/sideContent/content/SideContentCseMachine.tsx
+++ b/src/commons/sideContent/content/SideContentCseMachine.tsx
@@ -42,6 +42,7 @@ type State = {
   lastStep: boolean;
   stepLimitExceeded: boolean;
   chapter: Chapter;
+  hideDeadFrames: boolean;
 };
 
 type CseMachineProps = OwnProps & StateProps & DispatchProps;
@@ -82,7 +83,8 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
       height: this.calculateHeight(props.sideContentHeight),
       lastStep: false,
       stepLimitExceeded: false,
-      chapter: props.chapter
+      chapter: props.chapter,
+      hideDeadFrames: false
     };
     if (this.isJava()) {
       JavaCseMachine.init(
@@ -300,8 +302,35 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
                 onClick={this.stepNextBreakpoint}
               />
             </ButtonGroup>
+
             {!this.isJava() && (
               <ButtonGroup>
+                <Tooltip content="Hide Dead Frames" compact>
+                  <AnchorButton
+                    onMouseUp={() => {
+                      if (this.state.visualization) {
+                        this.setState(
+                          prevState => ({
+                            hideDeadFrames: !prevState.hideDeadFrames
+                          }),
+                          () => {
+                            CseMachine.setHideDeadFrames(this.state.hideDeadFrames);
+                            CseMachine.clearCachedLayouts();
+                            CseMachine.redraw();
+                          }
+                        );
+                      }
+                    }}
+                    icon="eye-off"
+                    disabled={!this.state.visualization}
+                  >
+                    <Checkbox
+                      checked={this.state.hideDeadFrames}
+                      disabled={!this.state.visualization}
+                      style={{ margin: 0 }}
+                    />
+                  </AnchorButton>
+                </Tooltip>
                 <Tooltip content="Print" compact>
                   <AnchorButton
                     onMouseUp={() => {
@@ -396,9 +425,14 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
   };
 
   private sliderShift = (newValue: number) => {
+    if (this.state.hideDeadFrames) {
+      CseMachine.setHideDeadFrames(false);
+      CseMachine.clearCachedLayouts();
+      CseMachine.redraw();
+    }
     this.props.handleStepUpdate(newValue);
     this.setState((state: State) => {
-      return { value: newValue };
+      return { value: newValue, hideDeadFrames: false };
     });
   };
 
diff --git a/src/features/cseMachine/CseMachine.tsx b/src/features/cseMachine/CseMachine.tsx
index f829344807..c9cfad2c54 100644
--- a/src/features/cseMachine/CseMachine.tsx
+++ b/src/features/cseMachine/CseMachine.tsx
@@ -34,6 +34,19 @@ export default class CseMachine {
   public static toggleStackTruncated(): void {
     CseMachine.stackTruncated = !CseMachine.stackTruncated;
   }
+  public static setHideDeadFrames(enabled: boolean): void {
+    Layout.hideDeadFrames = enabled;
+  }
+  public static clearCachedLayouts(): void {
+    Layout.currentLight = undefined;
+    Layout.currentDark = undefined;
+    Layout.currentStackDark = undefined;
+    Layout.currentStackTruncDark = undefined;
+    Layout.currentStackLight = undefined;
+    Layout.currentStackTruncLight = undefined;
+    Layout.prevLayout = undefined;
+    Layout.key = 0;
+  }
   public static getCurrentEnvId(): string {
     return CseMachine.currentEnvId;
   }
@@ -80,6 +93,7 @@ export default class CseMachine {
       throw new Error('CSE machine not initialized');
     CseMachine.control = context.runtime.control;
     CseMachine.stash = context.runtime.stash;
+    CseMachine.setHideDeadFrames(false);
 
     Layout.setContext(
       context.runtime.environmentTree as EnvTree,
@@ -156,6 +170,8 @@ export default class CseMachine {
       CseMachine.control = undefined;
       CseMachine.stash = undefined;
     }
+    CseMachine.setHideDeadFrames(false);
+    CseMachine.clearCachedLayouts();
     this.clear();
   }
 }
diff --git a/src/features/cseMachine/CseMachineLayout.tsx b/src/features/cseMachine/CseMachineLayout.tsx
index 0729009d27..980af23d73 100644
--- a/src/features/cseMachine/CseMachineLayout.tsx
+++ b/src/features/cseMachine/CseMachineLayout.tsx
@@ -90,6 +90,8 @@ export class Layout {
   /** all environment and value IDs that are live in the current context */
   static liveEnvIDs: Set<string> = new Set();
   static liveObjectIDs: Set<string> = new Set();
+  /** hide non-live frames temporarily for the current step */
+  static hideDeadFrames: boolean = false;
 
   /**
    * memoized values, where keys are either ids for arrays and closures,
diff --git a/src/features/cseMachine/components/Frame.tsx b/src/features/cseMachine/components/Frame.tsx
index b78c7fdbd3..d1b55966d4 100644
--- a/src/features/cseMachine/components/Frame.tsx
+++ b/src/features/cseMachine/components/Frame.tsx
@@ -203,6 +203,10 @@ export class Frame extends Visible implements IHoverable {
   onMouseLeave = () => {};
 
   draw(): React.ReactNode {
+    if (Layout.hideDeadFrames && !this.isLive) {
+      return null;
+    }
+
     return (
       <Group ref={this.ref} key={Layout.key++}>
         {this.name.draw()}

From f02260afaba41cdfb344e1b7788bd6343c70dd64 Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Thu, 19 Feb 2026 16:20:53 +0800
Subject: [PATCH 02/26] Added the functionality for toggle of dead vs ONLY live
 for 	function closure objects 	Generic Arrow 	Text (recursively
 automated) 	Arrays and hence pairs as well

---
 src/features/cseMachine/components/ArrayEmptyUnit.tsx      | 3 +++
 src/features/cseMachine/components/Binding.tsx             | 4 ++++
 src/features/cseMachine/components/arrows/GenericArrow.tsx | 4 ++++
 src/features/cseMachine/components/values/ArrayValue.tsx   | 3 +++
 src/features/cseMachine/components/values/FnValue.tsx      | 4 +++-
 5 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/features/cseMachine/components/ArrayEmptyUnit.tsx b/src/features/cseMachine/components/ArrayEmptyUnit.tsx
index e6769d45c5..9db671b944 100644
--- a/src/features/cseMachine/components/ArrayEmptyUnit.tsx
+++ b/src/features/cseMachine/components/ArrayEmptyUnit.tsx
@@ -21,6 +21,9 @@ export class ArrayEmptyUnit extends Visible {
   }
 
   draw(): React.ReactNode {
+    if (Layout.hideDeadFrames && !this.parent.isLive) {
+      return null;
+    }
     const strokeColor =
       this.parent.isReferenced() && this.parent.isEnclosingFrameLive()
         ? defaultStrokeColor()
diff --git a/src/features/cseMachine/components/Binding.tsx b/src/features/cseMachine/components/Binding.tsx
index bc71ecdbf6..a8acf0f5f3 100644
--- a/src/features/cseMachine/components/Binding.tsx
+++ b/src/features/cseMachine/components/Binding.tsx
@@ -95,6 +95,10 @@ export class Binding extends Visible {
       ? ((this.value as any).isLive?.() ?? false)
       : this.frame.isLive;
 
+    if (Layout.hideDeadFrames && !isLive) {
+      return null;
+    }
+
     this.key.options.faded = !isLive;
 
     if (this.value instanceof PrimitiveValue || this.value instanceof UnassignedValue) {
diff --git a/src/features/cseMachine/components/arrows/GenericArrow.tsx b/src/features/cseMachine/components/arrows/GenericArrow.tsx
index 7a1a243c31..5825ac7d29 100644
--- a/src/features/cseMachine/components/arrows/GenericArrow.tsx
+++ b/src/features/cseMachine/components/arrows/GenericArrow.tsx
@@ -105,6 +105,10 @@ export class GenericArrow<Source extends IVisible, Target extends IVisible> exte
 
   draw() {
     this.updateIsLive(); //just before drawijng, update liveness for the arrows (since this was causing erroes earlier  )
+    if (Layout.hideDeadFrames && !this.isLive) {
+      return null;
+    }
+    
     const stroke = this.isLive ? defaultStrokeColor() : fadedStrokeColor();
 
     return (
diff --git a/src/features/cseMachine/components/values/ArrayValue.tsx b/src/features/cseMachine/components/values/ArrayValue.tsx
index 35c716139f..e7a44f5872 100644
--- a/src/features/cseMachine/components/values/ArrayValue.tsx
+++ b/src/features/cseMachine/components/values/ArrayValue.tsx
@@ -118,6 +118,9 @@ export class ArrayValue extends Value implements IHoverable {
   };
 
   draw(): React.ReactNode {
+    if (Layout.hideDeadFrames && !this.isLive) {
+      return null;
+    }
     if (this.isDrawn()) return null;
     this._isDrawn = true;
     return (
diff --git a/src/features/cseMachine/components/values/FnValue.tsx b/src/features/cseMachine/components/values/FnValue.tsx
index 8ffaf01a57..ec0c8ea107 100644
--- a/src/features/cseMachine/components/values/FnValue.tsx
+++ b/src/features/cseMachine/components/values/FnValue.tsx
@@ -150,7 +150,9 @@ export class FnValue extends Value implements IHoverable {
     const textColor = isLive ? defaultTextColor() : fadedTextColor();
     const strokeColor = isLive ? defaultStrokeColor() : fadedStrokeColor();
     //dont need to check isReferenced here since live is ALL we need to know
-
+    if (Layout.hideDeadFrames && !isLive) {
+      return null;
+    }
     return (
       <React.Fragment key={Layout.key++}>
         <Group onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} ref={this.ref}>

From 321f22df828120d024d3a21d229f8fc4f83ec605 Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Thu, 19 Feb 2026 16:51:39 +0800
Subject: [PATCH 03/26] Fix : Removed gaps Finally processed the logic by
 recomputing the envTree for the specific step when the toggle is on

---
 src/features/cseMachine/CseMachineLayout.tsx | 36 ++++++++++++++++++--
 src/features/cseMachine/components/Frame.tsx |  4 ---
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/features/cseMachine/CseMachineLayout.tsx b/src/features/cseMachine/CseMachineLayout.tsx
index 980af23d73..3e49acdd28 100644
--- a/src/features/cseMachine/CseMachineLayout.tsx
+++ b/src/features/cseMachine/CseMachineLayout.tsx
@@ -41,6 +41,7 @@ import {
   isBuiltInFn,
   isClosure,
   isDataArray,
+  isEmptyEnvironment,
   isEnvEqual,
   isGlobalFn,
   isNonGlobalFn,
@@ -360,7 +361,9 @@ export class Layout {
   /** initializes grid */
   private static initializeGrid(): void {
     this.levels = [];
-    let frontier: EnvTreeNode[] = [Layout.globalEnvNode];
+    let frontier: EnvTreeNode[] = Layout.hideDeadFrames
+      ? Layout.getVisibleChildren([Layout.globalEnvNode])
+      : [Layout.globalEnvNode];
     let prevLevel: Level | null = null;
     let currLevel: Level;
 
@@ -371,7 +374,9 @@ export class Layout {
 
       frontier.forEach(e => {
         e.children.forEach(c => {
-          const nextChildren = getNextChildren(c as EnvTreeNode);
+          const nextChildren = Layout.hideDeadFrames
+            ? Layout.getVisibleChildren([c as EnvTreeNode])
+            : getNextChildren(c as EnvTreeNode);
           nextChildren.forEach(c => (c.parent = e));
           nextFrontier.push(...nextChildren);
         });
@@ -382,6 +387,33 @@ export class Layout {
     }
   }
 
+  /**
+   * Returns the next environment nodes that should be rendered.
+   * When broom mode is on, dead environments are skipped and their children are promoted.
+   * Empty environments are also skipped to preserve existing behavior.
+   *
+   * @param nodes candidate nodes
+   */
+  private static getVisibleChildren(nodes: EnvTreeNode[]): EnvTreeNode[] {
+    const result: EnvTreeNode[] = [];
+
+    const visit = (node: EnvTreeNode) => {
+      const isLive = Layout.liveEnvIDs.has(node.environment.id);
+      const isEmpty = isEmptyEnvironment(node.environment);
+      const shouldSkip = isEmpty || !isLive;
+
+      if (!shouldSkip) {
+        result.push(node);
+        return;
+      }
+
+      node.children.forEach(child => visit(child as EnvTreeNode));
+    };
+
+    nodes.forEach(node => visit(node));
+    return result;
+  }
+
   /** 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 {
diff --git a/src/features/cseMachine/components/Frame.tsx b/src/features/cseMachine/components/Frame.tsx
index d1b55966d4..b78c7fdbd3 100644
--- a/src/features/cseMachine/components/Frame.tsx
+++ b/src/features/cseMachine/components/Frame.tsx
@@ -203,10 +203,6 @@ export class Frame extends Visible implements IHoverable {
   onMouseLeave = () => {};
 
   draw(): React.ReactNode {
-    if (Layout.hideDeadFrames && !this.isLive) {
-      return null;
-    }
-
     return (
       <Group ref={this.ref} key={Layout.key++}>
         {this.name.draw()}

From 39a1ac0e06aff98dcb7bee17e5a891cf29e823cc Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Thu, 19 Feb 2026 19:03:21 +0800
Subject: [PATCH 04/26] Fix : CI format errors and made it from checkbox ->
 onClick button!

---
 .../SideContentCseMachine.test.tsx.snap       | 38 +++++++++++++++++++
 .../content/SideContentCseMachine.tsx         |  8 +---
 .../components/arrows/GenericArrow.tsx        |  2 +-
 .../__snapshots__/Playground.test.tsx.snap    | 29 ++++++++++++++
 4 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.test.tsx.snap b/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.test.tsx.snap
index a62bd86c63..75b199dad6 100644
--- a/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.test.tsx.snap
+++ b/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.test.tsx.snap
@@ -335,6 +335,44 @@ exports[`CSE Machine component renders correctly 1`] = `
       <div
         className="bp6-button-group"
       >
+        <span
+          className="bp6-popover-target"
+          onBlur={[Function]}
+          onContextMenu={[Function]}
+          onFocus={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <a
+            aria-disabled={true}
+            className="bp6-button bp6-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseUp={[Function]}
+            role="button"
+            tabIndex={-1}
+          >
+            <span
+              aria-hidden={true}
+              className="bp6-icon bp6-icon-eye-off"
+            >
+              <svg
+                data-icon="eye-off"
+                height={16}
+                role="img"
+                viewBox="0 0 16 16"
+                width={16}
+              >
+                <path
+                  d="M16 7.97v-.02-.01-.02-.02a.672.672 0 00-.17-.36c-.49-.63-1.07-1.2-1.65-1.72l-3.16 2.26a2.978 2.978 0 01-2.98 2.9c-.31 0-.6-.06-.88-.15L5.09 12.3c.44.19.9.36 1.37.47.97.23 1.94.24 2.92.05.88-.17 1.74-.54 2.53-.98 1.25-.7 2.39-1.67 3.38-2.75.18-.2.37-.41.53-.62.09-.1.15-.22.17-.36v-.02-.02-.01-.02-.03c.01-.02.01-.03.01-.04zm-.43-4.17c.25-.18.43-.46.43-.8 0-.55-.45-1-1-1-.22 0-.41.08-.57.2l-.01-.01-2.67 1.91c-.69-.38-1.41-.69-2.17-.87a6.8 6.8 0 00-2.91-.05c-.88.18-1.74.54-2.53.99-1.25.7-2.39 1.67-3.38 2.75-.18.2-.37.41-.53.62-.23.29-.23.63-.01.92.51.66 1.11 1.25 1.73 1.79.18.16.38.29.56.44l-2.09 1.5.01.01c-.25.18-.43.46-.43.8 0 .55.45 1 1 1 .22 0 .41-.08.57-.2l.01.01 14-10-.01-.01zm-10.41 5a3.03 3.03 0 01-.11-.8 2.99 2.99 0 012.99-2.98c.62 0 1.19.21 1.66.53L5.16 8.8z"
+                  fillRule="evenodd"
+                />
+              </svg>
+            </span>
+          </a>
+        </span>
         <span
           className="bp6-popover-target"
           onBlur={[Function]}
diff --git a/src/commons/sideContent/content/SideContentCseMachine.tsx b/src/commons/sideContent/content/SideContentCseMachine.tsx
index ac28669c4b..d67901f83e 100644
--- a/src/commons/sideContent/content/SideContentCseMachine.tsx
+++ b/src/commons/sideContent/content/SideContentCseMachine.tsx
@@ -323,13 +323,7 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
                     }}
                     icon="eye-off"
                     disabled={!this.state.visualization}
-                  >
-                    <Checkbox
-                      checked={this.state.hideDeadFrames}
-                      disabled={!this.state.visualization}
-                      style={{ margin: 0 }}
-                    />
-                  </AnchorButton>
+                  ></AnchorButton>
                 </Tooltip>
                 <Tooltip content="Print" compact>
                   <AnchorButton
diff --git a/src/features/cseMachine/components/arrows/GenericArrow.tsx b/src/features/cseMachine/components/arrows/GenericArrow.tsx
index 5825ac7d29..7f7c601585 100644
--- a/src/features/cseMachine/components/arrows/GenericArrow.tsx
+++ b/src/features/cseMachine/components/arrows/GenericArrow.tsx
@@ -108,7 +108,7 @@ export class GenericArrow<Source extends IVisible, Target extends IVisible> exte
     if (Layout.hideDeadFrames && !this.isLive) {
       return null;
     }
-    
+
     const stroke = this.isLive ? defaultStrokeColor() : fadedStrokeColor();
 
     return (
diff --git a/src/pages/playground/__tests__/__snapshots__/Playground.test.tsx.snap b/src/pages/playground/__tests__/__snapshots__/Playground.test.tsx.snap
index f50e5ebea9..83c74df2de 100644
--- a/src/pages/playground/__tests__/__snapshots__/Playground.test.tsx.snap
+++ b/src/pages/playground/__tests__/__snapshots__/Playground.test.tsx.snap
@@ -1146,6 +1146,35 @@ and also the
                                 <div
                                   class="bp6-button-group"
                                 >
+                                  <span
+                                    class="bp6-popover-target"
+                                  >
+                                    <a
+                                      aria-disabled="true"
+                                      class="bp6-button bp6-disabled"
+                                      disabled=""
+                                      role="button"
+                                      tabindex="-1"
+                                    >
+                                      <span
+                                        aria-hidden="true"
+                                        class="bp6-icon bp6-icon-eye-off"
+                                      >
+                                        <svg
+                                          data-icon="eye-off"
+                                          height="16"
+                                          role="img"
+                                          viewBox="0 0 16 16"
+                                          width="16"
+                                        >
+                                          <path
+                                            d="M16 7.97v-.02-.01-.02-.02a.672.672 0 00-.17-.36c-.49-.63-1.07-1.2-1.65-1.72l-3.16 2.26a2.978 2.978 0 01-2.98 2.9c-.31 0-.6-.06-.88-.15L5.09 12.3c.44.19.9.36 1.37.47.97.23 1.94.24 2.92.05.88-.17 1.74-.54 2.53-.98 1.25-.7 2.39-1.67 3.38-2.75.18-.2.37-.41.53-.62.09-.1.15-.22.17-.36v-.02-.02-.01-.02-.03c.01-.02.01-.03.01-.04zm-.43-4.17c.25-.18.43-.46.43-.8 0-.55-.45-1-1-1-.22 0-.41.08-.57.2l-.01-.01-2.67 1.91c-.69-.38-1.41-.69-2.17-.87a6.8 6.8 0 00-2.91-.05c-.88.18-1.74.54-2.53.99-1.25.7-2.39 1.67-3.38 2.75-.18.2-.37.41-.53.62-.23.29-.23.63-.01.92.51.66 1.11 1.25 1.73 1.79.18.16.38.29.56.44l-2.09 1.5.01.01c-.25.18-.43.46-.43.8 0 .55.45 1 1 1 .22 0 .41-.08.57-.2l.01.01 14-10-.01-.01zm-10.41 5a3.03 3.03 0 01-.11-.8 2.99 2.99 0 012.99-2.98c.62 0 1.19.21 1.66.53L5.16 8.8z"
+                                            fill-rule="evenodd"
+                                          />
+                                        </svg>
+                                      </span>
+                                    </a>
+                                  </span>
                                   <span
                                     class="bp6-popover-target"
                                   >

From 2c3897cdffe8645de0a57d45edcbf748c1bb1c91 Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Thu, 19 Feb 2026 19:28:53 +0800
Subject: [PATCH 05/26] Fix : Toggle -> One time cleanup

---
 src/commons/sideContent/content/SideContentCseMachine.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/commons/sideContent/content/SideContentCseMachine.tsx b/src/commons/sideContent/content/SideContentCseMachine.tsx
index d67901f83e..773942e28b 100644
--- a/src/commons/sideContent/content/SideContentCseMachine.tsx
+++ b/src/commons/sideContent/content/SideContentCseMachine.tsx
@@ -311,7 +311,7 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
                       if (this.state.visualization) {
                         this.setState(
                           prevState => ({
-                            hideDeadFrames: !prevState.hideDeadFrames
+                            hideDeadFrames: true
                           }),
                           () => {
                             CseMachine.setHideDeadFrames(this.state.hideDeadFrames);

From 44e1f30c8e42a85c44e936752a4a2dc1080d9bce Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Mon, 23 Feb 2026 20:09:02 +0800
Subject: [PATCH 06/26] Changed from Hide -> Clear and the icon

---
 src/commons/sideContent/content/SideContentCseMachine.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/commons/sideContent/content/SideContentCseMachine.tsx b/src/commons/sideContent/content/SideContentCseMachine.tsx
index 773942e28b..f29838a9b8 100644
--- a/src/commons/sideContent/content/SideContentCseMachine.tsx
+++ b/src/commons/sideContent/content/SideContentCseMachine.tsx
@@ -305,7 +305,7 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
 
             {!this.isJava() && (
               <ButtonGroup>
-                <Tooltip content="Hide Dead Frames" compact>
+                <Tooltip content="Clear Dead Frames" compact>
                   <AnchorButton
                     onMouseUp={() => {
                       if (this.state.visualization) {
@@ -321,7 +321,7 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
                         );
                       }
                     }}
-                    icon="eye-off"
+                    icon="eraser"
                     disabled={!this.state.visualization}
                   ></AnchorButton>
                 </Tooltip>

From d6c68817773708a6d4aca5c95e13a11bbf7b5534 Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Tue, 3 Mar 2026 11:30:02 +0800
Subject: [PATCH 07/26] Fixed the following errors and implemented suggestions
 1. Fixed the snapshot and lint erros 2. Added the disable feature (as
 suggested by @sayomaki) where to suggest that its CLEAR and not HIDE, we
 disable after pressing once!! 3. Changed all instances of hide to clear in
 our current implementation!

---
 .coverage-fix.tmp                               |  1 +
 .../SideContentCseMachine.test.tsx.snap         |  6 +++---
 .../content/SideContentCseMachine.tsx           | 17 +++++++++--------
 src/features/cseMachine/CseMachine.tsx          |  8 ++++----
 src/features/cseMachine/CseMachineLayout.tsx    |  6 +++---
 .../cseMachine/components/ArrayEmptyUnit.tsx    |  2 +-
 src/features/cseMachine/components/Binding.tsx  |  2 +-
 .../components/arrows/GenericArrow.tsx          |  2 +-
 .../cseMachine/components/values/ArrayValue.tsx |  2 +-
 .../cseMachine/components/values/FnValue.tsx    |  2 +-
 src/{global.d.ts => global.ts}                  |  0
 .../__snapshots__/Playground.test.tsx.snap      |  6 +++---
 12 files changed, 28 insertions(+), 26 deletions(-)
 create mode 100644 .coverage-fix.tmp
 rename src/{global.d.ts => global.ts} (100%)

diff --git a/.coverage-fix.tmp b/.coverage-fix.tmp
new file mode 100644
index 0000000000..e4e5614e41
--- /dev/null
+++ b/.coverage-fix.tmp
@@ -0,0 +1 @@
+./src/global.ts
diff --git a/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.test.tsx.snap b/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.test.tsx.snap
index 75b199dad6..dd3388d38b 100644
--- a/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.test.tsx.snap
+++ b/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.test.tsx.snap
@@ -356,17 +356,17 @@ exports[`CSE Machine component renders correctly 1`] = `
           >
             <span
               aria-hidden={true}
-              className="bp6-icon bp6-icon-eye-off"
+              className="bp6-icon bp6-icon-eraser"
             >
               <svg
-                data-icon="eye-off"
+                data-icon="eraser"
                 height={16}
                 role="img"
                 viewBox="0 0 16 16"
                 width={16}
               >
                 <path
-                  d="M16 7.97v-.02-.01-.02-.02a.672.672 0 00-.17-.36c-.49-.63-1.07-1.2-1.65-1.72l-3.16 2.26a2.978 2.978 0 01-2.98 2.9c-.31 0-.6-.06-.88-.15L5.09 12.3c.44.19.9.36 1.37.47.97.23 1.94.24 2.92.05.88-.17 1.74-.54 2.53-.98 1.25-.7 2.39-1.67 3.38-2.75.18-.2.37-.41.53-.62.09-.1.15-.22.17-.36v-.02-.02-.01-.02-.03c.01-.02.01-.03.01-.04zm-.43-4.17c.25-.18.43-.46.43-.8 0-.55-.45-1-1-1-.22 0-.41.08-.57.2l-.01-.01-2.67 1.91c-.69-.38-1.41-.69-2.17-.87a6.8 6.8 0 00-2.91-.05c-.88.18-1.74.54-2.53.99-1.25.7-2.39 1.67-3.38 2.75-.18.2-.37.41-.53.62-.23.29-.23.63-.01.92.51.66 1.11 1.25 1.73 1.79.18.16.38.29.56.44l-2.09 1.5.01.01c-.25.18-.43.46-.43.8 0 .55.45 1 1 1 .22 0 .41-.08.57-.2l.01.01 14-10-.01-.01zm-10.41 5a3.03 3.03 0 01-.11-.8 2.99 2.99 0 012.99-2.98c.62 0 1.19.21 1.66.53L5.16 8.8z"
+                  d="M8.06 13.91l7.63-7.44c.41-.4.41-1.05 0-1.45L10.86.3c-.41-.4-1.08-.4-1.49 0L.31 9.13c-.41.4-.41 1.05 0 1.45l5.58 5.44h8.12v-.01c.55 0 1-.45 1-1s-.45-1-1-1H7.96l.1-.1zm-2.17.06L1.67 9.85l4.22-4.11 4.22 4.11-4.22 4.12z"
                   fillRule="evenodd"
                 />
               </svg>
diff --git a/src/commons/sideContent/content/SideContentCseMachine.tsx b/src/commons/sideContent/content/SideContentCseMachine.tsx
index f29838a9b8..4ba1e72a8b 100644
--- a/src/commons/sideContent/content/SideContentCseMachine.tsx
+++ b/src/commons/sideContent/content/SideContentCseMachine.tsx
@@ -12,6 +12,7 @@ import { IconNames } from '@blueprintjs/icons';
 import { HotkeyItem } from '@mantine/hooks';
 import { bindActionCreators } from '@reduxjs/toolkit';
 import classNames from 'classnames';
+import { clear } from 'console';
 import { t } from 'i18next';
 import { Chapter } from 'js-slang/dist/langs';
 import { debounce } from 'lodash';
@@ -42,7 +43,7 @@ type State = {
   lastStep: boolean;
   stepLimitExceeded: boolean;
   chapter: Chapter;
-  hideDeadFrames: boolean;
+  clearDeadFrames: boolean;
 };
 
 type CseMachineProps = OwnProps & StateProps & DispatchProps;
@@ -84,7 +85,7 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
       lastStep: false,
       stepLimitExceeded: false,
       chapter: props.chapter,
-      hideDeadFrames: false
+      clearDeadFrames: false
     };
     if (this.isJava()) {
       JavaCseMachine.init(
@@ -311,10 +312,10 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
                       if (this.state.visualization) {
                         this.setState(
                           prevState => ({
-                            hideDeadFrames: true
+                            clearDeadFrames: true
                           }),
                           () => {
-                            CseMachine.setHideDeadFrames(this.state.hideDeadFrames);
+                            CseMachine.setClearDeadFrames(this.state.clearDeadFrames);
                             CseMachine.clearCachedLayouts();
                             CseMachine.redraw();
                           }
@@ -322,7 +323,7 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
                       }
                     }}
                     icon="eraser"
-                    disabled={!this.state.visualization}
+                    disabled={this.state.clearDeadFrames || !this.state.visualization}
                   ></AnchorButton>
                 </Tooltip>
                 <Tooltip content="Print" compact>
@@ -419,14 +420,14 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
   };
 
   private sliderShift = (newValue: number) => {
-    if (this.state.hideDeadFrames) {
-      CseMachine.setHideDeadFrames(false);
+    if (this.state.clearDeadFrames) {
+      CseMachine.setClearDeadFrames(false);
       CseMachine.clearCachedLayouts();
       CseMachine.redraw();
     }
     this.props.handleStepUpdate(newValue);
     this.setState((state: State) => {
-      return { value: newValue, hideDeadFrames: false };
+      return { value: newValue, clearDeadFrames: false };
     });
   };
 
diff --git a/src/features/cseMachine/CseMachine.tsx b/src/features/cseMachine/CseMachine.tsx
index 406544e864..a1f91e8615 100644
--- a/src/features/cseMachine/CseMachine.tsx
+++ b/src/features/cseMachine/CseMachine.tsx
@@ -35,8 +35,8 @@ export default class CseMachine {
   public static toggleStackTruncated(): void {
     CseMachine.stackTruncated = !CseMachine.stackTruncated;
   }
-  public static setHideDeadFrames(enabled: boolean): void {
-    Layout.hideDeadFrames = enabled;
+  public static setClearDeadFrames(enabled: boolean): void {
+    Layout.clearDeadFrames = enabled;
   }
   public static clearCachedLayouts(): void {
     Layout.currentLight = undefined;
@@ -95,7 +95,7 @@ export default class CseMachine {
       throw new Error('CSE machine not initialized');
     CseMachine.control = context.runtime.control;
     CseMachine.stash = context.runtime.stash;
-    CseMachine.setHideDeadFrames(false);
+    CseMachine.setClearDeadFrames(false);
 
     Layout.setContext(
       context.runtime.environmentTree as EnvTree,
@@ -172,7 +172,7 @@ export default class CseMachine {
       CseMachine.control = undefined;
       CseMachine.stash = undefined;
     }
-    CseMachine.setHideDeadFrames(false);
+    CseMachine.setClearDeadFrames(false);
     CseMachine.clearCachedLayouts();
     this.clear();
   }
diff --git a/src/features/cseMachine/CseMachineLayout.tsx b/src/features/cseMachine/CseMachineLayout.tsx
index 347f5c5b21..145f7bfdd2 100644
--- a/src/features/cseMachine/CseMachineLayout.tsx
+++ b/src/features/cseMachine/CseMachineLayout.tsx
@@ -93,7 +93,7 @@ export class Layout {
   static liveEnvIDs: Set<string> = new Set();
   static liveObjectIDs: Set<string> = new Set();
   /** hide non-live frames temporarily for the current step */
-  static hideDeadFrames: boolean = false;
+  static clearDeadFrames: boolean = false;
 
   /**
    * memoized values, where keys are either ids for arrays and closures,
@@ -363,7 +363,7 @@ export class Layout {
   /** initializes grid */
   private static initializeGrid(): void {
     this.levels = [];
-    let frontier: EnvTreeNode[] = Layout.hideDeadFrames
+    let frontier: EnvTreeNode[] = Layout.clearDeadFrames
       ? Layout.getVisibleChildren([Layout.globalEnvNode])
       : [Layout.globalEnvNode];
     let prevLevel: Level | null = null;
@@ -376,7 +376,7 @@ export class Layout {
 
       frontier.forEach(e => {
         e.children.forEach(c => {
-          const nextChildren = Layout.hideDeadFrames
+          const nextChildren = Layout.clearDeadFrames
             ? Layout.getVisibleChildren([c as EnvTreeNode])
             : getNextChildren(c as EnvTreeNode);
           nextChildren.forEach(c => (c.parent = e));
diff --git a/src/features/cseMachine/components/ArrayEmptyUnit.tsx b/src/features/cseMachine/components/ArrayEmptyUnit.tsx
index 9db671b944..cdda46e492 100644
--- a/src/features/cseMachine/components/ArrayEmptyUnit.tsx
+++ b/src/features/cseMachine/components/ArrayEmptyUnit.tsx
@@ -21,7 +21,7 @@ export class ArrayEmptyUnit extends Visible {
   }
 
   draw(): React.ReactNode {
-    if (Layout.hideDeadFrames && !this.parent.isLive) {
+    if (Layout.clearDeadFrames && !this.parent.isLive) {
       return null;
     }
     const strokeColor =
diff --git a/src/features/cseMachine/components/Binding.tsx b/src/features/cseMachine/components/Binding.tsx
index a8acf0f5f3..d115cd66a3 100644
--- a/src/features/cseMachine/components/Binding.tsx
+++ b/src/features/cseMachine/components/Binding.tsx
@@ -95,7 +95,7 @@ export class Binding extends Visible {
       ? ((this.value as any).isLive?.() ?? false)
       : this.frame.isLive;
 
-    if (Layout.hideDeadFrames && !isLive) {
+    if (Layout.clearDeadFrames && !isLive) {
       return null;
     }
 
diff --git a/src/features/cseMachine/components/arrows/GenericArrow.tsx b/src/features/cseMachine/components/arrows/GenericArrow.tsx
index 762c60750c..401da3ced0 100644
--- a/src/features/cseMachine/components/arrows/GenericArrow.tsx
+++ b/src/features/cseMachine/components/arrows/GenericArrow.tsx
@@ -224,7 +224,7 @@ export class GenericArrow<Source extends IVisible, Target extends IVisible>
 
   draw() {
     this.updateIsLive(); //just before drawijng, update liveness for the arrows (since this was causing erroes earlier  )
-    if (Layout.hideDeadFrames && !this.isLive) {
+    if (Layout.clearDeadFrames && !this.isLive) {
       return null;
     }
 
diff --git a/src/features/cseMachine/components/values/ArrayValue.tsx b/src/features/cseMachine/components/values/ArrayValue.tsx
index e7a44f5872..f64df35d96 100644
--- a/src/features/cseMachine/components/values/ArrayValue.tsx
+++ b/src/features/cseMachine/components/values/ArrayValue.tsx
@@ -118,7 +118,7 @@ export class ArrayValue extends Value implements IHoverable {
   };
 
   draw(): React.ReactNode {
-    if (Layout.hideDeadFrames && !this.isLive) {
+    if (Layout.clearDeadFrames && !this.isLive()) {
       return null;
     }
     if (this.isDrawn()) return null;
diff --git a/src/features/cseMachine/components/values/FnValue.tsx b/src/features/cseMachine/components/values/FnValue.tsx
index ec0c8ea107..c0340222b7 100644
--- a/src/features/cseMachine/components/values/FnValue.tsx
+++ b/src/features/cseMachine/components/values/FnValue.tsx
@@ -150,7 +150,7 @@ export class FnValue extends Value implements IHoverable {
     const textColor = isLive ? defaultTextColor() : fadedTextColor();
     const strokeColor = isLive ? defaultStrokeColor() : fadedStrokeColor();
     //dont need to check isReferenced here since live is ALL we need to know
-    if (Layout.hideDeadFrames && !isLive) {
+    if (Layout.clearDeadFrames && !isLive) {
       return null;
     }
     return (
diff --git a/src/global.d.ts b/src/global.ts
similarity index 100%
rename from src/global.d.ts
rename to src/global.ts
diff --git a/src/pages/playground/__tests__/__snapshots__/Playground.test.tsx.snap b/src/pages/playground/__tests__/__snapshots__/Playground.test.tsx.snap
index 83c74df2de..1744fc958f 100644
--- a/src/pages/playground/__tests__/__snapshots__/Playground.test.tsx.snap
+++ b/src/pages/playground/__tests__/__snapshots__/Playground.test.tsx.snap
@@ -1158,17 +1158,17 @@ and also the
                                     >
                                       <span
                                         aria-hidden="true"
-                                        class="bp6-icon bp6-icon-eye-off"
+                                        class="bp6-icon bp6-icon-eraser"
                                       >
                                         <svg
-                                          data-icon="eye-off"
+                                          data-icon="eraser"
                                           height="16"
                                           role="img"
                                           viewBox="0 0 16 16"
                                           width="16"
                                         >
                                           <path
-                                            d="M16 7.97v-.02-.01-.02-.02a.672.672 0 00-.17-.36c-.49-.63-1.07-1.2-1.65-1.72l-3.16 2.26a2.978 2.978 0 01-2.98 2.9c-.31 0-.6-.06-.88-.15L5.09 12.3c.44.19.9.36 1.37.47.97.23 1.94.24 2.92.05.88-.17 1.74-.54 2.53-.98 1.25-.7 2.39-1.67 3.38-2.75.18-.2.37-.41.53-.62.09-.1.15-.22.17-.36v-.02-.02-.01-.02-.03c.01-.02.01-.03.01-.04zm-.43-4.17c.25-.18.43-.46.43-.8 0-.55-.45-1-1-1-.22 0-.41.08-.57.2l-.01-.01-2.67 1.91c-.69-.38-1.41-.69-2.17-.87a6.8 6.8 0 00-2.91-.05c-.88.18-1.74.54-2.53.99-1.25.7-2.39 1.67-3.38 2.75-.18.2-.37.41-.53.62-.23.29-.23.63-.01.92.51.66 1.11 1.25 1.73 1.79.18.16.38.29.56.44l-2.09 1.5.01.01c-.25.18-.43.46-.43.8 0 .55.45 1 1 1 .22 0 .41-.08.57-.2l.01.01 14-10-.01-.01zm-10.41 5a3.03 3.03 0 01-.11-.8 2.99 2.99 0 012.99-2.98c.62 0 1.19.21 1.66.53L5.16 8.8z"
+                                            d="M8.06 13.91l7.63-7.44c.41-.4.41-1.05 0-1.45L10.86.3c-.41-.4-1.08-.4-1.49 0L.31 9.13c-.41.4-.41 1.05 0 1.45l5.58 5.44h8.12v-.01c.55 0 1-.45 1-1s-.45-1-1-1H7.96l.1-.1zm-2.17.06L1.67 9.85l4.22-4.11 4.22 4.11-4.22 4.12z"
                                             fill-rule="evenodd"
                                           />
                                         </svg>

From 2ef3c484c1e3f97d1fc85d70fe84bfc411b92882 Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Tue, 3 Mar 2026 11:45:10 +0800
Subject: [PATCH 08/26] Fixed tsc error

---
 src/commons/sideContent/content/SideContentCseMachine.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/commons/sideContent/content/SideContentCseMachine.tsx b/src/commons/sideContent/content/SideContentCseMachine.tsx
index 020c92aeeb..e663c13c69 100644
--- a/src/commons/sideContent/content/SideContentCseMachine.tsx
+++ b/src/commons/sideContent/content/SideContentCseMachine.tsx
@@ -12,7 +12,6 @@ import { IconNames } from '@blueprintjs/icons';
 import { HotkeyItem } from '@mantine/hooks';
 import { bindActionCreators } from '@reduxjs/toolkit';
 import classNames from 'classnames';
-import { clear } from 'console';
 import { t } from 'i18next';
 import { Chapter } from 'js-slang/dist/langs';
 import { debounce } from 'lodash';

From 99f83010c9c8f744e8790bc8c0d03af09666b6f4 Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Tue, 3 Mar 2026 11:50:52 +0800
Subject: [PATCH 09/26] Fixed the sentry bot suggestion

---
 src/features/cseMachine/components/ArrayEmptyUnit.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/cseMachine/components/ArrayEmptyUnit.tsx b/src/features/cseMachine/components/ArrayEmptyUnit.tsx
index cdda46e492..4b1493b522 100644
--- a/src/features/cseMachine/components/ArrayEmptyUnit.tsx
+++ b/src/features/cseMachine/components/ArrayEmptyUnit.tsx
@@ -21,7 +21,7 @@ export class ArrayEmptyUnit extends Visible {
   }
 
   draw(): React.ReactNode {
-    if (Layout.clearDeadFrames && !this.parent.isLive) {
+    if (Layout.clearDeadFrames && !this.parent.isLive()) {
       return null;
     }
     const strokeColor =

From e00e5f280ea8ed22a8212b18c65c8f60edeefe4d Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Tue, 3 Mar 2026 13:07:42 +0800
Subject: [PATCH 10/26] Fixed the error where the frames WERE not moving due to
 the Layout team's invariant! Now the frames do move by violating their
 invariant ONLY if the Clear mode is ON

---
 src/features/cseMachine/CseMachineLayout.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/features/cseMachine/CseMachineLayout.tsx b/src/features/cseMachine/CseMachineLayout.tsx
index b5351dcc4b..925f58f5f2 100644
--- a/src/features/cseMachine/CseMachineLayout.tsx
+++ b/src/features/cseMachine/CseMachineLayout.tsx
@@ -682,6 +682,9 @@ export class Layout {
    * @returns coordinate of cached position, or undefined if it doesn't exist
    */
   static getGhostFrameX(envId: string): number | undefined {
+    if (Layout.clearDeadFrames) {
+      return undefined;
+    }
     const cache = CseMachine.masterLayout;
     if (cache && cache.frames.has(envId)) {
       const fixedX = cache.frames.get(envId)!;
@@ -702,6 +705,9 @@ export class Layout {
    * Reassign x coordinate of every frame to their predetermined position by calling getGhostFrameX.
    */
   static applyFixedPositions() {
+    if (Layout.clearDeadFrames || !CseMachine.masterLayout) {
+      return;
+    }
     const cache = CseMachine.masterLayout!; // getLayoutPositions() must have been called before
     Layout.levels.forEach(level => {
       level.frames.forEach(frame => {

From 25755a4c5c380d8e1cfcbfb4c9dbd74d51815ffb Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Tue, 3 Mar 2026 15:06:54 +0800
Subject: [PATCH 11/26] Version 1

---
 src/features/cseMachine/components/Binding.tsx  | 17 +++++++++++++++--
 .../cseMachine/components/values/FnValue.tsx    | 17 +++++++++++++----
 .../components/values/GlobalFnValue.tsx         | 15 ++++++++++++---
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/features/cseMachine/components/Binding.tsx b/src/features/cseMachine/components/Binding.tsx
index f4ee57e72b..9c3485f7d3 100644
--- a/src/features/cseMachine/components/Binding.tsx
+++ b/src/features/cseMachine/components/Binding.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import CseMachine from '../CseMachine';
 import { Config } from '../CseMachineConfig';
 import { Layout } from '../CseMachineLayout';
 import { Data } from '../CseMachineTypes';
@@ -68,6 +69,13 @@ export class Binding extends Visible {
     this.keyYOffset = keyYOffset;
     this.key = new Text(this.keyString, this.x(), this.y() + keyYOffset, { faded: !this.isLive });
 
+    const printFnDescriptionHeight =
+      CseMachine.getPrintableMode() &&
+      isMainReference(this.value, this) &&
+      (this.value instanceof FnValue || this.value instanceof GlobalFnValue)
+        ? this.value.printDescriptionHeight + Config.TextPaddingY / 2
+        : 0;
+
     // derive the width from the right bound of the value
     this._width = isMainReference(this.value, this)
       ? this.value.x() -
@@ -75,13 +83,18 @@ export class Binding extends Visible {
         (this.value instanceof FnValue ||
         this.value instanceof GlobalFnValue ||
         this.value instanceof ContValue
-          ? this.value.tooltipWidth
+          ? CseMachine.getPrintableMode() &&
+            (this.value instanceof FnValue || this.value instanceof GlobalFnValue)
+            ? 0
+            : this.value.tooltipWidth
           : 0)
       : this.key.width();
 
     this._height = Math.max(
       this.key.height(),
-      this.value instanceof ArrayValue ? this.value.totalHeight : this.value.height()
+      this.value instanceof ArrayValue
+        ? this.value.totalHeight
+        : this.value.height() + printFnDescriptionHeight
     );
 
     if (this.isDummyBinding && !isMainReference(this.value, this)) {
diff --git a/src/features/cseMachine/components/values/FnValue.tsx b/src/features/cseMachine/components/values/FnValue.tsx
index 720544fe19..0311128b41 100644
--- a/src/features/cseMachine/components/values/FnValue.tsx
+++ b/src/features/cseMachine/components/values/FnValue.tsx
@@ -46,6 +46,7 @@ export class FnValue extends Value implements IHoverable {
   readonly tooltipWidth: number;
   readonly exportTooltip: string;
   readonly exportTooltipWidth: number;
+  readonly printDescriptionHeight: number;
 
   /** width of the closure circles + label */
   readonly totalWidth: number;
@@ -84,11 +85,13 @@ export class FnValue extends Value implements IHoverable {
       getTextWidth(this.paramsText),
       getTextWidth(this.exportBodyText)
     );
+    this.printDescriptionHeight =
+      this.exportTooltip.split('\n').length * Config.FontSize + Config.FnTooltipTextPadding * 2;
     this.totalWidth =
       this._width +
       Config.TextPaddingX * 2 +
       10 +
-      (CseMachine.getPrintableMode() ? this.exportTooltipWidth : this.tooltipWidth);
+      (CseMachine.getPrintableMode() ? 0 : this.tooltipWidth);
 
     this.addReference(firstReference);
   }
@@ -196,8 +199,14 @@ export class FnValue extends Value implements IHoverable {
           />
         </Group>
         <KonvaLabel
-          x={this.x() + this.width() + Config.TextPaddingX * 2}
-          y={this.y() - Config.TextPaddingY}
+          x={
+            CseMachine.getPrintableMode() ? this.centerX - this.radius : this.x() + this.width() + Config.TextPaddingX * 2
+          }
+          y={
+            CseMachine.getPrintableMode()
+              ? this.y() + this.radius + Config.TextPaddingY / 3
+              : this.y() - Config.TextPaddingY
+          }
           visible={CseMachine.getPrintableMode()}
           ref={this.labelRef}
         >
@@ -216,7 +225,7 @@ export class FnValue extends Value implements IHoverable {
             fontSize={Config.FontSize}
             fontStyle={Config.FontStyle}
             fill={textColor} //even the text that appears on hover is faded if unreferenced
-            padding={5}
+            padding={Config.FnTooltipTextPadding}
           />
         </KonvaLabel>
         {this._arrow?.draw()}
diff --git a/src/features/cseMachine/components/values/GlobalFnValue.tsx b/src/features/cseMachine/components/values/GlobalFnValue.tsx
index 13798e45e9..2368d0dcd7 100644
--- a/src/features/cseMachine/components/values/GlobalFnValue.tsx
+++ b/src/features/cseMachine/components/values/GlobalFnValue.tsx
@@ -40,6 +40,7 @@ export class GlobalFnValue extends Value implements IHoverable {
   readonly tooltipWidth: number;
   readonly exportTooltip: string;
   readonly exportTooltipWidth: number;
+  readonly printDescriptionHeight: number;
   readonly totalWidth: number;
   readonly labelRef: RefObject<Label> = React.createRef();
 
@@ -81,11 +82,13 @@ export class GlobalFnValue extends Value implements IHoverable {
       getTextWidth(this.paramsText),
       getTextWidth(this.exportBodyText)
     );
+    this.printDescriptionHeight =
+      this.exportTooltip.split('\n').length * Config.FontSize + Config.FnTooltipTextPadding * 2;
     this.totalWidth =
       this._width +
       Config.TextPaddingX * 2 +
       Config.FnTooltipTextPadding * 2 +
-      (CseMachine.getPrintableMode() ? this.exportTooltipWidth : this.tooltipWidth);
+      (CseMachine.getPrintableMode() ? 0 : this.tooltipWidth);
 
     this.addReference(mainReference);
   }
@@ -153,8 +156,14 @@ export class GlobalFnValue extends Value implements IHoverable {
           />
         </Group>
         <KonvaLabel
-          x={this.x() + this.width() + Config.TextPaddingX * 2}
-          y={this.y() - Config.TextPaddingY}
+          x={
+            CseMachine.getPrintableMode() ? this.centerX - this.radius : this.x() + this.width() + Config.TextPaddingX * 2
+          }
+          y={
+            CseMachine.getPrintableMode()
+              ? this.y() + this.radius + Config.TextPaddingY / 3
+              : this.y() - Config.TextPaddingY
+          }
           visible={CseMachine.getPrintableMode()}
           ref={this.labelRef}
         >

From 6906fe9fb9b6c427c9dd33d3a35fce415556d105 Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Tue, 3 Mar 2026 17:04:51 +0800
Subject: [PATCH 12/26] Version 2

---
 et --hard 25755a4c                            | 80 +++++++++++++++++++
 src/features/cseMachine/CseMachine.tsx        |  6 +-
 src/features/cseMachine/CseMachineLayout.tsx  |  2 +-
 .../cseMachine/components/Binding.tsx         |  9 ++-
 .../cseMachine/components/values/FnValue.tsx  |  6 +-
 .../components/values/GlobalFnValue.tsx       |  6 +-
 6 files changed, 100 insertions(+), 9 deletions(-)
 create mode 100644 et --hard 25755a4c

diff --git a/et --hard 25755a4c b/et --hard 25755a4c
new file mode 100644
index 0000000000..a863f0b2f2
--- /dev/null
+++ b/et --hard 25755a4c	
@@ -0,0 +1,80 @@
+e00e5f28 (HEAD -> fix-cse, origin/master, origin/HEAD, gigopogo/fix-cse, master) HEAD@{0}: reset: moving to HEAD~1
+25755a4c HEAD@{1}: commit: Version 1
+e00e5f28 (HEAD -> fix-cse, origin/master, origin/HEAD, gigopogo/fix-cse, master) HEAD@{2}: reset: moving to master
+7a6fcb7d (gigopogo/fix/cse-layout-machine) HEAD@{3}: checkout: moving from master to fix-cse
+e00e5f28 (HEAD -> fix-cse, origin/master, origin/HEAD, gigopogo/fix-cse, master) HEAD@{4}: commit: Fixed the error where the frames WERE not moving due to the Layout team's invariant!
+99f83010 HEAD@{5}: commit: Fixed the sentry bot suggestion
+2ef3c484 HEAD@{6}: commit: Fixed tsc error
+50f2b774 HEAD@{7}: pull: Fast-forward
+d6c68817 HEAD@{8}: pull --rebase origin master (finish): returning to refs/heads/master
+d6c68817 HEAD@{9}: pull --rebase origin master (pick): Fixed the following errors and implemented suggestions
+26345cb6 HEAD@{10}: pull --rebase origin master (start): checkout 26345cb6b61bda45de0f47c64edef54e2dc4cfc8
+b12755a3 HEAD@{11}: commit: Fixed the following errors and implemented suggestions
+44e1f30c HEAD@{12}: checkout: moving from fix-cse to master
+7a6fcb7d (gigopogo/fix/cse-layout-machine) HEAD@{13}: reset: moving to HEAD
+7a6fcb7d (gigopogo/fix/cse-layout-machine) HEAD@{14}: checkout: moving from master to fix-cse
+44e1f30c HEAD@{15}: commit: Changed from Hide -> Clear and the icon
+2c3897cd HEAD@{16}: checkout: moving from Hulk_fix to master
+953df696 (Hulk_fix) HEAD@{17}: commit: Fixed the formatting!
+d9ce60bf HEAD@{18}: pull: Fast-forward
+039f07de HEAD@{19}: reset: moving to HEAD
+039f07de HEAD@{20}: commit: Hulk Fix!
+5e84b1d7 (upstream/master) HEAD@{21}: Branch: renamed refs/heads/backup-branch to refs/heads/Hulk_fix
+5e84b1d7 (upstream/master) HEAD@{23}: reset: moving to upstream/master
+3b75e828 HEAD@{24}: merge upstream/master: Merge made by the 'ort' strategy.
+22d7859d HEAD@{25}: checkout: moving from master to backup-branch
+2c3897cd HEAD@{26}: commit: Fix : Toggle -> One time cleanup
+39a1ac0e HEAD@{27}: commit: Fix : CI format errors and made it from checkbox -> onClick button!
+321f22df HEAD@{28}: commit: Fix : Removed gaps
+f02260af HEAD@{29}: commit: Added the functionality for toggle of dead vs ONLY live for
+baebfb5f HEAD@{30}: merge backup-branch: Merge made by the 'ort' strategy.
+5e84b1d7 (upstream/master) HEAD@{31}: reset: moving to upstream/master
+22d7859d HEAD@{32}: checkout: moving from backup-branch to master
+22d7859d HEAD@{33}: checkout: moving from master to backup-branch
+22d7859d HEAD@{34}: commit: Added the removeDeadFrames feature
+3908dbea HEAD@{35}: reset: moving to upstream/master
+5e84b1d7 (upstream/master) HEAD@{36}: reset: moving to HEAD
+5e84b1d7 (upstream/master) HEAD@{37}: pull: Fast-forward
+96ce8d89 (gigopogo/master) HEAD@{38}: checkout: moving from shortCircuitFix/master to master
+176f3107 (origin/shortCircuitFix/master) HEAD@{39}: commit: Fixed the SENTRY bot error
+0e03ed5a HEAD@{40}: commit: Fixed the issue described at #3574
+3908dbea HEAD@{41}: reset: moving to upstream/master
+96ce8d89 (gigopogo/master) HEAD@{42}: checkout: moving from master to shortCircuitFix/master
+96ce8d89 (gigopogo/master) HEAD@{43}: reset: moving to upstream/master
+8fb394fe HEAD@{44}: reset: moving to origin/master
+35fd4244 HEAD@{45}: checkout: moving from pr-3575 to master
+d406e33d (upstream/partial-revert-3570) HEAD@{46}: checkout: moving from master to pr-3575
+35fd4244 HEAD@{47}: checkout: moving from pr-3575 to master
+d406e33d (upstream/partial-revert-3570) HEAD@{48}: checkout: moving from master to pr-3575
+35fd4244 HEAD@{49}: checkout: moving from pr-3575 to master
+d406e33d (upstream/partial-revert-3570) HEAD@{50}: checkout: moving from fix/liveness-clean to pr-3575
+35fd4244 HEAD@{51}: checkout: moving from master to fix/liveness-clean
+35fd4244 HEAD@{52}: reset: moving to upstream/master
+8fb394fe HEAD@{53}: rebase (abort): returning to refs/heads/master
+35fd4244 HEAD@{54}: pull --rebase upstream master (start): checkout 35fd42446edc8775d4aee2013dccda960875e750
+8fb394fe HEAD@{55}: checkout: moving from master to master
+8fb394fe HEAD@{56}: commit: CI errors fixed commit TRIAL
+0a39954d HEAD@{57}: commit: Fixed and removed all the needless import statements and other errors in seperate files!
+132b52b6 HEAD@{58}: commit: CI errors for formatting fixed
+391f6c4a HEAD@{59}: commit: Fixed the yarn.lock file according to the CI dependencies and req
+6b32f2b4 HEAD@{60}: commit: yarn test fail errors in CI FIXED
+a3c12ce3 HEAD@{61}: checkout: moving from master to master
+a3c12ce3 HEAD@{62}: commit: Fixed the CI yarn test AUTO errors on Nav Bar
+560b326c HEAD@{63}: commit: PR CI auto yarn TEST conflict RESOLVED
+a13e801b HEAD@{64}: reset: moving to HEAD~1
+dfc9e353 HEAD@{65}: commit: Fixed yarn test CI auto errors for PR conflicts
+a13e801b HEAD@{66}: checkout: moving from master to master
+a13e801b HEAD@{67}: commit (merge): PR Merge Conflic RESOLVE
+e0e3308e HEAD@{68}: pull: Fast-forward
+f1f853c6 HEAD@{69}: commit: Final_Draft-I PR - I
+4d01e792 HEAD@{70}: reset: moving to HEAD
+4d01e792 HEAD@{71}: reset: moving to HEAD
+4d01e792 HEAD@{72}: commit: Week 5 Pt 1 BUG FIX
+6790c5b7 HEAD@{73}: reset: moving to HEAD
+6790c5b7 HEAD@{74}: commit: Week 4 Pt III
+43447418 HEAD@{75}: commit: WEEK - 4 Pt II
+42ff8a64 HEAD@{76}: commit (amend): WEEK 4
+33c788d4 HEAD@{77}: commit: This commit made the following changes
+d90d96fa HEAD@{78}: pull: Fast-forward
+902b5eb6 HEAD@{79}: commit: WEEK - 3
+013fd0a9 HEAD@{80}: clone: from https://github.com/Akshay-2007-1/CSE_liveness_frontend.git
diff --git a/src/features/cseMachine/CseMachine.tsx b/src/features/cseMachine/CseMachine.tsx
index 30bc4a32e9..5e234e5880 100644
--- a/src/features/cseMachine/CseMachine.tsx
+++ b/src/features/cseMachine/CseMachine.tsx
@@ -129,7 +129,7 @@ export default class CseMachine {
     }
 
     // Apply Fixed Positions
-    if (CseMachine.masterLayout) {
+    if (CseMachine.masterLayout && !CseMachine.getPrintableMode()) {
       Layout.applyFixedPositions();
     }
     this.setVis(Layout.draw());
@@ -144,7 +144,7 @@ export default class CseMachine {
       // if center alignment is toggled, change the alignment and redraw the diagram with new coordinates
       if (this.centerAlignmentToggled) {
         Layout.setContext(CseMachine.environmentTree, CseMachine.control, CseMachine.stash);
-        if (CseMachine.masterLayout) {
+        if (CseMachine.masterLayout && !CseMachine.getPrintableMode()) {
           Layout.applyFixedPositions();
         }
         this.setVis(Layout.draw());
@@ -193,7 +193,7 @@ export default class CseMachine {
         this.setVis(Layout.currentDark);
       } else {
         Layout.setContext(CseMachine.environmentTree, CseMachine.control, CseMachine.stash);
-        if (CseMachine.masterLayout) {
+        if (CseMachine.masterLayout && !CseMachine.getPrintableMode()) {
           Layout.applyFixedPositions();
         }
         this.setVis(Layout.draw());
diff --git a/src/features/cseMachine/CseMachineLayout.tsx b/src/features/cseMachine/CseMachineLayout.tsx
index 925f58f5f2..a042bb9e7b 100644
--- a/src/features/cseMachine/CseMachineLayout.tsx
+++ b/src/features/cseMachine/CseMachineLayout.tsx
@@ -682,7 +682,7 @@ export class Layout {
    * @returns coordinate of cached position, or undefined if it doesn't exist
    */
   static getGhostFrameX(envId: string): number | undefined {
-    if (Layout.clearDeadFrames) {
+    if (Layout.clearDeadFrames || CseMachine.getPrintableMode()) {
       return undefined;
     }
     const cache = CseMachine.masterLayout;
diff --git a/src/features/cseMachine/components/Binding.tsx b/src/features/cseMachine/components/Binding.tsx
index 9c3485f7d3..c2867bc3ca 100644
--- a/src/features/cseMachine/components/Binding.tsx
+++ b/src/features/cseMachine/components/Binding.tsx
@@ -69,6 +69,13 @@ export class Binding extends Visible {
     this.keyYOffset = keyYOffset;
     this.key = new Text(this.keyString, this.x(), this.y() + keyYOffset, { faded: !this.isLive });
 
+    const printFnDescriptionWidth =
+      CseMachine.getPrintableMode() &&
+      isMainReference(this.value, this) &&
+      (this.value instanceof FnValue || this.value instanceof GlobalFnValue)
+        ? this.value.exportTooltipWidth + Config.FnTooltipTextPadding * 2 + Config.TextMargin
+        : 0;
+
     const printFnDescriptionHeight =
       CseMachine.getPrintableMode() &&
       isMainReference(this.value, this) &&
@@ -85,7 +92,7 @@ export class Binding extends Visible {
         this.value instanceof ContValue
           ? CseMachine.getPrintableMode() &&
             (this.value instanceof FnValue || this.value instanceof GlobalFnValue)
-            ? 0
+            ? printFnDescriptionWidth
             : this.value.tooltipWidth
           : 0)
       : this.key.width();
diff --git a/src/features/cseMachine/components/values/FnValue.tsx b/src/features/cseMachine/components/values/FnValue.tsx
index 0311128b41..5a00c09d13 100644
--- a/src/features/cseMachine/components/values/FnValue.tsx
+++ b/src/features/cseMachine/components/values/FnValue.tsx
@@ -200,11 +200,13 @@ export class FnValue extends Value implements IHoverable {
         </Group>
         <KonvaLabel
           x={
-            CseMachine.getPrintableMode() ? this.centerX - this.radius : this.x() + this.width() + Config.TextPaddingX * 2
+            CseMachine.getPrintableMode()
+              ? this.x() + Config.TextMargin
+              : this.x() + this.width() + Config.TextPaddingX * 2
           }
           y={
             CseMachine.getPrintableMode()
-              ? this.y() + this.radius + Config.TextPaddingY / 3
+              ? this.y() + this.radius + Config.TextMargin
               : this.y() - Config.TextPaddingY
           }
           visible={CseMachine.getPrintableMode()}
diff --git a/src/features/cseMachine/components/values/GlobalFnValue.tsx b/src/features/cseMachine/components/values/GlobalFnValue.tsx
index 2368d0dcd7..95c13203c7 100644
--- a/src/features/cseMachine/components/values/GlobalFnValue.tsx
+++ b/src/features/cseMachine/components/values/GlobalFnValue.tsx
@@ -157,11 +157,13 @@ export class GlobalFnValue extends Value implements IHoverable {
         </Group>
         <KonvaLabel
           x={
-            CseMachine.getPrintableMode() ? this.centerX - this.radius : this.x() + this.width() + Config.TextPaddingX * 2
+            CseMachine.getPrintableMode()
+              ? this.x() + Config.TextMargin
+              : this.x() + this.width() + Config.TextPaddingX * 2
           }
           y={
             CseMachine.getPrintableMode()
-              ? this.y() + this.radius + Config.TextPaddingY / 3
+              ? this.y() + this.radius + Config.TextMargin
               : this.y() - Config.TextPaddingY
           }
           visible={CseMachine.getPrintableMode()}

From 492dc912f7108b92e16da93160596743ea0d1796 Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Tue, 3 Mar 2026 22:23:30 +0800
Subject: [PATCH 13/26] Added the following functionalities 1. Capped out the
 func desc box's widths 2. Click to reveal FULL length descriptions in normal
 mode 3. Fixed gaps between the FRAMES in PRINTABLE mode

---
 src/features/cseMachine/CseMachine.tsx        |  6 +-
 src/features/cseMachine/CseMachineConfig.ts   |  3 +
 src/features/cseMachine/CseMachineLayout.tsx  |  2 +-
 .../cseMachine/components/Binding.tsx         | 10 +-
 .../cseMachine/components/values/FnValue.tsx  | 99 ++++++++++++++-----
 .../components/values/GlobalFnValue.tsx       | 99 ++++++++++++++-----
 6 files changed, 163 insertions(+), 56 deletions(-)

diff --git a/src/features/cseMachine/CseMachine.tsx b/src/features/cseMachine/CseMachine.tsx
index 5e234e5880..30bc4a32e9 100644
--- a/src/features/cseMachine/CseMachine.tsx
+++ b/src/features/cseMachine/CseMachine.tsx
@@ -129,7 +129,7 @@ export default class CseMachine {
     }
 
     // Apply Fixed Positions
-    if (CseMachine.masterLayout && !CseMachine.getPrintableMode()) {
+    if (CseMachine.masterLayout) {
       Layout.applyFixedPositions();
     }
     this.setVis(Layout.draw());
@@ -144,7 +144,7 @@ export default class CseMachine {
       // if center alignment is toggled, change the alignment and redraw the diagram with new coordinates
       if (this.centerAlignmentToggled) {
         Layout.setContext(CseMachine.environmentTree, CseMachine.control, CseMachine.stash);
-        if (CseMachine.masterLayout && !CseMachine.getPrintableMode()) {
+        if (CseMachine.masterLayout) {
           Layout.applyFixedPositions();
         }
         this.setVis(Layout.draw());
@@ -193,7 +193,7 @@ export default class CseMachine {
         this.setVis(Layout.currentDark);
       } else {
         Layout.setContext(CseMachine.environmentTree, CseMachine.control, CseMachine.stash);
-        if (CseMachine.masterLayout && !CseMachine.getPrintableMode()) {
+        if (CseMachine.masterLayout) {
           Layout.applyFixedPositions();
         }
         this.setVis(Layout.draw());
diff --git a/src/features/cseMachine/CseMachineConfig.ts b/src/features/cseMachine/CseMachineConfig.ts
index c91048cfcf..67663e702b 100644
--- a/src/features/cseMachine/CseMachineConfig.ts
+++ b/src/features/cseMachine/CseMachineConfig.ts
@@ -20,6 +20,9 @@ export const Config = Object.freeze({
   FnInnerRadius: 3,
   FnTooltipOpacity: 0.3,
   FnTooltipTextPadding: 5,
+  FnDescriptionMaxWidth: 150,
+  FnDescriptionMaxHeight: 60,
+  FnDescriptionRevealOffsetY: 8,
 
   DataMinWidth: 20,
   DataUnitWidth: 40,
diff --git a/src/features/cseMachine/CseMachineLayout.tsx b/src/features/cseMachine/CseMachineLayout.tsx
index a042bb9e7b..925f58f5f2 100644
--- a/src/features/cseMachine/CseMachineLayout.tsx
+++ b/src/features/cseMachine/CseMachineLayout.tsx
@@ -682,7 +682,7 @@ export class Layout {
    * @returns coordinate of cached position, or undefined if it doesn't exist
    */
   static getGhostFrameX(envId: string): number | undefined {
-    if (Layout.clearDeadFrames || CseMachine.getPrintableMode()) {
+    if (Layout.clearDeadFrames) {
       return undefined;
     }
     const cache = CseMachine.masterLayout;
diff --git a/src/features/cseMachine/components/Binding.tsx b/src/features/cseMachine/components/Binding.tsx
index c2867bc3ca..844d37064a 100644
--- a/src/features/cseMachine/components/Binding.tsx
+++ b/src/features/cseMachine/components/Binding.tsx
@@ -69,11 +69,10 @@ export class Binding extends Visible {
     this.keyYOffset = keyYOffset;
     this.key = new Text(this.keyString, this.x(), this.y() + keyYOffset, { faded: !this.isLive });
 
-    const printFnDescriptionWidth =
-      CseMachine.getPrintableMode() &&
+    const fnDescriptionReservedWidth =
       isMainReference(this.value, this) &&
       (this.value instanceof FnValue || this.value instanceof GlobalFnValue)
-        ? this.value.exportTooltipWidth + Config.FnTooltipTextPadding * 2 + Config.TextMargin
+        ? Config.FnDescriptionMaxWidth + Config.FnTooltipTextPadding * 2 + Config.TextMargin
         : 0;
 
     const printFnDescriptionHeight =
@@ -90,9 +89,8 @@ export class Binding extends Visible {
         (this.value instanceof FnValue ||
         this.value instanceof GlobalFnValue ||
         this.value instanceof ContValue
-          ? CseMachine.getPrintableMode() &&
-            (this.value instanceof FnValue || this.value instanceof GlobalFnValue)
-            ? printFnDescriptionWidth
+          ? this.value instanceof FnValue || this.value instanceof GlobalFnValue
+            ? fnDescriptionReservedWidth
             : this.value.tooltipWidth
           : 0)
       : this.key.width();
diff --git a/src/features/cseMachine/components/values/FnValue.tsx b/src/features/cseMachine/components/values/FnValue.tsx
index 5a00c09d13..0716553341 100644
--- a/src/features/cseMachine/components/values/FnValue.tsx
+++ b/src/features/cseMachine/components/values/FnValue.tsx
@@ -20,11 +20,13 @@ import {
   fadedTextColor,
   getBodyText,
   getParamsText,
+  getTextHeight,
   getTextWidth,
   isMainReference,
   isStreamFn,
   setHoveredCursor,
-  setUnhoveredCursor
+  setUnhoveredCursor,
+  truncateText
 } from '../../CseMachineUtils';
 import { ArrowFromFn } from '../arrows/ArrowFromFn';
 import { Binding } from '../Binding';
@@ -46,14 +48,17 @@ export class FnValue extends Value implements IHoverable {
   readonly tooltipWidth: number;
   readonly exportTooltip: string;
   readonly exportTooltipWidth: number;
+  readonly isTooltipTruncated: boolean;
   readonly printDescriptionHeight: number;
 
   /** width of the closure circles + label */
   readonly totalWidth: number;
   readonly labelRef: RefObject<Label> = React.createRef();
+  readonly revealLabelRef: RefObject<Label> = React.createRef();
 
   centerX: number;
   enclosingFrame?: Frame;
+  private isExpandedDescription: boolean = false;
   private _arrow: ArrowFromFn | undefined;
 
   constructor(
@@ -79,19 +84,25 @@ export class FnValue extends Value implements IHoverable {
         .slice(0, 2)
         .join('\n') + ' ...';
     this.tooltip = `${this.paramsText}\n${this.bodyText}`;
-    this.exportTooltip = `${this.paramsText}\n${this.exportBodyText}`;
+    this.exportTooltip = truncateText(
+      this.tooltip,
+      Config.FnDescriptionMaxWidth,
+      Config.FnDescriptionMaxHeight
+    );
+    this.isTooltipTruncated = this.exportTooltip !== this.tooltip;
     this.tooltipWidth = Math.max(getTextWidth(this.paramsText), getTextWidth(this.bodyText));
-    this.exportTooltipWidth = Math.max(
-      getTextWidth(this.paramsText),
-      getTextWidth(this.exportBodyText)
+    this.exportTooltipWidth = Math.min(
+      Config.FnDescriptionMaxWidth,
+      getTextWidth(this.exportTooltip)
     );
     this.printDescriptionHeight =
-      this.exportTooltip.split('\n').length * Config.FontSize + Config.FnTooltipTextPadding * 2;
+      getTextHeight(this.exportTooltip, Config.FnDescriptionMaxWidth) +
+      Config.FnTooltipTextPadding * 2;
     this.totalWidth =
       this._width +
-      Config.TextPaddingX * 2 +
-      10 +
-      (CseMachine.getPrintableMode() ? 0 : this.tooltipWidth);
+      Config.TextMargin +
+      Config.FnDescriptionMaxWidth +
+      Config.FnTooltipTextPadding * 2;
 
     this.addReference(firstReference);
   }
@@ -129,14 +140,32 @@ export class FnValue extends Value implements IHoverable {
   onMouseEnter = ({ currentTarget }: KonvaEventObject<MouseEvent>) => {
     if (CseMachine.getPrintableMode()) return;
     setHoveredCursor(currentTarget);
-    this.labelRef.current?.moveToTop();
-    this.labelRef.current?.show();
+    if (this.isExpandedDescription && this.isTooltipTruncated) {
+      this.labelRef.current?.hide();
+      this.revealLabelRef.current?.moveToTop();
+      this.revealLabelRef.current?.show();
+    } else {
+      this.revealLabelRef.current?.hide();
+      this.labelRef.current?.moveToTop();
+      this.labelRef.current?.show();
+    }
   };
 
   onMouseLeave = ({ currentTarget }: KonvaEventObject<MouseEvent>) => {
     if (CseMachine.getPrintableMode()) return;
     setUnhoveredCursor(currentTarget);
+    this.isExpandedDescription = false;
     this.labelRef.current?.hide();
+    this.revealLabelRef.current?.hide();
+  };
+
+  onClick = ({ currentTarget }: KonvaEventObject<MouseEvent>) => {
+    if (CseMachine.getPrintableMode() || !this.isTooltipTruncated) return;
+    this.isExpandedDescription = true;
+    this.labelRef.current?.hide();
+    this.revealLabelRef.current?.moveToTop();
+    this.revealLabelRef.current?.show();
+    currentTarget.getLayer()?.batchDraw();
   };
 
   isLive(): boolean {
@@ -164,7 +193,12 @@ export class FnValue extends Value implements IHoverable {
     }
     return (
       <React.Fragment key={Layout.key++}>
-        <Group onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} ref={this.ref}>
+        <Group
+          onMouseEnter={this.onMouseEnter}
+          onMouseLeave={this.onMouseLeave}
+          onClick={this.onClick}
+          ref={this.ref}
+        >
           <Circle
             {...ShapeDefaultProps}
             key={Layout.key++}
@@ -199,16 +233,8 @@ export class FnValue extends Value implements IHoverable {
           />
         </Group>
         <KonvaLabel
-          x={
-            CseMachine.getPrintableMode()
-              ? this.x() + Config.TextMargin
-              : this.x() + this.width() + Config.TextPaddingX * 2
-          }
-          y={
-            CseMachine.getPrintableMode()
-              ? this.y() + this.radius + Config.TextMargin
-              : this.y() - Config.TextPaddingY
-          }
+          x={this.x() + Config.TextMargin}
+          y={this.y() + this.radius + Config.TextMargin}
           visible={CseMachine.getPrintableMode()}
           ref={this.labelRef}
         >
@@ -222,14 +248,41 @@ export class FnValue extends Value implements IHoverable {
             />
           )}
           <KonvaText
-            text={CseMachine.getPrintableMode() ? this.exportTooltip : this.tooltip}
+            text={
+              !CseMachine.getPrintableMode() && this.isTooltipTruncated
+                ? `${this.exportTooltip}\n(click for full)`
+                : this.exportTooltip
+            }
             fontFamily={Config.FontFamily}
             fontSize={Config.FontSize}
             fontStyle={Config.FontStyle}
             fill={textColor} //even the text that appears on hover is faded if unreferenced
             padding={Config.FnTooltipTextPadding}
+            width={Config.FnDescriptionMaxWidth}
           />
         </KonvaLabel>
+        {!CseMachine.getPrintableMode() && this.isTooltipTruncated && (
+          <KonvaLabel
+            x={this.x() + Config.TextMargin}
+            y={this.y() + this.radius + Config.TextMargin}
+            visible={false}
+            ref={this.revealLabelRef}
+          >
+            <KonvaTag
+              stroke={Config.HoverBgColor}
+              fill={Config.HoverBgColor}
+              opacity={Config.FnTooltipOpacity}
+            />
+            <KonvaText
+              text={this.tooltip}
+              fontFamily={Config.FontFamily}
+              fontSize={Config.FontSize}
+              fontStyle={Config.FontStyle}
+              fill={textColor}
+              padding={Config.FnTooltipTextPadding}
+            />
+          </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 95c13203c7..70a3bfa1b2 100644
--- a/src/features/cseMachine/components/values/GlobalFnValue.tsx
+++ b/src/features/cseMachine/components/values/GlobalFnValue.tsx
@@ -20,9 +20,11 @@ import {
   fadedTextColor,
   getBodyText,
   getParamsText,
+  getTextHeight,
   getTextWidth,
   setHoveredCursor,
-  setUnhoveredCursor
+  setUnhoveredCursor,
+  truncateText
 } from '../../CseMachineUtils';
 import { ArrowFromFn } from '../arrows/ArrowFromFn';
 import { Binding } from '../Binding';
@@ -40,11 +42,14 @@ export class GlobalFnValue extends Value implements IHoverable {
   readonly tooltipWidth: number;
   readonly exportTooltip: string;
   readonly exportTooltipWidth: number;
+  readonly isTooltipTruncated: boolean;
   readonly printDescriptionHeight: number;
   readonly totalWidth: number;
   readonly labelRef: RefObject<Label> = React.createRef();
+  readonly revealLabelRef: RefObject<Label> = React.createRef();
 
   centerX: number;
+  private isExpandedDescription: boolean = false;
   private _arrow: ArrowFromFn | undefined;
 
   constructor(
@@ -76,19 +81,25 @@ export class GlobalFnValue extends Value implements IHoverable {
         .slice(0, 2)
         .join('\n') + ' ...';
     this.tooltip = `${this.paramsText}\n${this.bodyText}`;
-    this.exportTooltip = `${this.paramsText}\n${this.exportBodyText}`;
+    this.exportTooltip = truncateText(
+      this.tooltip,
+      Config.FnDescriptionMaxWidth,
+      Config.FnDescriptionMaxHeight
+    );
+    this.isTooltipTruncated = this.exportTooltip !== this.tooltip;
     this.tooltipWidth = Math.max(getTextWidth(this.paramsText), getTextWidth(this.bodyText));
-    this.exportTooltipWidth = Math.max(
-      getTextWidth(this.paramsText),
-      getTextWidth(this.exportBodyText)
+    this.exportTooltipWidth = Math.min(
+      Config.FnDescriptionMaxWidth,
+      getTextWidth(this.exportTooltip)
     );
     this.printDescriptionHeight =
-      this.exportTooltip.split('\n').length * Config.FontSize + Config.FnTooltipTextPadding * 2;
+      getTextHeight(this.exportTooltip, Config.FnDescriptionMaxWidth) +
+      Config.FnTooltipTextPadding * 2;
     this.totalWidth =
       this._width +
-      Config.TextPaddingX * 2 +
-      Config.FnTooltipTextPadding * 2 +
-      (CseMachine.getPrintableMode() ? 0 : this.tooltipWidth);
+      Config.TextMargin +
+      Config.FnDescriptionMaxWidth +
+      Config.FnTooltipTextPadding * 2;
 
     this.addReference(mainReference);
   }
@@ -102,14 +113,32 @@ export class GlobalFnValue extends Value implements IHoverable {
   onMouseEnter = ({ currentTarget }: KonvaEventObject<MouseEvent>) => {
     if (CseMachine.getPrintableMode()) return;
     setHoveredCursor(currentTarget);
-    this.labelRef.current?.moveToTop();
-    this.labelRef.current?.show();
+    if (this.isExpandedDescription && this.isTooltipTruncated) {
+      this.labelRef.current?.hide();
+      this.revealLabelRef.current?.moveToTop();
+      this.revealLabelRef.current?.show();
+    } else {
+      this.revealLabelRef.current?.hide();
+      this.labelRef.current?.moveToTop();
+      this.labelRef.current?.show();
+    }
   };
 
   onMouseLeave = ({ currentTarget }: KonvaEventObject<MouseEvent>) => {
     if (CseMachine.getPrintableMode()) return;
     setUnhoveredCursor(currentTarget);
+    this.isExpandedDescription = false;
+    this.labelRef.current?.hide();
+    this.revealLabelRef.current?.hide();
+  };
+
+  onClick = ({ currentTarget }: KonvaEventObject<MouseEvent>) => {
+    if (CseMachine.getPrintableMode() || !this.isTooltipTruncated) return;
+    this.isExpandedDescription = true;
     this.labelRef.current?.hide();
+    this.revealLabelRef.current?.moveToTop();
+    this.revealLabelRef.current?.show();
+    currentTarget.getLayer()?.batchDraw();
   };
 
   draw(): React.ReactNode {
@@ -121,7 +150,12 @@ export class GlobalFnValue extends Value implements IHoverable {
     const strokeColor = this.isReferenced() ? defaultStrokeColor() : fadedStrokeColor();
     return (
       <React.Fragment key={Layout.key++}>
-        <Group onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} ref={this.ref}>
+        <Group
+          onMouseEnter={this.onMouseEnter}
+          onMouseLeave={this.onMouseLeave}
+          onClick={this.onClick}
+          ref={this.ref}
+        >
           <Circle
             {...ShapeDefaultProps}
             key={Layout.key++}
@@ -156,16 +190,8 @@ export class GlobalFnValue extends Value implements IHoverable {
           />
         </Group>
         <KonvaLabel
-          x={
-            CseMachine.getPrintableMode()
-              ? this.x() + Config.TextMargin
-              : this.x() + this.width() + Config.TextPaddingX * 2
-          }
-          y={
-            CseMachine.getPrintableMode()
-              ? this.y() + this.radius + Config.TextMargin
-              : this.y() - Config.TextPaddingY
-          }
+          x={this.x() + Config.TextMargin}
+          y={this.y() + this.radius + Config.TextMargin}
           visible={CseMachine.getPrintableMode()}
           ref={this.labelRef}
         >
@@ -179,14 +205,41 @@ export class GlobalFnValue extends Value implements IHoverable {
             />
           )}
           <KonvaText
-            text={CseMachine.getPrintableMode() ? this.exportTooltip : this.tooltip}
+            text={
+              !CseMachine.getPrintableMode() && this.isTooltipTruncated
+                ? `${this.exportTooltip}\n(click for full)`
+                : this.exportTooltip
+            }
             fontFamily={Config.FontFamily}
             fontSize={Config.FontSize}
             fontStyle={Config.FontStyle}
             fill={textColor}
             padding={Config.FnTooltipTextPadding}
+            width={Config.FnDescriptionMaxWidth}
           />
         </KonvaLabel>
+        {!CseMachine.getPrintableMode() && this.isTooltipTruncated && (
+          <KonvaLabel
+            x={this.x() + Config.TextMargin}
+            y={this.y() + this.radius + Config.TextMargin}
+            visible={false}
+            ref={this.revealLabelRef}
+          >
+            <KonvaTag
+              stroke={Config.HoverBgColor}
+              fill={Config.HoverBgColor}
+              opacity={Config.FnTooltipOpacity}
+            />
+            <KonvaText
+              text={this.tooltip}
+              fontFamily={Config.FontFamily}
+              fontSize={Config.FontSize}
+              fontStyle={Config.FontStyle}
+              fill={textColor}
+              padding={Config.FnTooltipTextPadding}
+            />
+          </KonvaLabel>
+        )}
         {this._arrow?.draw()}
       </React.Fragment>
     );

From 7b32eb4e4bd4a906c30a69e1a081b2f98c15e62d Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Tue, 3 Mar 2026 23:32:08 +0800
Subject: [PATCH 14/26] Fixed a bug where the gap between two frames was not
 dynamically being set and was capped out! 1. This makes every other test case
 which we have made look MUCH better! 2. Secondly, we also fixed a bug where
 recursive closure objects' description boxes' width and length was NOT being 
 accounted for

---
 src/features/cseMachine/components/Frame.tsx  | 27 +++++++++++++++++++
 .../components/values/ArrayValue.tsx          | 20 +++++++++++---
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/features/cseMachine/components/Frame.tsx b/src/features/cseMachine/components/Frame.tsx
index 5f6fb32f01..325b2a904d 100644
--- a/src/features/cseMachine/components/Frame.tsx
+++ b/src/features/cseMachine/components/Frame.tsx
@@ -15,6 +15,7 @@ import {
   isClosure,
   isDataArray,
   isDummyKey,
+  isMainReference,
   isPrimitiveData,
   isSourceObject,
   isUnassigned
@@ -25,6 +26,10 @@ import { GenericArrow } from './arrows/GenericArrow';
 import { Binding } from './Binding';
 import { Level } from './Level';
 import { Text } from './Text';
+import { ArrayValue } from './values/ArrayValue';
+import { ContValue } from './values/ContValue';
+import { FnValue } from './values/FnValue';
+import { GlobalFnValue } from './values/GlobalFnValue';
 import { Visible } from './Visible';
 
 const frameNames = new Map([
@@ -242,6 +247,28 @@ export class Frame extends Visible implements IHoverable {
       this.bindings.push(currBinding);
       totalWidth = Math.max(totalWidth, currBinding.width() + Config.FramePaddingX);
     }
+
+    // Post-process using actual created values to get robust spacing for nested arrays/functions.
+    const frameRightX = this.x() + this.width();
+    for (const binding of this.bindings) {
+      const value = binding.value;
+      if (!isMainReference(value, binding)) continue;
+
+      let valueRightX: number | undefined;
+      if (value instanceof ArrayValue) {
+        valueRightX = value.x() + value.totalWidth;
+      } else if (value instanceof FnValue || value instanceof GlobalFnValue) {
+        valueRightX = value.x() + value.totalWidth;
+      } else if (value instanceof ContValue) {
+        valueRightX = value.x() + value.width() + value.tooltipWidth;
+      }
+
+      if (valueRightX !== undefined) {
+        const overflow = Math.max(0, valueRightX - frameRightX);
+        this.totalDataWidth = Math.max(this.totalDataWidth, overflow);
+      }
+    }
+
     this.totalWidth = totalWidth;
 
     // derive the height of the frame from the the position of the last binding
diff --git a/src/features/cseMachine/components/values/ArrayValue.tsx b/src/features/cseMachine/components/values/ArrayValue.tsx
index 6eebb89e28..8f392b6a03 100644
--- a/src/features/cseMachine/components/values/ArrayValue.tsx
+++ b/src/features/cseMachine/components/values/ArrayValue.tsx
@@ -2,6 +2,7 @@ import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
 import { Group } from 'react-konva';
 
+import CseMachine from '../../CseMachine';
 import { Config } from '../../CseMachineConfig';
 import { Layout } from '../../CseMachineLayout';
 import { DataArray, IHoverable, ReferenceType } from '../../CseMachineTypes';
@@ -11,6 +12,7 @@ import { ArrayUnit } from '../ArrayUnit';
 import { Binding } from '../Binding';
 import { Frame } from '../Frame';
 import { FnValue } from './FnValue';
+import { GlobalFnValue } from './GlobalFnValue';
 import { Value } from './Value';
 
 /** this class encapsulates an array value in source,
@@ -71,9 +73,21 @@ export class ArrayValue extends Value implements IHoverable {
 
       // Update total width and height for values that are drawn next to the array
       if (
-        (unit.value instanceof ArrayValue || unit.value instanceof FnValue) &&
+        (unit.value instanceof ArrayValue ||
+          unit.value instanceof FnValue ||
+          unit.value instanceof GlobalFnValue) &&
         isMainReference(unit.value, unit)
       ) {
+        const bottomY =
+          unit.value instanceof ArrayValue
+            ? unit.value.y() + unit.value.totalHeight
+            : CseMachine.getPrintableMode()
+              ? unit.value.y() +
+                Config.FnRadius +
+                Config.TextMargin +
+                unit.value.printDescriptionHeight
+              : unit.value.y() + unit.value.height() / 2;
+
         this.totalWidth = Math.max(
           this.totalWidth,
           unit.value.totalWidth +
@@ -81,9 +95,7 @@ export class ArrayValue extends Value implements IHoverable {
         );
         this.totalHeight = Math.max(
           this.totalHeight,
-          unit.value.y() +
-            (unit.value instanceof ArrayValue ? unit.value.totalHeight : unit.value.height() / 2) -
-            unit.y()
+          bottomY - unit.y()
         );
       }
 

From d4de2c8e93512bc033d23bdfb161319f3d92dbf2 Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Wed, 4 Mar 2026 22:49:55 +0800
Subject: [PATCH 15/26] Fixed format error

---
 src/features/cseMachine/components/values/ArrayValue.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/features/cseMachine/components/values/ArrayValue.tsx b/src/features/cseMachine/components/values/ArrayValue.tsx
index 8f392b6a03..4e3b4cf5a1 100644
--- a/src/features/cseMachine/components/values/ArrayValue.tsx
+++ b/src/features/cseMachine/components/values/ArrayValue.tsx
@@ -93,10 +93,7 @@ export class ArrayValue extends Value implements IHoverable {
           unit.value.totalWidth +
             (i === this.data.length - 1 ? (i + 2) * Config.DataUnitWidth : i * Config.DataUnitWidth)
         );
-        this.totalHeight = Math.max(
-          this.totalHeight,
-          bottomY - unit.y()
-        );
+        this.totalHeight = Math.max(this.totalHeight, bottomY - unit.y());
       }
 
       this.units[i] = unit;

From 547101ee384e2f03ff39c89c55603c5dfd16ec44 Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Thu, 5 Mar 2026 14:36:54 +0800
Subject: [PATCH 16/26] cse layout: normalize frame width accounting and add
 printable fn description spacing

- normalize Frame width semantics:
  - totalWidth now represents only frame block width
  - totalDataWidth is computed as true overflow beyond frame right edge
  - remove pre-estimation path that double-counted spacing in some cases
- update Level width derivation to include last frame totalDataWidth
- improve printable mode readability for function descriptions:
  - add small vertical offset above printable fn description labels
  - add tiny bottom gap below printable fn description boxes
  - propagate new spacing to Binding and ArrayValue height calculations

This reduces excessive horizontal gaps and mitigates small printable-mode overlaps between fn description boxes
and nearby array/binding content.
Also removed the excess frame offset width given for safety that was NOT dynamic!
So now, the frame width gapping is dynamic!
---
 src/features/cseMachine/CseMachine.tsx        | 41 +++++++----
 src/features/cseMachine/CseMachineLayout.tsx  |  6 +-
 .../cseMachine/components/Binding.tsx         | 20 ++----
 src/features/cseMachine/components/Frame.tsx  | 71 ++-----------------
 src/features/cseMachine/components/Level.tsx  |  5 +-
 .../components/values/ArrayValue.tsx          | 13 +++-
 .../cseMachine/components/values/FnValue.tsx  |  8 ++-
 .../components/values/GlobalFnValue.tsx       |  8 ++-
 src/pages/playground/Playground.tsx           |  2 +-
 9 files changed, 68 insertions(+), 106 deletions(-)

diff --git a/src/features/cseMachine/CseMachine.tsx b/src/features/cseMachine/CseMachine.tsx
index 30bc4a32e9..b3e2eeac90 100644
--- a/src/features/cseMachine/CseMachine.tsx
+++ b/src/features/cseMachine/CseMachine.tsx
@@ -19,8 +19,9 @@ export default class CseMachine {
   public static setEditorHighlightedLines: SetEditorHighlightedLines;
   /** callback function to update the step limit exceeded state in the SideContentCseMachine component */
   private static setIsStepLimitExceeded: SetisStepLimitExceeded;
-  // This stores the "Ghost Run (last step x coordinates)" snapshot
-  public static masterLayout: LayoutCache | null = null;
+  // Ghost layout snapshots, separated by mode to keep coordinates fixed within each mode.
+  public static normalLayoutCache: LayoutCache | null = null;
+  public static printLayoutCache: LayoutCache | null = null;
   private static printableMode: boolean = false;
   private static controlStash: boolean = false; // TODO: discuss if the default should be true
   private static stackTruncated: boolean = false;
@@ -51,6 +52,8 @@ export default class CseMachine {
     Layout.currentStackTruncLight = undefined;
     Layout.prevLayout = undefined;
     Layout.key = 0;
+    CseMachine.normalLayoutCache = null;
+    CseMachine.printLayoutCache = null;
   }
   // added for center alignment
   public static toggleCenterAlignment(): void {
@@ -74,6 +77,16 @@ export default class CseMachine {
   public static getCenterAlignment(): boolean {
     return CseMachine.centerAlignment;
   }
+  public static getMasterLayout(): LayoutCache | null {
+    return CseMachine.getPrintableMode() ? CseMachine.printLayoutCache : CseMachine.normalLayoutCache;
+  }
+  public static setMasterLayout(cache: LayoutCache): void {
+    if (CseMachine.getPrintableMode()) {
+      CseMachine.printLayoutCache = cache;
+    } else {
+      CseMachine.normalLayoutCache = cache;
+    }
+  }
 
   public static isControl(): boolean {
     return this.control ? !this.control.isEmpty() : false;
@@ -117,19 +130,13 @@ export default class CseMachine {
       context.runtime.stash,
       context.chapter
     );
-    // get ghost layout on first run (when user press run and code changes)
-    if (!CseMachine.masterLayout) {
-      Layout.setContext(
-        context.runtime.environmentTree as EnvTree,
-        context.runtime.control,
-        context.runtime.stash,
-        context.chapter
-      );
-      CseMachine.masterLayout = Layout.getLayoutPositions(this.controlStash);
+    // Build ghost layout cache lazily per mode.
+    if (!CseMachine.getMasterLayout()) {
+      CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
     }
 
     // Apply Fixed Positions
-    if (CseMachine.masterLayout) {
+    if (CseMachine.getMasterLayout()) {
       Layout.applyFixedPositions();
     }
     this.setVis(Layout.draw());
@@ -144,7 +151,10 @@ export default class CseMachine {
       // if center alignment is toggled, change the alignment and redraw the diagram with new coordinates
       if (this.centerAlignmentToggled) {
         Layout.setContext(CseMachine.environmentTree, CseMachine.control, CseMachine.stash);
-        if (CseMachine.masterLayout) {
+        if (!CseMachine.getMasterLayout()) {
+          CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
+        }
+        if (CseMachine.getMasterLayout()) {
           Layout.applyFixedPositions();
         }
         this.setVis(Layout.draw());
@@ -193,7 +203,10 @@ export default class CseMachine {
         this.setVis(Layout.currentDark);
       } else {
         Layout.setContext(CseMachine.environmentTree, CseMachine.control, CseMachine.stash);
-        if (CseMachine.masterLayout) {
+        if (!CseMachine.getMasterLayout()) {
+          CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
+        }
+        if (CseMachine.getMasterLayout()) {
           Layout.applyFixedPositions();
         }
         this.setVis(Layout.draw());
diff --git a/src/features/cseMachine/CseMachineLayout.tsx b/src/features/cseMachine/CseMachineLayout.tsx
index 925f58f5f2..b8f64465c0 100644
--- a/src/features/cseMachine/CseMachineLayout.tsx
+++ b/src/features/cseMachine/CseMachineLayout.tsx
@@ -685,7 +685,7 @@ export class Layout {
     if (Layout.clearDeadFrames) {
       return undefined;
     }
-    const cache = CseMachine.masterLayout;
+    const cache = CseMachine.getMasterLayout();
     if (cache && cache.frames.has(envId)) {
       const fixedX = cache.frames.get(envId)!;
       // add offset for control stash and center alignment
@@ -705,10 +705,10 @@ export class Layout {
    * Reassign x coordinate of every frame to their predetermined position by calling getGhostFrameX.
    */
   static applyFixedPositions() {
-    if (Layout.clearDeadFrames || !CseMachine.masterLayout) {
+    if (Layout.clearDeadFrames || !CseMachine.getMasterLayout()) {
       return;
     }
-    const cache = CseMachine.masterLayout!; // getLayoutPositions() must have been called before
+    const cache = CseMachine.getMasterLayout()!; // getLayoutPositions() must have been called before
     Layout.levels.forEach(level => {
       level.frames.forEach(frame => {
         const id = frame.environment.id;
diff --git a/src/features/cseMachine/components/Binding.tsx b/src/features/cseMachine/components/Binding.tsx
index 844d37064a..0a945b7227 100644
--- a/src/features/cseMachine/components/Binding.tsx
+++ b/src/features/cseMachine/components/Binding.tsx
@@ -69,30 +69,20 @@ export class Binding extends Visible {
     this.keyYOffset = keyYOffset;
     this.key = new Text(this.keyString, this.x(), this.y() + keyYOffset, { faded: !this.isLive });
 
-    const fnDescriptionReservedWidth =
-      isMainReference(this.value, this) &&
-      (this.value instanceof FnValue || this.value instanceof GlobalFnValue)
-        ? Config.FnDescriptionMaxWidth + Config.FnTooltipTextPadding * 2 + Config.TextMargin
-        : 0;
-
     const printFnDescriptionHeight =
       CseMachine.getPrintableMode() &&
       isMainReference(this.value, this) &&
       (this.value instanceof FnValue || this.value instanceof GlobalFnValue)
-        ? this.value.printDescriptionHeight + Config.TextPaddingY / 2
+        ? this.value.printDescriptionHeight +
+          this.value.printDescriptionOffsetY +
+          this.value.printDescriptionBottomGap +
+          Config.TextPaddingY / 2
         : 0;
 
     // derive the width from the right bound of the value
     this._width = isMainReference(this.value, this)
       ? this.value.x() -
-        this.x() +
-        (this.value instanceof FnValue ||
-        this.value instanceof GlobalFnValue ||
-        this.value instanceof ContValue
-          ? this.value instanceof FnValue || this.value instanceof GlobalFnValue
-            ? fnDescriptionReservedWidth
-            : this.value.tooltipWidth
-          : 0)
+        this.x() 
       : this.key.width();
 
     this._height = Math.max(
diff --git a/src/features/cseMachine/components/Frame.tsx b/src/features/cseMachine/components/Frame.tsx
index 325b2a904d..23764305d7 100644
--- a/src/features/cseMachine/components/Frame.tsx
+++ b/src/features/cseMachine/components/Frame.tsx
@@ -50,7 +50,7 @@ export class Frame extends Visible implements IHoverable {
 
   /** total height = frame height + frame title height */
   readonly totalHeight: number;
-  /** width of this frame + max width of the bound values */
+  /** width budget of this frame block (excluding right-side data overflow) */
   readonly totalWidth: number;
 
   /** width of data beside frame */
@@ -143,9 +143,9 @@ export class Frame extends Visible implements IHoverable {
       entries.push([`${i++}`, descriptor]);
     }
 
-    // Find the correct width of the frame before creating the bindings
+    // Find the correct width of the frame before creating the bindings.
+    // This pass sizes only the frame body (text and primitive values inside the frame).
     this._width = Config.FrameMinWidth;
-    let totalWidth = this._width + Config.FrameMinGapX;
     for (const [key, data] of entries) {
       if (isDummyKey(key)) continue;
       const constant =
@@ -166,65 +166,6 @@ export class Frame extends Visible implements IHoverable {
       }
       this._width = Math.max(this._width, bindingTextWidth + Config.FramePaddingX * 2);
 
-      // calculate width needed for data spacing to avoid collision
-      if (isDataArray(data.value)) {
-        // helper function to calculate an array width
-        const getChainWidth = (startNode: any[]): number => {
-          let w = 0;
-          let curr = startNode;
-          const seen = new Set();
-
-          while (isDataArray(curr)) {
-            // escape from circular lists
-            if (seen.has(curr)) break;
-            seen.add(curr);
-            w += curr.length * Config.DataUnitWidth;
-            const lastIndex = curr.length - 1;
-            const lastElement = curr[lastIndex];
-
-            if (isDataArray(lastElement)) {
-              w += Config.DataUnitWidth;
-              curr = lastElement;
-            } else {
-              break;
-            }
-          }
-          return w;
-        };
-
-        let maxWidth = 0;
-        let currentSpineX = 0;
-        let curr = data.value;
-        const seenSpine = new Set();
-
-        while (isDataArray(curr)) {
-          if (seenSpine.has(curr)) break;
-          seenSpine.add(curr);
-          const blockWidth = curr.length * Config.DataUnitWidth;
-          const head = curr[0];
-
-          if (isDataArray(head)) {
-            const branchWidth = getChainWidth(head);
-            maxWidth = Math.max(maxWidth, currentSpineX + branchWidth);
-          }
-
-          currentSpineX += blockWidth;
-
-          const lastIndex = curr.length - 1;
-          const lastElement = curr[lastIndex];
-
-          if (isDataArray(lastElement)) {
-            currentSpineX += Config.DataUnitWidth;
-            curr = lastElement;
-          } else {
-            maxWidth = Math.max(maxWidth, currentSpineX);
-            break;
-          }
-        }
-
-        this.totalDataWidth = Math.max(this.totalDataWidth, maxWidth);
-      }
-      totalWidth = Math.max(totalWidth, this._width + Config.FrameMinGapX);
     }
 
     // Create all the bindings and values
@@ -245,10 +186,10 @@ export class Frame extends Visible implements IHoverable {
       );
       prevBinding = currBinding;
       this.bindings.push(currBinding);
-      totalWidth = Math.max(totalWidth, currBinding.width() + Config.FramePaddingX);
     }
 
     // Post-process using actual created values to get robust spacing for nested arrays/functions.
+    // `totalDataWidth` is measured strictly as overflow beyond the frame's right edge.
     const frameRightX = this.x() + this.width();
     for (const binding of this.bindings) {
       const value = binding.value;
@@ -258,7 +199,7 @@ export class Frame extends Visible implements IHoverable {
       if (value instanceof ArrayValue) {
         valueRightX = value.x() + value.totalWidth;
       } else if (value instanceof FnValue || value instanceof GlobalFnValue) {
-        valueRightX = value.x() + value.totalWidth;
+        valueRightX = CseMachine.getPrintableMode() ? value.x() + value.totalWidth : value.x() + value.width();
       } else if (value instanceof ContValue) {
         valueRightX = value.x() + value.width() + value.tooltipWidth;
       }
@@ -269,7 +210,7 @@ export class Frame extends Visible implements IHoverable {
       }
     }
 
-    this.totalWidth = totalWidth;
+    this.totalWidth = this.width();
 
     // derive the height of the frame from the the position of the last binding
     this._height = prevBinding
diff --git a/src/features/cseMachine/components/Level.tsx b/src/features/cseMachine/components/Level.tsx
index 28eff87fce..b18910071c 100644
--- a/src/features/cseMachine/components/Level.tsx
+++ b/src/features/cseMachine/components/Level.tsx
@@ -46,8 +46,9 @@ export class Level extends Visible {
       0
     );
     const lastFrame = this.frames[this.frames.length - 1];
-    // derive the width of this level from the last frame
-    this._width = lastFrame.x() + lastFrame.totalWidth - this.x() + Config.LevelPaddingX;
+    // derive the width of this level from the last frame and its right-side data overflow
+    this._width =
+      lastFrame.x() + lastFrame.totalWidth + lastFrame.totalDataWidth - this.x() + Config.LevelPaddingX;
   }
 
   destroy() {
diff --git a/src/features/cseMachine/components/values/ArrayValue.tsx b/src/features/cseMachine/components/values/ArrayValue.tsx
index 4e3b4cf5a1..cb2de77a14 100644
--- a/src/features/cseMachine/components/values/ArrayValue.tsx
+++ b/src/features/cseMachine/components/values/ArrayValue.tsx
@@ -78,6 +78,13 @@ export class ArrayValue extends Value implements IHoverable {
           unit.value instanceof GlobalFnValue) &&
         isMainReference(unit.value, unit)
       ) {
+        const childWidth =
+          unit.value instanceof ArrayValue
+            ? unit.value.totalWidth
+            : CseMachine.getPrintableMode()
+              ? unit.value.totalWidth
+              : unit.value.width();
+
         const bottomY =
           unit.value instanceof ArrayValue
             ? unit.value.y() + unit.value.totalHeight
@@ -85,12 +92,14 @@ export class ArrayValue extends Value implements IHoverable {
               ? unit.value.y() +
                 Config.FnRadius +
                 Config.TextMargin +
-                unit.value.printDescriptionHeight
+                unit.value.printDescriptionOffsetY +
+                unit.value.printDescriptionHeight +
+                unit.value.printDescriptionBottomGap
               : unit.value.y() + unit.value.height() / 2;
 
         this.totalWidth = Math.max(
           this.totalWidth,
-          unit.value.totalWidth +
+          childWidth +
             (i === this.data.length - 1 ? (i + 2) * Config.DataUnitWidth : i * Config.DataUnitWidth)
         );
         this.totalHeight = Math.max(this.totalHeight, bottomY - unit.y());
diff --git a/src/features/cseMachine/components/values/FnValue.tsx b/src/features/cseMachine/components/values/FnValue.tsx
index 0716553341..56d15dcf32 100644
--- a/src/features/cseMachine/components/values/FnValue.tsx
+++ b/src/features/cseMachine/components/values/FnValue.tsx
@@ -50,6 +50,8 @@ export class FnValue extends Value implements IHoverable {
   readonly exportTooltipWidth: number;
   readonly isTooltipTruncated: boolean;
   readonly printDescriptionHeight: number;
+  readonly printDescriptionOffsetY: number;
+  readonly printDescriptionBottomGap: number;
 
   /** width of the closure circles + label */
   readonly totalWidth: number;
@@ -98,10 +100,12 @@ export class FnValue extends Value implements IHoverable {
     this.printDescriptionHeight =
       getTextHeight(this.exportTooltip, Config.FnDescriptionMaxWidth) +
       Config.FnTooltipTextPadding * 2;
+    this.printDescriptionOffsetY = Math.ceil(Config.TextPaddingY / 2);
+    this.printDescriptionBottomGap = Math.ceil(Config.TextPaddingY / 2);
     this.totalWidth =
       this._width +
       Config.TextMargin +
-      Config.FnDescriptionMaxWidth +
+      this.exportTooltipWidth +
       Config.FnTooltipTextPadding * 2;
 
     this.addReference(firstReference);
@@ -234,7 +238,7 @@ export class FnValue extends Value implements IHoverable {
         </Group>
         <KonvaLabel
           x={this.x() + Config.TextMargin}
-          y={this.y() + this.radius + Config.TextMargin}
+          y={this.y() + this.radius + Config.TextMargin + this.printDescriptionOffsetY}
           visible={CseMachine.getPrintableMode()}
           ref={this.labelRef}
         >
diff --git a/src/features/cseMachine/components/values/GlobalFnValue.tsx b/src/features/cseMachine/components/values/GlobalFnValue.tsx
index 70a3bfa1b2..d685fe1c71 100644
--- a/src/features/cseMachine/components/values/GlobalFnValue.tsx
+++ b/src/features/cseMachine/components/values/GlobalFnValue.tsx
@@ -44,6 +44,8 @@ export class GlobalFnValue extends Value implements IHoverable {
   readonly exportTooltipWidth: number;
   readonly isTooltipTruncated: boolean;
   readonly printDescriptionHeight: number;
+  readonly printDescriptionOffsetY: number;
+  readonly printDescriptionBottomGap: number;
   readonly totalWidth: number;
   readonly labelRef: RefObject<Label> = React.createRef();
   readonly revealLabelRef: RefObject<Label> = React.createRef();
@@ -95,10 +97,12 @@ export class GlobalFnValue extends Value implements IHoverable {
     this.printDescriptionHeight =
       getTextHeight(this.exportTooltip, Config.FnDescriptionMaxWidth) +
       Config.FnTooltipTextPadding * 2;
+    this.printDescriptionOffsetY = Math.ceil(Config.TextPaddingY / 2);
+    this.printDescriptionBottomGap = Math.ceil(Config.TextPaddingY / 2);
     this.totalWidth =
       this._width +
       Config.TextMargin +
-      Config.FnDescriptionMaxWidth +
+      this.exportTooltipWidth +
       Config.FnTooltipTextPadding * 2;
 
     this.addReference(mainReference);
@@ -191,7 +195,7 @@ export class GlobalFnValue extends Value implements IHoverable {
         </Group>
         <KonvaLabel
           x={this.x() + Config.TextMargin}
-          y={this.y() + this.radius + Config.TextMargin}
+          y={this.y() + this.radius + Config.TextMargin + this.printDescriptionOffsetY}
           visible={CseMachine.getPrintableMode()}
           ref={this.labelRef}
         >
diff --git a/src/pages/playground/Playground.tsx b/src/pages/playground/Playground.tsx
index 0b87f85a42..12b7f23a81 100644
--- a/src/pages/playground/Playground.tsx
+++ b/src/pages/playground/Playground.tsx
@@ -467,7 +467,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
     return {
       handleEditorEval: () => {
         if (updateCse) {
-          CseMachine.masterLayout = null;
+          CseMachine.clearCachedLayouts();
         }
         dispatch(WorkspaceActions.evalEditor(workspaceLocation));
       },

From b82a03dab2e760d0108f3a97c00822e1c7eb8851 Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Thu, 5 Mar 2026 14:46:37 +0800
Subject: [PATCH 17/26] Fixed format errors

---
 .coverage-fix.tmp                                           | 2 +-
 src/features/cseMachine/CseMachine.tsx                      | 4 +++-
 src/features/cseMachine/components/Binding.tsx              | 6 +-----
 src/features/cseMachine/components/Frame.tsx                | 5 +++--
 src/features/cseMachine/components/Level.tsx                | 6 +++++-
 src/features/cseMachine/components/values/FnValue.tsx       | 5 +----
 src/features/cseMachine/components/values/GlobalFnValue.tsx | 5 +----
 7 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/.coverage-fix.tmp b/.coverage-fix.tmp
index e4e5614e41..8b13789179 100644
--- a/.coverage-fix.tmp
+++ b/.coverage-fix.tmp
@@ -1 +1 @@
-./src/global.ts
+
diff --git a/src/features/cseMachine/CseMachine.tsx b/src/features/cseMachine/CseMachine.tsx
index b3e2eeac90..0e71005948 100644
--- a/src/features/cseMachine/CseMachine.tsx
+++ b/src/features/cseMachine/CseMachine.tsx
@@ -78,7 +78,9 @@ export default class CseMachine {
     return CseMachine.centerAlignment;
   }
   public static getMasterLayout(): LayoutCache | null {
-    return CseMachine.getPrintableMode() ? CseMachine.printLayoutCache : CseMachine.normalLayoutCache;
+    return CseMachine.getPrintableMode()
+      ? CseMachine.printLayoutCache
+      : CseMachine.normalLayoutCache;
   }
   public static setMasterLayout(cache: LayoutCache): void {
     if (CseMachine.getPrintableMode()) {
diff --git a/src/features/cseMachine/components/Binding.tsx b/src/features/cseMachine/components/Binding.tsx
index 0a945b7227..0a4fb3dad6 100644
--- a/src/features/cseMachine/components/Binding.tsx
+++ b/src/features/cseMachine/components/Binding.tsx
@@ -10,7 +10,6 @@ import { GenericArrow } from './arrows/GenericArrow';
 import { Frame } from './Frame';
 import { Text } from './Text';
 import { ArrayValue } from './values/ArrayValue';
-import { ContValue } from './values/ContValue';
 import { FnValue } from './values/FnValue';
 import { GlobalFnValue } from './values/GlobalFnValue';
 import { PrimitiveValue } from './values/PrimitiveValue';
@@ -80,10 +79,7 @@ export class Binding extends Visible {
         : 0;
 
     // derive the width from the right bound of the value
-    this._width = isMainReference(this.value, this)
-      ? this.value.x() -
-        this.x() 
-      : this.key.width();
+    this._width = isMainReference(this.value, this) ? this.value.x() - this.x() : this.key.width();
 
     this._height = Math.max(
       this.key.height(),
diff --git a/src/features/cseMachine/components/Frame.tsx b/src/features/cseMachine/components/Frame.tsx
index 23764305d7..5a5abf1197 100644
--- a/src/features/cseMachine/components/Frame.tsx
+++ b/src/features/cseMachine/components/Frame.tsx
@@ -165,7 +165,6 @@ export class Frame extends Visible implements IHoverable {
           );
       }
       this._width = Math.max(this._width, bindingTextWidth + Config.FramePaddingX * 2);
-
     }
 
     // Create all the bindings and values
@@ -199,7 +198,9 @@ export class Frame extends Visible implements IHoverable {
       if (value instanceof ArrayValue) {
         valueRightX = value.x() + value.totalWidth;
       } else if (value instanceof FnValue || value instanceof GlobalFnValue) {
-        valueRightX = CseMachine.getPrintableMode() ? value.x() + value.totalWidth : value.x() + value.width();
+        valueRightX = CseMachine.getPrintableMode()
+          ? value.x() + value.totalWidth
+          : value.x() + value.width();
       } else if (value instanceof ContValue) {
         valueRightX = value.x() + value.width() + value.tooltipWidth;
       }
diff --git a/src/features/cseMachine/components/Level.tsx b/src/features/cseMachine/components/Level.tsx
index b18910071c..f8da0471a2 100644
--- a/src/features/cseMachine/components/Level.tsx
+++ b/src/features/cseMachine/components/Level.tsx
@@ -48,7 +48,11 @@ export class Level extends Visible {
     const lastFrame = this.frames[this.frames.length - 1];
     // derive the width of this level from the last frame and its right-side data overflow
     this._width =
-      lastFrame.x() + lastFrame.totalWidth + lastFrame.totalDataWidth - this.x() + Config.LevelPaddingX;
+      lastFrame.x() +
+      lastFrame.totalWidth +
+      lastFrame.totalDataWidth -
+      this.x() +
+      Config.LevelPaddingX;
   }
 
   destroy() {
diff --git a/src/features/cseMachine/components/values/FnValue.tsx b/src/features/cseMachine/components/values/FnValue.tsx
index 56d15dcf32..83933b1af1 100644
--- a/src/features/cseMachine/components/values/FnValue.tsx
+++ b/src/features/cseMachine/components/values/FnValue.tsx
@@ -103,10 +103,7 @@ export class FnValue extends Value implements IHoverable {
     this.printDescriptionOffsetY = Math.ceil(Config.TextPaddingY / 2);
     this.printDescriptionBottomGap = Math.ceil(Config.TextPaddingY / 2);
     this.totalWidth =
-      this._width +
-      Config.TextMargin +
-      this.exportTooltipWidth +
-      Config.FnTooltipTextPadding * 2;
+      this._width + Config.TextMargin + this.exportTooltipWidth + Config.FnTooltipTextPadding * 2;
 
     this.addReference(firstReference);
   }
diff --git a/src/features/cseMachine/components/values/GlobalFnValue.tsx b/src/features/cseMachine/components/values/GlobalFnValue.tsx
index d685fe1c71..196cb158f0 100644
--- a/src/features/cseMachine/components/values/GlobalFnValue.tsx
+++ b/src/features/cseMachine/components/values/GlobalFnValue.tsx
@@ -100,10 +100,7 @@ export class GlobalFnValue extends Value implements IHoverable {
     this.printDescriptionOffsetY = Math.ceil(Config.TextPaddingY / 2);
     this.printDescriptionBottomGap = Math.ceil(Config.TextPaddingY / 2);
     this.totalWidth =
-      this._width +
-      Config.TextMargin +
-      this.exportTooltipWidth +
-      Config.FnTooltipTextPadding * 2;
+      this._width + Config.TextMargin + this.exportTooltipWidth + Config.FnTooltipTextPadding * 2;
 
     this.addReference(mainReference);
   }

From 7e2ea031a427a8b5404bd8847478b3106765990b Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Thu, 5 Mar 2026 15:02:42 +0800
Subject: [PATCH 18/26] Fixed sentry's bot error

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

diff --git a/src/features/cseMachine/CseMachineLayout.tsx b/src/features/cseMachine/CseMachineLayout.tsx
index b8f64465c0..b0d2d3a01b 100644
--- a/src/features/cseMachine/CseMachineLayout.tsx
+++ b/src/features/cseMachine/CseMachineLayout.tsx
@@ -666,7 +666,8 @@ export class Layout {
       const controlStashOffset =
         ControlStashConfig.ControlPosX + ControlStashConfig.ControlItemWidth;
       const offset = controlStash ? controlStashOffset : 0;
-      const currWidth = level.width() + frames[frames.length - 1].totalDataWidth;
+      // `level.width()` already includes the last frame's right-side overflow.
+      const currWidth = level.width();
       cache.largestWidth = Math.max(cache.largestWidth, currWidth);
       frames.forEach(frame => {
         cache.frames.set(frame.environment.id, frame.x() - offset);

From f479f58ac3979065aa1fb028b642a44023b089e6 Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Mon, 9 Mar 2026 13:30:29 +0800
Subject: [PATCH 19/26] Fixed #3639 by adding closing parantheses

---
 src/features/cseMachine/CseMachineUtils.ts    | 47 +++++++++++++++++++
 .../cseMachine/components/values/FnValue.tsx  |  4 +-
 .../components/values/GlobalFnValue.tsx       |  4 +-
 3 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/src/features/cseMachine/CseMachineUtils.ts b/src/features/cseMachine/CseMachineUtils.ts
index b95d0b0339..6dc827dc76 100644
--- a/src/features/cseMachine/CseMachineUtils.ts
+++ b/src/features/cseMachine/CseMachineUtils.ts
@@ -735,6 +735,53 @@ export const truncateText = (programStr: string, maxWidth: number, maxHeight: nu
   return [...lines, Config.Ellipsis].join('\n');
 };
 
+const appendSuffixWithinWidth = (line: string, suffix: string, maxWidth: number): string => {
+  const ellipsis = Config.Ellipsis;
+  const ellipsisIndex = line.lastIndexOf(ellipsis);
+
+  if (ellipsisIndex === -1) {
+    return line;
+  }
+
+  let prefix = line.slice(0, ellipsisIndex);
+  let candidate = `${prefix} ${ellipsis + suffix}`;
+
+  while (prefix && getTextWidth(candidate) > maxWidth) {
+    prefix = prefix.slice(0, -1);
+    candidate = `${prefix} ${ellipsis + suffix}`;
+  }
+
+  return candidate;
+};
+
+export const truncateFunctionTooltip = (
+  tooltip: string,
+  maxWidth: number,
+  maxHeight: number
+): string => {
+  const truncatedTooltip = truncateText(tooltip, maxWidth, maxHeight);
+
+  if (truncatedTooltip === tooltip) {
+    return truncatedTooltip;
+  }
+
+  const lines = truncatedTooltip.split('\n');
+  const originalLines = tooltip.split('\n');
+
+  const paramsLineIndex = originalLines.findIndex(line => line.startsWith('params:'));
+  if (paramsLineIndex !== -1 && lines[paramsLineIndex]?.endsWith(Config.Ellipsis)) {
+    lines[paramsLineIndex] = appendSuffixWithinWidth(lines[paramsLineIndex], ')', maxWidth);
+  }
+
+  const bodyClosingLineIndex = originalLines.findLastIndex(line => line.trim() === '}');
+  if (bodyClosingLineIndex !== -1 && bodyClosingLineIndex >= lines.length) {
+    const lastLineIndex = lines.length - 1;
+    lines[lastLineIndex] = appendSuffixWithinWidth(lines[lastLineIndex], ' }', maxWidth);
+  }
+
+  return lines.join('\n');
+};
+
 /**
  * Typeguard for Instr to distinguish between program statements and instructions.
  * The typeguard from js-slang cannot be used due to Typescript raising some weird errors
diff --git a/src/features/cseMachine/components/values/FnValue.tsx b/src/features/cseMachine/components/values/FnValue.tsx
index 83933b1af1..84ab7bc514 100644
--- a/src/features/cseMachine/components/values/FnValue.tsx
+++ b/src/features/cseMachine/components/values/FnValue.tsx
@@ -26,7 +26,7 @@ import {
   isStreamFn,
   setHoveredCursor,
   setUnhoveredCursor,
-  truncateText
+  truncateFunctionTooltip
 } from '../../CseMachineUtils';
 import { ArrowFromFn } from '../arrows/ArrowFromFn';
 import { Binding } from '../Binding';
@@ -86,7 +86,7 @@ export class FnValue extends Value implements IHoverable {
         .slice(0, 2)
         .join('\n') + ' ...';
     this.tooltip = `${this.paramsText}\n${this.bodyText}`;
-    this.exportTooltip = truncateText(
+    this.exportTooltip = truncateFunctionTooltip(
       this.tooltip,
       Config.FnDescriptionMaxWidth,
       Config.FnDescriptionMaxHeight
diff --git a/src/features/cseMachine/components/values/GlobalFnValue.tsx b/src/features/cseMachine/components/values/GlobalFnValue.tsx
index 196cb158f0..01bb3214cf 100644
--- a/src/features/cseMachine/components/values/GlobalFnValue.tsx
+++ b/src/features/cseMachine/components/values/GlobalFnValue.tsx
@@ -24,7 +24,7 @@ import {
   getTextWidth,
   setHoveredCursor,
   setUnhoveredCursor,
-  truncateText
+  truncateFunctionTooltip
 } from '../../CseMachineUtils';
 import { ArrowFromFn } from '../arrows/ArrowFromFn';
 import { Binding } from '../Binding';
@@ -83,7 +83,7 @@ export class GlobalFnValue extends Value implements IHoverable {
         .slice(0, 2)
         .join('\n') + ' ...';
     this.tooltip = `${this.paramsText}\n${this.bodyText}`;
-    this.exportTooltip = truncateText(
+    this.exportTooltip = truncateFunctionTooltip(
       this.tooltip,
       Config.FnDescriptionMaxWidth,
       Config.FnDescriptionMaxHeight

From b47811aecd6061b04f904922f0a5afb7b568dc2a Mon Sep 17 00:00:00 2001
From: gigopogy <ethanlockzy@gmail.com>
Date: Mon, 9 Mar 2026 23:12:47 +0800
Subject: [PATCH 20/26] Fix stationary x-coordinates for normal and printable
 modes:

- Populates both Normal and Printable caches upfront in drawCse.
- Removes redundant cache generation logic from redraw.
- Prevents premature cache clearing in clearCse to maintain stability.
---
 src/features/cseMachine/CseMachine.tsx | 60 ++++++++++++++++++--------
 1 file changed, 42 insertions(+), 18 deletions(-)

diff --git a/src/features/cseMachine/CseMachine.tsx b/src/features/cseMachine/CseMachine.tsx
index 0e71005948..576f5549af 100644
--- a/src/features/cseMachine/CseMachine.tsx
+++ b/src/features/cseMachine/CseMachine.tsx
@@ -82,12 +82,22 @@ export default class CseMachine {
       ? CseMachine.printLayoutCache
       : CseMachine.normalLayoutCache;
   }
-  public static setMasterLayout(cache: LayoutCache): void {
+public static setMasterLayout(cache: LayoutCache): void {
+    console.log("==== SETTING MASTER LAYOUT ====");
+    console.log("Current Mode:", CseMachine.getPrintableMode() ? "PRINTABLE" : "NORMAL");
+    console.log("[BEFORE] normalLayoutCache:", CseMachine.normalLayoutCache);
+    console.log("[BEFORE] printLayoutCache:", CseMachine.printLayoutCache);
+    console.log("[PAYLOAD] Cache to be saved:", cache);
+
     if (CseMachine.getPrintableMode()) {
       CseMachine.printLayoutCache = cache;
     } else {
       CseMachine.normalLayoutCache = cache;
     }
+
+    console.log("[AFTER] normalLayoutCache:", CseMachine.normalLayoutCache);
+    console.log("[AFTER] printLayoutCache:", CseMachine.printLayoutCache);
+    console.log("===============================");
   }
 
   public static isControl(): boolean {
@@ -117,6 +127,7 @@ export default class CseMachine {
   /** updates the visualization state in the SideContentCseMachine component based on
    * the JS Slang context passed in */
   static drawCse(context: Context) {
+    console.log("Draw");
     // store environmentTree at last breakpoint.
     CseMachine.environmentTree = deepCopyTree(context.runtime.environmentTree as EnvTree);
     CseMachine.currentEnvId = getEnvId(context.runtime.environments[0]);
@@ -132,10 +143,21 @@ export default class CseMachine {
       context.runtime.stash,
       context.chapter
     );
+
     // Build ghost layout cache lazily per mode.
-    if (!CseMachine.getMasterLayout()) {
-      CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
-    }
+   if (!CseMachine.normalLayoutCache || !CseMachine.printLayoutCache) {
+         // fill up both lookup table of normal mode and printable mode
+        const originalMode = CseMachine.getPrintableMode();
+
+        CseMachine.printableMode = true;
+         CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
+
+        CseMachine.printableMode = false;
+         CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
+
+        // 3. Restore the user's actual mode setting
+        CseMachine.printableMode = originalMode;
+       } 
 
     // Apply Fixed Positions
     if (CseMachine.getMasterLayout()) {
@@ -147,21 +169,22 @@ export default class CseMachine {
   }
 
   static redraw() {
+    console.log("Redraw");
     if (CseMachine.environmentTree && CseMachine.control && CseMachine.stash) {
       // checks if the required diagram exists, and updates the dom node using setVis
 
       // if center alignment is toggled, change the alignment and redraw the diagram with new coordinates
       if (this.centerAlignmentToggled) {
-        Layout.setContext(CseMachine.environmentTree, CseMachine.control, CseMachine.stash);
-        if (!CseMachine.getMasterLayout()) {
-          CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
-        }
-        if (CseMachine.getMasterLayout()) {
-          Layout.applyFixedPositions();
-        }
-        this.setVis(Layout.draw());
-        this.centerAlignmentToggled = false;
-      }
+             Layout.setContext(CseMachine.environmentTree, CseMachine.control, CseMachine.stash);
+             if (!CseMachine.getMasterLayout()) {
+               CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
+             }
+             if (CseMachine.getMasterLayout()) {
+               Layout.applyFixedPositions();
+             }
+             this.setVis(Layout.draw());
+             this.centerAlignmentToggled = false;
+           }
 
       if (
         CseMachine.getPrintableMode() &&
@@ -205,9 +228,9 @@ export default class CseMachine {
         this.setVis(Layout.currentDark);
       } else {
         Layout.setContext(CseMachine.environmentTree, CseMachine.control, CseMachine.stash);
-        if (!CseMachine.getMasterLayout()) {
-          CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
-        }
+        // if (!CseMachine.getMasterLayout()) {
+        //   CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
+        // }
         if (CseMachine.getMasterLayout()) {
           Layout.applyFixedPositions();
         }
@@ -224,6 +247,7 @@ export default class CseMachine {
   }
 
   static clearCse() {
+    console.log("clear");
     if (this.setVis) {
       this.setVis(undefined);
       CseMachine.environmentTree = undefined;
@@ -231,7 +255,7 @@ export default class CseMachine {
       CseMachine.stash = undefined;
     }
     CseMachine.setClearDeadFrames(false);
-    CseMachine.clearCachedLayouts();
+    //CseMachine.clearCachedLayouts();
     this.clear();
   }
 }

From 16637994850c91582509e8c96a6e29b9ec61212f Mon Sep 17 00:00:00 2001
From: gigopogy <ethanlockzy@gmail.com>
Date: Mon, 9 Mar 2026 23:30:28 +0800
Subject: [PATCH 21/26] removed comments and console logs

---
 src/features/cseMachine/CseMachine.tsx | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/features/cseMachine/CseMachine.tsx b/src/features/cseMachine/CseMachine.tsx
index 576f5549af..fb305342c8 100644
--- a/src/features/cseMachine/CseMachine.tsx
+++ b/src/features/cseMachine/CseMachine.tsx
@@ -83,21 +83,11 @@ export default class CseMachine {
       : CseMachine.normalLayoutCache;
   }
 public static setMasterLayout(cache: LayoutCache): void {
-    console.log("==== SETTING MASTER LAYOUT ====");
-    console.log("Current Mode:", CseMachine.getPrintableMode() ? "PRINTABLE" : "NORMAL");
-    console.log("[BEFORE] normalLayoutCache:", CseMachine.normalLayoutCache);
-    console.log("[BEFORE] printLayoutCache:", CseMachine.printLayoutCache);
-    console.log("[PAYLOAD] Cache to be saved:", cache);
-
     if (CseMachine.getPrintableMode()) {
       CseMachine.printLayoutCache = cache;
     } else {
       CseMachine.normalLayoutCache = cache;
     }
-
-    console.log("[AFTER] normalLayoutCache:", CseMachine.normalLayoutCache);
-    console.log("[AFTER] printLayoutCache:", CseMachine.printLayoutCache);
-    console.log("===============================");
   }
 
   public static isControl(): boolean {
@@ -127,7 +117,6 @@ public static setMasterLayout(cache: LayoutCache): void {
   /** updates the visualization state in the SideContentCseMachine component based on
    * the JS Slang context passed in */
   static drawCse(context: Context) {
-    console.log("Draw");
     // store environmentTree at last breakpoint.
     CseMachine.environmentTree = deepCopyTree(context.runtime.environmentTree as EnvTree);
     CseMachine.currentEnvId = getEnvId(context.runtime.environments[0]);
@@ -169,7 +158,6 @@ public static setMasterLayout(cache: LayoutCache): void {
   }
 
   static redraw() {
-    console.log("Redraw");
     if (CseMachine.environmentTree && CseMachine.control && CseMachine.stash) {
       // checks if the required diagram exists, and updates the dom node using setVis
 
@@ -228,9 +216,6 @@ public static setMasterLayout(cache: LayoutCache): void {
         this.setVis(Layout.currentDark);
       } else {
         Layout.setContext(CseMachine.environmentTree, CseMachine.control, CseMachine.stash);
-        // if (!CseMachine.getMasterLayout()) {
-        //   CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
-        // }
         if (CseMachine.getMasterLayout()) {
           Layout.applyFixedPositions();
         }
@@ -247,7 +232,6 @@ public static setMasterLayout(cache: LayoutCache): void {
   }
 
   static clearCse() {
-    console.log("clear");
     if (this.setVis) {
       this.setVis(undefined);
       CseMachine.environmentTree = undefined;
@@ -255,7 +239,6 @@ public static setMasterLayout(cache: LayoutCache): void {
       CseMachine.stash = undefined;
     }
     CseMachine.setClearDeadFrames(false);
-    //CseMachine.clearCachedLayouts();
     this.clear();
   }
 }

From e112dec3492d8376ea4d06a7feedde20f50abb41 Mon Sep 17 00:00:00 2001
From: That Li <thatli3163@gmail.com>
Date: Tue, 10 Mar 2026 19:01:41 +0800
Subject: [PATCH 22/26] template for storing y added in the layout map, as well
 as the method to reassign y coordinates in the Frame class, and getGhostY
 method.

---
 src/features/cseMachine/CseMachineLayout.tsx | 42 ++++++++++++++++----
 src/features/cseMachine/components/Frame.tsx | 10 ++++-
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/features/cseMachine/CseMachineLayout.tsx b/src/features/cseMachine/CseMachineLayout.tsx
index 35ddf6dc1f..bd90ecff9e 100644
--- a/src/features/cseMachine/CseMachineLayout.tsx
+++ b/src/features/cseMachine/CseMachineLayout.tsx
@@ -54,7 +54,8 @@ import {
 } from './CseMachineUtils';
 import { Continuation, isContinuation } from './utils/continuation';
 export type LayoutCache = {
-  frames: Map<string, number>;
+  framesX: Map<string, number>;
+  framesY: Map<string, number>;
   levelWidth: Map<string, number>;
   largestWidth: number;
 };
@@ -654,7 +655,8 @@ export class Layout {
    */
   static getLayoutPositions(controlStash: boolean): LayoutCache {
     const cache: LayoutCache = {
-      frames: new Map(),
+      framesX: new Map(),
+      framesY: new Map(), // added template
       levelWidth: new Map(),
       largestWidth: 0
     };
@@ -668,7 +670,8 @@ export class Layout {
       const currWidth = level.width();
       cache.largestWidth = Math.max(cache.largestWidth, currWidth);
       frames.forEach(frame => {
-        cache.frames.set(frame.environment.id, frame.x() - offset);
+        cache.framesX.set(frame.environment.id, frame.x() - offset);
+        cache.framesY.set(frame.environment.id, frame.y()); // added template
         cache.levelWidth.set(frame.environment.id, currWidth);
       });
     });
@@ -685,8 +688,8 @@ export class Layout {
       return undefined;
     }
     const cache = CseMachine.getMasterLayout();
-    if (cache && cache.frames.has(envId)) {
-      const fixedX = cache.frames.get(envId)!;
+    if (cache && cache.framesX.has(envId)) {
+      const fixedX = cache.framesX.get(envId)!;
       // add offset for control stash and center alignment
       let offset: number = 0;
       offset += CseMachine.getControlStash()
@@ -700,6 +703,23 @@ export class Layout {
     return undefined;
   }
 
+    /**
+   * Get the cached y coordinate corresponding to the given environment id, and add offset.
+   * @param envId id of current component in the environment
+   * @returns coordinate of cached position, or undefined if it doesn't exist
+   */
+  static getGhostFrameY(envId: string): number | undefined { // added template
+    if (Layout.clearDeadFrames) {
+      return undefined;
+    }
+    const cache = CseMachine.getMasterLayout();
+    if (cache && cache.framesY.has(envId)) {
+      const fixedY = cache.framesY.get(envId)!;
+      return fixedY;
+    }
+    return undefined;
+  }
+
   /**
    * Reassign x coordinate of every frame to their predetermined position by calling getGhostFrameX.
    */
@@ -711,13 +731,21 @@ export class Layout {
     Layout.levels.forEach(level => {
       level.frames.forEach(frame => {
         const id = frame.environment.id;
-        if (cache.frames.has(id)) {
+
+        // get predetermined x coordinate
+        if (cache.framesX.has(id)) {
           const fixedX = Layout.getGhostFrameX(id)!;
-          frame.reassignCoordinates(fixedX);
+          frame.reassignCoordinatesX(fixedX);
           frame.bindings.forEach(binding => {
             binding.reassignCoordinates(fixedX);
           });
         }
+
+        // get predetermined y coordinate
+        if (cache.framesY.has(id)) {
+          const fixedY = Layout.getGhostFrameY(id)!;
+          frame.reassignCoordinatesY(fixedY);
+        }
       });
     });
   }
diff --git a/src/features/cseMachine/components/Frame.tsx b/src/features/cseMachine/components/Frame.tsx
index 89d06788e5..7fef4b1478 100644
--- a/src/features/cseMachine/components/Frame.tsx
+++ b/src/features/cseMachine/components/Frame.tsx
@@ -241,7 +241,7 @@ export class Frame extends Visible implements IHoverable {
    * Reassigns the coordinates according to the final position of this frame
    * @param newX taken from cached layout
    */
-  reassignCoordinates(newX: number): void {
+  reassignCoordinatesX(newX: number): void {
     this._x = newX;
 
     let textOffset = 0;
@@ -256,6 +256,14 @@ export class Frame extends Visible implements IHoverable {
     );
   }
 
+  /**
+   * Reassigns the coordinates according to the final position of this frame
+   * @param newY taken from cached layout
+   */
+  reassignCoordinatesY(newY: number): void {
+    this._y = newY;
+  }
+
   onMouseEnter = () => {};
 
   onMouseLeave = () => {};

From ed6cb060434c813da95424c6fa23769892207183 Mon Sep 17 00:00:00 2001
From: Vemulapalli Akshay <akshayvemulapalli2007@gmail.com>
Date: Tue, 10 Mar 2026 00:38:37 +0800
Subject: [PATCH 23/26] Fixed format errors

---
 src/features/cseMachine/CseMachine.tsx | 42 +++++++++++++-------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/features/cseMachine/CseMachine.tsx b/src/features/cseMachine/CseMachine.tsx
index fb305342c8..2e68fb8db9 100644
--- a/src/features/cseMachine/CseMachine.tsx
+++ b/src/features/cseMachine/CseMachine.tsx
@@ -82,7 +82,7 @@ export default class CseMachine {
       ? CseMachine.printLayoutCache
       : CseMachine.normalLayoutCache;
   }
-public static setMasterLayout(cache: LayoutCache): void {
+  public static setMasterLayout(cache: LayoutCache): void {
     if (CseMachine.getPrintableMode()) {
       CseMachine.printLayoutCache = cache;
     } else {
@@ -134,19 +134,19 @@ public static setMasterLayout(cache: LayoutCache): void {
     );
 
     // Build ghost layout cache lazily per mode.
-   if (!CseMachine.normalLayoutCache || !CseMachine.printLayoutCache) {
-         // fill up both lookup table of normal mode and printable mode
-        const originalMode = CseMachine.getPrintableMode();
+    if (!CseMachine.normalLayoutCache || !CseMachine.printLayoutCache) {
+      // fill up both lookup table of normal mode and printable mode
+      const originalMode = CseMachine.getPrintableMode();
 
-        CseMachine.printableMode = true;
-         CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
+      CseMachine.printableMode = true;
+      CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
 
-        CseMachine.printableMode = false;
-         CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
+      CseMachine.printableMode = false;
+      CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
 
-        // 3. Restore the user's actual mode setting
-        CseMachine.printableMode = originalMode;
-       } 
+      // 3. Restore the user's actual mode setting
+      CseMachine.printableMode = originalMode;
+    }
 
     // Apply Fixed Positions
     if (CseMachine.getMasterLayout()) {
@@ -163,16 +163,16 @@ public static setMasterLayout(cache: LayoutCache): void {
 
       // if center alignment is toggled, change the alignment and redraw the diagram with new coordinates
       if (this.centerAlignmentToggled) {
-             Layout.setContext(CseMachine.environmentTree, CseMachine.control, CseMachine.stash);
-             if (!CseMachine.getMasterLayout()) {
-               CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
-             }
-             if (CseMachine.getMasterLayout()) {
-               Layout.applyFixedPositions();
-             }
-             this.setVis(Layout.draw());
-             this.centerAlignmentToggled = false;
-           }
+        Layout.setContext(CseMachine.environmentTree, CseMachine.control, CseMachine.stash);
+        if (!CseMachine.getMasterLayout()) {
+          CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
+        }
+        if (CseMachine.getMasterLayout()) {
+          Layout.applyFixedPositions();
+        }
+        this.setVis(Layout.draw());
+        this.centerAlignmentToggled = false;
+      }
 
       if (
         CseMachine.getPrintableMode() &&

From de48e60b42175dae5cc2c95a31862e24dc58014b Mon Sep 17 00:00:00 2001
From: That Li <thatli3163@gmail.com>
Date: Tue, 7 Apr 2026 21:12:28 +0800
Subject: [PATCH 24/26] Merge branch 'upstream/master' into layout-cache

---
 src/features/cseMachine/CseMachineLayout.tsx | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/features/cseMachine/CseMachineLayout.tsx b/src/features/cseMachine/CseMachineLayout.tsx
index 59a5f4886b..f79edbb4f4 100644
--- a/src/features/cseMachine/CseMachineLayout.tsx
+++ b/src/features/cseMachine/CseMachineLayout.tsx
@@ -844,23 +844,6 @@ export class Layout {
     return undefined;
   }
 
-    /**
-   * Get the cached y coordinate corresponding to the given environment id, and add offset.
-   * @param envId id of current component in the environment
-   * @returns coordinate of cached position, or undefined if it doesn't exist
-   */
-  static getGhostFrameY(envId: string): number | undefined { // added template
-    if (Layout.clearDeadFrames) {
-      return undefined;
-    }
-    const cache = CseMachine.getMasterLayout();
-    if (cache && cache.framesY.has(envId)) {
-      const fixedY = cache.framesY.get(envId)!;
-      return fixedY;
-    }
-    return undefined;
-  }
-
   /**
    * Get the cached y coordinate corresponding to the given environment id, and add offset.
    * @param envId id of current component in the environment

From 0b5c3d86725c77000031b176efce273bdeb3e97e Mon Sep 17 00:00:00 2001
From: That Li <thatli3163@gmail.com>
Date: Fri, 22 May 2026 16:12:15 +0800
Subject: [PATCH 25/26] Make arrow filtering and center alignment persistent

---
 .../sideContent/content/SideContentCseMachine.tsx        | 9 +++++++--
 src/features/cseMachine/CseMachine.tsx                   | 1 -
 src/pages/playground/Playground.tsx                      | 7 ++++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/commons/sideContent/content/SideContentCseMachine.tsx b/src/commons/sideContent/content/SideContentCseMachine.tsx
index 9d2f2631ac..9c68222460 100644
--- a/src/commons/sideContent/content/SideContentCseMachine.tsx
+++ b/src/commons/sideContent/content/SideContentCseMachine.tsx
@@ -210,14 +210,19 @@ class SideContentCseMachineBase extends Component<CseMachineProps, State> {
       this.handleResize();
     }
     if (prevProps.needCseUpdate && !this.props.needCseUpdate) {
-      CseMachine.resetArrowOriginFilters();
+      const preservedStep = Math.max(this.state.value, 0);
       this.setState({ arrowFilterOpen: false });
-      this.stepFirst();
+
       if (this.isJava()) {
         JavaCseMachine.clearCse();
       } else {
         CseMachine.clearCse();
       }
+
+      // Re-run the stepper at the preserved step so the display remains at the
+      // same step after editor update while still refreshing the CSE internals.
+      this.sliderShift(preservedStep);
+      this.sliderRelease(preservedStep);
     }
   }
 
diff --git a/src/features/cseMachine/CseMachine.tsx b/src/features/cseMachine/CseMachine.tsx
index 887d33c4f6..6d14dce791 100644
--- a/src/features/cseMachine/CseMachine.tsx
+++ b/src/features/cseMachine/CseMachine.tsx
@@ -465,7 +465,6 @@ export default class CseMachine {
   }
 
   static clearCse() {
-    CseMachine.resetArrowOriginFilters();
     if (this.setVis) {
       this.setVis(undefined);
       CseMachine.environmentTree = undefined;
diff --git a/src/pages/playground/Playground.tsx b/src/pages/playground/Playground.tsx
index 516a0ea53d..52241b050a 100644
--- a/src/pages/playground/Playground.tsx
+++ b/src/pages/playground/Playground.tsx
@@ -424,7 +424,12 @@ const Playground: React.FC<PlaygroundProps> = props => {
   const autorunButtonHandlers = useMemo(() => {
     return {
       handleEditorEval: () => {
+        const wasCenterAligned = CseMachine.getCenterAlignment();
         CseMachine.clearCachedLayouts();
+        if (wasCenterAligned) {
+          CseMachine.toggleCenterAlignment();
+        }
+
         // reset stepper before evaluation
         dispatch(WorkspaceActions.updateCurrentStep(-1, workspaceLocation));
         dispatch(WorkspaceActions.updateStepsTotal(0, workspaceLocation));
@@ -438,7 +443,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
 
         dispatch(WorkspaceActions.evalEditor(workspaceLocation));
         CseMachine.setClearDeadFrames(false);
-        if (CseMachine.getCenterAlignment()) {
+        if (wasCenterAligned) {
           CseMachine.toggleCenterAlignment();
         }
       },

From c4c52af8bd74ae3b3f3fcd50d3228a997b890bad Mon Sep 17 00:00:00 2001
From: That Li <thatli3163@gmail.com>
Date: Fri, 22 May 2026 16:40:22 +0800
Subject: [PATCH 26/26] remove unnecessary files

---
 .coverage-fix.tmp  |  1 -
 et --hard 25755a4c | 80 ----------------------------------------------
 2 files changed, 81 deletions(-)
 delete mode 100644 .coverage-fix.tmp
 delete mode 100644 et --hard 25755a4c

diff --git a/.coverage-fix.tmp b/.coverage-fix.tmp
deleted file mode 100644
index 8b13789179..0000000000
--- a/.coverage-fix.tmp
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/et --hard 25755a4c b/et --hard 25755a4c
deleted file mode 100644
index a863f0b2f2..0000000000
--- a/et --hard 25755a4c	
+++ /dev/null
@@ -1,80 +0,0 @@
-e00e5f28 (HEAD -> fix-cse, origin/master, origin/HEAD, gigopogo/fix-cse, master) HEAD@{0}: reset: moving to HEAD~1
-25755a4c HEAD@{1}: commit: Version 1
-e00e5f28 (HEAD -> fix-cse, origin/master, origin/HEAD, gigopogo/fix-cse, master) HEAD@{2}: reset: moving to master
-7a6fcb7d (gigopogo/fix/cse-layout-machine) HEAD@{3}: checkout: moving from master to fix-cse
-e00e5f28 (HEAD -> fix-cse, origin/master, origin/HEAD, gigopogo/fix-cse, master) HEAD@{4}: commit: Fixed the error where the frames WERE not moving due to the Layout team's invariant!
-99f83010 HEAD@{5}: commit: Fixed the sentry bot suggestion
-2ef3c484 HEAD@{6}: commit: Fixed tsc error
-50f2b774 HEAD@{7}: pull: Fast-forward
-d6c68817 HEAD@{8}: pull --rebase origin master (finish): returning to refs/heads/master
-d6c68817 HEAD@{9}: pull --rebase origin master (pick): Fixed the following errors and implemented suggestions
-26345cb6 HEAD@{10}: pull --rebase origin master (start): checkout 26345cb6b61bda45de0f47c64edef54e2dc4cfc8
-b12755a3 HEAD@{11}: commit: Fixed the following errors and implemented suggestions
-44e1f30c HEAD@{12}: checkout: moving from fix-cse to master
-7a6fcb7d (gigopogo/fix/cse-layout-machine) HEAD@{13}: reset: moving to HEAD
-7a6fcb7d (gigopogo/fix/cse-layout-machine) HEAD@{14}: checkout: moving from master to fix-cse
-44e1f30c HEAD@{15}: commit: Changed from Hide -> Clear and the icon
-2c3897cd HEAD@{16}: checkout: moving from Hulk_fix to master
-953df696 (Hulk_fix) HEAD@{17}: commit: Fixed the formatting!
-d9ce60bf HEAD@{18}: pull: Fast-forward
-039f07de HEAD@{19}: reset: moving to HEAD
-039f07de HEAD@{20}: commit: Hulk Fix!
-5e84b1d7 (upstream/master) HEAD@{21}: Branch: renamed refs/heads/backup-branch to refs/heads/Hulk_fix
-5e84b1d7 (upstream/master) HEAD@{23}: reset: moving to upstream/master
-3b75e828 HEAD@{24}: merge upstream/master: Merge made by the 'ort' strategy.
-22d7859d HEAD@{25}: checkout: moving from master to backup-branch
-2c3897cd HEAD@{26}: commit: Fix : Toggle -> One time cleanup
-39a1ac0e HEAD@{27}: commit: Fix : CI format errors and made it from checkbox -> onClick button!
-321f22df HEAD@{28}: commit: Fix : Removed gaps
-f02260af HEAD@{29}: commit: Added the functionality for toggle of dead vs ONLY live for
-baebfb5f HEAD@{30}: merge backup-branch: Merge made by the 'ort' strategy.
-5e84b1d7 (upstream/master) HEAD@{31}: reset: moving to upstream/master
-22d7859d HEAD@{32}: checkout: moving from backup-branch to master
-22d7859d HEAD@{33}: checkout: moving from master to backup-branch
-22d7859d HEAD@{34}: commit: Added the removeDeadFrames feature
-3908dbea HEAD@{35}: reset: moving to upstream/master
-5e84b1d7 (upstream/master) HEAD@{36}: reset: moving to HEAD
-5e84b1d7 (upstream/master) HEAD@{37}: pull: Fast-forward
-96ce8d89 (gigopogo/master) HEAD@{38}: checkout: moving from shortCircuitFix/master to master
-176f3107 (origin/shortCircuitFix/master) HEAD@{39}: commit: Fixed the SENTRY bot error
-0e03ed5a HEAD@{40}: commit: Fixed the issue described at #3574
-3908dbea HEAD@{41}: reset: moving to upstream/master
-96ce8d89 (gigopogo/master) HEAD@{42}: checkout: moving from master to shortCircuitFix/master
-96ce8d89 (gigopogo/master) HEAD@{43}: reset: moving to upstream/master
-8fb394fe HEAD@{44}: reset: moving to origin/master
-35fd4244 HEAD@{45}: checkout: moving from pr-3575 to master
-d406e33d (upstream/partial-revert-3570) HEAD@{46}: checkout: moving from master to pr-3575
-35fd4244 HEAD@{47}: checkout: moving from pr-3575 to master
-d406e33d (upstream/partial-revert-3570) HEAD@{48}: checkout: moving from master to pr-3575
-35fd4244 HEAD@{49}: checkout: moving from pr-3575 to master
-d406e33d (upstream/partial-revert-3570) HEAD@{50}: checkout: moving from fix/liveness-clean to pr-3575
-35fd4244 HEAD@{51}: checkout: moving from master to fix/liveness-clean
-35fd4244 HEAD@{52}: reset: moving to upstream/master
-8fb394fe HEAD@{53}: rebase (abort): returning to refs/heads/master
-35fd4244 HEAD@{54}: pull --rebase upstream master (start): checkout 35fd42446edc8775d4aee2013dccda960875e750
-8fb394fe HEAD@{55}: checkout: moving from master to master
-8fb394fe HEAD@{56}: commit: CI errors fixed commit TRIAL
-0a39954d HEAD@{57}: commit: Fixed and removed all the needless import statements and other errors in seperate files!
-132b52b6 HEAD@{58}: commit: CI errors for formatting fixed
-391f6c4a HEAD@{59}: commit: Fixed the yarn.lock file according to the CI dependencies and req
-6b32f2b4 HEAD@{60}: commit: yarn test fail errors in CI FIXED
-a3c12ce3 HEAD@{61}: checkout: moving from master to master
-a3c12ce3 HEAD@{62}: commit: Fixed the CI yarn test AUTO errors on Nav Bar
-560b326c HEAD@{63}: commit: PR CI auto yarn TEST conflict RESOLVED
-a13e801b HEAD@{64}: reset: moving to HEAD~1
-dfc9e353 HEAD@{65}: commit: Fixed yarn test CI auto errors for PR conflicts
-a13e801b HEAD@{66}: checkout: moving from master to master
-a13e801b HEAD@{67}: commit (merge): PR Merge Conflic RESOLVE
-e0e3308e HEAD@{68}: pull: Fast-forward
-f1f853c6 HEAD@{69}: commit: Final_Draft-I PR - I
-4d01e792 HEAD@{70}: reset: moving to HEAD
-4d01e792 HEAD@{71}: reset: moving to HEAD
-4d01e792 HEAD@{72}: commit: Week 5 Pt 1 BUG FIX
-6790c5b7 HEAD@{73}: reset: moving to HEAD
-6790c5b7 HEAD@{74}: commit: Week 4 Pt III
-43447418 HEAD@{75}: commit: WEEK - 4 Pt II
-42ff8a64 HEAD@{76}: commit (amend): WEEK 4
-33c788d4 HEAD@{77}: commit: This commit made the following changes
-d90d96fa HEAD@{78}: pull: Fast-forward
-902b5eb6 HEAD@{79}: commit: WEEK - 3
-013fd0a9 HEAD@{80}: clone: from https://github.com/Akshay-2007-1/CSE_liveness_frontend.git