diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index acb122517d..8dc09b284f 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -170,6 +170,9 @@ jobs:
     - name: Install dependencies
       run: make deps
 
+    - name: Generate components
+      run: make components
+
     - name: Build Kubernetes ${{ matrix.version }}
       run: |
         set -x
@@ -245,6 +248,9 @@ jobs:
     - name: Install dependencies
       run: make deps
 
+    - name: Generate components
+      run: make components
+
     - name: Build RS ${{ matrix.version }}
       run: |
         set -x
@@ -320,6 +326,9 @@ jobs:
     - name: Install dependencies
       run: make deps
 
+    - name: Generate components
+      run: make components
+
     - name: Build RDI ${{ matrix.version }}
       run: |
         set -x
@@ -395,6 +404,9 @@ jobs:
     - name: Install dependencies
       run: make deps
 
+    - name: Generate components
+      run: make components
+
     - name: Build RedisVL ${{ matrix.version }}
       run: |
         set -x
diff --git a/assets/css/index.css b/assets/css/index.css
index dcf0b36290..eeae34fba4 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -513,6 +513,28 @@ select {
   @apply block;
 }
 
+/* Jupyter example toggle visibility - same pattern as codetabs */
+/* When aria-expanded is not set (initial state), show all lines at full opacity */
+/* This is the default state showing only the step code */
+
+/* When aria-expanded="true", show full file with context lines dimmed */
+.thebe-container > .panel[aria-expanded="true"] .full-file-view .highlight .chroma > code > .line:not(.hl),
+.thebe-container > .panel[aria-expanded="true"] .full-file-view .highlight .chroma > .lntable .lntd code > .lnt,
+.thebe-container > .panel[aria-expanded="true"] .full-file-view .highlight .chroma > .lntable .lntd code > .line:not(.hl) {
+  @apply opacity-60;
+}
+
+/* Ensure highlighted lines (current step) have full opacity when expanded */
+.thebe-container > .panel[aria-expanded="true"] .full-file-view .highlight .chroma > code > .hl,
+.thebe-container > .panel[aria-expanded="true"] .full-file-view .highlight .chroma > .lntable .lntd code > .hl {
+  opacity: 1 !important;
+}
+
+.thebe-container > .panel .highlight .chroma > code > .hl,
+.thebe-container > .panel .highlight .chroma > .lntable .lntd code > .hl {
+  @apply bg-inherit;
+}
+
 .download-cards {
   @apply space-y-6 lg:space-y-0 max-w-[47rem] lg:max-w-full mx-auto lg:mx-0 lg:grid grid-cols-2 gap-x-6 items-start mb-[3.25rem];
 }
diff --git a/content/develop/clients/redis-py/_index.md b/content/develop/clients/redis-py/_index.md
index d5f594c0c6..82ab762ae0 100644
--- a/content/develop/clients/redis-py/_index.md
+++ b/content/develop/clients/redis-py/_index.md
@@ -48,23 +48,19 @@ pip install redis[hiredis]
 
 Connect to localhost on port 6379, set a value in Redis, and retrieve it. All responses are returned as bytes in Python. To receive decoded strings, set `decode_responses=True`. For more connection options, see [these examples](https://redis.readthedocs.io/en/stable/examples.html).
 
-{{< clients-example set="landing" step="connect" lang_filter="Python" description="Foundational: Connect to a Redis server and establish a client connection" difficulty="beginner" >}}
-{{< /clients-example >}}
+{{< jupyter-example set="landing" step="connect" lang_filter="Python" description="Connect to a Redis server and establish a client connection" />}}
 
 Store and retrieve a simple string.
 
-{{< clients-example set="landing" step="set_get_string" lang_filter="Python" description="Foundational: Set and retrieve string values using SET and GET commands" difficulty="beginner" >}}
-{{< /clients-example >}}
+{{< jupyter-example set="landing" step="set_get_string" depends="connect" lang_filter="Python" description="Set and retrieve string values using SET and GET commands" />}}
 
 Store and retrieve a dict.
 
-{{< clients-example set="landing" step="hash_operations" lang_filter="Python" description="Foundational: Store and retrieve hash data structures using HSET and HGETALL" difficulty="beginner" >}}
-{{< /clients-example >}}
+{{< jupyter-example set="landing" step="hash_operations" depends="connect" lang_filter="Python" description="Store and retrieve hash data structures using HSET and HGETALL" />}}
 
 Close the connection when you're done.
 
-{{< clients-example set="landing" step="close" lang_filter="Python" description="Foundational: Properly close a Redis client connection to release resources" difficulty="beginner" >}}
-{{< /clients-example >}}
+{{< jupyter-example set="landing" step="close" depends="connect" lang_filter="Python" description="Close the Redis connection" no_output="true" />}}
 
 ## More information
 
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 6e8ee9aa69..d01308670d 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -35,10 +35,6 @@
     {{ partial "scss.html" (dict "path" "scss/style.scss") }}
     {{ partialCached "css.html" . }}
 
-    {{ if .Page.Store.Get "hasOtelMetrics" }}
-    <link rel="stylesheet" href="{{ "css/otel-metrics.css" | relURL }}">
-    {{ end }}
-
     {{ block "head" . }}{{ end }}
 
     {{ partial "ai-metadata.html" . }}
@@ -55,6 +51,16 @@
 
     <script>window.HUGO_BASEURL = "{{ .Site.BaseURL }}"</script>
 
+    {{/* Compatibility fallback: shortcode body render sets these globals after <head>. */}}
+    {{ $binderRef := .Scratch.Get "binderRef" }}
+    {{ $kernelName := .Scratch.Get "kernelName" }}
+    {{ if $binderRef }}
+    <script>
+      window.thebeBinderRef = "{{ $binderRef }}";
+      window.thebeKernelName = "{{ $kernelName }}";
+    </script>
+    {{ end }}
+
     <script src='{{ "js/index.js" | relURL }}' defer></script>
     {{ partial "segment.html" . }}
     {{ partial "fullstory.html" . }}
@@ -119,14 +125,1746 @@
     <script src="{{ "js/decision-tree.js" | relURL }}"></script>
     {{ end }}
 
-    <!-- OpenTelemetry metrics functionality -->
-    {{ if .Page.Store.Get "hasOtelMetrics" }}
-    <script src="{{ "js/otel-metrics.js" | relURL }}"></script>
-    {{ end }}
-
     <!-- Timeline functionality -->
     {{ if .Page.Store.Get "hasTimeline" }}
     <script src="{{ "js/timeline.js" | relURL }}"></script>
     {{ end }}
+
+    <!-- Thebe interactive code functionality -->
+    {{ if .Page.Store.Get "hasThebe" }}
+    <!-- Thebe 0.9.0-rc with proper BinderHub support -->
+    <!-- Script AND CSS are loaded dynamically on first "Run here" click to prevent:
+         1. Auto-initialization of cells
+         2. Thebe CSS from hiding/breaking code display before activation -->
+    <!-- <script type="text/javascript" src="https://unpkg.com/thebe@rc/lib/index.js"></script> -->
+    <!-- <link rel="stylesheet" href="https://unpkg.com/thebe@rc/lib/thebe.css" /> -->
+
+    <!-- Thebe configuration for Redis BinderHub -->
+    <script type="text/x-thebe-config">
+      {
+        "bootstrap": false,
+        "requestKernel": false,
+        "binderOptions": {
+          "repo": "redis/binder-launchers",
+          "ref": "",
+          "binderUrl": "https://redis.io/binder/",
+          "repoProvider": "github",
+          "savedSession": {
+            "enabled": true,
+            "storagePrefix": "thebe-redis-"
+          }
+        },
+        "kernelOptions": {
+          "kernelName": ""
+        },
+        "codeMirrorConfig": {
+          "lineNumbers": false
+        },
+        "mountActivateWidget": false,
+        "mountStatusWidget": false,
+        "selector": ".thebe-cell"
+      }
+    </script>
+
+    <style>
+      /* Override Thebe CSS variables - prevent invisible text on dark background */
+      :root {
+        --jp-content-font-color1: rgb(255 255 255) !important;
+        --jp-content-font-color0: rgb(255 255 255) !important;
+        --jp-layout-color0: rgb(15 23 42) !important;
+        --jp-layout-color1: rgb(15 23 42) !important;
+        --jp-cell-editor-background: rgb(15 23 42) !important;
+        --jp-code-font-family: Space Mono, SF Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+      }
+
+
+
+      /* Hide Thebe default widgets completely */
+      .thebe-activate, .thebe-status {
+        display: none !important;
+      }
+
+      /* Inline Thebe status messages shown in the header row */
+      .session-expired-message,
+      .thebe-rate-limit-message {
+        font-size: 0.85em;
+        margin-right: 12px;
+        white-space: nowrap;
+      }
+      .session-expired-message {
+        color: #e57373; /* red-300 */
+      }
+      .thebe-rate-limit-message {
+        color: #fbbf24; /* amber-400 */
+      }
+
+
+
+      /* Loading overlay for cells */
+      .thebe-container.loading .thebe-cell::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(15, 23, 42, 0.9);
+        z-index: 10;
+      }
+      .thebe-container.loading .thebe-cell::after {
+        content: 'Connecting to kernel...';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: white;
+        font-family: Space Mono, monospace;
+        font-size: 0.875rem;
+        z-index: 11;
+      }
+      .thebe-container.loading.reconnecting .thebe-cell::after {
+        content: 'Connecting to existing kernel...';
+      }
+      .thebe-container.loading.kernel-ready .thebe-cell::after {
+        content: 'Running...';
+      }
+      .thebe-container {
+        position: relative;
+      }
+      .thebe-container .thebe-cell {
+        position: relative;
+      }
+
+      /* BLOCKED state - button is blocked until clean code is stored */
+      .thebe-run-btn.thebe-btn-blocked {
+        pointer-events: none;
+        opacity: 0.5;
+      }
+
+      /* Disabled state for all disabled buttons */
+      .thebe-run-btn.text-slate-500 {
+        position: relative;
+        cursor: not-allowed;
+      }
+
+      /* CSS tooltip for kernel unavailable state */
+      .thebe-run-btn.thebe-btn-kernel-unavailable::after {
+        content: 'Kernel server not available';
+        position: absolute;
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        background: rgb(30 41 59);
+        color: white;
+        padding: 0.5rem 0.75rem;
+        border-radius: 0.25rem;
+        font-size: 0.75rem;
+        white-space: nowrap;
+        z-index: 50;
+        margin-bottom: 0.5rem;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.15s ease;
+        pointer-events: none;
+      }
+      .thebe-run-btn.thebe-btn-kernel-unavailable:hover::after {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      /* CSS tooltip for dependent cells (after kernel is ready) */
+      .thebe-run-btn.text-slate-500:not(.thebe-btn-kernel-unavailable)::after {
+        content: 'Run the first code snippet to start the kernel';
+        position: absolute;
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        background: rgb(30 41 59);
+        color: white;
+        padding: 0.5rem 0.75rem;
+        border-radius: 0.25rem;
+        font-size: 0.75rem;
+        white-space: nowrap;
+        z-index: 50;
+        margin-bottom: 0.5rem;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.15s ease;
+        pointer-events: none;
+      }
+      .thebe-run-btn.text-slate-500:not(.thebe-btn-kernel-unavailable):hover::after {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      /* Loading spinner animation */
+      .thebe-run-btn.loading {
+        pointer-events: none;
+      }
+      .thebe-run-btn.loading svg {
+        animation: spin 1s linear infinite;
+      }
+      @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+
+      /* Thebe cell inside codetabs container */
+      .thebe-cell {
+        margin: 0;
+        border-radius: 0 0 0.5rem 0.5rem;
+        background-color: rgb(15 23 42);
+        overflow: hidden;
+        cursor: default;
+        transition: box-shadow 0.2s ease;
+        /* Ensure cell is always visible - override Thebe CSS */
+        display: block !important;
+        visibility: visible !important;
+        opacity: 1 !important;
+      }
+      /* Only show interactive styles after activation */
+      .thebe-container.activated .thebe-cell {
+        cursor: text;
+      }
+      .thebe-container.activated .thebe-cell:hover {
+        box-shadow: inset 0 0 0 1px rgb(71 85 105);
+      }
+      .thebe-container.activated .thebe-cell:focus-within {
+        box-shadow: inset 0 0 0 2px rgb(89 97 255);
+      }
+      .thebe-cell code {
+        display: block !important;
+        visibility: visible !important;
+        opacity: 1 !important;
+        padding: 0.5rem 1rem;
+        white-space: pre;
+        font-family: Space Mono, SF Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        font-size: 0.875rem;
+        line-height: 1.625;
+        color: rgb(255 255 255);
+        background-color: rgb(15 23 42);
+        min-height: 1.625em; /* Ensure code block has minimum height even before font loads */
+      }
+      /* Hide the original code element once CodeMirror takes over */
+      .thebe-cell .CodeMirror ~ code,
+      .thebe-cell .cm-editor ~ code {
+        display: none !important;
+      }
+
+      /* CodeMirror 5 editor dark theme - initially not interactive */
+      .thebe-cell .CodeMirror {
+        position: relative; /* Positioning context for session expired message */
+        background-color: rgb(15 23 42) !important;
+        color: rgb(255 255 255) !important;
+        font-family: Space Mono, SF Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        font-size: 0.875rem;
+        line-height: 1.625;
+        height: auto !important;
+        padding: 1rem;
+        border-radius: 0.5rem 0.5rem 0 0;
+        cursor: default;
+        pointer-events: none;
+      }
+      /* Enable CodeMirror 5 interaction after activation */
+      .thebe-container.activated .thebe-cell .CodeMirror {
+        cursor: text;
+        pointer-events: auto;
+      }
+      /* Hide CodeMirror 5 gutters and line numbers for cleaner look */
+      .thebe-cell .CodeMirror-gutters,
+      .thebe-cell .CodeMirror-linenumber {
+        display: none !important;
+      }
+      .thebe-cell .CodeMirror-lines {
+        padding-left: 0 !important;
+      }
+
+      /* CodeMirror 6 support (Thebe 0.9.x uses CM6) */
+      .thebe-cell .cm-editor {
+        background-color: rgb(15 23 42) !important;
+        color: rgb(255 255 255) !important;
+        font-family: Space Mono, SF Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+        font-size: 0.875rem !important;
+        line-height: 1.625 !important;
+        height: auto !important;
+        padding: 1rem;
+        border-radius: 0.5rem 0.5rem 0 0;
+        cursor: default;
+        pointer-events: none;
+      }
+      /* Enable CodeMirror 6 interaction after activation */
+      .thebe-container.activated .thebe-cell .cm-editor {
+        cursor: text;
+        pointer-events: auto;
+      }
+      /* Hide CodeMirror 6 gutters and line numbers */
+      .thebe-cell .cm-gutters,
+      .thebe-cell .cm-lineNumbers,
+      .thebe-cell .cm-gutter {
+        display: none !important;
+      }
+      /* Ensure CM6 lines display as blocks */
+      .thebe-cell .cm-line {
+        display: block !important;
+      }
+      .thebe-cell .cm-content {
+        padding: 0 !important;
+        display: block !important;
+      }
+      .thebe-cell .cm-scroller {
+        overflow: visible !important;
+      }
+
+      /* Cursor (caret) - hidden by default - CM5 */
+      .thebe-cell .CodeMirror-cursor {
+        border-left: 2px solid rgb(255 255 255) !important;
+        visibility: hidden !important;
+      }
+      .thebe-cell .CodeMirror-cursors {
+        visibility: hidden !important;
+      }
+      /* Show cursor with blink animation ONLY when CodeMirror is focused - CM5 */
+      .thebe-cell .CodeMirror.CodeMirror-focused .CodeMirror-cursor {
+        visibility: visible !important;
+        animation: blink 1s step-end infinite !important;
+      }
+      .thebe-cell .CodeMirror.CodeMirror-focused .CodeMirror-cursors {
+        visibility: visible !important;
+      }
+      /* Cursor - CM6 */
+      .thebe-cell .cm-cursor {
+        border-left: 2px solid rgb(255 255 255) !important;
+        visibility: hidden !important;
+      }
+      /* Show cursor ONLY when CM6 editor is focused */
+      .thebe-cell .cm-editor.cm-focused .cm-cursor {
+        visibility: visible !important;
+      }
+      @keyframes blink {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0; }
+      }
+
+      /* Thebe cell highlight - inherit site Chroma styles, just reset container */
+      .thebe-cell .highlight {
+        background: transparent !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        border-radius: 0 !important;
+      }
+      .thebe-cell .highlight pre,
+      .thebe-cell .highlight .chroma {
+        background: transparent !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        border-radius: 0 !important;
+      }
+      .thebe-cell .highlight code {
+        background: transparent !important;
+      }
+
+      /* CodeMirror classes (after Thebe activation) - match site Chroma colors */
+      .thebe-cell .cm-keyword {
+        color: rgb(248 113 113) !important; /* text-red-400 */
+      }
+      .thebe-cell .cm-builtin,
+      .thebe-cell .cm-def {
+        color: rgb(196 181 253) !important; /* text-purple-300 */
+        font-weight: 700;
+      }
+      .thebe-cell .cm-string,
+      .thebe-cell .cm-string-2,
+      .thebe-cell .cm-number,
+      .thebe-cell .cm-atom {
+        color: rgb(96 165 250) !important; /* text-blue-400 */
+      }
+      .thebe-cell .cm-comment {
+        color: rgb(100 116 139) !important; /* text-slate-500 */
+        font-style: italic;
+      }
+      .thebe-cell .cm-operator {
+        color: rgb(248 113 113) !important; /* text-red-400 */
+        font-weight: 700;
+      }
+      .thebe-cell .cm-variable,
+      .thebe-cell .cm-variable-2,
+      .thebe-cell .cm-variable-3,
+      .thebe-cell .cm-property {
+        color: inherit !important;
+      }
+      .thebe-cell .cm-meta {
+        color: rgb(196 181 253) !important; /* text-purple-300 */
+      }
+      .thebe-cell .cm-error {
+        color: rgb(248 113 113) !important; /* text-red-400 */
+      }
+
+      /* Hide empty output area */
+      .thebe-output:empty,
+      .thebe-output:not(:has(*)),
+      .thebe-output .jp-OutputArea:empty,
+      .thebe-output:has(.jp-OutputArea:empty) {
+        display: none !important;
+      }
+
+      /* Output area styling - CLEAN BASELINE (no container animation) */
+      .thebe-output {
+        background-color: rgb(15 23 42) !important;
+        color: rgb(203 213 225) !important;
+        font-family: Space Mono, SF Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+        font-size: 0.875rem !important;
+        line-height: 1.625 !important;
+      }
+      .thebe-output:has(.jp-OutputArea-child) {
+        padding: 0.5rem 1rem;
+        margin-top: 0;
+        border-radius: 0 0 0.5rem 0.5rem;
+      }
+      .thebe-output * {
+        background-color: rgb(15 23 42) !important;
+        color: rgb(203 213 225) !important;
+        font-family: inherit !important;
+        font-size: inherit !important;
+        line-height: inherit !important;
+        padding: 0 !important;
+        margin: 0 !important;
+      }
+
+      /* Simple fade animation on CONTENT only (not container) */
+      @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      .thebe-output .jp-OutputArea-child {
+        animation: fadeIn 0.2s ease-out;
+      }
+
+      /* Output container - always visible at panel level */
+      .thebe-output-container {
+        width: 100%;
+        display: block !important; /* Force display regardless of parent state */
+      }
+
+      /* Hide empty output container */
+      .thebe-output-container:empty {
+        display: none !important;
+      }
+
+      /* Ensure output is visible in both collapsed and expanded views */
+      .panel[aria-expanded="true"] .thebe-output-container,
+      .panel:not([aria-expanded]) .thebe-output-container {
+        display: block !important;
+      }
+
+      /* Force output elements to be visible */
+      .thebe-output-container .thebe-output {
+        display: block !important;
+      }
+
+      /* But still hide if empty */
+      .thebe-output-container .thebe-output:empty,
+      .thebe-output-container .thebe-output .jp-OutputArea:empty,
+      .thebe-output-container .thebe-output:has(.jp-OutputArea:empty) {
+        display: none !important;
+      }
+
+      /* Hide Thebe's default buttons visually but keep in DOM for clicking */
+      .thebe-cell .thebelab-run-button,
+      .thebe-cell > button:not(.thebe-run-btn),
+      .thebelab-button,
+      .thebe-controls,
+      .thebelab-controls,
+      .thebe-button,
+      [data-thebe-ui],
+      .jp-Toolbar,
+      .jp-Toolbar-item,
+      .lm-Widget.jp-Toolbar,
+      button[data-commandlinker-command] {
+        position: absolute !important;
+        left: -9999px !important;
+        opacity: 0 !important;
+        pointer-events: none !important;
+        width: 1px !important;
+        height: 1px !important;
+        overflow: hidden !important;
+      }
+    </style>
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        // Track which cells have been executed and kernel state
+        const executedCells = new Set();
+        let kernelReady = false;
+        let thebeBootstrapped = false;
+        let notebookAttached = false;  // Track when notebook is attached to session
+        let firstCellExecuted = false; // Track if first cell has run to prevent re-disabling dependent buttons
+        let lastBinderRateLimitError = null;
+        let thebeStatusHandlerAttached = false;
+        const RATE_LIMIT_MESSAGE = "Too many requests. Please try again later.";
+
+        // Function to restore clean cells from the hidden script element
+        // The script element is NEVER touched by Thebe, so it's always clean
+        function restoreCleanCells() {
+          document.querySelectorAll('.thebe-container').forEach(function(container) {
+            const cleanSource = container.querySelector('script[type="text-x-clean-source"]');
+            const cell = container.querySelector('.thebe-cell');
+            if (cleanSource && cell) {
+              const cleanCode = cleanSource.textContent;
+              // Nuke everything in the cell and recreate with clean code
+              cell.innerHTML = '<code></code>';
+              cell.querySelector('code').textContent = cleanCode;
+            }
+          });
+        }
+
+        // Unblock buttons - the hidden source element is always clean, no need to wait
+        document.querySelectorAll('.thebe-run-btn.thebe-btn-blocked').forEach(function(btn) {
+          btn.classList.remove('thebe-btn-blocked');
+        });
+
+        // Lazy-load Thebe script - only load when user clicks "Run here"
+        // This prevents Thebe from auto-processing cells on page load
+        let thebeLoaded = false;
+        let thebeLoading = false;
+        let thebeLoadError = null;
+
+        function loadThebe() {
+          return new Promise(function(resolve, reject) {
+            if (thebeLoaded) {
+              resolve();
+              return;
+            }
+            if (thebeLoadError) {
+              reject(thebeLoadError);
+              return;
+            }
+            if (thebeLoading) {
+              // Wait for existing load
+              const checkLoaded = setInterval(function() {
+                if (thebeLoaded) {
+                  clearInterval(checkLoaded);
+                  resolve();
+                } else if (thebeLoadError) {
+                  clearInterval(checkLoaded);
+                  reject(thebeLoadError);
+                }
+              }, 100);
+              return;
+            }
+
+            thebeLoading = true;
+
+            // Load Thebe CSS first
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = 'https://unpkg.com/thebe@rc/lib/thebe.css';
+            document.head.appendChild(link);
+
+            // Then load Thebe script
+            const script = document.createElement('script');
+            script.src = 'https://unpkg.com/thebe@rc/lib/index.js';
+            script.onload = function() {
+              thebeLoaded = true;
+              thebeLoading = false;
+              thebeLoadError = null;
+              resolve();
+            };
+            script.onerror = function() {
+              thebeLoading = false;
+              thebeLoadError = new Error('Failed to load Thebe script');
+              reject(thebeLoadError);
+            };
+            document.head.appendChild(script);
+          });
+        }
+
+        // Configure page-specific session storage
+        // Get current page path for unique session key
+        const pagePath = window.location.pathname.replace(/\//g, '-').replace(/^-|-$/g, '') || 'home';
+        // Get dynamic binder ref and kernel name from window (set by shortcode render; head is fallback only)
+        if (!window.thebeBinderRef || !window.thebeKernelName) {
+          console.error('[Thebe] Missing binder ref or kernel name. Interactive notebooks require both.');
+          return; // Skip all Thebe initialization
+        }
+        const binderRef = window.thebeBinderRef;
+        const sessionStorageKey = 'thebe-redis-' + pagePath + '-' + binderRef;
+
+        // Protection against rapid refresh corruption:
+        // Use sessionStorage (cleared on tab close, but persists across refreshes)
+        // to detect if a session restore is in progress
+        const SESSION_RESTORE_KEY = 'thebe-session-restore-in-progress';
+        const SESSION_RESTORE_TIMEOUT = 10000; // 10 seconds max for restore
+
+        // Check if a restore was in progress when we refreshed
+        const restoreInProgress = sessionStorage.getItem(SESSION_RESTORE_KEY);
+        if (restoreInProgress) {
+          const restoreStartTime = parseInt(restoreInProgress, 10);
+          const elapsed = Date.now() - restoreStartTime;
+          if (elapsed < SESSION_RESTORE_TIMEOUT) {
+            console.warn('[Thebe Session] Detected rapid refresh during session restore. Waiting...');
+            // Clear the flag after a brief delay to allow Thebe to settle
+            setTimeout(function() {
+              sessionStorage.removeItem(SESSION_RESTORE_KEY);
+            }, 500);
+          } else {
+            // Restore took too long, clear the stale flag
+            sessionStorage.removeItem(SESSION_RESTORE_KEY);
+          }
+        }
+
+        // Check for session expiration flag (set by handleKernelExpired)
+        // This flag survives page refresh and ensures we start in clean state
+        const sessionExpired = localStorage.getItem('thebe-session-expired');
+        if (sessionExpired) {
+          // Clear the flag
+          localStorage.removeItem('thebe-session-expired');
+          // Clear any stale session data that might still be in localStorage
+          for (let i = localStorage.length - 1; i >= 0; i--) {
+            const key = localStorage.key(i);
+            if (key && key.startsWith('thebe-binder-')) {
+              localStorage.removeItem(key);
+            }
+          }
+        }
+
+        // Check for existing Thebe binder session in localStorage
+        // The actual key format is: thebe-binder-{binderUrl}/build/gh/{repo}/{ref}
+        let existingSession = null;
+        let sessionStorageKey_actual = null;
+
+        // Search for any thebe-binder- key in localStorage
+        for (let i = 0; i < localStorage.length; i++) {
+          const key = localStorage.key(i);
+          if (key && key.startsWith('thebe-binder-')) {
+            try {
+              const data = localStorage.getItem(key);
+              const sessionData = JSON.parse(data);
+              // Check if it has valid session fields (id and token)
+              if (sessionData && sessionData.id && sessionData.token) {
+                existingSession = data;
+                sessionStorageKey_actual = key;
+                break;
+              }
+            } catch (e) {
+              // Skip invalid JSON
+            }
+          }
+        }
+
+        function clearContainerMessages(container) {
+          container.querySelectorAll('.session-expired-message, .thebe-rate-limit-message').forEach(function(message) {
+            message.remove();
+          });
+        }
+
+        function showContainerMessage(container, className, message) {
+          // Find the header row (contains the action buttons)
+          var header = container.querySelector('.codetabs-header .flex.items-center.gap-2:last-child');
+          if (!header) return;
+
+          clearContainerMessages(container);
+
+          var msg = document.createElement('span');
+          msg.className = className;
+          msg.textContent = message;
+
+          var firstButton = header.querySelector('button, a');
+          if (firstButton) {
+            header.insertBefore(msg, firstButton);
+          }
+        }
+
+        function setRunButtonState(btn, enabled, title) {
+          const hasDependencies = btn.getAttribute('data-original-depends') === 'true';
+          btn.classList.remove(
+            'loading',
+            'thebe-btn-kernel-unavailable',
+            'thebe-btn-blocked',
+            'text-slate-500',
+            'cursor-not-allowed',
+            'text-slate-300',
+            'hover:text-white'
+          );
+
+          if (!enabled || hasDependencies) {
+            btn.classList.add('text-slate-500', 'cursor-not-allowed');
+            btn.title = title || 'Run the first cell to start the kernel';
+            return;
+          }
+
+          btn.classList.add('text-slate-300', 'hover:text-white');
+          btn.title = title || 'Run this code on the page';
+        }
+
+        function resetButtonsForFreshKernelStart() {
+          document.querySelectorAll('.thebe-run-btn').forEach(function(btn) {
+            const hasDependencies = btn.getAttribute('data-original-depends') === 'true';
+            setRunButtonState(btn, !hasDependencies, hasDependencies ? 'Run the first cell to start the kernel' : 'Run this code on the page');
+          });
+        }
+
+        function resetThebeAfterBootstrapFailure() {
+          kernelReady = false;
+          notebookAttached = false;
+          thebeBootstrapped = false;
+          firstCellExecuted = false;
+          executedCells.clear();
+          existingSession = null;
+          lastBinderRateLimitError = null;
+          sessionStorage.removeItem(SESSION_RESTORE_KEY);
+
+          if (sessionStorageKey_actual) {
+            localStorage.removeItem(sessionStorageKey_actual);
+            sessionStorageKey_actual = null;
+          }
+
+          document.querySelectorAll('.thebe-container').forEach(function(container) {
+            if (container._outputObserver) {
+              container._outputObserver.disconnect();
+              delete container._outputObserver;
+            }
+
+            container.classList.remove('loading', 'reconnecting', 'kernel-ready', 'activated');
+
+            if (container._wasHidden) {
+              const panel = container.querySelector('.panel');
+              const stepCodeView = panel ? panel.querySelector('.step-code-view') : null;
+              const fullFileView = panel ? panel.querySelector('.full-file-view') : null;
+              if (stepCodeView) {
+                stepCodeView.style.display = 'none';
+              }
+              if (fullFileView) {
+                fullFileView.style.display = '';
+              }
+              delete container._wasHidden;
+            }
+
+            clearContainerMessages(container);
+
+            const outputContainer = container.querySelector('.thebe-output-container');
+            if (outputContainer) {
+              outputContainer.innerHTML = '';
+            }
+          });
+
+          restoreCleanCells();
+          resetButtonsForFreshKernelStart();
+        }
+
+        function getRequestUrl(input) {
+          if (typeof input === 'string') {
+            return input;
+          }
+          if (input && typeof input.url === 'string') {
+            return input.url;
+          }
+          return '';
+        }
+
+        function isBinderHubRequest(input) {
+          const url = getRequestUrl(input);
+          return !!(url && url.includes('/binder/') && url.includes('/build/'));
+        }
+
+        function getCloudflareMitigation(response) {
+          if (!response || !response.headers || typeof response.headers.get !== 'function') {
+            return '';
+          }
+
+          return (response.headers.get('cf-mitigated') || '').toLowerCase();
+        }
+
+        function isCloudflareChallengePage(response) {
+          if (!response) {
+            return false;
+          }
+
+          if (response.status === 403 || response.status === 429) {
+            return true;
+          }
+
+          if (getCloudflareMitigation(response) === 'challenge') {
+            return true;
+          }
+
+          const contentType = response && response.headers && typeof response.headers.get === 'function'
+            ? (response.headers.get('content-type') || '').toLowerCase()
+            : '';
+
+          return contentType.includes('text/html');
+        }
+
+        function isRateLimitError(error) {
+          if (!error) {
+            return false;
+          }
+
+          const message = [error.message, error.reason, error.error]
+            .filter(Boolean)
+            .join(' ')
+            .toLowerCase();
+
+          return error.status === 429 ||
+            error.status === 403 ||
+            error.statusCode === 429 ||
+            error.statusCode === 403 ||
+            isCloudflareChallengePage(error.response) ||
+            isCloudflareChallengePage(error.cause) ||
+            error.cfMitigated === 'challenge' ||
+            message.includes('429') ||
+            message.includes('403') ||
+            message.includes('rate limit') ||
+            message.includes('too many requests') ||
+            message.includes('challenge');
+        }
+
+        function createRateLimitError(message, response) {
+          const error = new Error(message || RATE_LIMIT_MESSAGE);
+          error.status = response && typeof response.status === 'number' ? response.status : 429;
+          if (response) {
+            error.response = response;
+            const cfMitigated = getCloudflareMitigation(response);
+            if (cfMitigated) {
+              error.cfMitigated = cfMitigated;
+            }
+          }
+          return error;
+        }
+
+        async function probeBinderHubRateLimit(url, fetchImpl) {
+          const requestUrl = getRequestUrl(url);
+          if (!isBinderHubRequest(requestUrl) || typeof fetchImpl !== 'function') {
+            return null;
+          }
+
+          try {
+            const response = await fetchImpl(requestUrl, {
+              method: 'HEAD',
+              headers: {
+                'Accept': 'text/event-stream'
+              }
+            });
+
+            if (response && isCloudflareChallengePage(response)) {
+              const error = createRateLimitError(RATE_LIMIT_MESSAGE, response);
+              lastBinderRateLimitError = error;
+              return error;
+            }
+          } catch (error) {
+            if (isRateLimitError(error)) {
+              lastBinderRateLimitError = error;
+              return error;
+            }
+          }
+
+          return null;
+        }
+
+        async function preflightRateLimitCheck(binderUrl, repo, ref) {
+          console.log('[Thebe Debug] preflightRateLimitCheck called:', { binderUrl, repo, ref });
+
+          const normalizedBinderUrl = typeof binderUrl === 'string' && binderUrl
+            ? (binderUrl.endsWith('/') ? binderUrl : binderUrl + '/')
+            : '';
+
+          if (!normalizedBinderUrl || !repo || !ref || typeof window.fetch !== 'function') {
+            console.log('[Thebe Debug] preflightRateLimitCheck early return - missing params');
+            return null;
+          }
+
+          const buildUrl = `${normalizedBinderUrl}build/gh/${repo}/${ref}`;
+
+          console.log('[Thebe Debug] preflightRateLimitCheck URL:', buildUrl);
+
+          try {
+            const response = await window.fetch(buildUrl, {
+              method: 'HEAD',
+              mode: 'cors',
+              credentials: 'omit'
+            });
+
+            console.log('[Thebe Debug] preflightRateLimitCheck response:', {
+              status: response.status,
+              ok: response.ok,
+              contentType: response.headers.get('content-type'),
+              cfMitigated: response.headers.get('cf-mitigated')
+            });
+
+            if (response && isCloudflareChallengePage(response)) {
+              console.log('[Thebe Debug] Cloudflare challenge detected!');
+              const error = createRateLimitError(RATE_LIMIT_MESSAGE, response);
+              lastBinderRateLimitError = error;
+              return error;
+            }
+
+            console.log('[Thebe Debug] preflightRateLimitCheck - no rate limit detected');
+          } catch (error) {
+            console.log('[Thebe Debug] preflightRateLimitCheck error:', error.message, error);
+          }
+
+          return null;
+        }
+
+        async function withBinderRateLimitDetection(fn) {
+          const originalFetch = typeof window.fetch === 'function' ? window.fetch.bind(window) : null;
+          const OriginalEventSource = typeof window.EventSource === 'function' ? window.EventSource : null;
+          const binderRateLimitChecks = [];
+
+          if (originalFetch) {
+            window.fetch = async function(input, init) {
+              const response = await originalFetch(input, init);
+
+              if (isBinderHubRequest(input) && response && isCloudflareChallengePage(response)) {
+                let responseText = '';
+                try {
+                  responseText = await response.clone().text();
+                } catch (readError) {
+                  // Ignore response body read errors - status code is enough
+                }
+
+                const error = createRateLimitError(responseText || RATE_LIMIT_MESSAGE, response);
+                lastBinderRateLimitError = error;
+                throw error;
+              }
+
+              return response;
+            };
+          }
+
+          if (OriginalEventSource && originalFetch) {
+            class RateLimitAwareEventSource extends OriginalEventSource {
+              constructor(url, eventSourceInitDict) {
+                super(url, eventSourceInitDict);
+
+                const requestUrl = getRequestUrl(url);
+                if (isBinderHubRequest(requestUrl)) {
+                  let rateLimitCheck = null;
+                  const maybeDetectRateLimit = () => {
+                    if (lastBinderRateLimitError) {
+                      return;
+                    }
+                    if (!rateLimitCheck) {
+                      rateLimitCheck = probeBinderHubRateLimit(requestUrl, originalFetch)
+                        .catch(function() {
+                          return null;
+                        });
+                      binderRateLimitChecks.push(rateLimitCheck);
+                    }
+                  };
+
+                  this.addEventListener('error', maybeDetectRateLimit);
+                }
+              }
+            }
+
+            window.EventSource = RateLimitAwareEventSource;
+          }
+
+          try {
+            return await fn();
+          } catch (error) {
+            if (!lastBinderRateLimitError && binderRateLimitChecks.length > 0) {
+              await Promise.allSettled(binderRateLimitChecks);
+            }
+            throw lastBinderRateLimitError || error;
+          } finally {
+            if (originalFetch) {
+              window.fetch = originalFetch;
+            }
+            if (OriginalEventSource) {
+              window.EventSource = OriginalEventSource;
+            }
+          }
+        }
+
+        function handleRateLimitError(error) {
+          console.warn('[Thebe Session] BinderHub rate limit detected:', error);
+          resetThebeAfterBootstrapFailure();
+          document.querySelectorAll('.thebe-container').forEach(function(container) {
+            showContainerMessage(container, 'thebe-rate-limit-message', RATE_LIMIT_MESSAGE);
+          });
+        }
+
+        // Function to enable all buttons when kernel is ready
+        function enableAllButtons() {
+          document.querySelectorAll('.thebe-run-btn').forEach(function(btn) {
+            // Remove kernel unavailable state AND blocked state
+            btn.classList.remove('thebe-btn-kernel-unavailable', 'thebe-btn-blocked', 'text-slate-500', 'cursor-not-allowed');
+
+            // Check if this button has dependencies
+            const hasDependencies = btn.getAttribute('data-original-depends') === 'true';
+
+            if (hasDependencies && !firstCellExecuted) {
+              // Keep dependent buttons disabled until first cell runs
+              // BUT: if first cell has already run, enable them immediately
+              btn.classList.add('text-slate-500', 'cursor-not-allowed');
+              btn.title = 'Run the first cell to start the kernel';
+            } else {
+              // Enable non-dependent buttons (or dependent buttons if first cell has run)
+              btn.classList.add('text-slate-300', 'hover:text-white');
+              btn.title = 'Run this code on the page';
+            }
+          });
+        }
+
+
+
+        // Function to configure CodeMirror keyboard shortcuts
+        // This is the proper way to add shortcuts to CodeMirror - it's how Jupyter does it
+        function configureCodeMirrorShortcuts() {
+          document.querySelectorAll('.CodeMirror').forEach(function(cmElement) {
+            if (cmElement.CodeMirror) {
+              const cm = cmElement.CodeMirror;
+              const existingKeys = cm.getOption('extraKeys') || {};
+
+              // Define the handler function for both shortcuts
+              const executeHandler = function(cm) {
+                // Find the container and run button
+                const cell = cm.getWrapperElement().closest('.thebe-cell');
+                const container = cell ? cell.closest('.thebe-container') : null;
+
+                if (container) {
+                  const runButton = container.querySelector('.thebe-run-btn');
+                  if (runButton && !runButton.classList.contains('text-slate-500')) {
+                    // Dispatch a MouseEvent that will properly bubble for event delegation
+                    const clickEvent = new MouseEvent('click', {
+                      bubbles: true,
+                      cancelable: true,
+                      view: window
+                    });
+                    runButton.dispatchEvent(clickEvent);
+                  }
+                }
+              };
+
+              // Add both Cmd-Enter (Mac) and Ctrl-Enter (Windows/Linux)
+              cm.setOption('extraKeys', Object.assign({}, existingKeys, {
+                'Cmd-Enter': executeHandler,
+                'Ctrl-Enter': executeHandler
+              }));
+            }
+          });
+        }
+
+        // Function to handle kernel expiration/disconnection
+        function handleKernelExpired() {
+          // Clear localStorage session so fresh start on reload
+          if (sessionStorageKey_actual) {
+            localStorage.removeItem(sessionStorageKey_actual);
+          }
+
+          // Set a flag to indicate session expired (survives page refresh)
+          // This ensures the next page load starts in clean state
+          localStorage.setItem('thebe-session-expired', 'true');
+
+          document.querySelectorAll('.thebe-container').forEach(function(container) {
+            showContainerMessage(container, 'session-expired-message', 'Please refresh the page to start a new session.');
+          });
+        }
+
+        // Expose for testing
+        window.handleKernelExpired = handleKernelExpired;
+
+        // Function to enable dependent cell buttons (called after first cell runs)
+        function enableDependentButtons() {
+          firstCellExecuted = true; // Mark that first cell has run
+          const dependentButtons = document.querySelectorAll('.thebe-container[data-depends] .thebe-run-btn');
+          dependentButtons.forEach(function(btn) {
+            btn.classList.remove('text-slate-500', 'cursor-not-allowed');
+            btn.classList.add('text-slate-300', 'hover:text-white');
+            btn.title = 'Run this code on the page';
+          });
+        }
+
+        // Function to bootstrap Thebe (extracted for reuse)
+        async function bootstrapThebe(isAutoReconnect = false) {
+          if (thebeBootstrapped) {
+            return true;
+          }
+
+          thebeBootstrapped = true;
+          lastBinderRateLimitError = null;
+
+          // Mark session restore in progress to protect against rapid refreshes
+          sessionStorage.setItem(SESSION_RESTORE_KEY, Date.now().toString());
+
+          // NOTE: Loading state is now managed by individual click handlers (lines 1189-1190)
+          // This prevents all blocks from showing "Starting kernel..." when only one is clicked
+
+          try {
+            // Load Thebe using shared loader
+            await loadThebe();
+
+            // Wait for Thebe to finish any auto-initialization
+            await new Promise(function(r) { setTimeout(r, 100); });
+
+            // Set up Thebe status event listener
+            if (!thebeStatusHandlerAttached && typeof thebelab !== 'undefined' && thebelab.on) {
+              thebeStatusHandlerAttached = true;
+              thebelab.on("status", function (evt, data) {
+                if (isRateLimitError(data) || lastBinderRateLimitError) {
+                  handleRateLimitError(lastBinderRateLimitError || data);
+                  return;
+                }
+
+                // Check for real kernel death (not just temporary shutdown)
+                if (data.status === "failed" || data.status === "disconnected" || data.status === "dead") {
+                  handleKernelExpired();
+                  return;
+                }
+
+                // For "shutdown" status, only trigger if the message indicates permanent death
+                if (data.status === "shutdown") {
+                  const msg = data.message || '';
+                  if (msg.includes('[dead]') || msg.includes('disposed')) {
+                    handleKernelExpired();
+                    return;
+                  }
+                  // Ignore other shutdown messages (like [unknown]) - they may be temporary
+                }
+
+                // Check for WebSocket connection loss (kernel pod deleted or died)
+                if (data.message && (data.message.includes("Connection lost") ||
+                    data.message.includes("reconnecting"))) {
+                  handleKernelExpired();
+                  return;
+                }
+
+                // Track when notebook is attached to session - this is the true "ready" state
+                if (data.status === "attached" && data.subject === "notebook") {
+                  notebookAttached = true;
+                  kernelReady = true;
+                  // Clear the protection flag - session is now stable
+                  sessionStorage.removeItem(SESSION_RESTORE_KEY);
+                  // Add kernel-ready class to all containers
+                  document.querySelectorAll('.thebe-container').forEach(function(c) {
+                    c.classList.add('kernel-ready');
+                  });
+                  // CRITICAL: Add 'activated' class to enable CodeMirror editing
+                  // This is needed for auto-bootstrap to make editors editable
+                  document.querySelectorAll('.thebe-container').forEach(function(c) {
+                    c.classList.add('activated');
+                  });
+                  // Enable all buttons now that kernel is ready
+                  enableAllButtons();
+                  // Configure CodeMirror keyboard shortcuts (Cmd+Enter / Ctrl+Enter)
+                  configureCodeMirrorShortcuts();
+                  // Note: Removed focus() call that was causing scroll jump on page refresh
+                  // Users can click into any editor to focus when they want to edit
+                }
+
+                // Also handle server-ready/ready for backwards compatibility
+                if (data.status === "server-ready" || data.status === "ready") {
+                  // Don't set kernelReady here - wait for "attached" event
+                }
+              });
+              thebelab.on("error", function (evt, data) {
+                if (isRateLimitError(data) || lastBinderRateLimitError) {
+                  handleRateLimitError(lastBinderRateLimitError || data);
+                }
+              });
+            }
+
+            // Override Thebe config with page-specific storage prefix
+            if (typeof thebelab !== 'undefined' && thebelab.bootstrap) {
+              // CRITICAL: Restore clean cells before bootstrap to prevent garbage
+              restoreCleanCells();
+
+              // Get the existing config
+              const configScript = document.querySelector('script[type="text/x-thebe-config"]');
+              if (configScript) {
+                try {
+                  const config = JSON.parse(configScript.textContent);
+
+                  // Use binder ref and kernel name from window (set by shortcode render; head is fallback only)
+                  if (!window.thebeBinderRef || !window.thebeKernelName) {
+                    console.error('[Thebe] Missing binder ref or kernel name. Interactive notebooks require both.');
+                    return; // Skip bootstrap
+                  }
+
+                  // Update binder ref to use dynamic value from source file
+                  if (config.binderOptions) {
+                    config.binderOptions.ref = window.thebeBinderRef;
+                  }
+
+                  // Update kernel name to use dynamic value from source file
+                  if (config.kernelOptions) {
+                    config.kernelOptions.kernelName = window.thebeKernelName;
+                  }
+
+                  // Update storage prefix to be page-specific
+                  if (config.binderOptions && config.binderOptions.savedSession) {
+                    config.binderOptions.savedSession.storagePrefix = sessionStorageKey + '-';
+                  }
+
+                  if (!isAutoReconnect && config.binderOptions) {
+                    console.log('[Thebe Debug] About to call preflightRateLimitCheck with:', {
+                      binderUrl: config.binderOptions.binderUrl,
+                      repo: config.binderOptions.repo,
+                      ref: config.binderOptions.ref
+                    });
+
+                    const preflightRateLimitError = await preflightRateLimitCheck(
+                      config.binderOptions.binderUrl,
+                      config.binderOptions.repo,
+                      config.binderOptions.ref
+                    );
+
+                    if (preflightRateLimitError) {
+                      console.warn('[Thebe Session] Pre-flight rate limit detected');
+                      handleRateLimitError(preflightRateLimitError);
+                      return false;
+                    }
+                  }
+
+                  config.requestKernel = true;
+                  // Bootstrap with updated config
+                  await withBinderRateLimitDetection(function() {
+                    return thebelab.bootstrap(config);
+                  });
+                } catch (e) {
+                  if (isRateLimitError(e) || lastBinderRateLimitError) {
+                    handleRateLimitError(lastBinderRateLimitError || e);
+                    return false;
+                  }
+                  console.error('[Thebe Session] Failed to parse/update config:', e);
+                  // Fallback to default bootstrap
+                  await withBinderRateLimitDetection(function() {
+                    return thebelab.bootstrap();
+                  });
+                }
+              } else {
+                await withBinderRateLimitDetection(function() {
+                  return thebelab.bootstrap();
+                });
+              }
+
+              // Hook into WebSocket close event after bootstrap
+              try {
+                // Wait a bit for Thebe to set up the kernel connection
+                await new Promise(function(r) { setTimeout(r, 1000); });
+
+                // Try to access the WebSocket through various possible paths
+                let ws = null;
+
+                // Try thebelab.manager (Thebe 0.9.x structure)
+                if (thebelab.manager && thebelab.manager.kernel && thebelab.manager.kernel.ws) {
+                  ws = thebelab.manager.kernel.ws;
+                }
+                // Try thebelab.kernel (older structure)
+                else if (thebelab.kernel && thebelab.kernel.ws) {
+                  ws = thebelab.kernel.ws;
+                }
+
+                // If we found the WebSocket, add close listener
+                if (ws) {
+                  ws.addEventListener('close', function(event) {
+                    handleKernelExpired();
+                  });
+                }
+              } catch (e) {
+                console.error('[Thebe WebSocket] Failed to hook into WebSocket:', e);
+              }
+            }
+
+            // Wait for kernel to be ready (with timeout)
+            if (!kernelReady) {
+              await new Promise(function(resolve) {
+                const maxWait = 60000; // 60 seconds max
+                const startTime = Date.now();
+                const checkReady = function() {
+                  if (kernelReady) {
+                    resolve();
+                  } else if (Date.now() - startTime > maxWait) {
+                    console.warn('[Thebe Session] Timed out waiting for kernel');
+                    sessionStorage.removeItem(SESSION_RESTORE_KEY);
+                    resolve();
+                  } else {
+                    setTimeout(checkReady, 100);
+                  }
+                };
+                checkReady();
+              });
+            }
+          } catch (e) {
+            if (isRateLimitError(e) || lastBinderRateLimitError) {
+              handleRateLimitError(lastBinderRateLimitError || e);
+              return false;
+            }
+            console.error('[Thebe Session] Error during bootstrap:', e);
+            sessionStorage.removeItem(SESSION_RESTORE_KEY);
+            thebeBootstrapped = false;
+            return false;
+          }
+
+          return true;
+        }
+
+        // If a valid session exists, auto-bootstrap Thebe immediately
+        if (existingSession) {
+          try {
+            const sessionData = JSON.parse(existingSession);
+            // Check if session data looks valid (has id and token fields)
+            if (sessionData && sessionData.id && sessionData.token) {
+              // Mark that we have an existing session to restore
+              // Don't set kernelReady yet - that happens after successful bootstrap
+              // Set firstCellExecuted to true since kernel was already running
+              firstCellExecuted = true;
+              enableAllButtons();
+
+              // Auto-bootstrap Thebe to reconnect to existing session (silent reconnection)
+              bootstrapThebe(true).catch(function(err) {
+                console.error('[Thebe Session] Auto-bootstrap failed:', err);
+              });
+            }
+          } catch (e) {
+            console.warn('[Thebe Session] Session validation failed:', e);
+          }
+        } else {
+          // No existing session - enable the first button (without dependencies) so users can start a new kernel
+          document.querySelectorAll('.thebe-run-btn').forEach(function(btn) {
+            // Remove kernel unavailable state from all buttons
+            btn.classList.remove('thebe-btn-kernel-unavailable');
+
+            // Check if this button has dependencies
+            const hasDependencies = btn.getAttribute('data-original-depends') === 'true';
+
+            if (hasDependencies) {
+              // Keep dependent buttons disabled until first cell runs
+              btn.classList.add('text-slate-500', 'cursor-not-allowed');
+              btn.title = 'Run the first cell to start the kernel';
+            } else {
+              // Enable non-dependent buttons (first button)
+              btn.classList.remove('text-slate-500', 'cursor-not-allowed');
+              btn.classList.add('text-slate-300', 'hover:text-white');
+              btn.title = 'Run this code on the page';
+            }
+          });
+        }
+
+
+
+        // Function to execute a cell by its container ID
+        function executeCell(containerId) {
+          const container = document.getElementById(containerId);
+          if (!container) {
+            return Promise.resolve();
+          }
+
+          const cell = container.querySelector('.thebe-cell');
+          if (!cell) {
+            return Promise.resolve();
+          }
+
+          return new Promise(function(resolve) {
+            const allButtons = cell.querySelectorAll('button');
+            let clicked = false;
+
+            allButtons.forEach(function(btn) {
+              if (btn.classList.contains('thebe-run-btn')) {
+                return;
+              }
+              if (!clicked) {
+                const origStyle = btn.getAttribute('style') || '';
+                btn.style.cssText = 'position:static !important; left:auto !important; opacity:1 !important; pointer-events:auto !important; width:auto !important; height:auto !important;';
+
+                // Save scroll position before clicking Thebe's internal button
+                // This prevents Thebe from scrolling the page
+                const scrollY = window.scrollY;
+                btn.click();
+                // Restore scroll position immediately after click
+                window.scrollTo(0, scrollY);
+
+                btn.style.cssText = origStyle;
+                clicked = true;
+                executedCells.add(containerId);
+              }
+            });
+
+            setTimeout(resolve, 100);
+          });
+        }
+
+        // Move output from thebe-cell to dedicated container
+        // This ensures output is visible regardless of which view (step/full) is active
+        function moveOutputToContainer(container) {
+          const cell = container.querySelector('.thebe-cell');
+          const outputContainer = container.querySelector('.thebe-output-container');
+
+          if (!cell || !outputContainer) return;
+
+          // Find any .thebe-output elements in the cell
+          const outputs = cell.querySelectorAll('.thebe-output');
+          if (outputs.length > 0) {
+            outputs.forEach(function(output) {
+              outputContainer.appendChild(output);
+            });
+          }
+        }
+
+        // Set up MutationObserver to move output to dedicated container
+        function setupOutputObserver(container) {
+          const cell = container.querySelector('.thebe-cell');
+          const outputContainer = container.querySelector('.thebe-output-container');
+
+          if (!cell) {
+            return;
+          }
+          if (!outputContainer) {
+            return;
+          }
+
+          // Observer to watch for output being added to the cell
+          const observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+              mutation.addedNodes.forEach(function(node) {
+                // Check if the added node is the thebe-output element
+                if (node.nodeType === 1 && node.classList && node.classList.contains('thebe-output')) {
+                  // Move the output to the dedicated container
+                  outputContainer.appendChild(node);
+                }
+              });
+            });
+          });
+
+          // Start observing the cell for child additions
+          observer.observe(cell, { childList: true, subtree: true });
+
+          // Store observer reference for cleanup if needed
+          container._outputObserver = observer;
+        }
+
+        // Use event delegation to catch clicks on run buttons
+        document.body.addEventListener('click', async function(e) {
+          const btn = e.target.closest('.thebe-run-btn');
+          if (!btn) return;
+
+          // CRITICAL: Save scroll position at the very start to prevent any scroll
+          const initialScrollY = window.scrollY;
+
+          e.preventDefault();
+          e.stopPropagation();
+
+          const container = btn.closest('.thebe-container');
+          if (!container) return;
+
+          // Ignore clicks on disabled buttons
+          if (btn.classList.contains('text-slate-500')) {
+            return;
+          }
+
+          document.querySelectorAll('.thebe-container').forEach(function(thebeContainer) {
+            clearContainerMessages(thebeContainer);
+          });
+
+          // Mark container as activated to enable editing
+          container.classList.add('activated');
+
+          // CRITICAL FIX: If panel is in expanded mode, temporarily show step-code-view
+          // so CodeMirror can initialize properly (CodeMirror fails to initialize in hidden containers)
+          const panel = container.querySelector('.panel');
+          const stepCodeView = panel ? panel.querySelector('.step-code-view') : null;
+          const fullFileView = panel ? panel.querySelector('.full-file-view') : null;
+          const isExpanded = panel && panel.getAttribute('aria-expanded') === 'true';
+          let wasHidden = false;
+
+          if (isExpanded && stepCodeView && stepCodeView.style.display === 'none') {
+            stepCodeView.style.display = '';
+            // CRITICAL: Also hide full-file-view to prevent both views from showing simultaneously
+            if (fullFileView) {
+              fullFileView.style.display = 'none';
+            }
+            wasHidden = true;
+          }
+
+          // Set up output observer to move output to dedicated container
+          setupOutputObserver(container);
+
+          // If we temporarily showed step-code-view, we need to:
+          // 1. Wait for CodeMirror to initialize with step code
+          // 2. Update CodeMirror to show full file content (since we're in expanded mode)
+          // 3. Apply read-only markers to non-editable sections
+          if (wasHidden) {
+            setTimeout(function() {
+              if (stepCodeView && panel && panel.getAttribute('aria-expanded') === 'true') {
+                // Update CodeMirror to show full file content
+                const thebeCell = stepCodeView.querySelector('.thebe-cell');
+                const codeMirrorElement = thebeCell ? thebeCell.querySelector('.CodeMirror') : null;
+                if (codeMirrorElement && codeMirrorElement.CodeMirror) {
+                  const fullFileSource = container.querySelector('script[type="text-x-full-file-source"]');
+                  const fullFileCode = fullFileSource ? fullFileSource.textContent : '';
+                  if (fullFileCode) {
+                    // Save scroll position before setValue to prevent unwanted scroll
+                    const scrollY = window.scrollY;
+                    codeMirrorElement.CodeMirror.setValue(fullFileCode);
+                    // Restore scroll position after setValue
+                    window.scrollTo(0, scrollY);
+
+                    // Apply read-only markers
+                    const lineRangesScript = container.querySelector('script[type="text-x-line-ranges"]');
+                    if (lineRangesScript) {
+                      try {
+                        const lineRanges = JSON.parse(lineRangesScript.textContent.trim());
+                        const cm = codeMirrorElement.CodeMirror;
+
+                        // Clear any existing read-only markers
+                        if (cm._readOnlyMarkers) {
+                          cm._readOnlyMarkers.forEach(function(marker) {
+                            marker.clear();
+                          });
+                        }
+                        cm._readOnlyMarkers = [];
+
+                        // Mark non-current-step ranges as read-only
+                        lineRanges.forEach(function(range) {
+                          if (range.type !== 'current-step') {
+                            const marker = cm.markText(
+                              {line: range.start, ch: 0},
+                              {line: range.end + 1, ch: 0},
+                              {
+                                readOnly: true,
+                                className: 'cm-readonly-context',
+                                inclusiveLeft: true,
+                                inclusiveRight: true
+                              }
+                            );
+                            cm._readOnlyMarkers.push(marker);
+                          }
+                        });
+                      } catch (e) {
+                        console.error('[Thebe] Failed to parse line ranges:', e);
+                      }
+                    }
+                  }
+                }
+
+                // step-code-view stays visible after activation (it contains the CodeMirror editor)
+              }
+            }, 500); // Increased delay to ensure CodeMirror is fully initialized
+          }
+
+          // Store the wasHidden flag on the container so we can access it later
+          container._wasHidden = wasHidden;
+
+          // On first click, bootstrap Thebe to start the kernel
+          if (!thebeBootstrapped) {
+            // Show loading status - different message for new vs existing session
+            btn.classList.add('loading');
+            container.classList.add('loading');
+            // If we have an existing session, show "Connecting to existing kernel..."
+            if (existingSession) {
+              container.classList.add('reconnecting');
+            }
+
+            // Call the extracted bootstrap function
+            const bootstrapped = await bootstrapThebe();
+            if (!bootstrapped) {
+              btn.classList.remove('loading');
+              container.classList.remove('loading', 'reconnecting', 'kernel-ready');
+              if (window.scrollY !== initialScrollY) {
+                window.scrollTo(0, initialScrollY);
+              }
+              return;
+            }
+          }
+
+          // Add loading state (kernel-ready class determines the message)
+          btn.classList.add('loading');
+          container.classList.add('loading');
+          if (kernelReady) {
+            container.classList.add('kernel-ready');
+          }
+
+          // CRITICAL FIX: Before execution, ensure we execute STEP CODE only
+          // When expanded, CodeMirror contains full file code, but we must execute only the step
+          // EXCEPTION: If wasHidden=true, CodeMirror still contains step code (initialization pending)
+          // Reuse panel variable from earlier in the function
+          const isExpandedForExec = panel && panel.getAttribute('aria-expanded') === 'true';
+          const stepCodeViewForExec = panel ? panel.querySelector('.step-code-view') : null;
+          const thebeCellForExec = stepCodeViewForExec ? stepCodeViewForExec.querySelector('.thebe-cell') : null;
+          const codeMirrorElementForExec = thebeCellForExec ? thebeCellForExec.querySelector('.CodeMirror') : null;
+          let fullFileCode = null;
+          let lineRanges = null;
+
+          // Skip code swap if this is first execution in expanded mode (wasHidden=true)
+          // In that case, CodeMirror still contains step code and will be updated by setTimeout
+          if (isExpandedForExec && codeMirrorElementForExec && codeMirrorElementForExec.CodeMirror && !container._wasHidden) {
+            const cm = codeMirrorElementForExec.CodeMirror;
+            fullFileCode = cm.getValue(); // Save full file content (with edits)
+
+            // Get line ranges to extract the editable step portion
+            const lineRangesScript = container.querySelector('script[type="text-x-line-ranges"]');
+            if (lineRangesScript) {
+              try {
+                lineRanges = JSON.parse(lineRangesScript.textContent.trim());
+              } catch (e) {
+                console.error('[Thebe] Failed to parse line ranges:', e);
+              }
+            }
+
+            // Extract CURRENT step code from CodeMirror (preserving edits)
+            let stepCode = '';
+            if (lineRanges && lineRanges.length > 0) {
+              const currentStepRange = lineRanges.find(r => r.type === 'current-step');
+              if (currentStepRange) {
+                // Extract the editable lines from current CodeMirror content
+                const lines = fullFileCode.split('\n');
+                const stepLines = lines.slice(currentStepRange.start, currentStepRange.end + 1);
+                stepCode = stepLines.join('\n');
+              }
+            }
+
+            // Fallback to original step code if extraction failed
+            if (!stepCode) {
+              const cleanSource = container.querySelector('script[type="text-x-clean-source"]');
+              stepCode = cleanSource ? cleanSource.textContent : '';
+            }
+
+            // Temporarily set step code for execution
+            // Save scroll position before setValue to prevent unwanted scroll
+            const scrollY1 = window.scrollY;
+            cm.setValue(stepCode);
+            // Restore scroll position after setValue
+            window.scrollTo(0, scrollY1);
+
+            // Clear read-only markers during execution
+            if (cm._readOnlyMarkers) {
+              cm._readOnlyMarkers.forEach(function(marker) {
+                marker.clear();
+              });
+              cm._readOnlyMarkers = [];
+            }
+          } else if (container._wasHidden) {
+            // Skipping code swap - first execution in expanded mode, CodeMirror still contains step code
+          }
+
+          // RACE CONDITION FIX: Wait for notebook to be attached to session
+          // This is the true "ready" state - when cells can execute
+          if (!notebookAttached) {
+            await new Promise(function(resolve) {
+              const maxWait = 30000; // 30 seconds for first-time startup
+              const startTime = Date.now();
+              const checkAttached = function() {
+                if (notebookAttached) {
+                  resolve();
+                } else if (Date.now() - startTime > maxWait) {
+                  console.warn('[Thebe] Timed out waiting for notebook attachment');
+                  resolve();
+                } else {
+                  setTimeout(checkAttached, 100);
+                }
+              };
+              checkAttached();
+            });
+          }
+
+          // Run only this cell (no automatic dependency execution)
+          await executeCell(container.id);
+
+          // After execution, kernel is definitely ready
+          kernelReady = true;
+
+          // CRITICAL FIX: Restore full file view if we were expanded
+          if (isExpandedForExec && fullFileCode && codeMirrorElementForExec && codeMirrorElementForExec.CodeMirror) {
+            const cm = codeMirrorElementForExec.CodeMirror;
+            // Save scroll position before setValue to prevent unwanted scroll
+            const scrollY2 = window.scrollY;
+            cm.setValue(fullFileCode);
+            // Restore scroll position after setValue
+            window.scrollTo(0, scrollY2);
+
+            // Re-apply read-only markers
+            if (lineRanges && lineRanges.length > 0) {
+              setTimeout(function() {
+                if (!cm._readOnlyMarkers) {
+                  cm._readOnlyMarkers = [];
+                }
+                lineRanges.forEach(function(range) {
+                  if (range.type !== 'current-step') {
+                    const marker = cm.markText(
+                      {line: range.start, ch: 0},
+                      {line: range.end + 1, ch: 0},
+                      {
+                        readOnly: true,
+                        className: 'cm-readonly-context',
+                        inclusiveLeft: true,
+                        inclusiveRight: true
+                      }
+                    );
+                    cm._readOnlyMarkers.push(marker);
+                  }
+                });
+              }, 50);
+            }
+          }
+
+          // Move any output that was created to the dedicated container
+          // Wait a bit for output to be fully rendered
+          setTimeout(function() {
+            moveOutputToContainer(container);
+
+            // Clean up the wasHidden flag
+            if (container._wasHidden) {
+              delete container._wasHidden;
+            }
+
+            // Remove loading state AFTER output is displayed
+            // This ensures "Running..." disappears when output appears, not before
+            btn.classList.remove('loading');
+            container.classList.remove('loading');
+
+            // Refocus CodeMirror after execution completes
+            // This ensures arrow keys move the cursor instead of scrolling the page
+            const cell = container.querySelector('.thebe-cell');
+            if (cell) {
+              const codeMirrorElement = cell.querySelector('.CodeMirror');
+              if (codeMirrorElement && codeMirrorElement.CodeMirror) {
+                codeMirrorElement.CodeMirror.focus();
+              }
+            }
+
+            // CRITICAL: Final scroll restoration to ensure we're back at original position
+            // This catches any scroll that might have happened during async operations
+            if (window.scrollY !== initialScrollY) {
+              window.scrollTo(0, initialScrollY);
+            }
+          }, 100);
+
+          // Enable dependent buttons after first cell runs
+          enableDependentButtons();
+        }, true);
+      });
+
+      // Add Ctrl+Enter / Cmd+Enter keyboard shortcut to execute code
+      // Use capture phase (true) to intercept before CodeMirror's handlers
+      document.addEventListener('keydown', function(e) {
+        // Check for Ctrl+Enter or Cmd+Enter
+        if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+          // Find which CodeMirror is focused
+          const focusedCM = document.querySelector('.CodeMirror-focused');
+          if (focusedCM) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            // Find the parent thebe-cell and container
+            const cell = focusedCM.closest('.thebe-cell');
+            const container = cell ? cell.closest('.thebe-container') : null;
+            if (container) {
+              // Find the "Run here" button for this container
+              const runButton = container.querySelector('.thebe-run-btn');
+              if (runButton && !runButton.classList.contains('text-slate-500')) {
+                // Dispatch a MouseEvent that will properly bubble for event delegation
+                const clickEvent = new MouseEvent('click', {
+                  bubbles: true,
+                  cancelable: true,
+                  view: window
+                });
+                runButton.dispatchEvent(clickEvent);
+              }
+            }
+          }
+        }
+      }, true);  // Use capture phase to intercept before CodeMirror
+    </script>
+    {{ end }}
   </body>
 </html>
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 0a560ea113..7e365a7dac 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -2,10 +2,10 @@
 <script>
     document.addEventListener("DOMContentLoaded", function () {
 
-        // Add copy buttons to code blocks (but skip those inside codetabs)
+        // Add copy buttons to code blocks (but skip those inside codetabs or thebe-container)
         document.querySelectorAll('div.highlight').forEach(block => {
-            // Skip if this code block is inside a codetabs container
-            if (block.closest('.codetabs')) {
+            // Skip if this code block is inside a codetabs container or thebe-container
+            if (block.closest('.codetabs') || block.closest('.thebe-container')) {
                 return;
             }
                 // Create a wrapper for the button and message
diff --git a/layouts/shortcodes/jupyter-example.html b/layouts/shortcodes/jupyter-example.html
new file mode 100644
index 0000000000..963cb47ffe
--- /dev/null
+++ b/layouts/shortcodes/jupyter-example.html
@@ -0,0 +1,674 @@
+{{/* Thebe Interactive Code Cell from Example File */}}
+{{/* Usage: {{< jupyter-example set="landing" step="connect" lang_filter="Python" description="Connect to a Redis server..." >}}{{< /jupyter-example >}} */}}
+{{/* Extracts code between # STEP_START {step} and # STEP_END markers */}}
+{{/* Auto-derives source/binder/kernel from data/examples.json and quick-start metadata from site config */}}
+{{/* Optional overrides: source, binder, quickstart_url, quickstart_title */}}
+
+{{ .Page.Store.Set "hasThebe" true }}
+
+{{ $source := .Get "source" }}
+{{ $binder := .Get "binder" | default "" }}
+{{ $step := .Get "step" }}
+{{ $description := .Get "description" | default "" }}
+{{ $id := .Get "id" | default $step }}
+{{ $depends := .Get "depends" | default "" }}
+{{ $noOutput := .Get "no_output" | default "false" }}
+{{ $quickstartUrl := .Get "quickstart_url" | default "" }}
+{{ $quickstartTitle := .Get "quickstart_title" | default "" }}
+{{ $inner := .Inner | default "" }}
+{{ $set := .Get "set" }}
+{{ $langFilter := .Get "lang_filter" | default "" }}
+{{ $kernelName := "" }}
+
+{{ if not $description }}
+  {{ $description = .Get "title" | default "" }}
+{{ end }}
+
+{{ if not $langFilter }}
+  {{ $langFilter = .Get "lang" | default "" }}
+{{ end }}
+
+{{/* set/lang_filter lookup from data/examples.json */}}
+{{ if and $set $langFilter }}
+  {{/* Look up from data/examples.json */}}
+  {{ with index $.Site.Data.examples $set }}
+    {{ with index . $langFilter }}
+      {{ if not $source }}
+        {{ $source = index . "source" }}
+      {{ end }}
+      {{ if not $binder }}
+        {{ $binder = index . "binderId" }}
+      {{ end }}
+      {{ $kernelName = index . "kernelName" }}
+    {{ else }}
+      {{ errorf "jupyter-example: No example found for set=%s lang_filter=%s" $set $langFilter }}
+    {{ end }}
+  {{ else }}
+    {{ errorf "jupyter-example: No example found for set=%s lang_filter=%s" $set $langFilter }}
+  {{ end }}
+{{ end }}
+
+{{/* Look up quick-start info from site config when not explicitly provided */}}
+{{ $langKey := $langFilter }}
+{{ if $langKey }}
+  {{ with index $.Site.Params.clientsConfig $langKey }}
+    {{ $slug := index . "quickstartSlug" }}
+    {{ $clientName := index . "clientName" }}
+    {{ if and (not $quickstartUrl) $slug }}
+      {{ $quickstartUrl = printf "/develop/clients/%s/" $slug }}
+    {{ end }}
+    {{ if and (not $quickstartTitle) $clientName }}
+      {{ $quickstartTitle = printf "%s Quick-Start" $clientName }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+
+{{/* Read the source file */}}
+{{ $content := readFile $source }}
+
+{{/* Detect comment style */}}
+{{ $commentPrefix := "#" }}
+{{ $isJavaScript := false }}
+{{ if findRE `// STEP_START` $content 1 }}
+  {{ $commentPrefix = "//" }}
+  {{ $isJavaScript = true }}
+{{ end }}
+
+{{/* Extract BINDER_ID from source file unless already provided */}}
+{{ if not $binder }}
+  {{ $binderPattern := printf `%s BINDER_ID ([a-zA-Z0-9_-]+)` $commentPrefix }}
+  {{ $binderMatches := findRE $binderPattern $content 1 }}
+  {{ if gt (len $binderMatches) 0 }}
+    {{/* Extract just the ID portion after "BINDER_ID " */}}
+    {{ $binderLine := index $binderMatches 0 }}
+    {{ $binder = replaceRE (printf `^%s BINDER_ID ` $commentPrefix) "" $binderLine }}
+  {{ end }}
+{{ end }}
+{{/* Store binder ref in page scratch for use in baseof.html */}}
+{{ .Page.Scratch.Set "binderRef" $binder }}
+
+{{/* Extract KERNEL_NAME from source file - NO DEFAULTS unless set/lang_filter lookup derived it */}}
+{{ if not $kernelName }}
+  {{ $kernelPattern := printf `%s KERNEL_NAME ([a-zA-Z0-9_-]+)` $commentPrefix }}
+  {{ $kernelMatches := findRE $kernelPattern $content 1 }}
+  {{ if gt (len $kernelMatches) 0 }}
+    {{/* Extract kernel name from KERNEL_NAME marker */}}
+    {{ $kernelLine := index $kernelMatches 0 }}
+    {{ $kernelName = replaceRE (printf `^%s KERNEL_NAME ` $commentPrefix) "" $kernelLine }}
+  {{ end }}
+{{ end }}
+{{/* Store kernel name in page scratch for use in baseof.html - empty string if not found */}}
+{{ .Page.Scratch.Set "kernelName" $kernelName }}
+
+{{/* Parse file line by line to extract full file and track current step lines */}}
+{{ $lines := split $content "\n" }}
+{{ $fullFileSections := slice }}  {{/* Track sections for spacing */}}
+{{ $currentSection := slice }}
+{{ $currentSectionType := "context" }}  {{/* context, step, or current-step */}}
+{{ $currentStepLines := slice }}
+{{ $inCurrentStep := false }}
+{{ $inAnyStep := false }}
+{{ $inHideBlock := false }}
+{{ $currentStepStartLine := 0 }}
+{{ $currentStepEndLine := 0 }}
+{{ $lineNumber := 0 }}
+
+{{ range $lines }}
+  {{ $trimmed := trim . " \t" }}
+
+  {{/* Handle HIDE blocks */}}
+  {{ if hasPrefix $trimmed (printf "%s HIDE_START" $commentPrefix) }}
+    {{ $inHideBlock = true }}
+  {{ else if hasPrefix $trimmed (printf "%s HIDE_END" $commentPrefix) }}
+    {{ $inHideBlock = false }}
+  {{ else if not $inHideBlock }}
+    {{/* Skip marker comments */}}
+    {{ if eq $trimmed (printf "%s STEP_START %s" $commentPrefix $step) }}
+      {{/* Save previous section if it has non-empty content */}}
+      {{ if gt (len $currentSection) 0 }}
+        {{/* Check if section has any non-empty lines */}}
+        {{ $hasContent := false }}
+        {{ range $currentSection }}
+          {{ if ne (trim . " \t") "" }}
+            {{ $hasContent = true }}
+          {{ end }}
+        {{ end }}
+        {{ if $hasContent }}
+          {{ $fullFileSections = $fullFileSections | append (dict "type" $currentSectionType "lines" $currentSection) }}
+        {{ end }}
+        {{ $currentSection = slice }}
+      {{ end }}
+      {{/* Found the current step */}}
+      {{ $inCurrentStep = true }}
+      {{ $inAnyStep = true }}
+      {{ $currentSectionType = "current-step" }}
+      {{ $currentStepStartLine = add $lineNumber 1 }}
+    {{ else if hasPrefix $trimmed (printf "%s STEP_START" $commentPrefix) }}
+      {{/* Save previous section if it has non-empty content */}}
+      {{ if gt (len $currentSection) 0 }}
+        {{/* Check if section has any non-empty lines */}}
+        {{ $hasContent := false }}
+        {{ range $currentSection }}
+          {{ if ne (trim . " \t") "" }}
+            {{ $hasContent = true }}
+          {{ end }}
+        {{ end }}
+        {{ if $hasContent }}
+          {{ $fullFileSections = $fullFileSections | append (dict "type" $currentSectionType "lines" $currentSection) }}
+        {{ end }}
+        {{ $currentSection = slice }}
+      {{ end }}
+      {{/* Found a different step */}}
+      {{ $inCurrentStep = false }}
+      {{ $inAnyStep = true }}
+      {{ $currentSectionType = "step" }}
+    {{ else if hasPrefix $trimmed (printf "%s STEP_END" $commentPrefix) }}
+      {{/* Save current section if it has non-empty content */}}
+      {{ if gt (len $currentSection) 0 }}
+        {{/* Check if section has any non-empty lines */}}
+        {{ $hasContent := false }}
+        {{ range $currentSection }}
+          {{ if ne (trim . " \t") "" }}
+            {{ $hasContent = true }}
+          {{ end }}
+        {{ end }}
+        {{ if $hasContent }}
+          {{ $fullFileSections = $fullFileSections | append (dict "type" $currentSectionType "lines" $currentSection) }}
+        {{ end }}
+        {{ $currentSection = slice }}
+      {{ end }}
+      {{/* End of a step */}}
+      {{ if $inCurrentStep }}
+        {{ $currentStepEndLine = $lineNumber }}
+        {{ $inCurrentStep = false }}
+      {{ end }}
+      {{ $inAnyStep = false }}
+      {{ $currentSectionType = "context" }}
+    {{ else if and (ne $trimmed "") (hasPrefix $trimmed (printf "%s EXAMPLE" $commentPrefix)) }}
+      {{/* Skip EXAMPLE marker */}}
+    {{ else if and (ne $trimmed "") (hasPrefix $trimmed (printf "%s BINDER_ID" $commentPrefix)) }}
+      {{/* Skip BINDER_ID marker */}}
+    {{ else if and (ne $trimmed "") (hasPrefix $trimmed (printf "%s KERNEL_NAME" $commentPrefix)) }}
+      {{/* Skip KERNEL_NAME marker */}}
+    {{ else }}
+      {{/* Regular line - add to full file */}}
+      {{ if $inAnyStep }}
+        {{/* Skip comment-only lines in steps */}}
+        {{ if or (eq $trimmed "") (not (hasPrefix $trimmed $commentPrefix)) }}
+          {{ $currentSection = $currentSection | append . }}
+          {{ $lineNumber = add $lineNumber 1 }}
+          {{ if $inCurrentStep }}
+            {{ $currentStepLines = $currentStepLines | append . }}
+          {{ end }}
+        {{ end }}
+      {{ else }}
+        {{/* Context lines (outside any step) - include empty lines for consistent spacing */}}
+        {{ $currentSection = $currentSection | append . }}
+        {{ $lineNumber = add $lineNumber 1 }}
+      {{ end }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+
+{{/* Save final section if it has non-empty content */}}
+{{ if gt (len $currentSection) 0 }}
+  {{/* Check if section has any non-empty lines */}}
+  {{ $hasContent := false }}
+  {{ range $currentSection }}
+    {{ if ne (trim . " \t") "" }}
+      {{ $hasContent = true }}
+    {{ end }}
+  {{ end }}
+  {{ if $hasContent }}
+    {{ $fullFileSections = $fullFileSections | append (dict "type" $currentSectionType "lines" $currentSection) }}
+  {{ end }}
+{{ end }}
+
+{{/* Build the code sections */}}
+{{/* Build fullFileCode from sections with exactly one empty line between them */}}
+{{ $fullFileCode := "" }}
+{{ range $idx, $section := $fullFileSections }}
+  {{ if gt $idx 0 }}
+    {{ $fullFileCode = printf "%s\n\n%s" $fullFileCode (delimit $section.lines "\n") }}
+  {{ else }}
+    {{ $fullFileCode = delimit $section.lines "\n" }}
+  {{ end }}
+{{ end }}
+{{ $stepCode := delimit $currentStepLines "\n" }}
+
+{{/* Calculate highlight lines (only the current step) */}}
+{{ $hlLines := "" }}
+{{ if and (gt $currentStepStartLine 0) (gt $currentStepEndLine 0) }}
+  {{ $hlLines = printf "%d-%d" $currentStepStartLine $currentStepEndLine }}
+{{ end }}
+
+<div class="cli group box-border rounded-lg mt-0 mb-4 mx-auto bg-slate-900 thebe-container" id="{{ $id }}" {{ if $depends }}data-depends="{{ $depends }}"{{ end }}{{ if $binder }} data-binder-ref="{{ $binder }}"{{ end }}>
+    <!-- Header matching standard code blocks -->
+    <div class="codetabs-header flex flex-col px-4 py-2 bg-slate-900 rounded-t-lg">
+        <div class="flex items-start justify-between">
+            <div class="flex items-center gap-2">
+                <span class="text-xs text-slate-400 mr-3 whitespace-nowrap">Language:</span>
+                {{/* Static Python indicator styled like dropdown */}}
+                <span class="max-w-xs px-3 py-1 text-sm bg-slate-700 text-white border border-slate-600 rounded-md">Python</span>
+            </div>
+            <div class="flex items-center gap-2">
+                {{/* Run here link - styled like "Run in browser" link */}}
+                {{/* All cells start disabled until kernel is ready */}}
+                {{/* Cells with depends attribute remain disabled until first cell runs */}}
+                {{/* Uses text-slate-500 class for disabled state - JS uses this to identify disabled buttons */}}
+                <button class="thebe-run-btn thebe-btn-blocked thebe-btn-kernel-unavailable text-xs underline whitespace-nowrap flex items-center gap-1 text-slate-500 cursor-not-allowed"
+                        data-original-depends="{{ if $depends }}true{{ else }}false{{ end }}"
+                        title="Kernel server not available">
+                    <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M8 5v14l11-7z"></path>
+                    </svg>
+                    <span>Run here</span>
+                </button>
+                {{/* Run in browser link (opens BinderHub notebook) */}}
+                {{ if $binder }}
+                <a href="https://redis.io/binder/v2/gh/redis/binder-launchers/{{ $binder }}?urlpath=%2Fdoc%2Ftree%2Fdemo.ipynb"
+                   target="_blank"
+                   rel="noopener noreferrer"
+                   class="text-xs text-slate-300 hover:text-white underline whitespace-nowrap flex items-center gap-1 mr-2"
+                   title="Run this example in an interactive Jupyter notebook">
+                    <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M8 5v14l11-7z"></path>
+                    </svg>
+                    <span>Run in browser</span>
+                </a>
+                {{ end }}
+                {{/* Copy link button - matching standard code blocks */}}
+                <button tabindex="1" class="copy-link-button text-neutral-400 hover:text-slate-100 bg-slate-600 h-7 w-7 p-1 rounded rounded-mx relative"
+                        title="Copy link to code block" data-codetabs-id="{{ $id }}" onclick="copyJupyterLinkToClipboard(this)">
+                    <svg class="inline-block w-4 h-4 align-baseline" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+                        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+                    </svg>
+                    <span class="tooltiptext absolute bottom-full right-0 mb-2 bg-slate-200 rounded text-slate-800 text-center text-xs px-2 py-1 whitespace-nowrap pointer-events-none opacity-0 transition-opacity duration-200">Copied!</span>
+                </button>
+                {{/* Visibility button - matching standard code blocks */}}
+                <button tabindex="1" class="visibility-button text-neutral-400 hover:text-slate-100 bg-slate-600 h-7 w-7 p-1 rounded rounded-mx"
+                        title="Toggle visibility" data-codetabs-id="{{ $id }}" onclick="toggleJupyterVisibility(this)">
+                    <svg class="visibility-icon-on" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="currentColor">
+                        <path d="M24 31.5q3.55 0 6.025-2.475Q32.5 26.55 32.5 23q0-3.55-2.475-6.025Q27.55 14.5 24 14.5q-3.55 0-6.025 2.475Q15.5 19.45 15.5 23q0 3.55 2.475 6.025Q20.45 31.5 24 31.5Zm0-2.9q-2.35 0-3.975-1.625T18.4 23q0-2.35 1.625-3.975T24 17.4q2.35 0 3.975 1.625T29.6 23q0 2.35-1.625 3.975T24 28.6Zm0 9.4q-7.3 0-13.2-4.15Q4.9 29.7 2 23q2.9-6.7 8.8-10.85Q16.7 8 24 8q7.3 0 13.2 4.15Q43.1 16.3 46 23q-2.9 6.7-8.8 10.85Q31.3 38 24 38Zm0-15Zm0 12q6.05 0 11.125-3.275T42.85 23q-2.65-5.45-7.725-8.725Q30.05 11 24 11t-11.125 3.275Q7.8 17.55 5.1 23q2.7 5.45 7.775 8.725Q17.95 35 24 35Z"/>
+                    </svg>
+                    <svg class="visibility-icon-off hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="currentColor">
+                        <path d="m31.45 27.05-2.2-2.2q1.3-3.55-1.35-5.9-2.65-2.35-5.75-1.2l-2.2-2.2q.85-.55 1.9-.8 1.05-.25 2.15-.25 3.55 0 6.025 2.475Q32.5 19.45 32.5 23q0 1.1-.275 2.175-.275 1.075-.775 1.875Zm6.45 6.45-2-2q2.45-1.8 4.275-4.025Q42 25.25 42.85 23q-2.5-5.55-7.5-8.775Q30.35 11 24.5 11q-2.1 0-4.3.4-2.2.4-3.45.95L14.45 10q1.75-.8 4.475-1.4Q21.65 8 24.25 8q7.15 0 13.075 4.075Q43.25 16.15 46 23q-1.3 3.2-3.35 5.85-2.05 2.65-4.75 4.65Zm2.9 11.3-8.4-8.25q-1.75.7-3.95 1.075T24 38q-7.3 0-13.25-4.075T2 23q1-2.6 2.775-5.075T9.1 13.2L2.8 6.9l2.1-2.15L42.75 42.6ZM11.15 15.3q-1.85 1.35-3.575 3.55Q5.85 21.05 5.1 23q2.55 5.55 7.675 8.775Q17.9 35 24.4 35q1.65 0 3.25-.2t2.4-.6l-3.2-3.2q-.55.25-1.35.375T24 31.5q-3.5 0-6-2.45T15.5 23q0-.75.125-1.5T16 20.15Zm15.25 7.1Zm-5.8 2.9Z"/>
+                    </svg>
+                </button>
+                {{/* Copy to clipboard button - matching standard code blocks */}}
+                <button tabindex="1" class="clipboard-button text-neutral-400 hover:text-slate-100 bg-slate-600 h-7 w-7 p-1 rounded rounded-mx"
+                        title="Copy to clipboard" data-codetabs-id="{{ $id }}" onclick="copyJupyterCodeToClipboard(this)">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="currentColor">
+                        <path d="M9 43.95q-1.2 0-2.1-.9-.9-.9-.9-2.1V10.8h3v30.15h23.7v3Zm6-6q-1.2 0-2.1-.9-.9-.9-.9-2.1v-28q0-1.2.9-2.1.9-.9 2.1-.9h22q1.2 0 2.1.9.9.9.9 2.1v28q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h22v-28H15v28Zm0 0v-28 28Z"/>
+                    </svg>
+                    <div class="tooltip relative inline-block">
+                        <span class="tooltiptext hidden bg-slate-200 rounded rounded-mx text-slate-800 text-center text-xs p-1 absolute right-6 bottom-4">Copied!</span>
+                    </div>
+                </button>
+            </div>
+        </div>
+        {{ if $description }}<div class="text-xs text-slate-400 mt-2 w-full">{{ $description }}</div>{{ end }}
+    </div>
+
+    {{/* Panel starts with no aria-expanded attribute - this means step code is shown at full opacity */}}
+    {{/* aria-expanded is only set when user clicks toggle to show full file */}}
+    <div class="panel" role="tabpanel">
+        {{/* Hint positioned outside step-code-view so it stays visible when toggling views */}}
+        <span class="run-hint">Ctrl+Enter to run</span>
+        {{/* Step code view - shown by default and when CodeMirror is active */}}
+        <div class="step-code-view">
+            <div data-executable="true" data-language="python" class="thebe-cell">
+                {{- highlight $stepCode "python" "" -}}
+            </div>
+        </div>
+
+        {{/* Full file view - shown only when toggled and NOT activated */}}
+        {{- if gt (len $fullFileSections) 0 }}
+        <div class="full-file-view" style="display:none;">
+            {{- range $idx, $section := $fullFileSections }}
+                {{- /* Do NOT trim blank lines - preserve spacing to match fullFileCode */ -}}
+                {{- $sectionCode := delimit $section.lines "\n" -}}
+                {{- $sectionClass := "code-section" -}}
+                {{- $highlightOptions := "" -}}
+                {{- if eq $section.type "current-step" -}}
+                    {{- $sectionClass = "code-section code-section-current" -}}
+                    {{- /* Highlight all lines in the current step section */ -}}
+                    {{- $numLines := len $section.lines -}}
+                    {{- if gt $numLines 0 -}}
+                        {{- $highlightOptions = printf "linenos=false,hl_lines=1-%d" $numLines -}}
+                    {{- end -}}
+                {{- else if eq $section.type "step" -}}
+                    {{- $sectionClass = "code-section code-section-other" -}}
+                {{- else -}}
+                    {{- $sectionClass = "code-section code-section-context" -}}
+                {{- end -}}
+                <div class="{{ $sectionClass }}">
+                    {{- highlight $sectionCode "python" $highlightOptions -}}
+                </div>
+            {{- end }}
+        </div>
+        {{- end }}
+
+        {{/* Output container - conditionally visible based on no_output parameter */}}
+        {{ if ne $noOutput "true" }}
+        <div class="thebe-output-container"></div>
+        {{ end }}
+    </div>
+
+    {{/* Footer with Quick-Start link - only shown if available explicitly or via config */}}
+    {{ if $quickstartUrl }}
+    <div class="cli-footer flex flex-col rounded-b-md bg-slate-900 mt-0 px-4 py-2 mb-0">
+        <div class="flex items-center justify-between">
+            <a href="{{ $quickstartUrl }}" tabindex="1" class="rounded rounded-mx px-3 py-1 text-white text-xs
+                hover:text-white hover:bg-slate-600 hover:border-transparent focus:outline-none
+                focus:ring-2 focus:white focus:border-slate-500" title="{{ $quickstartTitle }}">
+                {{ $quickstartTitle }}
+            </a>
+            <div class="flex-1"></div>
+        </div>
+    </div>
+    {{ end }}
+
+    <script type="text-x-clean-source" style="display:none">{{ $stepCode | safeHTML }}</script>
+    <script type="text-x-full-file-source" style="display:none">{{ $fullFileCode | safeHTML }}</script>
+    {{/* Store line range information for read-only marking */}}
+    <script type="text-x-line-ranges" style="display:none">
+    {{- $lineRanges := slice -}}
+    {{- $currentLine := 0 -}}
+    {{- range $idx, $section := $fullFileSections -}}
+        {{- /* Account for the empty line separator between sections */ -}}
+        {{- if gt $idx 0 -}}
+            {{- $currentLine = add $currentLine 1 -}}
+        {{- end -}}
+        {{- $numLines := len $section.lines -}}
+        {{- if gt $numLines 0 -}}
+            {{- $rangeStart := $currentLine -}}
+            {{- $rangeEnd := add $currentLine (sub $numLines 1) -}}
+            {{- $lineRanges = $lineRanges | append (dict "start" $rangeStart "end" $rangeEnd "type" $section.type) -}}
+            {{- $currentLine = add $currentLine $numLines -}}
+        {{- end -}}
+    {{- end -}}
+    {{- jsonify $lineRanges -}}
+    </script>
+</div>
+
+<style>
+/* Keyboard shortcut hint */
+.panel {
+  position: relative;
+}
+.run-hint {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  font-size: 0.65rem;
+  color: #64748b;
+  z-index: 10;
+  opacity: 0;  /* Transparent by default */
+  pointer-events: none;  /* Don't interfere with clicks */
+  transition: opacity 0.2s;  /* Smooth fade in/out */
+}
+/* Show hint when cell is runnable (kernel ready and not disabled) */
+.thebe-container.kernel-ready .run-hint {
+  opacity: 1;
+}
+
+/* Ensure code is visible on initial load */
+.thebe-container .step-code-view .highlight,
+.thebe-container .step-code-view .chroma,
+.thebe-container .step-code-view pre,
+.thebe-container .step-code-view code {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* Spacing between code sections in full file view */
+/* No margin needed - source code already has empty lines between sections */
+.full-file-view .code-section {
+    margin-bottom: 0;
+}
+
+/* No special highlighting for current step section - all code sections look the same */
+
+/* Ensure highlight containers don't add extra spacing */
+.full-file-view .code-section .highlight {
+    margin: 0 !important;
+}
+
+/* Override prose pre margin in full file view */
+.full-file-view .code-section pre {
+    margin: 0 !important;
+}
+
+/* Ensure step code view and full file view don't both show */
+.panel .step-code-view,
+.panel .full-file-view {
+    width: 100%;
+}
+
+/* Read-only context code styling in CodeMirror */
+.thebe-cell .CodeMirror .cm-readonly-context {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Prevent editing in read-only sections */
+.thebe-cell .CodeMirror .cm-readonly-context::selection {
+    background-color: transparent;
+}
+</style>
+
+<script>
+// Copy code to clipboard for jupyter cells
+function copyJupyterCodeToClipboard(button) {
+    const container = button.closest('.thebe-container');
+    const panel = container.querySelector('.panel');
+
+    // Check if we're in expanded (full file) view
+    const isExpanded = panel && panel.getAttribute('aria-expanded') === 'true';
+
+    let text = '';
+    if (isExpanded) {
+        // Full file view - copy entire file
+        const fullFileSource = container.querySelector('script[type="text-x-full-file-source"]');
+        text = fullFileSource ? fullFileSource.textContent : '';
+    } else {
+        // Step view - copy only the step code
+        const cleanSource = container.querySelector('script[type="text-x-clean-source"]');
+        text = cleanSource ? cleanSource.textContent : '';
+    }
+
+    navigator.clipboard.writeText(text).then(() => {
+        const tooltip = button.querySelector('.tooltiptext');
+        if (tooltip) {
+            tooltip.classList.remove('hidden');
+            setTimeout(() => {
+                tooltip.classList.add('hidden');
+            }, 2000);
+        }
+    }).catch(err => {
+        console.error('Copy failed', err);
+    });
+}
+
+// Copy link to code block
+function copyJupyterLinkToClipboard(button) {
+    const container = button.closest('.thebe-container');
+    const id = container.id;
+    const url = window.location.origin + window.location.pathname + '#' + id;
+
+    navigator.clipboard.writeText(url).then(() => {
+        const tooltip = button.querySelector('.tooltiptext');
+        if (tooltip) {
+            tooltip.style.opacity = '1';
+            setTimeout(() => {
+                tooltip.style.opacity = '0';
+            }, 2000);
+        }
+    }).catch(err => {
+        console.error('Copy link failed', err);
+    });
+}
+
+// Helper function to apply read-only markers to CodeMirror
+function applyReadOnlyMarkers(codeMirror, lineRanges) {
+    // Clear any existing read-only markers
+    if (codeMirror._readOnlyMarkers) {
+        codeMirror._readOnlyMarkers.forEach(function(marker) {
+            marker.clear();
+        });
+    }
+    codeMirror._readOnlyMarkers = [];
+
+    // Mark non-current-step ranges as read-only
+    lineRanges.forEach(function(range) {
+        if (range.type !== 'current-step') {
+            const marker = codeMirror.markText(
+                {line: range.start, ch: 0},
+                {line: range.end + 1, ch: 0},
+                {
+                    readOnly: true,
+                    className: 'cm-readonly-context',
+                    inclusiveLeft: true,
+                    inclusiveRight: true
+                }
+            );
+            codeMirror._readOnlyMarkers.push(marker);
+        }
+    });
+}
+
+// Helper function to clear read-only markers
+function clearReadOnlyMarkers(codeMirror) {
+    if (codeMirror._readOnlyMarkers) {
+        codeMirror._readOnlyMarkers.forEach(function(marker) {
+            marker.clear();
+        });
+        codeMirror._readOnlyMarkers = [];
+    }
+}
+
+// Toggle visibility for jupyter cells
+function toggleJupyterVisibility(button) {
+    const container = button.closest('.thebe-container');
+    const panel = container.querySelector('.panel');
+    const iconOn = button.querySelector('.visibility-icon-on');
+    const iconOff = button.querySelector('.visibility-icon-off');
+
+    // Check if we're currently showing full file
+    // Note: aria-expanded might not be set initially (undefined), treat as false
+    const isExpanded = panel.getAttribute('aria-expanded') === 'true';
+
+    // Check if cell has been activated (CodeMirror is present)
+    const isActivated = container.classList.contains('activated');
+
+    const stepCodeView = panel.querySelector('.step-code-view');
+    const fullFileView = panel.querySelector('.full-file-view');
+    const thebeCell = stepCodeView ? stepCodeView.querySelector('.thebe-cell') : null;
+
+    // Get the source code from hidden script elements
+    const cleanSource = container.querySelector('script[type="text-x-clean-source"]');
+    const fullFileSource = container.querySelector('script[type="text-x-full-file-source"]');
+    const lineRangesScript = container.querySelector('script[type="text-x-line-ranges"]');
+    const stepCode = cleanSource ? cleanSource.textContent : '';
+    const fullFileCode = fullFileSource ? fullFileSource.textContent : '';
+    let lineRanges = [];
+    if (lineRangesScript) {
+        try {
+            lineRanges = JSON.parse(lineRangesScript.textContent.trim());
+        } catch (e) {
+            console.error('Failed to parse line ranges:', e);
+        }
+    }
+
+    if (isExpanded) {
+        // Collapse: Show only step code
+        panel.removeAttribute('aria-expanded');
+        iconOn.classList.remove('hidden');
+        iconOff.classList.add('hidden');
+
+        if (!isActivated) {
+            // Not activated yet - swap the highlighted code display
+            if (stepCodeView && fullFileView) {
+                stepCodeView.style.display = '';
+                fullFileView.style.display = 'none';
+            }
+        } else {
+            // After activation: Extract edited step code from current CodeMirror content
+            const codeMirrorElement = thebeCell ? thebeCell.querySelector('.CodeMirror') : null;
+            if (codeMirrorElement && codeMirrorElement.CodeMirror) {
+                const cm = codeMirrorElement.CodeMirror;
+
+                // Extract the current step code (preserving edits)
+                let extractedStepCode = stepCode; // fallback to original
+                if (lineRanges && lineRanges.length > 0) {
+                    const currentStepRange = lineRanges.find(r => r.type === 'current-step');
+                    if (currentStepRange) {
+                        const currentContent = cm.getValue();
+                        const lines = currentContent.split('\n');
+                        const stepLines = lines.slice(currentStepRange.start, currentStepRange.end + 1);
+                        extractedStepCode = stepLines.join('\n');
+                    }
+                }
+
+                clearReadOnlyMarkers(cm);
+                // Save scroll position before setValue to prevent unwanted scroll
+                const scrollY = window.scrollY;
+                cm.setValue(extractedStepCode);
+                // Restore scroll position after setValue
+                window.scrollTo(0, scrollY);
+            }
+        }
+    } else {
+        // Expand: Show full file
+        panel.setAttribute('aria-expanded', 'true');
+        iconOn.classList.add('hidden');
+        iconOff.classList.remove('hidden');
+
+        if (!isActivated) {
+            // Not activated yet - swap to show full file
+            if (stepCodeView && fullFileView) {
+                stepCodeView.style.display = 'none';
+                fullFileView.style.display = '';
+            }
+        } else {
+            // After activation: Merge edited step code into full file
+            const codeMirrorElement = thebeCell ? thebeCell.querySelector('.CodeMirror') : null;
+            if (codeMirrorElement && codeMirrorElement.CodeMirror) {
+                const cm = codeMirrorElement.CodeMirror;
+
+                // Get current step code (with edits)
+                const currentStepCode = cm.getValue();
+
+                // Rebuild full file with edited step code
+                let rebuiltFullFile = fullFileCode; // fallback to original
+                if (lineRanges && lineRanges.length > 0) {
+                    const currentStepRange = lineRanges.find(r => r.type === 'current-step');
+                    if (currentStepRange) {
+                        const originalLines = fullFileCode.split('\n');
+                        const stepLines = currentStepCode.split('\n');
+
+                        // Replace the step section with edited content
+                        const beforeStep = originalLines.slice(0, currentStepRange.start);
+                        const afterStep = originalLines.slice(currentStepRange.end + 1);
+                        rebuiltFullFile = [...beforeStep, ...stepLines, ...afterStep].join('\n');
+                    }
+                }
+
+                // Save scroll position before setValue to prevent unwanted scroll
+                const scrollY2 = window.scrollY;
+                cm.setValue(rebuiltFullFile);
+                // Restore scroll position after setValue
+                window.scrollTo(0, scrollY2);
+                // Apply read-only markers after a brief delay to ensure text is set
+                setTimeout(function() {
+                    applyReadOnlyMarkers(cm, lineRanges);
+                }, 50);
+            }
+        }
+    }
+}
+</script>
+
diff --git a/local_examples/client-specific/redis-py/landing.py b/local_examples/client-specific/redis-py/landing.py
index 52e342ecd2..afe05b65f4 100644
--- a/local_examples/client-specific/redis-py/landing.py
+++ b/local_examples/client-specific/redis-py/landing.py
@@ -1,8 +1,9 @@
 # EXAMPLE: landing
 # BINDER_ID python-landing
-import redis
+# KERNEL_NAME python3
 
 # STEP_START connect
+import redis
 r = redis.Redis(host='localhost', port=6379, decode_responses=True)
 # STEP_END