@tutorialkit-rb/cli 0.1.4

package/template/ruby-wasm/Gemfile.lock

@@ -0,0 +1,292 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    actioncable (8.0.2)
+      actionpack (= 8.0.2)
+      activesupport (= 8.0.2)
+      nio4r (~> 2.0)
+      websocket-driver (>= 0.6.1)
+      zeitwerk (~> 2.6)
+    actionmailbox (8.0.2)
+      actionpack (= 8.0.2)
+      activejob (= 8.0.2)
+      activerecord (= 8.0.2)
+      activestorage (= 8.0.2)
+      activesupport (= 8.0.2)
+      mail (>= 2.8.0)
+    actionmailer (8.0.2)
+      actionpack (= 8.0.2)
+      actionview (= 8.0.2)
+      activejob (= 8.0.2)
+      activesupport (= 8.0.2)
+      mail (>= 2.8.0)
+      rails-dom-testing (~> 2.2)
+    actionpack (8.0.2)
+      actionview (= 8.0.2)
+      activesupport (= 8.0.2)
+      nokogiri (>= 1.8.5)
+      rack (>= 2.2.4)
+      rack-session (>= 1.0.1)
+      rack-test (>= 0.6.3)
+      rails-dom-testing (~> 2.2)
+      rails-html-sanitizer (~> 1.6)
+      useragent (~> 0.16)
+    actiontext (8.0.2)
+      actionpack (= 8.0.2)
+      activerecord (= 8.0.2)
+      activestorage (= 8.0.2)
+      activesupport (= 8.0.2)
+      globalid (>= 0.6.0)
+      nokogiri (>= 1.8.5)
+    actionview (8.0.2)
+      activesupport (= 8.0.2)
+      builder (~> 3.1)
+      erubi (~> 1.11)
+      rails-dom-testing (~> 2.2)
+      rails-html-sanitizer (~> 1.6)
+    activejob (8.0.2)
+      activesupport (= 8.0.2)
+      globalid (>= 0.3.6)
+    activemodel (8.0.2)
+      activesupport (= 8.0.2)
+    activerecord (8.0.2)
+      activemodel (= 8.0.2)
+      activesupport (= 8.0.2)
+      timeout (>= 0.4.0)
+    activestorage (8.0.2)
+      actionpack (= 8.0.2)
+      activejob (= 8.0.2)
+      activerecord (= 8.0.2)
+      activesupport (= 8.0.2)
+      marcel (~> 1.0)
+    activesupport (8.0.2)
+      base64
+      benchmark (>= 0.3)
+      bigdecimal
+      concurrent-ruby (~> 1.0, >= 1.3.1)
+      connection_pool (>= 2.2.5)
+      drb
+      i18n (>= 1.6, < 2)
+      logger (>= 1.4.2)
+      minitest (>= 5.1)
+      securerandom (>= 0.3)
+      tzinfo (~> 2.0, >= 2.0.5)
+      uri (>= 0.13.1)
+    base64 (0.2.0)
+    bcrypt (3.1.20)
+    benchmark (0.4.0)
+    bigdecimal (3.1.9)
+    builder (3.3.0)
+    concurrent-ruby (1.3.5)
+    connection_pool (2.5.3)
+    crass (1.0.6)
+    date (3.4.1)
+    drb (2.2.1)
+    erubi (1.13.1)
+    et-orbi (1.2.11)
+      tzinfo
+    ffi (1.17.1-aarch64-linux-gnu)
+    ffi (1.17.1-aarch64-linux-musl)
+    ffi (1.17.1-arm-linux-gnu)
+    ffi (1.17.1-arm-linux-musl)
+    ffi (1.17.1-arm64-darwin)
+    ffi (1.17.1-x86_64-darwin)
+    ffi (1.17.1-x86_64-linux-gnu)
+    ffi (1.17.1-x86_64-linux-musl)
+    fugit (1.11.1)
+      et-orbi (~> 1, >= 1.2.11)
+      raabro (~> 1.4)
+    globalid (1.2.1)
+      activesupport (>= 6.1)
+    i18n (1.14.7)
+      concurrent-ruby (~> 1.0)
+    image_processing (1.13.0)
+      mini_magick (>= 4.9.5, < 5)
+      ruby-vips (>= 2.0.17, < 3)
+    importmap-rails (2.1.0)
+      actionpack (>= 6.0.0)
+      activesupport (>= 6.0.0)
+      railties (>= 6.0.0)
+    io-console (0.8.0)
+    irb (1.15.2)
+      pp (>= 0.6.0)
+      rdoc (>= 4.0.0)
+      reline (>= 0.4.2)
+    jbuilder (2.13.0)
+      actionview (>= 5.0.0)
+      activesupport (>= 5.0.0)
+    js (2.7.1)
+    logger (1.7.0)
+    loofah (2.24.0)
+      crass (~> 1.0.2)
+      nokogiri (>= 1.12.0)
+    mail (2.8.1)
+      mini_mime (>= 0.1.1)
+      net-imap
+      net-pop
+      net-smtp
+    marcel (1.0.4)
+    mini_magick (4.13.2)
+    mini_mime (1.1.5)
+    minitest (5.25.5)
+    net-imap (0.5.8)
+      date
+      net-protocol
+    net-pop (0.1.2)
+      net-protocol
+    net-protocol (0.2.2)
+      timeout
+    net-smtp (0.5.1)
+      net-protocol
+    nio4r (2.7.4)
+    nokogiri (1.18.8-aarch64-linux-gnu)
+      racc (~> 1.4)
+    nokogiri (1.18.8-aarch64-linux-musl)
+      racc (~> 1.4)
+    nokogiri (1.18.8-arm-linux-gnu)
+      racc (~> 1.4)
+    nokogiri (1.18.8-arm-linux-musl)
+      racc (~> 1.4)
+    nokogiri (1.18.8-arm64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.18.8-x86_64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.18.8-x86_64-linux-gnu)
+      racc (~> 1.4)
+    nokogiri (1.18.8-x86_64-linux-musl)
+      racc (~> 1.4)
+    pp (0.6.2)
+      prettyprint
+    prettyprint (0.2.0)
+    propshaft (1.1.0)
+      actionpack (>= 7.0.0)
+      activesupport (>= 7.0.0)
+      rack
+      railties (>= 7.0.0)
+    psych (5.2.4)
+      date
+      stringio
+    raabro (1.4.0)
+    racc (1.8.1)
+    rack (3.1.13)
+    rack-session (2.1.1)
+      base64 (>= 0.1.0)
+      rack (>= 3.0.0)
+    rack-test (2.2.0)
+      rack (>= 1.3)
+    rackup (2.2.1)
+      rack (>= 3)
+    rails (8.0.2)
+      actioncable (= 8.0.2)
+      actionmailbox (= 8.0.2)
+      actionmailer (= 8.0.2)
+      actionpack (= 8.0.2)
+      actiontext (= 8.0.2)
+      actionview (= 8.0.2)
+      activejob (= 8.0.2)
+      activemodel (= 8.0.2)
+      activerecord (= 8.0.2)
+      activestorage (= 8.0.2)
+      activesupport (= 8.0.2)
+      bundler (>= 1.15.0)
+      railties (= 8.0.2)
+    rails-dom-testing (2.2.0)
+      activesupport (>= 5.0.0)
+      minitest
+      nokogiri (>= 1.6)
+    rails-html-sanitizer (1.6.2)
+      loofah (~> 2.21)
+      nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
+    railties (8.0.2)
+      actionpack (= 8.0.2)
+      activesupport (= 8.0.2)
+      irb (~> 1.13)
+      rackup (>= 1.0.0)
+      rake (>= 12.2)
+      thor (~> 1.0, >= 1.2.2)
+      zeitwerk (~> 2.6)
+    rake (13.2.1)
+    rdoc (6.13.1)
+      psych (>= 4.0.0)
+    reline (0.6.1)
+      io-console (~> 0.5)
+    ruby-vips (2.2.2)
+      ffi (~> 1.12)
+      logger
+    ruby_wasm (2.7.1)
+    ruby_wasm (2.7.1-aarch64-linux)
+    ruby_wasm (2.7.1-aarch64-linux-musl)
+    ruby_wasm (2.7.1-arm64-darwin)
+    ruby_wasm (2.7.1-x86_64-darwin)
+    ruby_wasm (2.7.1-x86_64-linux)
+    ruby_wasm (2.7.1-x86_64-linux-musl)
+    securerandom (0.4.1)
+    solid_cable (3.0.4)
+      actioncable (>= 7.2)
+      activejob (>= 7.2)
+      activerecord (>= 7.2)
+      railties (>= 7.2)
+    solid_cache (1.0.6)
+      activejob (>= 7.2)
+      activerecord (>= 7.2)
+      railties (>= 7.2)
+    solid_queue (1.1.0)
+      activejob (>= 7.1)
+      activerecord (>= 7.1)
+      concurrent-ruby (>= 1.3.1)
+      fugit (~> 1.11.0)
+      railties (>= 7.1)
+      thor (~> 1.3.1)
+    stimulus-rails (1.3.4)
+      railties (>= 6.0.0)
+    stringio (3.1.7)
+    thor (1.3.2)
+    timeout (0.4.3)
+    turbo-rails (2.0.11)
+      actionpack (>= 6.0.0)
+      railties (>= 6.0.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    tzinfo-data (1.2025.2)
+      tzinfo (>= 1.0.0)
+    uri (1.0.3)
+    useragent (0.16.11)
+    wasmify-rails (0.4.0)
+      js (>= 2.6, < 3.0)
+      railties (>= 7.0, < 9.0)
+      ruby_wasm (>= 2.6, < 3.0)
+    websocket-driver (0.7.7)
+      base64
+      websocket-extensions (>= 0.1.0)
+    websocket-extensions (0.1.5)
+    zeitwerk (2.7.2)
+
+PLATFORMS
+  aarch64-linux
+  aarch64-linux-gnu
+  aarch64-linux-musl
+  arm-linux-gnu
+  arm-linux-musl
+  arm64-darwin
+  x86_64-darwin
+  x86_64-linux
+  x86_64-linux-gnu
+  x86_64-linux-musl
+
+DEPENDENCIES
+  bcrypt (~> 3.1.7)
+  image_processing (~> 1.2)
+  importmap-rails
+  jbuilder
+  propshaft
+  rails (~> 8.0.0)
+  solid_cable
+  solid_cache
+  solid_queue
+  stimulus-rails
+  turbo-rails
+  tzinfo-data
+  wasmify-rails (~> 0.4.0)
+
+BUNDLED WITH
+   2.6.5

package/template/ruby-wasm/README.md

@@ -0,0 +1,19 @@
+To create a `ruby.wasm` module, run the following commands:
+
+```sh
+bundle install
+bin/pack
+```
+
+
+## Prerequisites
+
+To build and pack Ruby Wasm modules, you need the following:
+
+- Rust toolchain:
+
+  ```sh
+  curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+  ```
+
+- [wasi-vfs](https://github.com/kateinoigakukun/wasi-vfs)

package/template/ruby-wasm/bin/pack

@@ -0,0 +1,16 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+
+require "fileutils"
+require "wasmify/rails/builder"
+
+builder = Wasmify::Rails::Builder.new
+builder.run(name: "ruby.wasm")
+
+require "wasmify/rails/packer"
+
+output_dir = ARGV[0] ? ARGV[0] : Wasmify::Rails.config.output_dir
+
+packer = Wasmify::Rails::Packer.new(output_dir:)
+packer.run(name: "ruby.wasm", ruby_wasm_path: File.join(Wasmify::Rails.config.tmp_dir, "ruby.wasm"))

package/template/ruby-wasm/boot.rb

@@ -0,0 +1,32 @@
+# Put all the code required to initialize the Rails Wasm environment
+
+# Common Rails shims
+require "wasmify/rails/shim"
+
+# Load Rails patches
+require "wasmify/rails/patches"
+
+# Setup external commands
+require "wasmify/external_commands"
+
+# Patch Bundler.require to only require precompiled deps
+# (We don't want to deal with group: :wasm here)
+def Bundler.require(*groups)
+  %w[
+    rails
+    wasmify-rails
+    propshaft
+    importmap-rails
+    turbo-rails
+    stimulus-rails
+    jbuilder
+    bcrypt
+    solid_cache
+    solid_queue
+    solid_cable
+    image_processing
+    tzinfo/data
+  ].each do |gem_name|
+    Kernel.require gem_name
+  end
+end

package/template/ruby-wasm/config/wasmify.yml

@@ -0,0 +1,23 @@
+output_dir: "./dist"
+ruby_version: "3.3"
+
+# Specify the list of directories to be included into the final
+# app.wasm file.
+pack_directories: []
+pack_root: "/rails-vm"
+additional_root_files:
+  - boot.rb
+  - .railsrc
+
+# Specify the list of gems to skip during the base module compiliation.
+# Usually, you want to specify the gems with native extensions that are
+# not currently Wasm-compatible.
+exclude_gems:
+  - nio4r
+  - io-console
+  - psych
+
+# Skip building native extensions for the following gems (and keep their Ruby source)
+ignore_gem_extensions:
+  - bigdecimal
+  - date

package/template/src/components/FileManager.tsx

@@ -0,0 +1,165 @@
+import { useStore } from '@nanostores/react';
+import type { WebContainer } from '@webcontainer/api';
+import { useRef, useEffect } from 'react';
+import { webcontainer } from 'tutorialkit:core';
+import tutorialStore from 'tutorialkit:store';
+
+const VERSIONED_WASM_URL = `/ruby.wasm`;
+const GEMFILE_HASH_URL = `/ruby.wasm.hash`;
+const WC_WASM_LOG_PATH = `/ruby.wasm.log.txt`;
+const WC_WASM_PATH = `/ruby.wasm`;
+
+export function FileManager() {
+  const lessonLoaded = useStore(tutorialStore.lessonFullyLoaded);
+  const files = useStore(tutorialStore.files);
+  const processedFiles = useRef(new Set<string>());
+  const wasmCached = useRef(false);
+
+  async function fetchGemfileHash(): Promise<string> {
+    try {
+      console.log(`Fetching Gemfile hash from ${GEMFILE_HASH_URL}...`);
+
+      const response = await fetch(GEMFILE_HASH_URL);
+
+      if (!response.ok) {
+        console.warn(`Failed to fetch ruby.wasm.hash: ${response.status}`);
+        return 'default';
+      }
+
+      const hash = (await response.text()).trim();
+      console.log(`Fetched Gemfile hash: ${hash}`);
+
+      return hash;
+    } catch (error) {
+      console.warn('Failed to fetch Gemfile hash, using default version:', error);
+      return 'default';
+    }
+  }
+
+  function getVersionedCacheFileName(gemfileLockHash: string): string {
+    return `ruby-${gemfileLockHash}.wasm`;
+  }
+
+  async function chmodx(wc: WebContainer, path: string) {
+    const process = await wc.spawn('chmod', ['+x', path]);
+
+    const exitCode = await process.exit;
+
+    if (exitCode !== 0) {
+      console.error(`failed to chmox +x ${path}: `, exitCode);
+    } else {
+      console.log(`updated permissions for: ${path}`);
+    }
+  }
+
+  async function fetchCachedWasmFile(cacheFileName: string): Promise<Uint8Array | null> {
+    try {
+      const opfsRoot = await navigator.storage.getDirectory();
+      const fileHandle = await opfsRoot.getFileHandle(cacheFileName);
+      const file = await fileHandle.getFile();
+      console.log(`Found cached Ruby WASM: ${cacheFileName}`);
+
+      return new Uint8Array(await file.arrayBuffer());
+    } catch {
+      return null;
+    }
+  }
+
+  async function persistWasmFile(wasmData: Uint8Array, cacheFileName: string): Promise<void> {
+    try {
+      const opfsRoot = await navigator.storage.getDirectory();
+      const fileHandle = await opfsRoot.getFileHandle(cacheFileName, { create: true });
+      const writable = await fileHandle.createWritable();
+      await writable.write(wasmData);
+      await writable.close();
+      console.log(`Ruby WASM file ${cacheFileName} cached`);
+    } catch (error) {
+      console.error('Failed to persist Ruby WASM:', error);
+    }
+  }
+
+  async function cleanupOldCacheFiles(currentCacheFileName: string): Promise<void> {
+    try {
+      const opfsRoot = await navigator.storage.getDirectory();
+
+      for await (const [name] of opfsRoot.entries()) {
+        if (
+          ((name.startsWith('ruby-') && name.endsWith('.wasm')) || name === 'ruby.wasm') &&
+          name !== currentCacheFileName
+        ) {
+          console.log(`Removing old cached Ruby WASM: ${name}`);
+          await opfsRoot.removeEntry(name);
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to cleanup old cache files:', error);
+    }
+  }
+
+  async function cacheWasmFile(wc: WebContainer, cacheFileName: string): Promise<void> {
+    console.log(`Dowloading WASM file ${VERSIONED_WASM_URL}...`);
+
+    try {
+      const wasm = await fetch(VERSIONED_WASM_URL);
+      await wc.fs.writeFile(WC_WASM_LOG_PATH, 'status: downloaded');
+
+      const wasmData = new Uint8Array(await wasm.arrayBuffer());
+      await persistWasmFile(wasmData, cacheFileName);
+      await cleanupOldCacheFiles(cacheFileName);
+      await wc.fs.writeFile(WC_WASM_LOG_PATH, 'status: cached');
+      await wc.fs.writeFile(WC_WASM_PATH, wasmData);
+    } catch {
+      await wc.fs.writeFile(WC_WASM_LOG_PATH, 'status: error');
+    }
+  }
+
+  useEffect(() => {
+    if (!lessonLoaded) {
+      return;
+    }
+
+    if (!files) {
+      return;
+    }
+
+    (async () => {
+      const wc = await webcontainer;
+
+      Object.entries(files).forEach(([_, fd]) => {
+        const dir = fd.path.split('/').filter(Boolean).slice(-2, -1)[0];
+
+        if (dir === 'bin' && !processedFiles.current.has(fd.path)) {
+          processedFiles.current = new Set([...processedFiles.current, fd.path]);
+          chmodx(wc, '/home/tutorial' + fd.path);
+        }
+      });
+
+      if (!wasmCached.current) {
+        await wc.fs.writeFile(WC_WASM_LOG_PATH, 'status: init');
+
+        const gemfileLockHash = await fetchGemfileHash();
+        const cacheFileName = getVersionedCacheFileName(gemfileLockHash);
+        console.log(`Using cache file: ${cacheFileName} (hash: ${gemfileLockHash})`);
+
+        const cachedWasm = await fetchCachedWasmFile(cacheFileName);
+
+        if (cachedWasm) {
+          await wc.fs.writeFile(WC_WASM_LOG_PATH, 'status: load from cache');
+          await wc.fs.writeFile(WC_WASM_PATH, cachedWasm);
+          await wc.fs.writeFile(WC_WASM_LOG_PATH, 'status: done');
+          console.log(`Ruby WASM ${cacheFileName} loaded from cache`);
+          wasmCached.current = true;
+        } else {
+          await wc.fs.writeFile(WC_WASM_LOG_PATH, 'status: download');
+          await cacheWasmFile(wc, cacheFileName);
+          await wc.fs.writeFile(WC_WASM_LOG_PATH, 'status: done');
+          wasmCached.current = true;
+        }
+      }
+    })();
+
+    return () => {};
+  }, [lessonLoaded, files]);
+
+  return null;
+}

package/template/src/components/GitHubLink.astro

@@ -0,0 +1,17 @@
+---
+
+---
+
+<a
+  href="https://github.com/evilmartians/rails-tutorial"
+  target="_blank"
+  rel="noopener noreferrer"
+  class="flex items-center font-size-3.5 text-tk-elements-topBar-iconButton-iconColor hover:text-tk-elements-topBar-iconButton-iconColorHover transition-theme bg-tk-elements-topBar-iconButton-backgroundColor hover:bg-tk-elements-topBar-iconButton-backgroundColorHover p-1 rounded-md"
+>
+  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+    <path
+      fill-rule="evenodd"
+      d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+      clip-rule="evenodd"></path>
+  </svg>
+</a>

package/template/src/components/HeadTags.astro

@@ -0,0 +1,65 @@
+<slot name="title" />
+<slot name="links" />
+<slot name="meta" />
+
+<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
+
+<style>
+  /* Rails path links styling */
+  :global(.rails-path-link) {
+    text-decoration: none;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    transition: all 0.2s ease;
+  }
+
+  :global(.rails-path-link code) {
+    color: #0969da;
+    background-color: #f6f8fa;
+    padding: 0.2em 0.4em;
+    border-radius: 0.25rem;
+    font-size: 0.875em;
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+    transition: all 0.2s ease;
+  }
+
+  /* Dark mode support */
+  :global(.dark .rails-path-link code) {
+    color: #58a6ff;
+    background-color: #161b22;
+  }
+
+  /* Hover state */
+  :global(.rails-path-link:hover code) {
+    color: #0860ca;
+    background-color: #e7f1ff;
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+
+  :global(.dark .rails-path-link:hover code) {
+    color: #79c0ff;
+    background-color: #1f2937;
+  }
+
+  /* Active/clicked state */
+  :global(.rails-path-link:active code) {
+    transform: scale(0.98);
+  }
+
+  /* Focus state for accessibility */
+  :global(.rails-path-link:focus) {
+    outline: none;
+  }
+
+  :global(.rails-path-link:focus-visible code) {
+    outline: 2px solid #0969da;
+    outline-offset: 2px;
+  }
+
+  :global(.dark .rails-path-link:focus-visible code) {
+    outline-color: #58a6ff;
+  }
+</style>

package/template/src/components/HelpDropdown.tsx

@@ -0,0 +1,72 @@
+import { useState, useRef, useEffect } from 'react';
+
+export function HelpDropdown() {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const handleReload = () => {
+    window.location.reload();
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center font-size-3.5 text-tk-elements-topBar-iconButton-iconColor hover:text-tk-elements-topBar-iconButton-iconColorHover transition-theme bg-tk-elements-topBar-iconButton-backgroundColor hover:bg-tk-elements-topBar-iconButton-backgroundColorHover p-1 rounded-md"
+        aria-label="Help"
+      >
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="mr-1"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+          <line x1="12" y1="17" x2="12.01" y2="17" />
+        </svg>
+        Help
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-60">
+          <div className="p-4">
+            <div className="mb-4">
+              <p className="text-sm text-gray-700 dark:text-gray-300 mb-2">
+                Something went wrong? Simply reload the page to load the fresh contents of the lesson and continue!
+              </p>
+              <p className="text-xs text-amber-600 dark:text-amber-400 font-medium">
+                Warning: you'll start from the fresh state for this lesson, your custom edits will be lost.
+              </p>
+            </div>
+            <button
+              onClick={handleReload}
+              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded transition-colors"
+            >
+              Reload
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}